more options link for using external wallets

4 files changed, 31 insertions, 17 deletions

diff --git a/src/locales/en.json b/src/locales/en.json
index 687c1424..d525772b 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -274,7 +274,8 @@
     "qr": "QR",
     "copyLink": "Copy Link",
     "copyText": "Copy Text",
-    "openLink": "Open Link",
+    "openLink": "Open Wallet",
+    "moreOptions": "More options",
     "total": "Total",
     "gainLoss": "Gain/Loss",
     "presentValue": "Present Value",
diff --git a/src/routes/(app)/[username]/invoice/[hash]/+layout.server.js b/src/routes/(app)/[username]/invoice/[hash]/+layout.server.js
index 875c4e11..eef24555 100644
--- a/src/routes/(app)/[username]/invoice/[hash]/+layout.server.js
+++ b/src/routes/(app)/[username]/invoice/[hash]/+layout.server.js
@@ -9,7 +9,7 @@ export async function load({ depends, params, url, parent }) {
 	let { hash } = params;
 	let invoice = await get(`/invoice/${hash}`);
 
-	if (user && invoice.uid !== user.id && !url.pathname.includes('tip'))
+	if (user && invoice.uid !== user.id && !url.pathname.includes('tip') && !url.searchParams.get('options'))
 		throw redirect(307, `/send/invoice/${hash}`);
 
 	let { amount, pending, received } = invoice;
diff --git a/src/routes/(app)/[username]/invoice/[hash]/+page.svelte b/src/routes/(app)/[username]/invoice/[hash]/+page.svelte
index 63b4abdb..508550ba 100644
--- a/src/routes/(app)/[username]/invoice/[hash]/+page.svelte
+++ b/src/routes/(app)/[username]/invoice/[hash]/+page.svelte
@@ -179,13 +179,22 @@
 		</div>
 	{/if}
 
-	<div class="text-center">
+	<div class="text-center break-all">
 		<a href={link}>
-			{txt.substr(0, 20)}...{txt.substr(-20)}
+			{txt}
 		</a>
 	</div>
 
 	<div class="w-full flex justify-center gap-2 flex-wrap">
+		<a href={link} class="w-full md:w-auto">
+			<button
+				class="w-full md:w-auto flex justify-center rounded-full border py-3 px-5 hover:opacity-80"
+			>
+				<Icon icon="mobile" style="mr-1 w-6" />
+				<div class="text-secondary">{$t('payments.openLink')}</div>
+			</button>
+		</a>
+
 		<button
 			class="flex rounded-full justify-center border py-3 px-5 hover:opacity-80 w-full md:w-auto"
 			on:click={() => copy(txt)}
@@ -193,14 +202,6 @@
 			<Icon icon="copy" style="mr-1" />
 			<div class="text-secondary">{$t('payments.copyText')}</div></button
 		>
-			<a href={link} class="w-full md:w-auto">
-		<button
-			class="w-full md:w-auto flex justify-center rounded-full border py-3 px-5 hover:opacity-80"
-		>
-				<Icon icon="link" style="mr-1 w-6" />
-				<div class="text-secondary">{$t('payments.openLink')}</div>
-		</button>
-			</a>
 
 		<button
 			class="w-full md:w-auto flex justify-center rounded-full border py-3 px-5 hover:opacity-80"
diff --git a/src/routes/(app)/send/invoice/[id]/+page.svelte b/src/routes/(app)/send/invoice/[id]/+page.svelte
index 1a73405e..554eef6f 100644
--- a/src/routes/(app)/send/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/send/invoice/[id]/+page.svelte
@@ -1,16 +1,16 @@
 <script>
 	import { onDestroy, onMount } from 'svelte';
 	import { t } from '$lib/translations';
-	import { goto } from '$app/navigation';
+	import { goto, invalidateAll } from '$app/navigation';
 	import { pin } from '$lib/store';
 	import { enhance } from '$app/forms';
 	import { Avatar, Icon, Numpad, Spinner } from '$comp';
 	import { page } from '$app/stores';
-	import { back, f, fiat as toFiat, s, sats } from '$lib/utils';
+	import { post, back, f, fiat as toFiat, s, sats } from '$lib/utils';
 	export let data;
 	export let form;
 
-	let { address, rate, payreq, recipient, tip, rates, user } = data;
+	let { address, hash, rate, payreq, recipient, tip, rates, user } = data;
 	let { currency } = user;
 
 	let amount = form?.amount || data.amount;
@@ -27,6 +27,15 @@
 	let loading;
 	let submit = () => (loading = true);
 
+	let external = async () => {
+		let invoice = { type: 'lightning', amount };
+		let { hash } = await post(`/${recipient.username}/invoice`, {
+			invoice
+		});
+
+		goto(`/${recipient.username}/invoice/${hash}`, { invalidateAll: true });
+	};
+
 	$: rate = data.rate * (rates[user.currency] / rates[data.currency]);
 
 	$: update(form);
@@ -40,11 +49,11 @@
 	// 		try {
 	// 			let ndef = new NDEFReader();
 	// 			await ndef.scan();
-  //
+	//
 	// 			ndef.addEventListener('readingerror', (e) => {
 	// 				console.log('nfc error', e);
 	// 			});
-  //
+	//
 	// 			ndef.addEventListener('reading', ({ message, serialNumber }) => {
 	// 				console.log(message, serialNumber);
 	// 			});
@@ -130,4 +139,7 @@
 			{/if}
 		</div>
 	</form>
+  <div class="flex my-20">
+    <button class="mx-auto" on:click={external}>{$t('payments.moreOptions')}</button>
+  </div>
 </div>