From 770725fbdcc8ea7bf47ef0af5a43a239bef98ff6 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Tue, 16 Aug 2022 15:31:41 -0700
Subject: sveltekit route migration

---
 src/routes/+error.svelte                        |  40 +++
 src/routes/+layout.svelte                       |  57 ++++
 src/routes/+page.svelte                         | 124 +++++++++
 src/routes/[username]/+page.server.js           |  14 +
 src/routes/[username]/+page.svelte              |  81 ++++++
 src/routes/[username]/customers.svelte          |   5 -
 src/routes/[username]/customers/+page.svelte    |   5 +
 src/routes/[username]/dashboard.svelte          | 121 --------
 src/routes/[username]/dashboard/+page.svelte    | 121 ++++++++
 src/routes/[username]/index.js                  |  14 -
 src/routes/[username]/index.svelte              |  79 ------
 src/routes/[username]/receive.svelte            | 175 ------------
 src/routes/[username]/receive/+page.svelte      | 175 ++++++++++++
 src/routes/[username]/settings.svelte           | 176 ------------
 src/routes/[username]/settings/+page.svelte     | 176 ++++++++++++
 src/routes/[username]/support.svelte            |  60 ----
 src/routes/[username]/support/+page.svelte      |  60 ++++
 src/routes/[username]/transactions.svelte       |  60 ----
 src/routes/[username]/transactions/+page.svelte |  60 ++++
 src/routes/__error.svelte                       |  38 ---
 src/routes/__layout.svelte                      |  57 ----
 src/routes/index.svelte                         | 124 ---------
 src/routes/invoice/+server.js                   |  15 +
 src/routes/invoice/[id].js                      |  14 -
 src/routes/invoice/[id].svelte                  | 349 -----------------------
 src/routes/invoice/[id]/+page.server.js         |  14 +
 src/routes/invoice/[id]/+page.svelte            | 351 ++++++++++++++++++++++++
 src/routes/invoice/index.js                     |  14 -
 src/routes/jobs.svelte                          |  32 ---
 src/routes/jobs/+page.svelte                    |  32 +++
 src/routes/login.js                             |  24 --
 src/routes/login.svelte                         |   5 -
 src/routes/login/+page.server.js                |  25 ++
 src/routes/login/+page.svelte                   |   5 +
 src/routes/logout/+page.server.js               |  27 ++
 src/routes/logout/+page.svelte                  |  10 +
 src/routes/logout/done.svelte                   |  13 -
 src/routes/logout/done/+page.svelte             |  13 +
 src/routes/logout/index.js                      |  26 --
 src/routes/logout/index.svelte                  |  10 -
 src/routes/register.js                          |  14 -
 src/routes/register.svelte                      |   5 -
 src/routes/register/+page.server.js             |  16 ++
 src/routes/register/+page.svelte                |   5 +
 src/routes/withdraw.js                          |   9 -
 src/routes/withdraw/+server.js                  |  13 +
 46 files changed, 1439 insertions(+), 1424 deletions(-)
 create mode 100644 src/routes/+error.svelte
 create mode 100644 src/routes/+layout.svelte
 create mode 100644 src/routes/+page.svelte
 create mode 100644 src/routes/[username]/+page.server.js
 create mode 100644 src/routes/[username]/+page.svelte
 delete mode 100644 src/routes/[username]/customers.svelte
 create mode 100644 src/routes/[username]/customers/+page.svelte
 delete mode 100644 src/routes/[username]/dashboard.svelte
 create mode 100644 src/routes/[username]/dashboard/+page.svelte
 delete mode 100644 src/routes/[username]/index.js
 delete mode 100644 src/routes/[username]/index.svelte
 delete mode 100644 src/routes/[username]/receive.svelte
 create mode 100644 src/routes/[username]/receive/+page.svelte
 delete mode 100644 src/routes/[username]/settings.svelte
 create mode 100644 src/routes/[username]/settings/+page.svelte
 delete mode 100644 src/routes/[username]/support.svelte
 create mode 100644 src/routes/[username]/support/+page.svelte
 delete mode 100644 src/routes/[username]/transactions.svelte
 create mode 100644 src/routes/[username]/transactions/+page.svelte
 delete mode 100644 src/routes/__error.svelte
 delete mode 100644 src/routes/__layout.svelte
 delete mode 100644 src/routes/index.svelte
 create mode 100644 src/routes/invoice/+server.js
 delete mode 100644 src/routes/invoice/[id].js
 delete mode 100644 src/routes/invoice/[id].svelte
 create mode 100644 src/routes/invoice/[id]/+page.server.js
 create mode 100644 src/routes/invoice/[id]/+page.svelte
 delete mode 100644 src/routes/invoice/index.js
 delete mode 100644 src/routes/jobs.svelte
 create mode 100644 src/routes/jobs/+page.svelte
 delete mode 100644 src/routes/login.js
 delete mode 100644 src/routes/login.svelte
 create mode 100644 src/routes/login/+page.server.js
 create mode 100644 src/routes/login/+page.svelte
 create mode 100644 src/routes/logout/+page.server.js
 create mode 100644 src/routes/logout/+page.svelte
 delete mode 100644 src/routes/logout/done.svelte
 create mode 100644 src/routes/logout/done/+page.svelte
 delete mode 100644 src/routes/logout/index.js
 delete mode 100644 src/routes/logout/index.svelte
 delete mode 100644 src/routes/register.js
 delete mode 100644 src/routes/register.svelte
 create mode 100644 src/routes/register/+page.server.js
 create mode 100644 src/routes/register/+page.svelte
 delete mode 100644 src/routes/withdraw.js
 create mode 100644 src/routes/withdraw/+server.js

(limited to 'src')

diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
new file mode 100644
index 00000000..78e7b5a6
--- /dev/null
+++ b/src/routes/+error.svelte
@@ -0,0 +1,40 @@
+<script context="module">
+	throw new Error("@migration task: Replace error load function (https://github.com/sveltejs/kit/discussions/5774#discussioncomment-3293209)");
+
+	// export function load({ error, status }) {
+	// 	if (error.message.includes('not found')) {
+	// 		error.message = 'Page not found.';
+	// 		status = 404;
+	// 	}
+
+	// 	return {
+	// 		props: {
+	// 			error,
+	// 			status
+	// 		}
+	// 	};
+	// }
+</script>
+
+<script>
+	import { Icon, PageNotFound } from '$comp';
+	export let status, error;
+</script>
+
+{#if status === 404}
+	<PageNotFound />
+{:else}
+	<div class="flex justify-center items-center mt-20">
+		<div class="space-y-5 text-center">
+			<a href="/">
+				<Icon icon="logo" style="mx-auto" />
+			</a>
+
+			<Icon icon="error" style="mx-auto w-56" />
+
+			<h1 class="font-bold text-5xl">Error</h1>
+			<p class="px-1 w-full md:w-96 break-all font-bold">{error.message.toUpperCase()}</p>
+			<p>Please try again or contact support.</p>
+		</div>
+	</div>
+{/if}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
new file mode 100644
index 00000000..316bf6b3
--- /dev/null
+++ b/src/routes/+layout.svelte
@@ -0,0 +1,57 @@
+<script>
+	import { SvelteToast } from '@zerodevx/svelte-toast';
+	import '$lib/i18n';
+	import { isLoading, locale } from 'svelte-i18n';
+	import '../app.css';
+	import { onMount } from 'svelte';
+	import { connect } from '$lib/socket';
+	import { user, token } from '$lib/store';
+	import { page, session } from '$app/stores';
+	import { browser } from '$app/env';
+	import { goto } from '$app/navigation';
+	import { LoadingSplash } from '$comp';
+	import { warning, protectedRoutes } from '$lib/utils';
+
+	browser && ($token ||= $session.token);
+
+	let ready = false;
+
+	onMount(() => {
+		// get locale from local storage
+		let localStorageLocale = localStorage.getItem('svelte-i18n-locale');
+		if (localStorageLocale) locale.set(localStorageLocale);
+
+		locale.subscribe((lng) => {
+			if (lng) localStorage.setItem('svelte-i18n-locale', lng);
+		});
+
+		if (protectedRoutes.find((p) => $page.url.pathname.match(p))) {
+			if (!$token) {
+				goto('/login');
+				warning('Please sign in to continue.');
+			}
+			user.subscribe((u) => u?.username && (ready = true));
+		} else {
+			ready = true;
+		}
+
+		connect();
+	});
+</script>
+
+{#if ready && !$isLoading}
+	<SvelteToast options={{ reversed: true, intro: { y: 192 } }} />
+	<slot />
+{:else}
+	<LoadingSplash />
+{/if}
+
+<style>
+	:root {
+		--toastContainerTop: auto;
+		--toastContainerRight: auto;
+		--toastContainerBottom: 8rem;
+		--toastContainerLeft: calc(50vw - 8rem);
+		--toastBackground: #292929;
+	}
+</style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
new file mode 100644
index 00000000..f50db726
--- /dev/null
+++ b/src/routes/+page.svelte
@@ -0,0 +1,124 @@
+<script>
+	import {
+		LandingHeader,
+		LandingHero,
+		LandingInfoCard,
+		HowItWorksCard,
+		FaqCard,
+		Image,
+		About,
+		Footer
+	} from '$comp';
+
+	let howItWorks;
+	let faq;
+	let about;
+
+	const howItWorksSteps = [
+		{
+			image: 'hand',
+			step: '1. Create your account',
+			description: 'A username & password is all you need to get started.'
+		},
+		{
+			image: 'bolt',
+			step: '2. Ask for payments',
+			description: 'The same as you normally would, but with bitcoin.'
+		},
+		{
+			image: 'smile',
+			step: "3. That's all!",
+			description: 'You can convert to local currency at any point.'
+		}
+	];
+
+	const faqQuestions = [
+		{
+			question: 'What does it cost?',
+			answer:
+				'CoinOS is free to use. You only pay a 1% fee if/when you withdraw your funds. Compare this to 3% typically charged by a credit card processor.'
+		},
+		{
+			question: 'Do I need any special device or software?',
+			answer:
+				'No. CoinOS is web-based, so as long as you have an internet connection, you can use it on any device or hardware. Most merchants might use it on a phone or a tablet.'
+		},
+		{
+			question: 'Are my funds safe?',
+			answer:
+				'Your funds are stored on our secure server, however we recommend that you withdraw them to your own cold storage for long-term savings.'
+		}
+	];
+</script>
+
+<LandingHeader {howItWorks} {faq} {about} />
+
+<main class="space-y-40 py-20 md:py-32 lg:py-36 xl:py-40 px-5 md:px-0">
+	<!-- hero -->
+	<LandingHero />
+
+	<!-- landing info 1 -->
+	<LandingInfoCard
+		image="lightning-qr"
+		title="Instant payments via Lightning."
+		description="The moment your customer sends a payment, it’s there. No waiting for bank settlements or
+    worrying about chargebacks. Instant settlement, in seconds. Say goodbye to 3% credit card
+    processing fees."
+	/>
+
+	<!-- landing info 2 -->
+	<LandingInfoCard
+		image="phone-checkout"
+		title="Simple to use, custodial by default."
+		order="reverse"
+	>
+		Just enter an amount, share QR code and you’re done.
+		<br /><br />
+		CoinOS is custodial by default, which eliminates the need to understand how bitcoin/lightning works.
+		We do all the heavy lifting so you can focus on your business.
+		<br /><br />
+		You always have the option of
+		<span class="underline underline-offset-4">taking custody</span> of your own keys.
+	</LandingInfoCard>
+
+	<!-- landing info 3 -->
+	<div>
+		<LandingInfoCard
+			image="customize"
+			title="Brand it your way!"
+			description="Customize your point of sale look and feel, or keep it on default - totally up to you."
+		/>
+		<div bind:this={howItWorks} />
+	</div>
+
+	<!-- how it works -->
+	<div>
+		<h3 class="text-5xl font-medium mb-10 text-center">How it works</h3>
+		<div
+			class="block lg:flex justify-center items-center space-y-10 lg:space-y-0 lg:space-x-10 text-center"
+		>
+			{#each howItWorksSteps as step}
+				<HowItWorksCard image={step.image} step={step.step} description={step.description} />
+			{/each}
+		</div>
+		<div bind:this={faq} />
+	</div>
+
+	<!-- faq -->
+	<div>
+		<div class="space-y-10">
+			<h3 class="text-5xl font-medium text-center">FAQ</h3>
+			{#each faqQuestions as question}
+				<FaqCard question={question.question} answer={question.answer} />
+			{/each}
+		</div>
+		<div bind:this={about} />
+	</div>
+
+	<!-- about -->
+	<div>
+		<About />
+	</div>
+</main>
+
+<Footer />
diff --git a/src/routes/[username]/+page.server.js b/src/routes/[username]/+page.server.js
new file mode 100644
index 00000000..2e52c431
--- /dev/null
+++ b/src/routes/[username]/+page.server.js
@@ -0,0 +1,14 @@
+import { get } from '$lib/utils';
+
+export async function load({ params }) {
+	let { username } = params;
+	let body;
+
+	try {
+		body = await get(`/users/${username}`);
+	} catch (e) {
+		body = {};
+	}
+
+	return body;
+}
diff --git a/src/routes/[username]/+page.svelte b/src/routes/[username]/+page.svelte
new file mode 100644
index 00000000..c0183883
--- /dev/null
+++ b/src/routes/[username]/+page.svelte
@@ -0,0 +1,81 @@
+<script>
+	throw new Error("@migration task: Add data prop (https://github.com/sveltejs/kit/discussions/5774#discussioncomment-3292707)");
+
+	import { browser } from '$app/env';
+	import { onMount } from 'svelte';
+	import { AppHeader, Icon, PageNotFound } from '$comp';
+	import { user } from '$lib/store';
+	import { copy } from '$lib/utils';
+	export let username;
+
+	let lightningAddress = `${username}@coinos.io`;
+
+	onMount(async () => {
+		if (browser) {
+			let { default: QRCodeStyling } = await import('qr-code-styling');
+			const qrCode = new QRCodeStyling({
+				width: window.screen.width < 640 ? 250 : 300,
+				type: 'canvas',
+				data: 'add static qr here',
+				image: '/images/invoice.svg',
+				backgroundOptions: {
+					color: 'rgba(0, 0, 0, 0)'
+				},
+				dotsOptions: {
+					type: 'rounded'
+				},
+				imageOptions: {
+					hideBackgroundDots: false
+				}
+			});
+
+			qrCode.append(document.getElementById('qr'));
+		}
+	});
+
+	let followed = false;
+</script>
+
+{#if username}
+	<AppHeader avatarPosition="left-[calc(15vw-48px)]" />
+
+	<div class="flex xl:block justify-center items-center my-20 px-3">
+		<div class="space-y-10 xl:space-y-0">
+			<div class="xl:ml-[calc(15vw-48px)] space-y-2 w-full md:w-72">
+				<h1 class="text-3xl font-bold">{username}</h1>
+
+				<p class="text-secondary">Address goes here</p>
+
+				<!--
+        we need to hook this up
+        <button
+					class="border rounded-full py-2 w-28 font-semibold flex justify-center items-center text-sm"
+					on:click={() => (followed = !followed)}
+					><Icon icon={followed ? 'minus' : 'plus'} style="mr-1" />
+					{followed ? 'Remove' : 'Follow'}
+				</button>
+        -->
+			</div>
+
+			<div class="space-y-5 static xl:absolute top-[255px] left-[calc(50vw-150px)]">
+				<div
+					id="qr"
+					class="w-[292px] md:w-[342px] h-[342px] border border-lightgrey rounded-3xl flex p-5 justify-center items-center relative"
+				/>
+
+				<p class="text-secondary text-center font-semibold">Scan to pay with bitcoin</p>
+
+				<div
+					class="bg-primary font-semibold rounded-xl text-sm py-2 px-3 flex flex-wrap justify-center items-center"
+				>
+					<span>{lightningAddress}</span>
+					<button on:click={() => copy(lightningAddress)}>
+						<Icon icon="copy" style="ml-2" />
+					</button>
+				</div>
+			</div>
+		</div>
+	</div>
+{:else}
+	<PageNotFound />
+{/if}
diff --git a/src/routes/[username]/customers.svelte b/src/routes/[username]/customers.svelte
deleted file mode 100644
index 1935b156..00000000
--- a/src/routes/[username]/customers.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-	import { AppHeader } from '$comp';
-</script>
-
-<AppHeader />
diff --git a/src/routes/[username]/customers/+page.svelte b/src/routes/[username]/customers/+page.svelte
new file mode 100644
index 00000000..1935b156
--- /dev/null
+++ b/src/routes/[username]/customers/+page.svelte
@@ -0,0 +1,5 @@
+<script>
+	import { AppHeader } from '$comp';
+</script>
+
+<AppHeader />
diff --git a/src/routes/[username]/dashboard.svelte b/src/routes/[username]/dashboard.svelte
deleted file mode 100644
index d056399f..00000000
--- a/src/routes/[username]/dashboard.svelte
+++ /dev/null
@@ -1,121 +0,0 @@
-<script>
-	import { post, failure } from '$lib/utils';
-	import { tick } from 'svelte';
-	import { AppHeader, Icon } from '$comp';
-	import { rate, user, preferredCurrency } from '$lib/store';
-
-	let payreq = '',
-		payreqField,
-		withdrawing;
-
-	let toggle = async () => {
-		withdrawing = !withdrawing;
-		await tick();
-		if (withdrawing) payreqField.focus();
-	};
-
-	let withdraw = async () => {
-		try {
-			await post('/withdraw', { payreq });
-			withdrawing = false;
-		} catch (e) {
-			failure(e.message);
-		}
-	};
-
-	$: btcPrice = new Intl.NumberFormat('en-US', {
-		style: 'currency',
-		currency: 'USD'
-	}).format($rate);
-
-	$: accountBalanceFiat = new Intl.NumberFormat('en-US', {
-		style: 'currency',
-		currency: 'USD'
-	}).format($user.account.balance * ($rate / 100000000));
-
-	$: accountBalanceBtc = $user.account.balance / 100000000;
-
-	$: accountBalanceSats = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(
-		$user.account.balance
-	);
-
-	$: feepayreq = new Intl.NumberFormat('en-US', {
-		style: 'currency',
-		currency: 'USD'
-	}).format(($user.account.balance * ($rate / 100000000)) / 100);
-</script>
-
-{#if $user}
-	<AppHeader avatarPosition="left-[calc(50vw-48px)] lg:left-[calc(15vw-48px)]" />
-
-	<div
-		class="text-center mx-auto lg:text-left lg:mx-0 lg:ml-[calc(15vw-48px)] mt-12 w-full md:w-72"
-	>
-		<h2 class="text-2xl font-semibold">{$user.username}</h2>
-		<span class="text-secondary">Address goes here</span>
-	</div>
-
-	<div class="px-3 md:px-0 flex justify-center items-center mt-10 lg:mt-0 mb-20">
-		<div>
-			<h1 class="text-3xl md:text-4xl font-semibold mb-8">
-				{withdrawing ? 'Withdraw' : 'Dashboard'}
-			</h1>
-			{#if !withdrawing}
-				<span class="text-secondary mx-auto text-lg font-bold"
-					>Bitcoin Price: <span class="text-black">{$rate ? btcPrice : 'fetching rate...'}</span>
-					{$preferredCurrency}
-				</span>
-
-				<span class="text-secondary block mt-1"
-					>Data from <span class="text-black">Binance</span>.
-				</span>
-
-				<h3 class="text-secondary font-bold border-b pb-1 mt-10 mb-6 w-full md:w-[500px]">
-					ACCOUNT BALANCE
-				</h3>
-
-				<span class="text-3xl font-bold block mb-1"
-					>{$rate ? accountBalanceFiat : 'fetching rate...'}</span
-				>
-
-				<span class="text-secondary text-xl block">{accountBalanceSats} SATS</span>
-
-				<button class="rounded-full border py-2 font-bold w-28 mt-4" on:click={toggle}
-					>Withdraw</button
-				>
-				<p class="text-secondary my-2">You will be charged a 1% withdrawal fee on the amount.</p>
-			{:else}
-				<div class="space-y-3 w-[250px] md:w-[500px] md:pr-20">
-					<button on:click={() => (withdrawing = false)}>
-						<Icon icon="arrow-left" style="w-8" />
-					</button>
-
-					<div>
-						<label for="invoice" class="font-bold mb-1 block">Invoice</label>
-						<input
-							bind:this={payreqField}
-							type="text"
-							name="payreq"
-							required
-							bind:value={payreq}
-							class="block rounded-2xl p-3 w-full bg-primary"
-						/>
-					</div>
-
-					<div>
-						<label for="note" class="font-bold mb-1 block">Note (Optional)</label>
-						<textarea name="note" rows={2} class="block rounded-2xl p-3 w-full bg-primary" />
-					</div>
-
-					<button
-						disabled={!payreq}
-						class="{!payreq
-							? 'opacity-50'
-							: 'opacity-100'} rounded-2xl border py-3 font-bold w-full mt-2 bg-black text-white"
-						on:click={withdraw}>Send</button
-					>
-				</div>
-			{/if}
-		</div>
-	</div>
-{/if}
diff --git a/src/routes/[username]/dashboard/+page.svelte b/src/routes/[username]/dashboard/+page.svelte
new file mode 100644
index 00000000..d056399f
--- /dev/null
+++ b/src/routes/[username]/dashboard/+page.svelte
@@ -0,0 +1,121 @@
+<script>
+	import { post, failure } from '$lib/utils';
+	import { tick } from 'svelte';
+	import { AppHeader, Icon } from '$comp';
+	import { rate, user, preferredCurrency } from '$lib/store';
+
+	let payreq = '',
+		payreqField,
+		withdrawing;
+
+	let toggle = async () => {
+		withdrawing = !withdrawing;
+		await tick();
+		if (withdrawing) payreqField.focus();
+	};
+
+	let withdraw = async () => {
+		try {
+			await post('/withdraw', { payreq });
+			withdrawing = false;
+		} catch (e) {
+			failure(e.message);
+		}
+	};
+
+	$: btcPrice = new Intl.NumberFormat('en-US', {
+		style: 'currency',
+		currency: 'USD'
+	}).format($rate);
+
+	$: accountBalanceFiat = new Intl.NumberFormat('en-US', {
+		style: 'currency',
+		currency: 'USD'
+	}).format($user.account.balance * ($rate / 100000000));
+
+	$: accountBalanceBtc = $user.account.balance / 100000000;
+
+	$: accountBalanceSats = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(
+		$user.account.balance
+	);
+
+	$: feepayreq = new Intl.NumberFormat('en-US', {
+		style: 'currency',
+		currency: 'USD'
+	}).format(($user.account.balance * ($rate / 100000000)) / 100);
+</script>
+
+{#if $user}
+	<AppHeader avatarPosition="left-[calc(50vw-48px)] lg:left-[calc(15vw-48px)]" />
+
+	<div
+		class="text-center mx-auto lg:text-left lg:mx-0 lg:ml-[calc(15vw-48px)] mt-12 w-full md:w-72"
+	>
+		<h2 class="text-2xl font-semibold">{$user.username}</h2>
+		<span class="text-secondary">Address goes here</span>
+	</div>
+
+	<div class="px-3 md:px-0 flex justify-center items-center mt-10 lg:mt-0 mb-20">
+		<div>
+			<h1 class="text-3xl md:text-4xl font-semibold mb-8">
+				{withdrawing ? 'Withdraw' : 'Dashboard'}
+			</h1>
+			{#if !withdrawing}
+				<span class="text-secondary mx-auto text-lg font-bold"
+					>Bitcoin Price: <span class="text-black">{$rate ? btcPrice : 'fetching rate...'}</span>
+					{$preferredCurrency}
+				</span>
+
+				<span class="text-secondary block mt-1"
+					>Data from <span class="text-black">Binance</span>.
+				</span>
+
+				<h3 class="text-secondary font-bold border-b pb-1 mt-10 mb-6 w-full md:w-[500px]">
+					ACCOUNT BALANCE
+				</h3>
+
+				<span class="text-3xl font-bold block mb-1"
+					>{$rate ? accountBalanceFiat : 'fetching rate...'}</span
+				>
+
+				<span class="text-secondary text-xl block">{accountBalanceSats} SATS</span>
+
+				<button class="rounded-full border py-2 font-bold w-28 mt-4" on:click={toggle}
+					>Withdraw</button
+				>
+				<p class="text-secondary my-2">You will be charged a 1% withdrawal fee on the amount.</p>
+			{:else}
+				<div class="space-y-3 w-[250px] md:w-[500px] md:pr-20">
+					<button on:click={() => (withdrawing = false)}>
+						<Icon icon="arrow-left" style="w-8" />
+					</button>
+
+					<div>
+						<label for="invoice" class="font-bold mb-1 block">Invoice</label>
+						<input
+							bind:this={payreqField}
+							type="text"
+							name="payreq"
+							required
+							bind:value={payreq}
+							class="block rounded-2xl p-3 w-full bg-primary"
+						/>
+					</div>
+
+					<div>
+						<label for="note" class="font-bold mb-1 block">Note (Optional)</label>
+						<textarea name="note" rows={2} class="block rounded-2xl p-3 w-full bg-primary" />
+					</div>
+
+					<button
+						disabled={!payreq}
+						class="{!payreq
+							? 'opacity-50'
+							: 'opacity-100'} rounded-2xl border py-3 font-bold w-full mt-2 bg-black text-white"
+						on:click={withdraw}>Send</button
+					>
+				</div>
+			{/if}
+		</div>
+	</div>
+{/if}
diff --git a/src/routes/[username]/index.js b/src/routes/[username]/index.js
deleted file mode 100644
index 5de1316f..00000000
--- a/src/routes/[username]/index.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { get } from '$lib/utils';
-
-export async function GET({ params }) {
-	let { username } = params;
-	let body;
-
-	try {
-		body = await get(`/users/${username}`);
-	} catch (e) {
-		body = {};
-	}
-
-	return { body };
-}
diff --git a/src/routes/[username]/index.svelte b/src/routes/[username]/index.svelte
deleted file mode 100644
index 41d60849..00000000
--- a/src/routes/[username]/index.svelte
+++ /dev/null
@@ -1,79 +0,0 @@
-<script>
-	import { browser } from '$app/env';
-	import { onMount } from 'svelte';
-	import { AppHeader, Icon, PageNotFound } from '$comp';
-	import { user } from '$lib/store';
-	import { copy } from '$lib/utils';
-	export let username;
-
-	let lightningAddress = `${username}@coinos.io`;
-
-	onMount(async () => {
-		if (browser) {
-			let { default: QRCodeStyling } = await import('qr-code-styling');
-			const qrCode = new QRCodeStyling({
-				width: window.screen.width < 640 ? 250 : 300,
-				type: 'canvas',
-				data: 'add static qr here',
-				image: '/images/invoice.svg',
-				backgroundOptions: {
-					color: 'rgba(0, 0, 0, 0)'
-				},
-				dotsOptions: {
-					type: 'rounded'
-				},
-				imageOptions: {
-					hideBackgroundDots: false
-				}
-			});
-
-			qrCode.append(document.getElementById('qr'));
-		}
-	});
-
-	let followed = false;
-</script>
-
-{#if username}
-	<AppHeader avatarPosition="left-[calc(15vw-48px)]" />
-
-	<div class="flex xl:block justify-center items-center my-20 px-3">
-		<div class="space-y-10 xl:space-y-0">
-			<div class="xl:ml-[calc(15vw-48px)] space-y-2 w-full md:w-72">
-				<h1 class="text-3xl font-bold">{username}</h1>
-
-				<p class="text-secondary">Address goes here</p>
-
-				<!--
-        we need to hook this up
-        <button
-					class="border rounded-full py-2 w-28 font-semibold flex justify-center items-center text-sm"
-					on:click={() => (followed = !followed)}
-					><Icon icon={followed ? 'minus' : 'plus'} style="mr-1" />
-					{followed ? 'Remove' : 'Follow'}
-				</button>
-        -->
-			</div>
-
-			<div class="space-y-5 static xl:absolute top-[255px] left-[calc(50vw-150px)]">
-				<div
-					id="qr"
-					class="w-[292px] md:w-[342px] h-[342px] border border-lightgrey rounded-3xl flex p-5 justify-center items-center relative"
-				/>
-
-				<p class="text-secondary text-center font-semibold">Scan to pay with bitcoin</p>
-
-				<div
-					class="bg-primary font-semibold rounded-xl text-sm py-2 px-3 flex flex-wrap justify-center items-center"
-				>
-					<span>{lightningAddress}</span>
-					<button on:click={() => copy(lightningAddress)}>
-						<Icon icon="copy" style="ml-2" />
-					</button>
-				</div>
-			</div>
-		</div>
-	</div>
-{:else}
-	<PageNotFound />
-{/if}
diff --git a/src/routes/[username]/receive.svelte b/src/routes/[username]/receive.svelte
deleted file mode 100644
index f0fa0fbd..00000000
--- a/src/routes/[username]/receive.svelte
+++ /dev/null
@@ -1,175 +0,0 @@
-<script>
-	// in the future we will want to allow users to set their fiat currency in the settings
-	import { AppHeader, Icon } from '$comp';
-	import { goto } from '$app/navigation';
-	import { invoiceAmount, invoiceAmountFiat, rate, user } from '$lib/store';
-	import { post, warning } from '$lib/utils';
-	import { page } from '$app/stores';
-
-	let useFiat = true;
-	let amountFiat = 0;
-	let amountSats = 0;
-
-	$: amount = useFiat ? Math.round(amountFiat / ($rate / 100000000)) : amountSats;
-
-	$: $invoiceAmount = parseInt(amountSats === 0 ? amountFiat / ($rate / 100000000) : amountSats);
-	$: $invoiceAmountFiat = parseInt(
-		amountFiat === 0 ? amountSats * ($rate / 100000000) : amountFiat
-	);
-	$: amountSatsFormatted = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(
-		amountSats
-	);
-
-	$: amountFiatConverted = new Intl.NumberFormat('en-US', {
-		style: 'currency',
-		currency: 'USD'
-	}).format(amountSats * ($rate / 100000000));
-
-	$: amountSatsConverted = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(
-		amountFiat / ($rate / 100000000)
-	);
-
-	const numPad = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '.', '0', '<'];
-
-	const handleInput = (value) => {
-		if (useFiat) {
-			if (amountFiat === 0 && value !== '.' && value !== '<' && value !== '0') {
-				amountFiat = value;
-			} else if ((amountFiat === 0 || amountFiat === '0') && value === '0') {
-				return;
-			} else if (amountFiat === 0 && value === '.') {
-				amountFiat = '0.';
-			} else if (amountFiat !== 0 && amountFiat.includes('.') && value === '.') {
-				return;
-			} else if (value === '<') {
-				if (amountFiat !== 0) {
-					amountFiat = amountFiat.slice(0, amountFiat.length - 1);
-					if (amountFiat.length === 0) {
-						amountFiat = 0;
-						amountSats = 0;
-					}
-				}
-			} else if (value !== '.' && value !== '<' && parseInt(amountFiat + value) > $rate) {
-				warning('Please enter an amount less than 1 bitcoin.');
-			} else if (amountFiat !== 0 && amountFiat.match(/\.../)) {
-				return;
-			} else {
-				amountFiat = amountFiat + value;
-			}
-		} else {
-			if (value === '.') {
-				return;
-			} else if (amountSats === 0 && value !== '<' && value !== '0') {
-				amountSats = value;
-			} else if (value === '<') {
-				if (amountSats !== 0) {
-					amountSats = amountSats.slice(0, amountSats.length - 1);
-					if (amountSats.length === 0) {
-						amountSats = 0;
-						amountFiat = 0;
-					}
-				}
-			} else if (value !== '<' && parseInt(amountSats + value) > 100000000) {
-				warning('Please enter an amount less than 1 bitcoin.');
-			} else {
-				amountSats = amountSats + value;
-			}
-		}
-	};
-
-	let submit = async () => {
-		let { id } = await post('/invoice', { amount, rate: $rate, username: $page.params.username });
-		goto(`/invoice/${id}`);
-	};
-</script>
-
-{#if $user}
-	<AppHeader />
-
-	<div class="flex justify-center items-center mt-20 mb-3 px-3">
-		{#if $rate}
-			<div class="space-y-5">
-				<!-- amounts -->
-				<div class="text-center">
-					<div class="text-5xl md:text-6xl font-semibold tracking-widest mb-1">
-						{useFiat ? `$${amountFiat}` : amountSatsFormatted}<span
-							class="tracking-normal text-base font-normal">{useFiat ? 'USD' : 'SATS'}</span
-						>
-					</div>
-					<span class="text-secondary mr-1"
-						>{useFiat ? `${amountSatsConverted} SATS` : `${amountFiatConverted} USD`}</span
-					>
-					<button
-						on:click={() => {
-							if (useFiat) {
-								amountSats = (amountFiat / ($rate / 100000000)).toFixed(0).toString();
-							} else {
-								amountFiat =
-									(amountSats * ($rate / 100000000)).toFixed(2) > 0.0
-										? (amountSats * ($rate / 100000000)).toFixed(2).toString()
-										: 0;
-							}
-							useFiat = !useFiat;
-						}}><Icon icon="swap" style="inline" /></button
-					>
-				</div>
-
-				<!-- numpad -->
-				<div class="grid grid-cols-3 gap-2 w-full md:w-[300px] mx-auto">
-					{#each numPad as value}
-						{#if value === '<'}
-							<button
-								class="bg-primary rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white flex justify-center items-center"
-								on:click={() => handleInput(value)}
-							>
-								<svg
-									class="w-5"
-									width="24"
-									height="24"
-									viewBox="0 0 24 24"
-									fill="none"
-									xmlns="http://www.w3.org/2000/svg"
-								>
-									<path
-										d="M15 19L8 12L15 5"
-										stroke="currentColor"
-										stroke-width="2"
-										stroke-linecap="round"
-										stroke-linejoin="round"
-									/>
-								</svg>
-							</button>
-						{:else}
-							<button
-								class="bg-primary rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white"
-								on:click={() => handleInput(value)}>{value}</button
-							>
-						{/if}
-					{/each}
-				</div>
-
-				<!-- buttons -->
-				<div class="space-y-3 w-full md:w-[300px] mx-auto">
-					<button
-						class="bg-black text-white rounded-xl w-full h-[48px] flex justify-center items-center font-semibold text-sm {$invoiceAmount ===
-						0
-							? 'opacity-50'
-							: 'opacity-100'}"
-						on:click={submit}
-						disabled={$invoiceAmount === 0}><Icon icon="qr" style="mr-2" /> Show QR</button
-					>
-					<!--
-					<button
-						class="bg-primary rounded-xl w-full h-[48px] flex justify-center items-center font-semibold text-sm"
-						disabled={true}><Icon icon="send" style="mr-2" /> Send Invoice</button
-					>
-          -->
-				</div>
-			</div>
-		{:else}
-			<div
-				class="w-full md:w-[300px] h-[475px] md:h-[485px] animate-pulse bg-gray-400 rounded-xl"
-			/>
-		{/if}
-	</div>
-{/if}
diff --git a/src/routes/[username]/receive/+page.svelte b/src/routes/[username]/receive/+page.svelte
new file mode 100644
index 00000000..f0fa0fbd
--- /dev/null
+++ b/src/routes/[username]/receive/+page.svelte
@@ -0,0 +1,175 @@
+<script>
+	// in the future we will want to allow users to set their fiat currency in the settings
+	import { AppHeader, Icon } from '$comp';
+	import { goto } from '$app/navigation';
+	import { invoiceAmount, invoiceAmountFiat, rate, user } from '$lib/store';
+	import { post, warning } from '$lib/utils';
+	import { page } from '$app/stores';
+
+	let useFiat = true;
+	let amountFiat = 0;
+	let amountSats = 0;
+
+	$: amount = useFiat ? Math.round(amountFiat / ($rate / 100000000)) : amountSats;
+
+	$: $invoiceAmount = parseInt(amountSats === 0 ? amountFiat / ($rate / 100000000) : amountSats);
+	$: $invoiceAmountFiat = parseInt(
+		amountFiat === 0 ? amountSats * ($rate / 100000000) : amountFiat
+	);
+	$: amountSatsFormatted = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(
+		amountSats
+	);
+
+	$: amountFiatConverted = new Intl.NumberFormat('en-US', {
+		style: 'currency',
+		currency: 'USD'
+	}).format(amountSats * ($rate / 100000000));
+
+	$: amountSatsConverted = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(
+		amountFiat / ($rate / 100000000)
+	);
+
+	const numPad = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '.', '0', '<'];
+
+	const handleInput = (value) => {
+		if (useFiat) {
+			if (amountFiat === 0 && value !== '.' && value !== '<' && value !== '0') {
+				amountFiat = value;
+			} else if ((amountFiat === 0 || amountFiat === '0') && value === '0') {
+				return;
+			} else if (amountFiat === 0 && value === '.') {
+				amountFiat = '0.';
+			} else if (amountFiat !== 0 && amountFiat.includes('.') && value === '.') {
+				return;
+			} else if (value === '<') {
+				if (amountFiat !== 0) {
+					amountFiat = amountFiat.slice(0, amountFiat.length - 1);
+					if (amountFiat.length === 0) {
+						amountFiat = 0;
+						amountSats = 0;
+					}
+				}
+			} else if (value !== '.' && value !== '<' && parseInt(amountFiat + value) > $rate) {
+				warning('Please enter an amount less than 1 bitcoin.');
+			} else if (amountFiat !== 0 && amountFiat.match(/\.../)) {
+				return;
+			} else {
+				amountFiat = amountFiat + value;
+			}
+		} else {
+			if (value === '.') {
+				return;
+			} else if (amountSats === 0 && value !== '<' && value !== '0') {
+				amountSats = value;
+			} else if (value === '<') {
+				if (amountSats !== 0) {
+					amountSats = amountSats.slice(0, amountSats.length - 1);
+					if (amountSats.length === 0) {
+						amountSats = 0;
+						amountFiat = 0;
+					}
+				}
+			} else if (value !== '<' && parseInt(amountSats + value) > 100000000) {
+				warning('Please enter an amount less than 1 bitcoin.');
+			} else {
+				amountSats = amountSats + value;
+			}
+		}
+	};
+
+	let submit = async () => {
+		let { id } = await post('/invoice', { amount, rate: $rate, username: $page.params.username });
+		goto(`/invoice/${id}`);
+	};
+</script>
+
+{#if $user}
+	<AppHeader />
+
+	<div class="flex justify-center items-center mt-20 mb-3 px-3">
+		{#if $rate}
+			<div class="space-y-5">
+				<!-- amounts -->
+				<div class="text-center">
+					<div class="text-5xl md:text-6xl font-semibold tracking-widest mb-1">
+						{useFiat ? `$${amountFiat}` : amountSatsFormatted}<span
+							class="tracking-normal text-base font-normal">{useFiat ? 'USD' : 'SATS'}</span
+						>
+					</div>
+					<span class="text-secondary mr-1"
+						>{useFiat ? `${amountSatsConverted} SATS` : `${amountFiatConverted} USD`}</span
+					>
+					<button
+						on:click={() => {
+							if (useFiat) {
+								amountSats = (amountFiat / ($rate / 100000000)).toFixed(0).toString();
+							} else {
+								amountFiat =
+									(amountSats * ($rate / 100000000)).toFixed(2) > 0.0
+										? (amountSats * ($rate / 100000000)).toFixed(2).toString()
+										: 0;
+							}
+							useFiat = !useFiat;
+						}}><Icon icon="swap" style="inline" /></button
+					>
+				</div>
+
+				<!-- numpad -->
+				<div class="grid grid-cols-3 gap-2 w-full md:w-[300px] mx-auto">
+					{#each numPad as value}
+						{#if value === '<'}
+							<button
+								class="bg-primary rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white flex justify-center items-center"
+								on:click={() => handleInput(value)}
+							>
+								<svg
+									class="w-5"
+									width="24"
+									height="24"
+									viewBox="0 0 24 24"
+									fill="none"
+									xmlns="http://www.w3.org/2000/svg"
+								>
+									<path
+										d="M15 19L8 12L15 5"
+										stroke="currentColor"
+										stroke-width="2"
+										stroke-linecap="round"
+										stroke-linejoin="round"
+									/>
+								</svg>
+							</button>
+						{:else}
+							<button
+								class="bg-primary rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white"
+								on:click={() => handleInput(value)}>{value}</button
+							>
+						{/if}
+					{/each}
+				</div>
+
+				<!-- buttons -->
+				<div class="space-y-3 w-full md:w-[300px] mx-auto">
+					<button
+						class="bg-black text-white rounded-xl w-full h-[48px] flex justify-center items-center font-semibold text-sm {$invoiceAmount ===
+						0
+							? 'opacity-50'
+							: 'opacity-100'}"
+						on:click={submit}
+						disabled={$invoiceAmount === 0}><Icon icon="qr" style="mr-2" /> Show QR</button
+					>
+					<!--
+					<button
+						class="bg-primary rounded-xl w-full h-[48px] flex justify-center items-center font-semibold text-sm"
+						disabled={true}><Icon icon="send" style="mr-2" /> Send Invoice</button
+					>
+          -->
+				</div>
+			</div>
+		{:else}
+			<div
+				class="w-full md:w-[300px] h-[475px] md:h-[485px] animate-pulse bg-gray-400 rounded-xl"
+			/>
+		{/if}
+	</div>
+{/if}
diff --git a/src/routes/[username]/settings.svelte b/src/routes/[username]/settings.svelte
deleted file mode 100644
index e4d7b0bf..00000000
--- a/src/routes/[username]/settings.svelte
+++ /dev/null
@@ -1,176 +0,0 @@
-<script>
-	import { AppHeader, Icon, Toggle, LocaleSelector } from '$comp';
-	import { user, colorTheme } from '$lib/store';
-
-	let setting = 'account';
-	let password;
-	let revealPassword = false;
-
-	const colorThemes = [
-		{ theme: 1, color1: 'from-[#F5F7FA]', color2: 'to-[#C3CFE2]' },
-		{ theme: 2, color1: 'from-[#FDFCFB]', color2: 'to-[#E2D1C3]' },
-		{ theme: 3, color1: 'from-[#E6E9F0]', color2: 'to-[#EEF1F5]' },
-		{ theme: 4, color1: 'from-[#D5D4D0]', color2: 'to-[#EEEEEC]' },
-		{ theme: 5, color1: 'from-[#F3E7E9]', color2: 'to-[#E3EEFF]' },
-		{ theme: 6, color1: 'from-[#F5F7FA]', color2: 'via-[#EAF2FF] to-[#DEDFFF]' }
-	];
-	// need to update this to use the new backend field
-	let selectedTheme = 1;
-
-	const handleThemeClick = (colors) => {
-		selectedTheme = colors.theme;
-		$colorTheme = colors.color1 + ' ' + colors.color2;
-	};
-</script>
-
-{#if $user}
-	<AppHeader />
-
-	<div class="my-20 px-3 md:px-0 w-full md:w-[400px] mx-auto space-y-8">
-		<h1 class="text-center text-3xl md:text-4xl font-semibold mb-10">Settings</h1>
-
-		<div class="font-bold flex justify-between items-center border-b pb-3 text-secondary">
-			<button class:selected={setting === 'account'} on:click={() => (setting = 'account')}
-				>ACCOUNT</button
-			>
-
-			<button class:selected={setting === 'pos'} on:click={() => (setting = 'pos')}
-				>POINT OF SALE</button
-			>
-
-			<button class:selected={setting === 'security'} on:click={() => (setting = 'security')}
-				>SECURITY</button
-			>
-		</div>
-
-		{#if setting === 'account'}
-			<div>
-				<label for="language" class="font-bold block mb-1">Language</label>
-				<LocaleSelector style="block py-3 w-full" />
-			</div>
-
-			<div>
-				<label for="username" class="font-bold mb-1 block">Username</label>
-				<input
-					type="text"
-					disabled
-					name="username"
-					value={$user.username}
-					class="block border rounded-xl p-3 w-full"
-				/>
-			</div>
-
-			<div class="relative">
-				<label for="password" class="block font-bold block mb-1">New Password</label>
-				{#if revealPassword}
-					<input type="text" class="block border rounded-xl p-3 w-full" bind:value={password} />
-				{:else}
-					<input type="password" class="block border rounded-xl p-3 w-full" bind:value={password} />
-				{/if}
-				<button
-					type="button"
-					on:click={() => (revealPassword = !revealPassword)}
-					class="absolute right-5 top-10"
-				>
-					<Icon icon={revealPassword ? 'eye' : 'eye-off'} />
-				</button>
-			</div>
-
-			<div>
-				<label for="address" class="font-bold mb-1 block">Business Address</label>
-				<input type="text" name="address" class="block border rounded-xl p-3 w-full" />
-			</div>
-
-			<div>
-				<div class="flex justify-between items-center">
-					<span class="font-bold">Email Notifications</span>
-					<Toggle id="email-notify" />
-				</div>
-				<p class="text-secondary mt-1 w-9/12">
-					Get notified via email when a change occurs on your account or when people send you
-					payments.
-				</p>
-			</div>
-
-			<div>
-				<div class="flex justify-between items-center">
-					<span class="font-bold">SMS Notifications</span>
-					<Toggle id="sms-notify" />
-				</div>
-				<p class="text-secondary mt-1 w-9/12">
-					CoinOS will send you text notifications when this is enabled.
-				</p>
-			</div>
-
-			<div>
-				<span class="font-bold mb-1 block">Color Theme</span>
-				<p class="text-secondary mb-1">Select from the default color themes.</p>
-				{#each colorThemes as colors}
-					<button
-						class="mr-2 w-10 h-10 bg-gradient-to-r {colors.color1} {colors.color2} rounded-xl border-2 {selectedTheme ===
-						colors.theme
-							? 'border-black'
-							: ''}"
-						on:click={() => handleThemeClick(colors)}
-					/>
-				{/each}
-			</div>
-		{:else if setting === 'pos'}
-			<div>
-				<label for="currency" class="font-bold block mb-1">Local Currency</label>
-				<select name="currency" class="block py-3 w-full">
-					<option value="USD">USD</option>
-				</select>
-			</div>
-
-			<div>
-				<label for="btc-unit" class="font-bold block mb-1">Display bitcoin in:</label>
-				<select disabled name="btc-unit" class="block py-3 w-full">
-					<option value="SATS">Satoshi (SATS)</option>
-					<option value="BTC">Bitcoin (BTC)</option>
-				</select>
-			</div>
-		{:else}
-			<div>
-				<span class="font-bold mb-1">Security Pin</span>
-				<p class="text-secondary mb-1">
-					Set a security pin that will be used to unlock your settings and to send outgoing
-					payments.
-				</p>
-				<button class="p-3 border rounded-3xl font-bold flex justify-center items-center"
-					><Icon icon="lock" style="mr-1" /> Set Pin</button
-				>
-			</div>
-
-			<div>
-				<label for="auto-lock" class="font-bold mb-1">Auto-Lock Timer</label>
-				<p class="text-secondary mb-1">
-					Your account will go into a secure mode automatically after a specified time:
-				</p>
-				<select name="auto-lock" class="block py-3 w-full">
-					<option value="5">5 min</option>
-					<option value="10">10 min</option>
-					<option value="30">30 min</option>
-					<option value="60">1 hour</option>
-					<option value="480">8 hours</option>
-				</select>
-			</div>
-
-			<div>
-				<span class="font-bold mb-1">2-Factor Authentication</span>
-				<p class="text-secondary mb-1">
-					Add an extra level of security to your device by enableing 2-factor authentication.
-				</p>
-				<button class="p-3 border rounded-3xl font-bold flex justify-center items-center"
-					><Icon icon="mobile" style="mr-1" /> Set up 2FA</button
-				>
-			</div>
-		{/if}
-	</div>
-{/if}
-
-<style>
-	.selected {
-		color: black;
-	}
-</style>
diff --git a/src/routes/[username]/settings/+page.svelte b/src/routes/[username]/settings/+page.svelte
new file mode 100644
index 00000000..e4d7b0bf
--- /dev/null
+++ b/src/routes/[username]/settings/+page.svelte
@@ -0,0 +1,176 @@
+<script>
+	import { AppHeader, Icon, Toggle, LocaleSelector } from '$comp';
+	import { user, colorTheme } from '$lib/store';
+
+	let setting = 'account';
+	let password;
+	let revealPassword = false;
+
+	const colorThemes = [
+		{ theme: 1, color1: 'from-[#F5F7FA]', color2: 'to-[#C3CFE2]' },
+		{ theme: 2, color1: 'from-[#FDFCFB]', color2: 'to-[#E2D1C3]' },
+		{ theme: 3, color1: 'from-[#E6E9F0]', color2: 'to-[#EEF1F5]' },
+		{ theme: 4, color1: 'from-[#D5D4D0]', color2: 'to-[#EEEEEC]' },
+		{ theme: 5, color1: 'from-[#F3E7E9]', color2: 'to-[#E3EEFF]' },
+		{ theme: 6, color1: 'from-[#F5F7FA]', color2: 'via-[#EAF2FF] to-[#DEDFFF]' }
+	];
+	// need to update this to use the new backend field
+	let selectedTheme = 1;
+
+	const handleThemeClick = (colors) => {
+		selectedTheme = colors.theme;
+		$colorTheme = colors.color1 + ' ' + colors.color2;
+	};
+</script>
+
+{#if $user}
+	<AppHeader />
+
+	<div class="my-20 px-3 md:px-0 w-full md:w-[400px] mx-auto space-y-8">
+		<h1 class="text-center text-3xl md:text-4xl font-semibold mb-10">Settings</h1>
+
+		<div class="font-bold flex justify-between items-center border-b pb-3 text-secondary">
+			<button class:selected={setting === 'account'} on:click={() => (setting = 'account')}
+				>ACCOUNT</button
+			>
+
+			<button class:selected={setting === 'pos'} on:click={() => (setting = 'pos')}
+				>POINT OF SALE</button
+			>
+
+			<button class:selected={setting === 'security'} on:click={() => (setting = 'security')}
+				>SECURITY</button
+			>
+		</div>
+
+		{#if setting === 'account'}
+			<div>
+				<label for="language" class="font-bold block mb-1">Language</label>
+				<LocaleSelector style="block py-3 w-full" />
+			</div>
+
+			<div>
+				<label for="username" class="font-bold mb-1 block">Username</label>
+				<input
+					type="text"
+					disabled
+					name="username"
+					value={$user.username}
+					class="block border rounded-xl p-3 w-full"
+				/>
+			</div>
+
+			<div class="relative">
+				<label for="password" class="block font-bold block mb-1">New Password</label>
+				{#if revealPassword}
+					<input type="text" class="block border rounded-xl p-3 w-full" bind:value={password} />
+				{:else}
+					<input type="password" class="block border rounded-xl p-3 w-full" bind:value={password} />
+				{/if}
+				<button
+					type="button"
+					on:click={() => (revealPassword = !revealPassword)}
+					class="absolute right-5 top-10"
+				>
+					<Icon icon={revealPassword ? 'eye' : 'eye-off'} />
+				</button>
+			</div>
+
+			<div>
+				<label for="address" class="font-bold mb-1 block">Business Address</label>
+				<input type="text" name="address" class="block border rounded-xl p-3 w-full" />
+			</div>
+
+			<div>
+				<div class="flex justify-between items-center">
+					<span class="font-bold">Email Notifications</span>
+					<Toggle id="email-notify" />
+				</div>
+				<p class="text-secondary mt-1 w-9/12">
+					Get notified via email when a change occurs on your account or when people send you
+					payments.
+				</p>
+			</div>
+
+			<div>
+				<div class="flex justify-between items-center">
+					<span class="font-bold">SMS Notifications</span>
+					<Toggle id="sms-notify" />
+				</div>
+				<p class="text-secondary mt-1 w-9/12">
+					CoinOS will send you text notifications when this is enabled.
+				</p>
+			</div>
+
+			<div>
+				<span class="font-bold mb-1 block">Color Theme</span>
+				<p class="text-secondary mb-1">Select from the default color themes.</p>
+				{#each colorThemes as colors}
+					<button
+						class="mr-2 w-10 h-10 bg-gradient-to-r {colors.color1} {colors.color2} rounded-xl border-2 {selectedTheme ===
+						colors.theme
+							? 'border-black'
+							: ''}"
+						on:click={() => handleThemeClick(colors)}
+					/>
+				{/each}
+			</div>
+		{:else if setting === 'pos'}
+			<div>
+				<label for="currency" class="font-bold block mb-1">Local Currency</label>
+				<select name="currency" class="block py-3 w-full">
+					<option value="USD">USD</option>
+				</select>
+			</div>
+
+			<div>
+				<label for="btc-unit" class="font-bold block mb-1">Display bitcoin in:</label>
+				<select disabled name="btc-unit" class="block py-3 w-full">
+					<option value="SATS">Satoshi (SATS)</option>
+					<option value="BTC">Bitcoin (BTC)</option>
+				</select>
+			</div>
+		{:else}
+			<div>
+				<span class="font-bold mb-1">Security Pin</span>
+				<p class="text-secondary mb-1">
+					Set a security pin that will be used to unlock your settings and to send outgoing
+					payments.
+				</p>
+				<button class="p-3 border rounded-3xl font-bold flex justify-center items-center"
+					><Icon icon="lock" style="mr-1" /> Set Pin</button
+				>
+			</div>
+
+			<div>
+				<label for="auto-lock" class="font-bold mb-1">Auto-Lock Timer</label>
+				<p class="text-secondary mb-1">
+					Your account will go into a secure mode automatically after a specified time:
+				</p>
+				<select name="auto-lock" class="block py-3 w-full">
+					<option value="5">5 min</option>
+					<option value="10">10 min</option>
+					<option value="30">30 min</option>
+					<option value="60">1 hour</option>
+					<option value="480">8 hours</option>
+				</select>
+			</div>
+
+			<div>
+				<span class="font-bold mb-1">2-Factor Authentication</span>
+				<p class="text-secondary mb-1">
+					Add an extra level of security to your device by enableing 2-factor authentication.
+				</p>
+				<button class="p-3 border rounded-3xl font-bold flex justify-center items-center"
+					><Icon icon="mobile" style="mr-1" /> Set up 2FA</button
+				>
+			</div>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.selected {
+		color: black;
+	}
+</style>
diff --git a/src/routes/[username]/support.svelte b/src/routes/[username]/support.svelte
deleted file mode 100644
index 335c804f..00000000
--- a/src/routes/[username]/support.svelte
+++ /dev/null
@@ -1,60 +0,0 @@
-<script>
-	// this needs to be hooked up to the backend
-	import { AppHeader } from '$comp';
-	import { user } from '$lib/store';
-	let email;
-	let message;
-</script>
-
-{#if $user}
-	<AppHeader />
-
-	<div class="my-20">
-		<h1 class="text-center text-3xl md:text-4xl font-semibold mb-10">Support</h1>
-
-		<form class="space-y-5 mx-auto w-11/12 md:w-[350px]">
-			<div>
-				<label for="email" class="font-semibold">Email</label>
-				<input
-					class="block border rounded-xl p-2 w-full"
-					type="email"
-					name="email"
-					bind:value={email}
-					required
-				/>
-			</div>
-
-			<div>
-				<label for="account" class="font-semibold">Account Name</label>
-				<input
-					class="block border rounded-xl p-2 w-full"
-					type="text"
-					name="account"
-					required
-					disabled
-					value={$user.username}
-				/>
-			</div>
-
-			<div>
-				<label for="message" class="font-semibold">Message</label>
-				<textarea
-					rows={5}
-					class="block border rounded-xl p-2 w-full"
-					type="text"
-					name="message"
-					bind:value={message}
-					required
-				/>
-			</div>
-
-			<button
-				disabled={!email || !message}
-				class="{!email || !message
-					? 'opacity-50'
-					: 'opacity-100'} bg-black text-white font-bold rounded-xl py-3 w-full mx-auto"
-				>Send</button
-			>
-		</form>
-	</div>
-{/if}
diff --git a/src/routes/[username]/support/+page.svelte b/src/routes/[username]/support/+page.svelte
new file mode 100644
index 00000000..335c804f
--- /dev/null
+++ b/src/routes/[username]/support/+page.svelte
@@ -0,0 +1,60 @@
+<script>
+	// this needs to be hooked up to the backend
+	import { AppHeader } from '$comp';
+	import { user } from '$lib/store';
+	let email;
+	let message;
+</script>
+
+{#if $user}
+	<AppHeader />
+
+	<div class="my-20">
+		<h1 class="text-center text-3xl md:text-4xl font-semibold mb-10">Support</h1>
+
+		<form class="space-y-5 mx-auto w-11/12 md:w-[350px]">
+			<div>
+				<label for="email" class="font-semibold">Email</label>
+				<input
+					class="block border rounded-xl p-2 w-full"
+					type="email"
+					name="email"
+					bind:value={email}
+					required
+				/>
+			</div>
+
+			<div>
+				<label for="account" class="font-semibold">Account Name</label>
+				<input
+					class="block border rounded-xl p-2 w-full"
+					type="text"
+					name="account"
+					required
+					disabled
+					value={$user.username}
+				/>
+			</div>
+
+			<div>
+				<label for="message" class="font-semibold">Message</label>
+				<textarea
+					rows={5}
+					class="block border rounded-xl p-2 w-full"
+					type="text"
+					name="message"
+					bind:value={message}
+					required
+				/>
+			</div>
+
+			<button
+				disabled={!email || !message}
+				class="{!email || !message
+					? 'opacity-50'
+					: 'opacity-100'} bg-black text-white font-bold rounded-xl py-3 w-full mx-auto"
+				>Send</button
+			>
+		</form>
+	</div>
+{/if}
diff --git a/src/routes/[username]/transactions.svelte b/src/routes/[username]/transactions.svelte
deleted file mode 100644
index c91fd900..00000000
--- a/src/routes/[username]/transactions.svelte
+++ /dev/null
@@ -1,60 +0,0 @@
-<script>
-	import { AppHeader } from '$comp';
-	import { user, newPayment } from '$lib/store';
-
-	$newPayment = false;
-
-	$: transactions = $user.payments;
-</script>
-
-{#if $user}
-	<AppHeader />
-
-	<div class="my-20">
-		<h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold mb-10">
-			Transaction History
-		</h1>
-
-		<div class="max-w-5xl w-11/12 md:w-3/4 xl:w-1/2 mx-auto md:text-lg">
-			<div class="text-secondary grid grid-cols-3 mb-5">
-				<h2>AMOUNT</h2>
-				<h2 class="text-center">TYPE</h2>
-				<h2 class="text-right">TIME</h2>
-			</div>
-
-			<div class="space-y-10">
-				{#if transactions.length}
-					{#each transactions as tx}
-						<div class="grid grid-cols-3 border-b pb-5">
-							<div class="font-bold">
-								<span class="block mb-1"
-									>{tx.amount > 0 ? '+' : ''}{new Intl.NumberFormat('en-US', {
-										style: 'currency',
-										currency: 'USD'
-									}).format(tx.amount * (tx.rate / 100000000))}
-								</span>
-
-								<span class="text-secondary"
-									>{tx.amount > 0 ? '+' : ''}{new Intl.NumberFormat('en-US', {
-										maximumFractionDigits: 0
-									}).format(tx.amount)}
-									SATS
-								</span>
-							</div>
-
-							<div class="text-center">
-								<span class="text-secondary">{tx.amount < 0 ? 'Sent' : 'Received'}</span>
-							</div>
-
-							<div class="text-secondary text-right">
-								{new Date(tx.createdAt).toLocaleDateString(undefined, { dateStyle: 'medium' })}
-							</div>
-						</div>
-					{/each}
-				{:else}
-					<p class="text-secondary text-lg text-center">No transactions yet.</p>
-				{/if}
-			</div>
-		</div>
-	</div>
-{/if}
diff --git a/src/routes/[username]/transactions/+page.svelte b/src/routes/[username]/transactions/+page.svelte
new file mode 100644
index 00000000..c91fd900
--- /dev/null
+++ b/src/routes/[username]/transactions/+page.svelte
@@ -0,0 +1,60 @@
+<script>
+	import { AppHeader } from '$comp';
+	import { user, newPayment } from '$lib/store';
+
+	$newPayment = false;
+
+	$: transactions = $user.payments;
+</script>
+
+{#if $user}
+	<AppHeader />
+
+	<div class="my-20">
+		<h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold mb-10">
+			Transaction History
+		</h1>
+
+		<div class="max-w-5xl w-11/12 md:w-3/4 xl:w-1/2 mx-auto md:text-lg">
+			<div class="text-secondary grid grid-cols-3 mb-5">
+				<h2>AMOUNT</h2>
+				<h2 class="text-center">TYPE</h2>
+				<h2 class="text-right">TIME</h2>
+			</div>
+
+			<div class="space-y-10">
+				{#if transactions.length}
+					{#each transactions as tx}
+						<div class="grid grid-cols-3 border-b pb-5">
+							<div class="font-bold">
+								<span class="block mb-1"
+									>{tx.amount > 0 ? '+' : ''}{new Intl.NumberFormat('en-US', {
+										style: 'currency',
+										currency: 'USD'
+									}).format(tx.amount * (tx.rate / 100000000))}
+								</span>
+
+								<span class="text-secondary"
+									>{tx.amount > 0 ? '+' : ''}{new Intl.NumberFormat('en-US', {
+										maximumFractionDigits: 0
+									}).format(tx.amount)}
+									SATS
+								</span>
+							</div>
+
+							<div class="text-center">
+								<span class="text-secondary">{tx.amount < 0 ? 'Sent' : 'Received'}</span>
+							</div>
+
+							<div class="text-secondary text-right">
+								{new Date(tx.createdAt).toLocaleDateString(undefined, { dateStyle: 'medium' })}
+							</div>
+						</div>
+					{/each}
+				{:else}
+					<p class="text-secondary text-lg text-center">No transactions yet.</p>
+				{/if}
+			</div>
+		</div>
+	</div>
+{/if}
diff --git a/src/routes/__error.svelte b/src/routes/__error.svelte
deleted file mode 100644
index b62b158f..00000000
--- a/src/routes/__error.svelte
+++ /dev/null
@@ -1,38 +0,0 @@
-<script context="module">
-	export function load({ error, status }) {
-		if (error.message.includes('not found')) {
-			error.message = 'Page not found.';
-			status = 404;
-		}
-
-		return {
-			props: {
-				error,
-				status
-			}
-		};
-	}
-</script>
-
-<script>
-	import { Icon, PageNotFound } from '$comp';
-	export let status, error;
-</script>
-
-{#if status === 404}
-	<PageNotFound />
-{:else}
-	<div class="flex justify-center items-center mt-20">
-		<div class="space-y-5 text-center">
-			<a href="/">
-				<Icon icon="logo" style="mx-auto" />
-			</a>
-
-			<Icon icon="error" style="mx-auto w-56" />
-
-			<h1 class="font-bold text-5xl">Error</h1>
-			<p class="px-1 w-full md:w-96 break-all font-bold">{error.message.toUpperCase()}</p>
-			<p>Please try again or contact support.</p>
-		</div>
-	</div>
-{/if}
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
deleted file mode 100644
index 316bf6b3..00000000
--- a/src/routes/__layout.svelte
+++ /dev/null
@@ -1,57 +0,0 @@
-<script>
-	import { SvelteToast } from '@zerodevx/svelte-toast';
-	import '$lib/i18n';
-	import { isLoading, locale } from 'svelte-i18n';
-	import '../app.css';
-	import { onMount } from 'svelte';
-	import { connect } from '$lib/socket';
-	import { user, token } from '$lib/store';
-	import { page, session } from '$app/stores';
-	import { browser } from '$app/env';
-	import { goto } from '$app/navigation';
-	import { LoadingSplash } from '$comp';
-	import { warning, protectedRoutes } from '$lib/utils';
-
-	browser && ($token ||= $session.token);
-
-	let ready = false;
-
-	onMount(() => {
-		// get locale from local storage
-		let localStorageLocale = localStorage.getItem('svelte-i18n-locale');
-		if (localStorageLocale) locale.set(localStorageLocale);
-
-		locale.subscribe((lng) => {
-			if (lng) localStorage.setItem('svelte-i18n-locale', lng);
-		});
-
-		if (protectedRoutes.find((p) => $page.url.pathname.match(p))) {
-			if (!$token) {
-				goto('/login');
-				warning('Please sign in to continue.');
-			}
-			user.subscribe((u) => u?.username && (ready = true));
-		} else {
-			ready = true;
-		}
-
-		connect();
-	});
-</script>
-
-{#if ready && !$isLoading}
-	<SvelteToast options={{ reversed: true, intro: { y: 192 } }} />
-	<slot />
-{:else}
-	<LoadingSplash />
-{/if}
-
-<style>
-	:root {
-		--toastContainerTop: auto;
-		--toastContainerRight: auto;
-		--toastContainerBottom: 8rem;
-		--toastContainerLeft: calc(50vw - 8rem);
-		--toastBackground: #292929;
-	}
-</style>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
deleted file mode 100644
index f50db726..00000000
--- a/src/routes/index.svelte
+++ /dev/null
@@ -1,124 +0,0 @@
-<script>
-	import {
-		LandingHeader,
-		LandingHero,
-		LandingInfoCard,
-		HowItWorksCard,
-		FaqCard,
-		Image,
-		About,
-		Footer
-	} from '$comp';
-
-	let howItWorks;
-	let faq;
-	let about;
-
-	const howItWorksSteps = [
-		{
-			image: 'hand',
-			step: '1. Create your account',
-			description: 'A username & password is all you need to get started.'
-		},
-		{
-			image: 'bolt',
-			step: '2. Ask for payments',
-			description: 'The same as you normally would, but with bitcoin.'
-		},
-		{
-			image: 'smile',
-			step: "3. That's all!",
-			description: 'You can convert to local currency at any point.'
-		}
-	];
-
-	const faqQuestions = [
-		{
-			question: 'What does it cost?',
-			answer:
-				'CoinOS is free to use. You only pay a 1% fee if/when you withdraw your funds. Compare this to 3% typically charged by a credit card processor.'
-		},
-		{
-			question: 'Do I need any special device or software?',
-			answer:
-				'No. CoinOS is web-based, so as long as you have an internet connection, you can use it on any device or hardware. Most merchants might use it on a phone or a tablet.'
-		},
-		{
-			question: 'Are my funds safe?',
-			answer:
-				'Your funds are stored on our secure server, however we recommend that you withdraw them to your own cold storage for long-term savings.'
-		}
-	];
-</script>
-
-<LandingHeader {howItWorks} {faq} {about} />
-
-<main class="space-y-40 py-20 md:py-32 lg:py-36 xl:py-40 px-5 md:px-0">
-	<!-- hero -->
-	<LandingHero />
-
-	<!-- landing info 1 -->
-	<LandingInfoCard
-		image="lightning-qr"
-		title="Instant payments via Lightning."
-		description="The moment your customer sends a payment, it’s there. No waiting for bank settlements or
-    worrying about chargebacks. Instant settlement, in seconds. Say goodbye to 3% credit card
-    processing fees."
-	/>
-
-	<!-- landing info 2 -->
-	<LandingInfoCard
-		image="phone-checkout"
-		title="Simple to use, custodial by default."
-		order="reverse"
-	>
-		Just enter an amount, share QR code and you’re done.
-		<br /><br />
-		CoinOS is custodial by default, which eliminates the need to understand how bitcoin/lightning works.
-		We do all the heavy lifting so you can focus on your business.
-		<br /><br />
-		You always have the option of
-		<span class="underline underline-offset-4">taking custody</span> of your own keys.
-	</LandingInfoCard>
-
-	<!-- landing info 3 -->
-	<div>
-		<LandingInfoCard
-			image="customize"
-			title="Brand it your way!"
-			description="Customize your point of sale look and feel, or keep it on default - totally up to you."
-		/>
-		<div bind:this={howItWorks} />
-	</div>
-
-	<!-- how it works -->
-	<div>
-		<h3 class="text-5xl font-medium mb-10 text-center">How it works</h3>
-		<div
-			class="block lg:flex justify-center items-center space-y-10 lg:space-y-0 lg:space-x-10 text-center"
-		>
-			{#each howItWorksSteps as step}
-				<HowItWorksCard image={step.image} step={step.step} description={step.description} />
-			{/each}
-		</div>
-		<div bind:this={faq} />
-	</div>
-
-	<!-- faq -->
-	<div>
-		<div class="space-y-10">
-			<h3 class="text-5xl font-medium text-center">FAQ</h3>
-			{#each faqQuestions as question}
-				<FaqCard question={question.question} answer={question.answer} />
-			{/each}
-		</div>
-		<div bind:this={about} />
-	</div>
-
-	<!-- about -->
-	<div>
-		<About />
-	</div>
-</main>
-
-<Footer />
diff --git a/src/routes/invoice/+server.js b/src/routes/invoice/+server.js
new file mode 100644
index 00000000..24fffb21
--- /dev/null
+++ b/src/routes/invoice/+server.js
@@ -0,0 +1,15 @@
+import { json as json$1 } from '@sveltejs/kit';
+import { post } from '$lib/utils';
+
+let network = 'lightning';
+
+export async function POST({ request }) {
+	let { amount, rate, username, text } = await request.json();
+	if (!text) ({ text } = await post('/lightning/invoice', { amount }));
+	let { uuid: id } = await post('/invoice', {
+		invoice: { amount, currency: 'USD', network, rate, text },
+		user: { username }
+	});
+
+	return json$1({ id });
+}
diff --git a/src/routes/invoice/[id].js b/src/routes/invoice/[id].js
deleted file mode 100644
index a58d02a1..00000000
--- a/src/routes/invoice/[id].js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { get } from '$lib/utils';
-
-export async function GET({ params }) {
-	let { id } = params;
-	let {
-		amount,
-		rate,
-		status,
-		text,
-		user: { username }
-	} = await get(`/invoice?uuid=${id}`);
-
-	return { body: { amount, id, rate, username, status, text } };
-}
diff --git a/src/routes/invoice/[id].svelte b/src/routes/invoice/[id].svelte
deleted file mode 100644
index 9ef25251..00000000
--- a/src/routes/invoice/[id].svelte
+++ /dev/null
@@ -1,349 +0,0 @@
-<script>
-	import { get, post, reverseFormat } from '$lib/utils';
-	import { browser } from '$app/env';
-	import { invoices, user, preferredCurrency } from '$lib/store';
-	import { Icon, Image } from '$comp';
-	import { goto } from '$app/navigation';
-	import { onMount } from 'svelte';
-	import { copy } from '$lib/utils';
-
-	export let amount, id, rate, status, text, username;
-
-	$invoices[id] = { amount, id, rate, status, text, username };
-
-	$: amountFiat = parseFloat(((amount * rate) / 100000000).toFixed(2));
-
-	let tipPercent = 0;
-	let qr;
-
-	$: tipAmount = customTipAmount
-		? customTipAmount < 0
-			? (customTipAmount = 0)
-			: customTipAmount
-		: (amountFiat / 100) * tipPercent;
-
-	$: tipAmountFormatted = new Intl.NumberFormat('en-US', {
-		style: 'currency',
-		currency: 'USD'
-	}).format(tipAmount);
-
-	$: tipAmountSats = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(
-		tipAmount / (rate / 100000000)
-	);
-
-	$: totalAmountSats = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(
-		amount + parseFloat(tipAmountSats.replace(/,/g, ''))
-	);
-
-	$: update(tipAmountSats);
-	let update = async (n) => {
-		let { id } = await post('/invoice', {
-			amount: amount + reverseFormat(n),
-			rate,
-			text,
-			username
-		});
-		({ text } = await get(`/invoice/${id}`));
-	};
-
-	$: totalAmountFormatted = new Intl.NumberFormat('en-US', {
-		style: 'currency',
-		currency: 'USD'
-	}).format(amountFiat + parseFloat(tipAmount));
-
-	const amountFormatted = new Intl.NumberFormat('en-US', {
-		maximumFractionDigits: 0
-	}).format(amount);
-
-	$: invoiceAmountFiatFormatted = new Intl.NumberFormat('en-US', {
-		style: 'currency',
-		currency: 'USD'
-	}).format(amountFiat);
-
-	let customTipAmount;
-
-	const tipAmounts = ['None', '10%', '15%', '20%'];
-
-	const handleTipButtonClick = (amount) => {
-		customTipAmount = '';
-		customInput.value = '';
-
-		if (amount === 'None') {
-			tipPercent = 0;
-		} else {
-			tipPercent = amount.slice(0, 2);
-		}
-	};
-
-	const handleCustomTipAmount = (e) => {
-		tipPercent = 0;
-		customTipAmount = e.target.value;
-	};
-
-	$: generate(text);
-	let generate = async (ready) => {
-		if (!ready) return;
-		let { default: QRCodeStyling } = await import('qr-code-styling');
-
-		const qrCode = new QRCodeStyling({
-			width: window.screen.width < 640 ? 250 : 300,
-			type: 'canvas',
-			data: text,
-			image: '/images/invoice.svg',
-			backgroundOptions: {
-				color: 'rgba(0, 0, 0, 0)'
-			},
-			dotsOptions: {
-				type: 'rounded'
-			},
-			imageOptions: {
-				hideBackgroundDots: false
-			}
-		});
-
-		qrCode.append(qr);
-	};
-
-	let showMobileTip = false;
-
-	const handleBackButton = () => {
-		if (showMobileTip) {
-			tipPercent = 0;
-			customInput.value = '';
-			customTipAmount = 0;
-			tipAmount = 0;
-			showMobileTip = false;
-		} else {
-			goto(`/${$user.username}/receive`);
-		}
-	};
-
-	let customInput;
-
-	const handleDoneClick = () => {
-		if ($user) {
-			goto(`/${$user.username}/receive`);
-		} else {
-			goto('/');
-		}
-	};
-</script>
-
-{#if $invoices[id]?.status !== 'paid'}
-	<div class:full-shadow={showMobileTip}>
-		<button
-			class="ml-5 md:ml-20 mt-5 md:mt-10"
-			class:invisible={!$user}
-			on:click={handleBackButton}
-		>
-			<Icon icon="arrow-left" style="w-10" />
-		</button>
-
-		<div class="flex justify-center items-center mb-20 md:mt-[20px] px-3">
-			<div
-				class="block lg:flex justify-center items-center space-y-10 lg:space-y-0 space-x-0 lg:space-x-24"
-			>
-				<!-- tipping section  -->
-				<div
-					class="w-[100%] md:w-auto absolute {showMobileTip
-						? 'bottom-0'
-						: '-top-full'} bg-white p-6 md:p-0 rounded-t-3xl md:rounded-none left-0 md:static text-center space-y-5"
-				>
-					<h1 class="hidden md:block text-4xl font-semibold">Add a tip?</h1>
-
-					<div>
-						<span class="font-semibold mr-1">{tipAmountFormatted}</span><span
-							class="text-secondary font-semibold text-sm">{`(${tipAmountSats} SATS)`}</span
-						>
-						<span class="block text-secondary text-sm">{tipPercent}%</span>
-					</div>
-
-					<input
-						id="slider"
-						type="range"
-						min="0"
-						max="100"
-						value={tipPercent}
-						class="px-2"
-						on:input={(e) => {
-							customTipAmount = '';
-							customInput.value = '';
-							tipPercent = e.target.value;
-						}}
-					/>
-
-					<div>
-						{#each tipAmounts as amount}
-							<button
-								class="bg-primary w-16 md:w-20 py-3 m-1 rounded-2xl font-semibold {customTipAmount
-									? ''
-									: tipPercent === amount.slice(0, 2) ||
-									  ((tipPercent === 0 || tipPercent === '0') && amount === 'None')
-									? '!bg-black text-white'
-									: ''}"
-								on:click={() => handleTipButtonClick(amount)}>{amount}</button
-							>
-						{/each}
-
-						<div class="relative">
-							<span
-								class="absolute top-[20px] left-5 font-semibold {!customTipAmount
-									? 'opacity-50'
-									: 'opacity-100'}">$</span
-							>
-							<input
-								bind:this={customInput}
-								type="number"
-								min="0"
-								on:input={(e) => handleCustomTipAmount(e)}
-								class="bg-primary rounded-2xl py-3 px-10 font-semibold mt-2 mr-1 w-full md:w-auto"
-								placeholder="Other"
-							/>
-							<button
-								class="w-full md:w-auto mt-2 md:mt-0 bg-black text-white font-semibold py-3 px-7 rounded-2xl {showMobileTip
-									? !customTipAmount && !tipAmount
-										? 'opacity-50'
-										: 'opacity-100'
-									: !customTipAmount
-									? 'opacity-50'
-									: 'opacity-100'}"
-								disabled={showMobileTip ? !customTipAmount && !tipAmount : !customTipAmount}
-								on:click={() => (showMobileTip = false)}>Done</button
-							>
-						</div>
-					</div>
-				</div>
-
-				<div
-					class="hidden md:block h-[1px] lg:h-[600px] w-full lg:w-[1px] bg-lightgrey rounded-xl"
-					id="section-divider"
-				/>
-
-				<!-- invoice section -->
-				<div class="w-[325px] text-center space-y-5">
-					<button
-						class="block md:hidden bg-black {showMobileTip
-							? 'text-white/50'
-							: 'text-white'} rounded-xl px-6 py-3 block text-sm font-semibold mx-auto flex justify-center items-center"
-						on:click={() => (showMobileTip = true)}
-						disabled={showMobileTip}
-					>
-						<svg
-							width="24"
-							height="24"
-							class="mr-1"
-							viewBox="0 0 24 24"
-							fill="none"
-							xmlns="http://www.w3.org/2000/svg"
-						>
-							<path
-								d="M4.31802 6.31802C2.56066 8.07538 2.56066 10.9246 4.31802 12.682L12.0001 20.364L19.682 12.682C21.4393 10.9246 21.4393 8.07538 19.682 6.31802C17.9246 4.56066 15.0754 4.56066 13.318 6.31802L12.0001 7.63609L10.682 6.31802C8.92462 4.56066 6.07538 4.56066 4.31802 6.31802Z"
-								stroke="currentColor"
-								stroke-width="2"
-								stroke-linecap="round"
-								stroke-linejoin="round"
-							/>
-						</svg> Add a tip
-					</button>
-
-					<span class="text-secondary block"
-						>Scan to pay <a href="/{username}" class="text-black font-semibold">{username}</a></span
-					>
-
-					<div
-						bind:this={qr}
-						on:click={() => copy(text)}
-						class="border {showMobileTip
-							? 'border-gray-400'
-							: 'border-lightgrey'} px-5 md:px-0 w-[292px] h-[302px] md:w-[300px] md:h-[300px] rounded-3xl block md:flex justify-center items-center cursor-pointer mx-auto"
-					/>
-
-					<div class="px-5 space-y-3">
-						<div class="flex justify-between">
-							<span class="font-semibold text-sm">Invoice</span>
-							<span class="font-semibold text-sm"
-								>{invoiceAmountFiatFormatted}
-								<span class="text-secondary font-normal">{`(${amountFormatted} SATS)`}</span></span
-							>
-						</div>
-
-						<div class="flex justify-between">
-							<span class="font-semibold text-sm">Tip</span>
-							<span class="font-semibold text-sm"
-								>{tipAmountFormatted}
-								<span class="text-secondary font-normal">{`(${tipAmountSats} SATS)`}</span></span
-							>
-						</div>
-
-						<div class="flex flex-wrap justify-between">
-							<span class="font-bold mr-1">Total</span>
-							<span class="font-bold"
-								>{totalAmountFormatted}
-								<span class="text-secondary font-normal">{`(${totalAmountSats} SATS)`}</span></span
-							>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-{:else}
-	<div class="text-center mt-20 md:mt-0">
-		<Image image="success" style="w-full md:w-3/4 xl:w-1/2 mx-auto max-w-3xl" />
-		<h1 class="text-3xl md:text-4xl font-bold mb-6">Payment Successful!</h1>
-		<h2 class="text-2xl md:text-3xl font-semibold">
-			{totalAmountFormatted}
-			{$preferredCurrency}
-		</h2>
-		<h3 class="text-secondary md:text-lg mb-6 mt-1">({totalAmountSats} SATS)</h3>
-		<button class="bg-black text-white rounded-2xl w-20 py-3 font-bold" on:click={handleDoneClick}>
-			Done
-		</button>
-	</div>
-{/if}
-
-<style>
-	#slider {
-		-webkit-appearance: none;
-		width: 100%;
-		height: 6px;
-		border-radius: 5px;
-		background: #eaecef;
-		outline: none;
-	}
-
-	#slider:active {
-		background-color: black;
-	}
-
-	#slider::-webkit-slider-thumb {
-		-webkit-appearance: none;
-		appearance: none;
-		width: 25px;
-		height: 25px;
-		border-radius: 50%;
-		background: black;
-		cursor: pointer;
-	}
-
-	#slider::-moz-range-thumb {
-		width: 25px;
-		height: 25px;
-		border-radius: 50%;
-		background: black;
-		cursor: pointer;
-	}
-
-	input[type='number']::-webkit-inner-spin-button,
-	input[type='number']::-webkit-outer-spin-button {
-		-webkit-appearance: none;
-	}
-
-	input[type='number'] {
-		-moz-appearance: textfield;
-	}
-
-	.full-shadow {
-		box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.25);
-	}
-</style>
diff --git a/src/routes/invoice/[id]/+page.server.js b/src/routes/invoice/[id]/+page.server.js
new file mode 100644
index 00000000..78607545
--- /dev/null
+++ b/src/routes/invoice/[id]/+page.server.js
@@ -0,0 +1,14 @@
+import { get } from '$lib/utils';
+
+export async function load({ params }) {
+	let { id } = params;
+	let {
+		amount,
+		rate,
+		status,
+		text,
+		user: { username }
+	} = await get(`/invoice?uuid=${id}`);
+
+	return { amount, id, rate, username, status, text };
+}
diff --git a/src/routes/invoice/[id]/+page.svelte b/src/routes/invoice/[id]/+page.svelte
new file mode 100644
index 00000000..0252a6b1
--- /dev/null
+++ b/src/routes/invoice/[id]/+page.svelte
@@ -0,0 +1,351 @@
+<script>
+	throw new Error("@migration task: Add data prop (https://github.com/sveltejs/kit/discussions/5774#discussioncomment-3292707)");
+
+	import { get, post, reverseFormat } from '$lib/utils';
+	import { browser } from '$app/env';
+	import { invoices, user, preferredCurrency } from '$lib/store';
+	import { Icon, Image } from '$comp';
+	import { goto } from '$app/navigation';
+	import { onMount } from 'svelte';
+	import { copy } from '$lib/utils';
+
+	export let amount, id, rate, status, text, username;
+
+	$invoices[id] = { amount, id, rate, status, text, username };
+
+	$: amountFiat = parseFloat(((amount * rate) / 100000000).toFixed(2));
+
+	let tipPercent = 0;
+	let qr;
+
+	$: tipAmount = customTipAmount
+		? customTipAmount < 0
+			? (customTipAmount = 0)
+			: customTipAmount
+		: (amountFiat / 100) * tipPercent;
+
+	$: tipAmountFormatted = new Intl.NumberFormat('en-US', {
+		style: 'currency',
+		currency: 'USD'
+	}).format(tipAmount);
+
+	$: tipAmountSats = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(
+		tipAmount / (rate / 100000000)
+	);
+
+	$: totalAmountSats = new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(
+		amount + parseFloat(tipAmountSats.replace(/,/g, ''))
+	);
+
+	$: update(tipAmountSats);
+	let update = async (n) => {
+		let { id } = await post('/invoice', {
+			amount: amount + reverseFormat(n),
+			rate,
+			text,
+			username
+		});
+		({ text } = await get(`/invoice/${id}`));
+	};
+
+	$: totalAmountFormatted = new Intl.NumberFormat('en-US', {
+		style: 'currency',
+		currency: 'USD'
+	}).format(amountFiat + parseFloat(tipAmount));
+
+	const amountFormatted = new Intl.NumberFormat('en-US', {
+		maximumFractionDigits: 0
+	}).format(amount);
+
+	$: invoiceAmountFiatFormatted = new Intl.NumberFormat('en-US', {
+		style: 'currency',
+		currency: 'USD'
+	}).format(amountFiat);
+
+	let customTipAmount;
+
+	const tipAmounts = ['None', '10%', '15%', '20%'];
+
+	const handleTipButtonClick = (amount) => {
+		customTipAmount = '';
+		customInput.value = '';
+
+		if (amount === 'None') {
+			tipPercent = 0;
+		} else {
+			tipPercent = amount.slice(0, 2);
+		}
+	};
+
+	const handleCustomTipAmount = (e) => {
+		tipPercent = 0;
+		customTipAmount = e.target.value;
+	};
+
+	$: generate(text);
+	let generate = async (ready) => {
+		if (!ready) return;
+		let { default: QRCodeStyling } = await import('qr-code-styling');
+
+		const qrCode = new QRCodeStyling({
+			width: window.screen.width < 640 ? 250 : 300,
+			type: 'canvas',
+			data: text,
+			image: '/images/invoice.svg',
+			backgroundOptions: {
+				color: 'rgba(0, 0, 0, 0)'
+			},
+			dotsOptions: {
+				type: 'rounded'
+			},
+			imageOptions: {
+				hideBackgroundDots: false
+			}
+		});
+
+		qrCode.append(qr);
+	};
+
+	let showMobileTip = false;
+
+	const handleBackButton = () => {
+		if (showMobileTip) {
+			tipPercent = 0;
+			customInput.value = '';
+			customTipAmount = 0;
+			tipAmount = 0;
+			showMobileTip = false;
+		} else {
+			goto(`/${$user.username}/receive`);
+		}
+	};
+
+	let customInput;
+
+	const handleDoneClick = () => {
+		if ($user) {
+			goto(`/${$user.username}/receive`);
+		} else {
+			goto('/');
+		}
+	};
+</script>
+
+{#if $invoices[id]?.status !== 'paid'}
+	<div class:full-shadow={showMobileTip}>
+		<button
+			class="ml-5 md:ml-20 mt-5 md:mt-10"
+			class:invisible={!$user}
+			on:click={handleBackButton}
+		>
+			<Icon icon="arrow-left" style="w-10" />
+		</button>
+
+		<div class="flex justify-center items-center mb-20 md:mt-[20px] px-3">
+			<div
+				class="block lg:flex justify-center items-center space-y-10 lg:space-y-0 space-x-0 lg:space-x-24"
+			>
+				<!-- tipping section  -->
+				<div
+					class="w-[100%] md:w-auto absolute {showMobileTip
+						? 'bottom-0'
+						: '-top-full'} bg-white p-6 md:p-0 rounded-t-3xl md:rounded-none left-0 md:static text-center space-y-5"
+				>
+					<h1 class="hidden md:block text-4xl font-semibold">Add a tip?</h1>
+
+					<div>
+						<span class="font-semibold mr-1">{tipAmountFormatted}</span><span
+							class="text-secondary font-semibold text-sm">{`(${tipAmountSats} SATS)`}</span
+						>
+						<span class="block text-secondary text-sm">{tipPercent}%</span>
+					</div>
+
+					<input
+						id="slider"
+						type="range"
+						min="0"
+						max="100"
+						value={tipPercent}
+						class="px-2"
+						on:input={(e) => {
+							customTipAmount = '';
+							customInput.value = '';
+							tipPercent = e.target.value;
+						}}
+					/>
+
+					<div>
+						{#each tipAmounts as amount}
+							<button
+								class="bg-primary w-16 md:w-20 py-3 m-1 rounded-2xl font-semibold {customTipAmount
+									? ''
+									: tipPercent === amount.slice(0, 2) ||
+									  ((tipPercent === 0 || tipPercent === '0') && amount === 'None')
+									? '!bg-black text-white'
+									: ''}"
+								on:click={() => handleTipButtonClick(amount)}>{amount}</button
+							>
+						{/each}
+
+						<div class="relative">
+							<span
+								class="absolute top-[20px] left-5 font-semibold {!customTipAmount
+									? 'opacity-50'
+									: 'opacity-100'}">$</span
+							>
+							<input
+								bind:this={customInput}
+								type="number"
+								min="0"
+								on:input={(e) => handleCustomTipAmount(e)}
+								class="bg-primary rounded-2xl py-3 px-10 font-semibold mt-2 mr-1 w-full md:w-auto"
+								placeholder="Other"
+							/>
+							<button
+								class="w-full md:w-auto mt-2 md:mt-0 bg-black text-white font-semibold py-3 px-7 rounded-2xl {showMobileTip
+									? !customTipAmount && !tipAmount
+										? 'opacity-50'
+										: 'opacity-100'
+									: !customTipAmount
+									? 'opacity-50'
+									: 'opacity-100'}"
+								disabled={showMobileTip ? !customTipAmount && !tipAmount : !customTipAmount}
+								on:click={() => (showMobileTip = false)}>Done</button
+							>
+						</div>
+					</div>
+				</div>
+
+				<div
+					class="hidden md:block h-[1px] lg:h-[600px] w-full lg:w-[1px] bg-lightgrey rounded-xl"
+					id="section-divider"
+				/>
+
+				<!-- invoice section -->
+				<div class="w-[325px] text-center space-y-5">
+					<button
+						class="block md:hidden bg-black {showMobileTip
+							? 'text-white/50'
+							: 'text-white'} rounded-xl px-6 py-3 block text-sm font-semibold mx-auto flex justify-center items-center"
+						on:click={() => (showMobileTip = true)}
+						disabled={showMobileTip}
+					>
+						<svg
+							width="24"
+							height="24"
+							class="mr-1"
+							viewBox="0 0 24 24"
+							fill="none"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<path
+								d="M4.31802 6.31802C2.56066 8.07538 2.56066 10.9246 4.31802 12.682L12.0001 20.364L19.682 12.682C21.4393 10.9246 21.4393 8.07538 19.682 6.31802C17.9246 4.56066 15.0754 4.56066 13.318 6.31802L12.0001 7.63609L10.682 6.31802C8.92462 4.56066 6.07538 4.56066 4.31802 6.31802Z"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+							/>
+						</svg> Add a tip
+					</button>
+
+					<span class="text-secondary block"
+						>Scan to pay <a href="/{username}" class="text-black font-semibold">{username}</a></span
+					>
+
+					<div
+						bind:this={qr}
+						on:click={() => copy(text)}
+						class="border {showMobileTip
+							? 'border-gray-400'
+							: 'border-lightgrey'} px-5 md:px-0 w-[292px] h-[302px] md:w-[300px] md:h-[300px] rounded-3xl block md:flex justify-center items-center cursor-pointer mx-auto"
+					/>
+
+					<div class="px-5 space-y-3">
+						<div class="flex justify-between">
+							<span class="font-semibold text-sm">Invoice</span>
+							<span class="font-semibold text-sm"
+								>{invoiceAmountFiatFormatted}
+								<span class="text-secondary font-normal">{`(${amountFormatted} SATS)`}</span></span
+							>
+						</div>
+
+						<div class="flex justify-between">
+							<span class="font-semibold text-sm">Tip</span>
+							<span class="font-semibold text-sm"
+								>{tipAmountFormatted}
+								<span class="text-secondary font-normal">{`(${tipAmountSats} SATS)`}</span></span
+							>
+						</div>
+
+						<div class="flex flex-wrap justify-between">
+							<span class="font-bold mr-1">Total</span>
+							<span class="font-bold"
+								>{totalAmountFormatted}
+								<span class="text-secondary font-normal">{`(${totalAmountSats} SATS)`}</span></span
+							>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+{:else}
+	<div class="text-center mt-20 md:mt-0">
+		<Image image="success" style="w-full md:w-3/4 xl:w-1/2 mx-auto max-w-3xl" />
+		<h1 class="text-3xl md:text-4xl font-bold mb-6">Payment Successful!</h1>
+		<h2 class="text-2xl md:text-3xl font-semibold">
+			{totalAmountFormatted}
+			{$preferredCurrency}
+		</h2>
+		<h3 class="text-secondary md:text-lg mb-6 mt-1">({totalAmountSats} SATS)</h3>
+		<button class="bg-black text-white rounded-2xl w-20 py-3 font-bold" on:click={handleDoneClick}>
+			Done
+		</button>
+	</div>
+{/if}
+
+<style>
+	#slider {
+		-webkit-appearance: none;
+		width: 100%;
+		height: 6px;
+		border-radius: 5px;
+		background: #eaecef;
+		outline: none;
+	}
+
+	#slider:active {
+		background-color: black;
+	}
+
+	#slider::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		appearance: none;
+		width: 25px;
+		height: 25px;
+		border-radius: 50%;
+		background: black;
+		cursor: pointer;
+	}
+
+	#slider::-moz-range-thumb {
+		width: 25px;
+		height: 25px;
+		border-radius: 50%;
+		background: black;
+		cursor: pointer;
+	}
+
+	input[type='number']::-webkit-inner-spin-button,
+	input[type='number']::-webkit-outer-spin-button {
+		-webkit-appearance: none;
+	}
+
+	input[type='number'] {
+		-moz-appearance: textfield;
+	}
+
+	.full-shadow {
+		box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.25);
+	}
+</style>
diff --git a/src/routes/invoice/index.js b/src/routes/invoice/index.js
deleted file mode 100644
index cf26b3c6..00000000
--- a/src/routes/invoice/index.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { post } from '$lib/utils';
-
-let network = 'lightning';
-
-export async function POST({ request }) {
-	let { amount, rate, username, text } = await request.json();
-	if (!text) ({ text } = await post('/lightning/invoice', { amount }));
-	let { uuid: id } = await post('/invoice', {
-		invoice: { amount, currency: 'USD', network, rate, text },
-		user: { username }
-	});
-
-	return { body: { id } };
-}
diff --git a/src/routes/jobs.svelte b/src/routes/jobs.svelte
deleted file mode 100644
index d864cf88..00000000
--- a/src/routes/jobs.svelte
+++ /dev/null
@@ -1,32 +0,0 @@
-<script>
-	import { Icon } from '$comp';
-	import { goto } from '$app/navigation';
-</script>
-
-<a href="/">
-	<Icon icon="logo" style="mx-auto mt-10" />
-</a>
-<div class="w-11/12 md:w-3/4 lg:w-1/2 2xl:w-1/3 max-w-3xl mx-auto my-20 space-y-5">
-	<button on:click={() => goto('/')}>
-		<Icon icon="arrow-left" style="w-8" />
-	</button>
-	<h1 class="text-5xl font-medium">Jobs</h1>
-
-	<h2 class="text-2xl font-medium">Current Openings</h2>
-
-	<p class="text-justify text-xl text-secondary">
-		CoinOS is actively looking for developers to join our growing team (full-time or part-time,
-		remote working OK).
-		<br /><br />
-		Excited about working on open source bitcoin? Then take a look at our repositories on
-		<a
-			href="https://github.com/coinos"
-			target="_blank"
-			rel="noreferrer"
-			class="underline underline-offset-4">GitHub</a
-		>.
-		<br /><br />
-		If you think you can make an impact, we'd love to hear from you. Send us your resume to
-		<a href="mailto:contact@coinos.io" class="underline underline-offset-4">contact@coinos.io</a>.
-	</p>
-</div>
diff --git a/src/routes/jobs/+page.svelte b/src/routes/jobs/+page.svelte
new file mode 100644
index 00000000..d864cf88
--- /dev/null
+++ b/src/routes/jobs/+page.svelte
@@ -0,0 +1,32 @@
+<script>
+	import { Icon } from '$comp';
+	import { goto } from '$app/navigation';
+</script>
+
+<a href="/">
+	<Icon icon="logo" style="mx-auto mt-10" />
+</a>
+<div class="w-11/12 md:w-3/4 lg:w-1/2 2xl:w-1/3 max-w-3xl mx-auto my-20 space-y-5">
+	<button on:click={() => goto('/')}>
+		<Icon icon="arrow-left" style="w-8" />
+	</button>
+	<h1 class="text-5xl font-medium">Jobs</h1>
+
+	<h2 class="text-2xl font-medium">Current Openings</h2>
+
+	<p class="text-justify text-xl text-secondary">
+		CoinOS is actively looking for developers to join our growing team (full-time or part-time,
+		remote working OK).
+		<br /><br />
+		Excited about working on open source bitcoin? Then take a look at our repositories on
+		<a
+			href="https://github.com/coinos"
+			target="_blank"
+			rel="noreferrer"
+			class="underline underline-offset-4">GitHub</a
+		>.
+		<br /><br />
+		If you think you can make an impact, we'd love to hear from you. Send us your resume to
+		<a href="mailto:contact@coinos.io" class="underline underline-offset-4">contact@coinos.io</a>.
+	</p>
+</div>
diff --git a/src/routes/login.js b/src/routes/login.js
deleted file mode 100644
index db1fbb6c..00000000
--- a/src/routes/login.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { post } from '$lib/utils';
-import cookie from 'cookie';
-
-let maxAge = 30 * 24 * 60 * 60;
-
-export async function POST({ request }) {
-	let body = await post('/login', await request.json());
-
-	let expires = new Date();
-	expires.setSeconds(expires.getSeconds() + maxAge);
-
-	return {
-		body,
-		headers: {
-			'set-cookie': cookie.serialize('token', body.token, {
-				httpOnly: true,
-				maxAge,
-				sameSite: 'lax',
-				path: '/',
-				expires
-			})
-		}
-	};
-}
diff --git a/src/routes/login.svelte b/src/routes/login.svelte
deleted file mode 100644
index c61269c1..00000000
--- a/src/routes/login.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-	import { RegisterOrLogin } from '$comp';
-</script>
-
-<RegisterOrLogin page="Sign in" />
diff --git a/src/routes/login/+page.server.js b/src/routes/login/+page.server.js
new file mode 100644
index 00000000..7b70d944
--- /dev/null
+++ b/src/routes/login/+page.server.js
@@ -0,0 +1,25 @@
+import { post } from '$lib/utils';
+import cookie from 'cookie';
+
+let maxAge = 30 * 24 * 60 * 60;
+
+export async function POST({ request }) {
+	let body = await post('/login', await request.json());
+
+	let expires = new Date();
+	expires.setSeconds(expires.getSeconds() + maxAge);
+
+	throw new Error("@migration task: Migrate this return statement (https://github.com/sveltejs/kit/discussions/5774#discussioncomment-3292699)");
+	return {
+		body,
+		headers: {
+			'set-cookie': cookie.serialize('token', body.token, {
+				httpOnly: true,
+				maxAge,
+				sameSite: 'lax',
+				path: '/',
+				expires
+			})
+		}
+	};
+}
diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
new file mode 100644
index 00000000..c61269c1
--- /dev/null
+++ b/src/routes/login/+page.svelte
@@ -0,0 +1,5 @@
+<script>
+	import { RegisterOrLogin } from '$comp';
+</script>
+
+<RegisterOrLogin page="Sign in" />
diff --git a/src/routes/logout/+page.server.js b/src/routes/logout/+page.server.js
new file mode 100644
index 00000000..2b252aae
--- /dev/null
+++ b/src/routes/logout/+page.server.js
@@ -0,0 +1,27 @@
+import cookie from 'cookie';
+
+const opts = {
+	httpOnly: true,
+	sameSite: 'lax',
+	path: '/'
+};
+
+export async function load({ request: { headers } }) {
+	throw new Error("@migration task: Migrate this return statement (https://github.com/sveltejs/kit/discussions/5774#discussioncomment-3292699)");
+	return {
+		status: 302,
+		headers: {
+			location: '/logout/done',
+			'set-cookie': [
+				cookie.serialize('token', '', {
+					...opts,
+					expires: new Date(0)
+				}),
+				cookie.serialize('refresh_token', '', {
+					...opts,
+					expires: new Date(0)
+				})
+			]
+		}
+	};
+}
diff --git a/src/routes/logout/+page.svelte b/src/routes/logout/+page.svelte
new file mode 100644
index 00000000..2c6a7085
--- /dev/null
+++ b/src/routes/logout/+page.svelte
@@ -0,0 +1,10 @@
+<script>
+	import { onMount } from 'svelte';
+	import { browser } from '$app/env';
+	import { user, token } from '$lib/store';
+
+	onMount(() => {
+		$user = null;
+		$token = null;
+	});
+</script>
diff --git a/src/routes/logout/done.svelte b/src/routes/logout/done.svelte
deleted file mode 100644
index fe526357..00000000
--- a/src/routes/logout/done.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script>
-	import { onMount } from 'svelte';
-	import { user, token } from '$lib/store';
-	import { goto } from '$app/navigation';
-	import { close } from '$lib/socket';
-
-	onMount(() => {
-		$token = null;
-		$user = null;
-		close();
-	});
-	goto('/');
-</script>
diff --git a/src/routes/logout/done/+page.svelte b/src/routes/logout/done/+page.svelte
new file mode 100644
index 00000000..fe526357
--- /dev/null
+++ b/src/routes/logout/done/+page.svelte
@@ -0,0 +1,13 @@
+<script>
+	import { onMount } from 'svelte';
+	import { user, token } from '$lib/store';
+	import { goto } from '$app/navigation';
+	import { close } from '$lib/socket';
+
+	onMount(() => {
+		$token = null;
+		$user = null;
+		close();
+	});
+	goto('/');
+</script>
diff --git a/src/routes/logout/index.js b/src/routes/logout/index.js
deleted file mode 100644
index 6cbae8f2..00000000
--- a/src/routes/logout/index.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import cookie from 'cookie';
-
-const opts = {
-	httpOnly: true,
-	sameSite: 'lax',
-	path: '/'
-};
-
-export async function GET({ request: { headers } }) {
-	return {
-		status: 302,
-		headers: {
-			location: '/logout/done',
-			'set-cookie': [
-				cookie.serialize('token', '', {
-					...opts,
-					expires: new Date(0)
-				}),
-				cookie.serialize('refresh_token', '', {
-					...opts,
-					expires: new Date(0)
-				})
-			]
-		}
-	};
-}
diff --git a/src/routes/logout/index.svelte b/src/routes/logout/index.svelte
deleted file mode 100644
index 2c6a7085..00000000
--- a/src/routes/logout/index.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script>
-	import { onMount } from 'svelte';
-	import { browser } from '$app/env';
-	import { user, token } from '$lib/store';
-
-	onMount(() => {
-		$user = null;
-		$token = null;
-	});
-</script>
diff --git a/src/routes/register.js b/src/routes/register.js
deleted file mode 100644
index 1bb03ba6..00000000
--- a/src/routes/register.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { post } from '$lib/utils';
-
-export async function POST({ request }) {
-	try {
-		let user = await request.json();
-		let body = await post('/register', { user });
-		return { body };
-	} catch (e) {
-		return {
-			status: 500,
-			body: e
-		};
-	}
-}
diff --git a/src/routes/register.svelte b/src/routes/register.svelte
deleted file mode 100644
index 69ec5fd2..00000000
--- a/src/routes/register.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-	import { RegisterOrLogin } from '$comp';
-</script>
-
-<RegisterOrLogin page="Register" />
diff --git a/src/routes/register/+page.server.js b/src/routes/register/+page.server.js
new file mode 100644
index 00000000..51de25e2
--- /dev/null
+++ b/src/routes/register/+page.server.js
@@ -0,0 +1,16 @@
+import { post } from '$lib/utils';
+
+export async function POST({ request }) {
+	try {
+		let user = await request.json();
+		let body = await post('/register', { user });
+		throw new Error("@migration task: Migrate this return statement (https://github.com/sveltejs/kit/discussions/5774#discussioncomment-3292699)");
+		return { body };
+	} catch (e) {
+		throw new Error("@migration task: Migrate this return statement (https://github.com/sveltejs/kit/discussions/5774#discussioncomment-3292699)");
+		return {
+			status: 500,
+			body: e
+		};
+	}
+}
diff --git a/src/routes/register/+page.svelte b/src/routes/register/+page.svelte
new file mode 100644
index 00000000..69ec5fd2
--- /dev/null
+++ b/src/routes/register/+page.svelte
@@ -0,0 +1,5 @@
+<script>
+	import { RegisterOrLogin } from '$comp';
+</script>
+
+<RegisterOrLogin page="Register" />
diff --git a/src/routes/withdraw.js b/src/routes/withdraw.js
deleted file mode 100644
index 818d39da..00000000
--- a/src/routes/withdraw.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { post } from '$lib/utils';
-export async function POST({ locals, request }) {
-	let { token } = locals;
-	let body = await request.json();
-	body = await post('/lightning/send', body, {
-		authorization: `Bearer ${token}`
-	});
-	return { body };
-}
diff --git a/src/routes/withdraw/+server.js b/src/routes/withdraw/+server.js
new file mode 100644
index 00000000..3b22a592
--- /dev/null
+++ b/src/routes/withdraw/+server.js
@@ -0,0 +1,13 @@
+import { json as json$1 } from '@sveltejs/kit';
+import { post } from '$lib/utils';
+export async function POST({ locals, request }) {
+	let { token } = locals;
+	let body = await request.json();
+	body = await post('/lightning/send', body, {
+		authorization: `Bearer ${token}`
+	});
+	throw new Error("@migration task: Migrate this return statement (https://github.com/sveltejs/kit/discussions/5774#discussioncomment-3292701)");
+	// Suggestion (check for correctness before using):
+	// return json$1(body);
+	return { body };
+}
-- 
cgit v1.2.3