refactor settings

4 files changed, 59 insertions, 96 deletions

diff --git a/src/routes/(app)/invoice/[id]/+layout.server.js b/src/routes/(app)/invoice/[id]/+layout.server.js
index 4b6cf97e..dacc44e6 100644
--- a/src/routes/(app)/invoice/[id]/+layout.server.js
+++ b/src/routes/(app)/invoice/[id]/+layout.server.js
@@ -1,9 +1,17 @@
 import Qr from 'qrcode-base64';
 import { get } from '$lib/utils';
+import { redirect } from '@sveltejs/kit';
+
+export async function load({ depends, params, url }) {
+	depends('app:invoice');
 
-export async function load({ params }) {
 	let { id } = params;
 	let invoice = await get(`/invoice?uuid=${id}`);
+	let { amount, received, pending } = invoice;
+
+	let paid = (!amount && (received || pending)) || (amount > 0 && received + pending >= amount);
+	if (paid && !url.pathname.endsWith('paid')) throw redirect(307, `/invoice/${id}/paid`);
+
 	let sm = Qr.drawImg(invoice.text, { size: 300 });
 	let lg = Qr.drawImg(invoice.text, { size: 1200 });
 
diff --git a/src/routes/(app)/invoice/[id]/+page.svelte b/src/routes/(app)/invoice/[id]/+page.svelte
index dec33b62..fadf7270 100644
--- a/src/routes/(app)/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/+page.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { send } from '$lib/socket';
 	import { back, copy, f, get, sat, reverseFormat, s, sats } from '$lib/utils';
-	import { onMount, onDestroy } from 'svelte';
+	import { tick, onMount, onDestroy } from 'svelte';
 	import { browser } from '$app/environment';
 	import { invoices, last } from '$lib/store';
 	import { Avatar, Icon, Heart, Image, Qr } from '$comp';
@@ -11,8 +11,6 @@
 
 	export let data;
 
-	let showQr;
-
 	$: refresh(data);
 	let { invoice, id, user, sm, lg } = data;
 	let {
@@ -27,6 +25,8 @@
 		user: { username, currency }
 	} = invoice;
 
+	let showQr = !amount;
+
 	let src = sm;
 
 	let qr;
@@ -49,14 +49,6 @@
 		tipPercent = (tip / amount) * 100;
 	};
 
-	$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);
 
@@ -66,6 +58,7 @@
 			last.subscribe((v) => {
 				if (!v || subbed) return;
 				subbed = true;
+				console.log('SUBBING', invoice.uuid);
 				send('subscribe', invoice);
 			});
 	});
@@ -88,7 +81,7 @@
 <div class="container mx-auto max-w-lg px-4 space-y-5">
 	<div class="w-full flex">
 		<h1 class="text-secondary block text-2xl flex mx-auto">
-			<div class="my-auto">Pay</div>
+			<div class="my-auto">Send to</div>
 
 			<div>
 				<a href="/{username}" class="text-black font-semibold hover:opacity-80 mx-auto">
@@ -107,6 +100,10 @@
 				<img {src} class:p-4={full} class="w-[300px] mx-auto" bind:this={qr} on:click={toggle} />
 			</div>
 
+			{#if address}
+				<div>{address}</div>
+			{/if}
+
 			<div class="mb-10 flex gap-2 justify-center">
 				<button
 					class="flex rounded-full border py-2 px-5 font-bold hover:opacity-80 mb-2"
diff --git a/src/routes/(app)/invoice/[id]/paid/+page.svelte b/src/routes/(app)/invoice/[id]/paid/+page.svelte
index 4f0a8ed1..60bc4592 100644
--- a/src/routes/(app)/invoice/[id]/paid/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/paid/+page.svelte
@@ -9,41 +9,55 @@
 	import { invoices } from '$lib/store';
 
 	export let data;
-	let { invoice } = data;
-	let { amount, currency, rate, tip } = invoice;
+	let amount, currency, rate, received, pending, tip, user, uuid;
+	$: data && ({ amount, currency, rate, received, pending, tip, user, uuid } = data.invoice);
 
 	toast.pop(0);
 
-	$: amountFiat = parseFloat(((amount * rate) / sats).toFixed(2));
+	$: amountFiat = parseFloat(((received * rate) / sats).toFixed(2));
+	$: 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">
 	<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 mb-6">{$t('invoice.paymentSuccessful')}</h1>
-	<h2 class="text-2xl md:text-3xl font-semibold">
-		{f(amountFiat, currency)}
-		{#if tip}
-			+ {f(tipFiat, currency)}
-		{/if}
-	</h2>
-	<h3 class="text-secondary md:text-lg mb-6 mt-1">
-		{sat(amount)}
-		{#if tip}
-			+{sat(tip)}
-		{/if}
-	</h3>
-	<button
-		class="bg-black text-white rounded-2xl w-20 py-3 font-bold hover:opacity-80"
-		on:click={handleDoneClick}
-	>
-		{$t('invoice.done')}
-	</button>
+	{#if received}
+		<h1 class="text-3xl md:text-4xl font-bold mb-6">{$t('invoice.paymentSuccessful')}</h1>
+		<h2 class="text-2xl md:text-3xl font-semibold">
+			{f(amountFiat, currency)}
+			{#if tip}
+				+ {f(tipFiat, currency)}
+			{/if}
+		</h2>
+		<h3 class="text-secondary md:text-lg mb-6 mt-1">
+			{sat(received)}
+			{#if tip}
+				+{sat(tip)}
+			{/if}
+		</h3>
+	{/if}
+
+	{#if pending}
+		<h1 class="text-3xl md:text-4xl font-bold mb-6">Payment detected</h1>
+		<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 mb-6 mt-1">
+			{sat(pending)}
+			{#if tip}
+				+{sat(tip)}
+			{/if}
+		</h3>
+	{/if}
+
+	<a href={`/${user.username}/receive`}>
+		<button class="bg-black text-white rounded-2xl w-20 py-3 font-bold hover:opacity-80">
+			{$t('invoice.done')}
+		</button>
+	</a>
 </div>
diff --git a/src/routes/(app)/invoice/[id]/pending/+page.svelte b/src/routes/(app)/invoice/[id]/pending/+page.svelte
deleted file mode 100644
index d3970dab..00000000
--- a/src/routes/(app)/invoice/[id]/pending/+page.svelte
+++ /dev/null
@@ -1,56 +0,0 @@
-<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>