From 52871e09d9218f3f2fb2ce4bd6e97f5c1fc15480 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Mon, 23 Sep 2024 16:22:10 -0700
Subject: account import

---
 src/components/Account.svelte                      |  6 +-
 src/components/WalletPass.svelte                   | 67 ++++++++++++++++++++++
 src/lib/utils.ts                                   |  1 +
 src/locales/en.json                                | 14 ++++-
 src/routes/(app)/[username]/(profile)/+page.svelte |  4 +-
 src/routes/(app)/account/[id]/+page.svelte         | 52 +++++++++++++++--
 src/routes/(app)/account/import/+page.svelte       | 43 +++++++-------
 src/routes/(app)/account/pass/+page.svelte         | 10 ++--
 src/routes/(app)/account/savings/+page.svelte      | 10 ++--
 src/routes/(app)/invoice/+page.server.ts           |  3 +-
 .../pay/[username]/[...amount]/+page.server.ts     |  5 +-
 src/routes/(app)/payments/[...page]/+page.svelte   |  2 +
 .../[amount]/[...feeRate]/+page.server.ts          |  5 +-
 .../[address]/[amount]/[...feeRate]/+page.svelte   | 61 +-------------------
 src/routes/(app)/send/invoice/[id]/+page.server.ts |  5 +-
 .../(app)/send/lightning/[payreq]/+page.server.ts  |  5 +-
 src/routes/(app)/sent/+page.server.ts              |  7 ---
 src/routes/(app)/sent/+page.svelte                 | 52 -----------------
 src/routes/(app)/sent/[id]/+page.server.ts         |  7 +++
 src/routes/(app)/sent/[id]/+page.svelte            | 49 ++++++++++++++++
 static/icons/balance.svg                           | 29 ++++++++++
 21 files changed, 266 insertions(+), 171 deletions(-)
 create mode 100644 src/components/WalletPass.svelte
 delete mode 100644 src/routes/(app)/sent/+page.server.ts
 delete mode 100644 src/routes/(app)/sent/+page.svelte
 create mode 100644 src/routes/(app)/sent/[id]/+page.server.ts
 create mode 100644 src/routes/(app)/sent/[id]/+page.svelte
 create mode 100644 static/icons/balance.svg

diff --git a/src/components/Account.svelte b/src/components/Account.svelte
index 47deadcd..4bfdc4ac 100644
--- a/src/components/Account.svelte
+++ b/src/components/Account.svelte
@@ -1,5 +1,4 @@
 <script>
-  import { account as acc } from "$lib/store";
   import Icon from "$comp/Icon.svelte";
   import Balance from "$comp/Balance.svelte";
   import { t } from "$lib/translations";
@@ -11,8 +10,7 @@
   $: refresh(account);
   let refresh = (a) => ({ seed, balance, id } = a);
 
-  let setAccount = () =>
-    (document.cookie = `aid=${id}; path=/; max-age=86400`);
+  let setAccount = () => (document.cookie = `aid=${id}; path=/; max-age=86400`);
 </script>
 
 <a href={`/payments`} class="block" on:click={setAccount}>
@@ -40,7 +38,7 @@
         </button>
       </a>
 
-      <a href={`/invoice?account=${id}`} class="contents" on:click={setAccount}>
+      <a href={`/invoice`} class="contents" on:click={setAccount}>
         <button
           class="rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex bg-primary grow"
         >
