From 66db7fcadb814a93fa761fb7f23ed1077284f610 Mon Sep 17 00:00:00 2001
From: Peter Ferguson <peterferguson95@gmail.com>
Date: Sat, 16 Mar 2024 12:23:07 +0000
Subject: [PATCH 01/14] attempt to add display items

seems chromes SPC doesn't support display items
---
 .../src/components/create-payment-button.tsx  | 23 ++++++++++++++++---
 apps/dapp/src/lib/utils.ts                    |  5 ++--
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/apps/dapp/src/components/create-payment-button.tsx b/apps/dapp/src/components/create-payment-button.tsx
index 202c14e..6a13dbc 100644
--- a/apps/dapp/src/components/create-payment-button.tsx
+++ b/apps/dapp/src/components/create-payment-button.tsx
@@ -6,7 +6,6 @@ export function CreatePaymentButton() {
 		<Button
 			onClick={async (e) => {
 				e.preventDefault();
-				console.log("Creating payment");
 				await payWithSPC(
 					{
 						allowedCredentials: ["l8S4J0LWhvVdabcKL9tJcOApr5Qp44bi3SH88YCTOjQ"],
@@ -14,8 +13,26 @@ export function CreatePaymentButton() {
 						timeout: 60000,
 					},
 					{
-						currency: "USDC",
-						value: "100.00",
+						// - the SPC spec allows for multiple items to be displayed
+						// - but currently the Chrome implementation does NOT display ANY items
+						displayItems: [
+							{
+								label: "NFT",
+								amount: { currency: "USD", value: "0.0000001" },
+								pending: true,
+							},
+							{
+								label: "Gas Fee",
+								amount: { currency: "USD", value: "0.0000001" },
+								pending: true,
+							},
+						],
+						total: {
+							label: "Total",
+							amount:
+								// - currency must be a ISO 4217 currency code
+								{ currency: "USD", value: "0.0000001" },
+						},
 					},
 					"0x",
 				);
diff --git a/apps/dapp/src/lib/utils.ts b/apps/dapp/src/lib/utils.ts
index 48d9866..47e6073 100644
--- a/apps/dapp/src/lib/utils.ts
+++ b/apps/dapp/src/lib/utils.ts
@@ -33,7 +33,7 @@ type SerialisableCredentialRequestOptions = Omit<
 
 export const payWithSPC = async (
 	requestOptions: SerialisableCredentialRequestOptions,
-	amount: PaymentCurrencyAmount,
+	paymentDetails: PaymentDetailsInit,
 	address: Address,
 ) => {
 	const { challenge, timeout } = requestOptions;
@@ -71,9 +71,8 @@ export const payWithSPC = async (
 			},
 		},
 	];
-	const paymentDetails = { total: { label: "Total", amount } };
 
-	console.log("spc paymentMethodData", paymentMethodData);
+	console.log("spc paymentMethodData", paymentMethodData, paymentDetails);
 
 	const request = new PaymentRequest(paymentMethodData, paymentDetails);
 

From f71e10b86cf8cc33d0f495b1c8d12e5ac00f8bb8 Mon Sep 17 00:00:00 2001
From: Peter Ferguson <peterferguson95@gmail.com>
Date: Sat, 16 Mar 2024 13:31:42 +0000
Subject: [PATCH 02/14] wip create a fallback if no credential exists

---
 .../src/components/create-payment-button.tsx  | 89 ++++++++++++++++++-
 .../src/components/wallet-iframe-dialog.astro | 32 +++++++
 apps/dapp/src/lib/constants.ts                |  1 +
 apps/dapp/src/pages/index.astro               | 23 +----
 apps/wallet/src/lib/utils.ts                  | 20 ++++-
 apps/wallet/src/pages/index.astro             | 51 ++++++++---
 6 files changed, 180 insertions(+), 36 deletions(-)
 create mode 100644 apps/dapp/src/components/wallet-iframe-dialog.astro
 create mode 100644 apps/dapp/src/lib/constants.ts

diff --git a/apps/dapp/src/components/create-payment-button.tsx b/apps/dapp/src/components/create-payment-button.tsx
index 6a13dbc..eb5fa08 100644
--- a/apps/dapp/src/components/create-payment-button.tsx
+++ b/apps/dapp/src/components/create-payment-button.tsx
@@ -1,14 +1,101 @@
 import { Button } from "@/components/ui/button";
 import { payWithSPC } from "@/lib/utils";
+import { WALLET_IFRAME_DIALOG_ID } from "@/lib/constants";
+
+const getIframe = () => {
+	const iframeDialog = document.getElementById(
+		WALLET_IFRAME_DIALOG_ID,
+	) as HTMLIFrameElement | null;
+
+	const iframe = iframeDialog?.querySelector("iframe");
+
+	return iframe;
+};
+
+const fallbackToIframeCredentialCreation = async () => {
+	// - trigger the iframe container to open so the user can create a credential
+	const iframeDialog = document.getElementById(
+		WALLET_IFRAME_DIALOG_ID,
+	) as HTMLDialogElement | null;
+
+	iframeDialog?.classList.remove("hidden");
+	iframeDialog?.classList.add("flex");
+
+	console.log("iframeDialog", iframeDialog);
+
+	iframeDialog?.showModal();
+};
+
+/**
+ * Get the available credentials from the wallet iframe
+ */
+const getAvailableCredentials = async () => {
+	const iframe = getIframe();
+
+	if (!iframe) throw new Error("No iframe found");
+
+	// - Create a Promise that resolves when the expected message is received
+	const createCredentialsPromise = () => {
+		let timeout: NodeJS.Timeout | undefined;
+
+		const credentialsPromise = new Promise((resolve, reject) => {
+			// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+			function handleMessage(event: any) {
+				console.log("mesage from iframe", event, iframe?.src);
+
+				if (event.origin !== iframe?.src) return;
+
+				if (event.data.type === "credentials.get") {
+					// Resolve the promise with the data received
+					resolve(event.data);
+					// Remove the event listener to clean up
+					window.removeEventListener("message", handleMessage);
+				}
+			}
+
+			// Add an event listener to listen for messages from the iframe
+			window.addEventListener("message", handleMessage, false);
+
+			// Set a timeout to reject the promise if no response is received within a specific timeframe
+			timeout = setTimeout(() => {
+				window.removeEventListener("message", handleMessage);
+				reject(new Error("Timeout waiting for credentials response"));
+			}, 10000); // 10 seconds timeout
+		});
+
+		// ! Ensure to clean up on promise resolution or rejection
+		credentialsPromise.finally(() => clearTimeout(timeout));
+
+		return credentialsPromise;
+	};
+
+	// - ask the iframe for the available credentials
+	iframe.contentWindow?.postMessage({ type: "credentials.get" });
+
+	return await createCredentialsPromise();
+};
 
 export function CreatePaymentButton() {
 	return (
 		<Button
 			onClick={async (e) => {
 				e.preventDefault();
+
+				const credentials = await getAvailableCredentials();
+
+				console.log("credentials", credentials);
+
+				const allowedCredentials: string[] = [
+					// "l8S4J0LWhvVdabcKL9tJcOApr5Qp44bi3SH88YCTOjQ",
+				];
+
+				if (!allowedCredentials || allowedCredentials.length === 0) {
+					return fallbackToIframeCredentialCreation();
+				}
+
 				await payWithSPC(
 					{
-						allowedCredentials: ["l8S4J0LWhvVdabcKL9tJcOApr5Qp44bi3SH88YCTOjQ"],
+						allowedCredentials,
 						challenge: "challenge",
 						timeout: 60000,
 					},
diff --git a/apps/dapp/src/components/wallet-iframe-dialog.astro b/apps/dapp/src/components/wallet-iframe-dialog.astro
new file mode 100644
index 0000000..edd71b9
--- /dev/null
+++ b/apps/dapp/src/components/wallet-iframe-dialog.astro
@@ -0,0 +1,32 @@
+---
+import { cn } from "@/lib/utils";
+import { WALLET_IFRAME_DIALOG_ID } from "@/lib/constants";
+import { getPaymentOrigin } from "@/lib/utils";
+
+const paymentOrigin = getPaymentOrigin();
+---
+
+<dialog
+	id={WALLET_IFRAME_DIALOG_ID}
+	class={cn(
+		"items-center justify-center",
+		"border rounded-lg py-3 px-4 min-h-[40vh]",
+		"backdrop:bg-black backdrop:opacity-50 backdrop:backdrop-blur-md",
+		"backdrop:transition-opacity backdrop:duration-300",
+	)}
+>
+	<iframe class="h-full w-full" name="iframe" allow={`payment ${paymentOrigin}`}
+	></iframe>
+</dialog>
+<script>
+	import { WALLET_IFRAME_DIALOG_ID } from "@/lib/constants";
+	import { getPaymentOrigin } from "@/lib/utils";
+	const iframeDialog = document.getElementById(
+		WALLET_IFRAME_DIALOG_ID,
+	) as HTMLDialogElement | null;
+
+	const iframe = iframeDialog.querySelector("iframe");
+
+	iframe.src = getPaymentOrigin();
+	iframeDialog.addEventListener("click", () => dialog.close());
+</script>
diff --git a/apps/dapp/src/lib/constants.ts b/apps/dapp/src/lib/constants.ts
new file mode 100644
index 0000000..4abd450
--- /dev/null
+++ b/apps/dapp/src/lib/constants.ts
@@ -0,0 +1 @@
+export const WALLET_IFRAME_DIALOG_ID = "wallet-iframe-dialog";
diff --git a/apps/dapp/src/pages/index.astro b/apps/dapp/src/pages/index.astro
index 77e4568..52c1ed4 100644
--- a/apps/dapp/src/pages/index.astro
+++ b/apps/dapp/src/pages/index.astro
@@ -1,8 +1,7 @@
 ---
+import "../../public/global.css";
 import { CreatePaymentButton } from "@/components/create-payment-button";
-import { getPaymentOrigin } from "@/lib/utils";
-
-const paymentOrigin = getPaymentOrigin();
+import WalletIframeDialog from "@/components/wallet-iframe-dialog.astro";
 ---
 
 <html lang="en">
@@ -16,31 +15,15 @@ const paymentOrigin = getPaymentOrigin();
 	</head>
 	<body class="flex flex-col items-center justify-center h-screen">
 		<main class="flex flex-col items-center justify-evenly min-h-[20vh]">
-			<!-- <form
-				id="form"
-				action={`${paymentOrigin}/`}
-				class="center"
-				target="iframe"
-				method="post"
-			> -->
 			<h1>SPC dApp</h1>
 
-			<div id="iframe-container" class="hidden">
-				<iframe name="iframe" allow={`payment ${paymentOrigin}`}></iframe>
-			</div>
-
+			<WalletIframeDialog />
 			<CreatePaymentButton client:only />
-			<!-- </form> -->
 		</main>
 		<script>
 			import { getPaymentOrigin } from "../lib/utils";
 			const paymentOrigin = getPaymentOrigin();
 
-			console.log(
-				"setting up message listeners for paymentOrigin: ",
-				paymentOrigin,
-			);
-
 			window.addEventListener("message", (e) => {
 				if (e.origin !== paymentOrigin) {
 					return;
diff --git a/apps/wallet/src/lib/utils.ts b/apps/wallet/src/lib/utils.ts
index 0ebe6e5..a6bc756 100644
--- a/apps/wallet/src/lib/utils.ts
+++ b/apps/wallet/src/lib/utils.ts
@@ -12,10 +12,24 @@ export function cn(...inputs: ClassValue[]) {
 	return twMerge(clsx(inputs));
 }
 
-export const sendMessage = (message: string) => {
+export const getPayeeOrigin = () =>
+	getDappOrigin({ isDev: import.meta.env.DEV });
+
+export const getPaymentOrigin = () =>
+	getWalletOrigin({ isDev: import.meta.env.DEV });
+
+export function pageInIframe() {
+	return window.location !== window.parent.location;
+}
+
+/**
+ * Utility function to send a message to the parent window
+ * @param message message to send to the parent window
+ */
+export const sendMessage = (message: string | Record<string, unknown>) => {
 	window.parent.postMessage(
-		{ message },
-		getDappOrigin({ isDev: import.meta.env.DEV }),
+		typeof message === "string" ? { message } : message,
+		getPayeeOrigin(),
 	);
 };
 
diff --git a/apps/wallet/src/pages/index.astro b/apps/wallet/src/pages/index.astro
index f8c5b22..f7eb0f3 100644
--- a/apps/wallet/src/pages/index.astro
+++ b/apps/wallet/src/pages/index.astro
@@ -1,4 +1,5 @@
 ---
+import "../../public/global.css";
 import { UsernameForm } from "../components/forms/username";
 ---
 
@@ -11,20 +12,15 @@ import { UsernameForm } from "../components/forms/username";
 		<meta name="generator" content={Astro.generator} />
 		<title>SPC Wallet</title>
 		<script>
-			{
-				function pageInIframe() {
-					return window.location !== window.parent.location;
-				}
+			import { pageInIframe } from "@/lib/utils";
 
-				if (pageInIframe()) {
-					document.getElementById("heading")!.innerText =
-						"SPC Wallet (in iframe)";
-				} else {
-					const credId = window.localStorage.get("credId");
-					const credentialIdElement = document.getElementById("credential-id");
+			if (pageInIframe())
+				document.getElementById("heading")!.style.display = "none";
+			else {
+				const credId = window.localStorage.get("credId");
+				const credentialIdElement = document.getElementById("credential-id");
 
-					if (credentialIdElement) credentialIdElement.innerText = credId;
-				}
+				if (credentialIdElement) credentialIdElement.innerText = credId;
 			}
 		</script>
 	</head>
@@ -34,4 +30,35 @@ import { UsernameForm } from "../components/forms/username";
 
 		<UsernameForm client:only />
 	</body>
+	<script>
+		import { pageInIframe, getPaymentOrigin, sendMessage } from "@/lib/utils";
+		const paymentOrigin = getPaymentOrigin();
+
+		if (pageInIframe()) {
+			window.addEventListener("message", (e) => {
+				if (e.origin !== paymentOrigin) {
+					return;
+				}
+
+				if (e.data.type === "credentials.get") {
+					console.log("recieved credentials.get message", e.data.message);
+					const credential = window.localStorage.get("credId");
+					console.log("sending available credentials", credential);
+					sendMessage({
+						type: "credentials.get",
+						availableCredentials: [credential],
+					});
+				}
+
+				if (e.data.paid !== undefined) {
+					alert(
+						`Payment ${e.data.paid ? "succeeded" : "failed"}. Credential ${e.data.registered ? "registered" : "not registered"}`,
+					);
+					location.href = "/success";
+				} else {
+					console.log("recieved message", e.data.message);
+				}
+			});
+		}
+	</script>
 </html>

From 404fbc6d51c99e5919fcaef47192cf75182979dc Mon Sep 17 00:00:00 2001
From: Peter Ferguson <peterferguson95@gmail.com>
Date: Sat, 16 Mar 2024 14:35:18 +0000
Subject: [PATCH 03/14] send the credential from the wallet to dapp

---
 .../src/components/create-payment-button.tsx  | 72 +++++++++++--------
 apps/dapp/src/pages/index.astro               |  4 +-
 apps/wallet/src/pages/index.astro             | 13 ++--
 packages/helpers/index.ts                     |  1 +
 packages/helpers/package.json                 |  3 +-
 packages/helpers/validators.ts                | 10 +++
 pnpm-lock.yaml                                |  3 +
 7 files changed, 64 insertions(+), 42 deletions(-)
 create mode 100644 packages/helpers/validators.ts

diff --git a/apps/dapp/src/components/create-payment-button.tsx b/apps/dapp/src/components/create-payment-button.tsx
index eb5fa08..5fa78ac 100644
--- a/apps/dapp/src/components/create-payment-button.tsx
+++ b/apps/dapp/src/components/create-payment-button.tsx
@@ -1,6 +1,10 @@
 import { Button } from "@/components/ui/button";
-import { payWithSPC } from "@/lib/utils";
+import { getPaymentOrigin, payWithSPC } from "@/lib/utils";
 import { WALLET_IFRAME_DIALOG_ID } from "@/lib/constants";
+import {
+	getAllowedCredentialsMessageTypeSchema,
+	getAllowedCredentialsSchema,
+} from "helpers";
 
 const getIframe = () => {
 	const iframeDialog = document.getElementById(
@@ -34,34 +38,45 @@ const getAvailableCredentials = async () => {
 
 	if (!iframe) throw new Error("No iframe found");
 
+	const iframeOrigin = iframe?.src ? new URL(iframe.src).origin : undefined;
+
 	// - Create a Promise that resolves when the expected message is received
-	const createCredentialsPromise = () => {
+	const createCredentialsPromise = (): Promise<string[]> => {
 		let timeout: NodeJS.Timeout | undefined;
 
-		const credentialsPromise = new Promise((resolve, reject) => {
-			// biome-ignore lint/suspicious/noExplicitAny: <explanation>
-			function handleMessage(event: any) {
-				console.log("mesage from iframe", event, iframe?.src);
-
-				if (event.origin !== iframe?.src) return;
-
-				if (event.data.type === "credentials.get") {
-					// Resolve the promise with the data received
-					resolve(event.data);
+		const credentialsPromise: Promise<string[]> = new Promise(
+			(resolve, reject) => {
+				// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+				function handleMessage(event: any) {
+					const eventOrigin = new URL(event.origin).origin;
+					if (eventOrigin !== iframeOrigin) return;
+
+					console.log("received message", event);
+
+					switch (event.data.type) {
+						case "credentials.get": {
+							const parsedMessage = getAllowedCredentialsSchema.parse(
+								event.data,
+							);
+
+							console.log("credentials.get - event.data", parsedMessage);
+							resolve(parsedMessage.credentials);
+						}
+					}
 					// Remove the event listener to clean up
 					window.removeEventListener("message", handleMessage);
 				}
-			}
 
-			// Add an event listener to listen for messages from the iframe
-			window.addEventListener("message", handleMessage, false);
+				// Add an event listener to listen for messages from the iframe
+				window.addEventListener("message", handleMessage, false);
 
-			// Set a timeout to reject the promise if no response is received within a specific timeframe
-			timeout = setTimeout(() => {
-				window.removeEventListener("message", handleMessage);
-				reject(new Error("Timeout waiting for credentials response"));
-			}, 10000); // 10 seconds timeout
-		});
+				// Set a timeout to reject the promise if no response is received within a specific timeframe
+				timeout = setTimeout(() => {
+					window.removeEventListener("message", handleMessage);
+					reject(new Error("Timeout waiting for credentials response"));
+				}, 10000); // 10 seconds timeout
+			},
+		);
 
 		// ! Ensure to clean up on promise resolution or rejection
 		credentialsPromise.finally(() => clearTimeout(timeout));
@@ -69,8 +84,11 @@ const getAvailableCredentials = async () => {
 		return credentialsPromise;
 	};
 
-	// - ask the iframe for the available credentials
-	iframe.contentWindow?.postMessage({ type: "credentials.get" });
+	// - Ask the iframe for the available credentials
+	iframe.contentWindow?.postMessage(
+		{ type: "credentials.get" },
+		getPaymentOrigin(),
+	);
 
 	return await createCredentialsPromise();
 };
@@ -81,13 +99,9 @@ export function CreatePaymentButton() {
 			onClick={async (e) => {
 				e.preventDefault();
 
-				const credentials = await getAvailableCredentials();
-
-				console.log("credentials", credentials);
+				const allowedCredentials = await getAvailableCredentials();
 
-				const allowedCredentials: string[] = [
-					// "l8S4J0LWhvVdabcKL9tJcOApr5Qp44bi3SH88YCTOjQ",
-				];
+				console.log("credentials", allowedCredentials);
 
 				if (!allowedCredentials || allowedCredentials.length === 0) {
 					return fallbackToIframeCredentialCreation();
diff --git a/apps/dapp/src/pages/index.astro b/apps/dapp/src/pages/index.astro
index 52c1ed4..6ba77dd 100644
--- a/apps/dapp/src/pages/index.astro
+++ b/apps/dapp/src/pages/index.astro
@@ -25,9 +25,7 @@ import WalletIframeDialog from "@/components/wallet-iframe-dialog.astro";
 			const paymentOrigin = getPaymentOrigin();
 
 			window.addEventListener("message", (e) => {
-				if (e.origin !== paymentOrigin) {
-					return;
-				}
+				if (e.origin !== paymentOrigin) return;
 				if (e.data.paid !== undefined) {
 					alert(
 						`Payment ${e.data.paid ? "succeeded" : "failed"}. Credential ${e.data.registered ? "registered" : "not registered"}`,
diff --git a/apps/wallet/src/pages/index.astro b/apps/wallet/src/pages/index.astro
index f7eb0f3..fba3b21 100644
--- a/apps/wallet/src/pages/index.astro
+++ b/apps/wallet/src/pages/index.astro
@@ -31,22 +31,17 @@ import { UsernameForm } from "../components/forms/username";
 		<UsernameForm client:only />
 	</body>
 	<script>
-		import { pageInIframe, getPaymentOrigin, sendMessage } from "@/lib/utils";
-		const paymentOrigin = getPaymentOrigin();
+		import { pageInIframe, getPayeeOrigin, sendMessage } from "@/lib/utils";
 
 		if (pageInIframe()) {
 			window.addEventListener("message", (e) => {
-				if (e.origin !== paymentOrigin) {
-					return;
-				}
+				if (e.origin !== getPayeeOrigin()) return;
 
 				if (e.data.type === "credentials.get") {
-					console.log("recieved credentials.get message", e.data.message);
-					const credential = window.localStorage.get("credId");
-					console.log("sending available credentials", credential);
+					const credential = localStorage.getItem("credId");
 					sendMessage({
 						type: "credentials.get",
-						availableCredentials: [credential],
+						credentials: [credential],
 					});
 				}
 
diff --git a/packages/helpers/index.ts b/packages/helpers/index.ts
index 9221316..2e9a164 100644
--- a/packages/helpers/index.ts
+++ b/packages/helpers/index.ts
@@ -1,3 +1,4 @@
 export * from "./base64url";
 export * from "./domains";
 export * from "./is-spc-available";
+export * from "./validators";
diff --git a/packages/helpers/package.json b/packages/helpers/package.json
index 24c921f..7cb87e1 100644
--- a/packages/helpers/package.json
+++ b/packages/helpers/package.json
@@ -10,6 +10,7 @@
 	"author": "",
 	"dependencies": {
 		"@simplewebauthn/server": "^9.0.3",
-		"@hexagon/base64": "^1.1.28"
+		"@hexagon/base64": "^1.1.28",
+		"zod": "^3.22.4"
 	}
 }
\ No newline at end of file
diff --git a/packages/helpers/validators.ts b/packages/helpers/validators.ts
new file mode 100644
index 0000000..605182f
--- /dev/null
+++ b/packages/helpers/validators.ts
@@ -0,0 +1,10 @@
+import { z } from "zod";
+
+export const getAllowedCredentialsMessageTypeSchema = z.enum([
+	"credentials.get",
+]);
+
+export const getAllowedCredentialsSchema = z.object({
+	type: getAllowedCredentialsMessageTypeSchema,
+	credentials: z.array(z.string()),
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1266eeb..3365973 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -152,6 +152,9 @@ importers:
       '@simplewebauthn/server':
         specifier: ^9.0.3
         version: 9.0.3
+      zod:
+        specifier: ^3.22.4
+        version: 3.22.4
 
 packages:
 

From f1dc714a67bfad144847f5d24737cd03213f3c55 Mon Sep 17 00:00:00 2001
From: Peter Ferguson <peterferguson95@gmail.com>
Date: Sat, 16 Mar 2024 14:36:34 +0000
Subject: [PATCH 04/14] remove dead code

---
 apps/wallet/src/pages/index.astro | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/apps/wallet/src/pages/index.astro b/apps/wallet/src/pages/index.astro
index fba3b21..c2c665e 100644
--- a/apps/wallet/src/pages/index.astro
+++ b/apps/wallet/src/pages/index.astro
@@ -16,12 +16,6 @@ import { UsernameForm } from "../components/forms/username";
 
 			if (pageInIframe())
 				document.getElementById("heading")!.style.display = "none";
-			else {
-				const credId = window.localStorage.get("credId");
-				const credentialIdElement = document.getElementById("credential-id");
-
-				if (credentialIdElement) credentialIdElement.innerText = credId;
-			}
 		</script>
 	</head>
 	<body class="flex flex-col items-center justify-center h-screen">

From 780ee1728487bbcf5eeef29d0d1089b808dc7a66 Mon Sep 17 00:00:00 2001
From: Peter Ferguson <peterferguson95@gmail.com>
Date: Sat, 16 Mar 2024 15:09:03 +0000
Subject: [PATCH 05/14] hidden frame on away

---
 .../src/components/create-payment-button.tsx  | 12 ++---------
 .../src/components/wallet-iframe-dialog.astro | 20 ++++++++++++++-----
 apps/dapp/src/env.d.ts                        |  1 +
 apps/wallet/src/env.d.ts                      |  1 +
 apps/wallet/src/pages/index.astro             |  2 +-
 5 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/apps/dapp/src/components/create-payment-button.tsx b/apps/dapp/src/components/create-payment-button.tsx
index 5fa78ac..4a971d4 100644
--- a/apps/dapp/src/components/create-payment-button.tsx
+++ b/apps/dapp/src/components/create-payment-button.tsx
@@ -1,10 +1,7 @@
 import { Button } from "@/components/ui/button";
-import { getPaymentOrigin, payWithSPC } from "@/lib/utils";
 import { WALLET_IFRAME_DIALOG_ID } from "@/lib/constants";
-import {
-	getAllowedCredentialsMessageTypeSchema,
-	getAllowedCredentialsSchema,
-} from "helpers";
+import { getPaymentOrigin, payWithSPC } from "@/lib/utils";
+import { getAllowedCredentialsSchema } from "helpers";
 
 const getIframe = () => {
 	const iframeDialog = document.getElementById(
@@ -25,8 +22,6 @@ const fallbackToIframeCredentialCreation = async () => {
 	iframeDialog?.classList.remove("hidden");
 	iframeDialog?.classList.add("flex");
 
-	console.log("iframeDialog", iframeDialog);
-
 	iframeDialog?.showModal();
 };
 
@@ -59,7 +54,6 @@ const getAvailableCredentials = async () => {
 								event.data,
 							);
 
-							console.log("credentials.get - event.data", parsedMessage);
 							resolve(parsedMessage.credentials);
 						}
 					}
@@ -101,8 +95,6 @@ export function CreatePaymentButton() {
 
 				const allowedCredentials = await getAvailableCredentials();
 
-				console.log("credentials", allowedCredentials);
-
 				if (!allowedCredentials || allowedCredentials.length === 0) {
 					return fallbackToIframeCredentialCreation();
 				}
diff --git a/apps/dapp/src/components/wallet-iframe-dialog.astro b/apps/dapp/src/components/wallet-iframe-dialog.astro
index edd71b9..e4d5b91 100644
--- a/apps/dapp/src/components/wallet-iframe-dialog.astro
+++ b/apps/dapp/src/components/wallet-iframe-dialog.astro
@@ -15,8 +15,10 @@ const paymentOrigin = getPaymentOrigin();
 		"backdrop:transition-opacity backdrop:duration-300",
 	)}
 >
-	<iframe class="h-full w-full" name="iframe" allow={`payment ${paymentOrigin}`}
-	></iframe>
+	<iframe
+		class="min-h-[40vh] border-0 m-0"
+		name="iframe"
+		allow={`payment ${paymentOrigin}`}></iframe>
 </dialog>
 <script>
 	import { WALLET_IFRAME_DIALOG_ID } from "@/lib/constants";
@@ -25,8 +27,16 @@ const paymentOrigin = getPaymentOrigin();
 		WALLET_IFRAME_DIALOG_ID,
 	) as HTMLDialogElement | null;
 
-	const iframe = iframeDialog.querySelector("iframe");
+	// - remove the hidden class to show the iframe if present
+	iframeDialog?.classList.remove("hidden");
 
-	iframe.src = getPaymentOrigin();
-	iframeDialog.addEventListener("click", () => dialog.close());
+	const iframe = iframeDialog?.querySelector("iframe");
+
+	if (iframe) iframe.src = getPaymentOrigin();
+
+	iframeDialog?.addEventListener("click", () => {
+		iframeDialog.close();
+		iframeDialog.removeAttribute("open");
+		iframeDialog.classList.add("hidden");
+	});
 </script>
diff --git a/apps/dapp/src/env.d.ts b/apps/dapp/src/env.d.ts
index f964fe0..acef35f 100644
--- a/apps/dapp/src/env.d.ts
+++ b/apps/dapp/src/env.d.ts
@@ -1 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
diff --git a/apps/wallet/src/env.d.ts b/apps/wallet/src/env.d.ts
index f964fe0..acef35f 100644
--- a/apps/wallet/src/env.d.ts
+++ b/apps/wallet/src/env.d.ts
@@ -1 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
diff --git a/apps/wallet/src/pages/index.astro b/apps/wallet/src/pages/index.astro
index c2c665e..e685e52 100644
--- a/apps/wallet/src/pages/index.astro
+++ b/apps/wallet/src/pages/index.astro
@@ -35,7 +35,7 @@ import { UsernameForm } from "../components/forms/username";
 					const credential = localStorage.getItem("credId");
 					sendMessage({
 						type: "credentials.get",
-						credentials: [credential],
+						credentials: credential ? [credential] : [],
 					});
 				}
 

From a6a4441f6edc33dd2dda19c107026996020b2ce1 Mon Sep 17 00:00:00 2001
From: Peter Ferguson <peterferguson95@gmail.com>
Date: Sat, 16 Mar 2024 16:06:55 +0000
Subject: [PATCH 06/14] [studio] Add GitHub Action

---
 .github/workflows/_studio.yml | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)
 create mode 100644 .github/workflows/_studio.yml

diff --git a/.github/workflows/_studio.yml b/.github/workflows/_studio.yml
new file mode 100644
index 0000000..a1eb508
--- /dev/null
+++ b/.github/workflows/_studio.yml
@@ -0,0 +1,26 @@
+name: Astro Studio
+
+env:
+  ASTRO_STUDIO_APP_TOKEN: ${{secrets.ASTRO_STUDIO_APP_TOKEN }}
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    types: [opened, reopened, synchronize]
+
+jobs:
+  DB:
+    permissions:
+      contents: read
+      actions: read
+      pull-requests: write
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - uses: jaid/action-npm-install@v1.2.1
+      - uses: withastro/action-studio@main

From f9e8c5d324b838a68eaaff99483a27f107571c34 Mon Sep 17 00:00:00 2001
From: Peter Ferguson <peterferguson95@gmail.com>
Date: Sat, 16 Mar 2024 16:30:44 +0000
Subject: [PATCH 07/14] add ssr to wallet

---
 apps/wallet/astro.config.mjs | 11 +++++++++--
 apps/wallet/package.json     |  4 +++-
 pnpm-lock.yaml               |  6 ++++++
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/apps/wallet/astro.config.mjs b/apps/wallet/astro.config.mjs
index 8f01504..5e89efa 100644
--- a/apps/wallet/astro.config.mjs
+++ b/apps/wallet/astro.config.mjs
@@ -1,9 +1,16 @@
 import { defineConfig } from "astro/config";
 import tailwind from "@astrojs/tailwind";
-
 import react from "@astrojs/react";
+import node from "@astrojs/node";
+import db from "@astrojs/db";
 
 // https://astro.build/config
 export default defineConfig({
-	integrations: [tailwind({ applyBaseStyles: false }), react()],
+	output: "server",
+	integrations: [
+		db(),
+		node({ mode: "middleware" }),
+		react(),
+		tailwind({ applyBaseStyles: false }),
+	],
 });
diff --git a/apps/wallet/package.json b/apps/wallet/package.json
index 961b68b..05327d9 100644
--- a/apps/wallet/package.json
+++ b/apps/wallet/package.json
@@ -5,12 +5,14 @@
 	"scripts": {
 		"dev": "astro dev --port 4322 & npx localtunnel --port 4322 -s spc-wallet",
 		"start": "astro dev",
-		"build": "astro check && astro build",
+		"build": "astro build",
 		"preview": "astro preview",
 		"astro": "astro"
 	},
 	"dependencies": {
 		"@astrojs/check": "^0.5.9",
+		"@astrojs/db": "^0.8.6",
+		"@astrojs/node": "^8.2.3",
 		"@astrojs/react": "^3.1.0",
 		"@astrojs/tailwind": "^5.1.0",
 		"@hexagon/base64": "^1.1.28",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3365973..694d15a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -77,6 +77,12 @@ importers:
       '@astrojs/check':
         specifier: ^0.5.9
         version: 0.5.9(typescript@5.4.2)
+      '@astrojs/db':
+        specifier: ^0.8.6
+        version: 0.8.6(@types/react@18.2.66)(react@18.2.0)
+      '@astrojs/node':
+        specifier: ^8.2.3
+        version: 8.2.3(astro@4.5.4)
       '@astrojs/react':
         specifier: ^3.1.0
         version: 3.1.0(@types/react-dom@18.2.22)(@types/react@18.2.66)(react-dom@18.2.0)(react@18.2.0)(vite@5.1.6)

From 699796926ecfc0a4a2b8b5da78dbb2be17ad12cc Mon Sep 17 00:00:00 2001
From: Peter Ferguson <peterferguson95@gmail.com>
Date: Sat, 16 Mar 2024 16:41:12 +0000
Subject: [PATCH 08/14] move wallet to vercel

---
 apps/wallet/astro.config.mjs |   7 +-
 apps/wallet/package.json     |   1 +
 pnpm-lock.yaml               | 580 ++++++++++++++++++++++++++++++++++-
 3 files changed, 585 insertions(+), 3 deletions(-)

diff --git a/apps/wallet/astro.config.mjs b/apps/wallet/astro.config.mjs
index 5e89efa..1803b03 100644
--- a/apps/wallet/astro.config.mjs
+++ b/apps/wallet/astro.config.mjs
@@ -1,7 +1,8 @@
 import { defineConfig } from "astro/config";
 import tailwind from "@astrojs/tailwind";
 import react from "@astrojs/react";
-import node from "@astrojs/node";
+import vercel from "@astrojs/vercel/serverless";
+// import node from "@astrojs/node";
 import db from "@astrojs/db";
 
 // https://astro.build/config
@@ -9,8 +10,10 @@ export default defineConfig({
 	output: "server",
 	integrations: [
 		db(),
-		node({ mode: "middleware" }),
 		react(),
 		tailwind({ applyBaseStyles: false }),
+		// ! deploying to firebase with ssr not working ¯\_(ツ)_/¯
+		// node({ mode: "middleware" }),
 	],
+	adapter: vercel(),
 });
diff --git a/apps/wallet/package.json b/apps/wallet/package.json
index 05327d9..f4465e5 100644
--- a/apps/wallet/package.json
+++ b/apps/wallet/package.json
@@ -15,6 +15,7 @@
 		"@astrojs/node": "^8.2.3",
 		"@astrojs/react": "^3.1.0",
 		"@astrojs/tailwind": "^5.1.0",
+		"@astrojs/vercel": "^7.3.6",
 		"@hexagon/base64": "^1.1.28",
 		"@hookform/resolvers": "^3.3.4",
 		"@radix-ui/react-label": "^2.0.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 694d15a..813f865 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -89,6 +89,9 @@ importers:
       '@astrojs/tailwind':
         specifier: ^5.1.0
         version: 5.1.0(astro@4.5.4)(tailwindcss@3.4.1)
+      '@astrojs/vercel':
+        specifier: ^7.3.6
+        version: 7.3.6(astro@4.5.4)(react@18.2.0)
       '@hexagon/base64':
         specifier: ^1.1.28
         version: 1.1.28
@@ -207,6 +210,48 @@ packages:
     resolution: {integrity: sha512-XpC8MAaWjD1ff6/IfkRq/5k1EFj6zhCNqXRd5J43SVJEBj/Bsmizkm8N0xOYscGcDFQkRgEw6/eKnI5x/1l6aA==}
     dev: false
 
+  /@astrojs/db@0.8.6(@types/react@18.2.66)(react@18.2.0):
+    resolution: {integrity: sha512-iJ4EmOtGZKjblBj66RvxE+9yyhJ/0i0mhngPK4O8O82zAnAasATkATEoH2DjoxaiIQq3O9snZg8tDpy/cec5Lw==}
+    dependencies:
+      '@libsql/client': 0.5.6
+      async-listen: 3.0.1
+      deep-diff: 1.0.2
+      drizzle-orm: 0.29.5(@libsql/client@0.5.6)(@types/react@18.2.66)(react@18.2.0)
+      kleur: 4.1.5
+      nanoid: 5.0.6
+      open: 10.1.0
+      ora: 7.0.1
+      prompts: 2.4.2
+      strip-ansi: 7.1.0
+      yargs-parser: 21.1.1
+      zod: 3.22.4
+    transitivePeerDependencies:
+      - '@aws-sdk/client-rds-data'
+      - '@cloudflare/workers-types'
+      - '@neondatabase/serverless'
+      - '@opentelemetry/api'
+      - '@planetscale/database'
+      - '@types/better-sqlite3'
+      - '@types/pg'
+      - '@types/react'
+      - '@types/sql.js'
+      - '@vercel/postgres'
+      - better-sqlite3
+      - bufferutil
+      - bun-types
+      - encoding
+      - expo-sqlite
+      - knex
+      - kysely
+      - mysql2
+      - pg
+      - postgres
+      - react
+      - sql.js
+      - sqlite3
+      - utf-8-validate
+    dev: false
+
   /@astrojs/internal-helpers@0.3.0:
     resolution: {integrity: sha512-tGmHvrhpzuz0JBHaJX8GywN9g4rldVNHtkoVDC3m/DdzBO70jGoVuc0uuNVglRYnsdwkbG0K02Iw3nOOR3/Y4g==}
     dev: false
@@ -337,6 +382,26 @@ packages:
       - supports-color
     dev: false
 
+  /@astrojs/vercel@7.3.6(astro@4.5.4)(react@18.2.0):
+    resolution: {integrity: sha512-dQj3cvTOsgOj/V8EVya16X1L3PCJ9aw0rWCggsFcERI72qEDXctd7l+K/iZC1dOvsM3k6VhwiacwsETowsctAA==}
+    peerDependencies:
+      astro: ^4.2.0
+    dependencies:
+      '@astrojs/internal-helpers': 0.3.0
+      '@vercel/analytics': 1.2.2(react@18.2.0)
+      '@vercel/nft': 0.26.4
+      astro: 4.5.4(typescript@5.4.2)
+      esbuild: 0.19.12
+      fast-glob: 3.3.2
+      set-cookie-parser: 2.6.0
+      web-vitals: 3.5.2
+    transitivePeerDependencies:
+      - encoding
+      - next
+      - react
+      - supports-color
+    dev: false
+
   /@babel/code-frame@7.23.5:
     resolution: {integrity: sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==}
     engines: {node: '>=6.9.0'}
@@ -1059,6 +1124,135 @@ packages:
     resolution: {integrity: sha512-f5CnPw997Y2GQ8FAvtuVVC19FX8mwNNC+1XJcIi16n/LTJifKO6QBgGLgN3YEmqtGMk17SKSuoWES3imJVxAVw==}
     dev: false
 
+  /@libsql/client@0.5.6:
+    resolution: {integrity: sha512-UBjmDoxz75Z2sHdP+ETCROpeLA/77VMesiff8R4UWK1rnaWbh6/YoCLDILMJL3Rh0udQeKxjL8MjXthqohax+g==}
+    dependencies:
+      '@libsql/core': 0.5.6
+      '@libsql/hrana-client': 0.5.6
+      js-base64: 3.7.7
+      libsql: 0.3.10
+    transitivePeerDependencies:
+      - bufferutil
+      - encoding
+      - utf-8-validate
+    dev: false
+
+  /@libsql/core@0.5.6:
+    resolution: {integrity: sha512-3vicUAydq6jPth410n4AsHHm1n2psTwvkSf94nfJlSXutGSZsl0updn2N/mJBgqUHkbuFoWZtlMifF0SwBj1xQ==}
+    dependencies:
+      js-base64: 3.7.7
+    dev: false
+
+  /@libsql/darwin-arm64@0.3.10:
+    resolution: {integrity: sha512-RaexEFfPAFogd6dJlqkpCkTxdr6K14Z0286lodIJ8Ny77mWuWyBkWKxf70OYWXXAMxMJFUW+6al1F3/Osf/pTg==}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@libsql/darwin-x64@0.3.10:
+    resolution: {integrity: sha512-SNVN6n4qNUdMW1fJMFmx4qn4n5RnXsxjFbczpkzG/V7m/5VeTFt1chhGcrahTHCr3+K6eRJWJUEQHRGqjBwPkw==}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@libsql/hrana-client@0.5.6:
+    resolution: {integrity: sha512-mjQoAmejZ1atG+M3YR2ZW+rg6ceBByH/S/h17ZoYZkqbWrvohFhXyz2LFxj++ARMoY9m6w3RJJIRdJdmnEUlFg==}
+    dependencies:
+      '@libsql/isomorphic-fetch': 0.1.12
+      '@libsql/isomorphic-ws': 0.1.5
+      js-base64: 3.7.7
+      node-fetch: 3.3.2
+    transitivePeerDependencies:
+      - bufferutil
+      - encoding
+      - utf-8-validate
+    dev: false
+
+  /@libsql/isomorphic-fetch@0.1.12:
+    resolution: {integrity: sha512-MRo4UcmjAGAa3ac56LoD5OE13m2p0lu0VEtZC2NZMcogM/jc5fU9YtMQ3qbPjFJ+u2BBjFZgMPkQaLS1dlMhpg==}
+    dependencies:
+      '@types/node-fetch': 2.6.11
+      node-fetch: 2.7.0
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
+  /@libsql/isomorphic-ws@0.1.5:
+    resolution: {integrity: sha512-DtLWIH29onUYR00i0GlQ3UdcTRC6EP4u9w/h9LxpUZJWRMARk6dQwZ6Jkd+QdwVpuAOrdxt18v0K2uIYR3fwFg==}
+    dependencies:
+      '@types/ws': 8.5.10
+      ws: 8.16.0
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+    dev: false
+
+  /@libsql/linux-arm64-gnu@0.3.10:
+    resolution: {integrity: sha512-2uXpi9d8qtyIOr7pyG4a88j6YXgemyIHEs2Wbp+PPletlCIPsFS+E7IQHbz8VwTohchOzcokGUm1Bc5QC+A7wg==}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@libsql/linux-arm64-musl@0.3.10:
+    resolution: {integrity: sha512-72SN1FUavLvzHddCS861ynSpQndcW5oLGKA3U8CyMfgIZIwJAPc7+48Uj1plW00htXBx4GBpcntFp68KKIx3YQ==}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@libsql/linux-x64-gnu@0.3.10:
+    resolution: {integrity: sha512-hXyNqVRi7ONuyWZ1SX6setxL0QaQ7InyS3bHLupsi9s7NpOGD5vcpTaYicJOqmIIm+6kt8vJfmo7ZxlarIHy7Q==}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@libsql/linux-x64-musl@0.3.10:
+    resolution: {integrity: sha512-kNmIRxomVwt9S+cLyYS497F/3gXFF4r8wW12YSBQgxG75JYft07AHVd8J7HINg+oqRkLzT0s+mVX5dM6nk68EQ==}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@libsql/win32-x64-msvc@0.3.10:
+    resolution: {integrity: sha512-c/6rjdtGULKrJkLgfLobFefObfOtxjXGmCfPxv6pr0epPCeUEssfDbDIeEH9fQUgzogIMWEHwT8so52UJ/iT1Q==}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: false
+    optional: true
+
+  /@mapbox/node-pre-gyp@1.0.11:
+    resolution: {integrity: sha512-Yhlar6v9WQgUp/He7BdgzOz8lqMQ8sU+jkCq7Wx8Myc5YFJLbEe7lgui/V7G1qB1DJykHSGwreceSaD60Y0PUQ==}
+    hasBin: true
+    dependencies:
+      detect-libc: 2.0.2
+      https-proxy-agent: 5.0.1
+      make-dir: 3.1.0
+      node-fetch: 2.7.0
+      nopt: 5.0.0
+      npmlog: 5.0.1
+      rimraf: 3.0.2
+      semver: 7.6.0
+      tar: 6.2.0
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+    dev: false
+
+  /@neon-rs/load@0.0.4:
+    resolution: {integrity: sha512-kTPhdZyTQxB+2wpiRcFWrDcejc4JI6tkPuS7UZCG4l6Zvc5kU/gGQ/ozvHTh1XR5tS+UlfAfGuPajjzQjCiHCw==}
+    dev: false
+
   /@nodelib/fs.scandir@2.1.5:
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -1300,6 +1494,14 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@rollup/pluginutils@4.2.1:
+    resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
+    engines: {node: '>= 8.0.0'}
+    dependencies:
+      estree-walker: 2.0.2
+      picomatch: 2.3.1
+    dev: false
+
   /@rollup/rollup-android-arm-eabi@4.13.0:
     resolution: {integrity: sha512-5ZYPOuaAqEH/W3gYsRkxQATBW3Ii1MfaT4EQstTnLKViLi2gLSQmlmtTpGucNP3sXEpOiI5tdGhjdE111ekyEg==}
     cpu: [arm]
@@ -1534,6 +1736,13 @@ packages:
       '@types/unist': 2.0.10
     dev: false
 
+  /@types/node-fetch@2.6.11:
+    resolution: {integrity: sha512-24xFj9R5+rfQJLRyM56qh+wnVSYhyXC2tkoBndtY0U+vubqNsYXGjufB2nn8Q6gt0LrARwL6UBtMCSVCwl4B1g==}
+    dependencies:
+      '@types/node': 20.11.28
+      form-data: 4.0.0
+    dev: false
+
   /@types/node@20.11.28:
     resolution: {integrity: sha512-M/GPWVS2wLkSkNHVeLkrF2fD5Lx5UC4PxA0uZcKc6QqbIQUJyW1jVjueJYi1z8n0I5PxYrtpnPnWglE+y9A0KA==}
     dependencies:
@@ -1581,10 +1790,53 @@ packages:
     resolution: {integrity: sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ==}
     dev: false
 
+  /@types/ws@8.5.10:
+    resolution: {integrity: sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A==}
+    dependencies:
+      '@types/node': 20.11.28
+    dev: false
+
   /@ungap/structured-clone@1.2.0:
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
     dev: false
 
+  /@vercel/analytics@1.2.2(react@18.2.0):
+    resolution: {integrity: sha512-X0rctVWkQV1e5Y300ehVNqpOfSOufo7ieA5PIdna8yX/U7Vjz0GFsGf4qvAhxV02uQ2CVt7GYcrFfddXXK2Y4A==}
+    peerDependencies:
+      next: '>= 13'
+      react: ^18 || ^19
+    peerDependenciesMeta:
+      next:
+        optional: true
+      react:
+        optional: true
+    dependencies:
+      react: 18.2.0
+      server-only: 0.0.1
+    dev: false
+
+  /@vercel/nft@0.26.4:
+    resolution: {integrity: sha512-j4jCOOXke2t8cHZCIxu1dzKLHLcFmYzC3yqAK6MfZznOL1QIJKd0xcFsXK3zcqzU7ScsE2zWkiMMNHGMHgp+FA==}
+    engines: {node: '>=16'}
+    hasBin: true
+    dependencies:
+      '@mapbox/node-pre-gyp': 1.0.11
+      '@rollup/pluginutils': 4.2.1
+      acorn: 8.11.3
+      acorn-import-attributes: 1.9.2(acorn@8.11.3)
+      async-sema: 3.1.1
+      bindings: 1.5.0
+      estree-walker: 2.0.2
+      glob: 7.2.3
+      graceful-fs: 4.2.11
+      micromatch: 4.0.5
+      node-gyp-build: 4.8.0
+      resolve-from: 5.0.0
+    transitivePeerDependencies:
+      - encoding
+      - supports-color
+    dev: false
+
   /@vitejs/plugin-react@4.2.1(vite@5.1.6):
     resolution: {integrity: sha512-oojO9IDc4nCUUi8qIR11KoQm0XFFLIwsRBwHRR4d/88IWghn1y6ckz/bJ8GHDCsYEJee8mDzqtJxh15/cisJNQ==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -1683,6 +1935,10 @@ packages:
     resolution: {integrity: sha512-KYSIHVmslkaCDyw013pphY+d7x1qV8IZupYfeIfzNA+nsaWHbn5uPuQRvdRFsa9zFzGeudPuoGoZ1Op4jrJXIQ==}
     dev: false
 
+  /abbrev@1.1.1:
+    resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
+    dev: false
+
   /abbrev@2.0.0:
     resolution: {integrity: sha512-6/mh1E2u2YgEsCHdY0Yx5oW+61gZU+1vXaoiHHrpKeuRNNgFvS+/jrwHiQhB5apAf5oB7UB7E19ol2R2LKH8hQ==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
@@ -1705,6 +1961,14 @@ packages:
       negotiator: 0.6.3
     dev: false
 
+  /acorn-import-attributes@1.9.2(acorn@8.11.3):
+    resolution: {integrity: sha512-O+nfJwNolEA771IYJaiLWK1UAwjNsQmZbTRqqwBYxCgVQTmpFEMvBw6LOIQV0Me339L5UMVYFyRohGnGlQDdIQ==}
+    peerDependencies:
+      acorn: ^8
+    dependencies:
+      acorn: 8.11.3
+    dev: false
+
   /acorn-jsx@5.3.2(acorn@8.11.3):
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
@@ -1841,6 +2105,10 @@ packages:
       picomatch: 2.3.1
     dev: false
 
+  /aproba@2.0.0:
+    resolution: {integrity: sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==}
+    dev: false
+
   /archiver-utils@2.1.0:
     resolution: {integrity: sha512-bEL/yUb/fNNiNTuUz979Z0Yg5L+LzLxGJz8x79lYmR54fmTIb6ob/hNQgkQnIUDWIFjZVQwl9Xs356I6BAMHfw==}
     engines: {node: '>= 6'}
@@ -1886,6 +2154,14 @@ packages:
       zip-stream: 4.1.1
     dev: false
 
+  /are-we-there-yet@2.0.0:
+    resolution: {integrity: sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==}
+    engines: {node: '>=10'}
+    dependencies:
+      delegates: 1.0.0
+      readable-stream: 3.6.2
+    dev: false
+
   /arg@5.0.2:
     resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
     dev: false
@@ -2024,10 +2300,19 @@ packages:
       - typescript
     dev: false
 
+  /async-listen@3.0.1:
+    resolution: {integrity: sha512-cWMaNwUJnf37C/S5TfCkk/15MwbPRwVYALA2jtjkbHjCmAPiDXyNJy2q3p1KAZzDLHAWyarUWSujUoHR4pEgrA==}
+    engines: {node: '>= 14'}
+    dev: false
+
   /async-lock@1.3.2:
     resolution: {integrity: sha512-phnXdS3RP7PPcmP6NWWzWMU0sLTeyvtZCxBPpZdkYE3seGLKSQZs9FrmVO/qwypq98FUtWWUEYxziLkdGk5nnA==}
     dev: false
 
+  /async-sema@3.1.1:
+    resolution: {integrity: sha512-tLRNUXati5MFePdAk8dw7Qt7DpxPB60ofAgn8WRhW6a2rcimZnYBP9oxHiv0OHy+Wz7kPMG+t4LGdt31+4EmGg==}
+    dev: false
+
   /async@2.6.4:
     resolution: {integrity: sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==}
     dependencies:
@@ -2142,6 +2427,12 @@ packages:
     engines: {node: '>=8'}
     dev: false
 
+  /bindings@1.5.0:
+    resolution: {integrity: sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==}
+    dependencies:
+      file-uri-to-path: 1.0.0
+    dev: false
+
   /bl@4.1.0:
     resolution: {integrity: sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==}
     requiresBuild: true
@@ -2265,6 +2556,13 @@ packages:
       ieee754: 1.2.1
     dev: false
 
+  /bundle-name@4.1.0:
+    resolution: {integrity: sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==}
+    engines: {node: '>=18'}
+    dependencies:
+      run-applescript: 7.0.0
+    dev: false
+
   /bytes@3.0.0:
     resolution: {integrity: sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==}
     engines: {node: '>= 0.8'}
@@ -2550,6 +2848,11 @@ packages:
       simple-swizzle: 0.2.2
     dev: false
 
+  /color-support@1.1.3:
+    resolution: {integrity: sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==}
+    hasBin: true
+    dev: false
+
   /color@3.2.1:
     resolution: {integrity: sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==}
     dependencies:
@@ -2675,6 +2978,10 @@ packages:
       - supports-color
     dev: false
 
+  /console-control-strings@1.1.0:
+    resolution: {integrity: sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==}
+    dev: false
+
   /content-disposition@0.5.4:
     resolution: {integrity: sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==}
     engines: {node: '>= 0.6'}
@@ -2786,6 +3093,11 @@ packages:
     resolution: {integrity: sha512-erCk7tyU3yLWAhk6wvKxnyPtftuy/6Ak622gOO7BCJ05+TYffnPCJF905wmOQm+BpkX54OdAl8pveJwUdpnCXQ==}
     dev: false
 
+  /data-uri-to-buffer@4.0.1:
+    resolution: {integrity: sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==}
+    engines: {node: '>= 12'}
+    dev: false
+
   /data-uri-to-buffer@6.0.2:
     resolution: {integrity: sha512-7hvf7/GW8e86rW0ptuwS3OcBGDjIi6SZva7hCyWC0yYry2cOPmLIjXAUHI6DK2HsnwJd9ifmt57i8eV2n4YNpw==}
     engines: {node: '>= 14'}
@@ -2852,6 +3164,10 @@ packages:
     dev: false
     optional: true
 
+  /deep-diff@1.0.2:
+    resolution: {integrity: sha512-aWS3UIVH+NPGCD1kki+DCU9Dua032iSsO43LqQpcs4R3+dVv7tX0qBGjiVHJHjplsoUM2XRO/KB92glqc68awg==}
+    dev: false
+
   /deep-equal-in-any-order@2.0.6:
     resolution: {integrity: sha512-RfnWHQzph10YrUjvWwhd15Dne8ciSJcZ3U6OD7owPwiVwsdE5IFSoZGg8rlwJD11ES+9H5y8j3fCofviRHOqLQ==}
     dependencies:
@@ -2873,6 +3189,19 @@ packages:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
     dev: false
 
+  /default-browser-id@5.0.0:
+    resolution: {integrity: sha512-A6p/pu/6fyBcA1TRz/GqWYPViplrftcW2gZC9q79ngNCKAeR/X3gcEdXQHl4KNXV+3wgIJ1CPkJQ3IHM6lcsyA==}
+    engines: {node: '>=18'}
+    dev: false
+
+  /default-browser@5.2.1:
+    resolution: {integrity: sha512-WY/3TUME0x3KPYdRRxEJJvXRHV4PyPoUsxtZa78lwItwRQRHhd2U9xOscaT/YTf8uCXIAjeJOFBVEh/7FtD8Xg==}
+    engines: {node: '>=18'}
+    dependencies:
+      bundle-name: 4.1.0
+      default-browser-id: 5.0.0
+    dev: false
+
   /defaults@1.0.4:
     resolution: {integrity: sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==}
     dependencies:
@@ -2888,6 +3217,11 @@ packages:
       gopd: 1.0.1
     dev: false
 
+  /define-lazy-prop@3.0.0:
+    resolution: {integrity: sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==}
+    engines: {node: '>=12'}
+    dev: false
+
   /degenerator@5.0.1:
     resolution: {integrity: sha512-TllpMR/t0M5sqCXfj85i4XaAzxmS5tVA16dqvdkMwGmzI+dXLXnw3J+3Vdv7VKw+ThlTMboK6i9rnZ6Nntj5CQ==}
     engines: {node: '>= 14'}
@@ -2902,6 +3236,10 @@ packages:
     engines: {node: '>=0.4.0'}
     dev: false
 
+  /delegates@1.0.0:
+    resolution: {integrity: sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==}
+    dev: false
+
   /depd@2.0.0:
     resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==}
     engines: {node: '>= 0.8'}
@@ -2922,7 +3260,6 @@ packages:
     engines: {node: '>=8'}
     requiresBuild: true
     dev: false
-    optional: true
 
   /deterministic-object-hash@2.0.2:
     resolution: {integrity: sha512-KxektNH63SrbfUyDiwXqRb1rLwKt33AmMv+5Nhsw1kqZ13SJBRTgZHtGbE+hH3a1mVW1cz+4pqSWVPAtLVXTzQ==}
@@ -2961,6 +3298,82 @@ packages:
       is-obj: 2.0.0
     dev: false
 
+  /drizzle-orm@0.29.5(@libsql/client@0.5.6)(@types/react@18.2.66)(react@18.2.0):
+    resolution: {integrity: sha512-jS3+uyzTz4P0Y2CICx8FmRQ1eplURPaIMWDn/yq6k4ShRFj9V7vlJk67lSf2kyYPzQ60GkkNGXcJcwrxZ6QCRw==}
+    peerDependencies:
+      '@aws-sdk/client-rds-data': '>=3'
+      '@cloudflare/workers-types': '>=3'
+      '@libsql/client': '*'
+      '@neondatabase/serverless': '>=0.1'
+      '@opentelemetry/api': ^1.4.1
+      '@planetscale/database': '>=1'
+      '@types/better-sqlite3': '*'
+      '@types/pg': '*'
+      '@types/react': '>=18'
+      '@types/sql.js': '*'
+      '@vercel/postgres': '*'
+      better-sqlite3: '>=7'
+      bun-types: '*'
+      expo-sqlite: '>=13.2.0'
+      knex: '*'
+      kysely: '*'
+      mysql2: '>=2'
+      pg: '>=8'
+      postgres: '>=3'
+      react: '>=18'
+      sql.js: '>=1'
+      sqlite3: '>=5'
+    peerDependenciesMeta:
+      '@aws-sdk/client-rds-data':
+        optional: true
+      '@cloudflare/workers-types':
+        optional: true
+      '@libsql/client':
+        optional: true
+      '@neondatabase/serverless':
+        optional: true
+      '@opentelemetry/api':
+        optional: true
+      '@planetscale/database':
+        optional: true
+      '@types/better-sqlite3':
+        optional: true
+      '@types/pg':
+        optional: true
+      '@types/react':
+        optional: true
+      '@types/sql.js':
+        optional: true
+      '@vercel/postgres':
+        optional: true
+      better-sqlite3:
+        optional: true
+      bun-types:
+        optional: true
+      expo-sqlite:
+        optional: true
+      knex:
+        optional: true
+      kysely:
+        optional: true
+      mysql2:
+        optional: true
+      pg:
+        optional: true
+      postgres:
+        optional: true
+      react:
+        optional: true
+      sql.js:
+        optional: true
+      sqlite3:
+        optional: true
+    dependencies:
+      '@libsql/client': 0.5.6
+      '@types/react': 18.2.66
+      react: 18.2.0
+    dev: false
+
   /dset@3.1.3:
     resolution: {integrity: sha512-20TuZZHCEZ2O71q9/+8BwKwZ0QtD9D8ObhrihJPr+vLLYlSuAU3/zL4cSlgbfeoGHTjCSJBa7NGcrF9/Bx/WJQ==}
     engines: {node: '>=4'}
@@ -3189,6 +3602,10 @@ packages:
     engines: {node: '>=4.0'}
     dev: false
 
+  /estree-walker@2.0.2:
+    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
+    dev: false
+
   /estree-walker@3.0.3:
     resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
     dependencies:
@@ -3388,6 +3805,14 @@ packages:
     resolution: {integrity: sha512-OP2IUU6HeYKJi3i0z4A19kHMQoLVs4Hc+DPqqxI2h/DPZHTm/vjsfC6P0b4jCMy14XizLBqvndQ+UilD7707Jw==}
     dev: false
 
+  /fetch-blob@3.2.0:
+    resolution: {integrity: sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==}
+    engines: {node: ^12.20 || >= 14.13}
+    dependencies:
+      node-domexception: 1.0.0
+      web-streams-polyfill: 3.3.3
+    dev: false
+
   /figures@3.2.0:
     resolution: {integrity: sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==}
     engines: {node: '>=8'}
@@ -3395,6 +3820,10 @@ packages:
       escape-string-regexp: 1.0.5
     dev: false
 
+  /file-uri-to-path@1.0.0:
+    resolution: {integrity: sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==}
+    dev: false
+
   /filesize@6.4.0:
     resolution: {integrity: sha512-mjFIpOHC4jbfcTfoh4rkWpI31mF7viw9ikj/JyLoKzqlwG/YsefKfvYlYhdYdg/9mtK2z1AzgN/0LvVQ3zdlSQ==}
     engines: {node: '>= 0.4.0'}
@@ -3561,6 +3990,13 @@ packages:
       mime-types: 2.1.35
     dev: false
 
+  /formdata-polyfill@4.0.10:
+    resolution: {integrity: sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==}
+    engines: {node: '>=12.20.0'}
+    dependencies:
+      fetch-blob: 3.2.0
+    dev: false
+
   /forwarded@0.2.0:
     resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
     engines: {node: '>= 0.6'}
@@ -3635,6 +4071,21 @@ packages:
     engines: {node: '>= 0.6.0'}
     dev: false
 
+  /gauge@3.0.2:
+    resolution: {integrity: sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==}
+    engines: {node: '>=10'}
+    dependencies:
+      aproba: 2.0.0
+      color-support: 1.1.3
+      console-control-strings: 1.1.0
+      has-unicode: 2.0.1
+      object-assign: 4.1.1
+      signal-exit: 3.0.7
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wide-align: 1.1.5
+    dev: false
+
   /gaxios@4.3.3:
     resolution: {integrity: sha512-gSaYYIO1Y3wUtdfHmjDUZ8LWaxJQpiavzbF5Kq53akSzvmVg0RfyOcFDbO1KJ/KCGRFz2qG+lS81F0nkr7cRJA==}
     engines: {node: '>=10'}
@@ -3961,6 +4412,10 @@ packages:
     engines: {node: '>= 0.4'}
     dev: false
 
+  /has-unicode@2.0.1:
+    resolution: {integrity: sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==}
+    dev: false
+
   /has-yarn@2.1.0:
     resolution: {integrity: sha512-UqBRqi4ju7T+TqGNdqAO0PaSVGsDGJUBQvk9eUWNGRY1CFGDzYhLWoM7JQEemnlvVcv/YEmc2wNW8BC24EnUsw==}
     engines: {node: '>=8'}
@@ -4498,6 +4953,10 @@ packages:
       valid-url: 1.0.9
     dev: false
 
+  /js-base64@3.7.7:
+    resolution: {integrity: sha512-7rCnleh0z2CkXhH67J8K1Ytz0b2Y+yxTPL+/KOJoa20hfnVQ/3/T6W/KflYI4bRHRagNeXeU2bkNGI3v1oS/lw==}
+    dev: false
+
   /js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
     dev: false
@@ -4698,6 +5157,23 @@ packages:
     resolution: {integrity: sha512-mK8ju0fnrKXXfleL53vtp9xiPq5hKM0zbDQtcxQIsSmxNgSxqCj6R7Hl9PkrNe2j29T4yoDaF7DJLK9/i5iWUw==}
     dev: false
 
+  /libsql@0.3.10:
+    resolution: {integrity: sha512-/8YMTbwWFPmrDWY+YFK3kYqVPFkMgQre0DGmBaOmjogMdSe+7GHm1/q9AZ61AWkEub/vHmi+bA4tqIzVhKnqzg==}
+    cpu: [x64, arm64, wasm32]
+    os: [darwin, linux, win32]
+    dependencies:
+      '@neon-rs/load': 0.0.4
+      detect-libc: 2.0.2
+    optionalDependencies:
+      '@libsql/darwin-arm64': 0.3.10
+      '@libsql/darwin-x64': 0.3.10
+      '@libsql/linux-arm64-gnu': 0.3.10
+      '@libsql/linux-arm64-musl': 0.3.10
+      '@libsql/linux-x64-gnu': 0.3.10
+      '@libsql/linux-x64-musl': 0.3.10
+      '@libsql/win32-x64-msvc': 0.3.10
+    dev: false
+
   /lilconfig@2.1.0:
     resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
     engines: {node: '>=10'}
@@ -5622,6 +6098,12 @@ packages:
     hasBin: true
     dev: false
 
+  /nanoid@5.0.6:
+    resolution: {integrity: sha512-rRq0eMHoGZxlvaFOUdK1Ev83Bd1IgzzR+WJ3IbDJ7QOSdAxYjlurSPqFs9s4lJg29RT6nPwizFtJhQS6V5xgiA==}
+    engines: {node: ^18 || >=20}
+    hasBin: true
+    dev: false
+
   /napi-build-utils@1.0.2:
     resolution: {integrity: sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==}
     requiresBuild: true
@@ -5663,6 +6145,11 @@ packages:
     dev: false
     optional: true
 
+  /node-domexception@1.0.0:
+    resolution: {integrity: sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==}
+    engines: {node: '>=10.5.0'}
+    dev: false
+
   /node-emoji@1.11.0:
     resolution: {integrity: sha512-wo2DpQkQp7Sjm2A0cq+sN7EHKO6Sl0ctXeBdFZrL9T9+UywORbufTcTZxom8YqpLQt/FqNMUkOpkZrJVYSKD3A==}
     dependencies:
@@ -5681,11 +6168,25 @@ packages:
       whatwg-url: 5.0.0
     dev: false
 
+  /node-fetch@3.3.2:
+    resolution: {integrity: sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dependencies:
+      data-uri-to-buffer: 4.0.1
+      fetch-blob: 3.2.0
+      formdata-polyfill: 4.0.10
+    dev: false
+
   /node-forge@1.3.1:
     resolution: {integrity: sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==}
     engines: {node: '>= 6.13.0'}
     dev: false
 
+  /node-gyp-build@4.8.0:
+    resolution: {integrity: sha512-u6fs2AEUljNho3EYTJNBfImO5QTo/J/1Etd+NVdCj7qWKUSN/bSLkZwhDv7I+w/MSC6qJ4cknepkAYykDdK8og==}
+    hasBin: true
+    dev: false
+
   /node-gyp@10.0.1:
     resolution: {integrity: sha512-gg3/bHehQfZivQVfqIyy8wTdSymF9yTyP4CJifK73imyNMU8AIGQE2pUa7dNWfmMeG9cDVF2eehiRMv0LC1iAg==}
     engines: {node: ^16.14.0 || >=18.0.0}
@@ -5711,6 +6212,14 @@ packages:
     resolution: {integrity: sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==}
     dev: false
 
+  /nopt@5.0.0:
+    resolution: {integrity: sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==}
+    engines: {node: '>=6'}
+    hasBin: true
+    dependencies:
+      abbrev: 1.1.1
+    dev: false
+
   /nopt@7.2.0:
     resolution: {integrity: sha512-CVDtwCdhYIvnAzFoJ6NJ6dX3oga9/HyciQDnG1vQDjSLMeKLJ4A93ZqYKDrgYSr1FBY5/hMYC+2VCi24pgpkGA==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
@@ -5738,6 +6247,15 @@ packages:
       path-key: 4.0.0
     dev: false
 
+  /npmlog@5.0.1:
+    resolution: {integrity: sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==}
+    dependencies:
+      are-we-there-yet: 2.0.0
+      console-control-strings: 1.1.0
+      gauge: 3.0.2
+      set-blocking: 2.0.0
+    dev: false
+
   /object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
@@ -5798,6 +6316,16 @@ packages:
       mimic-fn: 4.0.0
     dev: false
 
+  /open@10.1.0:
+    resolution: {integrity: sha512-mnkeQ1qP5Ue2wd+aivTD3NHd/lZ96Lu0jgf0pwktLPtx6cTZiH7tyeGRRHs0zX0rbrahXPnXlUnbeXyaBBuIaw==}
+    engines: {node: '>=18'}
+    dependencies:
+      default-browser: 5.2.1
+      define-lazy-prop: 3.0.0
+      is-inside-container: 1.0.0
+      is-wsl: 3.1.0
+    dev: false
+
   /open@6.4.0:
     resolution: {integrity: sha512-IFenVPgF70fSm1keSd2iDBIDIBZkroLeuffXq+wKTzTJlBpesFWojV9lb8mzOfaAzM1sr7HQHuO0vtV0zYekGg==}
     engines: {node: '>=8'}
@@ -6593,6 +7121,11 @@ packages:
       lodash: 4.17.21
     dev: false
 
+  /resolve-from@5.0.0:
+    resolution: {integrity: sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==}
+    engines: {node: '>=8'}
+    dev: false
+
   /resolve@1.22.8:
     resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==}
     hasBin: true
@@ -6725,6 +7258,11 @@ packages:
       - supports-color
     dev: false
 
+  /run-applescript@7.0.0:
+    resolution: {integrity: sha512-9by4Ij99JUr/MCFBUkDKLWK3G9HVXmabKz9U5MlIAIuvuzkiOicRYs8XJLxX+xahD+mLiiCYDqF9dKAgtzKP1A==}
+    engines: {node: '>=18'}
+    dev: false
+
   /run-async@2.4.1:
     resolution: {integrity: sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==}
     engines: {node: '>=0.12.0'}
@@ -6835,6 +7373,18 @@ packages:
     resolution: {integrity: sha512-rb+9B5YBIEzYcD6x2VKidaa+cqYBJQKnU4oe4E3ANwRRN56yk/ua1YCJT1n21NTS8w6CcOclAKNP3PhdCXKYtQ==}
     dev: false
 
+  /server-only@0.0.1:
+    resolution: {integrity: sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA==}
+    dev: false
+
+  /set-blocking@2.0.0:
+    resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
+    dev: false
+
+  /set-cookie-parser@2.6.0:
+    resolution: {integrity: sha512-RVnVQxTXuerk653XfuliOxBP81Sf0+qfQE73LIYKcyMYHG94AuH0kgrQpRDuTZnSmjpysHmzxJXKNfa6PjFhyQ==}
+    dev: false
+
   /set-function-length@1.2.2:
     resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==}
     engines: {node: '>= 0.4'}
@@ -7972,6 +8522,15 @@ packages:
     resolution: {integrity: sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==}
     dev: false
 
+  /web-streams-polyfill@3.3.3:
+    resolution: {integrity: sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==}
+    engines: {node: '>= 8'}
+    dev: false
+
+  /web-vitals@3.5.2:
+    resolution: {integrity: sha512-c0rhqNcHXRkY/ogGDJQxZ9Im9D19hDihbzSQJrsioex+KnFgmMzBiy57Z1EjkhX/+OjyBpclDCzz2ITtjokFmg==}
+    dev: false
+
   /webidl-conversions@3.0.1:
     resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
     dev: false
@@ -8033,6 +8592,12 @@ packages:
     dev: false
     optional: true
 
+  /wide-align@1.1.5:
+    resolution: {integrity: sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==}
+    dependencies:
+      string-width: 4.2.3
+    dev: false
+
   /widest-line@3.1.0:
     resolution: {integrity: sha512-NsmoXalsWVDMGupxZ5R08ka9flZjjiLvHVAWYOKtiKM8ujtZWr9cRffak+uSE48+Ob8ObalXpwyeUiyDD6QFgg==}
     engines: {node: '>=8'}
@@ -8132,6 +8697,19 @@ packages:
         optional: true
     dev: false
 
+  /ws@8.16.0:
+    resolution: {integrity: sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+    dev: false
+
   /xdg-basedir@4.0.0:
     resolution: {integrity: sha512-PSNhEJDejZYV7h50BohL09Er9VaIefr2LMAf3OEmpCkjOi34eYyQYAXUTjEQtZJTKcF0E2UKTh+osDLsgNim9Q==}
     engines: {node: '>=8'}

From 354950f60daa32175488f17d2aaa5aaafb49ad32 Mon Sep 17 00:00:00 2001
From: Peter Ferguson <peterferguson95@gmail.com>
Date: Sat, 16 Mar 2024 16:45:34 +0000
Subject: [PATCH 09/14] fix tsconfig

---
 apps/dapp/tsconfig.json   | 8 +++++---
 apps/wallet/tsconfig.json | 8 +++++---
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/apps/dapp/tsconfig.json b/apps/dapp/tsconfig.json
index f3cc5c3..f70c5b5 100644
--- a/apps/dapp/tsconfig.json
+++ b/apps/dapp/tsconfig.json
@@ -1,11 +1,13 @@
 {
 	"extends": "astro/tsconfigs/strict",
 	"compilerOptions": {
-		"baseUrl": "/Users/peter/repos/eth-global-london/spc-hack/apps/dapp",
+		"baseUrl": ".",
 		"paths": {
-			"@/*": ["./src/*"]
+			"@/*": [
+				"./src/*"
+			]
 		},
 		"jsx": "react-jsx",
 		"jsxImportSource": "react"
 	}
-}
+}
\ No newline at end of file
diff --git a/apps/wallet/tsconfig.json b/apps/wallet/tsconfig.json
index db4a219..f70c5b5 100644
--- a/apps/wallet/tsconfig.json
+++ b/apps/wallet/tsconfig.json
@@ -1,11 +1,13 @@
 {
 	"extends": "astro/tsconfigs/strict",
 	"compilerOptions": {
-		"baseUrl": "/Users/peter/repos/eth-global-london/spc-hack/apps/wallet",
+		"baseUrl": ".",
 		"paths": {
-			"@/*": ["./src/*"]
+			"@/*": [
+				"./src/*"
+			]
 		},
 		"jsx": "react-jsx",
 		"jsxImportSource": "react"
 	}
-}
+}
\ No newline at end of file

From 5861769f871e16512adf90c7f3a99c083a605411 Mon Sep 17 00:00:00 2001
From: Peter Ferguson <peterferguson95@gmail.com>
Date: Sat, 16 Mar 2024 16:50:27 +0000
Subject: [PATCH 10/14] update wallet origin

---
 packages/helpers/domains.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/helpers/domains.ts b/packages/helpers/domains.ts
index f565854..e4ac627 100644
--- a/packages/helpers/domains.ts
+++ b/packages/helpers/domains.ts
@@ -6,7 +6,7 @@ export const getDappOrigin = ({ isDev }: { isDev: boolean }) => {
 };
 
 export const getWalletOrigin = ({ isDev }: { isDev: boolean }) => {
-	const domain = isDev ? "loca.lt" : "web.app";
+	const domain = isDev ? "loca.lt" : "vercel.app"; // firebase no longer works "web.app";
 	const origin = `https://spc-wallet.${domain}`;
 
 	return origin;

From 8aaaa75bebbc7ec577126a999c9a001fe33d27b4 Mon Sep 17 00:00:00 2001
From: Peter Ferguson <peterferguson95@gmail.com>
Date: Sat, 16 Mar 2024 18:09:09 +0000
Subject: [PATCH 11/14] write the key to the database

---
 ....LmZpcmViYXNlL3NwYy1kYXBwL2hvc3Rpbmc.cache | 17 +++---
 .../.firebase/spc-dapp/hosting/index.html     |  8 +--
 apps/dapp/src/lib/utils.ts                    | 29 ++++------
 ...ZpcmViYXNlL3NwYy13YWxsZXQvaG9zdGluZw.cache | 15 +++--
 .../.firebase/spc-wallet/hosting/index.html   |  3 +-
 apps/wallet/db/config.ts                      | 31 ++++++++++
 apps/wallet/db/seed.ts                        |  6 ++
 apps/wallet/package.json                      |  2 +-
 apps/wallet/src/env.d.ts                      |  1 +
 apps/wallet/src/lib/utils.ts                  | 57 +++++++++++--------
 apps/wallet/src/pages/auth/register.ts        | 42 ++++++++++++++
 packages/helpers/base64url.ts                 |  4 +-
 packages/helpers/webauthn.ts                  | 46 +++++++++++++++
 13 files changed, 191 insertions(+), 70 deletions(-)
 create mode 100644 apps/wallet/db/config.ts
 create mode 100644 apps/wallet/db/seed.ts
 create mode 100644 apps/wallet/src/pages/auth/register.ts
 create mode 100644 packages/helpers/webauthn.ts

diff --git a/apps/dapp/.firebase/hosting.LmZpcmViYXNlL3NwYy1kYXBwL2hvc3Rpbmc.cache b/apps/dapp/.firebase/hosting.LmZpcmViYXNlL3NwYy1kYXBwL2hvc3Rpbmc.cache
index 7cf0782..794b16b 100644
--- a/apps/dapp/.firebase/hosting.LmZpcmViYXNlL3NwYy1kYXBwL2hvc3Rpbmc.cache
+++ b/apps/dapp/.firebase/hosting.LmZpcmViYXNlL3NwYy1kYXBwL2hvc3Rpbmc.cache
@@ -1,8 +1,9 @@
-global.css,1710590178343,42d73ffbdad77a1b36c73186c8ecfedf609c52809da1ae37a2853a0dd10a91a2
-favicon.svg,1710590178343,11f7bbcc36bf2f54c31744264fa1b24a0811ed62e4d26d5b18d3b2dec99040a7
-_astro/create-payment-button.CINVb1iY.js,1710590178345,db69defc7d4eecb5b29b7fa206694342e57bed69e28954a4622b3c0112fab89a
-_astro/hoisted.Dtw3UAUy.js,1710590178344,8f395373b0a398615502bc5d7b4630f3e0a2312777ddfdcf19854284d8dfe4d6
-index.html,1710590178343,e287d0e9ce1e596069fe4eaffdf556d2ed9f40ee061e8ea03109b98c704d8172
-_astro/index.NEDEFKed.js,1710590178344,c1250d9adcf7af9f08cbad6c8b34267ac3bd193c676424dc5653db6fc9505e90
-_astro/utils.CR3g-f2u.js,1710590178344,c953e34917739c011debb7b1c24907478e139d6bc5d139b3d99a2ba45fed48c3
-_astro/client.DbokQZWz.js,1710590178345,dfc9d946776d09a6ecd38cb440df7115dce93ec392f2272238dc903ac9f14163
+favicon.svg,1710603446355,11f7bbcc36bf2f54c31744264fa1b24a0811ed62e4d26d5b18d3b2dec99040a7
+index.html,1710603446354,e923b9f3d41ef20952b9cfe8ff9d78d18c7c326306d69a37cdaa6aa04c9b6ad3
+_astro/hoisted.ZZWYXdk_.js,1710603446358,44fd94351cfef7160b9cc92cfb3170c22c7c77b274579e3226287f284681feb0
+_astro/create-payment-button.BVaJqtS-.js,1710603446359,147410ae3cd385dd6c8a0aeaaa245ec8fc977bfe50d986302e95941ff54d1c1c
+global.css,1710603446355,42d73ffbdad77a1b36c73186c8ecfedf609c52809da1ae37a2853a0dd10a91a2
+_astro/index.8-_CQqnL.css,1710603446358,e9c06675410edad1a5e1e4185fe3e9c9a0002f94035f81189fe63e262c734447
+_astro/index.NEDEFKed.js,1710603446356,c1250d9adcf7af9f08cbad6c8b34267ac3bd193c676424dc5653db6fc9505e90
+_astro/constants.BtyTUp4W.js,1710603446360,e3994b63d5132f97e10ec64e2837050a26bd597f5c629225aa76dd577d855ff0
+_astro/client.DbokQZWz.js,1710603446361,dfc9d946776d09a6ecd38cb440df7115dce93ec392f2272238dc903ac9f14163
diff --git a/apps/dapp/.firebase/spc-dapp/hosting/index.html b/apps/dapp/.firebase/spc-dapp/hosting/index.html
index c5cf108..160b95c 100644
--- a/apps/dapp/.firebase/spc-dapp/hosting/index.html
+++ b/apps/dapp/.firebase/spc-dapp/hosting/index.html
@@ -1,7 +1 @@
-<!DOCTYPE html><html lang="en"> <head><meta charset="utf-8"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><link rel="stylesheet" href="/global.css"><meta name="viewport" content="width=device-width"><meta name="generator" content="Astro v4.5.4"><title>SPC dApp</title><script type="module" src="/_astro/hoisted.Dtw3UAUy.js"></script></head> <body class="flex flex-col items-center justify-center h-screen"> <main class="flex flex-col items-center justify-evenly min-h-[20vh]"> <!-- <form
-				id="form"
-				action={`${paymentOrigin}/`}
-				class="center"
-				target="iframe"
-				method="post"
-			> --> <h1>SPC dApp</h1> <div id="iframe-container" class="hidden"> <iframe name="iframe" allow="payment https://spc-wallet.web.app"></iframe> </div> <style>astro-island,astro-slot,astro-static-slot{display:contents}</style><script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event("astro:only"));})();;(()=>{var v=Object.defineProperty;var A=(c,s,a)=>s in c?v(c,s,{enumerable:!0,configurable:!0,writable:!0,value:a}):c[s]=a;var d=(c,s,a)=>(A(c,typeof s!="symbol"?s+"":s,a),a);var u;{let c={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t)},s=t=>{let[e,n]=t;return e in c?c[e](n):void 0},a=t=>t.map(s),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([e,n])=>[e,s(n)]));customElements.get("astro-island")||customElements.define("astro-island",(u=class extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var f;if(!this.hydrator||!this.isConnected)return;let e=(f=this.parentElement)==null?void 0:f.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let n=this.querySelectorAll("astro-slot"),r={},l=this.querySelectorAll("template[data-astro-template]");for(let o of l){let i=o.closest(this.tagName);i!=null&&i.isSameNode(this)&&(r[o.getAttribute("data-astro-template")||"default"]=o.innerHTML,o.remove())}for(let o of n){let i=o.closest(this.tagName);i!=null&&i.isSameNode(this)&&(r[o.getAttribute("name")||"default"]=o.innerHTML)}let h;try{h=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(o){let i=this.getAttribute("component-url")||"<unknown>",b=this.getAttribute("component-export");throw b&&(i+=` (export ${b})`),console.error(`[hydrate] Error parsing props for component ${i}`,this.getAttribute("props"),o),o}let p;await this.hydrator(this)(this.Component,h,r,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),n.disconnect(),this.childrenConnectedCallback()},n=new MutationObserver(()=>{var r;((r=this.lastChild)==null?void 0:r.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});n.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),n=this.getAttribute("client");if(Astro[n]===void 0){window.addEventListener(`astro:${n}`,()=>this.start(),{once:!0});return}try{await Astro[n](async()=>{let r=this.getAttribute("renderer-url"),[l,{default:h}]=await Promise.all([import(this.getAttribute("component-url")),r?import(r):()=>()=>{}]),p=this.getAttribute("component-export")||"default";if(!p.includes("."))this.Component=l[p];else{this.Component=l;for(let y of p.split("."))this.Component=this.Component[y]}return this.hydrator=h,this.hydrate},e,this)}catch(r){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,r)}}attributeChangedCallback(){this.hydrate()}},d(u,"observedAttributes",["props"]),u))}})();</script><astro-island uid="1iICUQ" component-url="/_astro/create-payment-button.CINVb1iY.js" component-export="CreatePaymentButton" renderer-url="/_astro/client.DbokQZWz.js" props="{}" ssr="" client="only" opts="{&quot;name&quot;:&quot;CreatePaymentButton&quot;,&quot;value&quot;:true}"></astro-island> <!-- </form> --> </main>  </body> </html>
\ No newline at end of file
+<!DOCTYPE html><html lang="en"> <head><meta charset="utf-8"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><link rel="stylesheet" href="/global.css"><meta name="viewport" content="width=device-width"><meta name="generator" content="Astro v4.5.4"><title>SPC dApp</title><link rel="stylesheet" href="/_astro/index.8-_CQqnL.css" /><script type="module" src="/_astro/hoisted.ZZWYXdk_.js"></script></head> <body class="flex flex-col items-center justify-center h-screen"> <main class="flex flex-col items-center justify-evenly min-h-[20vh]"> <h1>SPC dApp</h1> <dialog id="wallet-iframe-dialog" class="items-center justify-center border rounded-lg py-3 px-4 min-h-[40vh] backdrop:bg-black backdrop:opacity-50 backdrop:backdrop-blur-md backdrop:transition-opacity backdrop:duration-300"> <iframe class="min-h-[40vh] border-0 m-0" name="iframe" allow="payment https://spc-wallet.web.app"></iframe> </dialog>  <style>astro-island,astro-slot,astro-static-slot{display:contents}</style><script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event("astro:only"));})();;(()=>{var v=Object.defineProperty;var A=(c,s,a)=>s in c?v(c,s,{enumerable:!0,configurable:!0,writable:!0,value:a}):c[s]=a;var d=(c,s,a)=>(A(c,typeof s!="symbol"?s+"":s,a),a);var u;{let c={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t)},s=t=>{let[e,n]=t;return e in c?c[e](n):void 0},a=t=>t.map(s),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([e,n])=>[e,s(n)]));customElements.get("astro-island")||customElements.define("astro-island",(u=class extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var f;if(!this.hydrator||!this.isConnected)return;let e=(f=this.parentElement)==null?void 0:f.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let n=this.querySelectorAll("astro-slot"),r={},l=this.querySelectorAll("template[data-astro-template]");for(let o of l){let i=o.closest(this.tagName);i!=null&&i.isSameNode(this)&&(r[o.getAttribute("data-astro-template")||"default"]=o.innerHTML,o.remove())}for(let o of n){let i=o.closest(this.tagName);i!=null&&i.isSameNode(this)&&(r[o.getAttribute("name")||"default"]=o.innerHTML)}let h;try{h=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(o){let i=this.getAttribute("component-url")||"<unknown>",b=this.getAttribute("component-export");throw b&&(i+=` (export ${b})`),console.error(`[hydrate] Error parsing props for component ${i}`,this.getAttribute("props"),o),o}let p;await this.hydrator(this)(this.Component,h,r,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),n.disconnect(),this.childrenConnectedCallback()},n=new MutationObserver(()=>{var r;((r=this.lastChild)==null?void 0:r.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});n.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),n=this.getAttribute("client");if(Astro[n]===void 0){window.addEventListener(`astro:${n}`,()=>this.start(),{once:!0});return}try{await Astro[n](async()=>{let r=this.getAttribute("renderer-url"),[l,{default:h}]=await Promise.all([import(this.getAttribute("component-url")),r?import(r):()=>()=>{}]),p=this.getAttribute("component-export")||"default";if(!p.includes("."))this.Component=l[p];else{this.Component=l;for(let y of p.split("."))this.Component=this.Component[y]}return this.hydrator=h,this.hydrate},e,this)}catch(r){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,r)}}attributeChangedCallback(){this.hydrate()}},d(u,"observedAttributes",["props"]),u))}})();</script><astro-island uid="1iICUQ" component-url="/_astro/create-payment-button.BVaJqtS-.js" component-export="CreatePaymentButton" renderer-url="/_astro/client.DbokQZWz.js" props="{}" ssr="" client="only" opts="{&quot;name&quot;:&quot;CreatePaymentButton&quot;,&quot;value&quot;:true}"></astro-island> </main>  </body> </html>
\ No newline at end of file
diff --git a/apps/dapp/src/lib/utils.ts b/apps/dapp/src/lib/utils.ts
index 47e6073..a2c9d90 100644
--- a/apps/dapp/src/lib/utils.ts
+++ b/apps/dapp/src/lib/utils.ts
@@ -2,9 +2,9 @@ import { type ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import {
 	defaultInstrument,
+	fromBuffer,
 	getDappOrigin,
 	getWalletOrigin,
-	toBase64UrlString,
 	toBuffer,
 } from "helpers";
 
@@ -88,29 +88,20 @@ export const payWithSPC = async (
 		// response.details is a PublicKeyCredential, with a clientDataJSON that
 		// contains the transaction data for verification by the issuing bank.
 		const cred = response.details;
-		const credential = {
+
+		// TODO: send the wallet the response for verification before executing the payment
+		const serialisableCredential = {
 			id: cred.id,
 			type: cred.type,
 			// credential.rawId = base64url.encode(cred.rawId);
+			response: {
+				clientDataJSON: fromBuffer(cred.response.clientDataJSON),
+				authenticatorData: fromBuffer(cred.response.authenticatorData),
+				signature: fromBuffer(cred.response.signature),
+				userHandle: fromBuffer(cred.response.userHandle),
+			},
 		};
 
-		if (cred.response) {
-			const clientDataJSON = toBase64UrlString(cred.response.clientDataJSON);
-			const authenticatorData = toBase64UrlString(
-				cred.response.authenticatorData,
-			);
-			const signature = toBase64UrlString(cred.response.signature);
-			const userHandle = toBase64UrlString(cred.response.userHandle);
-			// @ts-ignore
-			credential.response = {
-				clientDataJSON,
-				authenticatorData,
-				signature,
-				userHandle,
-			};
-		}
-
-		// TODO: verify the response with the wallet
 		await response.complete("success");
 
 		/* send response.details to the issuing bank for verification */
diff --git a/apps/wallet/.firebase/hosting.LmZpcmViYXNlL3NwYy13YWxsZXQvaG9zdGluZw.cache b/apps/wallet/.firebase/hosting.LmZpcmViYXNlL3NwYy13YWxsZXQvaG9zdGluZw.cache
index e15865a..61dd8c2 100644
--- a/apps/wallet/.firebase/hosting.LmZpcmViYXNlL3NwYy13YWxsZXQvaG9zdGluZw.cache
+++ b/apps/wallet/.firebase/hosting.LmZpcmViYXNlL3NwYy13YWxsZXQvaG9zdGluZw.cache
@@ -1,6 +1,9 @@
-favicon.svg,1710590178359,11f7bbcc36bf2f54c31744264fa1b24a0811ed62e4d26d5b18d3b2dec99040a7
-global.css,1710590178359,42d73ffbdad77a1b36c73186c8ecfedf609c52809da1ae37a2853a0dd10a91a2
-_astro/client.D94CfA5t.js,1710590178360,85376cfb3738d56e4644383bb10ad7b0d3b74420b1b3fcd1bac2030129f3f577
-index.html,1710590178358,b186d86ee57df31f00c35278e8483812b058006a6f06c939bc8b3442ab2ebb11
-_astro/username.B08JAKVh.js,1710590178359,661e750d4cca25d136a7c8e76c545141769134487ec4145fce8068361099559f
-_astro/index.CaFFZDEV.js,1710590178360,5420580c98e9b6052f92b05b21ca63cb2e92a43f0e5adb0703029d676827a703
+favicon.svg,1710603448642,11f7bbcc36bf2f54c31744264fa1b24a0811ed62e4d26d5b18d3b2dec99040a7
+global.css,1710603448641,42d73ffbdad77a1b36c73186c8ecfedf609c52809da1ae37a2853a0dd10a91a2
+_astro/hoisted.BGMD-Yjd.js,1710603448649,f385007aed71c497aa6d77454ca1298ac4bae6213ddac0ccdc63262deabdb4dd
+_astro/client.D94CfA5t.js,1710603448657,85376cfb3738d56e4644383bb10ad7b0d3b74420b1b3fcd1bac2030129f3f577
+index.html,1710603448640,1a401c45f836cf26e9cf73477ab01c28acd67eb8d0b48e06b268a58cb66df40f
+_astro/index.CJ5ue1y4.css,1710603448648,1be59a06f51300109f913b08dd7a6b2c04f5a7437340c85c4d21be92fd8a58f2
+_astro/username.BJVwDXv1.js,1710603448646,203fceabd14e3cd04f19a5adcc26abb4432b6794c0f5e419b8fef685ad586493
+_astro/utils.CkC3O5Nx.js,1710603448645,8d34d1f372e10f7ea3b23a8c0b6724c20a4533409251c3694ee5c935636c5e8c
+_astro/index.CaFFZDEV.js,1710603448647,5420580c98e9b6052f92b05b21ca63cb2e92a43f0e5adb0703029d676827a703
diff --git a/apps/wallet/.firebase/spc-wallet/hosting/index.html b/apps/wallet/.firebase/spc-wallet/hosting/index.html
index 8570e26..15c1159 100644
--- a/apps/wallet/.firebase/spc-wallet/hosting/index.html
+++ b/apps/wallet/.firebase/spc-wallet/hosting/index.html
@@ -1,2 +1 @@
-<!DOCTYPE html><html lang="en"> <head><meta charset="utf-8"><link rel="stylesheet" href="/global.css"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><meta name="viewport" content="width=device-width"><meta name="generator" content="Astro v4.5.4"><title>SPC Wallet</title><script type="module">if(function(){return window.location!==window.parent.location}())document.getElementById("heading").innerText="SPC Wallet (in iframe)";else{const n=window.localStorage.get("credId"),e=document.getElementById("credential-id");e&&(e.innerText=n)}
-</script></head> <body class="flex flex-col items-center justify-center h-screen"> <h1 id="heading">SPC Wallet</h1> <strong id="credential-id"></strong> <style>astro-island,astro-slot,astro-static-slot{display:contents}</style><script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event("astro:only"));})();;(()=>{var v=Object.defineProperty;var A=(c,s,a)=>s in c?v(c,s,{enumerable:!0,configurable:!0,writable:!0,value:a}):c[s]=a;var d=(c,s,a)=>(A(c,typeof s!="symbol"?s+"":s,a),a);var u;{let c={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t)},s=t=>{let[e,n]=t;return e in c?c[e](n):void 0},a=t=>t.map(s),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([e,n])=>[e,s(n)]));customElements.get("astro-island")||customElements.define("astro-island",(u=class extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var f;if(!this.hydrator||!this.isConnected)return;let e=(f=this.parentElement)==null?void 0:f.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let n=this.querySelectorAll("astro-slot"),r={},l=this.querySelectorAll("template[data-astro-template]");for(let o of l){let i=o.closest(this.tagName);i!=null&&i.isSameNode(this)&&(r[o.getAttribute("data-astro-template")||"default"]=o.innerHTML,o.remove())}for(let o of n){let i=o.closest(this.tagName);i!=null&&i.isSameNode(this)&&(r[o.getAttribute("name")||"default"]=o.innerHTML)}let h;try{h=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(o){let i=this.getAttribute("component-url")||"<unknown>",b=this.getAttribute("component-export");throw b&&(i+=` (export ${b})`),console.error(`[hydrate] Error parsing props for component ${i}`,this.getAttribute("props"),o),o}let p;await this.hydrator(this)(this.Component,h,r,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),n.disconnect(),this.childrenConnectedCallback()},n=new MutationObserver(()=>{var r;((r=this.lastChild)==null?void 0:r.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});n.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),n=this.getAttribute("client");if(Astro[n]===void 0){window.addEventListener(`astro:${n}`,()=>this.start(),{once:!0});return}try{await Astro[n](async()=>{let r=this.getAttribute("renderer-url"),[l,{default:h}]=await Promise.all([import(this.getAttribute("component-url")),r?import(r):()=>()=>{}]),p=this.getAttribute("component-export")||"default";if(!p.includes("."))this.Component=l[p];else{this.Component=l;for(let y of p.split("."))this.Component=this.Component[y]}return this.hydrator=h,this.hydrate},e,this)}catch(r){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,r)}}attributeChangedCallback(){this.hydrate()}},d(u,"observedAttributes",["props"]),u))}})();</script><astro-island uid="21l2rq" component-url="/_astro/username.B08JAKVh.js" component-export="UsernameForm" renderer-url="/_astro/client.D94CfA5t.js" props="{}" ssr="" client="only" opts="{&quot;name&quot;:&quot;UsernameForm&quot;,&quot;value&quot;:true}"></astro-island> </body></html>
\ No newline at end of file
+<!DOCTYPE html><html lang="en"> <head><meta charset="utf-8"><link rel="stylesheet" href="/global.css"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><meta name="viewport" content="width=device-width"><meta name="generator" content="Astro v4.5.4"><title>SPC Wallet</title><link rel="stylesheet" href="/_astro/index.CJ5ue1y4.css" /><script type="module" src="/_astro/hoisted.BGMD-Yjd.js"></script></head> <body class="flex flex-col items-center justify-center h-screen"> <h1 id="heading">SPC Wallet</h1> <strong id="credential-id"></strong> <style>astro-island,astro-slot,astro-static-slot{display:contents}</style><script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event("astro:only"));})();;(()=>{var v=Object.defineProperty;var A=(c,s,a)=>s in c?v(c,s,{enumerable:!0,configurable:!0,writable:!0,value:a}):c[s]=a;var d=(c,s,a)=>(A(c,typeof s!="symbol"?s+"":s,a),a);var u;{let c={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t)},s=t=>{let[e,n]=t;return e in c?c[e](n):void 0},a=t=>t.map(s),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([e,n])=>[e,s(n)]));customElements.get("astro-island")||customElements.define("astro-island",(u=class extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var f;if(!this.hydrator||!this.isConnected)return;let e=(f=this.parentElement)==null?void 0:f.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let n=this.querySelectorAll("astro-slot"),r={},l=this.querySelectorAll("template[data-astro-template]");for(let o of l){let i=o.closest(this.tagName);i!=null&&i.isSameNode(this)&&(r[o.getAttribute("data-astro-template")||"default"]=o.innerHTML,o.remove())}for(let o of n){let i=o.closest(this.tagName);i!=null&&i.isSameNode(this)&&(r[o.getAttribute("name")||"default"]=o.innerHTML)}let h;try{h=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(o){let i=this.getAttribute("component-url")||"<unknown>",b=this.getAttribute("component-export");throw b&&(i+=` (export ${b})`),console.error(`[hydrate] Error parsing props for component ${i}`,this.getAttribute("props"),o),o}let p;await this.hydrator(this)(this.Component,h,r,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),n.disconnect(),this.childrenConnectedCallback()},n=new MutationObserver(()=>{var r;((r=this.lastChild)==null?void 0:r.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});n.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),n=this.getAttribute("client");if(Astro[n]===void 0){window.addEventListener(`astro:${n}`,()=>this.start(),{once:!0});return}try{await Astro[n](async()=>{let r=this.getAttribute("renderer-url"),[l,{default:h}]=await Promise.all([import(this.getAttribute("component-url")),r?import(r):()=>()=>{}]),p=this.getAttribute("component-export")||"default";if(!p.includes("."))this.Component=l[p];else{this.Component=l;for(let y of p.split("."))this.Component=this.Component[y]}return this.hydrator=h,this.hydrate},e,this)}catch(r){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,r)}}attributeChangedCallback(){this.hydrate()}},d(u,"observedAttributes",["props"]),u))}})();</script><astro-island uid="21l2rq" component-url="/_astro/username.BJVwDXv1.js" component-export="UsernameForm" renderer-url="/_astro/client.D94CfA5t.js" props="{}" ssr="" client="only" opts="{&quot;name&quot;:&quot;UsernameForm&quot;,&quot;value&quot;:true}"></astro-island>  </body></html>
\ No newline at end of file
diff --git a/apps/wallet/db/config.ts b/apps/wallet/db/config.ts
new file mode 100644
index 0000000..459a9ee
--- /dev/null
+++ b/apps/wallet/db/config.ts
@@ -0,0 +1,31 @@
+import { NOW, column, defineDb, defineTable } from "astro:db";
+
+const Credential = defineTable({
+	columns: {
+		id: column.text({ primaryKey: true }),
+		username: column.text({ unique: true }),
+		publicKey: column.text(),
+		userHandle: column.text({ optional: true }),
+		createdAt: column.date({ default: NOW }),
+	},
+});
+
+const ConnectedDapps = defineTable({
+	columns: {
+		dappName: column.text(),
+		credentialId: column.text({
+			references: () => Credential.columns.id,
+		}),
+	},
+	indexes: {
+		dappName_credentialId_idx: {
+			on: ["credentialId", "dappName"],
+			unique: true,
+		},
+	},
+});
+
+// https://astro.build/db/config
+export default defineDb({
+	tables: { ConnectedDapps, Credential },
+});
diff --git a/apps/wallet/db/seed.ts b/apps/wallet/db/seed.ts
new file mode 100644
index 0000000..fffc464
--- /dev/null
+++ b/apps/wallet/db/seed.ts
@@ -0,0 +1,6 @@
+import { db } from 'astro:db';
+
+// https://astro.build/db/seed
+export default async function seed() {
+	// TODO
+}
diff --git a/apps/wallet/package.json b/apps/wallet/package.json
index f4465e5..c93f49f 100644
--- a/apps/wallet/package.json
+++ b/apps/wallet/package.json
@@ -3,7 +3,7 @@
 	"type": "module",
 	"version": "0.0.1",
 	"scripts": {
-		"dev": "astro dev --port 4322 & npx localtunnel --port 4322 -s spc-wallet",
+		"dev": "npx localtunnel --port 4322 -s spc-wallet & astro dev --port 4322 ",
 		"start": "astro dev",
 		"build": "astro build",
 		"preview": "astro preview",
diff --git a/apps/wallet/src/env.d.ts b/apps/wallet/src/env.d.ts
index acef35f..99a3b5c 100644
--- a/apps/wallet/src/env.d.ts
+++ b/apps/wallet/src/env.d.ts
@@ -1,2 +1,3 @@
+/// <reference path="../.astro/db-types.d.ts" />
 /// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
diff --git a/apps/wallet/src/lib/utils.ts b/apps/wallet/src/lib/utils.ts
index a6bc756..b42a756 100644
--- a/apps/wallet/src/lib/utils.ts
+++ b/apps/wallet/src/lib/utils.ts
@@ -1,10 +1,4 @@
-import {
-	toBase64UrlString,
-	toBuffer,
-	fromBuffer,
-	getDappOrigin,
-	getWalletOrigin,
-} from "helpers";
+import { toBuffer, fromBuffer, getDappOrigin, getWalletOrigin } from "helpers";
 import { type ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 
@@ -37,13 +31,14 @@ export const registerSpcCredential = async ({
 	userId,
 	challenge,
 }: { userId: string; challenge: string }) => {
+	const rpId = getWalletOrigin({ isDev: import.meta.env.DEV }).replace(
+		"https://",
+		"",
+	);
 	const opts = {
 		challenge: new Uint8Array(),
 		rp: {
-			id: getWalletOrigin({ isDev: import.meta.env.DEV }).replace(
-				"https://",
-				"",
-			),
+			id: rpId,
 			name: "SPC Wallet",
 		},
 		user: {
@@ -84,30 +79,42 @@ export const registerSpcCredential = async ({
 	opts.user.id = toBuffer(userId);
 	opts.challenge = toBuffer(challenge);
 
-	const cred = await navigator.credentials.create({ publicKey: opts });
+	const cred = (await navigator.credentials.create({
+		publicKey: opts,
+	})) as PublicKeyCredential | null;
 
 	if (!cred) throw new Error("No credential returned");
 
-	const credential = {
+	console.log("cred", cred);
+	const response = cred.response as AuthenticatorAttestationResponse;
+
+	const publicKeyBuffer = response.getPublicKey();
+	if (!publicKeyBuffer) throw new Error("No public key returned");
+
+	const serialisableCredential = {
 		id: cred.id,
 		// rawId: window.base64url.encode(cred.rawId),
 		type: cred.type,
+		response: {
+			clientDataJSON: fromBuffer(response.clientDataJSON),
+			attestationObject: fromBuffer(response.attestationObject),
+			publicKey: fromBuffer(publicKeyBuffer),
+		},
 	};
 
-	if (cred.response) {
-		const clientDataJSON = toBase64UrlString(cred.response.clientDataJSON);
-		const attestationObject = toBase64UrlString(
-			cred.response.attestationObject,
-		);
-		credential.response = {
-			clientDataJSON,
-			attestationObject,
-		};
-	}
+	console.log("credential", serialisableCredential);
 
-	localStorage.setItem("credId", credential.id);
+	localStorage.setItem("credId", cred.id);
 
-	// return await _fetch('/auth/registerResponse', credential);
+	return await fetch("/auth/register", {
+		method: "POST",
+		headers: { "Content-Type": "application/json" },
+		body: JSON.stringify({
+			username: userId,
+			credentialId: cred.id,
+			publicKey: serialisableCredential.response.publicKey,
+		}),
+	});
 };
 
 // biome-ignore lint/suspicious/noExplicitAny: <explanation>
diff --git a/apps/wallet/src/pages/auth/register.ts b/apps/wallet/src/pages/auth/register.ts
new file mode 100644
index 0000000..7d9a1d8
--- /dev/null
+++ b/apps/wallet/src/pages/auth/register.ts
@@ -0,0 +1,42 @@
+import type { APIRoute } from "astro";
+import { db, Credential, ConnectedDapps } from "astro:db";
+import { z } from "zod";
+
+const storeCredentialsSchema = z.object({
+	username: z.string(),
+	credentialId: z.string(),
+	publicKey: z.string(),
+	userHandle: z.string().optional(),
+	dappName: z.string().optional(),
+});
+
+export const POST: APIRoute = async (ctx) => {
+	try {
+		const { username, credentialId, publicKey, userHandle, dappName } =
+			storeCredentialsSchema.parse(await ctx.request.json());
+
+		await db
+			.insert(Credential)
+			.values({
+				id: credentialId,
+				username,
+				publicKey,
+				...(userHandle && { userHandle }),
+			})
+			.execute();
+
+		await db
+			.insert(ConnectedDapps)
+			.values({
+				dappName: dappName || "https://spc-wallet.vercel.app",
+				credentialId: credentialId,
+			})
+			.execute();
+
+		return new Response(null, { status: 204 });
+	} catch (e) {
+		console.log("error", e);
+
+		return new Response((e as Error).message, { status: 500 });
+	}
+};
diff --git a/packages/helpers/base64url.ts b/packages/helpers/base64url.ts
index b06c5fb..52315c6 100644
--- a/packages/helpers/base64url.ts
+++ b/packages/helpers/base64url.ts
@@ -24,10 +24,10 @@ export function toBuffer(
  * @param to (optional) The encoding to use, in case it's desirable to encode to base64 instead
  */
 export function fromBuffer(
-	buffer: Uint8Array,
+	buffer: Uint8Array | ArrayBuffer,
 	to: "base64" | "base64url" | "hex" | "ascii" = "base64url",
 ): string {
-	if (to === "ascii") return arrayBufferToString(buffer.buffer);
+	if (to === "ascii") return arrayBufferToString(buffer);
 	if (to === "hex") return arrayBufferToHexString(buffer);
 	return base64.fromArrayBuffer(buffer, to === "base64url");
 }
diff --git a/packages/helpers/webauthn.ts b/packages/helpers/webauthn.ts
new file mode 100644
index 0000000..f8cd7ea
--- /dev/null
+++ b/packages/helpers/webauthn.ts
@@ -0,0 +1,46 @@
+import { fromBuffer, toBuffer } from "./base64url";
+
+// - adapted from https://github.com/jamesmccomish/test-eip-7212/blob/master/utils/passkeys.ts
+export const importPublicKeyAsCryptoKey = async (
+	publicKey: ArrayBuffer,
+): Promise<CryptoKey | null> => {
+	try {
+		const key = await crypto.subtle.importKey(
+			// The getPublicKey() operation thus returns the credential public key as a SubjectPublicKeyInfo. See:
+			// https://w3c.github.io/webauthn/#sctn-public-key-easy
+			// crypto.subtle can import the spki format:
+			// https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/importKey
+			"spki", // "spki" Simple Public Key Infrastructure rfc2692
+			publicKey,
+			{
+				// these are the algorithm options
+				// await cred.response.getPublicKeyAlgorithm() // returns -7
+				// -7 is ES256 with P-256 // search -7 in https://w3c.github.io/webauthn
+				// the W3C webcrypto docs:
+				// https://www.w3.org/TR/WebCryptoAPI/#informative-references (scroll down a bit)
+				// ES256 corrisponds with the following AlgorithmIdentifier:
+				name: "ECDSA",
+				namedCurve: "P-256",
+				hash: { name: "SHA-256" },
+			},
+			true, //whether the key is extractable (i.e. can be used in exportKey)
+			["verify"], //"verify" for public key import, "sign" for private key imports
+		);
+		return key;
+	} catch (e) {
+		console.error(e);
+		return null;
+	}
+};
+
+export const getXandY = async (pk: CryptoKey) => {
+	const jwkKey = await window.crypto.subtle.exportKey("jwk", pk);
+
+	if (!jwkKey.x || !jwkKey.y) throw new Error("No x and y in jwkKey");
+
+	const xBuffer = toBuffer(jwkKey.x, "base64");
+
+	const yBuffer = toBuffer(jwkKey.y, "base64");
+
+	return { x: fromBuffer(xBuffer, "hex"), y: fromBuffer(yBuffer, "hex") };
+};

From 7021a816f12a3327479567a1bf401c374a2e5211 Mon Sep 17 00:00:00 2001
From: Peter Ferguson <peterferguson95@gmail.com>
Date: Sat, 16 Mar 2024 18:10:37 +0000
Subject: [PATCH 12/14] chore update gitignore

---
 .gitignore                                     |  3 ++-
 ...g.LmZpcmViYXNlL3NwYy1kYXBwL2hvc3Rpbmc.cache | 18 +++++++++---------
 .../dapp/.firebase/spc-dapp/hosting/index.html |  2 +-
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/.gitignore b/.gitignore
index b8b6c1b..2626c74 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 node_modules
-**/.firebase
\ No newline at end of file
+**/.firebase
+**/.vercel
\ No newline at end of file
diff --git a/apps/dapp/.firebase/hosting.LmZpcmViYXNlL3NwYy1kYXBwL2hvc3Rpbmc.cache b/apps/dapp/.firebase/hosting.LmZpcmViYXNlL3NwYy1kYXBwL2hvc3Rpbmc.cache
index 794b16b..948936e 100644
--- a/apps/dapp/.firebase/hosting.LmZpcmViYXNlL3NwYy1kYXBwL2hvc3Rpbmc.cache
+++ b/apps/dapp/.firebase/hosting.LmZpcmViYXNlL3NwYy1kYXBwL2hvc3Rpbmc.cache
@@ -1,9 +1,9 @@
-favicon.svg,1710603446355,11f7bbcc36bf2f54c31744264fa1b24a0811ed62e4d26d5b18d3b2dec99040a7
-index.html,1710603446354,e923b9f3d41ef20952b9cfe8ff9d78d18c7c326306d69a37cdaa6aa04c9b6ad3
-_astro/hoisted.ZZWYXdk_.js,1710603446358,44fd94351cfef7160b9cc92cfb3170c22c7c77b274579e3226287f284681feb0
-_astro/create-payment-button.BVaJqtS-.js,1710603446359,147410ae3cd385dd6c8a0aeaaa245ec8fc977bfe50d986302e95941ff54d1c1c
-global.css,1710603446355,42d73ffbdad77a1b36c73186c8ecfedf609c52809da1ae37a2853a0dd10a91a2
-_astro/index.8-_CQqnL.css,1710603446358,e9c06675410edad1a5e1e4185fe3e9c9a0002f94035f81189fe63e262c734447
-_astro/index.NEDEFKed.js,1710603446356,c1250d9adcf7af9f08cbad6c8b34267ac3bd193c676424dc5653db6fc9505e90
-_astro/constants.BtyTUp4W.js,1710603446360,e3994b63d5132f97e10ec64e2837050a26bd597f5c629225aa76dd577d855ff0
-_astro/client.DbokQZWz.js,1710603446361,dfc9d946776d09a6ecd38cb440df7115dce93ec392f2272238dc903ac9f14163
+favicon.svg,1710612600596,11f7bbcc36bf2f54c31744264fa1b24a0811ed62e4d26d5b18d3b2dec99040a7
+global.css,1710612600596,42d73ffbdad77a1b36c73186c8ecfedf609c52809da1ae37a2853a0dd10a91a2
+index.html,1710612600596,4f4375b1d8a51aa512086a8597622b47c35c025491a244381d86050a6de93acd
+_astro/hoisted.bU3TEY26.js,1710612600597,12298e4f606a273f1d1d5645e995b3f08bf59eb700b3581f4e2978abb27ab38a
+_astro/create-payment-button.CE6C2yQc.js,1710612600598,12a2a4c61d23bc3d87b947c3202cb6a457bf9fa0b7b91087f1bf9cc339644c82
+_astro/index.8-_CQqnL.css,1710612600597,e9c06675410edad1a5e1e4185fe3e9c9a0002f94035f81189fe63e262c734447
+_astro/index.NEDEFKed.js,1710612600597,c1250d9adcf7af9f08cbad6c8b34267ac3bd193c676424dc5653db6fc9505e90
+_astro/constants.Bq4ER0LB.js,1710612600598,15319ae0b9cb6cac4168d89ce7618a53261b798b6ae301b81bdb49ae48ec7f75
+_astro/client.DbokQZWz.js,1710612600598,dfc9d946776d09a6ecd38cb440df7115dce93ec392f2272238dc903ac9f14163
diff --git a/apps/dapp/.firebase/spc-dapp/hosting/index.html b/apps/dapp/.firebase/spc-dapp/hosting/index.html
index 160b95c..a53a03e 100644
--- a/apps/dapp/.firebase/spc-dapp/hosting/index.html
+++ b/apps/dapp/.firebase/spc-dapp/hosting/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang="en"> <head><meta charset="utf-8"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><link rel="stylesheet" href="/global.css"><meta name="viewport" content="width=device-width"><meta name="generator" content="Astro v4.5.4"><title>SPC dApp</title><link rel="stylesheet" href="/_astro/index.8-_CQqnL.css" /><script type="module" src="/_astro/hoisted.ZZWYXdk_.js"></script></head> <body class="flex flex-col items-center justify-center h-screen"> <main class="flex flex-col items-center justify-evenly min-h-[20vh]"> <h1>SPC dApp</h1> <dialog id="wallet-iframe-dialog" class="items-center justify-center border rounded-lg py-3 px-4 min-h-[40vh] backdrop:bg-black backdrop:opacity-50 backdrop:backdrop-blur-md backdrop:transition-opacity backdrop:duration-300"> <iframe class="min-h-[40vh] border-0 m-0" name="iframe" allow="payment https://spc-wallet.web.app"></iframe> </dialog>  <style>astro-island,astro-slot,astro-static-slot{display:contents}</style><script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event("astro:only"));})();;(()=>{var v=Object.defineProperty;var A=(c,s,a)=>s in c?v(c,s,{enumerable:!0,configurable:!0,writable:!0,value:a}):c[s]=a;var d=(c,s,a)=>(A(c,typeof s!="symbol"?s+"":s,a),a);var u;{let c={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t)},s=t=>{let[e,n]=t;return e in c?c[e](n):void 0},a=t=>t.map(s),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([e,n])=>[e,s(n)]));customElements.get("astro-island")||customElements.define("astro-island",(u=class extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var f;if(!this.hydrator||!this.isConnected)return;let e=(f=this.parentElement)==null?void 0:f.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let n=this.querySelectorAll("astro-slot"),r={},l=this.querySelectorAll("template[data-astro-template]");for(let o of l){let i=o.closest(this.tagName);i!=null&&i.isSameNode(this)&&(r[o.getAttribute("data-astro-template")||"default"]=o.innerHTML,o.remove())}for(let o of n){let i=o.closest(this.tagName);i!=null&&i.isSameNode(this)&&(r[o.getAttribute("name")||"default"]=o.innerHTML)}let h;try{h=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(o){let i=this.getAttribute("component-url")||"<unknown>",b=this.getAttribute("component-export");throw b&&(i+=` (export ${b})`),console.error(`[hydrate] Error parsing props for component ${i}`,this.getAttribute("props"),o),o}let p;await this.hydrator(this)(this.Component,h,r,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),n.disconnect(),this.childrenConnectedCallback()},n=new MutationObserver(()=>{var r;((r=this.lastChild)==null?void 0:r.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});n.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),n=this.getAttribute("client");if(Astro[n]===void 0){window.addEventListener(`astro:${n}`,()=>this.start(),{once:!0});return}try{await Astro[n](async()=>{let r=this.getAttribute("renderer-url"),[l,{default:h}]=await Promise.all([import(this.getAttribute("component-url")),r?import(r):()=>()=>{}]),p=this.getAttribute("component-export")||"default";if(!p.includes("."))this.Component=l[p];else{this.Component=l;for(let y of p.split("."))this.Component=this.Component[y]}return this.hydrator=h,this.hydrate},e,this)}catch(r){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,r)}}attributeChangedCallback(){this.hydrate()}},d(u,"observedAttributes",["props"]),u))}})();</script><astro-island uid="1iICUQ" component-url="/_astro/create-payment-button.BVaJqtS-.js" component-export="CreatePaymentButton" renderer-url="/_astro/client.DbokQZWz.js" props="{}" ssr="" client="only" opts="{&quot;name&quot;:&quot;CreatePaymentButton&quot;,&quot;value&quot;:true}"></astro-island> </main>  </body> </html>
\ No newline at end of file
+<!DOCTYPE html><html lang="en"> <head><meta charset="utf-8"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><link rel="stylesheet" href="/global.css"><meta name="viewport" content="width=device-width"><meta name="generator" content="Astro v4.5.4"><title>SPC dApp</title><link rel="stylesheet" href="/_astro/index.8-_CQqnL.css" /><script type="module" src="/_astro/hoisted.bU3TEY26.js"></script></head> <body class="flex flex-col items-center justify-center h-screen"> <main class="flex flex-col items-center justify-evenly min-h-[20vh]"> <h1>SPC dApp</h1> <dialog id="wallet-iframe-dialog" class="items-center justify-center border rounded-lg py-3 px-4 min-h-[40vh] backdrop:bg-black backdrop:opacity-50 backdrop:backdrop-blur-md backdrop:transition-opacity backdrop:duration-300"> <iframe class="min-h-[40vh] border-0 m-0" name="iframe" allow="payment https://spc-wallet.vercel.app"></iframe> </dialog>  <style>astro-island,astro-slot,astro-static-slot{display:contents}</style><script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event("astro:only"));})();;(()=>{var v=Object.defineProperty;var A=(c,s,a)=>s in c?v(c,s,{enumerable:!0,configurable:!0,writable:!0,value:a}):c[s]=a;var d=(c,s,a)=>(A(c,typeof s!="symbol"?s+"":s,a),a);var u;{let c={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t)},s=t=>{let[e,n]=t;return e in c?c[e](n):void 0},a=t=>t.map(s),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([e,n])=>[e,s(n)]));customElements.get("astro-island")||customElements.define("astro-island",(u=class extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var f;if(!this.hydrator||!this.isConnected)return;let e=(f=this.parentElement)==null?void 0:f.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let n=this.querySelectorAll("astro-slot"),r={},l=this.querySelectorAll("template[data-astro-template]");for(let o of l){let i=o.closest(this.tagName);i!=null&&i.isSameNode(this)&&(r[o.getAttribute("data-astro-template")||"default"]=o.innerHTML,o.remove())}for(let o of n){let i=o.closest(this.tagName);i!=null&&i.isSameNode(this)&&(r[o.getAttribute("name")||"default"]=o.innerHTML)}let h;try{h=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(o){let i=this.getAttribute("component-url")||"<unknown>",b=this.getAttribute("component-export");throw b&&(i+=` (export ${b})`),console.error(`[hydrate] Error parsing props for component ${i}`,this.getAttribute("props"),o),o}let p;await this.hydrator(this)(this.Component,h,r,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),n.disconnect(),this.childrenConnectedCallback()},n=new MutationObserver(()=>{var r;((r=this.lastChild)==null?void 0:r.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});n.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),n=this.getAttribute("client");if(Astro[n]===void 0){window.addEventListener(`astro:${n}`,()=>this.start(),{once:!0});return}try{await Astro[n](async()=>{let r=this.getAttribute("renderer-url"),[l,{default:h}]=await Promise.all([import(this.getAttribute("component-url")),r?import(r):()=>()=>{}]),p=this.getAttribute("component-export")||"default";if(!p.includes("."))this.Component=l[p];else{this.Component=l;for(let y of p.split("."))this.Component=this.Component[y]}return this.hydrator=h,this.hydrate},e,this)}catch(r){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,r)}}attributeChangedCallback(){this.hydrate()}},d(u,"observedAttributes",["props"]),u))}})();</script><astro-island uid="1iICUQ" component-url="/_astro/create-payment-button.CE6C2yQc.js" component-export="CreatePaymentButton" renderer-url="/_astro/client.DbokQZWz.js" props="{}" ssr="" client="only" opts="{&quot;name&quot;:&quot;CreatePaymentButton&quot;,&quot;value&quot;:true}"></astro-island> </main>  </body> </html>
\ No newline at end of file

