handle on-chain deposits

2 files changed, 77 insertions, 16 deletions

diff --git a/src/routes/(app)/invoice/[id]/+page.svelte b/src/routes/(app)/invoice/[id]/+page.svelte
index 463cf31f..dec33b62 100644
--- a/src/routes/(app)/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/+page.svelte
@@ -27,7 +27,7 @@
 		user: { username, currency }
 	} = invoice;
 
-let src = sm;
+	let src = sm;
 
 	let qr;
 	let tipPercent = 0;
@@ -51,9 +51,12 @@ let src = sm;
 
 	$invoices[id] = { amount, id, rate, received, text, tip, username };
 	$: browser &&
+		$invoices[id].amount > 0 &&
 		$invoices[id]?.received >= $invoices[id]?.amount &&
 		goto(($invoices[id].memo === 'launch' && '/launch/purchase') || `/invoice/${id}/paid`);
 
+	$: browser && $invoices[id].pending > 0 && goto(`/invoice/${id}/pending`);
+
 	$: amountFiat = parseFloat(((amount * rate) / sats).toFixed(2));
 	$: tipAmount = ((tip * rate) / sats).toFixed(2);
 
@@ -69,13 +72,13 @@ let src = sm;
 
 	$: link = address ? text : `lightning:${text}`;
 
-  let full;
-  let toggle = () => {
-    screenfull.toggle(qr);
-    full = !full;
-    if (full) src = lg;
-    else src = sm;
-  } 
+	let full;
+	let toggle = () => {
+		screenfull.toggle(qr);
+		full = !full;
+		if (full) src = lg;
+		else src = sm;
+	};
 </script>
 
 <button class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80" on:click={back}>
@@ -101,7 +104,7 @@ let src = sm;
 	<div class="text-center space-y-5">
 		{#if !user || user.username === username || showQr}
 			<div class="mx-auto">
-        <img {src} class:p-4={full} class="w-[300px] mx-auto" bind:this={qr} on:click={toggle} />
+				<img {src} class:p-4={full} class="w-[300px] mx-auto" bind:this={qr} on:click={toggle} />
 			</div>
 
 			<div class="mb-10 flex gap-2 justify-center">
@@ -133,13 +136,15 @@ let src = sm;
 				</div>
 			{/if}
 
-			<div class="flex flex-wrap justify-between font-bold text-2xl !my-8">
-				<span class="mr-1">{$t('invoice.total')}</span>
-				<span
-					>{f(amountFiat + parseFloat(tipAmount), currency)}
-					<span class="text-secondary font-normal">{`${sat(tip + amount)}`}</span></span
-				>
-			</div>
+			{#if amount > 0}
+				<div class="flex flex-wrap justify-between font-bold text-2xl !my-8">
+					<span class="mr-1">{$t('invoice.total')}</span>
+					<span
+						>{f(amountFiat + parseFloat(tipAmount), currency)}
+						<span class="text-secondary font-normal">{`${sat(tip + amount)}`}</span></span
+					>
+				</div>
+			{/if}
 		</div>
 
 		{#if user && user.username !== username}
diff --git a/src/routes/(app)/invoice/[id]/pending/+page.svelte b/src/routes/(app)/invoice/[id]/pending/+page.svelte
new file mode 100644
index 00000000..d3970dab
--- /dev/null
+++ b/src/routes/(app)/invoice/[id]/pending/+page.svelte
@@ -0,0 +1,56 @@
+<script>
+	import { scale } from 'svelte/transition';
+	import { Icon } from '$comp';
+	import { toast } from '@zerodevx/svelte-toast';
+	import { browser } from '$app/environment';
+	import { t } from '$lib/translations';
+	import { f, s, sat, sats } from '$lib/utils';
+	import { goto } from '$app/navigation';
+	import { invoices } from '$lib/store';
+
+	export let data;
+	let { invoice } = data;
+	let { pending, currency, rate, tip } = invoice;
+
+	toast.pop(0);
+
+	$: pendingFiat = parseFloat(((pending * rate) / sats).toFixed(2));
+	$: tipFiat = parseFloat(((tip * rate) / sats).toFixed(2));
+
+	const handleDoneClick = () => {
+		delete $invoices[invoice.uuid];
+		goto(`/${invoice.user.username}/receive`);
+	};
+</script>
+
+<div class="container px-4 text-center mx-auto space-y-5">
+	<div class="flex w-full py-20 max-w-[200px] mx-auto" in:scale={{ start: 0.5 }}>
+		<Icon icon="check" style="mx-auto" />
+	</div>
+
+	<h1 class="text-3xl md:text-4xl font-bold">Payment detected</h1>
+
+	<div>
+		<h2 class="text-2xl md:text-3xl font-semibold">
+			{f(pendingFiat, currency)}
+			{#if tip}
+				+ {f(tipFiat, currency)}
+			{/if}
+		</h2>
+		<h3 class="text-secondary md:text-lg mt-1">
+			{sat(pending)}
+			{#if tip}
+				+{sat(tip)}
+			{/if}
+		</h3>
+	</div>
+
+	<p class="text-xl text-red-600">Pending confirmation</p>
+
+	<button
+		class="bg-black text-white rounded-2xl w-20 py-3 font-bold hover:opacity-80"
+		on:click={handleDoneClick}
+	>
+		{$t('invoice.done')}
+	</button>
+</div>