Merge branch 'master' into i18n

38 files changed, 1357 insertions, 213 deletions

diff --git a/src/components/404.svelte b/src/components/404.svelte
new file mode 100644
index 00000000..503316bb
--- /dev/null
+++ b/src/components/404.svelte
@@ -0,0 +1,16 @@
+<script>
+	import { Icon } from '$comp';
+</script>
+
+<div class="flex justify-center items-center mt-20">
+	<div class="space-y-5 text-center">
+		<a href="/">
+			<Icon icon="logo" />
+		</a>
+
+		<Icon icon="question" style="mx-auto w-full" />
+
+		<h1 class="font-bold text-5xl">404</h1>
+		<p>Page not found.</p>
+	</div>
+</div>
diff --git a/src/components/About.svelte b/src/components/About.svelte
new file mode 100644
index 00000000..3731bf9b
--- /dev/null
+++ b/src/components/About.svelte
@@ -0,0 +1,73 @@
+<script>
+	import { Image, Icon } from '$comp';
+
+	const aboutAdam = [
+		'Running Bitcoin since 2011',
+		'20+ years web development experience in government and industry',
+		'Early Bitcoin Vancouver meetup organizer',
+		'Founder of The Bitcoin Co-op and early supporter of Decentral Vancouver',
+		'Yogi, permaculturist, anarchist, decentralist',
+		'Husband, father, brother, son'
+	];
+</script>
+
+<h3 class="text-5xl font-medium mb-10 text-center">About</h3>
+<div
+	class="md:px-10 lg:px-0 block lg:flex justify-center text-secondary text-xl lg:space-x-20 mx-auto max-w-7xl relative"
+>
+	<p class="w-full lg:w-5/12">
+		<strong>CoinOS is</strong> an <strong>open source</strong> bitcoin web wallet, point of sale,
+		ecommerce marketplace and exchange platform. Development started in Vancouver in September 2012
+		as a way to provide local merchants with a convenient way to accept bitcoin payments.
+		<br /><br />
+		The feature set has grown over the years to accomodate a wide variety of use cases with the goal
+		of making it as easy as possible for anyone to get started using Bitcoin quickly, cheaply, and securely.
+		<br /><br />
+	</p>
+	<p class="w-full lg:w-5/12">
+		Anyone can download the source code and host their own instance of the platform backed by their
+		own bitcoin, liquid or lightning nodes, or reach out and we'll gladly set this up for you.
+		<br /><br />
+		Intra-account transfers between custodial wallets of different users on our server are completely
+		free, instant, and unlimited.
+	</p>
+	<Image image="swoosh" style="w-32 absolute -bottom-20 lg:bottom-0 right-0 md:right-10" />
+</div>
+
+<div class="px-5 block lg:flex justify-center lg:space-x-32 items-center mt-40 lg:mt-20">
+	<div class="space-y-5 mb-5 lg:mb-0">
+		<h3 class="text-5xl font-medium mb-10 text-center lg:text-right">The Founder</h3>
+
+		<Image image="adam" style="rounded-full mx-auto lg:mx-0 lg:ml-auto w-40" />
+
+		<div class="space-y-2">
+			<span class="text-2xl text-center font-semibold block lg:text-right">Adam Soltys</span>
+			<span class="text-xl text-center text-secondary block lg:text-right"
+				>Chief Technical Officer</span
+			>
+		</div>
+
+		<div class="flex justify-center lg:justify-end items-center space-x-5">
+			<a
+				href="https://twitter.com/adamsoltys"
+				target="_blank"
+				rel="noreferrer"
+				class="rounded-full p-2 bg-[#1D9BF0]"><Icon icon="twitter" style="w-6" /></a
+			>
+			<a
+				href="https://github.com/asoltys"
+				target="_blank"
+				rel="noreferrer"
+				class="rounded-full p-2 bg-gray-800"><Icon icon="github" style="w-6" /></a
+			>
+		</div>
+	</div>
+
+	<ul
+		class="w-full mx-auto md:w-[700px] lg:w-[500px] xl:w-auto text-secondary px-1 md:px-10 text-xl list-disc space-y-5"
+	>
+		{#each aboutAdam as about}
+			<li>{about}</li>
+		{/each}
+	</ul>
+</div>
diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index 249e2826..242e6924 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -1,32 +1,88 @@
 <script>
 	// we will want to dynamically use the users avatar on this screen if they have uploaded one
 
+	import { user } from '$lib/store';
 	import { goto } from '$app/navigation';
 	import { Icon, LocaleSelector } from '$comp';
 
-  import { locale, locales } from 'svelte-i18n';
+	export let avatarPosition = 'left-[calc(50vw-48px)]';
+
+	const menuButtons = [
+		{ title: 'Customers', icon: 'customers', goto: 'customers' },
+		{ title: 'Dashboard', icon: 'dash', goto: 'dashboard' },
+		{ title: 'Settings', icon: 'settings', goto: 'settings' },
+		{ title: 'Support', icon: 'support', goto: 'support' },
+		{ title: 'Sign out', icon: 'logout', goto: 'logout' }
+	];
+
+	let showMenu = false;
+
+	const handleMenuItemClick = (item) => {
+		if (item === 'logout') {
+			goto('/logout');
+		} else {
+			goto(`/${$user.username + '/' + item}`);
+		}
+	};
 </script>
 
-<header class="bg-gradient-to-r from-primary to-gradient h-[20vh] w-full relative">
+<header class="bg-gradient-to-r from-primary to-gradient h-[175px] w-full relative">
 	<nav class="flex justify-end items-center space-x-4 p-5">
     <LocaleSelector />
-
-		<button class="bg-white p-2 rounded-full w-12 h-12" on:click={() => goto('/receive')}
-			><Icon icon="numpad" style="mx-auto" /></button
-		>
-		<button class="bg-white p-2 rounded-full  w-12 h-12"
-			><Icon icon="clock" style="mx-auto" /></button
-		>
-		<button class="bg-white p-2 rounded-full  w-12 h-12"
-			><Icon icon="menu" style="mx-auto" /></button
-		>
-		<button class="bg-white p-2 rounded-full  w-12 h-12"
-			><Icon icon="profile" style="mx-auto" /></button
-		>
+		{#if $user}
+			<a href={`/${$user.username}/receive`}>
+				<button class="bg-white p-2 rounded-full w-12 h-12"
+					><Icon icon="numpad" style="mx-auto" />
+				</button>
+			</a>
+			<a href={`/${$user.username}/transactions`}>
+				<button class="bg-white p-2 rounded-full  w-12 h-12"
+					><Icon icon="clock" style="mx-auto" />
+				</button>
+			</a>
+			<a href={`/${$user.username}`}>
+				<button class="bg-white p-2 rounded-full  w-12 h-12"
+					><Icon icon="profile" style="mx-auto" />
+				</button>
+			</a>
+			<div class="relative">
+				<button class="bg-white p-2 rounded-full  w-12 h-12" on:click={() => (showMenu = !showMenu)}
+					><Icon icon="menu" style="mx-auto" />
+				</button>
+				<div
+					class="{showMenu
+						? 'block'
+						: 'hidden'} absolute top-14 right-0 bg-white rounded-3xl p-8 shadow-xl z"
+				>
+					<ul class="space-y-5 w-32">
+						{#each menuButtons as button}
+							<li>
+								<button
+									class="flex justify-center items-center font-semibold text-sm"
+									on:click={() => handleMenuItemClick(button.goto)}
+									><Icon icon={button.icon} style="mr-1" /> {button.title}
+								</button>
+							</li>
+						{/each}
+					</ul>
+				</div>
+			</div>
+		{:else}
+			<a href="/login">
+				<button class="bg-white px-5 py-2 rounded-xl font-semibold text-sm">Sign in </button>
+			</a>
+		{/if}
+>>>>>>> master
 	</nav>
 	<div
-		class="absolute top-[calc(20vh-48px)] left-[calc(50vw-48px)] rounded-full border-4 border-white p-4 bg-gradient-to-r from-primary to-gradient w-24 h-24"
+		class="absolute top-[calc(175px-48px)] {avatarPosition} rounded-full border-4 border-white p-4 bg-gradient-to-r from-primary to-gradient w-24 h-24"
 	>
 		<Icon icon="logo-symbol-white" style="mx-auto" />
 	</div>
 </header>
+
+<style>
+	.z {
+		z-index: 100;
+	}
+</style>
diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
new file mode 100644
index 00000000..0c682179
--- /dev/null
+++ b/src/components/Footer.svelte
@@ -0,0 +1,39 @@
+<script>
+	import { Icon } from '$comp';
+
+	const followLinks = [
+		{ url: 'https://twitter.com/coinoswallet', title: 'Twitter' },
+		{ url: 'https://github.com/coinos', title: 'GitHub' },
+		{ url: 'https://t.me/coinos', title: 'Telegram' }
+	];
+
+	const companyLinks = [
+		{ url: 'mailto:[email protected]', title: 'Support' },
+		{ url: '/community', title: 'Community' },
+		{ url: '/jobs', title: 'Jobs' }
+	];
+</script>
+
+<footer class="space-y-10 md:space-y-0 text-xl block md:flex justify-around items-center mb-20">
+	<Icon icon="logo" style="w-48 mx-auto md:mx-0" />
+
+	<div class="text-center md:text-left">
+		<p class="font-semibold">Follow Us</p>
+		<ul class="mt-5 text-secondary space-y-3 font-medium">
+			{#each followLinks as link}
+				<li><a href={link.url} target="_blank" rel="noreferrer">{link.title}</a></li>
+			{/each}
+		</ul>
+	</div>
+
+	<div class="text-center md:text-left">
+		<p class="font-semibold">Company</p>
+		<ul class="mt-5 text-secondary space-y-3">
+			{#each companyLinks as link}
+				<li><a href={link.url}>{link.title}</a></li>
+			{/each}
+		</ul>
+	</div>
+
+	<Icon icon="shield" style="mx-auto md:mx-0" />
+</footer>
diff --git a/src/components/LandingHeader.svelte b/src/components/LandingHeader.svelte
index ca9d431e..352b200c 100644
--- a/src/components/LandingHeader.svelte
+++ b/src/components/LandingHeader.svelte
@@ -2,34 +2,112 @@
 	import { goto } from '$app/navigation';
 	import { scroll } from '$lib/utils';
 	import { Icon, LocaleSelector } from '$comp';
-
-  import { _, locale, locales } from 'svelte-i18n';
+	import { user } from '$lib/store';
+  import { _ } from 'svelte-i18n';
 
 	export let howItWorks;
 	export let faq;
+	export let about;
+
+	let showMobileMenu = false;
+	const mobileMenuButtonClick = (section) => {
+		showMobileMenu = false;
+		scroll(section);
+	};
 </script>
 
-<header class="w-full lg:w-5/6 pt-10 mx-auto">
+<header
+	class="w-full lg:w-5/6 py-5 xl:pb-0 xl:pt-10 mx-auto fixed md:sticky z-10 top-0 bg-white/90"
+>
 	<nav class="block xl:flex flex-wrap justify-between items-center">
-		<a href="/">
+		<a href="/" class="hidden md:block">
 			<Icon icon="logo" style="mx-auto mb-5 xl:mb-0" />
 		</a>
+		<Icon icon="logo" style="block md:hidden ml-5 w-48" />
 
     <LocaleSelector />
 
+		<!-- desktop nav -->
 		<div class="hidden space-x-10 md:flex flex-wrap justify-center items-center font-bold">
 			<button on:click={() => scroll(howItWorks)}>{$_('howItWorks')}</button>
 			<button on:click={() => scroll(faq)}>{$_('FAQ')}</button>
-			<button>{$_('about')}</button>
-			<button class="border rounded-full px-6 py-2 font-bold" on:click={() => goto('/register')}
-				>{$_('startInSeconds')}</button
-			>
-			<button
-				class="bg-black text-white border rounded-full px-6 py-2 font-bold"
-				on:click={() => goto('/login')}
-			>
-        {$_('signIn')}
-			</button>
+			<button on:click={() => scroll(about)}>{$_('about')}</button>
+			{#if !$user}
+				<button class="border rounded-full px-6 py-2 font-bold" on:click={() => goto('/register')}
+					>{$_('startInSeconds')}
+				</button>
+				<button
+					class="bg-black text-white border rounded-full px-6 py-2 font-bold"
+					on:click={() => goto('/login')}
+				>
+					{$_('signIn')}
+				</button>
+			{:else}
+				<button
+					class="border rounded-full px-6 py-2 font-bold"
+					on:click={() => goto(`/${$user.username}/dashboard`)}
+					>Account
+				</button>
+				<button
+					class="bg-black text-white border rounded-full px-6 py-2 font-bold"
+					on:click={() => goto('/logout')}
+				>
+					Sign out
+				</button>
+			{/if}
+		</div>
+
+		<!-- mobile nav -->
+		<button
+			class="block md:hidden absolute top-[34.5px] right-10 z"
+			on:click={() => (showMobileMenu = !showMobileMenu)}
+			><Icon icon={!showMobileMenu ? 'menu' : 'close'} />
+		</button>
+
+		<div
+			class="block md:hidden absolute top-0 {showMobileMenu
+				? 'right-0'
+				: 'right-[-100%]'} transition-all ease-in-out duration-300 h-[100vh] w-full bg-white"
+		>
+			<div class="space-y-8 mt-24 ml-10 font-bold text-xl">
+				<button on:click={() => mobileMenuButtonClick(howItWorks)} class="block"
+					>{$_('howItWorks')}</button
+				>
+				<button on:click={() => mobileMenuButtonClick(faq)} class="block">{$_('FAQ')}</button>
+				<button on:click={() => mobileMenuButtonClick(about)} class="block">{$_('about')}</button>
+				{#if !$user}
+					<button
+						class="border rounded-full px-6 py-2 font-bold block"
+						on:click={() => goto('/register')}
+						>{$_('startInSeconds')}
+					</button>
+					<button
+						class="bg-black text-white border rounded-full px-6 py-2 font-bold block"
+						on:click={() => goto('/login')}
+					>
+            {$_('startInSeconds')}
+					</button>
+				{:else}
+					<button
+						class="border rounded-full px-6 py-2 font-bold block"
+						on:click={() => goto(`/${$user.username}/dashboard`)}
+						>Account
+					</button>
+					<button
+						class="bg-black text-white border rounded-full px-6 py-2 font-bold block"
+						on:click={() => goto('/logout')}
+					>
+						Sign out
+					</button>
+				{/if}
+			</div>
+>>>>>>> master
 		</div>
 	</nav>
 </header>
+
+<style>
+	.z {
+		z-index: 100;
+	}
+</style>
diff --git a/src/components/LandingHero.svelte b/src/components/LandingHero.svelte
index 2c2e1ab5..93bea8c2 100644
--- a/src/components/LandingHero.svelte
+++ b/src/components/LandingHero.svelte
@@ -1,9 +1,10 @@
 <script>
 	import { goto } from '$app/navigation';
 	import { Icon, Image } from '$comp';
+	import { user } from '$lib/store';
 </script>
 
-<div>
+<div class="mt-[96.88px] md:mt-0">
 	<div class="space-y-10">
 		<h1
 			class="text-5xl md:text-6xl lg:text-7xl 2xl:text-8xl font-medium text-center w-full md:w-3/4 lg:w-1/2 max-w-7xl mx-auto leading-tight"
@@ -19,14 +20,16 @@
 			Grow your customer base and revenue by accepting Bitcoin with an easy-to-use and managed Point
 			of Sale. No software or hardware required.
 		</h2>
-		<div class="flex justify-center">
-			<button
-				class="bg-black text-white border rounded-full px-6 py-2 font-bold"
-				on:click={() => goto('/register')}
-			>
-				Start in Seconds
-			</button>
-		</div>
+		{#if !$user}
+			<div class="flex justify-center">
+				<button
+					class="bg-black text-white border rounded-full px-6 py-2 font-bold"
+					on:click={() => goto('/register')}
+				>
+					Start in Seconds
+				</button>
+			</div>
+		{/if}
 	</div>
 
 	<!-- hero image -->
diff --git a/src/components/LoadingSplash.svelte b/src/components/LoadingSplash.svelte
new file mode 100644
index 00000000..2ab4c739
--- /dev/null
+++ b/src/components/LoadingSplash.svelte
@@ -0,0 +1,7 @@
+<script>
+	import { Icon } from '$comp';
+</script>
+
+<div class="flex justify-center items-center">
+	<Icon icon="logo" style="mt-[calc(50vh-72px)]" />
+</div>
diff --git a/src/components/RegisterOrLogin.svelte b/src/components/RegisterOrLogin.svelte
index 7cc41709..157c2821 100644
--- a/src/components/RegisterOrLogin.svelte
+++ b/src/components/RegisterOrLogin.svelte
@@ -1,13 +1,15 @@
 <script>
+	import { toast } from '@zerodevx/svelte-toast';
 	import { Icon } from '$comp';
 	import { post } from '$lib/utils';
-	import { token } from '$lib/store';
-	import { connect } from '$lib/socket';
+	import { user, token } from '$lib/store';
+	import { auth } from '$lib/socket';
 	import { goto } from '$app/navigation';
 
 	export let page;
 
-	let username, password;
+	let username = 'bob',
+		password = 'pw';
 
 	let revealPassword = false;
 
@@ -16,20 +18,27 @@
 		'Sign in': '/login'
 	}[page];
 
-	let submit = () =>
-		post(url, { username, password }).then((r) =>
-			r.json().then((r) => {
-				$token = r.token;
-				connect();
-				goto('/receive');
-			})
-		);
+	let submit = async () => {
+		try {
+			let r = await post(url, { username, password });
+			if (!r.token) r = await post('/login', { username, password });
+			$token = r.token;
+			auth();
+		} catch (e) {
+			if (!e.message) e.message = 'Login failed';
+			toast.push(e.message);
+		}
+	};
+
+	$: if ($user) goto(`/${username}/receive`);
 </script>
 
 <div class="pt-10">
-	<a href="/">
-		<Icon icon="logo" style="mx-auto mb-10" />
-	</a>
+	<div class="w-[243px] mx-auto mb-10">
+		<a href="/">
+			<Icon icon="logo" />
+		</a>
+	</div>
 
 	<div class="flex justify-center items-center">
 		<div class="shadow-xl rounded-3xl p-10 pb-12 space-y-5 w-full mx-5 md:mx-0 md:w-[400px]">
@@ -38,11 +47,13 @@
 			<form class="space-y-5" on:submit|preventDefault={submit}>
 				<div>
 					<label for="username" class="font-semibold">Username</label>
+					<!-- svelte-ignore a11y-autofocus -->
 					<input
 						type="text"
 						required
 						class="bg-primary p-4 rounded-2xl w-full"
 						bind:value={username}
+						autofocus
 					/>
 				</div>
 
@@ -78,7 +89,9 @@
 					</p>
 				{:else}
 					<div class="flex justify-end items-center">
-						<a href="" class="underline underline-offset-4 text-black text-sm">Forgot Password?</a>
+						<a href="/forgot" class="underline underline-offset-4 text-black text-sm"
+							>Forgot Password?</a
+						>
 					</div>
 				{/if}
 
diff --git a/src/components/index.js b/src/components/index.js
index f0e86183..1d5b369d 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -8,3 +8,7 @@ export { default as Image } from './Image.svelte';
 export { default as RegisterOrLogin } from './RegisterOrLogin.svelte';
 export { default as AppHeader } from './AppHeader.svelte';
 export { default as LocaleSelector } from './LocaleSelector.svelte';
+export { default as LoadingSplash } from './LoadingSplash.svelte';
+export { default as PageNotFound } from './404.svelte';
+export { default as About } from './About.svelte';
+export { default as Footer } from './Footer.svelte';
diff --git a/src/hooks/index.js b/src/hooks/index.js
new file mode 100644
index 00000000..2284d88d
--- /dev/null
+++ b/src/hooks/index.js
@@ -0,0 +1,25 @@
+import cookie from 'cookie';
+import { get } from '$lib/utils';
+import { protectedRoutes } from '$lib/utils';
+
+export async function handle({ event, resolve }) {
+	let {
+		params,
+		request: { headers }
+	} = event;
+
+	const cookies = cookie.parse(headers.get('cookie') || '');
+	let { token } = cookies;
+	event.locals = { token };
+
+	if (protectedRoutes.find((p) => event.url.pathname.match(p))) {
+		let user = await get('/me', { accept: 'application/json', authorization: `Bearer ${token}` });
+		if (user.username !== params.username) throw new Error('user not found');
+	}
+
+	return resolve(event);
+}
+
+export const getSession = ({ locals: { token } }) => {
+	return { token };
+};
diff --git a/src/lib/socket.js b/src/lib/socket.js
index efc2651b..66091d76 100644
--- a/src/lib/socket.js
+++ b/src/lib/socket.js
@@ -1,23 +1,31 @@
-import { get } from "svelte/store";
-import { rate, user, token, ws } from '$lib/store';
+import { get } from 'svelte/store';
+import { rate, user, token, invoices, preferredCurrency } from '$lib/store';
 
 let interval, socket;
 
+export const auth = () => {
+	let t = get(token);
+	if (t) send('login', t);
+};
+
+export const send = (type, data) => {
+	socket?.readyState === 1 && socket.send(JSON.stringify({ type, data }));
+};
+
 export const messages = (data) => ({
 	rate() {
 		rate.set(data);
 	},
 
 	payment() {
-		console.log(data);
+		invoices.set({ ...get(invoices), [data.invoice.uuid]: data.invoice });
 	},
 
-	connected() {
-		socket.send(JSON.stringify({ type: 'login', data: { token: get(token) } }));
-	},
+	connected: auth,
 
 	login() {
 		user.set(data);
+		preferredCurrency.set(data.currency);
 	}
 });
 
@@ -29,18 +37,18 @@ let currentReconnectDelay = initialReconnectDelay;
 export function connect() {
 	clearInterval(interval);
 
-  if (socket) socket.close();
+	if (socket) return auth();
+
 	socket = new WebSocket('ws://localhost:3119/ws');
 	socket.addEventListener('open', onWebsocketOpen);
 	socket.addEventListener('close', onWebsocketClose);
 	socket.addEventListener('message', onWebsocketMessage);
 
-	interval = setInterval(
-		() => socket.readyState === 1 && socket.send(JSON.stringify({ type: 'heartbeat' })),
-		5000
-	);
+	interval = setInterval(() => send('heartbeat'), 5000);
+}
 
-	ws.set(socket);
+export function close() {
+	if (socket) socket.close();
 }
 
 function onWebsocketMessage(msg) {
@@ -53,7 +61,7 @@ function onWebsocketOpen() {
 }
 
 function onWebsocketClose() {
-	ws.set(null);
+	socket = null;
 	setTimeout(() => {
 		reconnectToWebsocket();
 	}, currentReconnectDelay + Math.floor(Math.random() * 3000));
diff --git a/src/lib/store.js b/src/lib/store.js
index 3963f55a..b20fd10f 100644
--- a/src/lib/store.js
+++ b/src/lib/store.js
@@ -1,6 +1,22 @@
-import { writable } from 'svelte/store';
+import { get, writable } from 'svelte/store';
+import { browser } from '$app/env';
+
+const persisted = (k, i) => {
+	let s = writable(
+		browser && sessionStorage.getItem(k) && sessionStorage.getItem(k) !== 'undefined'
+			? JSON.parse(sessionStorage.getItem(k))
+			: i
+	);
+
+	s.subscribe((v) => browser && sessionStorage.setItem(k, JSON.stringify(v)));
+
+	return s;
+};
 
 export const rate = writable();
 export const user = writable();
-export const token = writable();
-export const ws = writable();
+export const invoiceAmount = writable();
+export const invoiceAmountFiat = writable();
+export const token = persisted('token');
+export const invoices = writable({});
+export const preferredCurrency = writable();
diff --git a/src/lib/utils.js b/src/lib/utils.js
index 595d2dd8..669b2b5e 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -1,10 +1,53 @@
+import { browser } from '$app/env';
+
 export function scroll(section) {
 	section.scrollIntoView({ behavior: 'smooth' });
 }
 
+const base = browser ? '' : import.meta.env.VITE_COINOS_URL;
+
+export const get = (url, headers = { accept: 'application/json' }) =>
+	fetch(base + url, { headers })
+		.then((r) => r.text())
+		.then((body) => {
+			try {
+				return JSON.parse(body);
+			} catch (e) {
+				throw new Error(body);
+			}
+		});
+
 export const post = (url, body) =>
-	fetch(url, {
+	fetch(base + url, {
 		method: 'POST',
 		body: JSON.stringify(body),
-		headers: { 'accept': 'application/json', 'content-type': 'application/json' }
-	});
+		headers: { accept: 'application/json', 'content-type': 'application/json' }
+	})
+		.then((r) => r.text())
+		.then((body) => {
+			try {
+				body = JSON.parse(body);
+			} catch (e) {
+				throw new Error(body);
+			}
+
+			if (body instanceof Error) throw body;
+			if (body.name === 'Error') throw new Error(body.message);
+
+			return body;
+		});
+
+export const copy = (text) => {
+	navigator.clipboard.writeText(text);
+};
+
+export function reverseFormat(val, locale) {
+	let parts = new Intl.NumberFormat(locale).formatToParts(1111.1);
+	let group = parts.find((part) => part.type === 'group').value;
+	let decimal = parts.find((part) => part.type === 'decimal').value;
+	let reversedVal = val.replace(new RegExp('\\' + group, 'g'), '');
+	reversedVal = reversedVal.replace(new RegExp('\\' + decimal, 'g'), '.');
+	return Number.isNaN(reversedVal) ? 0 : +reversedVal;
+}
+
+export let protectedRoutes = [/receive/, /customers/, /dashboard/, /settings/, /transactions/];
diff --git a/src/routes/[username]/customers.svelte b/src/routes/[username]/customers.svelte
new file mode 100644
index 00000000..1935b156
--- /dev/null
+++ b/src/routes/[username]/customers.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
new file mode 100644
index 00000000..1935b156
--- /dev/null
+++ b/src/routes/[username]/dashboard.svelte
@@ -0,0 +1,5 @@
+<script>
+	import { AppHeader } from '$comp';
+</script>
+
+<AppHeader />
diff --git a/src/routes/[username]/index.js b/src/routes/[username]/index.js
new file mode 100644
index 00000000..5de1316f
--- /dev/null
+++ b/src/routes/[username]/index.js
@@ -0,0 +1,14 @@
+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
new file mode 100644
index 00000000..6002efdc
--- /dev/null
+++ b/src/routes/[username]/index.svelte
@@ -0,0 +1,95 @@
+<script>
+	import { toast } from '@zerodevx/svelte-toast';
+	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: 'svg',
+				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;
+
+	let qrSkeleton = true;
+	setTimeout(() => (qrSkeleton = false), 100);
+
+	const handleCopy = () => {
+		copy(lightningAddress);
+		toast.push('Copied!', {
+			theme: {
+				'--toastBarBackground': '#2F855A'
+			}
+		});
+	};
+</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>
+
+				<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="border border-lightgrey rounded-3xl flex md:p-5 justify-center items-center relative"
+				>
+					<div
+						class="z-100 h-[300px] md:h-[342px] w-[250px] md:w-[342px] animate-pulse absolute top-0 left-0 bg-gray-400 rounded-3xl {qrSkeleton
+							? 'block'
+							: 'hidden'}"
+					/>
+				</div>
+
+				<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={handleCopy}>
+						<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
new file mode 100644
index 00000000..50fddbed
--- /dev/null
+++ b/src/routes/[username]/receive.svelte
@@ -0,0 +1,187 @@
+<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 } from '$lib/utils';
+	import { page } from '$app/stores';
+
+	let useFiat = true;
+	let amountFiat = 0;
+	let amountSats = 0;
+	let message = '';
+
+	$: 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 (message) {
+			message = '';
+		}
+		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) {
+				message = '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) {
+				message = '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>
+
+				<!-- error message -->
+				{#if message}
+					<div
+						class="text-orange-500 text-sm text-center font-bold bg-primary p-2 rounded-xl flex justify-center items-center space-x-1"
+					>
+						<Icon icon="info" style="w-5" />
+						<p>{message}</p>
+					</div>
+				{/if}
+
+				<!-- 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
new file mode 100644
index 00000000..1935b156
--- /dev/null
+++ b/src/routes/[username]/settings.svelte
@@ -0,0 +1,5 @@
+<script>
+	import { AppHeader } from '$comp';
+</script>
+
+<AppHeader />
diff --git a/src/routes/[username]/transactions.svelte b/src/routes/[username]/transactions.svelte
new file mode 100644
index 00000000..1935b156
--- /dev/null
+++ b/src/routes/[username]/transactions.svelte
@@ -0,0 +1,5 @@
+<script>
+	import { AppHeader } from '$comp';
+</script>
+
+<AppHeader />
diff --git a/src/routes/__error.svelte b/src/routes/__error.svelte
new file mode 100644
index 00000000..2d617f9d
--- /dev/null
+++ b/src/routes/__error.svelte
@@ -0,0 +1,38 @@
+<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" />
+			</a>
+
+			<Icon icon="error" style="mx-auto w-full" />
+
+			<h1 class="font-bold text-5xl">Error</h1>
+			<p>{error.message}</p>
+			<p>Please try again or contact support.</p>
+		</div>
+	</div>
+{/if}
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index ed1ad188..9ec36c57 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -1,11 +1,47 @@
 <script>
+	import { SvelteToast } from '@zerodevx/svelte-toast';
+	import { toast } from '@zerodevx/svelte-toast';
 	import '../app.css';
+  import '$lib/i18n';
 	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 { protectedRoutes } from '$lib/utils';
 
-  import '$lib/i18n';
+	browser && ($token ||= $session.token);
+	let ready = false;
 
-	onMount(connect);
+	onMount(() => {
+		if (protectedRoutes.find((p) => $page.url.pathname.match(p))) {
+			if (!$token) {
+				goto('/login');
+				toast.push('Please sign in to continue.');
+			}
+			user.subscribe((u) => u?.username && (ready = true));
+		} else {
+			ready = true;
+		}
+
+		connect();
+	});
 </script>
 
-<slot />
+{#if ready}
+	<SvelteToast options={{ reversed: true, intro: { y: 192 } }} />
+	<slot />
+{:else}
+	<LoadingSplash />
+{/if}
+
+<style>
+	:root {
+		--toastContainerTop: auto;
+		--toastContainerRight: auto;
+		--toastContainerBottom: 8rem;
+		--toastContainerLeft: calc(50vw - 8rem);
+	}
+</style>
diff --git a/src/routes/community.svelte b/src/routes/community.svelte
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/src/routes/community.svelte
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index cda885a3..faa881bb 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,5 +1,14 @@
 <script>
-	import { LandingHeader, LandingHero, LandingInfoCard, HowItWorksCard, FaqCard } from '$comp';
+	import {
+		LandingHeader,
+		LandingHero,
+		LandingInfoCard,
+		HowItWorksCard,
+		FaqCard,
+		Image,
+		About,
+		Footer
+	} from '$comp';
 
 	let howItWorks;
 	let faq;
@@ -42,9 +51,9 @@
 	];
 </script>
 
-<LandingHeader {howItWorks} {faq} />
+<LandingHeader {howItWorks} {faq} {about} />
 
-<main class="space-y-40 py-20 md:py-32 lg:py-40 px-5 md:px-0">
+<main class="space-y-40 py-20 md:py-32 lg:py-36 xl:py-40 px-5 md:px-0">
 	<!-- hero -->
 	<LandingHero />
 
@@ -73,15 +82,18 @@
 	</LandingInfoCard>
 
 	<!-- landing info 3 -->
-	<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>
+		<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 bind:this={howItWorks}>
-		<h3 class="text-5xl font-medium mb-20 text-center">How it works</h3>
+	<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"
 		>
@@ -89,13 +101,24 @@
 				<HowItWorksCard image={step.image} step={step.step} description={step.description} />
 			{/each}
 		</div>
+		<div bind:this={faq} />
 	</div>
 
 	<!-- faq -->
-	<div class="space-y-10" bind:this={faq}>
-		<h3 class="text-5xl font-medium text-center">FAQ</h3>
-		{#each faqQuestions as question}
-			<FaqCard question={question.question} answer={question.answer} />
-		{/each}
+	<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.js b/src/routes/invoice.js
deleted file mode 100644
index 49bcfe70..00000000
--- a/src/routes/invoice.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import got from 'got';
-
-const username = 'bob',
-	network = 'lightning';
-
-export async function GET({ params }) {
-	let text = await got
-		.post('http://localhost:3119/lightning/invoice', {
-			json: { amount: 100 }
-		})
-		.text();
-
-	await got
-		.post('http://localhost:3119/invoice', {
-			json: { invoice: { text, network }, user: { username } }
-		})
-		.json();
-
-	return { body: { text } };
-}
diff --git a/src/routes/invoice.svelte b/src/routes/invoice.svelte
deleted file mode 100644
index b8f9e54b..00000000
--- a/src/routes/invoice.svelte
+++ /dev/null
@@ -1,18 +0,0 @@
-<script>
-	import { rate, user } from '$lib/store';
-	import { onMount } from 'svelte';
-
-	export let text;
-</script>
-
-QR code
-
-{text}
-
-{$rate}
-
-{$user?.username}
-
-{#each $user.payments as p}
-	{p.amount}<br />
-{/each}
diff --git a/src/routes/invoice/[id].js b/src/routes/invoice/[id].js
new file mode 100644
index 00000000..a58d02a1
--- /dev/null
+++ b/src/routes/invoice/[id].js
@@ -0,0 +1,14 @@
+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
new file mode 100644
index 00000000..17c7de1f
--- /dev/null
+++ b/src/routes/invoice/[id].svelte
@@ -0,0 +1,357 @@
+<script>
+	import { toast } from '@zerodevx/svelte-toast';
+	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) => {
+		console.log('GENERATE', text);
+		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 handleCopy = () => {
+		copy(text);
+		toast.push('Copied!', {
+			theme: {
+				'--toastBarBackground': '#2F855A'
+			}
+		});
+	};
+
+	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'
+						: '-bottom-full'} bg-white p-6 md:p-0 rounded-t-3xl md:rounded-none transition-all md:transition-none ease-in-out duration-500 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="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 <span class="text-black font-semibold">{username}</span></span
+					>
+
+					<div
+						bind:this={qr}
+						on:click={handleCopy}
+						class="border {showMobileTip
+							? 'border-gray-400'
+							: 'border-lightgrey'} rounded-3xl block md:flex justify-center items-center cursor-pointer"
+					/>
+
+					<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 justify-between">
+							<span class="font-bold">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
new file mode 100644
index 00000000..cf26b3c6
--- /dev/null
+++ b/src/routes/invoice/index.js
@@ -0,0 +1,14 @@
+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
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/src/routes/jobs.svelte
diff --git a/src/routes/login.js b/src/routes/login.js
index e8c74365..db1fbb6c 100644
--- a/src/routes/login.js
+++ b/src/routes/login.js
@@ -1,13 +1,24 @@
-import got from 'got';
+import { post } from '$lib/utils';
+import cookie from 'cookie';
+
+let maxAge = 30 * 24 * 60 * 60;
 
 export async function POST({ request }) {
-  let json = await request.json();
+	let body = await post('/login', await request.json());
 
-  let body = await got
-		.post('http://localhost:3119/login', {
-			json
-		})
-		.json();
+	let expires = new Date();
+	expires.setSeconds(expires.getSeconds() + maxAge);
 
-	return { body };
+	return {
+		body,
+		headers: {
+			'set-cookie': cookie.serialize('token', body.token, {
+				httpOnly: true,
+				maxAge,
+				sameSite: 'lax',
+				path: '/',
+				expires
+			})
+		}
+	};
 }
diff --git a/src/routes/logout/done.svelte b/src/routes/logout/done.svelte
new file mode 100644
index 00000000..fe526357
--- /dev/null
+++ b/src/routes/logout/done.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
new file mode 100644
index 00000000..6cbae8f2
--- /dev/null
+++ b/src/routes/logout/index.js
@@ -0,0 +1,26 @@
+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
new file mode 100644
index 00000000..2c6a7085
--- /dev/null
+++ b/src/routes/logout/index.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/receive.svelte b/src/routes/receive.svelte
deleted file mode 100644
index 73d3cc06..00000000
--- a/src/routes/receive.svelte
+++ /dev/null
@@ -1,75 +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';
-
-	let useFiat = true;
-	let amountFiat = 0;
-	let amountSats = 0;
-
-	const numPad = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '.', '0', '<'];
-</script>
-
-<AppHeader />
-
-<!-- step 1 input amount and generate QR code -->
-<div class="flex justify-center items-center mt-20 mb-3 px-3">
-	<div class="space-y-5">
-		<!-- amounts -->
-		<div class="text-center">
-			<div class="text-6xl font-semibold tracking-widest mb-1">
-				{useFiat ? `$${amountFiat}` : amountSats}<span class="tracking-normal text-base font-normal"
-					>{useFiat ? 'CAD' : 'SATS'}</span
-				>
-			</div>
-			<span class="text-secondary mr-1"
-				>{useFiat ? `${amountSats} SATS` : `$${amountFiat} CAD`}</span
-			> <button on:click={() => (useFiat = !useFiat)}><Icon icon="swap" style="inline" /></button>
-		</div>
-
-		<!-- numpad -->
-		<div class="grid grid-cols-3 gap-2">
-			{#each numPad as value}
-				{#if value === '<'}
-					<button
-						class="bg-primary rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white"
-					>
-						<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"
-						>{value}</button
-					>
-				{/if}
-			{/each}
-		</div>
-
-		<!-- buttons -->
-		<div class="space-y-3">
-			<button
-				class="bg-black text-white rounded-xl w-full h-[48px] flex justify-center items-center font-semibold text-sm"
-				on:click={() => goto('/invoice')}><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"
-				><Icon icon="send" style="mr-2" /> Send Invoice</button
-			>
-		</div>
-	</div>
-</div>
diff --git a/src/routes/register.js b/src/routes/register.js
new file mode 100644
index 00000000..1bb03ba6
--- /dev/null
+++ b/src/routes/register.js
@@ -0,0 +1,14 @@
+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
index 60a81ced..69ec5fd2 100644
--- a/src/routes/register.svelte
+++ b/src/routes/register.svelte
@@ -1,6 +1,5 @@
 <script>
 	import { RegisterOrLogin } from '$comp';
-  import { post } from "$lib/utils";
 </script>
 
 <RegisterOrLogin page="Register" />
diff --git a/src/routes/support.svelte b/src/routes/support.svelte
new file mode 100644
index 00000000..1935b156
--- /dev/null
+++ b/src/routes/support.svelte
@@ -0,0 +1,5 @@
+<script>
+	import { AppHeader } from '$comp';
+</script>
+
+<AppHeader />