From 01333bb3f33da6b2c51e910c0fe74637a8c8e24e Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Thu, 2 Feb 2023 23:26:34 -0800
Subject: move invoices, combine profile and dashboard

---
 src/components/AppHeader.svelte                    |   2 +-
 src/components/Balance.svelte                      |  19 ++
 src/components/Invoice.svelte                      |   2 +-
 src/components/Toggle.svelte                       |   3 +-
 src/components/index.js                            |   1 +
 src/lib/invoice.js                                 |   4 +-
 src/lib/socket.js                                  |  11 +-
 src/lib/store.js                                   |   1 +
 src/lib/ticket.js                                  |   2 +-
 src/lib/utils.js                                   |  26 +++
 .../(app)/[username]/(profile)/+layout.svelte      |  99 ++++++--
 src/routes/(app)/[username]/(profile)/+page.svelte |  24 +-
 .../[username]/(profile)/followers/+page.svelte    |   2 +-
 .../[username]/(profile)/follows/+page.svelte      |   2 +-
 .../(app)/[username]/address/+page.server.js       |   4 +-
 .../(app)/[username]/dashboard/+page.server.js     |   8 +-
 src/routes/(app)/[username]/dashboard/+page.svelte |  10 -
 src/routes/(app)/[username]/invoice/+server.js     |   5 +
 .../[username]/invoice/[hash]/+layout.server.js    |  20 ++
 .../(app)/[username]/invoice/[hash]/+layout.svelte |   1 +
 .../[username]/invoice/[hash]/+page.server.js      |   5 +
 .../(app)/[username]/invoice/[hash]/+page.svelte   | 123 ++++++++++
 .../[username]/invoice/[hash]/paid/+page.svelte    |  62 +++++
 .../[username]/invoice/[hash]/tip/+page.server.js  |  11 +
 .../[username]/invoice/[hash]/tip/+page.svelte     | 248 ++++++++++++++++++++
 .../(app)/[username]/invoice/sent/+page.svelte     |  10 +
 .../[username]/receive/[...param]/+page.svelte     |   4 +-
 .../(app)/[username]/request/[id]/+page.server.js  |   2 +-
 .../(app)/[username]/settings/[...tab]/_pos.svelte |   3 +-
 src/routes/(app)/invoice/+server.js                |   5 -
 src/routes/(app)/invoice/[hash]/+layout.server.js  |  19 --
 src/routes/(app)/invoice/[hash]/+layout.svelte     |   1 -
 src/routes/(app)/invoice/[hash]/+page.server.js    |   5 -
 src/routes/(app)/invoice/[hash]/+page.svelte       | 156 -------------
 src/routes/(app)/invoice/[hash]/paid/+page.svelte  |  62 -----
 .../(app)/invoice/[hash]/tip/+page.server.js       |  11 -
 src/routes/(app)/invoice/[hash]/tip/+page.svelte   | 252 ---------------------
 src/routes/(app)/invoice/sent/+page.svelte         |  10 -
 src/routes/(app)/launch/purchase/+page.server.js   |   2 +-
 src/routes/(app)/send/[...text]/+page.svelte       |   3 -
 .../send/user/[username]/[...amount]/+page.svelte  |   2 +-
 41 files changed, 641 insertions(+), 601 deletions(-)
 create mode 100644 src/components/Balance.svelte
 create mode 100644 src/routes/(app)/[username]/invoice/+server.js
 create mode 100644 src/routes/(app)/[username]/invoice/[hash]/+layout.server.js
 create mode 100644 src/routes/(app)/[username]/invoice/[hash]/+layout.svelte
 create mode 100644 src/routes/(app)/[username]/invoice/[hash]/+page.server.js
 create mode 100644 src/routes/(app)/[username]/invoice/[hash]/+page.svelte
 create mode 100644 src/routes/(app)/[username]/invoice/[hash]/paid/+page.svelte
 create mode 100644 src/routes/(app)/[username]/invoice/[hash]/tip/+page.server.js
 create mode 100644 src/routes/(app)/[username]/invoice/[hash]/tip/+page.svelte
 create mode 100644 src/routes/(app)/[username]/invoice/sent/+page.svelte
 delete mode 100644 src/routes/(app)/invoice/+server.js
 delete mode 100644 src/routes/(app)/invoice/[hash]/+layout.server.js
 delete mode 100644 src/routes/(app)/invoice/[hash]/+layout.svelte
 delete mode 100644 src/routes/(app)/invoice/[hash]/+page.server.js
 delete mode 100644 src/routes/(app)/invoice/[hash]/+page.svelte
 delete mode 100644 src/routes/(app)/invoice/[hash]/paid/+page.svelte
 delete mode 100644 src/routes/(app)/invoice/[hash]/tip/+page.server.js
 delete mode 100644 src/routes/(app)/invoice/[hash]/tip/+page.svelte
 delete mode 100644 src/routes/(app)/invoice/sent/+page.svelte

(limited to 'src')

diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index 83571e62..29e96ce1 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -34,7 +34,7 @@
 </script>
 
 <header
-	class="bg-gradient-to-r {$colorTheme} h-[175px] w-full relative bg-cover"
+	class="bg-gradient-to-r {$colorTheme} h-[175px] w-full relative bg-cover mb-20"
 	style:background-image={bg}
 >
 	<nav class="flex justify-end items-center space-x-4 p-5">
