From 222bbc9080fbb15861cc5c0802449fcf06a53532 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Sat, 7 Oct 2023 23:30:52 -0700
Subject: fix more options invoices

---
 .../[username]/invoice/[hash]/+layout.server.js    |  25 ---
 .../(app)/[username]/invoice/[hash]/+layout.svelte |   1 -
 .../[username]/invoice/[hash]/+page.server.js      |   5 -
 .../(app)/[username]/invoice/[hash]/+page.svelte   | 217 ---------------------
 .../[username]/invoice/[hash]/paid/+page.svelte    |  65 ------
 .../[username]/invoice/[hash]/tip/+page.server.js  |  11 --
 .../[username]/invoice/[hash]/tip/+page.svelte     | 201 -------------------
 .../[username]/invoice/[id]/+layout.server.js      |  31 +++
 .../(app)/[username]/invoice/[id]/+layout.svelte   |   1 +
 .../(app)/[username]/invoice/[id]/+page.server.js  |   5 +
 .../(app)/[username]/invoice/[id]/+page.svelte     | 217 +++++++++++++++++++++
 .../[username]/invoice/[id]/paid/+page.svelte      |  64 ++++++
 .../[username]/invoice/[id]/tip/+page.server.js    |  11 ++
 .../(app)/[username]/invoice/[id]/tip/+page.svelte | 201 +++++++++++++++++++
 src/routes/(app)/send/invoice/[id]/+page.svelte    |  15 +-
 15 files changed, 538 insertions(+), 532 deletions(-)
 delete mode 100644 src/routes/(app)/[username]/invoice/[hash]/+layout.server.js
 delete mode 100644 src/routes/(app)/[username]/invoice/[hash]/+layout.svelte
 delete mode 100644 src/routes/(app)/[username]/invoice/[hash]/+page.server.js
 delete mode 100644 src/routes/(app)/[username]/invoice/[hash]/+page.svelte
 delete mode 100644 src/routes/(app)/[username]/invoice/[hash]/paid/+page.svelte
 delete mode 100644 src/routes/(app)/[username]/invoice/[hash]/tip/+page.server.js
 delete mode 100644 src/routes/(app)/[username]/invoice/[hash]/tip/+page.svelte
 create mode 100644 src/routes/(app)/[username]/invoice/[id]/+layout.server.js
 create mode 100644 src/routes/(app)/[username]/invoice/[id]/+layout.svelte
 create mode 100644 src/routes/(app)/[username]/invoice/[id]/+page.server.js
 create mode 100644 src/routes/(app)/[username]/invoice/[id]/+page.svelte
 create mode 100644 src/routes/(app)/[username]/invoice/[id]/paid/+page.svelte
 create mode 100644 src/routes/(app)/[username]/invoice/[id]/tip/+page.server.js
 create mode 100644 src/routes/(app)/[username]/invoice/[id]/tip/+page.svelte

