invoice type toggle

2 files changed, 20 insertions, 15 deletions

diff --git a/src/routes/(app)/payment/[id]/+page.server.js b/src/routes/(app)/payment/[id]/+page.server.js
index cbd7355e..1c90ab69 100644
--- a/src/routes/(app)/payment/[id]/+page.server.js
+++ b/src/routes/(app)/payment/[id]/+page.server.js
@@ -1,6 +1,6 @@
 import { auth, get } from '$lib/utils';
 
 export async function load({ cookies, params }) {
-	let tx = await get(`/payments/${params.id}`, auth(cookies));
-	return { tx };
+	let payment = await get(`/payments/${params.id}`, auth(cookies));
+	return { payment };
 }
diff --git a/src/routes/(app)/payment/[id]/+page.svelte b/src/routes/(app)/payment/[id]/+page.svelte
index a961d14d..da21400a 100644
--- a/src/routes/(app)/payment/[id]/+page.svelte
+++ b/src/routes/(app)/payment/[id]/+page.svelte
@@ -6,33 +6,41 @@
 	import { PUBLIC_EXPLORER as expl } from '$env/static/public';
 
 	export let data;
-	let { user, tx } = data;
+	let { user, payment: p } = data;
 	let { username } = user;
-	let { id, amount, created, rate, type, ref, fee, currency } = tx;
+	let { id, amount, created, rate, type, ref, fee, currency } = p;
 	fee = fee || 0;
 
-	let fiat = (Math.abs(amount) * rate) / sats;
+	let total = amount > 0 ? amount : -amount + fee;
+	let fiat = (total * rate) / sats;
 </script>
 
 <button class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80" on:click={back}>
 	<Icon icon="arrow-left" style="w-10" />
 </button>
 
-<div class="container mx-auto max-w-lg px-4 space-y-2 sm:space-y-5 break-all">
+<div class="container mx-auto max-w-lg px-4 space-y-2 sm:space-y-5 break-all text-center">
 	<h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold mb-10">
 		{$t(amount < 0 ? 'payments.sent' : 'payments.received')}
 	</h1>
 
+	{#if p.with}
+		<div class="flex justify-center">
+			<div class="my-auto">
+				<Avatar user={p.with} />
+			</div>
+			<div class="my-auto ml-1 text-secondary">{p.with.username}</div>
+		</div>
+	{/if}
+
 	<div>
-		<div class="font-bold">{$t('payments.amount')}</div>
 		<div class="text-xl">
 			{f(fiat, currency)}
-			<span class="text-secondary">⚡️{`${s(Math.abs(amount) + fee)}`}</span>
+			<span class="text-secondary">⚡️{`${s(total)}`}</span>
 		</div>
 	</div>
 
 	<div>
-		<div class="font-bold">{$t('payments.date')}</div>
 		<div>
 			{format(new Date(created), 'MMMM d')},
 			{format(new Date(created), 'h:mm aaa')}
@@ -46,17 +54,14 @@
 				{ref}
 			</div>
 		</div>
-	{:else}
+	{:else if type === 'bitcoin'}
 		<div>
-			<div class="font-bold">{$t('payments.id')}</div>
 			<div class="flex">
 				<div>
-					<a href={`${expl}/tx/${id}`} target="_blank" rel="noreferrer" class="text-blue-600"
-						>{id}</a
-					>
+					<a href={`${expl}/payment/${id}`} target="_blank" rel="noreferrer">{id}</a>
 				</div>
 				<button class="flex font-bold hover:opacity-80 mb-auto" on:click={() => copy(id)}
-					><Icon icon="copy" style="mr-1" />
+					><Icon icon="copy" style="ml-2" />
 				</button>
 			</div>
 		</div>