svelte 5

8 files changed, 110 insertions, 72 deletions

diff --git a/src/routes/(app)/send/+layout.svelte b/src/routes/(app)/send/+layout.svelte
index 9e14fa39..5c6d8f11 100644
--- a/src/routes/(app)/send/+layout.svelte
+++ b/src/routes/(app)/send/+layout.svelte
@@ -3,7 +3,7 @@
   import Pin from "$comp/Pin.svelte";
   import { pin } from "$lib/store";
 
-  export let data;
+  let { data, children } = $props();
 
   let { user } = data;
   let cancel = () => goto(`/${user.username}`);
@@ -13,4 +13,4 @@
   <Pin bind:value={$pin} {cancel} />
 {/if}
 
-<slot />
+{@render children?.()}
diff --git a/src/routes/(app)/send/[...text]/+page.svelte b/src/routes/(app)/send/[...text]/+page.svelte
index 2dd4a723..7ec76bc9 100644
--- a/src/routes/(app)/send/[...text]/+page.svelte
+++ b/src/routes/(app)/send/[...text]/+page.svelte
@@ -1,4 +1,6 @@
 <script>
+  import { run } from 'svelte/legacy';
+
   import { page } from "$app/stores";
   import { fly } from "svelte/transition";
   import { enhance } from "$app/forms";
@@ -10,13 +12,12 @@
   import Spinner from "$comp/Spinner.svelte";
   import { back, fail, focus } from "$lib/utils";
 
-  export let data;
-  export let form;
+  let { data = $bindable(), form } = $props();
   data.subject = data.user;
 
   let { contacts } = data;
 
-  let el, text, pasted, w;
+  let el = $state(), text = $state(), pasted = $state(), w = $state();
 
   let keypress = (e) =>
     e.key === "Enter" ? e.preventDefault() || el.click() : (pasted = false);
@@ -27,7 +28,9 @@
     pasted = true;
   };
 
-  $: if (browser && pasted && text) el.click() && (pasted = false);
+  run(() => {
+    if (browser && pasted && text) el.click() && (pasted = false);
+  });
 </script>
 
 <svelte:window bind:innerWidth={w} />
@@ -52,29 +55,29 @@
       use:focus
       name="text"
       placeholder={$t("user.send.placeholder")}
-      on:keypress={keypress}
+      onkeypress={keypress}
       class="w-full p-4 border rounded-xl h-32 text-xl"
       bind:value={text}
-      on:paste={() => (pasted = true)}
+      onpaste={() => (pasted = true)}
       autocapitalize="none"
-    />
+></textarea>
 
     <div class="flex gap-2">
       <a href="/scan" class="contents">
         <button type="button" class="btn !w-auto flex-grow">
-          <iconify-icon icon="ph:camera-bold" width="32" />
+          <iconify-icon icon="ph:camera-bold" width="32"></iconify-icon>
           {$t("user.send.scan")}
         </button>
       </a>
 
-      <button type="button" class="btn !w-auto flex-grow" on:click={paste}>
-        <iconify-icon icon="ph:clipboard-text-bold" width="32" />
+      <button type="button" class="btn !w-auto flex-grow" onclick={paste}>
+        <iconify-icon icon="ph:clipboard-text-bold" width="32"></iconify-icon>
         {$t("user.send.paste")}
       </button>
     </div>
 
     <button bind:this={el} type="submit" class="btn btn-accent">
-      <iconify-icon icon="ph:paper-plane-right-bold" width="32" />
+      <iconify-icon icon="ph:paper-plane-right-bold" width="32"></iconify-icon>
       <div class="my-auto">{$t("user.send.next")}</div>
     </button>
 
diff --git a/src/routes/(app)/send/bitcoin/[address]/+page.svelte b/src/routes/(app)/send/bitcoin/[address]/+page.svelte
index 20fed58a..c271543c 100644
--- a/src/routes/(app)/send/bitcoin/[address]/+page.svelte
+++ b/src/routes/(app)/send/bitcoin/[address]/+page.svelte
@@ -1,4 +1,6 @@
 <script>
+  import { run, preventDefault } from 'svelte/legacy';
+
   import { t } from "$lib/translations";
   import Icon from "$comp/Icon.svelte";
   import Numpad from "$comp/Numpad.svelte";
