svelte 5

5 files changed, 120 insertions, 83 deletions

diff --git a/src/routes/(app)/invoice/[id]/[email protected] b/src/routes/(app)/invoice/[id]/[email protected]
index 62c05db1..05fd603f 100644
--- a/src/routes/(app)/invoice/[id]/[email protected]
+++ b/src/routes/(app)/invoice/[id]/[email protected]
@@ -1,4 +1,6 @@
 <script>
+  import { run } from 'svelte/legacy';
+
   import { SvelteToast } from "@zerodevx/svelte-toast";
   import { onDestroy, onMount } from "svelte";
   import { close, connect, send } from "$lib/socket";
@@ -22,16 +24,14 @@
   import { t, locale, loading } from "$lib/translations";
   import { goto, onNavigate } from "$app/navigation";
 
-  export let data;
+  let { data, children } = $props();
 
-  let { generate, rate, user, subject, token, rates, theme } = data;
+  let { generate, rate, user, subject, token, rates, theme } = $state(data);
 
-  $: update(data);
   let update = (data) => {
     ({ rate, user, subject, token, rates, theme } = data);
   };
 
-  $: theme = $themeStore;
   $themeStore = theme;
 
   onMount(async () => {
@@ -58,7 +58,6 @@
     }
   });
 
-  $: browser && connect(token);
 
   let lost,
     checkTimer,
@@ -84,6 +83,15 @@
       clearTimeout(expireTimer);
     }
   });
+  run(() => {
+    update(data);
+  });
+  run(() => {
+    theme = $themeStore;
+  });
+  run(() => {
+    browser && connect(token);
+  });
 </script>
 
 {#if browser && user && $passwordPrompt}
@@ -110,7 +118,7 @@
 <main class="min-h-dvh" data-theme={theme}>
   <AppHeader {user} {subject} />
   {#if !$loading}
-    <slot />
+    {@render children?.()}
   {/if}
 </main>
 
diff --git a/src/routes/(app)/invoice/[id]/+page.svelte b/src/routes/(app)/invoice/[id]/+page.svelte
index ae208779..fef43e4d 100644
--- a/src/routes/(app)/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/+page.svelte
@@ -1,4 +1,6 @@
 <script>
+  import { run } from "svelte/legacy";
+
   import { enhance } from "$app/forms";
   import { send } from "$lib/socket";
   import { btc, post, copy, f, get, types, sat, s, sats } from "$lib/utils";
@@ -13,7 +15,7 @@
   import { t } from "$lib/translations";
   import { goto, invalidate } from "$app/navigation";
 
-  export let data;
+  let { data } = $props();
 
   let showOptions;
 
@@ -24,8 +26,7 @@
 
   let readingerror = (e) => console.log("nfc error", e);
 
-  $: refresh(data);
-  let { invoice, id, subject, user, src } = data;
+  let { invoice, id, subject, user, src } = $state(data);
   let {
     aid,
     amount,
@@ -35,9 +36,9 @@
     text,
     tip,
     user: { username, currency },
-  } = invoice;
+  } = $state(invoice);
 
-  let qr;
+  let qr = $state();
   let tipPercent = 0;
 
   let refresh = async (data) => {
@@ -64,9 +65,6 @@
     tipPercent = (tip / amount) * 100;
   };
 
-  $: amountFiat = parseFloat(((amount * rate) / sats).toFixed(2));
-  $: tipAmount = ((tip * rate) / sats).toFixed(2);
-
   let subbed = {};
 
   onMount(async () => {
@@ -81,11 +79,6 @@
     }
   });
 