diff --git a/src/components/Balance.svelte b/src/components/Balance.svelte
new file mode 100644
index 00000000..5d72bd45
--- /dev/null
+++ b/src/components/Balance.svelte
@@ -0,0 +1,19 @@
+<script>
+	import { f, s, sat, sats } from '$lib/utils';
+	import { animatedRate } from '$lib/store';
+	import { t } from '$lib/translations';
+
+	export let user;
+</script>
+
+<div class="space-y-2">
+	<div class="text-5xl font-bold tabular-nums">
+		{$animatedRate
+			? f((user.balance * $animatedRate) / sats, user.currency)
+			: $t('user.dashboard.fetchingRate')}
+	</div>
+
+	<div class="text-secondary text-2xl">
+		⚡️{s(user.balance)}
+	</div>
+</div>
diff --git a/src/components/Invoice.svelte b/src/components/Invoice.svelte
index a8d9cfc6..b0cd58a2 100644
--- a/src/components/Invoice.svelte
+++ b/src/components/Invoice.svelte
@@ -21,7 +21,7 @@
 				</div>
 			</div>
 			<div class="mx-auto my-auto flex gap-2">
-				<a href={`/invoice/${$invoice.id}/tip`}>
+				<a href={`/${invoice.user.username}/invoice/${$invoice.id}/tip`}>
 					<button class="rounded-full border py-2 px-4 font-bold hover:opacity-80 w-32">
 						{$t('payments.pay')}
 					</button>
diff --git a/src/components/Toggle.svelte b/src/components/Toggle.svelte
index 7f3db2f5..3516e48b 100644
--- a/src/components/Toggle.svelte
+++ b/src/components/Toggle.svelte
@@ -1,11 +1,10 @@
 <script>
 	export let id;
-	export let checked;
 	export let value;
 </script>
 
 <label for={id} class="inline-flex relative items-center mr-5 cursor-pointer">
-	<input type="checkbox" {value} {checked} {id} class="sr-only peer" />
+	<input type="checkbox" bind:checked={value} {id} name={id} class="sr-only peer" />
 	<div
 		class="w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-gray-300 dark:peer-focus:ring-gray-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-gray-600"
 	/>
diff --git a/src/components/index.js b/src/components/index.js
index ea44c7d9..18a821ff 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,3 +1,4 @@
+export { default as Balance } from './Balance.svelte';
 export { default as Lnurlp } from './Lnurlp.svelte';
 export { default as Lnurlw } from './Lnurlw.svelte';
 export { default as Event } from './Event.svelte';
diff --git a/src/lib/invoice.js b/src/lib/invoice.js
index 983cde2a..4c487172 100644
--- a/src/lib/invoice.js
+++ b/src/lib/invoice.js
@@ -29,6 +29,6 @@ export default async ({ cookies, request, url }) => {
 		throw redirect(307, `/${user.username}/request/${request_id}`);
 	}
 
-	if (invoice.prompt) throw redirect(307, `/invoice/${hash}/tip`);
-	else throw redirect(307, `/invoice/${hash}`);
+	if (invoice.prompt) throw redirect(307, `/${user.username}/invoice/${hash}/tip`);
+	else throw redirect(307, `/${user.username}/invoice/${hash}`);
 };
