svelte 5

5 files changed, 39 insertions, 33 deletions

diff --git a/src/routes/(app)/account/[id]/+page.svelte b/src/routes/(app)/account/[id]/+page.svelte
index be7d6112..29add530 100644
--- a/src/routes/(app)/account/[id]/+page.svelte
+++ b/src/routes/(app)/account/[id]/+page.svelte
@@ -14,19 +14,19 @@
     PUBLIC_COINOS_RELAY as relay,
   } from "$env/static/public";
 
-  export let data;
+  let { data } = $props();
   let { account, user } = data;
   let { id, name, seed } = account;
-  let mnemonic, password;
-  let passwordPrompt;
-  let cancel = () => (passwordPrompt = false);
+  let mnemonic = $state(), password = $state();
+  let passwordPrompt = $state();
+  let cancel = $state(() => (passwordPrompt = false));
   let toggle = () => (passwordPrompt = !passwordPrompt);
 
-  let submit = async () => {
+  let submit = $state(async () => {
     toggle();
     let entropy = await decrypt(seed, password);
     mnemonic = entropyToMnemonic(entropy, wordlist);
-  };
+  });
 
   let del = async () => {
     try {
@@ -37,7 +37,7 @@
     }
   };
 
-  let nwc;
+  let nwc = $state();
   let revealNwc = () =>
     (nwc = `nostr+walletconnect://${pk}?relay=${encodeURIComponent(
       relay,
@@ -53,17 +53,17 @@
         {#if mnemonic}
           <Mnemonic {mnemonic} />
 
-          <button on:click={() => copy(mnemonic)} type="button" class="btn">
-            <iconify-icon icon="ph:copy-bold" width="32" />
+          <button onclick={() => copy(mnemonic)} type="button" class="btn">
+            <iconify-icon icon="ph:copy-bold" width="32"></iconify-icon>
             <div class="my-auto">{$t("accounts.copy")}</div></button
           >
         {:else if seed}
           <button
-            on:click={toggle}
+            onclick={toggle}
             type="button"
             class="flex gap-2 rounded-2xl border py-5 mx-auto px-6 w-full justify-center"
           >
-            <iconify-icon icon="ph:eye-bold" width="32" />
+            <iconify-icon icon="ph:eye-bold" width="32"></iconify-icon>
             <div class="my-auto">{$t("accounts.revealMnemonic")}</div></button
           >
         {:else if nwc}
@@ -71,26 +71,26 @@
             {nwc}
           </div>
           <button
-            on:click={() => copy(nwc)}
+            onclick={() => copy(nwc)}
             type="button"
             class="flex gap-2 rounded-2xl border py-5 mx-auto px-6 w-full justify-center"
           >
-            <iconify-icon icon="ph:copy-bold" width="32" />
+            <iconify-icon icon="ph:copy-bold" width="32"></iconify-icon>
             <div class="my-auto">{$t("accounts.copy")}</div></button
           >
           <a href={`/qr/${encodeURIComponent(nwc)}`} class="my-auto block">
             <button
-              on:click={() => copy(nwc)}
+              onclick={() => copy(nwc)}
               type="button"
               class="flex gap-2 rounded-2xl border py-5 mx-auto px-6 w-full justify-center"
             >
-              <iconify-icon icon="ph:qr-code-bold" width="32" />
+              <iconify-icon icon="ph:qr-code-bold" width="32"></iconify-icon>
               <div class="my-auto">{$t("user.receive.showQR")}</div></button
             >
           </a>
         {:else}
           <button
-            on:click={revealNwc}
+            onclick={revealNwc}
             type="button"
             class="flex gap-2 rounded-2xl border py-5 mx-auto px-6 w-full justify-center"
           >
@@ -101,7 +101,7 @@
 
         {#if seed}
           <button
-            on:click={del}
+            onclick={del}
             type="button"
             class="flex gap-2 rounded-2xl border py-5 mx-auto px-6 w-full justify-center"
           >
@@ -111,7 +111,7 @@
         {/if}
       </div>
 
-      <div />
+      <div></div>
     </form>
   </div>
 </div>
diff --git a/src/routes/(app)/account/import/+page.svelte b/src/routes/(app)/account/import/+page.svelte
index a1d6549b..b94cc839 100644
--- a/src/routes/(app)/account/import/+page.svelte
+++ b/src/routes/(app)/account/import/+page.svelte
@@ -1,4 +1,6 @@
 <script>
+  import { run, preventDefault } from 'svelte/legacy';
+
   import { goto } from "$app/navigation";
   import { mnemonic } from "$lib/store";
   import { fail, focus, versions } from "$lib/utils";
@@ -8,7 +10,7 @@
   import { validateMnemonic } from "@scure/bip39";
   import { wordlist } from "@scure/bip39/wordlists/english";
 
-  let el, pasted, text;
+  let el = $state(), pasted = $state(), text = $state();
 
   let paste = async () => {
     text = await navigator.clipboard.readText();
@@ -26,14 +28,16 @@
     }
   };
 
-  $: if (browser && pasted && text) form.submit() && (pasted = false);
+  run(() => {
+    if (browser && pasted && text) form.submit() && (pasted = false);
+  });
 </script>
 
 <div class="space-y-5">
   <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">
-    <form on:submit|preventDefault={submit} class="space-y-2">
+    <form onsubmit={preventDefault(submit)} class="space-y-2">
       <textarea
         use:focus
         name="text"
@@ -41,7 +45,7 @@
         class="w-full p-4 border rounded-xl h-48 text-xl"
         bind:value={text}
         autocapitalize="none"
-      />
+></textarea>
       <button
         bind:this={el}
         type="submit"
diff --git a/src/routes/(app)/account/pass/+page.svelte b/src/routes/(app)/account/pass/+page.svelte
index 5becf337..62ef9b8e 100644
--- a/src/routes/(app)/account/pass/+page.svelte
+++ b/src/routes/(app)/account/pass/+page.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { preventDefault } from 'svelte/legacy';
+
   import { tick, onMount } from "svelte";
   import { t } from "$lib/translations";
   import { mnemonic } from "$lib/store";
@@ -15,12 +17,12 @@
   import { goto } from "$app/navigation";
   import { HDKey } from "@scure/bip32";
 
-  export let data;
+  let { data } = $props();
 
   let { user } = data;
-  let submitting;
+  let submitting = $state();
 
-  let confirm, password, revealPassword, revealConfirm;
+  let confirm = $state(), password = $state(), revealPassword = $state(), revealConfirm = $state();
   let type = "bitcoin";
   let name = $t("accounts.savings");
 
@@ -70,7 +72,7 @@
   </div>
 
   <form
-    on:submit|preventDefault={submit}
+    onsubmit={preventDefault(submit)}
     class="container w-full mx-auto text-lg px-4 max-w-xl space-y-5"
   >
     <p class="text-secondary mb-1">
@@ -100,7 +102,7 @@
       <button
         tabindex="-1"
         type="button"
-        on:click={() => (revealPassword = !revealPassword)}
+        onclick={() => (revealPassword = !revealPassword)}
         class="absolute right-5 -translate-y-1/2 top-1/2"
       >
         <Icon icon={revealPassword ? "eye" : "eye-off"} />
@@ -129,7 +131,7 @@
       <button
         type="button"
         tabindex="-1"
-        on:click={() => (revealConfirm = !revealConfirm)}
+        onclick={() => (revealConfirm = !revealConfirm)}
         class="absolute right-5 -translate-y-1/2 top-1/2"
       >
         <Icon icon={revealConfirm ? "eye" : "eye-off"} />
diff --git a/src/routes/(app)/account/savings/+page.svelte b/src/routes/(app)/account/savings/+page.svelte
index 2461bd20..d0474636 100644
--- a/src/routes/(app)/account/savings/+page.svelte
+++ b/src/routes/(app)/account/savings/+page.svelte
@@ -13,7 +13,7 @@
       <a href="/account/seed" class="block">
         <div class="card card-side shadow shadow-base-400 p-8 hover:bg-base-200">
           <figure class="w-20">
-            <iconify-icon icon="ph:file-plus-bold" width="64" />
+            <iconify-icon icon="ph:file-plus-bold" width="64"></iconify-icon>
           </figure>
           <div>
             <div class="text-xl">{$t("accounts.create")}</div>
@@ -24,7 +24,7 @@
       <a href="/account/import" class="block">
         <div class="card card-side shadow p-8 hover:bg-base-200">
           <figure class="w-20">
-            <iconify-icon icon="ph:folder-open-bold" width="64" />
+            <iconify-icon icon="ph:folder-open-bold" width="64"></iconify-icon>
           </figure>
           <div>
             <div class="text-xl">{$t("accounts.import")}</div>
diff --git a/src/routes/(app)/account/seed/+page.svelte b/src/routes/(app)/account/seed/+page.svelte
index 5d828369..b3e7d57c 100644
--- a/src/routes/(app)/account/seed/+page.svelte
+++ b/src/routes/(app)/account/seed/+page.svelte
@@ -9,7 +9,7 @@
   import { generateMnemonic } from "@scure/bip39";
   import { wordlist } from "@scure/bip39/wordlists/english";
 
-  export let data;
+  let { data } = $props();
   let { user } = data;
 
   onMount(async () => {
@@ -36,7 +36,7 @@
       <button
         type="button"
         class="flex gap-2 text-center break-all rounded-2xl hover:opacity-80 py-3 px-4 w-full mx-auto justify-center border whitespace-nowrap mb-2"
-        on:click={generate}
+        onclick={generate}
       >
         <Icon icon="random" style="w-8 my-auto" />
         <div class="my-auto">{$t("accounts.regenerate")}</div>
@@ -45,7 +45,7 @@
       <button
         type="button"
         class="flex gap-2 text-center break-all rounded-2xl hover:opacity-80 py-3 px-4 w-full mx-auto justify-center border whitespace-nowrap mb-2"
-        on:click={() => copy($mnemonic)}
+        onclick={() => copy($mnemonic)}
       >
         <Icon icon="copy" style="w-8 my-auto" />
         <div class="my-auto">