From ac1d4a933e32437d99525087dba95aa9b7d7946a Mon Sep 17 00:00:00 2001
From: Peter Ferguson <peterferguson95@gmail.com>
Date: Sat, 16 Mar 2024 18:47:31 +0000
Subject: [PATCH 13/14] hotfix: add remove flag to wallet build

---
 apps/wallet/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/wallet/package.json b/apps/wallet/package.json
index c93f49f..22f4d60 100644
--- a/apps/wallet/package.json
+++ b/apps/wallet/package.json
@@ -5,7 +5,7 @@
 	"scripts": {
 		"dev": "npx localtunnel --port 4322 -s spc-wallet & astro dev --port 4322 ",
 		"start": "astro dev",
-		"build": "astro build",
+		"build": "astro build --remote",
 		"preview": "astro preview",
 		"astro": "astro"
 	},

From c8ddad374cfa86566e58fb5e02e8ec9675689bdd Mon Sep 17 00:00:00 2001
From: Peter Ferguson <peterferguson95@gmail.com>
Date: Sat, 16 Mar 2024 20:27:09 +0000
Subject: [PATCH 14/14] fix: store connected dapp

---
 apps/dapp/src/pages/index.astro               |   9 +-
 apps/wallet/src/components/forms/username.tsx |  11 +-
 apps/wallet/src/lib/utils.ts                  | 102 +++++++++---------
 apps/wallet/src/pages/auth/register.ts        |  22 +++-
 4 files changed, 70 insertions(+), 74 deletions(-)