diff --git a/src/lib/socket.js b/src/lib/socket.js
index 4044d2a2..986fc268 100644
--- a/src/lib/socket.js
+++ b/src/lib/socket.js
@@ -60,10 +60,13 @@ export const messages = (data) => ({
 		let { amount, invoice } = data;
 		invalidate('app:invoice');
 
-		let payments = get(payments);
-		let i = payments.findIndex((p) => p.id === data.id);
-		if (~i) (payments[i] = data), payments.set(payments);
-		else newPayment.set(true);
+		let p = get(payments);
+		let i = p.findIndex((p) => p.id === data.id);
+
+		if (~i) {
+			p[i] = data;
+			payments.set(p);
+		} else newPayment.set(true);
 
 		invalidate((url) => url.pathname === '/payments');
 
diff --git a/src/lib/store.js b/src/lib/store.js
index d38eb411..93ac3d47 100644
--- a/src/lib/store.js
+++ b/src/lib/store.js
@@ -32,6 +32,7 @@ const persistLocal = (key, defaultValue) => {
 	return s;
 };
 
+export const animatedRate = writable(0);
 export const avatar = writable();
 export const banner = writable();
 export const colorTheme = writable('from-primary to-gradient');
diff --git a/src/lib/ticket.js b/src/lib/ticket.js
index 708c10f4..e1ebcb8c 100644
--- a/src/lib/ticket.js
+++ b/src/lib/ticket.js
@@ -6,7 +6,7 @@ export const createTicket = async (cookies, username) => {
 	let { ticket } = await get('/ticket');
 
 	let { address } = await post(
-		'/invoice',
+		`/${username}/invoice`,
 		{ invoice: { network: 'liquid' }, user: { username } },
 		auth(cookies)
 	);
diff --git a/src/lib/utils.js b/src/lib/utils.js
index 2b5dda90..d0b0b1c2 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -202,3 +202,29 @@ export const stretch = async (password, salt) =>
 	);
 
 export const bip32 = await BIP32Factory(ecc);
+
+function get_bigrams(string) {
+	var s = string.toLowerCase();
+	var v = s.split('');
+	for (var i = 0; i < v.length; i++) {
+		v[i] = s.slice(i, i + 2);
+	}
+	return v;
+}
+
+export function ss(str1, str2) {
+	if (str1.length > 0 && str2.length > 0) {
+		var pairs1 = get_bigrams(str1);
+		var pairs2 = get_bigrams(str2);
+		var union = pairs1.length + pairs2.length;
+		var hits = 0;
+		for (var x = 0; x < pairs1.length; x++) {
+			for (var y = 0; y < pairs2.length; y++) {
+				if (pairs1[x] == pairs2[y]) hit_count++;
+			}
+		}
+		if (hits > 0) return (2.0 * hits) / union;
+	}
+
+	return 0.0;
+}
diff --git a/src/routes/(app)/[username]/(profile)/+layout.svelte b/src/routes/(app)/[username]/(profile)/+layout.svelte
index 6528d688..b318d777 100644
--- a/src/routes/(app)/[username]/(profile)/+layout.svelte
+++ b/src/routes/(app)/[username]/(profile)/+layout.svelte
@@ -1,12 +1,15 @@
 <script>
+	import { f, s, sats } from '$lib/utils';
+	import { animatedRate, selectedRate } from '$lib/store';
 	import { Icon } from '$comp';
 	import { t } from '$lib/translations';
 	import { sign, send } from '$lib/nostr';
+	import { v4 } from 'uuid';
 
 	export let data;
 	let events, user, subject, src, text;
 	$: ({ events, user, subject, src, text } = data);
-	$: ({ username: n, display } = subject);
+	$: ({ currency, username: n, display } = subject);
 
 	$: username = n.length > 60 ? n.substr(0, 6) : display || n;
 
@@ -39,12 +42,30 @@
 	};
 
 	$: following = !!user?.follows.find((t) => t.includes(subject.pubkey));
+
+	let ease = (t) => (t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t);
+	let i;
+
+	let o = $selectedRate;
+	$: animate($selectedRate);
+	let animate = (n) => {
+		clearInterval(i);
+
+		let t = 0;
+		let d = o - n;
+
+		i = setInterval(() => {
+			$animatedRate = (o - d * ease(t / 100)).toFixed(2);
+			if (t > 80) (o = n) && clearInterval(i);
+			t++;
+		}, 10);
+	};
 </script>
 
-<div class="container mx-auto w-full px-4 mb-4 flex flex-wrap md:flex-nowrap">
-	<div class="hidden lg:block w-[240px] md:mr-10" />
-	<div class="w-[240px] lg:absolute pt-20 space-y-5 left-20 mx-auto md:mr-10">
-		<h1 class="text-3xl font-bold text-center mx-auto lg:text-left">{display || username}</h1>
+<div class="container mx-auto w-full px-4 mb-4 flex flex-wrap lg:flex-nowrap">
+	<div class="hidden lg:block w-[240px] lg:mr-10" />
+	<div class="w-[240px] lg:absolute space-y-5 left-20 mx-auto lg:mr-10 mb-10">
+		<h1 class="text-3xl font-bold text-center mx-auto">{display || username}</h1>
 
 		<div class="text-secondary mx-auto text-center lg:text-left lg:mx-0">
 			{subject.address && subject.address !== 'null' ? subject.address : ''}
@@ -100,7 +121,7 @@
 					</a>
 				</div>
 			{/if}
-			{#if !subject.anon}
+			{#if !subject.anon && subject.username !== user?.username}
 				<div class="w-full flex">
 					<a href={`/${subject.username}/receive`} class="mx-auto">
 						<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60">
@@ -111,26 +132,64 @@
 						</button>
 					</a>
 				</div>
+			{/if}
 
-				<!-- {#if user?.username !== subject.username} -->
-				<!-- 	<div class="w-full flex"> -->
-				<!-- 		<a href={`/${subject.username}/request`} class="mx-auto"> -->
-				<!-- 			<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60"> -->
-				<!-- 				<div class="mx-auto flex"> -->
-				<!-- 					<Icon icon="support" style="mr-1" /> -->
-				<!-- 					<div>{$t('payments.requestAnInvoice')}</div> -->
-				<!-- 				</div> -->
-				<!-- 			</button> -->
-				<!-- 		</a> -->
-				<!-- 	</div> -->
-				<!-- {/if} -->
+			{#if user?.id === subject.id}
+				<div class="w-full flex">
+					<a href={`/send`} class="mx-auto">
+						<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60">
+							<div class="mx-auto flex">
+								<Icon icon="send" style="mr-2" />
+								<div class="mt-1">{$t('user.dashboard.send')}</div>
+							</div>
+						</button>
+					</a>
+				</div>
+				<div class="w-full flex">
+					<a href={`/${subject.username}/receive`} class="mx-auto">
+						<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60">
+							<div class="mx-auto flex">
+								<Icon icon="numpad" style="mr-2" />
+								<div class="mt-1">{$t('user.dashboard.receive')}</div>
+							</div>
+						</button>
+					</a>
+				</div>
+				<!-- <div class="w-full flex"> -->
+				<!-- 	<a href={`/${subject.username}/receive`} class="mx-auto"> -->
+				<!-- 		<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60"> -->
+				<!-- 			<div class="mx-auto flex"> -->
+				<!-- 				<Icon icon="support" style="mr-2" /> -->
+				<!-- 				<div class="mt-1">{$t('user.messages')}</div> -->
+				<!-- 			</div> -->
+				<!-- 		</button> -->
+				<!-- 	</a> -->
+				<!-- </div> -->
 			{/if}
 		</div>
 	</div>
 
-	<div class="w-full md:pt-12 lg:pt-0">
-		<div class="mx-auto space-y-5 mt-5 lg:max-w-lg xl:max-w-2xl">
+	<div class="w-full">
+		<div class="mx-auto space-y-5 lg:max-w-lg xl:max-w-2xl">
 			<slot />
 		</div>
 	</div>
 </div>
+
+{#if currency && $animatedRate}
+	<div class="flex fixed w-full px-4 bg-white py-2 bottom-0 bg-opacity-90 tabular-nums">
+		<div class="text-secondary flex mr-auto">
+			<div class="flex mr-1">
+				<div class="my-auto mr-1">1</div>
+				<img src="/images/bitcoin.svg" class="w-5 my-auto" alt="Bitcoin" />
+			</div>
+			<div>= {f($animatedRate, currency)}</div>
+		</div>
+		<div class="text-secondary flex ml-auto">
+			<div class="flex">
+				<div class="mr-1">⚡️{s((1 * sats) / $animatedRate)} =</div>
+				<div>{f(1, currency)}</div>
+			</div>
+		</div>
+	</div>
+{/if}
diff --git a/src/routes/(app)/[username]/(profile)/+page.svelte b/src/routes/(app)/[username]/(profile)/+page.svelte
index f9ded033..40c73ea4 100644
--- a/src/routes/(app)/[username]/(profile)/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/+page.svelte
@@ -1,29 +1,11 @@
 <script>
-	import { Feed } from '$comp';
+	import { Balance, Feed } from '$comp';
 	import { t } from '$lib/translations';
 
 	export let data;
 	let { events, subject, user } = data;
 </script>
 
-<!-- <div class="font-bold flex justify-around items-center border-b pb-3 text-secondary mt-20"> -->
-<!-- 	<a href={`/${user.username}`}> -->
-<!-- 		<button class="hover:opacity-80 uppercase" class:text-black={true}> -->
-<!-- 			{$t(`user.notes`)} -->
-<!-- 		</button> -->
-<!-- 	</a> -->
-<!-- 	<a href={`/${user.username}`}> -->
-<!-- 		<button class="hover:opacity-80 uppercase"> -->
-<!-- 			{$t(`user.feed`)} -->
-<!-- 		</button> -->
-<!-- 	</a> -->
-<!-- 	<a href={`/${user.username}`}> -->
-<!-- 		<button class="hover:opacity-80 uppercase"> -->
-<!-- 			{$t(`user.messages`)} -->
-<!-- 		</button> -->
-<!-- 	</a> -->
-<!-- </div> -->
-
-<div class="mt-20">
-	<Feed {events} user={subject?.username === user?.username && user} />
+<div class="flex justify-center lg:justify-start">
+	<Balance {user} />
 </div>
diff --git a/src/routes/(app)/[username]/(profile)/followers/+page.svelte b/src/routes/(app)/[username]/(profile)/followers/+page.svelte
index 87a3b947..77b337b6 100644
--- a/src/routes/(app)/[username]/(profile)/followers/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/followers/+page.svelte
@@ -13,7 +13,7 @@
 
 <svelte:window bind:innerWidth={w} />
 
-<div class="mt-24 mb-20 px-3 md:px-0 w-full md:w-[400px] mx-auto space-y-8">
+<div class="px-3 md:px-0 w-full md:w-[400px] mx-auto space-y-8">
 	<h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold">Followers</h1>
 
 	{#if browser}
diff --git a/src/routes/(app)/[username]/(profile)/follows/+page.svelte b/src/routes/(app)/[username]/(profile)/follows/+page.svelte
index 97269f45..78566fc4 100644
--- a/src/routes/(app)/[username]/(profile)/follows/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/follows/+page.svelte
@@ -12,7 +12,7 @@
 
 <svelte:window bind:innerWidth={w} />
 
-<div class="mt-24 mb-20 px-3 md:px-0 w-full md:w-[400px] mx-auto space-y-8">
+<div class="px-3 md:px-0 w-full md:w-[400px] mx-auto space-y-8">
 	<h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold">Following</h1>
 
 	{#if browser}
diff --git a/src/routes/(app)/[username]/address/+page.server.js b/src/routes/(app)/[username]/address/+page.server.js
index 5d7c3044..247a33a2 100644
--- a/src/routes/(app)/[username]/address/+page.server.js
+++ b/src/routes/(app)/[username]/address/+page.server.js
@@ -5,6 +5,6 @@ export async function load({ cookies, params, parent }) {
 	let user = (await parent()).subject;
 	let rates = await get('/rates');
 	let invoice = { type: 'bitcoin' };
-	let { hash } = await post('/invoice', { invoice, user }, auth(cookies));
-	throw redirect(307, `/invoice/${hash}`);
+	let { hash } = await post(`/invoice`, { invoice, user }, auth(cookies));
+	throw redirect(307, `/${user.username}/invoice/${hash}`);
 }
diff --git a/src/routes/(app)/[username]/dashboard/+page.server.js b/src/routes/(app)/[username]/dashboard/+page.server.js
index f7e276a0..ae66a20d 100644
--- a/src/routes/(app)/[username]/dashboard/+page.server.js
+++ b/src/routes/(app)/[username]/dashboard/+page.server.js
@@ -1,6 +1,4 @@
-import { auth, get } from '$lib/utils';
-
-export async function load({ cookies, depends }) {
-	depends('app:invoice');
-	return get('/requests', auth(cookies));
+import { redirect } from '@sveltejs/kit';
+export async function load({ params: { username } }) {
+	throw redirect(301, `/${username}`);
 }
diff --git a/src/routes/(app)/[username]/dashboard/+page.svelte b/src/routes/(app)/[username]/dashboard/+page.svelte
index feb49c65..d136943e 100644
--- a/src/routes/(app)/[username]/dashboard/+page.svelte
+++ b/src/routes/(app)/[username]/dashboard/+page.svelte
@@ -81,16 +81,6 @@
 				>{$t('user.dashboard.receive')}</button
 			>
 		</a>
-		<a href={`/${user.username}/address`}>
-			<button class="rounded-full border py-4 px-5 font-bold hover:opacity-80 w-full"
-				>{$t('user.dashboard.deposit')}</button
-			>
-		</a>
-		<a href={`/send/pot/${v4()}`}>
-			<button class="rounded-full border py-4 px-5 font-bold hover:opacity-80 w-full"
-				>{$t('user.dashboard.voucher')}</button
-			>
-		</a>
 	</div>
 
 	<!-- <div> -->
diff --git a/src/routes/(app)/[username]/invoice/+server.js b/src/routes/(app)/[username]/invoice/+server.js
new file mode 100644
index 00000000..1321739e
--- /dev/null
+++ b/src/routes/(app)/[username]/invoice/+server.js
@@ -0,0 +1,5 @@
+import { auth, post } from '$lib/utils';
+import { json } from '@sveltejs/kit';
+
+export let POST = async ({ cookies: c, request: r }) =>
+	json(await post('/invoice', await r.json(), auth(c)));
diff --git a/src/routes/(app)/[username]/invoice/[hash]/+layout.server.js b/src/routes/(app)/[username]/invoice/[hash]/+layout.server.js
new file mode 100644
index 00000000..0f6168e3
--- /dev/null
+++ b/src/routes/(app)/[username]/invoice/[hash]/+layout.server.js
@@ -0,0 +1,20 @@
+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');
+
+	let { hash } = params;
+	let invoice = await get(`/invoice/${hash}`);
+	let { amount, received } = invoice;
+	amount = parseInt(amount);
+
+	let paid = (!amount && received) || (amount > 0 && 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
new file mode 100644
index 00000000..4fa864ce
--- /dev/null
+++ b/src/routes/(app)/[username]/invoice/[hash]/+layout.svelte
@@ -0,0 +1 @@
+<slot />
diff --git a/src/routes/(app)/[username]/invoice/[hash]/+page.server.js b/src/routes/(app)/[username]/invoice/[hash]/+page.server.js
new file mode 100644
index 00000000..1068f273
--- /dev/null
+++ b/src/routes/(app)/[username]/invoice/[hash]/+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/[hash]/+page.svelte b/src/routes/(app)/[username]/invoice/[hash]/+page.svelte
new file mode 100644
index 00000000..6d7e1dda
--- /dev/null
+++ b/src/routes/(app)/[username]/invoice/[hash]/+page.svelte
@@ -0,0 +1,123 @@
+<script>
+	import { send } from '$lib/socket';
+	import { back, copy, f, get, 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';
+
+	export let data;
+
+	$: refresh(data);
+	let { invoice, id, user, sm, lg } = data;
+	let {
+		address,
+		amount,
+		type,
+		rate,
+		received,
+		prompt,
+		text,
+		tip,
+		user: { username, currency }
+	} = invoice;
+
+	let showQr = !amount;
+
+	let src = sm;
+
+	let qr;
+	let tipPercent = 0;
+
+	let refresh = (data) => {
+		({ invoice, id } = data);
+		({
+			address,
+			amount,
+			type,
+			rate,
+			received,
+			prompt,
+			text,
+			tip,
+			user: { username, currency }
+		} = invoice);
+
+		tipPercent = (tip / amount) * 100;
+	};
+
+	$: amountFiat = parseFloat(((amount * rate) / sats).toFixed(2));
+	$: tipAmount = ((tip * rate) / sats).toFixed(2);
+
+	let subbed;
+	onMount(() => {
+		browser &&
+			last.subscribe((v) => {
+				if (!v || subbed) return;
+				subbed = true;
+				send('subscribe', invoice);
+			});
+	});
+
+	$: link = address ? text : `lightning:${text}`;
+	$: txt = address || text;
+
+	let full;
+	let toggle = () => {
+		screenfull.toggle(qr);
+		full = !full;
+		if (full) src = lg;
+		else src = sm;
+	};
+</script>
+
+<div class="container mx-auto max-w-lg px-4 space-y-5">
+	<div class="relative flex">
+		<div class="flex mx-auto w-[360px] h-[360px]">
+			<img
+				{src}
+				class:p-4={full}
+				class="w-[300px] h-[300px] mx-auto z-10 mt-[20px]"
+				bind:this={qr}
+				on:click={toggle}
+				on:keydown={toggle}
+				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>
+
+	{#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="w-full flex justify-center">
+		<button class="flex rounded-full border py-2 px-5 hover:opacity-80" on:click={() => copy(txt)}
+			><Icon icon="copy" style="mr-1" />
+			<div class="text-secondary">{txt.substr(0, 10)}..{txt.substr(-6)}</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
new file mode 100644
index 00000000..432b137a
--- /dev/null
+++ b/src/routes/(app)/[username]/invoice/[hash]/paid/+page.svelte
@@ -0,0 +1,62 @@
+<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';
+
+	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);
+
+	$: amountFiat = parseFloat((((received - tip) * rate) / sats).toFixed(2));
+	$: pendingFiat = parseFloat((((pending - tip) * rate) / sats).toFixed(2));
+	$: tipFiat = parseFloat(((tip * rate) / sats).toFixed(2));
+</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>
+	{#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 - tip)}
+			{#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 - tip)}
+			{#if tip}
+				+{sat(tip)}
+			{/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
new file mode 100644
index 00000000..814900fb
--- /dev/null
+++ b/src/routes/(app)/[username]/invoice/[hash]/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/[hash]/tip/+page.svelte b/src/routes/(app)/[username]/invoice/[hash]/tip/+page.svelte
new file mode 100644
index 00000000..d033c413
--- /dev/null
+++ b/src/routes/(app)/[username]/invoice/[hash]/tip/+page.svelte
@@ -0,0 +1,248 @@
+<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 } 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;
+
+		clearTimeout(timeout);
+		timeout = setTimeout(update, 800);
+	};
+
+	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;
+	let update = async () => {
+		await tick();
+		//submit.click();
+	};
+
+	export let data;
+	$: refresh(data);
+	let { invoice, id, user } = data;
+	let {
+		amount,
+		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,
+			type,
+			rate,
+			received,
+			prompt,
+			text,
+			tip,
+			user: { username, currency }
+		} = invoice);
+
+		tipPercent = (tip / amount) * 100;
+	};
+
+	$: 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={rate} />
+		<input type="hidden" name="prompt" value="false" />
+		<input type="hidden" name="type" value={type} />
+		<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>
+
+			<input
+				id="slider"
+				type="range"
+				min="0"
+				max="100"
+				value={tipPercent}
+				class="px-0 py-0 my-5"
+				style="--bgPercent: {tipPercent}%;"
+				on:input={handleSlide}
+			/>
+
+			<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>
+	#slider {
+		-webkit-appearance: none;
+		width: 100%;
+		height: 6px;
+		border-radius: 5px;
+		background: linear-gradient(
+			to right,
+			black 0%,
+			black var(--bgPercent),
+			#f5f7fa var(--bgPercent),
+			#f5f7fa 100%
+		);
+		outline: none;
+	}
+
+	#slider:active {
+		background-color: black;
+	}
+
+	#slider::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		appearance: none;
+		width: 30px;
+		height: 30px;
+		border-radius: 50%;
+		background: black;
+		cursor: pointer;
+	}
+
+	#slider::-moz-range-thumb {
+		width: 30px;
+		height: 30px;
+		border-radius: 50%;
+		background: black;
+		cursor: pointer;
+	}
+
+	.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/sent/+page.svelte b/src/routes/(app)/[username]/invoice/sent/+page.svelte
new file mode 100644
index 00000000..ae71eb2e
--- /dev/null
+++ b/src/routes/(app)/[username]/invoice/sent/+page.svelte
@@ -0,0 +1,10 @@
+<script>
+	import { Avatar, Icon } from '$comp';
+	import { request } from '$lib/store';
+</script>
+
+Invoice sent to
+<div class="flex">
+	<Avatar user={$request.requester} size={12} />
+	<h1 class="my-auto"><b>{$request.requester.username}</b> is ready to pay</h1>
+</div>
diff --git a/src/routes/(app)/[username]/receive/[...param]/+page.svelte b/src/routes/(app)/[username]/receive/[...param]/+page.svelte
index 7ca2770e..29a0f7a5 100644
--- a/src/routes/(app)/[username]/receive/[...param]/+page.svelte
+++ b/src/routes/(app)/[username]/receive/[...param]/+page.svelte
@@ -16,7 +16,7 @@
 
 	let amount;
 
-	let { currency, username } = data.subject;
+	let { currency, username, prompt } = data.subject;
 	let { user } = data;
 	let submit;
 </script>
@@ -31,7 +31,7 @@
 		<input type="hidden" name="request_id" value={request.id} />
 	{/if}
 
-	<input type="hidden" name="prompt" value={false} />
+	<input type="hidden" name="prompt" value={prompt} />
 
 	<div class="space-y-3 w-[300px] mx-auto">
 		<Numpad bind:amount bind:currency {submit} />
diff --git a/src/routes/(app)/[username]/request/[id]/+page.server.js b/src/routes/(app)/[username]/request/[id]/+page.server.js
index 001bd6e0..542a3ccb 100644
--- a/src/routes/(app)/[username]/request/[id]/+page.server.js
+++ b/src/routes/(app)/[username]/request/[id]/+page.server.js
@@ -14,7 +14,7 @@ export let load = async ({ cookies, depends, locals: { user }, params }) => {
 			request.recipient.username === user.username &&
 			((received && !amount) || received >= amount)
 		)
-			throw redirect(307, `/invoice/${id}/paid`);
+			throw redirect(307, `/${user.username}/invoice/${id}/paid`);
 
 		if (request.requester.username === user.username) throw redirect(307, `/send/${id}`);
 	}
diff --git a/src/routes/(app)/[username]/settings/[...tab]/_pos.svelte b/src/routes/(app)/[username]/settings/[...tab]/_pos.svelte
index e9fcc5ba..94dc8c88 100644
--- a/src/routes/(app)/[username]/settings/[...tab]/_pos.svelte
+++ b/src/routes/(app)/[username]/settings/[...tab]/_pos.svelte
@@ -25,7 +25,8 @@
 <div>
 	<div class="flex justify-between items-center">
 		<span class="font-bold">{$t('user.settings.tipPrompt')}</span>
-		<Toggle id="sms-notify" />
+		{user.prompt}
+		<Toggle id="prompt" checked={user.prompt} bind:value={user.prompt} />
 	</div>
 	<p class="text-secondary mt-1 w-9/12">
 		{$t('user.settings.tipPromptDescription')}
diff --git a/src/routes/(app)/invoice/+server.js b/src/routes/(app)/invoice/+server.js
deleted file mode 100644
index 1321739e..00000000
--- a/src/routes/(app)/invoice/+server.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { auth, post } from '$lib/utils';
-import { json } from '@sveltejs/kit';
-
-export let POST = async ({ cookies: c, request: r }) =>
-	json(await post('/invoice', await r.json(), auth(c)));
diff --git a/src/routes/(app)/invoice/[hash]/+layout.server.js b/src/routes/(app)/invoice/[hash]/+layout.server.js
deleted file mode 100644
index d38f945f..00000000
--- a/src/routes/(app)/invoice/[hash]/+layout.server.js
+++ /dev/null
@@ -1,19 +0,0 @@
-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');
-
-	let { hash } = params;
-	let invoice = await get(`/invoice/${hash}`);
-	let { amount, received } = invoice;
-	amount = parseInt(amount);
-
-	let paid = (!amount && received) || (amount > 0 && received >= amount);
-	if (paid && !url.pathname.endsWith('paid')) throw redirect(307, `/invoice/${hash}/paid`);
-
-	let sm = Qr.drawImg(invoice.text, { size: 300 });
-
-	return { hash, invoice, sm, lg: sm };
-}
diff --git a/src/routes/(app)/invoice/[hash]/+layout.svelte b/src/routes/(app)/invoice/[hash]/+layout.svelte
deleted file mode 100644
index 4fa864ce..00000000
--- a/src/routes/(app)/invoice/[hash]/+layout.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<slot />
diff --git a/src/routes/(app)/invoice/[hash]/+page.server.js b/src/routes/(app)/invoice/[hash]/+page.server.js
deleted file mode 100644
index 1068f273..00000000
--- a/src/routes/(app)/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)/invoice/[hash]/+page.svelte b/src/routes/(app)/invoice/[hash]/+page.svelte
deleted file mode 100644
index a2f05cc9..00000000
--- a/src/routes/(app)/invoice/[hash]/+page.svelte
+++ /dev/null
@@ -1,156 +0,0 @@
-<script>
-	import { send } from '$lib/socket';
-	import { back, copy, f, get, 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';
-
-	export let data;
-
-	$: refresh(data);
-	let { invoice, id, user, sm, lg } = data;
-	let {
-		address,
-		amount,
-		type,
-		rate,
-		received,
-		prompt,
-		text,
-		tip,
-		user: { username, currency }
-	} = invoice;
-
-	let showQr = !amount;
-
-	let src = sm;
-
-	let qr;
-	let tipPercent = 0;
-
-	let refresh = (data) => {
-		({ invoice, id } = data);
-		({
-			address,
-			amount,
-			type,
-			rate,
-			received,
-			prompt,
-			text,
-			tip,
-			user: { username, currency }
-		} = invoice);
-
-		tipPercent = (tip / amount) * 100;
-	};
-
-	$: amountFiat = parseFloat(((amount * rate) / sats).toFixed(2));
-	$: tipAmount = ((tip * rate) / sats).toFixed(2);
-
-	let subbed;
-	onMount(() => {
-		browser &&
-			last.subscribe((v) => {
-				if (!v || subbed) return;
-				subbed = true;
-				send('subscribe', invoice);
-			});
-	});
-
-	$: link = address ? text : `lightning:${text}`;
-
-	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}>
-	<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">
-	<div>
-		<div class="flex w-full">
-			<div class="mx-auto">
-				<a href="/{username}" class="text-black font-semibold hover:opacity-80 mx-auto">
-					<div class="flex my-auto">
-						<Avatar user={invoice.user} size={20} />
-						<div class="my-auto text-lg">{username}</div>
-					</div>
-				</a>
-			</div>
-		</div>
-	</div>
-
-	<div class="w-full">
-		<img
-			{src}
-			class:p-4={full}
-			class="w-[300px] mx-auto"
-			bind:this={qr}
-			on:click={toggle}
-			on:keydown={toggle}
-			alt={address || text}
-		/>
-	</div>
-
-	{#if address}
-		<div class="text-secondary text-center">{address}</div>
-	{/if}
-
-	<div class="flex gap-2 justify-center">
-		<button
-			class="flex rounded-full border py-2 px-5 font-bold hover:opacity-80"
-			on:click={() => copy(address ? address : text)}
-			><Icon icon="copy" style="mr-1" />
-			<div>Copy</div></button
-		>
-
-		{#if user && user.username !== username}
-			<a href={`/send/${invoice.id}`}>
-				<button class="flex rounded-full border py-2 px-5 font-bold hover:opacity-80">
-					<Icon icon="send" style="mr-1" />
-					<div class="my-auto">Pay</div>
-				</button>
-			</a>
-		{/if}
-	</div>
-
-	<div class="space-y-2 w-80 mx-auto">
-		{#if invoice.tip}
-			<div class="flex justify-between">
-				{$t('invoice.invoice')}
-				<span>
-					{f(amountFiat, currency)}
-					<span class="text-secondary">{`${sat(amount)}`}</span>
-				</span>
-			</div>
-
-			<div class="flex justify-between">
-				{$t('invoice.tip')}
-				<span
-					>{f(tipAmount, currency)}
-					<span class="text-secondary">{`${sat(tip)}`}</span>
-				</span>
-			</div>
-		{/if}
-
-		{#if amount > 0}
-			<div class="flex flex-wrap justify-between font-bold text-2xl !my-5">
-				<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>
-</div>
diff --git a/src/routes/(app)/invoice/[hash]/paid/+page.svelte b/src/routes/(app)/invoice/[hash]/paid/+page.svelte
deleted file mode 100644
index 2ccbc971..00000000
--- a/src/routes/(app)/invoice/[hash]/paid/+page.svelte
+++ /dev/null
@@ -1,62 +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';
-
-	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);
-
-	$: amountFiat = parseFloat((((received - tip) * rate) / sats).toFixed(2));
-	$: pendingFiat = parseFloat((((pending - tip) * rate) / sats).toFixed(2));
-	$: tipFiat = parseFloat(((tip * rate) / sats).toFixed(2));
-</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>
-	{#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 - tip)}
-			{#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 - tip)}
-			{#if tip}
-				+{sat(tip)}
-			{/if}
-		</h3>
-	{/if}
-</div>
-
-<a href={`/${user.username}/receive`}>
-	<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)/invoice/[hash]/tip/+page.server.js b/src/routes/(app)/invoice/[hash]/tip/+page.server.js
deleted file mode 100644
index c78e5020..00000000
--- a/src/routes/(app)/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 }) {
-	let { invoice } = await parent();
-	if (!invoice.amount) throw redirect(307, `/invoice/${invoice.id}`);
-}
-
-export const actions = {
-	default: invoice
-};
diff --git a/src/routes/(app)/invoice/[hash]/tip/+page.svelte b/src/routes/(app)/invoice/[hash]/tip/+page.svelte
deleted file mode 100644
index ea0ab903..00000000
--- a/src/routes/(app)/invoice/[hash]/tip/+page.svelte
+++ /dev/null
@@ -1,252 +0,0 @@
-<script>
-	import { onMount } from 'svelte';
-	import { browser } from '$app/environment';
-	import { invoice as inv, request } from '$lib/store';
-	import { back, copy, focus, f, sat, get, reverseFormat, s, sats } from '$lib/utils';
-	import { Icon } 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;
-
-		clearTimeout(timeout);
-		timeout = setTimeout(update, 800);
-	};
-
-	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;
-	let update = async () => {
-		await tick();
-		//submit.click();
-	};
-
-	export let data;
-	$: refresh(data);
-	let { invoice, id, user } = data;
-	let {
-		amount,
-		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,
-			type,
-			rate,
-			received,
-			prompt,
-			text,
-			tip,
-			user: { username, currency }
-		} = invoice);
-
-		tipPercent = (tip / amount) * 100;
-	};
-
-	$: 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>
-
-<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 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={rate} />
-		<input type="hidden" name="prompt" value="false" />
-		<input type="hidden" name="type" value={type} />
-		<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>
-
-			<input
-				id="slider"
-				type="range"
-				min="0"
-				max="100"
-				value={tipPercent}
-				class="px-0 py-0 my-5"
-				style="--bgPercent: {tipPercent}%;"
-				on:input={handleSlide}
-			/>
-
-			<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>
-	#slider {
-		-webkit-appearance: none;
-		width: 100%;
-		height: 6px;
-		border-radius: 5px;
-		background: linear-gradient(
-			to right,
-			black 0%,
-			black var(--bgPercent),
-			#f5f7fa var(--bgPercent),
-			#f5f7fa 100%
-		);
-		outline: none;
-	}
-
-	#slider:active {
-		background-color: black;
-	}
-
-	#slider::-webkit-slider-thumb {
-		-webkit-appearance: none;
-		appearance: none;
-		width: 30px;
-		height: 30px;
-		border-radius: 50%;
-		background: black;
-		cursor: pointer;
-	}
-
-	#slider::-moz-range-thumb {
-		width: 30px;
-		height: 30px;
-		border-radius: 50%;
-		background: black;
-		cursor: pointer;
-	}
-
-	.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)/invoice/sent/+page.svelte b/src/routes/(app)/invoice/sent/+page.svelte
deleted file mode 100644
index ae71eb2e..00000000
--- a/src/routes/(app)/invoice/sent/+page.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script>
-	import { Avatar, Icon } from '$comp';
-	import { request } from '$lib/store';
-</script>
-
-Invoice sent to
-<div class="flex">
-	<Avatar user={$request.requester} size={12} />
-	<h1 class="my-auto"><b>{$request.requester.username}</b> is ready to pay</h1>
-</div>
diff --git a/src/routes/(app)/launch/purchase/+page.server.js b/src/routes/(app)/launch/purchase/+page.server.js
index ad5cb039..a3043d9c 100644
--- a/src/routes/(app)/launch/purchase/+page.server.js
+++ b/src/routes/(app)/launch/purchase/+page.server.js
@@ -40,6 +40,6 @@ export const actions = {
 
 		let { id } = await post('/invoice', { invoice, user }, auth(cookies));
 
-		throw redirect(307, `/invoice/${id}`);
+		throw redirect(307, `/${user.username}/invoice/${id}`);
 	}
 };
