cash accounts

3 files changed, 106 insertions, 51 deletions

diff --git a/src/routes/(app)/account/cash/+page.svelte b/src/routes/(app)/account/cash/+page.svelte
new file mode 100644
index 00000000..de0092a4
--- /dev/null
+++ b/src/routes/(app)/account/cash/+page.svelte
@@ -0,0 +1,29 @@
+<script>
+  import { t } from "$lib/translations";
+</script>
+
+<div class="space-y-5">
+  <h1 class="text-center text-3xl font-semibold">Choose your custodian</h1>
+
+  <div class="container w-full mx-auto text-lg px-4 max-w-xl space-y-5">
+    <a href="/account/cash">
+    <div class="shadow p-8 rounded-xl flex gap-4">
+      <img src="/icons/logo-symbol.svg" class="w-20" />
+      <div>
+      <div class="text-xl">Coinos</div>
+      <div class="text-secondary">
+        https://mint.coinos.io
+      </div>
+      </div>
+    </div>
+    <div class="shadow p-8 rounded-xl flex gap-4">
+      <img src="/images/minibits.png" class="w-20" />
+      <div>
+      <div class="text-xl">Minibits</div>
+      <div class="text-secondary">
+        https://mint.minibits.cash/bitcoin
+      </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/routes/(app)/account/self/+page.svelte b/src/routes/(app)/account/self/+page.svelte
new file mode 100644
index 00000000..833def87
--- /dev/null
+++ b/src/routes/(app)/account/self/+page.svelte
@@ -0,0 +1,59 @@
+<script>
+  import { copy } from "$lib/utils";
+  import { t } from "$lib/translations";
+  import Icon from "$comp/Icon.svelte";
+  import { mnemonic } from "$lib/store";
+  import { generateMnemonic } from "@scure/bip39";
+  import { wordlist } from "@scure/bip39/wordlists/english";
+
+  export let data;
+  let { user } = data;
+
+  let reveal;
+
+  let toggleSeed = async () => {
+    try {
+      $mnemonic = await generateMnemonic(wordlist);
+      reveal = !reveal;
+    } catch (e) {
+      console.log(e);
+    }
+  };
+</script>
+
+<div class="space-y-5">
+  <h1 class="text-center text-3xl font-semibold">Account setup</h1>
+  <h2 class="text-center text-2xl text-secondary">Step 1</h2>
+
+  <div class="container w-full mx-auto text-lg px-4 max-w-xl space-y-5">
+    <p class="text-secondary mb-1">
+      Whoever knows these words in the correct order can withdraw funds from the account. We can't
+      recover them if you lose them.
+    </p>
+
+    {#if reveal}
+      <div class="text-2xl border p-4 text-center rounded-2xl">
+        {$mnemonic}
+      </div>
+
+      <div>
+        <a href={`/account/setup/step2`} class="contents">
+          <button
+            type="button"
+            class="bg-black text-white w-full px-5 py-6 text-xl rounded-2xl font-bold"
+            on:click={toggleSeed}
+          >
+            I've written down my seed phrase
+          </button>
+        </a>
+      </div>
+    {:else}
+      <div class="flex justify-center">
+        <button type="button" class="primary" on:click={toggleSeed}>
+          <Icon icon="warning" style="mr-2 w-6 my-auto" />
+          {$t("user.settings.revealSeed")}
+        </button>
+      </div>
+    {/if}
+  </div>
+</div>
diff --git a/src/routes/(app)/account/setup/+page.svelte b/src/routes/(app)/account/setup/+page.svelte
index 5a15316a..f19c4c96 100644
--- a/src/routes/(app)/account/setup/+page.svelte
+++ b/src/routes/(app)/account/setup/+page.svelte
@@ -1,64 +1,31 @@
 <script>
-  import { copy } from "$lib/utils";
   import { t } from "$lib/translations";
-  import Icon from "$comp/Icon.svelte";
-  import { mnemonic } from "$lib/store";
-  import { generateMnemonic } from "@scure/bip39";
-  import { wordlist } from "@scure/bip39/wordlists/english";
-
-  export let data;
-  let { user } = data;
-
-  let reveal;
-
-  let toggleSeed = async () => {
-    try {
-      $mnemonic = await generateMnemonic(wordlist);
-      reveal = !reveal;
-    } catch (e) {
-      console.log(e);
-    }
-  };
 </script>
 
 <div class="space-y-5">
-  <h1 class="text-center text-3xl font-semibold">Account setup</h1>
-  <h2 class="text-center text-2xl text-secondary">Step 1</h2>
+  <h1 class="text-center text-3xl font-semibold">Choose account type</h1>
 
   <div class="container w-full mx-auto text-lg px-4 max-w-xl space-y-5">
-    <p class="text-secondary mb-1">
-      The keys to your savings account are derived from a seed phrase. When
-      you're ready, write it down and keep it safe.
-    </p>
-
-    <p class="text-secondary mb-1">
-      Whoever knows these words in the correct order can withdraw funds from the account. We can't
-      recover them if you lose them.
-    </p>
-
-    {#if reveal}
-      <div class="text-2xl border p-4 text-center rounded-2xl">
-        {$mnemonic}
+    <a href="/account/cash">
+    <div class="shadow p-8 rounded-xl flex gap-4">
+      <img src="/images/cash.png" class="w-20" />
+      <div>
+      <div class="text-xl">Cash</div>
+      <div class="text-secondary">
+        Your balance is held with a custodian. Payments are faster and
+        cheaper.
       </div>
-
+      </div>
+    </div>
+    <div class="shadow p-8 rounded-xl flex gap-4">
+      <img src="/images/keys.png" class="w-20" />
       <div>
-        <a href={`/account/setup/step2`} class="contents">
-          <button
-            type="button"
-            class="bg-black text-white w-full px-5 py-6 text-xl rounded-2xl font-bold"
-            on:click={toggleSeed}
-          >
-            I've written down my seed phrase
-          </button>
-        </a>
+      <div class="text-xl">Savings</div>
+      <div class="text-secondary">
+        You hold the keys to the account and are responsible for safeguarding
+        them.
       </div>
-    {:else}
-      <div class="flex justify-center">
-        <button type="button" class="primary" on:click={toggleSeed}>
-          <Icon icon="warning" style="mr-2 w-6 my-auto" />
-          {$t("user.settings.revealSeed")}
-        </button>
       </div>
-    {/if}
+    </div>
   </div>
 </div>