invoice type toggle

8 files changed, 75 insertions, 32 deletions

diff --git a/src/lib/invoice.js b/src/lib/invoice.js
index bb75d4cb..23ce1757 100644
--- a/src/lib/invoice.js
+++ b/src/lib/invoice.js
@@ -11,7 +11,7 @@ export default async ({ cookies, request, url }) => {
 
 	let invoice = {
 		amount,
-		tip: parseInt(form.get('tip')),
+		tip: parseInt(form.get('tip')) || 0,
 		type: form.get('type'),
 		prompt: form.get('prompt') === 'true',
 		rate: parseFloat(form.get('rate')) || rates[form.get('currency')],
diff --git a/src/lib/utils.js b/src/lib/utils.js
index 80f7fe07..b3bb29ec 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -231,3 +231,11 @@ export function ss(str1, str2) {
 
 	return 0.0;
 }
+
+export const types = {
+	bitcoin: 'bitcoin',
+	lightning: 'lightning',
+	internal: 'internal',
+	pot: 'pot',
+	classic: 'classic'
+};
diff --git a/src/locales/en.json b/src/locales/en.json
index 7e7c235b..17f4b34e 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -263,7 +263,7 @@
 		"id": "Transaction ID",
 		"details": "Transaction Details",
 		"header": "Payments",
-		"preimage": "Preimage",
+		"preimage": "Proof of payment",
 		"type": "Type",
 		"time": "Time",
 		"sent": "Sent",
diff --git a/src/routes/(app)/[username]/invoice/[hash]/+page.svelte b/src/routes/(app)/[username]/invoice/[hash]/+page.svelte
index ad9721e7..b5571f23 100644
--- a/src/routes/(app)/[username]/invoice/[hash]/+page.svelte
+++ b/src/routes/(app)/[username]/invoice/[hash]/+page.svelte
@@ -1,12 +1,14 @@
 <script>
+	import { enhance } from '$app/forms';
 	import { send } from '$lib/socket';
-	import { back, copy, f, get, sat, reverseFormat, s, sats } from '$lib/utils';
+	import { post, back, copy, f, get, types, sat, reverseFormat, s, sats } from '$lib/utils';
 	import { tick, onMount, onDestroy } from 'svelte';
 	import { browser } from '$app/environment';
 	import { last } from '$lib/store';
 	import { Avatar, Icon, Heart, Image } from '$comp';
 	import { t } from '$lib/translations';
 	import screenfull from 'screenfull';
+	import { goto, invalidate } from '$app/navigation';
 
 	export let data;
 
@@ -21,18 +23,19 @@
 		prompt,
 		text,
 		tip,
+		request_id,
 		user: { username, currency }
 	} = invoice;
 
 	let showQr = !amount;
 
-	let src = sm;
+	$: src = sm;
 
 	let qr;
 	let tipPercent = 0;
 
 	let refresh = (data) => {
-		({ invoice, id } = data);
+		({ invoice, id, user, sm, lg } = data);
 		({
 			amount,
 			hash,
@@ -71,9 +74,43 @@
 		if (full) src = lg;
 		else src = sm;
 	};
+
+	let toggleType = async () => {
+		invoice.type = invoice.type === types.lightning ? types.bitcoin : types.lightning;
+		({ hash } = await post(`/${username}/invoice`, {
+			invoice,
+			user: { username, currency }
+		}));
+
+		goto(`./${hash}`, { invalidateAll: true });
+	};
 </script>
 
 <div class="container mx-auto max-w-lg px-4 space-y-5">
+	<div class="whitespace-nowrap my-auto ml-auto flex gap-2">
+		<button
+			class="rounded-full border py-2 px-4 font-bold hover:opacity-80 w-full"
+			class:bg-black={type === types.lightning}
+			class:text-white={type === types.lightning}
+			on:click={toggleType}
+		>
+			⚡️ Lightning
+		</button>
+
+		<button
+			class="rounded-full border py-2 px-4 font-bold hover:opacity-80 w-full flex justify-center "
+			class:bg-black={type === types.bitcoin}
+			class:text-white={type === types.bitcoin}
+			on:click={toggleType}
+		>
+			<img
+				src="/images/bitcoin.svg"
+				class="my-auto w-8 border-4 border-transparent"
+				alt="Bitcoin"
+			/>
+			<div class="my-auto">Bitcoin</div>
+		</button>
+	</div>
 	<div class="relative flex">
 		<div class="flex mx-auto w-[360px] h-[360px]">
 			<img
diff --git a/src/routes/(app)/[username]/payments/[...page]/+page.svelte b/src/routes/(app)/[username]/payments/[...page]/+page.svelte
index 142be4c4..2068c306 100644
--- a/src/routes/(app)/[username]/payments/[...page]/+page.svelte
+++ b/src/routes/(app)/[username]/payments/[...page]/+page.svelte
@@ -180,14 +180,12 @@
 									</div>
 								</a>
 							{:else if p.with}
-								<a href={`/${p.with.username}`}>
-									<div class="flex">
-										<div class="my-auto">
-											<Avatar user={p.with} size={12} />
-										</div>
-										<div class="my-auto ml-1 text-secondary">{p.with.username}</div>
+								<div class="flex">
+									<div class="my-auto">
+										<Avatar user={p.with} size={12} disabled={true} />
 									</div>
-								</a>
+									<div class="my-auto ml-1 text-secondary">{p.with.username}</div>
+								</div>
 							{:else if p.type === types.classic}
 								<img
 									src="/images/classic.png"
diff --git a/src/routes/(app)/[username]/receive/[...param]/+page.svelte b/src/routes/(app)/[username]/receive/[...param]/+page.svelte
index 99d95be0..95495368 100644
--- a/src/routes/(app)/[username]/receive/[...param]/+page.svelte
+++ b/src/routes/(app)/[username]/receive/[...param]/+page.svelte
@@ -46,10 +46,5 @@
 		>
 			{amount ? $t('payments.next') : $t('payments.sendersChoice')}
 		</button>
-
-		<div class="w-full flex justify-center">
-			<span class="font-bold mr-2">{type[0].toUpperCase() + type.substring(1, type.length)}</span>
-			<Toggle id="prompt" checked={lightning} bind:value={lightning} />
-		</div>
 	</div>
 </form>
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>