diff --git a/src/routes/(app)/send/[...text]/+page.svelte b/src/routes/(app)/send/[...text]/+page.svelte
index 92ee7a33..e3d8091f 100644
--- a/src/routes/(app)/send/[...text]/+page.svelte
+++ b/src/routes/(app)/send/[...text]/+page.svelte
@@ -98,9 +98,6 @@
 										<Avatar user={c} size={20} disabled={true} />
 										<div class="my-auto text-left">
 											<p class="ml-1 text-lg break-words">{c.username}</p>
-											<p class="ml-1 text-secondary">
-												{format(parseISO(c.last), 'MMM d')}
-											</p>
 										</div>
 									</div>
 								</div>
diff --git a/src/routes/(app)/send/user/[username]/[...amount]/+page.svelte b/src/routes/(app)/send/user/[username]/[...amount]/+page.svelte
index a5b463be..87eba733 100644
--- a/src/routes/(app)/send/user/[username]/[...amount]/+page.svelte
+++ b/src/routes/(app)/send/user/[username]/[...amount]/+page.svelte
@@ -24,7 +24,7 @@
 		amount = a;
 		amountFiat = af;
 
-		({ hash } = await post('/invoice', {
+		({ hash } = await post(`/${recipient.username}/invoice`, {
 			invoice: {
 				amount,
 				rate: rates[recipient.currency],
-- 
cgit v1.2.3