ark route

4 files changed, 61 insertions, 3 deletions

diff --git a/src/components/About.svelte b/src/components/About.svelte
index 331a5188..8f74b47c 100644
--- a/src/components/About.svelte
+++ b/src/components/About.svelte
@@ -78,7 +78,7 @@
 
   <div class="relative">
     <a href="/map" class="contents">
-      <img src="/map.png" class="mx-auto" alt="Map" />
+      <img src="/map.webp" class="mx-auto" alt="Map" />
     </a>
 
     <a href="/map" class="contents">
diff --git a/src/lib/ark.ts b/src/lib/ark.ts
new file mode 100644
index 00000000..0986983a
--- /dev/null
+++ b/src/lib/ark.ts
@@ -0,0 +1,5 @@
+import { persistLocal } from "$lib/store";
+
+const prefix = "ark";
+export const mnemonic = persistLocal(`${prefix}mnemonic`, "");
+export const password = persistLocal(`${prefix}password`, "");
diff --git a/src/lib/store.ts b/src/lib/store.ts
index c7dc9970..0148f480 100644
--- a/src/lib/store.ts
+++ b/src/lib/store.ts
@@ -1,7 +1,7 @@
 import { browser } from "$app/environment";
 import { writable } from "svelte/store";
 
-const persistSession = (key, defaultValue = undefined) => {
+export const persistSession = (key, defaultValue = undefined) => {
 	const s = writable(
 		browser &&
 		sessionStorage.getItem(key) &&
@@ -17,7 +17,7 @@ const persistSession = (key, defaultValue = undefined) => {
 	return s;
 };
 
-const persistLocal = (key, defaultValue: any = undefined) => {
+export const persistLocal = (key, defaultValue: any = undefined) => {
 	const s = writable(
 		browser &&
 		localStorage.getItem(key) &&
diff --git a/src/routes/(app)/ark/+page.svelte b/src/routes/(app)/ark/+page.svelte
new file mode 100644
index 00000000..81ef9354
--- /dev/null
+++ b/src/routes/(app)/ark/+page.svelte
@@ -0,0 +1,53 @@
+<script>
+  import { SingleKey, Wallet } from "@arkade-os/sdk";
+  import { onMount, tick } from "svelte";
+  import { HDKey } from "@scure/bip32";
+
+  const identity = SingleKey.fromHex(
+    "ce66c68f8875c0c98a502c666303dc183a21600130013c06f9d1edf60207abf2",
+  );
+
+  let loading = $state();
+  let balance = $state();
+
+  onMount(async () => {
+    setTimeout(checkBalance, 1000);
+  });
+
+  let checkBalance = async (e) => {
+    e?.preventDefault();
+    loading = true;
+
+    const wallet = await Wallet.create({
+      identity,
+      arkServerUrl: "https://arkade.computer",
+    });
+
+    balance = await wallet.getBalance();
+
+    loading = false;
+  };
+</script>
+
+<div class="space-y-5">
+  <h1 class="text-center text-3xl font-semibold">Ark</h1>
+
+  <div class="container w-full mx-auto text-lg px-4 max-w-xl space-y-5">
+    {#if loading}
+      <div>
+        <div class="loading loading-spinner"></div>
+      </div>
+    {:else if typeof balance !== "undefined"}
+      <div class="flex items-center gap-2">
+        <div>
+          {balance.available} sats
+        </div>
+      </div>
+    {/if}
+
+    <div class="flex gap-2 justify-center w-full">
+      <a href="/receive" class="btn grow">Receive</a>
+      <a href="/send" class="btn grow">Send</a>
+    </div>
+  </div>
+</div>