Merge branch 'nfc'

24 files changed, 291 insertions, 98 deletions

diff --git a/src/lib/store.js b/src/lib/store.js
index 4e88c90c..923bda52 100644
--- a/src/lib/store.js
+++ b/src/lib/store.js
@@ -52,3 +52,4 @@ export const request = writable();
 export const requestRedirect = writable();
 export const token = persistSession('token');
 export const user = writable();
+export const ndef = writable();
diff --git a/src/lib/utils.js b/src/lib/utils.js
index 70ea5d3b..3441556f 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -25,8 +25,8 @@ export let g = (url, fetch, headers) =>
 			}
 		});
 
-export let get = (url, headers = {}) =>
-	fetch(base + url, { headers })
+export let get = (url, headers = {}) => {
+	return fetch(base + url, { headers })
 		.then(async (r) => {
 			if (r.ok) return r.text();
 			throw new Error(await r.text());
@@ -38,6 +38,7 @@ export let get = (url, headers = {}) =>
 				return body;
 			}
 		});
+}
 
 export let post = (url, body, headers) => {
 	headers = { ...headers, 'content-type': 'application/json', accept: 'application/json' };
@@ -125,8 +126,8 @@ export let info = (m) => {
 	});
 };
 
-export let login = async (user, cookies, ip) => {
-	let maxAge = 30 * 24 * 60 * 60;
+export let login = async (user, cookies) => {
+	let maxAge = 380 * 24 * 60 * 60;
 
 	let res = await fetch(base + '/login', {
 		method: 'POST',
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 891de9ac..cd8919e4 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -2,7 +2,7 @@
 	import { SvelteToast } from '@zerodevx/svelte-toast';
 	import { onDestroy, onMount } from 'svelte';
 	import { close, connect, send } from '$lib/socket';
-	import { last, invoice, request, passwordPrompt, pin } from '$lib/store';
+	import { last, invoice, request, ndef, passwordPrompt, pin } from '$lib/store';
 	import { page } from '$app/stores';
 	import { browser } from '$app/environment';
 	import { goto } from '$app/navigation';
@@ -21,7 +21,7 @@
 		({ rate, user, subject, token, rates } = data);
 	};
 
-	onMount(() => {
+	onMount(async () => {
 		let localStorageLocale = localStorage.getItem(localeLocalStorageKey);
 		if (localStorageLocale) locale.set(localStorageLocale);
 
@@ -30,8 +30,24 @@
 		});
 
 		if (browser) {
+			let log = console.log;
 			checkSocket();
 			expirePin();
+
+			try {
+				$ndef = new NDEFReader();
+				await $ndef.scan();
+
+				$ndef.addEventListener('readingerror', (e) => {
+					console.log('nfc error', e);
+				});
+
+				$ndef.addEventListener('reading', ({ message, serialNumber }) => {
+          goto(`/${user.username}/card/${serialNumber.replace(/:/g, '-')}`);
+				});
+			} catch (error) {
+				log('Argh! ' + error);
+			}
 		}
 	});
 
diff --git a/src/routes/(app)/[username]/(profile)/+layout.svelte b/src/routes/(app)/[username]/(profile)/+layout.svelte
index df9b9ad8..fe12a124 100644
--- a/src/routes/(app)/[username]/(profile)/+layout.svelte
+++ b/src/routes/(app)/[username]/(profile)/+layout.svelte
@@ -46,18 +46,20 @@
 	let toggleBio = () => (hideBio = false);
 </script>
 
-<div class="container mx-auto w-full px-4 mb-4 flex flex-wrap lg:flex-nowrap">
+<div class="container mx-auto w-full px-4 mb-4 flex flex-wrap lg:flex-nowrap space-y-5">
 	<div class="hidden lg:block w-[240px] lg:mr-10" />
-	<div class="w-[240px] lg:absolute space-y-5 left-20 mx-auto lg:mr-10 mb-10">
+	<div class="w-[240px] lg:absolute space-y-5 left-20 mx-auto lg:mr-10">
 		<h1 class="text-3xl font-bold text-center mx-auto">{display || username}</h1>
 
+    {#if subject.address}
 		<div
 			class="text-secondary mx-auto text-center lg:text-left lg:mx-0"
 			class:line-clamp-3={hideBio}
 			on:click={toggleBio}
 		>
-			{subject.address && subject.address !== 'null' ? subject.address : ''}
+    {subject.address}
 		</div>
+    {/if}
 
 		<div class="flex justify-around">
 			<a href={`/${subject.pubkey}/follows`}
@@ -80,7 +82,7 @@
 						>
 							<div class="mx-auto flex">
 								<Icon icon={'profile'} style="my-auto h-6 mr-2 invert" />
-								<div class="my-auto mt-1">{$t('user.following')}</div>
+								<div class="my-auto">{$t('user.following')}</div>
 							</div>
 						</button>
 					</div>
@@ -92,7 +94,7 @@
 						>
 							<div class="mx-auto flex">
 								<Icon icon={'profile'} style="my-auto h-6 mr-2" />
-								<div class="my-auto mt-1">{$t('user.follow')}</div>
+								<div class="my-auto">{$t('user.follow')}</div>
 							</div>
 						</button>
 					</div>
diff --git a/src/routes/(app)/[username]/(profile)/+page.svelte b/src/routes/(app)/[username]/(profile)/+page.svelte
index 0b09f85c..6e8318f7 100644
--- a/src/routes/(app)/[username]/(profile)/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/+page.svelte
@@ -81,46 +81,47 @@
 <div class="space-y-8">
 	{#if user?.id === subject.id}
 		<div>
-			<div class="flex justify-center lg:justify-start">
+			<div class="flex justify-center lg:justify-start mb-8">
 				<Balance {user} />
 			</div>
+
 			{#if !user.balance}
-				<div class="space-y-8 mt-8">
+				<div>
 					<p class="text-secondary text-lg">
           {$t("user.welcome")}
 					</p>
+				</div>
+			{/if}
 
-					<div class="flex gap-4 justify-center w-full">
-						<a href={`/${user.username}/receive`}>
-							<button
-								class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60 bg-black text-white"
-							>
-								<div class="mx-auto flex">
-									<Icon icon="numpad" style="my-auto h-6 mr-2 invert" />
-                  <div class="my-auto mt-1">{$t("user.requestPayment")}</div>
-								</div>
-							</button>
-						</a>
+			<div class="flex gap-4 justify-center w-full">
+				<a href={`/${user.username}/receive`}>
+					<button
+						class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60 bg-black text-white"
+					>
+						<div class="mx-auto flex">
+							<Icon icon="numpad" style="my-auto h-6 mr-2 invert" />
+              <div class="my-auto mt-1">{$t("user.requestPayment")}</div>
+						</div>
+					</button>
+				</a>
 
-						{#if user.eligible}
-							<a href={`/buy`}>
-								<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60">
-									<div class="mx-auto flex">
-										<!-- <Icon icon="plus" style="my-auto h-6 mr-2" /> -->
+				{#if user.eligible}
+					<a href={`/buy`}>
+						<button class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60">
+							<div class="mx-auto flex">
+								<!-- <Icon icon="plus" style="my-auto h-6 mr-2" /> -->
 
-										<img
-											src="/images/bitcoin.svg"
-											class="w-8 border-4 border-transparent mr-2"
-											alt="Bitcoin"
-										/>
-										<div class="my-auto mt-1">Buy Bitcoin</div>
-									</div>
-								</button>
-							</a>
-						{/if}
-					</div>
-				</div>
-			{/if}
+								<img
+									src="/images/bitcoin.svg"
+									class="w-8 border-4 border-transparent mr-2"
+									alt="Bitcoin"
+								/>
+								<div class="my-auto mt-1">Buy Bitcoin</div>
+							</div>
+						</button>
+					</a>
+				{/if}
+			</div>
 		</div>
 	{/if}
 
diff --git a/src/routes/(app)/[username]/card/[serial]/+page.server.js b/src/routes/(app)/[username]/card/[serial]/+page.server.js
new file mode 100644
index 00000000..e2569536
--- /dev/null
+++ b/src/routes/(app)/[username]/card/[serial]/+page.server.js
@@ -0,0 +1,16 @@
+import { auth, get } from '$lib/utils';
+import { redirect } from "@sveltejs/kit"
+
+export let load = async ({ cookies, params }) => {
+	let { serial } = params;
+	let pot;
+	try {
+		pot = await get(`/pot/${serial}`, auth(cookies));
+	} catch (e) {
+		console.log(e);
+	}
+
+	if (pot) throw redirect(307, `/pot/${serial}`);
+
+	return params;
+};
diff --git a/src/routes/(app)/[username]/card/[serial]/+page.svelte b/src/routes/(app)/[username]/card/[serial]/+page.svelte
new file mode 100644
index 00000000..aee3be28
--- /dev/null
+++ b/src/routes/(app)/[username]/card/[serial]/+page.svelte
@@ -0,0 +1,35 @@
+<script>
+	import { Card, Icon } from '$comp';
+	export let data;
+	let { serial } = data;
+	let balance = 0;
+</script>
+
+<div class="space-y-5">
+<div class="relative flex justify-center gap-2">
+	<h1 class="text-2xl md:text-3xl font-semibold my-auto">Card {serial}</h1>
+</div>
+<div class="flex justify-center">
+	<a href={`/send/pot/${serial}`}>
+		<button
+			class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60 bg-black text-white justify-center gap-2"
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="invert text-black peer-placeholder-shown:text-gray-300 h-6 w-6 my-auto"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
+				/>
+			</svg>
+			<div class="my-auto">Add Funds</div>
+		</button>
+	</a>
+</div>
+</div>
diff --git a/src/routes/(app)/[username]/invoice/[hash]/+page.svelte b/src/routes/(app)/[username]/invoice/[hash]/+page.svelte
index fff2b22c..1a1191a1 100644
--- a/src/routes/(app)/[username]/invoice/[hash]/+page.svelte
+++ b/src/routes/(app)/[username]/invoice/[hash]/+page.svelte
@@ -11,6 +11,15 @@
 
 	export let data;
 
+	let ndef;
+
+	let reading = async ({ message, serialNumber }) => {
+		let name = serialNumber.replace(/:/g, '-');
+		let result = await post(`/pot/${name}/withdraw`, { amount, hash, name });
+	};
+
+	let readingerror = (e) => console.log('nfc error', e);
+
 	$: refresh(data);
 	let { invoice, id, user, sm, lg } = data;
 	let {
@@ -33,7 +42,7 @@
 	let qr;
 	let tipPercent = 0;
 
-	let refresh = (data) => {
+	let refresh = async (data) => {
 		({ invoice, id, user, sm, lg } = data);
 		({
 			amount,
@@ -48,19 +57,43 @@
 		} = invoice);
 
 		tipPercent = (tip / amount) * 100;
+
+		if (browser) {
+			try {
+				ndef = new NDEFReader();
+				await ndef.scan();
+
+				ndef.removeEventListener('readingerror', readingerror);
+				ndef.removeEventListener('reading', reading);
+
+				ndef.addEventListener('readingerror', readingerror);
+				ndef.addEventListener('reading', reading);
+			} catch (e) {
+				console.log(e);
+			}
+      }
 	};
 
 	$: amountFiat = parseFloat(((amount * rate) / sats).toFixed(2));
 	$: tipAmount = ((tip * rate) / sats).toFixed(2);
 
 	let subbed;
-	onMount(() => {
-		browser &&
+
+	onMount(async () => {
+		if (browser) {
 			last.subscribe((v) => {
 				if (!v || subbed) return;
 				subbed = true;
 				send('subscribe', invoice);
 			});
+		}
+	});
+
+	onDestroy(() => {
+		if (ndef) {
+			ndef.removeEventListener('readingerror', readingerror);
+			ndef.removeEventListener('reading', reading);
+		}
 	});
 
 	$: link = type === 'bitcoin' ? text : `lightning:${text}`;
diff --git a/src/routes/(app)/[username]/invoice/[hash]/paid/+page.svelte b/src/routes/(app)/[username]/invoice/[hash]/paid/+page.svelte
index c9619cee..969fb6c7 100644
--- a/src/routes/(app)/[username]/invoice/[hash]/paid/+page.svelte
+++ b/src/routes/(app)/[username]/invoice/[hash]/paid/+page.svelte
@@ -15,7 +15,7 @@
 </script>
 
 <div class="container px-4 text-center mx-auto">
-	<div class="flex w-full py-20 max-w-[200px] mx-auto" in:scale={{ start: 0.5 }}>
+	<div class="flex w-full py-5 max-w-[200px] mx-auto" in:scale={{ start: 0.5 }}>
 		<Icon icon="check" style="mx-auto" />
 	</div>
 	{#if received}
diff --git a/src/routes/(app)/[username]/payments/[...page]/+page.svelte b/src/routes/(app)/[username]/payments/[...page]/+page.svelte
index 744b35ec..bdfcbb04 100644
--- a/src/routes/(app)/[username]/payments/[...page]/+page.svelte
+++ b/src/routes/(app)/[username]/payments/[...page]/+page.svelte
@@ -163,12 +163,12 @@
 
 						<div class="flex my-auto">
 							{#if p.type === types.pot}
-								<a href={`/pot/${p.pot}`}>
+								<a href={`/pot/${p.memo}`}>
 									<div class="text-secondary flex">
 										<div class="my-auto mr-1">
 											<img
-												src="/icons/logo-symbol.svg"
-												class="w-12 border-4 border-transparent"
+												src="/images/moneypot.png"
+												class="w-12"
 												alt="Pot"
 											/>
 										</div>
diff --git a/src/routes/(app)/locations/+server.js b/src/routes/(app)/locations/+server.js
index dd9e984b..ba5affa3 100644
--- a/src/routes/(app)/locations/+server.js
+++ b/src/routes/(app)/locations/+server.js
@@ -4,12 +4,12 @@ import { json } from '@sveltejs/kit';
 export async function GET({ fetch, setHeaders }) {
 	let locations = [];
 
-	try {
-		({ locations } = await get('/locations'));
-		setHeaders({ 'cache-control': 'public, max-age=600' });
-	} catch (e) {
-		console.log('failed to fetch locations');
-	}
+	// try {
+	// 	({ locations } = await get('/locations'));
+	// 	setHeaders({ 'cache-control': 'public, max-age=600' });
+	// } catch (e) {
+	// 	console.log('failed to fetch locations');
+	// }
 
 	return json({ locations });
 }
diff --git a/src/routes/(app)/pot/[name]/+page.svelte b/src/routes/(app)/pot/[name]/+page.svelte
index 7b3d890b..d3f559a1 100644
--- a/src/routes/(app)/pot/[name]/+page.svelte
+++ b/src/routes/(app)/pot/[name]/+page.svelte
@@ -5,7 +5,7 @@
 	import { Avatar, Icon } from '$comp';
 	import { toast } from '@zerodevx/svelte-toast';
 	import { t } from '$lib/translations';
-	import { copy, f, s, sat, sats } from '$lib/utils';
+	import { types, copy, f, s, sat, sats } from '$lib/utils';
 	import { loginRedirect } from '$lib/store';
 
 	export let data;
@@ -20,6 +20,9 @@
 
 	$: amountFiat = parseFloat(((amount * rate) / sats).toFixed(2));
 	$loginRedirect = $page.url.pathname;
+
+	let show;
+	let toggle = () => (show = !show);
 </script>
 
 <div class="container px-4 max-w-xl mx-auto mt-10 space-y-5">
@@ -29,14 +32,28 @@
 		</a>
 	</div>
 
-	<div class="flex justify-center items-center text-center">
-		<div class="shadow-xl rounded-3xl px-10 pt-5 pb-10 space-y-5 w-full mx-5">
-			<div class="relative">
+	<div class="flex justify-center items-center">
+		<div class="md:shadow-xl rounded-3xl md:px-10 pt-5 pb-10 space-y-5 w-full md:mx-5">
+			<div class="relative flex justify-center gap-2">
 				<!-- <p class="absolute right-0 top-1 underline"><Icon icon="settings" /></p> -->
-				<h1 class="text-2xl md:text-3xl font-semibold">Public Pot</h1>
+        {#if name.split('-').length === 4}
+          <h1 class="text-2xl md:text-3xl font-semibold my-auto">Card {name}</h1>
+				{:else}
+					<img src="/images/moneypot.jpg" class="w-24" />
+					<h1 class="text-2xl md:text-3xl font-semibold my-auto">Money Pot</h1>
+				{/if}
 			</div>
-			<p class="text-secondary">Anyone who knows the URL to this pot can add or take out funds</p>
-			<img {src} class="mx-auto" alt={name} />
+			<p class="text-secondary text-center">
+				Anyone who knows the URL to this page can add or take out funds from the pot
+			</p>
+			{#if show}
+				<img {src} class="mx-auto" alt={name} />
+
+				<button class="flex mx-auto mt-5" on:click={() => copy($page.url.pathname)}
+					><Icon icon="copy" style="w-10 max-w-none" />
+					<div class="my-auto">Copy</div></button
+				>
+			{/if}
 			<div class="flex justify-center gap-4">
 				<div class="my-auto">
 					<h2 class="text-2xl md:text-3xl font-semibold">
@@ -47,34 +64,68 @@
 					</h3>
 				</div>
 			</div>
-			<div class="mx-auto my-auto flex gap-2 justify-center" data-sveltekit-prefetch="off">
-				<a href={`/send/pot/${name}`}>
-					<button class="text-lg rounded-full border py-3 px-7 font-bold hover:opacity-80">
-						Chip in
-					</button>
-				</a>
-				<a href={`/pot/${name}/withdraw`}>
-					<button class="text-lg rounded-full border py-3 px-7 font-bold hover:opacity-80">
-						Dip in
-					</button>
-				</a>
+			<div class="flex gap-2" data-sveltekit-prefetch="off">
+				<div class="grow">
+					<a href={`/send/pot/${name}`}>
+						<button
+							class="rounded-full border py-3 px-2 font-bold hover:opacity-80 flex gap-1 w-full justify-center"
+						>
+							<Icon icon="plus" />
+							Add funds
+						</button>
+					</a>
+				</div>
+				<div class="grow">
+					<a href={`/pot/${name}/withdraw`}>
+						<button
+							class="rounded-full border py-3 px-2 font-bold hover:opacity-80 flex gap-1 w-full justify-center"
+						>
+							<Icon icon="minus" style="rotate-180" />
+							Take funds
+						</button>
+					</a>
+				</div>
+			</div>
+			<div class="flex gap-2" data-sveltekit-prefetch="off">
+				<button
+					class="rounded-full border py-3 px-2 font-bold hover:opacity-80 flex gap-1 w-full justify-center"
+					on:click={toggle}
+				>
+					<Icon icon="qr" style="invert" />
+					{show ? 'Hide' : 'Show'} QR
+				</button>
+				<button
+					class="rounded-full border py-3 px-2 font-bold hover:opacity-80 flex gap-1 w-full justify-center"
+				>
+					<Icon icon="nfc" style="w-6" />
+					Write Tag
+				</button>
 			</div>
 			<div class="text-base">
 				{#each payments as p}
-					<a href={`/${p.user.username}`}>
-						<div class="flex h-24 hover:bg-gray-100 px-4">
-							<div class="flex grow">
-								<div class="flex my-auto">
+					<a href={`/payment/${p.id}`}>
+						<div class="grid grid-cols-3 border-b h-24 hover:bg-gray-100 px-4">
+							<div class="whitespace-nowrap my-auto">
+								<div class="font-bold" class:text-red-800={p.amount > 0}>
+									{f(Math.abs(p.amount) * (p.rate / sats), p.currency)}
+									{#if p.tip}
+										<span class="text-sm text-secondary">
+											+{Math.round((p.tip / Math.abs(p.amount)) * 100)}%
+										</span>
+									{/if}
+								</div>
+
+								<div class="text-secondary">
+									{sat(Math.abs(p.amount) + (p.tip || 0))}
+								</div>
+							</div>
+
+							<div class="flex my-auto">
+								<div class="flex">
 									<div class="my-auto">
-										<Avatar user={p.user} size={12} />
-									</div>
-									<div class="ml-1 text-secondary my-auto">
-										{p.user.username}
-										{p.amount > 0 ? 'took out' : 'threw in'}
+										<Avatar user={p.user} size={16} disabled={true} />
 									</div>
-								</div>
-								<div class="text-secondary my-auto">
-									{sat(p.amount)}
+									<div class="my-auto ml-1 text-secondary">{p.user.username}</div>
 								</div>
 							</div>
 
diff --git a/src/routes/(app)/pot/[name]/withdraw/+page.server.js b/src/routes/(app)/pot/[name]/withdraw/+page.server.js
index ac33e940..e7ea29f1 100644
--- a/src/routes/(app)/pot/[name]/withdraw/+page.server.js
+++ b/src/routes/(app)/pot/[name]/withdraw/+page.server.js
@@ -1,4 +1,4 @@
-import { fail, redirect } from '@sveltejs/kit';
+import { fail, json, redirect } from '@sveltejs/kit';
 import { fd, auth, post } from '$lib/utils';
 
 export async function load({ parent }) {
diff --git a/src/routes/(app)/pot/[name]/withdraw/+page.svelte b/src/routes/(app)/pot/[name]/withdraw/+page.svelte
index bb11ddde..da564709 100644
--- a/src/routes/(app)/pot/[name]/withdraw/+page.svelte
+++ b/src/routes/(app)/pot/[name]/withdraw/+page.svelte
@@ -9,6 +9,7 @@
 	export let data;
 	export let form;
 
+  let { rates } = data;
 	let { amount, name } = $page.params;
 	let { currency } = data.user;
 	let loading;
@@ -19,6 +20,8 @@
 		if (form?.message.includes('pin')) $pin = undefined;
 		loading = false;
 	};
+
+	$: rate = rates[currency];
 </script>
 
 <button class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80" on:click={back}>
@@ -32,7 +35,7 @@
 {/if}
 
 <div class="container px-4 mt-20 max-w-xl mx-auto">
-	<Numpad bind:amount {currency} />
+  <Numpad bind:amount bind:currency bind:rate {submit} />
 
 	<form method="POST" use:enhance on:submit={submit}>
 		<input name="name" value={name} type="hidden" />
diff --git a/src/routes/(app)/pot/[name]/withdraw/+server.js b/src/routes/(app)/pot/[name]/withdraw/+server.js
new file mode 100644
index 00000000..0f9a23f3
--- /dev/null
+++ b/src/routes/(app)/pot/[name]/withdraw/+server.js
@@ -0,0 +1,6 @@
+import { json } from '@sveltejs/kit';
+import { auth, post } from '$lib/utils';
+
+export async function POST({ cookies, request }) {
+	return json(await post('/take', await request.json(), auth(cookies)));
+}
diff --git a/src/routes/(app)/send/invoice/[id]/+page.svelte b/src/routes/(app)/send/invoice/[id]/+page.svelte
index d5c548a7..3efe898a 100644
--- a/src/routes/(app)/send/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/send/invoice/[id]/+page.svelte
@@ -1,4 +1,5 @@
 <script>
+	import { onDestroy, onMount } from 'svelte';
 	import { t } from '$lib/translations';
 	import { goto } from '$app/navigation';
 	import { pin } from '$lib/store';
@@ -33,6 +34,24 @@
 		if (form?.message.includes('pin')) $pin = undefined;
 		loading = false;
 	};
+
+	onMount(async () => {
+    console.log("SKOOK")
+		try {
+			let ndef = new NDEFReader();
+			await ndef.scan();
+
+			ndef.addEventListener('readingerror', (e) => {
+				console.log('nfc error', e);
+			});
+
+			ndef.addEventListener('reading', ({ message, serialNumber }) => {
+				console.log('HI');
+			});
+		} catch (error) {
+			log('Argh! ' + error);
+		}
+	});
 </script>
 
 <button class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80" on:click={back}>
diff --git a/src/routes/(app)/withdraw/+server.js b/src/routes/(app)/withdraw/+server.js
index 852e17d8..7b1ff4c6 100644
--- a/src/routes/(app)/withdraw/+server.js
+++ b/src/routes/(app)/withdraw/+server.js
@@ -6,3 +6,4 @@ export async function POST({ cookies, request }) {
 
 	return new Response(JSON.stringify('ok'), { headers: { 'content-type': 'application/json' } });
 }
+
diff --git a/src/routes/+layout.server.js b/src/routes/+layout.server.js
index 5359d022..60a2f6c6 100644
--- a/src/routes/+layout.server.js
+++ b/src/routes/+layout.server.js
@@ -9,9 +9,9 @@ export const load = async ({ cookies, url }) => {
 		} catch (e) {}
 	}
 
-	const { pathname } = url;
+	const { host, pathname } = url;
 	const defaultLocale = user?.language || 'en'; // get from cookie, user session, ...
 	const initLocale = locale.get() || defaultLocale; // set default if no locale already set
 	await loadTranslations(initLocale, pathname); // keep this just before the `return`
-	return {};
+	return { host, pathname };
 };
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index e1c3ff1e..6dc84349 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,8 +1,8 @@
 <script>
 	import '../app.css';
-	import { page } from '$app/stores';
 
-	let { host, pathname } = $page.url;
+  export let data;
+  let { host, pathname } = data;
 </script>
 
 <svelte:head>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 3a5a54f3..3331b69b 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -23,6 +23,8 @@
 	let faq;
 	let about;
 
+	let log = console.log;
+
 	const howItWorksSteps = [
 		{ image: 'hand', stepID: 'step1' },
 		{ image: 'bolt', stepID: 'step2' },
diff --git a/src/service-worker.js b/src/service-worker.js
deleted file mode 100644
index 4fb470e9..00000000
--- a/src/service-worker.js
+++ /dev/null
@@ -1,7 +0,0 @@
-self.addEventListener('fetch', function (event) {
-	event.respondWith(
-		caches.match(event.request).then(function (response) {
-			return response || fetch(event.request);
-		})
-	);
-});
diff --git a/static/icons/nfc.svg b/static/icons/nfc.svg
new file mode 100644
index 00000000..42e3197f
--- /dev/null
+++ b/static/icons/nfc.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 330 330" xml:space="preserve">
+<g id="XMLID_2_">
+	<path id="XMLID_4_" d="M315,0H15C6.716,0,0,6.716,0,15v300c0,8.284,6.716,15,15,15h300c8.284,0,15-6.716,15-15V15
+		C330,6.716,323.284,0,315,0z M300,300H30V30h270V300z"/>
+	<path id="XMLID_7_" d="M75,270h180c8.284,0,15-6.716,15-15V75c0-8.284-6.716-15-15-15h-90c-8.284,0-15,6.716-15,15v47.58
+		c-17.459,6.192-30,22.865-30,42.42c0,24.813,20.186,45,45,45s45-20.187,45-45c0-19.555-12.541-36.227-30-42.42V90h60v150H90V90h5
+		c8.284,0,15-6.716,15-15s-6.716-15-15-15H75c-8.284,0-15,6.716-15,15v180C60,263.284,66.716,270,75,270z M165,180
+		c-8.271,0-15-6.729-15-15s6.729-15,15-15s15,6.729,15,15S173.271,180,165,180z"/>
+</g>
+</svg>
\ No newline at end of file
diff --git a/static/images/moneypot.jpg b/static/images/moneypot.jpg
new file mode 100644
index 00000000..2084a99a
--- /dev/null
+++ b/static/images/moneypot.jpg
diff --git a/static/images/moneypot.png b/static/images/moneypot.png
new file mode 100644
index 00000000..b550ad98
--- /dev/null
+++ b/static/images/moneypot.png