@@ -6,22 +8,24 @@
   import { rate } from "$lib/store";
   import { fail, s } from "$lib/utils";
 
-  export let data;
+  let { data } = $props();
 
   let { balance, rates, user } = data;
   let { address } = $page.params;
   let { currency, username } = user;
 
-  let amount = 0;
-  let submit, fiat;
+  let amount = $state(0);
+  let submit = $state(), fiat = $state();
 
-  $: update(data);
   let update = () => ($rate = data.rates[currency]);
 
   let setMax = () => {
     fiat = false;
     amount = balance;
   };
+  run(() => {
+    update(data);
+  });
 </script>
 
 <div class="container px-4 max-w-xl mx-auto space-y-5 text-center">
@@ -35,8 +39,8 @@
     <button
       type="button"
       class="btn !w-auto grow"
-      on:click|preventDefault={setMax}
-      on:keydown={setMax}>Max ⚡️{s(balance)}</button
+      onclick={preventDefault(setMax)}
+      onkeydown={setMax}>Max ⚡️{s(balance)}</button
     >
 
     <form action={`/send/bitcoin/${address}/${amount}`} class="contents">
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 15080493..20128d2b 100644
--- a/src/routes/(app)/send/bitcoin/[address]/[amount]/[...feeRate]/+page.svelte
+++ b/src/routes/(app)/send/bitcoin/[address]/[amount]/[...feeRate]/+page.svelte
@@ -1,4 +1,6 @@
 <script>
+  import { run } from 'svelte/legacy';
+
   import { tick } from "svelte";
   import { t } from "$lib/translations";
   import { enhance } from "$app/forms";
@@ -28,14 +30,13 @@
   import { entropyToMnemonic, mnemonicToSeed } from "@scure/bip39";
   import { wordlist } from "@scure/bip39/wordlists/english";
 
-  export let data;
-  export let form;
+  let { data, form } = $props();
 
   let { encode, decode } = hexUtil;
-  let passwordPrompt;
-  let password;
-  let cancel = () => (passwordPrompt = false);
-  let signed;
+  let passwordPrompt = $state();
+  let password = $state();
+  let cancel = $state(() => (passwordPrompt = false));
+  let signed = $state();
 
   let togglePassword = () => (passwordPrompt = !passwordPrompt);
   let handler = ({ cancel }) => {
@@ -90,9 +91,8 @@
     rates,
     hex,
     inputs,
-  } = data;
+  } = $state(data);
 
-  $: reload(data);
   let reload = () => {
     ({ amount, address, message, fee, fees, feeRate, ourfee, rates, hex } =
       data);
@@ -103,7 +103,7 @@
   };
 
   let { balance, currency } = data.user;
