nfc wip

4 files changed, 90 insertions, 24 deletions

diff --git a/src/lib/utils.js b/src/lib/utils.js
index be26ee45..a91ef639 100644
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@@ -26,7 +26,6 @@ export let g = (url, fetch, headers) =>
 		});
 
 export let get = (url, headers = {}) => {
-  console.log("GETTING", browser, base, url);
 	return fetch(base + url, { headers })
 		.then(async (r) => {
 			if (r.ok) return r.text();
diff --git a/src/routes/(app)/[username]/card/[serial]/+page.server.js b/src/routes/(app)/[username]/card/[serial]/+page.server.js
index 49d7504c..72ce96d5 100644
--- a/src/routes/(app)/[username]/card/[serial]/+page.server.js
+++ b/src/routes/(app)/[username]/card/[serial]/+page.server.js
@@ -1,3 +1,18 @@
-export let load = async ({ params }) => {
-  return params;
-}
+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);
+	}
+
+	console.log('POT', pot);
+
+	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
index e40554f2..aee3be28 100644
--- a/src/routes/(app)/[username]/card/[serial]/+page.svelte
+++ b/src/routes/(app)/[username]/card/[serial]/+page.svelte
@@ -1,9 +1,35 @@
 <script>
-  export let data;
-  let { serial } = data;
-  let balance = 0;
+	import { Card, Icon } from '$comp';
+	export let data;
+	let { serial } = data;
+	let balance = 0;
 </script>
 
-Card {serial}
-
-Balance {balance}
+<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)/pot/[name]/+page.svelte b/src/routes/(app)/pot/[name]/+page.svelte
index 7b3d890b..653166c7 100644
--- a/src/routes/(app)/pot/[name]/+page.svelte
+++ b/src/routes/(app)/pot/[name]/+page.svelte
@@ -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">
@@ -31,12 +34,15 @@
 
 	<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="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>
+				<img src="/images/moneypot.jpg" class="w-24" />
+				<h1 class="text-2xl md:text-3xl font-semibold my-auto">Money Pot</h1>
 			</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} />
+      {#if show}
+        <img {src} class="mx-auto" alt={name} />
+      {/if}
 			<div class="flex justify-center gap-4">
 				<div class="my-auto">
 					<h2 class="text-2xl md:text-3xl font-semibold">
@@ -47,17 +53,37 @@
 					</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="down" />
+							Chip in
+						</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="down" style="rotate-180" />
+							Dip in
+						</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" />
+					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>
 			</div>
 			<div class="text-base">
 				{#each payments as p}