nfc wip

16 files changed, 187 insertions, 86 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/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index a0c981c1..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';
@@ -35,14 +35,14 @@
 			expirePin();
 
 			try {
-				const ndef = new NDEFReader();
-				await ndef.scan();
+				$ndef = new NDEFReader();
+				await $ndef.scan();
 
-				ndef.addEventListener('readingerror', (e) => {
+				$ndef.addEventListener('readingerror', (e) => {
 					console.log('nfc error', e);
 				});
 
-				ndef.addEventListener('reading', ({ message, serialNumber }) => {
+				$ndef.addEventListener('reading', ({ message, serialNumber }) => {
           goto(`/${user.username}/card/${serialNumber.replace(/:/g, '-')}`);
 				});
 			} catch (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 308289b0..bf4f72d3 100644
--- a/src/routes/(app)/[username]/(profile)/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/+page.svelte
@@ -81,47 +81,48 @@
 <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">
 						Welcome! Your account balance is empty. You can start by making a deposit or by asking
 						someone to pay you.
 					</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">Request Payment</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">Request Payment</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
index 72ce96d5..e2569536 100644
--- a/src/routes/(app)/[username]/card/[serial]/+page.server.js
+++ b/src/routes/(app)/[username]/card/[serial]/+page.server.js
@@ -10,8 +10,6 @@ export let load = async ({ cookies, params }) => {
 		console.log(e);
 	}
 
-	console.log('POT', pot);
-
 	if (pot) throw redirect(307, `/pot/${serial}`);
 
 	return params;
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)/pot/[name]/+page.svelte b/src/routes/(app)/pot/[name]/+page.svelte
index 653166c7..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;
@@ -21,8 +21,8 @@
 	$: amountFiat = parseFloat(((amount * rate) / sats).toFixed(2));
 	$loginRedirect = $page.url.pathname;
 
-  let show;
-  let toggle = () => (show = !show);
+	let show;
+	let toggle = () => (show = !show);
 </script>
 
 <div class="container px-4 max-w-xl mx-auto mt-10 space-y-5">
@@ -32,17 +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="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> -->
-				<img src="/images/moneypot.jpg" class="w-24" />
-				<h1 class="text-2xl md:text-3xl font-semibold my-auto">Money 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>
-      {#if show}
-        <img {src} class="mx-auto" alt={name} />
-      {/if}
+			<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">
@@ -59,8 +70,8 @@
 						<button
 							class="rounded-full border py-3 px-2 font-bold hover:opacity-80 flex gap-1 w-full justify-center"
 						>
-							<Icon icon="down" />
-							Chip in
+							<Icon icon="plus" />
+							Add funds
 						</button>
 					</a>
 				</div>
@@ -69,38 +80,52 @@
 						<button
 							class="rounded-full border py-3 px-2 font-bold hover:opacity-80 flex gap-1 w-full justify-center"
 						>
-							<Icon icon="down" style="rotate-180" />
-							Dip in
+							<Icon icon="minus" style="rotate-180" />
+							Take funds
 						</button>
 					</a>
 				</div>
-      </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}>
+				<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" />
-					QR
+					{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="settings" />
-					Settings
+				<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} />
+										<Avatar user={p.user} size={16} disabled={true} />
 									</div>
-									<div class="ml-1 text-secondary my-auto">
-										{p.user.username}
-										{p.amount > 0 ? 'took out' : 'threw in'}
-									</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/static/icons/nfc.svg b/static/icons/nfc.svg
index 3fa2de48..42e3197f 100644
--- a/static/icons/nfc.svg
+++ b/static/icons/nfc.svg
@@ -1 +1,13 @@
-<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 88.5 122.88" style="enable-background:new 0 0 88.5 122.88" xml:space="preserve"><g><path d="M3.93,95.55h7.75l10.08,14.84V95.55h7.85v26.88h-7.85l-10.02-14.76v14.76H3.93V95.55L3.93,95.55z M4.35,60.42 c-2.47-3.71-3.94-9.36-4.28-14.98c-0.34-5.59,0.45-11.33,2.48-15.3l2.06-4.02l3.52,2.82L41.6,55.8c1.36-5.03,1.79-10.07,1.38-14.83 c-0.55-6.44-3.36-13.42-6.69-17.98l6.34-3.7c4.14,5.66,7.04,13.29,7.71,21.07c0.63,7.33-0.44,15.24-3.5,22.97l-1.84,4.63 l-3.89-3.12L7.72,38.06c-0.35,2.13-0.44,4.53-0.29,6.95c0.27,4.43,1.32,8.72,3.06,11.34L4.35,60.42L4.35,60.42z M68.05,85.83 c8.26-12.91,13.1-29.35,13.09-42.13c-0.01-16.05-5.04-30.56-11.44-40.04L76.14,0C83.13,10.48,88.5,26.32,88.5,43.7 c0,14.05-5.49,32.42-14.59,46.63L68.05,85.83L68.05,85.83z M52.77,73.9c5.89-8.46,9.4-19.93,9.34-30.61 C62.05,32.67,59,21.97,52.97,13.35l6.38-3.7c6.74,9.75,10.05,21.73,10.12,33.61c0.07,12.15-4.11,25.45-10.87,35.16L52.77,73.9 L52.77,73.9z M33.98,95.55h20.53v5.78h-12.2v4.69h10.44v5.44H42.31v10.96h-8.33V95.55L33.98,95.55z M75.7,111.43l7.28,2.2 c-0.49,2.04-1.26,3.75-2.31,5.11c-1.05,1.37-2.35,2.4-3.92,3.1c-1.56,0.69-3.54,1.04-5.95,1.04c-2.93,0-5.31-0.43-7.17-1.27 c-1.85-0.85-3.45-2.35-4.79-4.48c-1.35-2.13-2.02-4.87-2.02-8.2c0-4.44,1.18-7.86,3.55-10.25c2.37-2.38,5.72-3.58,10.05-3.58 c3.38,0,6.05,0.68,7.99,2.05c1.93,1.37,3.38,3.47,4.32,6.31l-7.32,1.62c-0.26-0.81-0.53-1.41-0.81-1.78 c-0.47-0.63-1.04-1.12-1.71-1.46c-0.68-0.34-1.43-0.51-2.26-0.51c-1.89,0-3.33,0.76-4.34,2.26c-0.76,1.12-1.14,2.88-1.14,5.28 c0,2.98,0.45,5.01,1.36,6.12c0.91,1.1,2.18,1.65,3.82,1.65c1.59,0,2.79-0.44,3.6-1.34C74.74,114.42,75.33,113.13,75.7,111.43 L75.7,111.43z"/></g></svg>
\ No newline at end of file
+<?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.png b/static/images/moneypot.png
new file mode 100644
index 00000000..b550ad98
--- /dev/null
+++ b/static/images/moneypot.png