-  let submitting, submit, showSettings;
+  let submitting = $state(), submit = $state(), showSettings;
 
   let feeNames = {
     fastestFee: $t("payments.fastest"),
@@ -113,7 +113,6 @@
 
   let toggleSettings = () => (showSettings = !showSettings);
 
-  $: update(form);
   let update = () => {
     submitting = false;
     if (form?.message?.includes("pin")) $pin = undefined;
@@ -121,6 +120,12 @@
 
   let setFee = () => goto(`/send/bitcoin/${address}/${amount}/${feeRate}`);
   let goBack = () => goto(`/send/bitcoin/${address}`);
+  run(() => {
+    reload(data);
+  });
+  run(() => {
+    update(form);
+  });
 </script>
 
 <div
@@ -148,7 +153,7 @@
       <div class="flex flex-wrap gap-4 justify-center">
         <select
           bind:value={feeRate}
-          on:change={setFee}
+          onchange={setFee}
           class="border text-lg bg-white p-4 rounded-2xl text-center my-auto"
         >
           {#each Object.keys(feeNames) as feeName}
diff --git a/src/routes/(app)/send/ecash/+page.svelte b/src/routes/(app)/send/ecash/+page.svelte
index 3a708f80..88239c1a 100644
--- a/src/routes/(app)/send/ecash/+page.svelte
+++ b/src/routes/(app)/send/ecash/+page.svelte
@@ -1,4 +1,6 @@
 <script>
+  import { run, preventDefault } from 'svelte/legacy';
+
   import { enhance, applyAction } from "$app/forms";
   import { t } from "$lib/translations";
   import Icon from "$comp/Icon.svelte";
@@ -9,15 +11,14 @@
   import { fail, s } from "$lib/utils";
   import handler from "$lib/handler";
 
-  export let data;
+  let { data } = $props();
 
   let { rates, user } = data;
   let { balance, currency, username } = user;
 
-  let amount = 0;
-  let submit, fiat;
+  let amount = $state(0);
+  let submit = $state(), fiat = $state();
 
-  $: update(data);
   let update = () => ($rate = data.rates[currency]);
 
   let setMax = () => {
@@ -25,8 +26,11 @@
     amount = balance;
   };
 
-  let submitting;
+  let submitting = $state();
   let toggle = () => (submitting = !submitting);
+  run(() => {
+    update(data);
+  });
 </script>
 
 <div class="container px-4 max-w-xl mx-auto space-y-5 text-center">
@@ -47,9 +51,9 @@
       <button
         type="button"
         class="btn !w-auto grow"
-        on:click|preventDefault={setMax}
+        onclick={preventDefault(setMax)}
         disabled={submitting}
-        on:keydown={setMax}>Max ⚡️{s(balance)}</button
+        onkeydown={setMax}>Max ⚡️{s(balance)}</button
       >
 
       <button
diff --git a/src/routes/(app)/send/fund/[name]/[...amount]/+page.svelte b/src/routes/(app)/send/fund/[name]/[...amount]/+page.svelte
index b6a4aa0c..d1c3b204 100644
--- a/src/routes/(app)/send/fund/[name]/[...amount]/+page.svelte
+++ b/src/routes/(app)/send/fund/[name]/[...amount]/+page.svelte
@@ -1,4 +1,6 @@
 <script>
+  import { run } from 'svelte/legacy';
+
   import { t } from "$lib/translations";
   import { enhance } from "$app/forms";
   import Icon from "$comp/Icon.svelte";
@@ -8,25 +10,29 @@
   import { back } from "$lib/utils";
   import { pin } from "$lib/store";
 
-  export let data;
-  export let form;
+  let { data, form } = $props();
 
-  let { amount, name } = $page.params;
+  let { amount, name } = $state($page.params);
   let { rates } = data;
   let { currency } = data.user;
-  let loading;
+  let loading = $state();
 
-  $: rate = rates[currency];
 
   let submit = () => (loading = true);
-  $: update(form);
   let update = () => {
     if (form?.message?.includes("pin")) $pin = undefined;
     loading = false;
   };
+  let rate;
+  run(() => {
+    rate = rates[currency];
+  });
+  run(() => {
+    update(form);
+  });
 </script>
 
-<button class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80" on:click={back}>
+<button class="ml-5 md:ml-20 mt-5 md:mt-10 hover:opacity-80" onclick={back}>
   <Icon icon="arrow-left" style="w-10" />
 </button>
 
@@ -39,7 +45,7 @@
 <div class="container px-4 mt-20 max-w-xl mx-auto">
   <Numpad bind:amount {currency} bind:rate />
 
-  <form method="POST" use:enhance on:submit={submit}>
+  <form method="POST" use:enhance onsubmit={submit}>
     <input name="name" value={name} type="hidden" />
     <input name="amount" value={amount} type="hidden" />
     <input name="pin" value={$pin} type="hidden" />
diff --git a/src/routes/(app)/send/invoice/[id]/+page.svelte b/src/routes/(app)/send/invoice/[id]/+page.svelte
index 5a9729a2..9f3a008b 100644
--- a/src/routes/(app)/send/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/send/invoice/[id]/+page.svelte
@@ -1,4 +1,6 @@
 <script>
+  import { run } from 'svelte/legacy';
+
   import handler from "$lib/handler";
   import { onDestroy, onMount } from "svelte";
   import { t } from "$lib/translations";
@@ -21,34 +23,31 @@
     sats,
     focus,
   } from "$lib/utils";
-  export let data;
-  export let form;
+  let { data, form } = $props();
 
-  let { invoice, rates, user } = data;
-  let { address, hash, payreq, user: recipient, tip } = invoice;
-  let { currency } = user;
+  let { invoice, rates, user } = $state(data);
+  let { address, hash, payreq, user: recipient, tip } = $state(invoice);
+  let { currency } = $state(user);
 
-  $: reload(data);
   let reload = (data) => {
     ({ invoice, rates, user } = data);
     ({ address, hash, payreq, user: recipient, tip } = invoice);
     ({ currency } = user);
   };
 
-  $: rate = invoice.rate * (rates[user.currency] / rates[invoice.currency]);
 
-  let amount = form?.amount || invoice.amount;
-  let a,
-    af,
+  let amount = $state(form?.amount || invoice.amount);
+  let a = $state(),
+    af = $state(),
     amountFiat = amount * (rate / sats),
-    fiat = !amount;
+    fiat = $state(!amount);
 
   let setAmount = () => {
     amount = a;
     amountFiat = af;
   };
 
-  let submit, submitting;
+  let submit = $state(), submitting = $state();
   let toggle = () => (submitting = !submitting);
 
   let external = async () => {
@@ -67,7 +66,6 @@
     });
   };
 
