From 9c4816e3a9acb8e917cf3a034a8622d9026632a6 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Mon, 9 Sep 2024 15:54:22 -0700
Subject: accounts

---
 src/components/Account.svelte                      | 66 ++++++++---------
 .../(app)/[username]/(profile)/+page.server.ts     |  5 +-
 src/routes/(app)/[username]/(profile)/+page.svelte | 20 ++++--
 src/routes/(app)/[username]/+layout.svelte         |  2 +
 .../receive/[...param]/+page.server.ts             | 17 +++--
 .../[username]/account/setup/step2/+page.svelte    |  7 +-
 .../(app)/[username]/invoice/[id]/+page.svelte     | 82 +++++++++++-----------
 7 files changed, 103 insertions(+), 96 deletions(-)

(limited to 'src')

diff --git a/src/components/Account.svelte b/src/components/Account.svelte
index a781e809..a9b3d6ba 100644
--- a/src/components/Account.svelte
+++ b/src/components/Account.svelte
@@ -4,55 +4,45 @@
   import { t } from "$lib/translations";
 
   export let user, rate, account;
-  let { balance, setup, type, id } = account;
+  let { seed, balance, id } = account;
+  $: type = seed ? "Savings":"Cash";
 </script>
 
 <a href={`/${user.username}/${id}/payments`.replace(/undefined\//, "")}>
   <div class="border rounded-xl shadow p-4 space-y-5">
     <div class="flex justify-center lg:justify-start">
       <Balance {balance} {user} {rate} />
-      <div class="ml-auto text-secondary">{type}</div>
+      <div class="ml-auto text-right">
+        <div>{type} account</div>
+      </div>
     </div>
 
     <div class="flex flex-wrap gap-3 justify-center w-full text-xl">
-      {#if setup}
-        <a href={`/send`} class="contents grow">
-          <button
-            type="button"
-            class="rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex bg-primary grow"
-          >
-            <div class="mx-auto flex gap-2">
-              <Icon icon="send" style="w-8" />
-              <div class="my-auto">{$t("user.dashboard.send")}</div>
-            </div>
-          </button>
-        </a>
+      <a href={`/send`} class="contents grow">
+        <button
+          type="button"
+          class="rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex bg-primary grow"
+        >
+          <div class="mx-auto flex gap-2">
+            <Icon icon="send" style="w-8" />
+            <div class="my-auto">{$t("user.dashboard.send")}</div>
+          </div>
+        </button>
+      </a>
 
-        <a
-          href={`/${user.username}/${id}/receive`.replace(/undefined\//, "")}
-          class="contents"
+      <a
+        href={`/${user.username}/${id}/receive`.replace(/undefined\//, "")}
+        class="contents"
+      >
+        <button
+          class="rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex bg-primary grow"
         >
-          <button
-            class="rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex bg-primary grow"
-          >
-            <div class="mx-auto flex gap-2">
-              <Icon icon="receive" style="w-8" />
-              <div class="my-auto">{$t("user.dashboard.receive")}</div>
-            </div>
-          </button>
-        </a>
-      {:else}
-        <a href={`/${user.username}/account/setup`} class="contents">
-          <button
-            class="rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex bg-primary grow"
-          >
-            <div class="mx-auto flex gap-2">
-              <Icon icon="settings" style="w-8" />
-              <div class="my-auto">{$t("user.dashboard.setup")}</div>
-            </div>
-          </button>
-        </a>
-      {/if}
+          <div class="mx-auto flex gap-2">
+            <Icon icon="receive" style="w-8" />
+            <div class="my-auto">{$t("user.dashboard.receive")}</div>
+          </div>
+        </button>
+      </a>
     </div>
   </div>
 </a>
diff --git a/src/routes/(app)/[username]/(profile)/+page.server.ts b/src/routes/(app)/[username]/(profile)/+page.server.ts
index 59eb44d5..9c9be68a 100644
--- a/src/routes/(app)/[username]/(profile)/+page.server.ts
+++ b/src/routes/(app)/[username]/(profile)/+page.server.ts
@@ -4,8 +4,11 @@ export async function load({ cookies, depends, parent }) {
   depends("app:items");
 
   let { subject } = await parent();
+
+  let accounts = await get("/accounts", auth(cookies));
+
   let items = await get(`/${subject.id}/items`, auth(cookies));
   items.map((i) => (i.quantity = 0));
 
-  return { items };
+  return { accounts, items };
 }
diff --git a/src/routes/(app)/[username]/(profile)/+page.svelte b/src/routes/(app)/[username]/(profile)/+page.svelte
index 7c0de9d8..25244c6d 100644
--- a/src/routes/(app)/[username]/(profile)/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/+page.svelte
@@ -9,7 +9,7 @@
 
   export let data;
 
-  let { subject, user, items, rates } = data;
+  let { accounts, subject, user, items, rates } = data;
   $: ({ currency } = subject);
   $: rate = rates[currency];
   $: total = items.reduce((a, b) => a + b.price * b.quantity, 0);
@@ -24,11 +24,6 @@
   };
 
   if (user) user.savings = 0;
-
-  let accounts = [
-    { balance: user.balance, setup: true, type: "Cash" },
-    { id: "pubtest", balance: user.savings, setup: !!user.seed, type: "Savings" },
-  ];
 </script>
 
 {#if !user.balance}
@@ -39,12 +34,23 @@
   </div>
 {/if}
 
-<div class="space-y-5">
+<div class="space-y-2">
   {#if user?.id === subject.id}
     {#each accounts as account}
       <Account {user} {rate} {account} />
     {/each}
 
+    <button
+      class="rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex bg-black text-white"
+    >
+      <a href={`/${user.username}/account/setup`}>
+        <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>
+      </a>
+    </button>
+
     {#if $installPrompt}
       <button
         class="rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex bg-black text-white grow basis-full fixed bottom-16 xl:hidden"
diff --git a/src/routes/(app)/[username]/+layout.svelte b/src/routes/(app)/[username]/+layout.svelte
index dd29e3aa..cd517fa9 100644
--- a/src/routes/(app)/[username]/+layout.svelte
+++ b/src/routes/(app)/[username]/+layout.svelte
@@ -20,6 +20,8 @@
   <slot />
 </div>
 
+<slot name="fixed" />
+
 <style>
   @keyframes fade-in {
     from {
diff --git a/src/routes/(app)/[username]/[...account]/receive/[...param]/+page.server.ts b/src/routes/(app)/[username]/[...account]/receive/[...param]/+page.server.ts
index 13eb1381..d9614a1c 100644
--- a/src/routes/(app)/[username]/[...account]/receive/[...param]/+page.server.ts
+++ b/src/routes/(app)/[username]/[...account]/receive/[...param]/+page.server.ts
@@ -1,19 +1,26 @@
-import { redirect } from "@sveltejs/kit";
+import { error, redirect } from "@sveltejs/kit";
 import { auth, post } from "$lib/utils";
 import type { Invoice } from "$lib/types";
 
 export let load = async ({ cookies, params, parent }) => {
   let { account } = params;
-  let {subject, user, rates } = await parent();
+  let { subject, user, rates } = await parent();
 
   let invoice: Invoice = {
     account,
-    type: account ? "bitcoin": "lightning",
+    type: account ? "bitcoin" : "lightning",
     rate: rates[user?.currency || subject?.currency],
   };
 
-  if(!user) user = subject;
-  invoice = await post("/invoice", { invoice, account, user }, auth(cookies));
+  if (!user) user = subject;
+
+  try {
+    invoice = await post("/invoice", { invoice, account, user }, auth(cookies));
+  } catch (e) {
+    console.log(e);
+    error(500, "Failed to generate invoice");
+    }
+
   let { id } = invoice;
 
   if (invoice.memoPrompt && !invoice.memo) {
diff --git a/src/routes/(app)/[username]/account/setup/step2/+page.svelte b/src/routes/(app)/[username]/account/setup/step2/+page.svelte
index d8f44e16..8169ce06 100644
--- a/src/routes/(app)/[username]/account/setup/step2/+page.svelte
+++ b/src/routes/(app)/[username]/account/setup/step2/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { focus } from "$lib/utils";
   import { t } from "$lib/translations";
   import { mnemonic } from "$lib/store";
   import Icon from "$comp/Icon.svelte";
@@ -14,9 +15,9 @@
   let password;
 
   let submit = async () => {
-    user.seed = await encrypt(mnemonicToEntropy($mnemonic, wordlist), password);
+    let seed = await encrypt(mnemonicToEntropy($mnemonic, wordlist), password);
     try {
-      await post("/api/user", user);
+      await post("/api/accounts", { seed });
       goto(`/${user.username}`);
     } catch (e) {
       console.log(e);
@@ -40,7 +41,7 @@
       than your login password. We can't reset it if you lose it.
     </p>
 
-    <input type="text" placeholder="Password" bind:value={password} />
+      <input use:focus type="text" placeholder="Password" bind:value={password} />
 
     <button
       class="bg-black text-white w-full px-5 py-6 text-xl rounded-2xl font-bold"
diff --git a/src/routes/(app)/[username]/invoice/[id]/+page.svelte b/src/routes/(app)/[username]/invoice/[id]/+page.svelte
index 24e75fa5..1f2bbb51 100644
--- a/src/routes/(app)/[username]/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/[username]/invoice/[id]/+page.svelte
@@ -296,48 +296,46 @@
   {/if}
 </div>
 
-{#if settingAmount}
-  <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-12 border w-96 shadow-lg rounded-md bg-white space-y-5"
-    >
-      <form submit={setAmount}>
-        <Numpad
-          bind:amount={newAmount}
-          bind:currency
-          bind:rate
-          bind:fiat
-          bind:submit
-        />
-        <div class="w-full flex flex-wrap gap-2">
-          <button
-            type="submit"
-            on:click={setAmount}
-            class="border-2 border-black rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80 mx-auto bg-black text-white w-full"
-          >
-            <div class="my-auto">Ok</div>
-          </button>
-          <button
-            bind:this={submit}
-            type="button"
-            class="border-2 border-black rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80 mx-auto w-full"
-            on:click={toggleAmount}
-            on:keydown={toggleAmount}
-          >
-            <div class="my-auto">Cancel</div>
-          </button>
-        </div>
-      </form>
-
-      <div class="flex justify-between items-center">
-        <span class="font-bold">{$t("payments.amountPrompt")}</span>
-        <Toggle id="notify" bind:value={$amountPrompt} />
-      </div>
-    </div>
-  </div>
-{/if}
+  <!-- <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-12 border w-96 shadow-lg rounded-md bg-white space-y-5" -->
+  <!--   > -->
+  <!--     <form submit={setAmount}> -->
+  <!--       <Numpad -->
+  <!--         bind:amount={newAmount} -->
+  <!--         bind:currency -->
+  <!--         bind:rate -->
+  <!--         bind:fiat -->
+  <!--         bind:submit -->
+  <!--       /> -->
+  <!--       <div class="w-full flex flex-wrap gap-2"> -->
+  <!--         <button -->
+  <!--           type="submit" -->
+  <!--           on:click={setAmount} -->
+  <!--           class="border-2 border-black rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80 mx-auto bg-black text-white w-full" -->
+  <!--         > -->
+  <!--           <div class="my-auto">Ok</div> -->
+  <!--         </button> -->
+  <!--         <button -->
+  <!--           bind:this={submit} -->
+  <!--           type="button" -->
+  <!--           class="border-2 border-black rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80 mx-auto w-full" -->
+  <!--           on:click={toggleAmount} -->
+  <!--           on:keydown={toggleAmount} -->
+  <!--         > -->
+  <!--           <div class="my-auto">Cancel</div> -->
+  <!--         </button> -->
+  <!--       </div> -->
+  <!--     </form> -->
+  <!--  -->
+  <!--     <div class="flex justify-between items-center"> -->
+  <!--       <span class="font-bold">{$t("payments.amountPrompt")}</span> -->
+  <!--       <Toggle id="notify" bind:value={$amountPrompt} /> -->
+  <!--     </div> -->
+  <!--   </div> -->
+  <!-- </div> -->
 
 <style>
   .invoice {
-- 
cgit v1.2.3