diff --git a/src/components/WalletPass.svelte b/src/components/WalletPass.svelte
new file mode 100644
index 00000000..7793ecc5
--- /dev/null
+++ b/src/components/WalletPass.svelte
@@ -0,0 +1,67 @@
+<script>
+  import { focus } from "$lib/utils";
+  import { t } from "$lib/translations";
+  import Icon from "$comp/Icon.svelte";
+  export let cancel, password, submit;
+  let revealPassword;
+</script>
+
+<div
+  class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-20"
+>
+  <div
+    class="relative top-1/3 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white space-y-5"
+  >
+    <h1 class="text-center text-2xl font-semibold">
+      {$t("payments.enterWalletPass")}
+    </h1>
+    <form on:submit|preventDefault={submit}>
+      <div class="relative mb-5">
+        {#if revealPassword}
+          <input
+            name="password"
+            type="text"
+            required
+            class="bg-primary"
+            bind:value={password}
+            autocapitalize="none"
+            use:focus
+          />
+        {:else}
+          <input
+            name="password"
+            type="password"
+            required
+            class="bg-primary"
+            bind:value={password}
+            autocapitalize="none"
+            use:focus
+          />
+        {/if}
+        <button
+          type="button"
+          on:click={() => (revealPassword = !revealPassword)}
+          class="absolute right-5 top-6"
+        >
+          <Icon icon={revealPassword ? "eye" : "eye-off"} />
+        </button>
+      </div>
+      <div class="w-full flex">
+        <button
+          type="button"
+          class="border-2 border-black rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80 mx-auto"
+          on:click={cancel}
+          on:keydown={cancel}
+        >
+          <div class="my-auto">Cancel</div>
+        </button>
+        <button
+          type="submit"
+          class="border-2 border-black rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80 mx-auto"
+        >
+          <div class="my-auto">Submit</div>
+        </button>
+      </div>
+    </form>
+  </div>
+</div>
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index c20a7d29..0997eeb9 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -287,6 +287,7 @@ export let types = {
   internal: "internal",
   fund: "fund",
   ecash: "ecash",
+  reconcile: "reconcile",
 };
 
 export let ease = (t: number): number =>
diff --git a/src/locales/en.json b/src/locales/en.json
index 9752a41d..78ef8de1 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1,6 +1,18 @@
 {
   "accounts": {
-    "savings": "Savings"
+    "addAccount": "Add account",
+    "create": "Create",
+    "import": "Import",
+    "accountSetup": "Account setup",
+    "enterSeed": "Enter a seed phrase",
+    "passwordMismatch": "Passwords don't match",
+    "generateSeed": "Generate a new seed phrase in your browser",
+    "accountPassword": "Account password",
+    "importSeed": "Enter an existing seed phrase",
+    "passwordWarning": "If you lose this password you won't be able to withdraw funds from the account or restore your seed phrase. We can't recover it for you.",
+    "savings": "Savings",
+    "password": "Password",
+    "confirmPassword": "Confirm password"
   },
 	"404": {
 		"404": "404",
diff --git a/src/routes/(app)/[username]/(profile)/+page.svelte b/src/routes/(app)/[username]/(profile)/+page.svelte
index 03fbc454..2c2ff9a8 100644
--- a/src/routes/(app)/[username]/(profile)/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/+page.svelte
@@ -41,13 +41,13 @@
     {/each}
 
     <div class="flex justify-center gap-2">
-      <a href={`/account/setup`} class="contents">
+      <a href={`/account/savings`} class="contents">
         <button
           class="rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex bg-black text-white w-full justify-center"
         >
           <div class="mx-auto flex gap-2">
             <Icon icon="plus" style="w-8 mx-auto invert" />
-            <div class="my-auto text-xl whitespace-nowrap">Add account</div>
+            <div class="my-auto text-xl whitespace-nowrap">{$t("accounts.addAccount")}</div>
           </div>
         </button>
       </a>
diff --git a/src/routes/(app)/account/[id]/+page.svelte b/src/routes/(app)/account/[id]/+page.svelte
index df121168..3dcd99b8 100644
--- a/src/routes/(app)/account/[id]/+page.svelte
+++ b/src/routes/(app)/account/[id]/+page.svelte
@@ -1,13 +1,27 @@
 <script>
+  import WalletPass from "$comp/WalletPass.svelte";
   import { goto } from "$app/navigation";
-  import { fail, focus, post } from "$lib/utils";
+  import { copy, fail, focus, post } from "$lib/utils";
   import { enhance } from "$app/forms";
   import { t } from "$lib/translations";
   import Icon from "$comp/Icon.svelte";
+  import { decrypt } from "nostr-tools/nip49";
+  import { entropyToMnemonic, mnemonicToSeed } from "@scure/bip39";
+  import { wordlist } from "@scure/bip39/wordlists/english";
 
   export let data;
   let { account, user } = data;
-  let { id, name } = account;
+  let { id, name, seed } = account;
+  let mnemonic, password;
+  let passwordPrompt;
+  let cancel = () => (passwordPrompt = false);
+  let toggle = () => (passwordPrompt = !passwordPrompt);
+
+  let submit = async () => {
+    toggle();
+    let entropy = await decrypt(seed, password);
+    mnemonic = entropyToMnemonic(entropy, wordlist);
+  };
 
   let del = async () => {
     try {
@@ -35,15 +49,45 @@
           class="rounded-2xl border py-3 font-bold mx-auto bg-black text-white px-4 w-full"
           >Submit</button
         >
+        {#if mnemonic}
+          <div class="p-8">{mnemonic}</div>
+
+          <button
+            on:click={() => copy(mnemonic)}
+            type="button"
+            class="flex gap-2 rounded-2xl border py-3 font-bold mx-auto px-4 w-full justify-center"
+          >
+            <Icon icon="copy" style="w-8 my-auto" />
+            <div class="my-auto">Copy</div></button
+          >
+        {:else if seed}
+          <button
+            on:click={toggle}
+            type="button"
+            class="flex gap-2 rounded-2xl border py-3 font-bold mx-auto px-4 w-full justify-center bg-primary"
+          >
+            <Icon icon="eye" style="w-8 my-auto" />
+            <div class="my-auto">Reveal mnemonic</div></button
+          >
+        {/if}
+
+        {#if seed}
         <button
           on:click={del}
           type="button"
-          class="flex gap-2 rounded-2xl border py-3 font-bold mx-auto px-4 w-full justify-center border-red-600 border-2"
+          class="flex gap-2 rounded-2xl border py-3 font-bold mx-auto px-4 w-full justify-center bg-primary"
         >
           <Icon icon="trash" style="w-8 my-auto" />
-          <div class="my-auto">Delete</div></button
+          <div class="my-auto"><span class="text-red-600">Delete</span> account</div></button
         >
+        {/if}
       </div>
+
+      <div />
     </form>
   </div>
 </div>
+
+{#if passwordPrompt}
+  <WalletPass bind:password bind:cancel bind:submit />
+{/if}
diff --git a/src/routes/(app)/account/import/+page.svelte b/src/routes/(app)/account/import/+page.svelte
index 866c1b1a..a1d6549b 100644
--- a/src/routes/(app)/account/import/+page.svelte
+++ b/src/routes/(app)/account/import/+page.svelte
@@ -1,7 +1,7 @@
 <script>
   import { goto } from "$app/navigation";
   import { mnemonic } from "$lib/store";
-  import { versions } from "$lib/utils";
+  import { fail, focus, versions } from "$lib/utils";
   import { t } from "$lib/translations";
   import { browser } from "$app/environment";
   import Icon from "$comp/Icon.svelte";
@@ -16,6 +16,7 @@
   };
 
   let submit = () => {
+    text = text.replace(/,/g, " ").trim();
     let valid = validateMnemonic(text, wordlist);
     if (valid) {
       $mnemonic = text;
@@ -29,28 +30,26 @@
 </script>
 
 <div class="space-y-5">
-  <h1 class="text-center text-3xl font-semibold">Import</h1>
+  <h1 class="text-center text-3xl font-semibold">{$t("accounts.import")}</h1>
 
   <div class="container w-full mx-auto text-lg px-4 max-w-xl space-y-2">
-    <div class="space-y-5">
-      <form on:submit|preventDefault={submit}>
-        <textarea
-          use:focus
-          name="text"
-          placeholder="Enter a seed phrase"
-          class="w-full p-4 border rounded-xl h-48 text-xl"
-          bind:value={text}
-          autocapitalize="none"
-        />
-        <button
-          bind:this={el}
-          type="submit"
-          class="flex bg-black text-white border rounded-2xl px-6 py-5 w-full font-bold gap-2 justify-center"
-        >
-          <Icon icon="send" style="w-8 my-auto invert" />
-          <div class="my-auto">{$t("user.send.next")}</div>
-        </button>
-      </form>
-    </div>
+    <form on:submit|preventDefault={submit} class="space-y-2">
+      <textarea
+        use:focus
+        name="text"
+        placeholder={$t("accounts.enterSeed")}
+        class="w-full p-4 border rounded-xl h-48 text-xl"
+        bind:value={text}
+        autocapitalize="none"
+      />
+      <button
+        bind:this={el}
+        type="submit"
+        class="flex bg-black text-white border rounded-2xl px-6 py-5 w-full font-bold gap-2 justify-center"
+      >
+        <Icon icon="send" style="w-8 my-auto invert" />
+        <div class="my-auto">{$t("user.send.next")}</div>
+      </button>
+    </form>
   </div>
 </div>
diff --git a/src/routes/(app)/account/pass/+page.svelte b/src/routes/(app)/account/pass/+page.svelte
index f5e956ff..2ce8b168 100644
--- a/src/routes/(app)/account/pass/+page.svelte
+++ b/src/routes/(app)/account/pass/+page.svelte
@@ -28,7 +28,7 @@
 
   let submit = async () => {
     if (!password || password !== confirm) {
-      fail("Passwords don't match");
+      fail($t("accounts.passwordMismatch"));
       return;
     }
 
@@ -59,7 +59,7 @@
 
 <div class="space-y-5">
   <div>
-    <h1 class="text-center text-3xl font-semibold">Account password</h1>
+    <h1 class="text-center text-3xl font-semibold">{$t("accounts.accountPassword")}</h1>
   </div>
 
   <form
@@ -67,8 +67,7 @@
     class="container w-full mx-auto text-lg px-4 max-w-xl space-y-5"
   >
     <p class="text-secondary mb-1">
-      If you lose this password you won't be able to use the account. We can't
-      recover it for you even if you have the seed phrase.
+    {$t("accounts.passwordWarning")}
     </p>
 
     <div class="relative">
@@ -85,6 +84,7 @@
           use:focus
           name="password"
           type="password"
+          placeholder={$t("accounts.password")}
           required
           bind:value={password}
           autocapitalize="none"
@@ -113,7 +113,7 @@
       {:else}
         <input
           type="password"
-          placeholder="Confirm password"
+          placeholder={$t("accounts.confirmPassword")}
           required
           bind:value={confirm}
           autocapitalize="none"
diff --git a/src/routes/(app)/account/savings/+page.svelte b/src/routes/(app)/account/savings/+page.svelte
index 8d52f997..f9c6305c 100644
--- a/src/routes/(app)/account/savings/+page.svelte
+++ b/src/routes/(app)/account/savings/+page.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <div class="space-y-5">
-  <h1 class="text-center text-3xl font-semibold">Wallet setup</h1>
+  <h1 class="text-center text-3xl font-semibold">{$t("accounts.accountSetup")}</h1>
 
   <div class="container w-full mx-auto text-lg px-4 max-w-xl space-y-2">
     <div class="space-y-5">
@@ -12,8 +12,8 @@
         <div class="shadow p-8 rounded-xl flex gap-4 hover:bg-primary">
           <img src="/icons/random.svg" class="w-20" />
           <div>
-            <div class="text-xl">Create</div>
-            <div class="text-secondary">Generate a new seed phrase in your browser</div>
+            <div class="text-xl">{$t("accounts.create")}</div>
+            <div class="text-secondary">{$t("accounts.generateSeed")}</div>
           </div>
         </div>
       </a>
@@ -21,8 +21,8 @@
         <div class="shadow p-8 rounded-xl flex gap-4 hover:bg-primary">
           <img src="/images/keys.png" class="w-20" />
           <div>
-            <div class="text-xl">Import</div>
-            <div class="text-secondary">Enter an existing seed phrase or wallet key</div>
+            <div class="text-xl">{$t("accounts.import")}</div>
+            <div class="text-secondary">{$t("accounts.importSeed")}</div>
           </div>
         </div>
       </a>
diff --git a/src/routes/(app)/invoice/+page.server.ts b/src/routes/(app)/invoice/+page.server.ts
index 7bac3f9b..45389f8c 100644
--- a/src/routes/(app)/invoice/+page.server.ts
+++ b/src/routes/(app)/invoice/+page.server.ts
@@ -4,6 +4,7 @@ import type { Invoice } from "$lib/types";
 
 export let load = async ({ cookies, parent }) => {
   let aid = cookies.get("aid");
+  console.log("AID", aid)
   let { subject, user, rates } = await parent();
 
   let invoice: Invoice = {
@@ -18,7 +19,7 @@ export let load = async ({ cookies, parent }) => {
   } catch (e) {
     console.log(e);
     error(500, "Failed to generate invoice");
-    }
+  }
 
   let { id } = invoice;
 
diff --git a/src/routes/(app)/pay/[username]/[...amount]/+page.server.ts b/src/routes/(app)/pay/[username]/[...amount]/+page.server.ts
index 7ccc23b0..cf8143f0 100644
--- a/src/routes/(app)/pay/[username]/[...amount]/+page.server.ts
+++ b/src/routes/(app)/pay/[username]/[...amount]/+page.server.ts
@@ -37,14 +37,15 @@ export async function load({ cookies, params, parent }) {
 
 export const actions = {
   default: async ({ cookies, request }) => {
+    let p;
     try {
       let body = await fd(request);
-      await post("/payments", body, auth(cookies));
+      p = await post("/payments", body, auth(cookies));
     } catch (e: any) {
       console.log(e);
       return fail(400, { message: e.message });
     }
 
-    redirect(307, "/sent");
+    redirect(307, `/sent/${p.id}`);
   },
 };
diff --git a/src/routes/(app)/payments/[...page]/+page.svelte b/src/routes/(app)/payments/[...page]/+page.svelte
index b7ea7b6e..2ffed537 100644
--- a/src/routes/(app)/payments/[...page]/+page.svelte
+++ b/src/routes/(app)/payments/[...page]/+page.svelte
@@ -213,6 +213,8 @@
                 <div class="text-secondary flex">
                   {#if [types.ecash, types.lightning].includes(p.type)}
                     <div class="text-3xl">⚡️</div>
+                  {:else if p.type === types.reconcile}
+                    <Icon icon="balance" style="w-6 mr-2" />
                   {:else if p.type === types.bitcoin}
                     <div class="my-auto mr-1">
                       <img
diff --git a/src/routes/(app)/send/bitcoin/[address]/[amount]/[...feeRate]/+page.server.ts b/src/routes/(app)/send/bitcoin/[address]/[amount]/[...feeRate]/+page.server.ts
index 2b8fe37c..e46a9f56 100644
--- a/src/routes/(app)/send/bitcoin/[address]/[amount]/[...feeRate]/+page.server.ts
+++ b/src/routes/(app)/send/bitcoin/[address]/[amount]/[...feeRate]/+page.server.ts
@@ -35,14 +35,15 @@ export const actions = {
     params: { address, amount, feeRate },
     request,
   }) => {
+    let p;
     try {
       let body = await fd(request);
-      await post("/bitcoin/send", body, auth(cookies));
+      p = await post("/bitcoin/send", body, auth(cookies));
     } catch (e: any) {
       console.log("problem sending bitcoin", e);
       return fail(400, { address, amount, feeRate, message: e.message });
     }
 
-    redirect(307, "/sent");
+    redirect(307, `/sent/${p.id}`);
   },
 };
diff --git a/src/routes/(app)/send/bitcoin/[address]/[amount]/[...feeRate]/+page.svelte b/src/routes/(app)/send/bitcoin/[address]/[amount]/[...feeRate]/+page.svelte
index f6c6980d..4da2e04c 100644
--- a/src/routes/(app)/send/bitcoin/[address]/[amount]/[...feeRate]/+page.svelte
+++ b/src/routes/(app)/send/bitcoin/[address]/[amount]/[...feeRate]/+page.svelte
@@ -30,7 +30,6 @@
   export let form;
 
   let { encode, decode } = hexUtil;
-  let revealPassword = false;
   let passwordPrompt;
   let password;
   let cancel = () => (passwordPrompt = false);
@@ -206,65 +205,7 @@
 </div>
 
 {#if passwordPrompt}
-  <div
-    class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-20"
-  >
-    <div
-      class="relative top-1/3 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white space-y-5"
-    >
-      <h1 class="text-center text-2xl font-semibold">
-        {$t("payments.enterWalletPass")}
-      </h1>
-      <form on:submit|preventDefault={signTx}>
-        <div class="relative mb-5">
-          {#if revealPassword}
-            <input
-              name="password"
-              type="text"
-              required
-              class="bg-primary"
-              bind:value={password}
-              autocapitalize="none"
-              use:focus
-            />
-          {:else}
-            <input
-              name="password"
-              type="password"
-              required
-              class="bg-primary"
-              bind:value={password}
-              autocapitalize="none"
-              use:focus
-            />
-          {/if}
-          <button
-            type="button"
-            on:click={() => (revealPassword = !revealPassword)}
-            class="absolute right-5 top-6"
-          >
-            <Icon icon={revealPassword ? "eye" : "eye-off"} />
-          </button>
-        </div>
-        <div class="w-full flex">
-          <button
-            type="button"
-            class="border-2 border-black rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80 mx-auto"
-            on:click={cancel}
-            on:keydown={cancel}
-          >
-            <div class="my-auto">Cancel</div>
-          </button>
-          <button
-            type="submit"
-            class="border-2 border-black rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80 mx-auto"
-          >
-            <div class="my-auto">Submit</div>
-          </button>
-        </div>
-      </form>
-    </div>
-  </div>
+  <WalletPass bind:password bind:cancel />
 {/if}
 
 <style>
diff --git a/src/routes/(app)/send/invoice/[id]/+page.server.ts b/src/routes/(app)/send/invoice/[id]/+page.server.ts
index c31bcd7b..6c89912d 100644
--- a/src/routes/(app)/send/invoice/[id]/+page.server.ts
+++ b/src/routes/(app)/send/invoice/[id]/+page.server.ts
@@ -22,16 +22,17 @@ export async function load({ params: { id }, parent }) {
 
 export const actions = {
   default: async ({ cookies, params: { id }, request }) => {
+    let p;
     try {
       let body = await fd(request);
       body.hash = id;
 
-      await post("/payments", body, auth(cookies));
+      p = await post("/payments", body, auth(cookies));
     } catch (e: any) {
       console.log("payment failed", id, e);
       error(500, e.message);
     }
 
-    redirect(307, "/sent");
+    redirect(307, `/sent/${p.id}`);
   },
 };
diff --git a/src/routes/(app)/send/lightning/[payreq]/+page.server.ts b/src/routes/(app)/send/lightning/[payreq]/+page.server.ts
index ddec2968..3e87fa53 100644
--- a/src/routes/(app)/send/lightning/[payreq]/+page.server.ts
+++ b/src/routes/(app)/send/lightning/[payreq]/+page.server.ts
@@ -9,16 +9,17 @@ export const actions = {
   setAmount: async ({ request }) => fd(request),
 
   send: async ({ cookies, request }) => {
+    let p;
     try {
       let body = await fd(request);
 
-      await post("/payments", body, auth(cookies));
+      p = await post("/payments", body, auth(cookies));
     } catch (e: any) {
       if (e.message.includes("unusable"))
         e.message = "Failed to route payment, try sending a lower amount";
       return fail(400, { message: e.message });
     }
 
-    redirect(307, "/sent");
+    redirect(307, `/sent/${p.id}`);
   },
 };
diff --git a/src/routes/(app)/sent/+page.server.ts b/src/routes/(app)/sent/+page.server.ts
deleted file mode 100644
index a7c24fb8..00000000
--- a/src/routes/(app)/sent/+page.server.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { get, auth } from "$lib/utils";
-
-export let load = async ({ cookies }) => {
-  let aid = cookies.get("aid");
-  let { payments } = await get(`/payments?aid=${aid}`, auth(cookies));
-  return { payments };
-};
diff --git a/src/routes/(app)/sent/+page.svelte b/src/routes/(app)/sent/+page.svelte
deleted file mode 100644
index 7d67ac03..00000000
--- a/src/routes/(app)/sent/+page.svelte
+++ /dev/null
@@ -1,52 +0,0 @@
-<script>
-  import { fiat, f, focus, s, sat, sats } from "$lib/utils";
-  import { scale } from "svelte/transition";
-  import Icon from "$comp/Icon.svelte";
-  import { toast } from "@zerodevx/svelte-toast";
-  import { t } from "$lib/translations";
-
-  export let data;
-  let { payments, user } = data;
-  let { currency, username } = user;
-
-  let payment = payments[0];
-  let { amount, rate, tip } = payment;
-  amount = Math.abs(amount);
-
-  toast.pop(0);
-</script>
-
-<div class="text-center mt-20 md:mt-0">
-  <div
-    class="flex w-full max-w-[200px] mx-auto py-20"
-    in:scale={{ start: 0.5 }}
-  >
-    <Icon icon="check" style="mx-auto" />
-  </div>
-  <h1 class="text-3xl md:text-4xl font-bold mb-6">{$t("payments.sent")}!</h1>
-  <h2 class="text-2xl md:text-3xl font-semibold">
-    {f(fiat(amount, rate), currency)}
-    {#if tip}
-      <span class="text-lg">
-        + {f(fiat(tip, rate), currency)}
-      </span>
-    {/if}
-  </h2>
-  <h3 class="text-secondary md:text-lg mb-6 mt-1">
-    ⚡️{s(amount)}
-
-    {#if tip}
-      <span class="text-lg">
-        + ⚡️{s(tip)}
-      </span>
-    {/if}
-  </h3>
-</div>
-
-<a href={`/${username}`} use:focus>
-  <div class="opacity-0 w-screen h-screen fixed top-0 left-0 z-50" />
-</a>
-
-<div class="fixed bottom-10 w-full text-center">
-  {$t("payments.tapAnywhere")}
-</div>
diff --git a/src/routes/(app)/sent/[id]/+page.server.ts b/src/routes/(app)/sent/[id]/+page.server.ts
new file mode 100644
index 00000000..38d95e4e
--- /dev/null
+++ b/src/routes/(app)/sent/[id]/+page.server.ts
@@ -0,0 +1,7 @@
+import { get, auth } from "$lib/utils";
+
+export let load = async ({ cookies, params }) => {
+  let { id } = params;
+    let p  = await get(`/payments/${id}`, auth(cookies));
+  return p;
+};
diff --git a/src/routes/(app)/sent/[id]/+page.svelte b/src/routes/(app)/sent/[id]/+page.svelte
new file mode 100644
index 00000000..24804974
--- /dev/null
+++ b/src/routes/(app)/sent/[id]/+page.svelte
@@ -0,0 +1,49 @@
+<script>
+  import { fiat, f, focus, s, sat, sats } from "$lib/utils";
+  import { scale } from "svelte/transition";
+  import Icon from "$comp/Icon.svelte";
+  import { toast } from "@zerodevx/svelte-toast";
+  import { t } from "$lib/translations";
+
+  export let data;
+  let { amount, rate, tip, user } = data;
+  let { currency, username } = user;
+  amount = Math.abs(amount);
+
+  toast.pop(0);
+</script>
+
+<div class="text-center mt-20 md:mt-0">
+  <div
+    class="flex w-full max-w-[200px] mx-auto py-20"
+    in:scale={{ start: 0.5 }}
+  >
+    <Icon icon="check" style="mx-auto" />
+  </div>
+  <h1 class="text-3xl md:text-4xl font-bold mb-6">{$t("payments.sent")}!</h1>
+  <h2 class="text-2xl md:text-3xl font-semibold">
+    {f(fiat(amount, rate), currency)}
+    {#if tip}
+      <span class="text-lg">
+        + {f(fiat(tip, rate), currency)}
+      </span>
+    {/if}
+  </h2>
+  <h3 class="text-secondary md:text-lg mb-6 mt-1">
+    ⚡️{s(amount)}
+
+    {#if tip}
+      <span class="text-lg">
+        + ⚡️{s(tip)}
+      </span>
+    {/if}
+  </h3>
+</div>
+
+<a href={`/${username}`} use:focus>
+  <div class="opacity-0 w-screen h-screen fixed top-0 left-0 z-50" />
+</a>
+
+<div class="fixed bottom-10 w-full text-center">
+  {$t("payments.tapAnywhere")}
+</div>
diff --git a/static/icons/balance.svg b/static/icons/balance.svg
new file mode 100644
index 00000000..5c8ccaf6
--- /dev/null
+++ b/static/icons/balance.svg
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg height="800px" width="800px" version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 512 512"  xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#000000;}
+</style>
+<g>
+	<path class="st0" d="M512,339.979h-0.447l-78.911-181.464c7.507,2.712,13.862,5.052,18.787,6.901l9.242-24.513
+		c-26.263-9.878-90.312-32.634-160.397-53.254c0-10.817-4.432-20.665-11.522-27.755c-7.075-7.106-16.953-11.499-27.771-11.499
+		c-10.817,0-20.718,4.394-27.786,11.499c-2.333,2.318-4.348,4.939-6.022,7.803C157.761,50.151,92.902,37.357,65.745,32.569
+		l-4.552,25.794c5.749,1.015,13.317,2.416,22.332,4.159L0.454,253.545H0c0.06,0.197,0.129,0.394,0.189,0.591l-0.167,0.386
+		l0.342,0.151c12.817,40.619,50.754,70.078,95.599,70.078c44.852,0,82.79-29.46,95.599-70.078l0.349-0.151l-0.167-0.386
+		c0.061-0.197,0.129-0.394,0.19-0.591h-0.455L110.772,67.961c30.975,6.371,70.479,15.098,111.34,25.445
+		c1.257,8.545,5.265,16.249,11.082,22.028c3.424,3.447,7.53,6.242,12.068,8.227v276.373c-17.734,0-31.543,0-31.543,0
+		s-7.56,47.27-41.588,54.814v24.582h177.692v-24.582c-34.02-7.544-41.588-54.814-41.588-54.814s-13.809,0-31.543,0V123.661
+		c4.53-1.985,8.628-4.78,12.06-8.227c0.963-0.97,1.909-1.984,2.772-3.06c41.732,12.264,81.547,25.369,112.325,35.997
+		l-83.327,191.608h-0.454c0.06,0.204,0.128,0.394,0.197,0.591l-0.174,0.386l0.34,0.151c12.818,40.618,50.754,70.078,95.606,70.078
+		c44.846,0,82.782-29.453,95.599-70.07l0.341-0.159l-0.167-0.386C511.871,340.373,511.947,340.183,512,339.979z M174.343,253.545
+		H17.59L95.97,73.317L174.343,253.545z M275.783,102.481c-1.546,1.538-3.326,2.871-5.296,3.841
+		c-2.825,1.492-6.045,2.311-9.507,2.311c-5.81,0-10.999-2.334-14.824-6.152c-1.068-1.106-2.046-2.28-2.879-3.59
+		c-2.068-3.227-3.249-7.045-3.249-11.211c0-5.818,2.333-11.006,6.128-14.832c0.084-0.076,0.159-0.151,0.243-0.205
+		c3.795-3.674,8.87-5.915,14.582-5.915c5.818,0,11.007,2.332,14.803,6.12c2.537,2.545,4.454,5.712,5.424,9.272
+		c0.469,1.758,0.734,3.621,0.734,5.56C281.941,93.497,279.608,98.678,275.783,102.481z M337.657,339.979l78.38-180.23l78.373,180.23
+		H337.657z"/>
+</g>
+</svg>
\ No newline at end of file
-- 
cgit v1.2.3