-  $: update(form);
   let update = () => {
     if (form?.message?.includes("pin")) $pin = undefined;
     submitting = false;
@@ -91,6 +89,16 @@
   // 		}
   // 	}
   // });
+  run(() => {
+    reload(data);
+  });
+  let rate;
+  run(() => {
+    rate = invoice.rate * (rates[user.currency] / rates[invoice.currency]);
+  });
+  run(() => {
+    update(form);
+  });
 </script>
 
 {#if form?.message}
@@ -192,13 +200,13 @@
           bind:this={submit}
           type="button"
           class="btn !w-auto"
-          on:click={setAmount}
+          onclick={setAmount}
         >
           {$t("payments.next")}
         </button>
       {/if}
     </div>
-    <button type="button" class="btn" on:click={external}
+    <button type="button" class="btn" onclick={external}
       >{$t("payments.moreOptions")}</button
     >
   </form>
diff --git a/src/routes/(app)/send/lightning/[payreq]/+page.svelte b/src/routes/(app)/send/lightning/[payreq]/+page.svelte
index 659b0e51..6b9fe4e2 100644
--- a/src/routes/(app)/send/lightning/[payreq]/+page.svelte
+++ b/src/routes/(app)/send/lightning/[payreq]/+page.svelte
@@ -1,4 +1,6 @@
 <script>
+  import { run } from "svelte/legacy";
+
   import { t } from "$lib/translations";
   import { enhance } from "$app/forms";
   import Icon from "$comp/Icon.svelte";
@@ -8,8 +10,7 @@
   import { back, fiat, f, s, focus } from "$lib/utils";
   import { rate, pin } from "$lib/store";
 
-  export let data;
-  export let form;
+  let { data, form } = $props();
 
   let { payreq } = $page.params;
   let {
@@ -17,10 +18,9 @@
     ourfee,
     rates,
     user: { currency },
-  } = data;
-  let a;
+  } = $state(data);
+  let a = $state();
 
-  $: reload(data);
   let reload = (data) => {
     ({
       alias,
@@ -31,13 +31,10 @@
     if (!$rate) $rate = rates[currency];
   };
 
-  $: amount = form?.amount || data.amount;
-  $: maxfee = Math.max(5, Math.round(amount * 0.005));
-  let showMax;
+  let showMax = $state();
 
-  let loading;
+  let loading = $state();
   let submit = () => (loading = true);
-  $: update(form);
   let update = () => {
     if (form?.message?.includes("pin")) $pin = undefined;
     loading = false;
@@ -45,6 +42,17 @@
 
   let show;
   let toggle = () => (show = !show);
+  run(() => {
+    reload(data);
+  });
+  let amount = $derived(form?.amount || data.amount);
+  let maxfee;
+  run(() => {
+    maxfee = Math.max(5, Math.round(amount * 0.005));
+  });
+  run(() => {
+    update(form);
+  });
 </script>
 
 <div class="container px-4 max-w-xl mx-auto text-center space-y-2">
@@ -89,7 +97,7 @@
     <form
       method="POST"
       use:enhance
-      on:submit={submit}
+      onsubmit={submit}
       action="?/send"
       class="space-y-2"
     >
@@ -135,7 +143,7 @@
       </button>
 
       {#if !(form?.message || showMax)}
-        <button type="button" class="btn" on:click={() => (showMax = !showMax)}
+        <button type="button" class="btn" onclick={() => (showMax = !showMax)}
           >Advanced settings</button
         >
         <input name="maxfee" type="hidden" bind:value={maxfee} />