numpad fixes

7 files changed, 88 insertions, 31 deletions

diff --git a/src/components/Numpad.svelte b/src/components/Numpad.svelte
index 00547e6a..8ebbfdf1 100644
--- a/src/components/Numpad.svelte
+++ b/src/components/Numpad.svelte
@@ -3,14 +3,15 @@
   import Left from "$comp/Left.svelte";
   import { f, s, focus, warning, sat, sats } from "$lib/utils";
   import { t } from "$lib/translations";
+  import { fiat as fiatStore } from "$lib/store";
 
   // ---- Props (Svelte 5 runes) ----
   let {
-    amount = $bindable(0),
+    amount = $bindable(),
     currency = "USD",
-    fiat = $bindable(true),
+    fiat = $bindable(),
     element,
-    rate,
+    rate = $bindable(),
     locale,
     submit = undefined,
     amountFiat = 0,
@@ -217,12 +218,28 @@
       sel.removeAllRanges();
       sel.addRange(range);
     });
+
+    $fiatStore = fiat;
   };
 
   const arrow = "<";
-  const numPad = ["1","2","3","4","5","6","7","8","9","00","0",arrow];
+  const numPad = [
+    "1",
+    "2",
+    "3",
+    "4",
+    "5",
+    "6",
+    "7",
+    "8",
+    "9",
+    "00",
+    "0",
+    arrow,
+  ];
 
   onMount(() => {
+    fiat = $fiatStore;
     if (fiat) {
       const cents = Math.round((parseFloat(amountFiat || "0") || 0) * 100);
       fiatDigits = Math.max(0, cents).toString();
@@ -237,12 +254,18 @@
 <div class="flex justify-center items-center">
   <div class="space-y-5 w-full">
     <div class="text-center">
-      <div class="text-5xl md:text-6xl font-semibold tracking-widest flex justify-center">
+      <div
+        class="text-5xl md:text-6xl font-semibold tracking-widest flex justify-center"
+      >
         <div class="my-auto" class:text-5xl={!fiat}>
           {#if fiat}
             {#if position === "before"}{symbol}{/if}
           {:else}
-            <iconify-icon noobserver icon="ph:lightning-fill" class="text-yellow-300"></iconify-icon>
+            <iconify-icon
+              noobserver
+              icon="ph:lightning-fill"
+              class="text-yellow-300"
+            ></iconify-icon>
           {/if}
         </div>
 
@@ -279,7 +302,11 @@
         }}
       >
         {#if fiat}
-          <iconify-icon noobserver icon="ph:lightning-fill" class="text-yellow-300"></iconify-icon>
+          <iconify-icon
+            noobserver
+            icon="ph:lightning-fill"
+            class="text-yellow-300"
+          ></iconify-icon>
           {s(amount, locale)}
         {:else}
           {f(amountFiat, currency, locale)}
@@ -290,15 +317,29 @@
     <div class="grid grid-cols-3 gap-2 w-full mx-auto">
       {#each numPad as value}
         {#if value === arrow}
-          <button type="button" class="btn" aria-label="Backspace" onclick={(e) => {
-            e.preventDefault(); e.stopPropagation(); handleInput(value);
-          }}>
+          <button
+            type="button"
+            class="btn"
+            aria-label="Backspace"
+            onclick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              handleInput(value);
+            }}
+          >
             <Left />
           </button>
         {:else}
-          <button type="button" class="btn" aria-label={`Key ${value}`} onclick={(e) => {
-            e.preventDefault(); e.stopPropagation(); handleInput(value);
-          }}>
+          <button
+            type="button"
+            class="btn"
+            aria-label={`Key ${value}`}
+            onclick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              handleInput(value);
+            }}
+          >
             {value}
           </button>
         {/if}
diff --git a/src/components/SetAmount.svelte b/src/components/SetAmount.svelte
index a453b9d1..536c8e24 100644
--- a/src/components/SetAmount.svelte
+++ b/src/components/SetAmount.svelte
@@ -6,13 +6,13 @@
   let submit = $state();
 
   let {
-    currency = $bindable(),
-    fiat = $bindable(),
-    locale = $bindable(),
-    rate = $bindable(),
+    currency = $bindable("USD"),
+    fiat = $bindable(true),
+    locale = $bindable("en-US"),
+    rate = $bindable(0),
     settingAmount,
     setAmount,
-    newAmount = $bindable(),
+    newAmount = $bindable(0),
     toggleAmount,
     t,
   } = $props();
diff --git a/src/routes/(app)/[username]/receive/+page.svelte b/src/routes/(app)/[username]/receive/+page.svelte
index 9b7ffc00..cd692abf 100644
--- a/src/routes/(app)/[username]/receive/+page.svelte
+++ b/src/routes/(app)/[username]/receive/+page.svelte
@@ -99,7 +99,7 @@
     await update();
   };
 
-  let newAmount = $state();
+  let newAmount = $state(0);
   let settingAmount = $state();
   let fiat = $state(true);
   let toggleAmount = () => (settingAmount = !settingAmount);
diff --git a/src/routes/(app)/fund/[id]/withdraw/+page.svelte b/src/routes/(app)/fund/[id]/withdraw/+page.svelte
index 78f9b16c..69a74a3f 100644
--- a/src/routes/(app)/fund/[id]/withdraw/+page.svelte
+++ b/src/routes/(app)/fund/[id]/withdraw/+page.svelte
@@ -6,15 +6,17 @@
   import Numpad from "$comp/Numpad.svelte";
   import Spinner from "$comp/Spinner.svelte";
   import { page } from "$app/stores";
-  import { s } from "$lib/utils";
+  import { loc, s } from "$lib/utils";
   import { fiat, pin } from "$lib/store";
 
   let { data, form } = $props();
 
-  let { currency } = $derived(data.user);
+  let { user } = $derived(data);
+  let { currency } = $derived(user);
   let loading = $state();
   let { id, balance, rate } = $derived(data);
   let { amount } = $state(data);
+  let locale = loc(user);
 
   let submit = $state();
   let submitting = $state();
@@ -39,7 +41,7 @@
 {/if}
 
 <div class="container px-4 mt-20 max-w-xl mx-auto">
-  <Numpad bind:amount {currency} {fiat} {rate} {submit} />
+  <Numpad bind:amount {currency} {fiat} {rate} {submit} {locale} />
 
   <form use:enhance={handler(toggle)} method="POST" class="space-y-5">
     <input name="id" value={id} type="hidden" />
diff --git a/src/routes/(app)/send/bitcoin/[address]/+page.svelte b/src/routes/(app)/send/bitcoin/[address]/+page.svelte
index 671de954..529e2691 100644
--- a/src/routes/(app)/send/bitcoin/[address]/+page.svelte
+++ b/src/routes/(app)/send/bitcoin/[address]/+page.svelte
@@ -5,13 +5,14 @@
   import Numpad from "$comp/Numpad.svelte";
   import { page } from "$app/stores";
   import { rate } from "$lib/store";
-  import { fail, s } from "$lib/utils";
+  import { loc, fail, s } from "$lib/utils";
 
   let { data } = $props();
 
   let { balance, user } = data;
   let { address } = $page.params;
   let { currency, username } = user;
+  let locale = loc(user);
 
   let amount = $state(0);
   let a = $state(0);
@@ -34,7 +35,7 @@
 
   <div class="text-xl text-secondary break-all">{address}</div>
 
-  <Numpad bind:amount={a} bind:fiat {currency} {submit} bind:rate={$rate} />
+  <Numpad bind:amount={a} bind:fiat {currency} {submit} bind:rate={$rate} {locale} />
 
   <div class="flex justify-center gap-2">
     <button
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 b86082f3..200c93d5 100644
--- a/src/routes/(app)/send/bitcoin/[address]/[amount]/[...feeRate]/+page.svelte
+++ b/src/routes/(app)/send/bitcoin/[address]/[amount]/[...feeRate]/+page.svelte
@@ -1,6 +1,4 @@
 <script>
-  import { run } from "svelte/legacy";
-
   import { tick } from "svelte";
   import { t } from "$lib/translations";
   import { enhance } from "$app/forms";
@@ -71,8 +69,18 @@
 
   let toggle = () => (submitting = !submitting);
 
-  let { account, amount, address, message, fee, fees, subtract, ourfee, hex, inputs } =
-    $derived(data);
+  let {
+    account,
+    amount,
+    address,
+    message,
+    fee,
+    fees,
+    subtract,
+    ourfee,
+    hex,
+    inputs,
+  } = $derived(data);
 
   let { feeRate } = $state(data);
 
@@ -116,7 +124,11 @@
   {:else}
     <div class="text-xl text-secondary break-all">{address}</div>
 
-    <Amount amount={subtract ? amount - fee - ourfee : amount} rate={$rate} {currency} />
+    <Amount
+      amount={subtract ? amount - fee - ourfee : amount}
+      rate={$rate}
+      {currency}
+    />
 
     <div class="text-center">
       <h2 class="text-secondary text-lg">{$t("payments.networkFee")}</h2>
diff --git a/src/routes/(app)/send/fund/[...name]/[...amount]/+page.svelte b/src/routes/(app)/send/fund/[...name]/[...amount]/+page.svelte
index 652e0885..d34ed073 100644
--- a/src/routes/(app)/send/fund/[...name]/[...amount]/+page.svelte
+++ b/src/routes/(app)/send/fund/[...name]/[...amount]/+page.svelte
@@ -6,7 +6,7 @@
   import { page } from "$app/stores";
   import { pin } from "$lib/store";
   import handler from "$lib/handler";
-  import { s } from "$lib/utils";
+  import { loc, s } from "$lib/utils";
   import { applyAction, deserialize } from "$app/forms";
 
   let { data, form } = $props();
@@ -15,6 +15,7 @@
   let { name, rate } = $derived(data);
   let loading = $state();
   let fiat = $state();
+  let locale = loc(user);
 
   let submit = $state();
   let submitting = $state();
@@ -49,7 +50,7 @@
 {/if}
 
 <div class="container px-4 mt-20 max-w-xl mx-auto">
-  <Numpad bind:amount {currency} {rate} {fiat} {submit} />
+  <Numpad bind:amount {currency} {rate} {fiat} {submit} {locale} />
 
   <form
     use:enhance={handler(toggle)}