diff --git a/apps/dapp/src/pages/index.astro b/apps/dapp/src/pages/index.astro
index 6ba77dd..a48b981 100644
--- a/apps/dapp/src/pages/index.astro
+++ b/apps/dapp/src/pages/index.astro
@@ -26,14 +26,7 @@ import WalletIframeDialog from "@/components/wallet-iframe-dialog.astro";
 
 			window.addEventListener("message", (e) => {
 				if (e.origin !== paymentOrigin) return;
-				if (e.data.paid !== undefined) {
-					alert(
-						`Payment ${e.data.paid ? "succeeded" : "failed"}. Credential ${e.data.registered ? "registered" : "not registered"}`,
-					);
-					location.href = "/success";
-				} else {
-					console.log("recieved message", e.data.message);
-				}
+				if (e.data.paid !== undefined) return; // TODO: recieve confirmation of payment & display feedback
 			});
 		</script>
 	</body>
diff --git a/apps/wallet/src/components/forms/username.tsx b/apps/wallet/src/components/forms/username.tsx
index dfbf841..d72a749 100644
--- a/apps/wallet/src/components/forms/username.tsx
+++ b/apps/wallet/src/components/forms/username.tsx
@@ -23,19 +23,10 @@ const formSchema = z.object({
 export function UsernameForm() {
 	const form = useForm<z.infer<typeof formSchema>>({
 		resolver: zodResolver(formSchema),
-		defaultValues: {
-			username: "",
-		},
+		defaultValues: { username: "" },
 	});
 
 	async function onSubmit(values: z.infer<typeof formSchema>) {
-		// Do something with the form values.
-		// ✅ This will be type-safe and validated.
-		console.log({
-			...values,
-			credentials: [],
-		});
-
 		await registerSpcCredential({
 			userId: values.username,
 			challenge: "challenge",
diff --git a/apps/wallet/src/lib/utils.ts b/apps/wallet/src/lib/utils.ts
index b42a756..df6f80e 100644
--- a/apps/wallet/src/lib/utils.ts
+++ b/apps/wallet/src/lib/utils.ts
@@ -12,9 +12,7 @@ export const getPayeeOrigin = () =>
 export const getPaymentOrigin = () =>
 	getWalletOrigin({ isDev: import.meta.env.DEV });
 
-export function pageInIframe() {
-	return window.location !== window.parent.location;
-}
+export const pageInIframe = () => window.location !== window.parent.location;
 
 /**
  * Utility function to send a message to the parent window
@@ -27,60 +25,61 @@ export const sendMessage = (message: string | Record<string, unknown>) => {
 	);
 };
 
+const defaultSpcOpts = {
+	challenge: new Uint8Array(),
+	rp: {
+		id: getWalletOrigin({ isDev: import.meta.env.DEV }).replace("https://", ""),
+		name: "SPC Wallet",
+	},
+	user: {
+		id: new Uint8Array(),
+		name: "jane.doe@example.com",
+		displayName: "Jane Doe",
+	},
+	pubKeyCredParams: [
+		{ type: "public-key", alg: -7 }, // "ES256"
+	],
+	authenticatorSelection: {
+		userVerification: "required",
+		residentKey: "required",
+		authenticatorAttachment: "platform",
+	},
+	timeout: 360000, // 6 minutes
+
+	// Indicate that this is an SPC credential. This is currently required to
+	// allow credential creation in an iframe, and so that the browser knows this
+	// credential relates to SPC.
+	extensions: {
+		payment: {
+			isPayment: true,
+		},
+	},
+	attestation: "none",
+} satisfies Partial<
+	PublicKeyCredentialCreationOptions & {
+		extensions: PublicKeyCredentialCreationOptions["extensions"] & {
+			payment: { isPayment: boolean };
+		};
+	}
+>;
+
 export const registerSpcCredential = async ({
 	userId,
 	challenge,
 }: { userId: string; challenge: string }) => {
-	const rpId = getWalletOrigin({ isDev: import.meta.env.DEV }).replace(
-		"https://",
-		"",
-	);
-	const opts = {
-		challenge: new Uint8Array(),
-		rp: {
-			id: rpId,
-			name: "SPC Wallet",
-		},
-		user: {
-			id: new Uint8Array(),
-			name: "jane.doe@example.com",
-			displayName: "Jane Doe",
-		},
-		pubKeyCredParams: [
-			{
-				type: "public-key",
-				alg: -7, // "ES256"
-			},
-		],
-		authenticatorSelection: {
-			userVerification: "required",
-			residentKey: "required",
-			authenticatorAttachment: "platform",
-		},
-		timeout: 360000, // 6 minutes
-
-		// Indicate that this is an SPC credential. This is currently required to
-		// allow credential creation in an iframe, and so that the browser knows this
-		// credential relates to SPC.
-		extensions: {
-			payment: {
-				isPayment: true,
-			},
-		},
-		attestation: "none",
-	} satisfies Partial<
-		PublicKeyCredentialCreationOptions & {
-			extensions: PublicKeyCredentialCreationOptions["extensions"] & {
-				payment: { isPayment: boolean };
-			};
-		}
-	>;
-
-	opts.user.id = toBuffer(userId);
-	opts.challenge = toBuffer(challenge);
+	const publicKey = { ...defaultSpcOpts };
+
+	publicKey.user.displayName = userId;
+	publicKey.user.name = userId;
+	publicKey.user.id = toBuffer(userId);
+	publicKey.challenge = toBuffer(challenge);
 
 	const cred = (await navigator.credentials.create({
-		publicKey: opts,
+		/**
+		 *  `payment` has not been added to the `PublicKeyCredentialCreationOptions`
+		 *  yet but it is available in chrome
+		 *  @ts-expect-error*/
+		publicKey,
 	})) as PublicKeyCredential | null;
 
 	if (!cred) throw new Error("No credential returned");
@@ -113,6 +112,7 @@ export const registerSpcCredential = async ({
 			username: userId,
 			credentialId: cred.id,
 			publicKey: serialisableCredential.response.publicKey,
+			dappName: document.referrer,
 		}),
 	});
 };