diff --git a/src/routes/(app)/[username]/invoice/[hash]/+layout.server.js b/src/routes/(app)/[username]/invoice/[hash]/+layout.server.js
deleted file mode 100644
index eef24555..00000000
--- a/src/routes/(app)/[username]/invoice/[hash]/+layout.server.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import Qr from 'qrcode-base64';
-import { get } from '$lib/utils';
-import { redirect } from '@sveltejs/kit';
-
-export async function load({ depends, params, url, parent }) {
-	depends('app:invoice');
-
-	let { user } = await parent();
-	let { hash } = params;
-	let invoice = await get(`/invoice/${hash}`);
-
-	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;
-	amount = parseInt(amount);
-
-	let paid = (!amount && received) || (amount > 0 && (pending >= amount || received >= amount));
-	if (paid && !url.pathname.endsWith('paid'))
-		throw redirect(307, `/${params.username}/invoice/${hash}/paid`);
-
-	let sm = Qr.drawImg(invoice.text || '', { size: 300 });
-
-	return { hash, invoice, sm, lg: sm };
-}
diff --git a/src/routes/(app)/[username]/invoice/[hash]/+layout.svelte b/src/routes/(app)/[username]/invoice/[hash]/+layout.svelte
deleted file mode 100644
index 4fa864ce..00000000
--- a/src/routes/(app)/[username]/invoice/[hash]/+layout.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<slot />
diff --git a/src/routes/(app)/[username]/invoice/[hash]/+page.server.js b/src/routes/(app)/[username]/invoice/[hash]/+page.server.js
deleted file mode 100644
index 1068f273..00000000
--- a/src/routes/(app)/[username]/invoice/[hash]/+page.server.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import invoice from '$lib/invoice';
-
-export const actions = {
-	default: invoice
-};
diff --git a/src/routes/(app)/[username]/invoice/[hash]/+page.svelte b/src/routes/(app)/[username]/invoice/[hash]/+page.svelte
deleted file mode 100644
index 508550ba..00000000
--- a/src/routes/(app)/[username]/invoice/[hash]/+page.svelte
+++ /dev/null
@@ -1,217 +0,0 @@
-<script>
-	import { enhance } from '$app/forms';
-	import { send } from '$lib/socket';
-	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 { goto, invalidate } from '$app/navigation';
-
-	export let data;
-
-	let ndef;
-
-	let reading = async ({ message, serialNumber }) => {
-		let name = serialNumber.replace(/:/g, '-');
-		let result = await post(`/pot/${name}/withdraw`, { amount, hash, name });
-	};
-
-	let readingerror = (e) => console.log('nfc error', e);
-
-	$: refresh(data);
-	let { invoice, id, user, sm, lg } = data;
-	let {
-		amount,
-		hash,
-		type,
-		rate,
-		received,
-		prompt,
-		text,
-		tip,
-		request_id,
-		user: { username, currency }
-	} = invoice;
-
-	$: showQr = invoice.uid === user?.id;
-
-	$: src = sm;
-
-	let qr;
-	let tipPercent = 0;
-
-	let refresh = async (data) => {
-		({ invoice, id, user, sm, lg } = data);
-		({
-			amount,
-			hash,
-			type,
-			rate,
-			received,
-			prompt,
-			text,
-			tip,
-			user: { username, currency }
-		} = invoice);
-
-		tipPercent = (tip / amount) * 100;
-
-		// if (browser && window.NDEFReader) {
-		// 	try {
-		// 		ndef = new NDEFReader();
-		// 		await ndef.scan();
-		//
-		// 		ndef.removeEventListener('readingerror', readingerror);
-		// 		ndef.removeEventListener('reading', reading);
-		//
-		// 		ndef.addEventListener('readingerror', readingerror);
-		// 		ndef.addEventListener('reading', reading);
-		// 	} catch (e) {
-		// 		console.log(e);
-		// 	}
-		// }
-	};
-
-	$: amountFiat = parseFloat(((amount * rate) / sats).toFixed(2));
-	$: tipAmount = ((tip * rate) / sats).toFixed(2);
-
-	let subbed;
-
-	onMount(async () => {
-		if (browser) {
-			last.subscribe((v) => {
-				if (!v || subbed) return;
-				subbed = true;
-				send('subscribe', invoice);
-			});
-		}
-	});
-
-	onDestroy(() => {
-		if (ndef) {
-			ndef.removeEventListener('readingerror', readingerror);
-			ndef.removeEventListener('reading', reading);
-		}
-	});
-
-	$: link = type === 'bitcoin' ? text : `lightning:${text}`;
-	$: txt = type === 'bitcoin' ? hash : text;
-
-	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-8">
-	<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>
-
-	{#if showQr}
-		<div>
-			<a href={invoice.type === 'bitcoin' ? invoice.text : 'lightning:' + invoice.text}>
-				<div class="relative flex">
-					<div class="flex mx-auto w-[360px] h-[360px]">
-						<img
-							{src}
-							class="w-[300px] h-[300px] mx-auto z-10 mt-[20px]"
-							bind:this={qr}
-							alt={txt}
-						/>
-					</div>
-					<div
-						class="absolute m-auto left-0 right-0 w-[340px] h-[340px] rounded-full bg-gradient-to-r from-[#F2F6FC] to-[#E1E3FF] z-0"
-					/>
-				</div>
-			</a>
-		</div>
-	{/if}
-
-	{#if amount > 0}
-		<div class="text-center font-bold text-2xl">
-			<div>
-				{f(amountFiat, currency)}
-
-				{#if tip}
-					<span class="text-sm">
-						+{f(tip * (rate / sats), currency)}
-					</span>
-				{/if}
-			</div>
-			<div>
-				<span class="text-secondary font-normal text-lg">{`${sat(amount)}`}</span>
-
-				{#if tip}
-					<span class="text-sm text-secondary font-normal">
-						+{sat(tip)}
-					</span>
-				{/if}
-			</div>
-		</div>
-	{/if}
-
-	<div class="text-center break-all">
-		<a href={link}>
-			{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)}
-		>
-			<Icon icon="copy" style="mr-1" />
-			<div class="text-secondary">{$t('payments.copyText')}</div></button
-		>
-
-		<button
-			class="w-full md:w-auto flex justify-center rounded-full border py-3 px-5 hover:opacity-80"
-			on:click={() => (showQr = !showQr)}
-		>
-			<Icon icon="qr" style="mr-1 invert" />
-			<div class="text-secondary">
-				{showQr ? $t('payments.hide') : $t('payments.show')}
-				{$t('payments.qr')}
-			</div></button
-		>
-	</div>
-</div>
diff --git a/src/routes/(app)/[username]/invoice/[hash]/paid/+page.svelte b/src/routes/(app)/[username]/invoice/[hash]/paid/+page.svelte
deleted file mode 100644
index 969fb6c7..00000000
--- a/src/routes/(app)/[username]/invoice/[hash]/paid/+page.svelte
+++ /dev/null
@@ -1,65 +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 { fiat, f, s, sat, sats } from '$lib/utils';
-	import { goto } from '$app/navigation';
-
-	export let data;
-	let amount, currency, rate, received, pending, tip, user, id;
-	$: data && ({ amount, currency, rate, received, pending, tip, user, id } = data.invoice);
-
-	toast.pop(0);
-</script>
-
-<div class="container px-4 text-center mx-auto">
-	<div class="flex w-full py-5 max-w-[200px] mx-auto" in:scale={{ start: 0.5 }}>
-		<Icon icon="check" style="mx-auto" />
-	</div>
-	{#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(fiat(received - tip, rate), currency)}
-			{#if tip}
-				<span class="text-lg">
-					+ {f(fiat(tip, rate), currency)}
-				</span>
-			{/if}
-		</h2>
-		<h3 class="text-secondary md:text-lg mb-6 mt-1">
-			⚡️{s(received - tip)}
-
-			{#if tip}
-				<span class="text-lg">
-					+ ⚡️{s(tip)}
-				</span>
-			{/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(fiat(pending - tip, rate), currency)}
-			{#if tip}
-				+ {f(fiat(tip, rate), currency)}
-			{/if}
-		</h2>
-		<h3 class="text-secondary md:text-lg mb-6 mt-1">
-			⚡️{s(pending - tip)}
-			{#if tip}
-				<span class="text-lg">
-					+ ⚡️{s(tip)}
-				</span>
-			{/if}
-		</h3>
-	{/if}
-</div>
-
-<a href={`/${user.username}/payments`}>
-	<div class="opacity-0 w-screen h-screen fixed top-0 left-0 z-50" />
-</a>
-
-<div class="fixed bottom-10 w-full text-center">{$t('payments.tapAnywhere')}</div>
diff --git a/src/routes/(app)/[username]/invoice/[hash]/tip/+page.server.js b/src/routes/(app)/[username]/invoice/[hash]/tip/+page.server.js
deleted file mode 100644
index 814900fb..00000000
--- a/src/routes/(app)/[username]/invoice/[hash]/tip/+page.server.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import invoice from '$lib/invoice';
-import { redirect } from '@sveltejs/kit';
-
-export async function load({ parent, params }) {
-	let { invoice } = await parent();
-	if (!invoice.amount) throw redirect(307, `/${params.username}/invoice/${invoice.id}`);
-}
-
-export const actions = {
-	default: invoice
-};
diff --git a/src/routes/(app)/[username]/invoice/[hash]/tip/+page.svelte b/src/routes/(app)/[username]/invoice/[hash]/tip/+page.svelte
deleted file mode 100644
index fe6c67be..00000000
--- a/src/routes/(app)/[username]/invoice/[hash]/tip/+page.svelte
+++ /dev/null
@@ -1,201 +0,0 @@
-<script>
-	import { onMount } from 'svelte';
-	import { browser } from '$app/environment';
-	import { invoice as inv, request } from '$lib/store';
-	import { copy, focus, f, sat, get, reverseFormat, s, sats } from '$lib/utils';
-	import { Icon, Slider } from '$comp';
-	import { goto } from '$app/navigation';
-	import { t } from '$lib/translations';
-	import { enhance } from '$app/forms';
-	import { tick } from 'svelte';
-
-	const tipAmounts = ['No', '10%', '15%', '20%'];
-	let showCustomAmount;
-
-	let customInput;
-	let customTipAmount;
-
-	let apply = async () => {
-		if (customTipAmount > 0) {
-			tipPercent = (customTipAmount / amountFiat) * 100;
-			showCustomAmount = false;
-		}
-	};
-
-	let active = (amount) =>
-		!customTipAmount && Math.round(tipPercent) === parseInt(amount.slice(0, 2));
-
-	const handleCustomTipAmount = (e) => {
-		tipPercent = 0;
-		customTipAmount = e.target.value;
-	};
-
-	let timeout;
-	const handleSlide = (e) => {
-		customTipAmount = '';
-		if (customInput) {
-			customInput.value = '';
-		}
-		tipPercent = e.target.value;
-	};
-
-	let submitting;
-	const handleTipButtonClick = async (amount) => {
-		submitting = true;
-		if (amount === 'No') {
-			tipPercent = 0;
-		} else {
-			tipPercent = parseInt(amount.slice(0, 2));
-		}
-
-		await tick();
-		submit.click();
-	};
-
-	let submit;
-
-	export let data;
-	$: refresh(data);
-	let { invoice, id, user, rates } = data;
-	let {
-		amount,
-		hash,
-		type,
-		rate,
-		received,
-		prompt,
-		text,
-		tip,
-		user: { username, currency }
-	} = invoice;
-
-	let qr;
-	let tipPercent = 0;
-
-	let fullscreen;
-
-	let refresh = (data) => {
-		$inv = null;
-
-		({ invoice, id } = data);
-		({
-			amount,
-			hash,
-			type,
-			received,
-			prompt,
-			text,
-			tip,
-			user: { username }
-		} = invoice);
-
-		tipPercent = (tip / amount) * 100;
-	};
-
-	$: currency = user?.currency || invoice.currency;
-	$: rate = invoice.rate * (rates[currency] / rates[invoice.currency]);
-
-	$: tip = Math.round((amount / 100) * tipPercent);
-
-	$: amountFiat = parseFloat(((amount * rate) / sats).toFixed(2));
-
-	$: tipAmount = ((tip * rate) / sats).toFixed(2);
-
-	$: invoiceAmountFiatFormatted = f(amountFiat, currency);
-
-	onMount(() => ($request = undefined));
-</script>
-
-<div class="container px-4 max-w-lg text-center mx-auto">
-	<form method="POST" use:enhance class:invisible={submitting}>
-		<input type="hidden" name="amount" value={amount} />
-		<input type="hidden" name="tip" value={tip} />
-		<input type="hidden" name="username" value={username} />
-		<input type="hidden" name="rate" value={invoice.rate} />
-		<input type="hidden" name="prompt" value="false" />
-		<input type="hidden" name="type" value={type} />
-		<input type="hidden" name="hash" value={hash} />
-
-		<input type="hidden" name="request_id" value={invoice.request?.id} />
-
-		<h1 class="text-4xl font-semibold my-8">{$t('invoice.addTipq')}</h1>
-		{#if !showCustomAmount}
-			<div class="my-2 text-xl">{Math.round(tipPercent)}%</div>
-
-			<Slider handle={handleSlide} bind:value={tipPercent} />
-
-			<div class="flex mb-8 text-lg">
-				<div>
-					<span class="mr-1">
-						{f(amountFiat, currency)}
-						<span class="font-semibold">+{f(tipAmount, currency)}</span>
-					</span>
-				</div>
-
-				<div class="ml-auto text-lg">
-					{sat(amount)}
-					<span class="font-semibold">+{sat(tip)}</span>
-				</div>
-			</div>
-
-			{#if tip}
-				<div>
-					<button type="button" on:click={() => submit.click()}>Next</button>
-					<button type="button" on:click={() => (tipPercent = 0)}>Reset</button>
-				</div>
-			{:else}
-				{#each tipAmounts as amount}
-					<button
-						type="button"
-						class:active={active(amount, tipPercent)}
-						on:click={() => handleTipButtonClick(amount)}>{amount}</button
-					>
-				{/each}
-			{/if}
-
-			<div>
-				<button type="button" on:click={() => (showCustomAmount = true)}>Custom</button>
-			</div>
-		{/if}
-
-		<button type="submit" bind:this={submit} />
-	</form>
-
-	{#if showCustomAmount}
-		<form on:submit|preventDefault={apply}>
-			<div class="relative">
-				<span
-					class="absolute top-[18px] left-5 font-semibold {!customTipAmount
-						? 'opacity-50'
-						: 'opacity-100'}">$</span
-				>
-				<input
-					bind:this={customInput}
-					type="number"
-					step="0.01"
-					on:input={(e) => handleCustomTipAmount(e)}
-					class="pl-10"
-					placeholder="Custom amount"
-					use:focus
-				/>
-				<button
-					type="submit"
-					class="w-full mt-2 bg-black text-white font-semibold py-3 px-7 rounded-2xl {!customTipAmount
-						? 'opacity-50'
-						: 'opacity-100 hover:opacity-80'}"
-					disabled={!customTipAmount}>Apply</button
-				>
-			</div>
-		</form>
-	{/if}
-</div>
-
-<style>
-	.active {
-		@apply !bg-black !text-white;
-	}
-
-	.container button[type='button'] {
-		@apply w-full mt-2 bg-primary text-black hover:bg-black hover:text-white font-semibold py-5 px-7 rounded-2xl;
-	}
-</style>
diff --git a/src/routes/(app)/[username]/invoice/[id]/+layout.server.js b/src/routes/(app)/[username]/invoice/[id]/+layout.server.js
new file mode 100644
index 00000000..4d7fd3b8
--- /dev/null
+++ b/src/routes/(app)/[username]/invoice/[id]/+layout.server.js
@@ -0,0 +1,31 @@
+import Qr from 'qrcode-base64';
+import { get } from '$lib/utils';
+import { redirect } from '@sveltejs/kit';
+
+export async function load({ depends, params, url, parent }) {
+	depends('app:invoice');
+
+	let { user } = await parent();
+	let { id } = params;
+	let invoice = await get(`/invoice/${id}`);
+	let options = !!url.searchParams.get('options');
+
+	if (user && invoice.uid !== user.id && !url.pathname.includes('tip') && !options) {
+		throw redirect(307, `/send/invoice/${id}`);
+	}
+
+	let { amount, pending, received } = invoice;
+	amount = parseInt(amount);
+
+	let paid = (!amount && received) || (amount > 0 && (pending >= amount || received >= amount));
+	if (paid && !url.pathname.endsWith('paid')) {
+		throw redirect(
+			307,
+			`/${params.username}/invoice/${id}/paid` + (options ? '?options=true' : '')
+		);
+	}
+
+	let sm = Qr.drawImg(invoice.text || '', { size: 300 });
+
+	return { id, invoice, sm, lg: sm };
+}
diff --git a/src/routes/(app)/[username]/invoice/[id]/+layout.svelte b/src/routes/(app)/[username]/invoice/[id]/+layout.svelte
new file mode 100644
index 00000000..4fa864ce
--- /dev/null
+++ b/src/routes/(app)/[username]/invoice/[id]/+layout.svelte
@@ -0,0 +1 @@
+<slot />
diff --git a/src/routes/(app)/[username]/invoice/[id]/+page.server.js b/src/routes/(app)/[username]/invoice/[id]/+page.server.js
new file mode 100644
index 00000000..1068f273
--- /dev/null
+++ b/src/routes/(app)/[username]/invoice/[id]/+page.server.js
@@ -0,0 +1,5 @@
+import invoice from '$lib/invoice';
+
+export const actions = {
+	default: invoice
+};
diff --git a/src/routes/(app)/[username]/invoice/[id]/+page.svelte b/src/routes/(app)/[username]/invoice/[id]/+page.svelte
new file mode 100644
index 00000000..508550ba
--- /dev/null
+++ b/src/routes/(app)/[username]/invoice/[id]/+page.svelte
@@ -0,0 +1,217 @@
+<script>
+	import { enhance } from '$app/forms';
+	import { send } from '$lib/socket';
+	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 { goto, invalidate } from '$app/navigation';
+
+	export let data;
+
+	let ndef;
+
+	let reading = async ({ message, serialNumber }) => {
+		let name = serialNumber.replace(/:/g, '-');
+		let result = await post(`/pot/${name}/withdraw`, { amount, hash, name });
+	};
+
+	let readingerror = (e) => console.log('nfc error', e);
+
+	$: refresh(data);
+	let { invoice, id, user, sm, lg } = data;
+	let {
+		amount,
+		hash,
+		type,
+		rate,
+		received,
+		prompt,
+		text,
+		tip,
+		request_id,
+		user: { username, currency }
+	} = invoice;
+
+	$: showQr = invoice.uid === user?.id;
+
+	$: src = sm;
+
+	let qr;
+	let tipPercent = 0;
+
+	let refresh = async (data) => {
+		({ invoice, id, user, sm, lg } = data);
+		({
+			amount,
+			hash,
+			type,
+			rate,
+			received,
+			prompt,
+			text,
+			tip,
+			user: { username, currency }
+		} = invoice);
+
+		tipPercent = (tip / amount) * 100;
+
+		// if (browser && window.NDEFReader) {
+		// 	try {
+		// 		ndef = new NDEFReader();
+		// 		await ndef.scan();
+		//
+		// 		ndef.removeEventListener('readingerror', readingerror);
+		// 		ndef.removeEventListener('reading', reading);
+		//
+		// 		ndef.addEventListener('readingerror', readingerror);
+		// 		ndef.addEventListener('reading', reading);
+		// 	} catch (e) {
+		// 		console.log(e);
+		// 	}
+		// }
+	};
+
+	$: amountFiat = parseFloat(((amount * rate) / sats).toFixed(2));
+	$: tipAmount = ((tip * rate) / sats).toFixed(2);
+
+	let subbed;
+
+	onMount(async () => {
+		if (browser) {
+			last.subscribe((v) => {
+				if (!v || subbed) return;
+				subbed = true;
+				send('subscribe', invoice);
+			});
+		}
+	});
+
+	onDestroy(() => {
+		if (ndef) {
+			ndef.removeEventListener('readingerror', readingerror);
+			ndef.removeEventListener('reading', reading);
+		}
+	});
+
+	$: link = type === 'bitcoin' ? text : `lightning:${text}`;
+	$: txt = type === 'bitcoin' ? hash : text;
+
+	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-8">
+	<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>
+
+	{#if showQr}
+		<div>
+			<a href={invoice.type === 'bitcoin' ? invoice.text : 'lightning:' + invoice.text}>
+				<div class="relative flex">
+					<div class="flex mx-auto w-[360px] h-[360px]">
+						<img
+							{src}
+							class="w-[300px] h-[300px] mx-auto z-10 mt-[20px]"
+							bind:this={qr}
+							alt={txt}
+						/>
+					</div>
+					<div
+						class="absolute m-auto left-0 right-0 w-[340px] h-[340px] rounded-full bg-gradient-to-r from-[#F2F6FC] to-[#E1E3FF] z-0"
+					/>
+				</div>
+			</a>
+		</div>
+	{/if}
+
+	{#if amount > 0}
+		<div class="text-center font-bold text-2xl">
+			<div>
+				{f(amountFiat, currency)}
+
+				{#if tip}
+					<span class="text-sm">
+						+{f(tip * (rate / sats), currency)}
+					</span>
+				{/if}
+			</div>
+			<div>
+				<span class="text-secondary font-normal text-lg">{`${sat(amount)}`}</span>
+
+				{#if tip}
+					<span class="text-sm text-secondary font-normal">
+						+{sat(tip)}
+					</span>
+				{/if}
+			</div>
+		</div>
+	{/if}
+
+	<div class="text-center break-all">
+		<a href={link}>
+			{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)}
+		>
+			<Icon icon="copy" style="mr-1" />
+			<div class="text-secondary">{$t('payments.copyText')}</div></button
+		>
+
+		<button
+			class="w-full md:w-auto flex justify-center rounded-full border py-3 px-5 hover:opacity-80"
+			on:click={() => (showQr = !showQr)}
+		>
+			<Icon icon="qr" style="mr-1 invert" />
+			<div class="text-secondary">
+				{showQr ? $t('payments.hide') : $t('payments.show')}
+				{$t('payments.qr')}
+			</div></button
+		>
+	</div>
+</div>
diff --git a/src/routes/(app)/[username]/invoice/[id]/paid/+page.svelte b/src/routes/(app)/[username]/invoice/[id]/paid/+page.svelte
new file mode 100644
index 00000000..84e493d9
--- /dev/null
+++ b/src/routes/(app)/[username]/invoice/[id]/paid/+page.svelte
@@ -0,0 +1,64 @@
+<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 { fiat, f, s, sat, sats } from '$lib/utils';
+
+	export let data;
+	let amount, currency, rate, received, pending, tip, user, id;
+	$: data && ({ amount, currency, rate, received, pending, tip, user, id } = data.invoice);
+
+	toast.pop(0);
+</script>
+
+<div class="container px-4 text-center mx-auto">
+	<div class="flex w-full py-5 max-w-[200px] mx-auto" in:scale={{ start: 0.5 }}>
+		<Icon icon="check" style="mx-auto" />
+	</div>
+	{#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(fiat(received - tip, rate), currency)}
+			{#if tip}
+				<span class="text-lg">
+					+ {f(fiat(tip, rate), currency)}
+				</span>
+			{/if}
+		</h2>
+		<h3 class="text-secondary md:text-lg mb-6 mt-1">
+			⚡️{s(received - tip)}
+
+			{#if tip}
+				<span class="text-lg">
+					+ ⚡️{s(tip)}
+				</span>
+			{/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(fiat(pending - tip, rate), currency)}
+			{#if tip}
+				+ {f(fiat(tip, rate), currency)}
+			{/if}
+		</h2>
+		<h3 class="text-secondary md:text-lg mb-6 mt-1">
+			⚡️{s(pending - tip)}
+			{#if tip}
+				<span class="text-lg">
+					+ ⚡️{s(tip)}
+				</span>
+			{/if}
+		</h3>
+	{/if}
+</div>
+
+<a href={`/${user.username}/payments`}>
+	<div class="opacity-0 w-screen h-screen fixed top-0 left-0 z-50" />
+</a>
+
+<div class="fixed bottom-10 w-full text-center">{$t('payments.tapAnywhere')}</div>
diff --git a/src/routes/(app)/[username]/invoice/[id]/tip/+page.server.js b/src/routes/(app)/[username]/invoice/[id]/tip/+page.server.js
new file mode 100644
index 00000000..814900fb
--- /dev/null
+++ b/src/routes/(app)/[username]/invoice/[id]/tip/+page.server.js
@@ -0,0 +1,11 @@
+import invoice from '$lib/invoice';
+import { redirect } from '@sveltejs/kit';
+
+export async function load({ parent, params }) {
+	let { invoice } = await parent();
+	if (!invoice.amount) throw redirect(307, `/${params.username}/invoice/${invoice.id}`);
+}
+
+export const actions = {
+	default: invoice
+};
diff --git a/src/routes/(app)/[username]/invoice/[id]/tip/+page.svelte b/src/routes/(app)/[username]/invoice/[id]/tip/+page.svelte
new file mode 100644
index 00000000..fe6c67be
--- /dev/null
+++ b/src/routes/(app)/[username]/invoice/[id]/tip/+page.svelte
@@ -0,0 +1,201 @@
+<script>
+	import { onMount } from 'svelte';
+	import { browser } from '$app/environment';
+	import { invoice as inv, request } from '$lib/store';
+	import { copy, focus, f, sat, get, reverseFormat, s, sats } from '$lib/utils';
+	import { Icon, Slider } from '$comp';
+	import { goto } from '$app/navigation';
+	import { t } from '$lib/translations';
+	import { enhance } from '$app/forms';
+	import { tick } from 'svelte';
+
+	const tipAmounts = ['No', '10%', '15%', '20%'];
+	let showCustomAmount;
+
+	let customInput;
+	let customTipAmount;
+
+	let apply = async () => {
+		if (customTipAmount > 0) {
+			tipPercent = (customTipAmount / amountFiat) * 100;
+			showCustomAmount = false;
+		}
+	};
+
+	let active = (amount) =>
+		!customTipAmount && Math.round(tipPercent) === parseInt(amount.slice(0, 2));
+
+	const handleCustomTipAmount = (e) => {
+		tipPercent = 0;
+		customTipAmount = e.target.value;
+	};
+
+	let timeout;
+	const handleSlide = (e) => {
+		customTipAmount = '';
+		if (customInput) {
+			customInput.value = '';
+		}
+		tipPercent = e.target.value;
+	};
+
+	let submitting;
+	const handleTipButtonClick = async (amount) => {
+		submitting = true;
+		if (amount === 'No') {
+			tipPercent = 0;
+		} else {
+			tipPercent = parseInt(amount.slice(0, 2));
+		}
+
+		await tick();
+		submit.click();
+	};
+
+	let submit;
+
+	export let data;
+	$: refresh(data);
+	let { invoice, id, user, rates } = data;
+	let {
+		amount,
+		hash,
+		type,
+		rate,
+		received,
+		prompt,
+		text,
+		tip,
+		user: { username, currency }
+	} = invoice;
+
+	let qr;
+	let tipPercent = 0;
+
+	let fullscreen;
+
+	let refresh = (data) => {
+		$inv = null;
+
+		({ invoice, id } = data);
+		({
+			amount,
+			hash,
+			type,
+			received,
+			prompt,
+			text,
+			tip,
+			user: { username }
+		} = invoice);
+
+		tipPercent = (tip / amount) * 100;
+	};
+
+	$: currency = user?.currency || invoice.currency;
+	$: rate = invoice.rate * (rates[currency] / rates[invoice.currency]);
+
+	$: tip = Math.round((amount / 100) * tipPercent);
+
+	$: amountFiat = parseFloat(((amount * rate) / sats).toFixed(2));
+
+	$: tipAmount = ((tip * rate) / sats).toFixed(2);
+
+	$: invoiceAmountFiatFormatted = f(amountFiat, currency);
+
+	onMount(() => ($request = undefined));
+</script>
+
+<div class="container px-4 max-w-lg text-center mx-auto">
+	<form method="POST" use:enhance class:invisible={submitting}>
+		<input type="hidden" name="amount" value={amount} />
+		<input type="hidden" name="tip" value={tip} />
+		<input type="hidden" name="username" value={username} />
+		<input type="hidden" name="rate" value={invoice.rate} />
+		<input type="hidden" name="prompt" value="false" />
+		<input type="hidden" name="type" value={type} />
+		<input type="hidden" name="hash" value={hash} />
+
+		<input type="hidden" name="request_id" value={invoice.request?.id} />
+
+		<h1 class="text-4xl font-semibold my-8">{$t('invoice.addTipq')}</h1>
+		{#if !showCustomAmount}
+			<div class="my-2 text-xl">{Math.round(tipPercent)}%</div>
+
+			<Slider handle={handleSlide} bind:value={tipPercent} />
+
+			<div class="flex mb-8 text-lg">
+				<div>
+					<span class="mr-1">
+						{f(amountFiat, currency)}
+						<span class="font-semibold">+{f(tipAmount, currency)}</span>
+					</span>
+				</div>
+
+				<div class="ml-auto text-lg">
+					{sat(amount)}
+					<span class="font-semibold">+{sat(tip)}</span>
+				</div>
+			</div>
+
+			{#if tip}
+				<div>
+					<button type="button" on:click={() => submit.click()}>Next</button>
+					<button type="button" on:click={() => (tipPercent = 0)}>Reset</button>
+				</div>
+			{:else}
+				{#each tipAmounts as amount}
+					<button
+						type="button"
+						class:active={active(amount, tipPercent)}
+						on:click={() => handleTipButtonClick(amount)}>{amount}</button
+					>
+				{/each}
+			{/if}
+
+			<div>
+				<button type="button" on:click={() => (showCustomAmount = true)}>Custom</button>
+			</div>
+		{/if}
+
+		<button type="submit" bind:this={submit} />
+	</form>
+
+	{#if showCustomAmount}
+		<form on:submit|preventDefault={apply}>
+			<div class="relative">
+				<span
+					class="absolute top-[18px] left-5 font-semibold {!customTipAmount
+						? 'opacity-50'
+						: 'opacity-100'}">$</span
+				>
+				<input
+					bind:this={customInput}
+					type="number"
+					step="0.01"
+					on:input={(e) => handleCustomTipAmount(e)}
+					class="pl-10"
+					placeholder="Custom amount"
+					use:focus
+				/>
+				<button
+					type="submit"
+					class="w-full mt-2 bg-black text-white font-semibold py-3 px-7 rounded-2xl {!customTipAmount
+						? 'opacity-50'
+						: 'opacity-100 hover:opacity-80'}"
+					disabled={!customTipAmount}>Apply</button
+				>
+			</div>
+		</form>
+	{/if}
+</div>
+
+<style>
+	.active {
+		@apply !bg-black !text-white;
+	}
+
+	.container button[type='button'] {
+		@apply w-full mt-2 bg-primary text-black hover:bg-black hover:text-white font-semibold py-5 px-7 rounded-2xl;
+	}
+</style>
diff --git a/src/routes/(app)/send/invoice/[id]/+page.svelte b/src/routes/(app)/send/invoice/[id]/+page.svelte
index 554eef6f..a71c697a 100644
--- a/src/routes/(app)/send/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/send/invoice/[id]/+page.svelte
@@ -28,12 +28,13 @@
 	let submit = () => (loading = true);
 
 	let external = async () => {
-		let invoice = { type: 'lightning', amount };
-		let { hash } = await post(`/${recipient.username}/invoice`, {
-			invoice
+		let invoice = { type: 'lightning', amount, currency };
+    let {id }= await post(`/${recipient.username}/invoice`, {
+			invoice,
+			user: { username: recipient.username }
 		});
 
-		goto(`/${recipient.username}/invoice/${hash}`, { invalidateAll: true });
+		goto(`/${recipient.username}/invoice/${id}?options=true`, { invalidateAll: true });
 	};
 
 	$: rate = data.rate * (rates[user.currency] / rates[data.currency]);
@@ -139,7 +140,7 @@
 			{/if}
 		</div>
 	</form>
-  <div class="flex my-20">
-    <button class="mx-auto" on:click={external}>{$t('payments.moreOptions')}</button>
-  </div>
+	<div class="flex my-20">
+		<button class="mx-auto" on:click={external}>{$t('payments.moreOptions')}</button>
+	</div>
 </div>
-- 
cgit v1.2.3