-  $: link = [types.bitcoin, types.liquid].includes(type)
-    ? text
-    : `lightning:${text}`;
-  $: txt = [types.bitcoin, types.liquid].includes(type) ? hash : text;
-
   let setType = async (type) => {
     invoice.type = type;
     ({ id } = await post(`/invoice`, {
@@ -96,7 +89,7 @@
     goto(`./${id}?options=true`, { invalidateAll: true, noScroll: true });
   };
 
-  let setAmount = async () => {
+  let setAmount = $state(async () => {
     if (typeof $amountPrompt === "undefined") $amountPrompt = true;
     settingAmount = false;
     amount = newAmount;
@@ -112,39 +105,57 @@
     else url += "?options=true";
 
     goto(url, { invalidateAll: true, noScroll: true });
-  };
+  });
 
-  let newAmount;
-  let settingAmount;
-  let toggleAmount = () => (settingAmount = !settingAmount);
-  let fiat;
-  let submit;
+  let newAmount = $state();
+  let settingAmount = $state();
+  let toggleAmount = $state(() => (settingAmount = !settingAmount));
+  let fiat = $state(true);
+  let submit = $state();
+  run(() => {
+    refresh(data);
+  });
+  let amountFiat;
+  run(() => {
+    amountFiat = parseFloat(((amount * rate) / sats).toFixed(2));
+  });
+  let tipAmount = $derived(((tip * rate) / sats).toFixed(2));
+  let link;
+  run(() => {
+    link = [types.bitcoin, types.liquid].includes(type)
+      ? text
+      : `lightning:${text}`;
+  });
+  let txt;
+  run(() => {
+    txt = [types.bitcoin, types.liquid].includes(type) ? hash : text;
+  });
 </script>
 
 <div class="invoice container mx-auto max-w-xl px-4 space-y-2">
   <InvoiceData
-    bind:src
-    bind:link
-    bind:qr
-    bind:txt
-    bind:invoice
-    bind:amount
-    bind:amountFiat
-    bind:currency
-    bind:tip
-    bind:rate
-    bind:showQr={$showQr}
+    {src}
+    {link}
+    {qr}
+    {txt}
+    {invoice}
+    {amount}
+    {amountFiat}
+    {currency}
+    {tip}
+    {rate}
+    showQr={$showQr}
   />
 
   <InvoiceActions
-    bind:toggleAmount
-    bind:user
-    bind:invoice
+    {toggleAmount}
+    {user}
+    {invoice}
     {copy}
-    bind:link
-    bind:type
+    {link}
+    {type}
     {types}
-    bind:txt
+    {txt}
     t={$t}
     bind:showQr={$showQr}
   />
@@ -153,14 +164,14 @@
 </div>
 
 <SetAmount
-  bind:currency
-  bind:rate
-  bind:fiat
-  bind:submit
-  bind:settingAmount
-  bind:setAmount
   bind:newAmount
-  bind:toggleAmount
+  bind:fiat
+  {currency}
+  {rate}
+  {submit}
+  {settingAmount}
+  {setAmount}
+  {toggleAmount}
   amountPrompt={$amountPrompt}
   t={$t}
 />
diff --git a/src/routes/(app)/invoice/[id]/memo/+page.svelte b/src/routes/(app)/invoice/[id]/memo/+page.svelte
index 4d23ff19..02f4a5d9 100644
--- a/src/routes/(app)/invoice/[id]/memo/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/memo/+page.svelte
@@ -1,4 +1,6 @@
 <script>
+  import { run } from 'svelte/legacy';
+
   import { onMount } from "svelte";
   import { browser } from "$app/environment";
   import { invoice as inv, request } from "$lib/store";
@@ -17,11 +19,10 @@
   import { enhance } from "$app/forms";
 
   let submitting;
-  let submit;
+  let submit = $state();
 
-  export let data;
-  $: refresh(data);
-  let { invoice, id, user, rates } = data;
+  let { data } = $props();
+  let { invoice, id, user, rates } = $state(data);
   let {
     amount,
     hash,
@@ -34,7 +35,7 @@
     text,
     tip,
     user: { username, currency },
-  } = invoice;
+  } = $state(invoice);
 
   invoice.memo = user?.username;
 
@@ -55,6 +56,9 @@
       user: { username },
     } = invoice);
   };
+  run(() => {
+    refresh(data);
+  });
 </script>
 
 <form
diff --git a/src/routes/(app)/invoice/[id]/paid/+page.svelte b/src/routes/(app)/invoice/[id]/paid/+page.svelte
index b3b6e71a..1bbba082 100644
--- a/src/routes/(app)/invoice/[id]/paid/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/paid/+page.svelte
@@ -1,4 +1,6 @@
 <script>
+  import { run } from 'svelte/legacy';
+
   import { scale } from "svelte/transition";
   import Icon from "$comp/Icon.svelte";
   import { toast } from "@zerodevx/svelte-toast";
@@ -6,15 +8,17 @@
   import { t } from "$lib/translations";
   import { fiat, f, s, sat, sats } from "$lib/utils";
 
-  export let data;
-  let amount, currency, rate, received, pending, tip, user, id;
-  $: update(data);
+  let { data } = $props();
+  let amount, currency = $state(), rate = $state(), received = $state(), pending = $state(), tip = $state(), user = $state(), id;
   let update = (data) => {
     ({ amount, currency, rate, received, pending, tip, user, id } =
       data.invoice);
   };
 
   toast.pop(0);
+  run(() => {
+    update(data);
+  });
 </script>
 
 <div class="container px-4 text-center mx-auto">
@@ -77,7 +81,7 @@
 </div>
 
 <a href={`/${user.username}`}>
-  <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)/invoice/[id]/tip/+page.svelte b/src/routes/(app)/invoice/[id]/tip/+page.svelte
index ff3da46e..53f0eb4b 100644
--- a/src/routes/(app)/invoice/[id]/tip/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/tip/+page.svelte
@@ -1,4 +1,6 @@
 <script>
