svelte 5

3 files changed, 23 insertions, 17 deletions

diff --git a/src/routes/(app)/fund/[id]/+page.svelte b/src/routes/(app)/fund/[id]/+page.svelte
index b81e2917..0931075a 100644
--- a/src/routes/(app)/fund/[id]/+page.svelte
+++ b/src/routes/(app)/fund/[id]/+page.svelte
@@ -9,7 +9,7 @@
   import { types, copy, f, s, sat, sats } from "$lib/utils";
   import { loginRedirect } from "$lib/store";
 
-  export let data;
+  let { data } = $props();
 
   let { amount, src, payments, rates, user } = data;
   let { id } = $page.params;
@@ -19,10 +19,10 @@
   let currency = user ? user.currency : "CAD";
   let rate = rates[currency];
 
-  $: amountFiat = parseFloat(((amount * rate) / sats).toFixed(2));
+  let amountFiat = $derived(parseFloat(((amount * rate) / sats).toFixed(2)));
   $loginRedirect = $page.url.pathname;
 
-  let show;
+  let show = $state();
   let toggle = () => (show = !show);
 </script>
 
@@ -83,14 +83,14 @@
       <div class="flex gap-2" data-sveltekit-prefetch="off">
         <button
           class="rounded-full border py-3 px-2 font-bold hover:opacity-80 flex gap-1 w-full justify-center"
-          on:click={toggle}
+          onclick={toggle}
         >
           <Icon icon="qr" style="invert" />
           {show ? $t("payments.hide") : $t("payments.show")} QR
         </button>
         <button
           class="rounded-full border py-3 px-2 font-bold hover:opacity-80 flex gap-1 w-full justify-center"
-          on:click={() => copy($page.url.host + $page.url.pathname)}
+          onclick={() => copy($page.url.host + $page.url.pathname)}
         >
           <Icon icon="copy" style="w-6" />
           {$t("payments.copyLink")}
diff --git a/src/routes/(app)/fund/[id]/sweep/+page.svelte b/src/routes/(app)/fund/[id]/sweep/+page.svelte
index 927c59d3..a34a8610 100644
--- a/src/routes/(app)/fund/[id]/sweep/+page.svelte
+++ b/src/routes/(app)/fund/[id]/sweep/+page.svelte
@@ -4,11 +4,11 @@
   import Icon from "$comp/Icon.svelte";
   import { t } from "$lib/translations";
 
-  export let data;
+  let { data } = $props();
 
   let { amount, id, user, rates } = data;
   let { currency } = user;
-  $: rate = rates[currency];
+  let rate = $derived(rates[currency]);
 </script>
 
 <div class="container px-4 max-w-xl mx-auto mt-10 space-y-5 text-center">
@@ -33,7 +33,7 @@
 </div>
 
 <a href={`/payments`}>
-  <div class="opacity-0 w-screen h-screen fixed top-0 left-0 z-50" />
+  <div class="opacity-0 w-screen h-screen fixed top-0 left-0 z-50"></div>
 </a>
 
 <div class="flex justify-center">
diff --git a/src/routes/(app)/fund/[id]/withdraw/+page.svelte b/src/routes/(app)/fund/[id]/withdraw/+page.svelte
index 0ad3c2cf..89654d23 100644
--- a/src/routes/(app)/fund/[id]/withdraw/+page.svelte
+++ b/src/routes/(app)/fund/[id]/withdraw/+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 { rates } = data;
-  let { amount, id } = $page.params;
-  let { currency } = data.user;
-  let loading;
+  let { amount, id } = $state($page.params);
+  let { currency } = $state(data.user);
+  let loading = $state();
 
   let submit = () => (loading = true);
-  $: update(form);
   let update = () => {
     if (form?.message.includes("pin")) $pin = undefined;
     loading = false;
   };
 
-  $: rate = rates[currency];
+  run(() => {
+    update(form);
+  });
+  let rate;
+  run(() => {
+    rate = rates[currency];
+  });
 </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 bind:currency bind:rate />
 
-  <form method="POST" use:enhance on:submit={submit}>
+  <form method="POST" use:enhance onsubmit={submit}>
     <input name="id" value={id} type="hidden" />
     <input name="amount" value={amount} type="hidden" />
     <input name="pin" value={$pin} type="hidden" />