diff --git a/apps/wallet/src/pages/auth/register.ts b/apps/wallet/src/pages/auth/register.ts
index 7d9a1d8..3c60120 100644
--- a/apps/wallet/src/pages/auth/register.ts
+++ b/apps/wallet/src/pages/auth/register.ts
@@ -7,7 +7,14 @@ const storeCredentialsSchema = z.object({
 	credentialId: z.string(),
 	publicKey: z.string(),
 	userHandle: z.string().optional(),
-	dappName: z.string().optional(),
+	dappName: z
+		.string()
+		.optional()
+		.transform(
+			(v) =>
+				(v?.includes("://") ? new URL(v).hostname : v) ||
+				"spc-wallet.vercel.app",
+		),
 });
 
 export const POST: APIRoute = async (ctx) => {
@@ -15,6 +22,14 @@ export const POST: APIRoute = async (ctx) => {
 		const { username, credentialId, publicKey, userHandle, dappName } =
 			storeCredentialsSchema.parse(await ctx.request.json());
 
+		console.log("registering", {
+			username,
+			credentialId,
+			publicKey,
+			userHandle,
+			dappName,
+		});
+
 		await db
 			.insert(Credential)
 			.values({
@@ -27,10 +42,7 @@ export const POST: APIRoute = async (ctx) => {
 
 		await db
 			.insert(ConnectedDapps)
-			.values({
-				dappName: dappName || "https://spc-wallet.vercel.app",
-				credentialId: credentialId,
-			})
+			.values({ dappName, credentialId: credentialId })
 			.execute();
 
 		return new Response(null, { status: 204 });