+  import { run, preventDefault } from 'svelte/legacy';
+
   import { onMount } from "svelte";
   import { browser } from "$app/environment";
   import { invoice as inv, request } from "$lib/store";
@@ -11,10 +13,10 @@
   import { tick } from "svelte";
 
   const tipAmounts = ["No", "10%", "15%", "20%"];
-  let showCustomAmount;
+  let showCustomAmount = $state();
 
-  let customInput;
-  let customTipAmount;
+  let customInput = $state();
+  let customTipAmount = $state();
 
   let apply = async () => {
     if (customTipAmount > 0) {
@@ -40,7 +42,7 @@
     tipPercent = e.target.value;
   };
 
-  let submitting;
+  let submitting = $state();
   const handleTipButtonClick = async (amount) => {
     submitting = true;
     if (amount === "No") {
@@ -53,11 +55,10 @@
     submit.click();
   };
 
-  let submit;
+  let submit = $state();
 
-  export let data;
-  $: refresh(data);
-  let { invoice, id, user, rates } = data;
+  let { data } = $props();
+  let { invoice, id, user, rates } = $state(data);
   let {
     aid,
     amount,
@@ -70,10 +71,10 @@
     text,
     tip,
     user: { username, currency },
-  } = invoice;
+  } = $state(invoice);
 
   let qr;
-  let tipPercent = 0;
+  let tipPercent = $state(0);
 
   let fullscreen;
 
@@ -97,18 +98,27 @@
     tipPercent = (tip / amount) * 100;
   };
 
-  $: currency = user?.currency || invoice.currency;
-  $: rate = invoice.rate * (rates[currency] / rates[invoice.currency]);
 
-  $: tip = Math.round((amount / 100) * tipPercent);
 
-  $: amountFiat = parseFloat(((amount * rate) / sats).toFixed(2));
 
-  $: tipAmount = ((tip * rate) / sats).toFixed(2);
 
-  $: invoiceAmountFiatFormatted = f(amountFiat, currency);
 
   onMount(() => ($request = undefined));
+  run(() => {
+    refresh(data);
+  });
+  run(() => {
+    currency = user?.currency || invoice.currency;
+  });
+  run(() => {
+    rate = invoice.rate * (rates[currency] / rates[invoice.currency]);
+  });
+  run(() => {
+    tip = Math.round((amount / 100) * tipPercent);
+  });
+  let amountFiat = $derived(parseFloat(((amount * rate) / sats).toFixed(2)));
+  let tipAmount = $derived(((tip * rate) / sats).toFixed(2));
+  let invoiceAmountFiatFormatted = $derived(f(amountFiat, currency));
 </script>
 
 <div class="container px-4 max-w-lg text-center mx-auto">
@@ -154,10 +164,10 @@
 
       <div class="space-y-2">
         {#if tip}
-          <button type="button" class="btn" on:click={() => submit.click()}
+          <button type="button" class="btn" onclick={() => submit.click()}
             >Next</button
           >
-          <button type="button" class="btn" on:click={() => (tipPercent = 0)}
+          <button type="button" class="btn" onclick={() => (tipPercent = 0)}
             >Reset</button
           >
         {:else}
@@ -168,14 +178,14 @@
                 type="button"
                 class="btn"
                 class:active={active(amount, tipPercent)}
-                on:click={() => handleTipButtonClick(amount)}>{amount}</button
+                onclick={() => handleTipButtonClick(amount)}>{amount}</button
               >
             {:else}
               <button
                 type="button"
                 class="btn"
                 class:active={active(amount, tipPercent)}
-                on:click={() => handleTipButtonClick(amount)}>{amount}</button
+                onclick={() => handleTipButtonClick(amount)}>{amount}</button
               >
             {/if}
           {/each}
@@ -186,21 +196,21 @@
         <button
           type="button"
           class="btn"
-          on:click={() => (showCustomAmount = true)}>Custom</button
+          onclick={() => (showCustomAmount = true)}>Custom</button
         >
       </div>
     {/if}
 
-    <button type="submit" bind:this={submit} />
+    <button type="submit" bind:this={submit}></button>
   </form>
 
   {#if showCustomAmount}
-    <form on:submit|preventDefault={apply} class="space-y-2">
+    <form onsubmit={preventDefault(apply)} class="space-y-2">
       <input
         bind:this={customInput}
         type="number"
         step="0.01"
-        on:input={(e) => handleCustomTipAmount(e)}
+        oninput={(e) => handleCustomTipAmount(e)}
         placeholder={$t("payments.amount")}
         use:focus
       />