nfc wip

14 files changed, 174 insertions, 85 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' } });
 }
+