nfc wip

4 files changed, 69 insertions, 35 deletions

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)));
+}