account import

4 files changed, 79 insertions, 36 deletions

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>