svelte 5

39 files changed, 430 insertions, 300 deletions

diff --git a/src/components/About.svelte b/src/components/About.svelte
index 01ff4c7c..5f87e99a 100644
--- a/src/components/About.svelte
+++ b/src/components/About.svelte
@@ -24,7 +24,7 @@
     { name: "cole", socials: [] },
   ];
 
-  let locations;
+  let locations = $state();
   onMount(async () => {
     try {
       ({ locations } = await fetch("/locations").then((r) => r.json()));
diff --git a/src/components/Account.svelte b/src/components/Account.svelte
index 38c8c418..c378b9a3 100644
--- a/src/components/Account.svelte
+++ b/src/components/Account.svelte
@@ -1,14 +1,19 @@
 <script>
+  import { run } from 'svelte/legacy';
+
   import { goto } from "$app/navigation";
   import Icon from "$comp/Icon.svelte";
   import Balance from "$comp/Balance.svelte";
   import { t } from "$lib/translations";
 
-  export let user, rate, account, last;
-  let { name, seed, balance, id } = account;
-  $: type = seed ? "Savings" : "Cash";
+  let {
+    user,
+    rate,
+    account,
+    last
+  } = $props();
+  let { name, seed, balance, id } = $state(account);
 
-  $: refresh(account);
   let refresh = (a) => ({ seed, balance, id } = a);
 
   let setAccount = () => (document.cookie = `aid=${id}; path=/; max-age=86400`);
@@ -16,38 +21,42 @@
     setAccount();
     goto("/payments");
   };
+  let type = $derived(seed ? "Savings" : "Cash");
+  run(() => {
+    refresh(account);
+  });
 </script>
 
 <div
   class="block space-y-2 border-primary py-4 cursor-pointer"
   class:border-b-8={!last}
-  on:click={go}
+  onclick={go}
 >
   <div class="flex">
     <Balance {balance} {user} {rate} />
-    <a href={`/payments`} class="contents" on:click={setAccount}>
+    <a href={`/payments`} class="contents" onclick={setAccount}>
       <button class="ml-auto flex gap-1 mb-auto pb-4 pl-4">
-        <iconify-icon icon="ph:clock-bold" width="32" />
+        <iconify-icon icon="ph:clock-bold" width="32"></iconify-icon>
       </button>
     </a>
     <a href={`/account/${id}`} class="contents">
       <button class="flex gap-1 mb-auto pb-4 pl-4">
-        <iconify-icon icon="ph:gear-bold" width="32" />
+        <iconify-icon icon="ph:gear-bold" width="32"></iconify-icon>
       </button>
     </a>
   </div>
 
   <div class="flex justify-center w-full text-xl gap-2">
-    <a href={`/invoice`} class="contents" on:click={setAccount}>
+    <a href={`/invoice`} class="contents" onclick={setAccount}>
       <button class="btn !w-auto flex-grow">
-        <iconify-icon icon="ph:hand-coins-bold" width="32" flip="horizontal" />
+        <iconify-icon icon="ph:hand-coins-bold" width="32" flip="horizontal"></iconify-icon>
         <div class="my-auto">{$t("user.dashboard.receive")}</div>
       </button>
     </a>
 
-    <a href={`/send`} class="contents grow" on:click={setAccount}>
+    <a href={`/send`} class="contents grow" onclick={setAccount}>
       <button type="button" class="btn !w-auto flex-grow">
-        <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.dashboard.send")}</div>
       </button>
     </a>
diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index 5a922792..fef2f0f4 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -1,4 +1,6 @@
 <script>
+  import { run } from 'svelte/legacy';
+
   import { banner, theme, newPayment } from "$lib/store";
   import { goto } from "$app/navigation";
   import Avatar from "$comp/Avatar.svelte";
@@ -6,19 +8,21 @@
   import { loading, t } from "$lib/translations";
   import { page } from "$app/stores";
 
-  export let user, subject;
+  let { user, subject = $bindable() } = $props();
 
-  let w;
-  $: if (!subject) subject = user;
+  let w = $state();
+  run(() => {
+    if (!subject) subject = user;
+  });
 
-  $: bg =
-    $banner?.id && $banner.id === subject.id
+  let bg =
+    $derived($banner?.id && $banner.id === subject.id
       ? `url(${$banner.src})`
       : subject?.banner
         ? subject.banner.includes(":")
           ? `url(${subject.banner})`
           : `url(/api/public/${subject.banner}.webp)`
-        : undefined;
+        : undefined);
 
   const links = [
     {
@@ -40,10 +44,10 @@
     },
   ];
 
-  $: opacity = (href) =>
+  let opacity = $derived((href) =>
     $page.url.pathname === href
       ? "opacity-100"
-      : "opacity-90 hover:opacity-none";
+      : "opacity-90 hover:opacity-none");
 </script>
 
 <svelte:window bind:innerWidth={w} />
@@ -58,7 +62,7 @@
         {#each links as { href, icon, flip }}
           <a {href} data-sveltekit-preload-code="eager">
             <button class="btn-menu {opacity(href)}">
-              <iconify-icon {icon} width={w > 640 ? 32 : 24} {flip} />
+              <iconify-icon {icon} width={w > 640 ? 32 : 24} {flip}></iconify-icon>
             </button>
           </a>
         {/each}
diff --git a/src/components/Avatar.svelte b/src/components/Avatar.svelte
index a088c4ee..3007c3e7 100644
--- a/src/components/Avatar.svelte
+++ b/src/components/Avatar.svelte
@@ -1,20 +1,29 @@
-<script>
+<script lang="ts">
+  import { run } from 'svelte/legacy';
+
   import { avatar, banner } from "$lib/store";
   import Icon from "$comp/Icon.svelte";
   import { punk } from "$lib/utils";
 
-  export let user;
-  export let size = 32;
-  export let disabled = false;
+  interface Props {
+    user: any;
+    size?: number;
+    disabled?: boolean;
+  }
+
+  let { user, size = 32, disabled = false }: Props = $props();
 
-  $: s = size.toString();
-  $: link = user?.anon ? `/${user.pubkey}` : `/${user.username}`;
+  let s = $derived(size.toString());
+  let link = $derived(user?.anon ? `/${user.pubkey}` : `/${user.username}`);
 
   let base = "/api/public";
-  $: profile = user?.profile ? `${base}/${user.profile}.webp` : user?.picture;
-  $: fallback = `${base}/punks/` + punk(user.pubkey || user.id || "aa");
-  $: tmp = $avatar?.id && $avatar.id === user.id && $avatar.src;
-  $: src = tmp || profile || fallback;
+  let profile = $derived(user?.profile ? `${base}/${user.profile}.webp` : user?.picture);
+  let fallback = $derived(`${base}/punks/` + punk(user.pubkey || user.id || "aa"));
+  let tmp = $derived($avatar?.id && $avatar.id === user.id && $avatar.src);
+  let src;
+  run(() => {
+    src = tmp || profile || fallback;
+  });
 
   let handle = () => (src = fallback);
 </script>
@@ -27,7 +36,7 @@
       {src}
       class="w-full h-full object-cover object-center overflow-hidden"
       alt={user.username}
-      on:error={handle}
+      onerror={handle}
     />
   </div>
 </a>
diff --git a/src/components/Balance.svelte b/src/components/Balance.svelte
index 0cc27068..91463f7e 100644
--- a/src/components/Balance.svelte
+++ b/src/components/Balance.svelte
@@ -1,12 +1,14 @@
 <script>
+  import { preventDefault } from 'svelte/legacy';
+
   import Icon from "$comp/Icon.svelte";
   import Pin from "$comp/Pin.svelte";
   import { f, s, sat, sats } from "$lib/utils";
   import { pin } from "$lib/store";
   import { t } from "$lib/translations";
 
-  let show;
-  export let user, rate, balance;
+  let show = $state();
+  let { user, rate, balance } = $props();
 </script>
 
 {#if show && user.haspin && $pin?.length !== 6}
@@ -16,7 +18,7 @@
 <div>
   {#if user.haspin && !$pin}
     <button
-      on:click|preventDefault={() => (show = true)}
+      onclick={preventDefault(() => (show = true))}
       class="flex gap-2 text-xl"
     >
       <Icon icon="eye-off" style="w-8 my-auto" />
diff --git a/src/components/Code.svelte b/src/components/Code.svelte
index 7ec046a6..00ef38a8 100644
--- a/src/components/Code.svelte
+++ b/src/components/Code.svelte
@@ -2,7 +2,7 @@
   import { copyNoNewlines as copy } from "$lib/utils";
   import Icon from "$comp/Icon.svelte";
   import samples from "$lib/samples";
-  export let sample;
+  let { sample } = $props();
 </script>
 
 <div
@@ -13,7 +13,7 @@
   </div>
   <button
     class="ml-auto my-auto invert opacity-90"
-    on:click={() => copy(samples[sample])}
+    onclick={() => copy(samples[sample])}
     ><Icon icon="copy" style="w-10 max-w-none" /></button
   >
 </div>
diff --git a/src/components/DarkToggle.svelte b/src/components/DarkToggle.svelte
index 5ddc80a1..be1fe858 100644
--- a/src/components/DarkToggle.svelte
+++ b/src/components/DarkToggle.svelte
@@ -9,12 +9,12 @@
 
 <button
   class="flex justify-center items-center hover:opacity-80 gap-2 font-bold"
-  on:click={dark}
+  onclick={dark}
 >
   <iconify-icon
     icon={$theme === "dark" ? "ph:sun-bold" : "ph:moon-stars-bold"}
     width="30"
-  />
+></iconify-icon>
 
   {$t(`nav.${$theme === "dark" ? "light" : "dark"}`)}
 </button>
diff --git a/src/components/DeleteItem.svelte b/src/components/DeleteItem.svelte
index 8f7f97ca..d45f09e6 100644
--- a/src/components/DeleteItem.svelte
+++ b/src/components/DeleteItem.svelte
@@ -1,9 +1,11 @@
 <script>
+  import { preventDefault } from 'svelte/legacy';
+
   import Icon from "$comp/Icon.svelte";
   import { fail, post } from "$lib/utils";
   import { invalidate } from "$app/navigation";
 
-  export let item;
+  let { item = $bindable() } = $props();
 
   let cancel = () => (item = null);
 
@@ -25,13 +27,13 @@
     class="relative top-1/3 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white space-y-5"
   >
     <h1 class="text-center text-2xl font-semibold">Delete item</h1>
-    <form on:submit|preventDefault={submit}>
+    <form onsubmit={preventDefault(submit)}>
       <div class="w-full flex">
         <button
           type="button"
           class="border-2 border-black rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80 mx-auto"
-          on:click={cancel}
-          on:keydown={cancel}
+          onclick={cancel}
+          onkeydown={cancel}
         >
           <div class="my-auto">No</div>
         </button>
diff --git a/src/components/Event.svelte b/src/components/Event.svelte
index 640b9e68..78fdd230 100644
--- a/src/components/Event.svelte
+++ b/src/components/Event.svelte
@@ -1,7 +1,7 @@
 <script>
   import Avatar from "$comp/Avatar.svelte";
   import Icon from "$comp/Icon.svelte";
-  export let event;
+  let { event } = $props();
 
   let { id, user, seen, content } = event;
 
@@ -22,7 +22,7 @@
             : "now";
   };
 
-  let w;
+  let w = $state();
 </script>
 
 <svelte:window bind:innerWidth={w} />
diff --git a/src/components/FaqCard.svelte b/src/components/FaqCard.svelte
index ae1ad077..a2d13bc8 100644
--- a/src/components/FaqCard.svelte
+++ b/src/components/FaqCard.svelte
@@ -1,10 +1,15 @@
-<script>
+<script lang="ts">
   import { t } from "$lib/translations";
 
   // this ID will be used to get the strings from the locale
   // question is at faq.[questionID].question
-  // answer is at faq.[questionID].answer
-  export let questionID;
+  
+  interface Props {
+    // answer is at faq.[questionID].answer
+    questionID: any;
+  }
+
+  let { questionID }: Props = $props();
 </script>
 
 <div class="mx-auto w-full md:w-2/3 lg:w-[700px] space-y-5">
diff --git a/src/components/Feed.svelte b/src/components/Feed.svelte
index 5dc2b21a..593c2289 100644
--- a/src/components/Feed.svelte
+++ b/src/components/Feed.svelte
@@ -1,4 +1,6 @@
 <script>
+  import { preventDefault } from 'svelte/legacy';
+
   import { t } from "$lib/translations";
   import { onMount } from "svelte";
   import Event from "$comp/Event.svelte";
@@ -7,10 +9,9 @@
   import { fail } from "$lib/utils";
   import { sign, send } from "$lib/nostr";
 
-  export let events;
-  export let user = undefined;
+  let { events = $bindable(), user = undefined } = $props();
 
-  let message;
+  let message = $state();
 
   let submit = async () => {
     try {
@@ -38,14 +39,14 @@
     }
   };
 
-  $: sorted = Object.values(events)
+  let sorted = $derived(Object.values(events)
     .filter((ev) => ev?.pubkey && ev?.kind === 1)
-    .sort((a, b) => b.seen - a.seen);
+    .sort((a, b) => b.seen - a.seen));
 </script>
 
 {#if user}
   <form
-    on:submit|preventDefault={submit}
+    onsubmit={preventDefault(submit)}
     class="flex justify-center gap-4 max-w-2xl mx-auto"
   >
     <div class="grow">
@@ -68,14 +69,16 @@
     <VirtualScroll
       data={sorted}
       key="id"
-      let:data
+      
       pageMode={true}
       estimateSize={200}
     >
-      <a href={`/${data.user.pubkey}/event/${data.id}`}>
-        <Event event={data} />
-      </a>
-    </VirtualScroll>
+      {#snippet children({ data })}
+            <a href={`/${data.user.pubkey}/event/${data.id}`}>
+          <Event event={data} />
+        </a>
+                {/snippet}
+        </VirtualScroll>
   {:else}
     <div class="flex w-full">
       <div class="mx-auto text-secondary">{$t("user.noNotes")}</div>
diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
index 1fac31e9..3af5f6a3 100644
--- a/src/components/Footer.svelte
+++ b/src/components/Footer.svelte
@@ -24,7 +24,7 @@
   <div class="space-y-5">
     <div class="text-center w-full">
       <a href="/">
-        <iconify-icon icon="coinos:logo" width="224" />
+        <iconify-icon icon="coinos:logo" width="224"></iconify-icon>
       </a>
     </div>
     <div class="flex gap-2 justify-center sm:hidden">
@@ -73,5 +73,5 @@
     </ul>
   </div>
 
-  <iconify-icon icon="coinos:shield" class="flex justify-center" width="96" />
+  <iconify-icon icon="coinos:shield" class="flex justify-center" width="96"></iconify-icon>
 </footer>
diff --git a/src/components/HowItWorksCard.svelte b/src/components/HowItWorksCard.svelte
index a8fe63fd..2b8967ae 100644
--- a/src/components/HowItWorksCard.svelte
+++ b/src/components/HowItWorksCard.svelte
@@ -1,12 +1,11 @@
 <script>
   import Icon from "./Icon.svelte";
   import { t } from "$lib/translations";
-  export let image;
-  export let stepID;
+  let { image, stepID } = $props();
 </script>
 
 <div class="space-y-5">
-  <iconify-icon icon={image} class="mx-auto" width="128" />
+  <iconify-icon icon={image} class="mx-auto" width="128"></iconify-icon>
   <p class="text-2xl font-medium">{$t("howItWorks." + stepID + ".header")}</p>
   <p class="text-secondary text-xl font-medium w-full md:w-2/3 mx-auto">
     {$t("howItWorks." + stepID + ".description")}
diff --git a/src/components/Icon.svelte b/src/components/Icon.svelte
index 0b47f726..6d55bf94 100644
--- a/src/components/Icon.svelte
+++ b/src/components/Icon.svelte
@@ -1,6 +1,5 @@
 <script>
-  export let icon;
-  export let style = undefined;
+  let { icon, style = undefined } = $props();
 </script>
 
 <img src="/icons/{icon}.svg" alt={icon} class={style} />
diff --git a/src/components/Image.svelte b/src/components/Image.svelte
index 4f8b39bb..4bc90571 100644
--- a/src/components/Image.svelte
+++ b/src/components/Image.svelte
@@ -1,6 +1,5 @@
 <script>
-  export let image;
-  export let style;
+  let { image, style } = $props();
 </script>
 
 <img src="/images/{image}.webp" alt={image} class={style} />
diff --git a/src/components/InvoiceActions.svelte b/src/components/InvoiceActions.svelte
index 7f1607e0..0b5dca55 100644
--- a/src/components/InvoiceActions.svelte
+++ b/src/components/InvoiceActions.svelte
@@ -1,33 +1,35 @@
 <script>
-  export let user,
+  let {
+    user,
     invoice,
     copy,
     t,
     link,
     type,
     types,
-    showQr,
+    showQr = $bindable(),
     txt,
-    toggleAmount;
+    toggleAmount
+  } = $props();
 </script>
 
 <div class="text-secondary space-y-2 text-xl pt-2">
-  <button type="button" class="btn" on:click={() => copy(txt)}>
-    <iconify-icon icon="ph:copy-bold" width="32" />
+  <button type="button" class="btn" onclick={() => copy(txt)}>
+    <iconify-icon icon="ph:copy-bold" width="32"></iconify-icon>
     <div class="my-auto">
       {t("payments.copy")}
     </div>
   </button>
 
   {#if user?.id === invoice?.user?.id}
-    <button class="btn" on:click={toggleAmount}>
-      <iconify-icon icon="ph:pencil-simple-bold" width="32" />
+    <button class="btn" onclick={toggleAmount}>
+      <iconify-icon icon="ph:pencil-simple-bold" width="32"></iconify-icon>
       <div class="my-auto">{t("payments.setAmount")}</div>
     </button>
   {:else}
     <a href={link} class="block">
       <button class="btn">
-        <iconify-icon icon="ph:wallet-bold" width="32" />
+        <iconify-icon icon="ph:wallet-bold" width="32"></iconify-icon>
         <div class="my-auto">{t("payments.openLink")}</div>
       </button>
     </a>
@@ -35,11 +37,11 @@
 
   {#if txt.startsWith("ln")}
     <div class="w-full flex justify-center gap-2 flex-wrap">
-      <button class="btn" on:click={() => (showQr = !showQr)}>
+      <button class="btn" onclick={() => (showQr = !showQr)}>
         {#if showQr}
-          <iconify-icon icon="ph:text-align-center-bold" width="32" />
+          <iconify-icon icon="ph:text-align-center-bold" width="32"></iconify-icon>
         {:else}
-          <iconify-icon icon="ph:qr-code-bold" width="32" />
+          <iconify-icon icon="ph:qr-code-bold" width="32"></iconify-icon>
         {/if}
         <div class="my-auto">
           {showQr ? t("payments.showText") : t("payments.showQr")}
diff --git a/src/components/InvoiceData.svelte b/src/components/InvoiceData.svelte
index 7723eb56..da1ea5d9 100644
--- a/src/components/InvoiceData.svelte
+++ b/src/components/InvoiceData.svelte
@@ -1,16 +1,18 @@
 <script>
   import { btc, f, sat, s, sats } from "$lib/utils";
-  export let showQr,
+  let {
+    showQr,
     src,
     link,
-    qr,
+    qr = $bindable(),
     txt,
     invoice,
     amount,
     amountFiat,
     currency,
     tip,
-    rate;
+    rate
+  } = $props();
 </script>
 
 {#if showQr}
diff --git a/src/components/InvoiceTypes.svelte b/src/components/InvoiceTypes.svelte
index 354f0a49..cdd01aac 100644
--- a/src/components/InvoiceTypes.svelte
+++ b/src/components/InvoiceTypes.svelte
@@ -1,5 +1,12 @@
 <script>
-  export let aid, user, type, types, t, setType;
+  let {
+    aid,
+    user,
+    type,
+    types,
+    t,
+    setType
+  } = $props();
 </script>
 
 {#if aid === user?.id}
@@ -8,7 +15,7 @@
       class="btn flex-nowrap"
       class:bg-base-300={type === types.bitcoin}
       class:text-secondary={type === types.bitcoin}
-      on:click={() => setType(types.bitcoin)}
+      onclick={() => setType(types.bitcoin)}
     >
       <img src="/images/bitcoin.svg" class="w-8" alt="Bitcoin" />
       <div class="my-auto text-lg">Bitcoin</div>
@@ -18,7 +25,7 @@
       class="btn flex-nowrap"
       class:bg-base-300={type === types.liquid}
       class:text-secondary={type === types.liquid}
-      on:click={() => setType(types.liquid)}
+      onclick={() => setType(types.liquid)}
     >
       <img src="/images/liquid.svg" class="w-8" alt="Liquid" />
       <div class="my-auto text-lg">Liquid</div>
@@ -28,7 +35,7 @@
       class="btn flex-nowrap"
       class:bg-base-300={type === types.lightning}
       class:text-secondary={type === types.lightning}
-      on:click={() => setType(types.lightning)}
+      onclick={() => setType(types.lightning)}
     >
       <div class="bg-base-100 rounded-full w-8 h-8 text-center flex">
         <div class="m-auto">⚡️</div>
diff --git a/src/components/ItemForm.svelte b/src/components/ItemForm.svelte
index 7e0f58d8..d3ea88c0 100644
--- a/src/components/ItemForm.svelte
+++ b/src/components/ItemForm.svelte
@@ -1,15 +1,16 @@
 <script>
+  import { preventDefault } from 'svelte/legacy';
+
   import { t } from "$lib/translations";
   import { upload } from "$lib/upload";
   import { fail } from "$lib/utils";
   import { applyAction, deserialize } from "$app/forms";
   import Spinner from "$comp/Spinner.svelte";
-  export let item;
-  export let user;
+  let { item = $bindable(), user } = $props();
 
-  let fileInput, formElement, file, submitting, progress;
+  let fileInput = $state(), formElement = $state(), file, submitting = $state(), progress;
   let select = () => fileInput.click();
-  let src;
+  let src = $state();
 
   let tooLarge = {};
   let handleFile = async ({ target }, type) => {
@@ -67,7 +68,7 @@
 <form
   method="POST"
   class="space-y-5"
-  on:submit|preventDefault={handleSubmit}
+  onsubmit={preventDefault(handleSubmit)}
   bind:this={formElement}
 >
   <input type="hidden" name="id" bind:value={item.id} />
@@ -104,24 +105,24 @@
             {src}
             alt={item.name}
             class="object-cover w-full h-full"
-            on:click={select}
-            on:keydown={select}
+            onclick={select}
+            onkeydown={select}
           />
         {:else if item.image}
           <img
             src={`/api/public/${item.image}.webp`}
             alt={item.name}
             class="object-cover w-full h-full"
-            on:click={select}
-            on:keydown={select}
+            onclick={select}
+            onkeydown={select}
           />
         {:else}
           <div
             class="bg-gradient-to-r from-primary to-gradient mb-4 cursor-pointer hover:opacity-80 w-full h-full"
-            on:click={select}
-            on:keydown={select}
+            onclick={select}
+            onkeydown={select}
             alt="Banner"
-          />
+></div>
         {/if}
       </div>
     </div>
@@ -130,7 +131,7 @@
       type="file"
       class="hidden"
       bind:this={fileInput}
-      on:change={(e) => handleFile(e, "item")}
+      onchange={(e) => handleFile(e, "item")}
     />
   </div>
 
diff --git a/src/components/Items.svelte b/src/components/Items.svelte
index db5dedc1..a7b4fe1a 100644
--- a/src/components/Items.svelte
+++ b/src/components/Items.svelte
@@ -1,4 +1,6 @@
 <script>
+  import { run, stopPropagation } from 'svelte/legacy';
+
   import { t } from "$lib/translations";
   import { btc, f, sat, post } from "$lib/utils";
   import { browser } from "$app/environment";
@@ -15,15 +17,22 @@
   import DeleteItem from "$comp/DeleteItem.svelte";
   import Icon from "$comp/Icon.svelte";
 
-  export let subject, user, items, rate, currency, total;
+  let {
+    subject,
+    user,
+    items = $bindable(),
+    rate,
+    currency,
+    total
+  } = $props();
 
   let flipDurationMs = 200;
   let dropTargetStyle = {};
 
   let dragDisabled =
-    subject?.id !== user?.id || (browser && window.innerWidth < 768);
+    $state(subject?.id !== user?.id || (browser && window.innerWidth < 768));
 
-  let deleting;
+  let deleting = $state();
   let del = (item) => {
     deleting = item;
   };
@@ -62,10 +71,6 @@
       dragDisabled = false;
   }
 
-  $: if (total > 0 && browser) {
-    let payButton = document.querySelector("#payButton");
-    if (payButton) payButton.addEventListener("click", checkout);
-  }
 
   let checkout = async () => {
     let invoice = {
@@ -92,9 +97,15 @@
   let reset = () =>
     (dragDisabled =
       user?.username !== subject?.username || window.innerWidth < 768);
+  run(() => {
+    if (total > 0 && browser) {
+      let payButton = document.querySelector("#payButton");
+      if (payButton) payButton.addEventListener("click", checkout);
+    }
+  });
 </script>
 
-<svelte:window on:resize={reset} />
+<svelte:window onresize={reset} />
 
 {#if deleting}
   <DeleteItem bind:item={deleting} />
@@ -106,21 +117,21 @@
 <div
   class="grid sm:grid-cols-2 gap-4 pb-20"
   use:dndzone={{ items, flipDurationMs, dropTargetStyle, dragDisabled }}
-  on:consider={handleConsider}
-  on:finalize={handleFinalize}
+  onconsider={handleConsider}
+  onfinalize={handleFinalize}
 >
   {#each items as i (i.id)}
     <button
       type="button"
       class="w-full text-center cursor-pointer hover:opacity-80 mb-auto"
-      on:click={() => i.quantity++}
+      onclick={() => i.quantity++}
     >
       <div class="relative w-full h-64 overflow-hidden rounded-xl">
         {#if i[SHADOW_ITEM_MARKER_PROPERTY_NAME]}
           <div
             in:fade={{ duration: 200, easing: cubicIn }}
             class="custom-shadow-item"
-          />
+></div>
         {:else if i.image}
           <img
             src={`/api/public/${i.image}.webp`}
@@ -131,7 +142,7 @@
           <div
             class="bg-gradient-to-r from-primary to-gradient mb-4 cursor-pointer hover:opacity-80 w-full h-full"
             alt="Banner"
-          />
+></div>
         {/if}
         {#if user?.username === subject.username}
           <div class="flex gap-2 justify-center absolute top-2 right-2">
@@ -144,16 +155,16 @@
             </a>
             <button
               class="bg-black rounded-full w-12 h-12 bg-opacity-40 hover:bg-opacity-100"
-              on:click|stopPropagation={() => del(i)}
+              onclick={stopPropagation(() => del(i))}
             >
               <Icon icon="trash" style="w-8 mx-auto invert" />
             </button>
             <div
-              on:click|stopPropagation={() => {}}
+              onclick={stopPropagation(() => {})}
               class="sm:hidden"
-              on:mousedown={startDrag}
-              on:touchstart={startDrag}
-              on:keydown={handleKeyDown}
+              onmousedown={startDrag}
+              ontouchstart={startDrag}
+              onkeydown={handleKeyDown}
             >
               <a href={`/items/${i.id}`}>
                 <button
@@ -183,7 +194,7 @@
             {#if i.quantity}
               <button
                 type="button"
-                on:click|stopPropagation={() => i.quantity > 0 && i.quantity--}
+                onclick={stopPropagation(() => i.quantity > 0 && i.quantity--)}
               >
                 <Icon icon="minus" style="w-10 min-w-10" />
               </button>
@@ -194,7 +205,7 @@
             {#if i.quantity}
               <button
                 type="button"
-                on:click|stopPropagation={() => i.quantity++}
+                onclick={stopPropagation(() => i.quantity++)}
               >
                 <Icon icon="plus" style="w-10 min-w-10" />
               </button>
@@ -213,7 +224,7 @@
   {#if total > 0}
     <button
       class="rounded-2xl py-5 px-6 font-bold hover:bg-neutral-700 flex bg-black text-white mx-auto"
-      on:click={checkout}
+      onclick={checkout}
     >
       <div class="mx-auto flex">
         <div class="my-auto text-2xl">
diff --git a/src/components/LandingHeader.svelte b/src/components/LandingHeader.svelte
index 7a4c5d18..c20c80a0 100644
--- a/src/components/LandingHeader.svelte
+++ b/src/components/LandingHeader.svelte
@@ -7,13 +7,15 @@
   import DarkToggle from "$comp/DarkToggle.svelte";
   import LocaleSelector from "$comp/LocaleSelector.svelte";
 
-  export let howItWorks;
-  export let faq;
-  export let about;
-  export let user;
+  let {
+    howItWorks,
+    faq,
+    about,
+    user
+  } = $props();
 
-  let showMobileMenu = false;
-  let header;
+  let showMobileMenu = $state(false);
+  let header = $state();
   const mobileMenuButtonClick = (section) => {
     showMobileMenu = false;
     scroll(section);
@@ -26,45 +28,45 @@
 >
   <nav class="block lg:flex justify-between items-center">
     <div class="flex justify-start lg:justify-center items-center lg:space-x-5">
-      <a href="/" on:click={() => scroll(header)}>
-        <iconify-icon icon="coinos:logo" width="224" />
+      <a href="/" onclick={() => scroll(header)}>
+        <iconify-icon icon="coinos:logo" width="224"></iconify-icon>
       </a>
     </div>
 
     <!-- desktop nav -->
     <div class="hidden space-x-5 lg:flex justify-center items-center font-bold">
       {#if $page.url.pathname === "/"}
-        <button class="hover:opacity-80" on:click={() => scroll(howItWorks)}
+        <button class="hover:opacity-80" onclick={() => scroll(howItWorks)}
           >{$t("howItWorks.header")}</button
         >
-        <button class="hover:opacity-80" on:click={() => scroll(faq)}
+        <button class="hover:opacity-80" onclick={() => scroll(faq)}
           >{$t("faq.header")}</button
         >
-        <button class="hover:opacity-80" on:click={() => scroll(about)}
+        <button class="hover:opacity-80" onclick={() => scroll(about)}
           >{$t("about.header")}</button
         >
       {/if}
       {#if user}
         <button
           class="btn !w-auto !rounded-full"
-          on:click={() => goto(`/${user.username}`)}
+          onclick={() => goto(`/${user.username}`)}
           >Home
         </button>
         <button
           class="btn !w-auto !rounded-full"
-          on:click={() => goto("/logout")}
+          onclick={() => goto("/logout")}
         >
           {$t("nav.signOut")}
         </button>
       {:else}
         <button
           class="btn btn-accent !w-auto !rounded-full"
-          on:click={() => goto("/register")}
+          onclick={() => goto("/register")}
           >{$t("nav.register")}
         </button>
         <button
           class="btn !w-auto !rounded-full"
-          on:click={() => goto("/login")}
+          onclick={() => goto("/login")}
         >
           {$t("nav.signIn")}
         </button>
@@ -73,12 +75,12 @@
 
     <button
       class="block lg:hidden absolute top-[34.5px] right-10 z"
-      on:click={() => (showMobileMenu = !showMobileMenu)}
+      onclick={() => (showMobileMenu = !showMobileMenu)}
     >
       <iconify-icon
         icon={!showMobileMenu ? "ph:list-bold" : "ph:x-bold"}
         width="32"
-      />
+></iconify-icon>
     </button>
 
     <div
@@ -89,31 +91,31 @@
       <div class="space-y-5 mt-24 font-bold text-xl">
         <LocaleSelector />
         <DarkToggle />
-        <button on:click={() => mobileMenuButtonClick(howItWorks)} class="block"
+        <button onclick={() => mobileMenuButtonClick(howItWorks)} class="block"
           >{$t("howItWorks.header")}</button
         >
-        <button on:click={() => mobileMenuButtonClick(faq)} class="block"
+        <button onclick={() => mobileMenuButtonClick(faq)} class="block"
           >{$t("faq.header")}</button
         >
-        <button on:click={() => mobileMenuButtonClick(about)} class="block"
+        <button onclick={() => mobileMenuButtonClick(about)} class="block"
           >{$t("about.header")}</button
         >
         {#if !user}
-          <button class="btn btn-accent" on:click={() => goto("/register")}
+          <button class="btn btn-accent" onclick={() => goto("/register")}
             >{$t("nav.register")}
           </button>
-          <button class="btn" on:click={() => goto("/login")}>
+          <button class="btn" onclick={() => goto("/login")}>
             {$t("nav.signIn")}
           </button>
         {:else}
           <button
             class="border rounded-full px-6 py-2 font-bold block"
-            on:click={() => goto(`/${user.username}`)}
+            onclick={() => goto(`/${user.username}`)}
             >{$t("nav.account")}
           </button>
           <button
             class="bg-primary text-white border rounded-full px-6 py-2 font-bold block"
-            on:click={() => goto("/logout")}
+            onclick={() => goto("/logout")}
           >
             {$t("nav.signOut")}
           </button>
diff --git a/src/components/LandingHero.svelte b/src/components/LandingHero.svelte
index 8d47283e..d3f71390 100644
--- a/src/components/LandingHero.svelte
+++ b/src/components/LandingHero.svelte
@@ -17,7 +17,7 @@
         <iconify-icon
           icon="coinos:rays"
           class="absolute -top-16 left-5 md:left-8 lg:left-14 2xl:left-24"
-        />
+></iconify-icon>
       </span>
       {$t("landing.header_after_icon")}
     </h1>
diff --git a/src/components/LandingInfoCard.svelte b/src/components/LandingInfoCard.svelte
index fadcb6c0..63951e86 100644
--- a/src/components/LandingInfoCard.svelte
+++ b/src/components/LandingInfoCard.svelte
@@ -1,10 +1,13 @@
 <script>
   import Image from "./Image.svelte";
 
-  export let image;
-  export let title;
-  export let description = undefined;
-  export let order = undefined;
+  let {
+    image,
+    title,
+    description = undefined,
+    order = undefined,
+    children
+  } = $props();
 </script>
 
 <div class="block lg:flex justify-center lg:space-x-20 items-center">
@@ -25,7 +28,7 @@
       {#if description}
         {description}
       {:else}
-        <slot />
+        {@render children?.()}
       {/if}
     </p>
   </div>
diff --git a/src/components/Lnurlp.svelte b/src/components/Lnurlp.svelte
index 0268e363..74be0571 100644
--- a/src/components/Lnurlp.svelte
+++ b/src/components/Lnurlp.svelte
@@ -1,19 +1,29 @@
 <script>
+  import { run } from 'svelte/legacy';
+
   import { t } from "$lib/translations";
   import { enhance } from "$app/forms";
   import Numpad from "$comp/Numpad.svelte";
   import Spinner from "$comp/Spinner.svelte";
   import { pin } from "$lib/store";
 
-  export let data, form, send, comment;
+  let {
+    data,
+    form,
+    send = $bindable(),
+    comment = $bindable()
+  } = $props();
   let { currency } = data.user;
   let { minSendable, maxSendable, commentAllowed, callback, metadata, rates } =
     data;
 
-  $: rate = rates[currency];
+  let rate;
+  run(() => {
+    rate = rates[currency];
+  });
 
-  let amount = Math.round(minSendable / 1000),
-    loading;
+  let amount = $state(Math.round(minSendable / 1000)),
+    loading = $state();
   let submit = () => (loading = true);
 </script>
 
@@ -39,7 +49,7 @@
 
   <Numpad bind:amount bind:rate {currency} bind:submit={send} />
 
-  <form action="?/pay" method="POST" use:enhance on:submit={submit}>
+  <form action="?/pay" method="POST" use:enhance onsubmit={submit}>
     <input name="amount" value={amount} type="hidden" />
     <input name="minSendable" value={minSendable} type="hidden" />
     <input name="maxSendable" value={maxSendable} type="hidden" />
@@ -53,7 +63,7 @@
         class="w-full p-4 border rounded-xl h-32 text-xl"
         bind:value={comment}
         autocapitalize="none"
-      />
+></textarea>
     {/if}
 
     <div class="flex w-full">
diff --git a/src/components/Lnurlw.svelte b/src/components/Lnurlw.svelte
index d0fbf3b4..50aa1488 100644
--- a/src/components/Lnurlw.svelte
+++ b/src/components/Lnurlw.svelte
@@ -1,4 +1,6 @@
 <script>
+  import { run } from 'svelte/legacy';
+
   import { sats, f, s } from "$lib/utils";
   import { t } from "$lib/translations";
   import { enhance } from "$app/forms";
@@ -6,7 +8,7 @@
   import Spinner from "$comp/Spinner.svelte";
   import { pin } from "$lib/store";
 
-  export let data, form;
+  let { data, form } = $props();
 
   let { currency, username } = data.user;
   let {
@@ -17,13 +19,16 @@
     callback,
     rates,
   } = data;
-  $: rate = rates[currency];
+  let rate;
+  run(() => {
+    rate = rates[currency];
+  });
 
-  let amount = Math.round(minWithdrawable / 1000),
-    loading;
+  let amount = $state(Math.round(minWithdrawable / 1000)),
+    loading = $state();
 
   let submit = () => (loading = true);
-  $: amountFiat = parseFloat(((amount * rate) / sats).toFixed(2));
+  let amountFiat = $derived(parseFloat(((amount * rate) / sats).toFixed(2)));
 </script>
 
 <div class="container px-4 mt-20 max-w-xl mx-auto">
@@ -56,7 +61,7 @@
     <Numpad bind:amount {currency} bind:rate />
   {/if}
 
-  <form action="?/withdraw" method="POST" use:enhance on:submit={submit}>
+  <form action="?/withdraw" method="POST" use:enhance onsubmit={submit}>
     <input name="amount" value={amount} type="hidden" />
     <input name="username" value={username} type="hidden" />
     <input name="currency" value={currency} type="hidden" />
diff --git a/src/components/LocaleSelector.svelte b/src/components/LocaleSelector.svelte
index d837a534..cb057dbd 100644
--- a/src/components/LocaleSelector.svelte
+++ b/src/components/LocaleSelector.svelte
@@ -1,8 +1,13 @@
 <script>
+  import { run } from 'svelte/legacy';
+
   import { t, locale, locales } from "$lib/translations";
-  export let style;
+  let { style } = $props();
 
-  $: l = $locale;
+  let l;
+  run(() => {
+    l = $locale;
+  });
 
   const handleChange = ({ currentTarget }) => {
     const { value } = currentTarget;
@@ -11,7 +16,7 @@
   };
 </script>
 
-<select name="language" bind:value={l} on:change={handleChange}>
+<select name="language" bind:value={l} onchange={handleChange}>
   {#each $locales as locale}
     <option value={locale}>{$t(`lang.${locale}`)}</option>
   {/each}
diff --git a/src/components/LocationsMap.svelte b/src/components/LocationsMap.svelte
index c01d8b75..b04b8e98 100644
--- a/src/components/LocationsMap.svelte
+++ b/src/components/LocationsMap.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { tick, onMount, onDestroy } from "svelte";
+  import { tick, onMount, onDestroy, mount } from "svelte";
   import { browser } from "$app/environment";
   import Icon from "$comp/Icon.svelte";
   import Popup from "$comp/Popup.svelte";
@@ -7,15 +7,15 @@
 
   import "maplibre-gl/dist/maplibre-gl.css";
 
-  export let locations;
+  let { locations } = $props();
   let map;
-  let mapContainer, mapWrapper;
+  let mapContainer = $state(), mapWrapper = $state();
   let markers = [];
-  let search;
+  let search = $state();
   let clearSearch = (e) => (search = "");
 
   let currentIndex = -1;
-  let timeout;
+  let timeout = $state();
 
   let full = () => {
     if (!document.fullscreenElement) {
@@ -49,11 +49,6 @@
     }
   };
 
-  $: list = search
-    ? markers.filter((m) =>
-        m.tags.name.toLowerCase().includes(search.toLowerCase()),
-      )
-    : inview;
 
   let scroll = () => {
     const el = document.querySelector(".selected");
@@ -65,7 +60,7 @@
       });
   };
 
-  let selected;
+  let selected = $state();
   function select(m) {
     selected = m;
     stopFlying();
@@ -109,7 +104,7 @@
   };
 
   let toggleList = () => (showList = !showList);
-  let showList;
+  let showList = $state();
 
   let currentPopup;
   function startFlying() {
@@ -155,7 +150,7 @@
     map.off("moveend");
   }
 
-  let inview = [];
+  let inview = $state([]);
 
   let updateLabelVisibility = debounce(() => {
     inview = [];
@@ -201,10 +196,10 @@
 
             let popupContainer = document.createElement("div");
 
-            new Popup({
-              target: popupContainer,
-              props: { tags },
-            });
+            mount(Popup, {
+                            target: popupContainer,
+                            props: { tags },
+                          });
 
             let marker = new maplibre.Marker({ color: "#F7931A", scale: 0.65 })
               .setLngLat([lon, lat])
@@ -252,6 +247,11 @@
   });
 
   onDestroy(() => map && map.remove());
+  let list = $derived(search
+    ? markers.filter((m) =>
+        m.tags.name.toLowerCase().includes(search.toLowerCase()),
+      )
+    : inview);
 </script>
 
 <div class="w-screen h-dvh flex" id="map" bind:this={mapWrapper}>
@@ -259,11 +259,11 @@
     id="map-container"
     class="mx-auto h-full w-full z-0"
     bind:this={mapContainer}
-  />
+></div>
   <div class="absolute flex top-2 left-2 gap-2">
     <button
       class="rounded-full border-2 border-black bg-base-100 w-10 h-10"
-      on:click={back}
+      onclick={back}
     >
       <Icon icon="arrow-left" style="w-4 m-auto" />
     </button>
@@ -277,7 +277,7 @@
           <input bind:value={search} class="w-full" />
           <div class="flex gap-1 absolute right-6 top-3">
             {#if search}
-              <button on:click={clearSearch}>
+              <button onclick={clearSearch}>
                 <Icon icon="close" style="w-8" />
               </button>
             {:else}
@@ -288,7 +288,7 @@
 
         {#each list as marker, i}
           <button
-            on:click={() => select(marker)}
+            onclick={() => select(marker)}
             class:font-bold={selected === marker}
             class:selected={selected === marker}
             class="block whitespace-nowrap text-ellipsis text-left w-full overflow-hidden"
@@ -301,13 +301,13 @@
     <div class="absolute flex top-2 right-2 gap-2">
       <button
         class="rounded-full border-2 border-black bg-white w-10 h-10"
-        on:click={toggleList}
+        onclick={toggleList}
       >
         <Icon icon="list" style="w-4 m-auto" />
       </button>
       <button
         class="rounded-full border-2 border-black bg-white w-10 h-10"
-        on:click={toggle}
+        onclick={toggle}
       >
         {#if timeout}
           <Icon icon="pause" style="w-4 m-auto" />
diff --git a/src/components/Menu.svelte b/src/components/Menu.svelte
index 3ce6d9ce..de21bbbc 100644
--- a/src/components/Menu.svelte
+++ b/src/components/Menu.svelte
@@ -1,26 +1,35 @@
 <script>
+  import { run } from 'svelte/legacy';
+
   import { theme } from "$lib/store";
   import DarkToggle from "$comp/DarkToggle.svelte";
   import OutClick from "svelte-outclick";
-  export let t, user, w, opacity;
+  let {
+    t,
+    user,
+    w,
+    opacity
+  } = $props();
 
   let dark = () => ($theme = $theme === "dark" ? "light" : "dark");
-  let showMenu = false;
+  let showMenu = $state(false);
 
-  let menuButtons;
-  $: if (user)
-    menuButtons = [
-      { key: "nav.settings", icon: "ph:gear-bold", href: `/settings` },
-      { key: "nav.support", icon: "ph:lifebuoy-bold", href: `/support` },
-      { key: "nav.map", icon: "ph:map-trifold-bold", href: `/map` },
-      {
-        key: "nav.merch",
-        icon: "ph:storefront-bold",
-        href: `https://coinosmerch.com`,
-      },
-      { key: "nav.dark", icon: "ph:moon-stars-bold", href: `/dark` },
-      { key: "nav.signOut", icon: "ph:sign-out-bold", href: `/logout` },
-    ];
+  let menuButtons = $state();
+  run(() => {
+    if (user)
+      menuButtons = [
+        { key: "nav.settings", icon: "ph:gear-bold", href: `/settings` },
+        { key: "nav.support", icon: "ph:lifebuoy-bold", href: `/support` },
+        { key: "nav.map", icon: "ph:map-trifold-bold", href: `/map` },
+        {
+          key: "nav.merch",
+          icon: "ph:storefront-bold",
+          href: `https://coinosmerch.com`,
+        },
+        { key: "nav.dark", icon: "ph:moon-stars-bold", href: `/dark` },
+        { key: "nav.signOut", icon: "ph:sign-out-bold", href: `/logout` },
+      ];
+  });
 
   let hideMenu = () => (showMenu = false);
   let toggleMenu = () => (showMenu = !showMenu);
@@ -28,8 +37,8 @@
 
 <div>
   <OutClick on:outclick={hideMenu}>
-    <button class="btn-menu {opacity('/support')}" on:click={toggleMenu}
-      ><iconify-icon icon="ph:list-bold" width={w > 640 ? 32 : 24} />
+    <button class="btn-menu {opacity('/support')}" onclick={toggleMenu}
+      ><iconify-icon icon="ph:list-bold" width={w > 640 ? 32 : 24}></iconify-icon>
     </button>
 
     <div
@@ -47,12 +56,12 @@
                 {href}
                 data-sveltekit-preload-code="eager"
                 data-sveltekit-preload-data="false"
-                on:click={hideMenu}
+                onclick={hideMenu}
               >
                 <button
                   class="flex justify-center items-center font-semibold hover:opacity-80 gap-2"
                 >
-                  <iconify-icon {icon} width="32" />
+                  <iconify-icon {icon} width="32"></iconify-icon>
                   {t(key)}
                 </button>
               </a>
@@ -61,7 +70,7 @@
         {/each}
       </ul>
       <hr class="my-4" />
-      <a href="/?stay=true"><iconify-icon icon="coinos:logo" width="160" /></a>
+      <a href="/?stay=true"><iconify-icon icon="coinos:logo" width="160"></iconify-icon></a>
     </div>
   </OutClick>
 </div>
diff --git a/src/components/Mnemonic.svelte b/src/components/Mnemonic.svelte
index 41e81d9a..93035230 100644
--- a/src/components/Mnemonic.svelte
+++ b/src/components/Mnemonic.svelte
@@ -1,5 +1,5 @@
 <script>
-  export let mnemonic;
+  let { mnemonic } = $props();
 </script>
 
 <div class="flex w-full border p-4 rounded-2xl h-full">
diff --git a/src/components/Numpad.svelte b/src/components/Numpad.svelte
index 07d1ef4c..03c7c48f 100644
--- a/src/components/Numpad.svelte
+++ b/src/components/Numpad.svelte
@@ -1,21 +1,33 @@
-<script>
+<script lang="ts">
+  import { run, preventDefault, stopPropagation } from "svelte/legacy";
+
   import Left from "$comp/Left.svelte";
   import Icon from "$comp/Icon.svelte";
   import { f, s, focus, warning, sat, sats } from "$lib/utils";
   import { t } from "$lib/translations";
 
-  export let amount,
-    currency,
-    element,
-    fiat = !amount,
-    rate,
-    submit = undefined;
+  interface Props {
+    amount: any;
+    currency: any;
+    element: any;
+    fiat?: any;
+    rate: any;
+    submit?: any;
+    amountFiat?: number;
+  }
 
-  export let amountFiat = 0;
+  let {
+    amount = $bindable(),
+    currency,
+    element = $bindable(),
+    fiat = $bindable(!amount),
+    rate = $bindable(),
+    submit = undefined,
+    amountFiat = $bindable(0),
+  }: Props = $props();
 
   let arrow = "<";
 
-  $: update(amount, amountFiat);
   let update = (a, f) => {
     if (fiat) {
       amount = Math.round(f / (rate / sats));
@@ -102,8 +114,6 @@
     }
   };
 
-  $: html = fiat ? amountFiat : s(amount);
-
   let prev = "";
 
   let input = (e) => {
@@ -193,6 +203,13 @@
     }
     fiat = !fiat;
   };
+  run(() => {
+    update(amount, amountFiat);
+  });
+  let html;
+  run(() => {
+    html = fiat ? amountFiat : s(amount);
+  });
 </script>
 
 <div class="flex justify-center items-center">
@@ -208,17 +225,17 @@
           use:focus
           contenteditable
           bind:innerHTML={html}
-          on:focus={select}
-          on:blur={blur}
-          on:input={input}
-          on:keydown={keydown}
+          onfocus={select}
+          onblur={blur}
+          oninput={input}
+          onkeydown={keydown}
           class="outline-none my-auto"
           bind:this={element}
-        />
+        ></div>
       </div>
       <div
         class="flex items-center justify-center text-2xl cursor-pointer"
-        on:click|preventDefault|stopPropagation={swap}
+        onclick={stopPropagation(preventDefault(swap))}
       >
         {fiat ? "⚡️" + s(amount) : f(amountFiat, currency)}
       </div>
@@ -230,7 +247,7 @@
           <button
             type="button"
             class="btn"
-            on:click|preventDefault|stopPropagation={() => handleInput(value)}
+            onclick={stopPropagation(preventDefault(() => handleInput(value)))}
           >
             <Left />
           </button>
@@ -238,7 +255,7 @@
           <button
             type="button"
             class="btn"
-            on:click|preventDefault|stopPropagation={() => handleInput(value)}
+            onclick={stopPropagation(preventDefault(() => handleInput(value)))}
             >{value}</button
           >
         {/if}
diff --git a/src/components/Password.svelte b/src/components/Password.svelte
index cb57eec5..ac2a9a44 100644
--- a/src/components/Password.svelte
+++ b/src/components/Password.svelte
@@ -1,13 +1,15 @@
 <script>
+  import { preventDefault } from 'svelte/legacy';
+
   import Icon from "$comp/Icon.svelte";
   import { focus, fail, post } from "$lib/utils";
   import { password as pw, passwordPrompt } from "$lib/store";
 
-  export let user;
+  let { user } = $props();
 
-  let password;
+  let password = $state();
   let { username } = user;
-  let revealPassword = false;
+  let revealPassword = $state(false);
 
   let cancel = () => ($passwordPrompt = false);
 
@@ -31,7 +33,7 @@
     <h1 class="text-center text-2xl font-semibold">
       Please enter your password
     </h1>
-    <form on:submit|preventDefault={submit}>
+    <form onsubmit={preventDefault(submit)}>
       <div class="relative mb-5">
         {#if revealPassword}
           <input
@@ -54,21 +56,21 @@
         {/if}
         <button
           type="button"
-          on:click={() => (revealPassword = !revealPassword)}
+          onclick={() => (revealPassword = !revealPassword)}
           class="absolute right-5 top-6"
         >
           <iconify-icon
             icon={revealPassword ? "ph:eye-bold" : "ph:eye-slash-bold"}
             width="32"
-          />
+></iconify-icon>
         </button>
       </div>
       <div class="w-full flex">
         <button
           type="button"
           class="border-2 border-black rounded-xl font-semibold mx-auto py-3 w-40 hover:opacity-80 mx-auto"
-          on:click={cancel}
-          on:keydown={cancel}
+          onclick={cancel}
+          onkeydown={cancel}
         >
           <div class="my-auto">Cancel</div>
         </button>
diff --git a/src/components/Pin.svelte b/src/components/Pin.svelte
index fb17c612..da53577e 100644
--- a/src/components/Pin.svelte
+++ b/src/components/Pin.svelte
@@ -1,28 +1,36 @@
-<script>
+<script lang="ts">
+  import { run, createBubbler, preventDefault } from "svelte/legacy";
+
+  const bubble = createBubbler();
   import { t } from "$lib/translations";
   import { post, success, fail, focus, setCookie } from "$lib/utils";
   import Pinpad from "$comp/Pinpad.svelte";
   import { pin } from "$lib/store";
   import { onMount } from "svelte";
 
-  export let value = "";
-  export let title = $t("user.settings.verifyPIN");
-  export let cancel = () => (p = "");
-  export let notify = true;
+  interface Props {
+    value?: string;
+    title?: any;
+    cancel?: any;
+    notify?: boolean;
+  }
 
-  let p = "";
+  let {
+    value = $bindable(""),
+    title = $t("user.settings.verifyPIN"),
+    cancel = () => (p = ""),
+    notify = true,
+  }: Props = $props();
 
-  $: update(value);
-  let update = (value) => (p = value);
+  let p = $state("");
 
-  $: p.toString().length > 5 && (value = p.toString());
+  let update = (value) => (p = value);
 
-  let loaded;
+  let loaded = $state();
   onMount(() => setTimeout(() => (loaded = true), 500));
 
-  let locktime = 30 * 60;
+  let locktime = $state(30 * 60);
 
-  $: loaded && checkPin(p);
   let checkPin = async (p) => {
     if (p?.length !== 6) return;
     let result;
@@ -41,12 +49,21 @@
       value = "";
     }
   };
+  run(() => {
+    p.toString().length > 5 && (value = p.toString());
+  });
+  run(() => {
+    update(value);
+  });
+  run(() => {
+    loaded && checkPin(p);
+  });
 </script>
 
 {#if loaded}
   <div
     class="fixed bg-base-100 bg-opacity-90 inset-0 h-full w-full z-50 cursor-default"
-    on:click|preventDefault
+    onclick={preventDefault(bubble("click"))}
   >
     <div
       class="mx-auto p-5 border shadow-lg rounded-md bg-base-100 space-y-5 max-w-lg"
@@ -58,10 +75,7 @@
         <label for="locktime" class="font-bold"
           >{$t("user.settings.rememberFor")}</label
         >
-        <select
-          name="locktime"
-          bind:value={locktime}
-        >
+        <select name="locktime" bind:value={locktime}>
           <option value={30}>30 {$t("user.settings.seconds")}</option>
           <option value={5 * 60}>5 {$t("user.settings.minutes")}</option>
           <option value={10 * 60}>10 {$t("user.settings.minutes")}</option>
@@ -72,7 +86,7 @@
       </div>
 
       <div class="w-full flex">
-        <button class="btn" on:click|preventDefault={cancel}>
+        <button class="btn" onclick={preventDefault(cancel)}>
           <div class="my-auto">Cancel</div>
         </button>
       </div>
diff --git a/src/components/Pinpad.svelte b/src/components/Pinpad.svelte
index d61dd2a0..93f31d08 100644
--- a/src/components/Pinpad.svelte
+++ b/src/components/Pinpad.svelte
@@ -1,11 +1,12 @@
 <script>
+  import { preventDefault, stopPropagation } from 'svelte/legacy';
+
   import Left from "$comp/Left.svelte";
   import Icon from "$comp/Icon.svelte";
   import { focus, post, warning } from "$lib/utils";
   import { t } from "$lib/translations";
 
-  export let v;
-  export let cancel;
+  let { v = $bindable(), cancel } = $props();
 
   let arrow = "<";
   let loading = false;
@@ -33,7 +34,7 @@
     }
   };
 
-  let hide = true;
+  let hide = $state(true);
 </script>
 
 <label
@@ -41,7 +42,7 @@
 >
   {#if hide}
     <input
-      on:keydown={validate}
+      onkeydown={validate}
       use:focus
       bind:value={v}
       type="password"
@@ -50,7 +51,7 @@
     />
   {:else}
     <input
-      on:keydown={validate}
+      onkeydown={validate}
       use:focus
       bind:value={v}
       class="clean text-center !text-5xl !w-96 block"
@@ -61,9 +62,9 @@
   <iconify-icon
     icon={hide ? "ph:eye-slash-bold" : "ph:eye-bold"}
     width="32"
-    on:click|stopPropagation|preventDefault={() => (hide = !hide)}
+    onclick={stopPropagation(preventDefault(() => (hide = !hide)))}
     class="cursor-pointer"
-  />
+></iconify-icon>
 </label>
 
 <div class="grid grid-cols-3 gap-2 w-[300px] mx-auto grayscale">
@@ -72,7 +73,7 @@
       <button
         type="button"
         class="btn"
-        on:click|stopPropagation|preventDefault={() => handleInput(value)}
+        onclick={stopPropagation(preventDefault(() => handleInput(value)))}
       >
         <Left />
       </button>
@@ -80,7 +81,7 @@
       <button
         type="button"
         class="btn"
-        on:click|stopPropagation|preventDefault={() => handleInput(value)}
+        onclick={stopPropagation(preventDefault(() => handleInput(value)))}
         >{value}</button
       >
     {/if}
diff --git a/src/components/Popup.svelte b/src/components/Popup.svelte
index df96215f..661b2bed 100644
--- a/src/components/Popup.svelte
+++ b/src/components/Popup.svelte
@@ -1,7 +1,7 @@
 <script>
   import { page } from "$app/stores";
   import Avatar from "$comp/Avatar.svelte";
-  export let tags;
+  let { tags } = $props();
 
   let addr = (tags) => {
     let {
diff --git a/src/components/Qr.svelte b/src/components/Qr.svelte
index e98497c4..c8d33e23 100644
--- a/src/components/Qr.svelte
+++ b/src/components/Qr.svelte
@@ -1,14 +1,14 @@
 <script>
   import screenfull from "screenfull";
-  export let src;
-  let qr;
+  let { src } = $props();
+  let qr = $state();
 </script>
 
 <div
   class="w-80 mx-auto cursor-pointer"
   bind:this={qr}
-  on:click={() => screenfull.toggle(qr)}
-  on:keydown={() => screenfull.toggle(qr)}
+  onclick={() => screenfull.toggle(qr)}
+  onkeydown={() => screenfull.toggle(qr)}
 >
   <img {src} class="mx-auto" alt="QR Code" />
 </div>
diff --git a/src/components/SetAmount.svelte b/src/components/SetAmount.svelte
index 506762da..332c2eca 100644
--- a/src/components/SetAmount.svelte
+++ b/src/components/SetAmount.svelte
@@ -1,17 +1,21 @@
 <script>
+  import { preventDefault, stopPropagation } from "svelte/legacy";
+
   import Numpad from "$comp/Numpad.svelte";
   import Toggle from "$comp/Toggle.svelte";
 
-  export let currency,
-    rate,
-    fiat,
-    submit,
+  let {
+    currency = $bindable(),
+    fiat = $bindable(),
+    rate = $bindable(),
+    submit = $bindable(),
     settingAmount,
     setAmount,
-    newAmount,
+    newAmount = $bindable(),
     toggleAmount,
     t,
-    amountPrompt;
+    amountPrompt = $bindable(),
+  } = $props();
 </script>
 
 {#if settingAmount}
@@ -21,19 +25,13 @@
     <div
       class="relative mx-auto p-12 max-w-xl shadow-lg rounded-md bg-base-100 space-y-5"
     >
-      <form on:submit|preventDefault={setAmount} class="space-y-5">
-        <Numpad
-          bind:amount={newAmount}
-          bind:currency
-          bind:rate
-          bind:fiat
-          bind:submit
-        />
+      <form onsubmit={preventDefault(setAmount)} class="space-y-5">
+        <Numpad bind:amount={newAmount} bind:fiat {currency} {rate} {submit} />
         <div class="w-full flex flex-wrap gap-2">
           <button
             bind:this={submit}
             type="submit"
-            on:click|preventDefault|stopPropagation={setAmount}
+            onclick={stopPropagation(preventDefault(setAmount))}
             class="btn btn-accent"
           >
             <div class="my-auto">{t("payments.ok")}</div>
@@ -41,8 +39,8 @@
           <button
             type="button"
             class="btn"
-            on:click|preventDefault|stopPropagation={toggleAmount}
-            on:keydown|preventDefault|stopPropagation={toggleAmount}
+            onclick={stopPropagation(preventDefault(toggleAmount))}
+            onkeydown={stopPropagation(preventDefault(toggleAmount))}
           >
             <div class="my-auto">{t("payments.cancel")}</div>
           </button>
diff --git a/src/components/Slider.svelte b/src/components/Slider.svelte
index b82b6bf9..137c28b4 100644
--- a/src/components/Slider.svelte
+++ b/src/components/Slider.svelte
@@ -1,8 +1,17 @@
-<script>
-  export let value,
+<script lang="ts">
+  interface Props {
+    value: any;
+    handle: any;
+    min?: number;
+    max?: number;
+  }
+
+  let {
+    value = $bindable(),
     handle,
     min = 0,
-    max = 100;
+    max = 100
+  }: Props = $props();
 </script>
 
 <input
@@ -13,7 +22,7 @@
   bind:value
   class="px-0 py-0 my-5"
   style="--bgPercent: {((value - min) * 100) / (max - min)}%;"
-  on:input={handle}
+  oninput={handle}
 />
 
 <style>
diff --git a/src/components/Toggle.svelte b/src/components/Toggle.svelte
index 2f92837d..0bc319ab 100644
--- a/src/components/Toggle.svelte
+++ b/src/components/Toggle.svelte
@@ -1,6 +1,5 @@
 <script>
-  export let id;
-  export let value;
+  let { id, value = $bindable() } = $props();
 </script>
 
 <label for={id} class="inline-flex relative items-center mr-5 cursor-pointer">
@@ -13,5 +12,5 @@
   />
   <div
     class="w-11 h-6 bg-gray-200 rounded-full peer dark:bg-gray-700 peer-focus:ring-4 peer-focus:ring-gray-300 dark:peer-focus:ring-gray-800 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-green-500"
-  />
+></div>
 </label>
diff --git a/src/components/WalletPass.svelte b/src/components/WalletPass.svelte
index 75c94f34..57cf69c3 100644
--- a/src/components/WalletPass.svelte
+++ b/src/components/WalletPass.svelte
@@ -1,9 +1,11 @@
 <script>
+  import { preventDefault } from 'svelte/legacy';
+
   import { focus } from "$lib/utils";
   import { t } from "$lib/translations";
   import Icon from "$comp/Icon.svelte";
-  export let cancel, password, submit;
-  let revealPassword;
+  let { cancel, password = $bindable(), submit } = $props();
+  let revealPassword = $state();
 </script>
 
 <div
@@ -15,7 +17,7 @@
     <h1 class="text-center text-2xl font-semibold">
       {$t("payments.enterWalletPass")}
     </h1>
-    <form on:submit|preventDefault={submit}>
+    <form onsubmit={preventDefault(submit)}>
       <div class="relative mb-5">
         {#if revealPassword}
           <input
@@ -38,7 +40,7 @@
         {/if}
         <button
           type="button"
-          on:click={() => (revealPassword = !revealPassword)}
+          onclick={() => (revealPassword = !revealPassword)}
           class="absolute right-5 top-1/2"
         >
           <Icon icon={revealPassword ? "eye" : "eye-off"} />
@@ -48,8 +50,8 @@
         <button
           type="button"
           class="border rounded-2xl font-semibold mx-auto py-5 px-6 hover:opacity-80 mx-auto grow"
-          on:click={cancel}
-          on:keydown={cancel}
+          onclick={cancel}
+          onkeydown={cancel}
         >
           <div class="my-auto">Cancel</div>
         </button>