strip commas on paste

4 files changed, 16 insertions, 17 deletions

diff --git a/src/components/Account.svelte b/src/components/Account.svelte
index e075b130..b87a5022 100644
--- a/src/components/Account.svelte
+++ b/src/components/Account.svelte
@@ -18,9 +18,8 @@
 </script>
 
 <div
-  class="block space-y-2 border-primary py-4 cursor-pointer"
+  class="block space-y-2 border-primary py-4"
   class:border-b-8={!last}
-  onclick={go}
   aria-label="Payments"
 >
   <div class="flex">
diff --git a/src/components/Amount.svelte b/src/components/Amount.svelte
index 035152d1..7efafca8 100644
--- a/src/components/Amount.svelte
+++ b/src/components/Amount.svelte
@@ -1,13 +1,14 @@
 <script>
   import { s, f, toFiat } from "$lib/utils";
   import { fiat } from "$lib/store";
-  const { amount, locale, tip, rate, currency } = $props();
+  const { align, amount, locale, tip, rate, currency } = $props();
 </script>
 
 {#if amount}
   <div>
     <h2
-      class="text-2xl md:text-3xl font-semibold flex justify-center items-end"
+      class="text-2xl md:text-3xl font-semibold flex items-end"
+      class:justify-center={align !== "left"}
     >
       <div class="flex items-center">
         <iconify-icon icon="ph:lightning-fill" class="text-yellow-300"
@@ -23,7 +24,10 @@
         </div>
       {/if}
     </h2>
-    <h3 class="flex text-secondary md:text-lg justify-center">
+    <h3
+      class="flex text-secondary md:text-lg"
+      class:justify-center={align !== "left"}
+    >
       {f(toFiat(amount, rate), currency, locale)}
       {#if tip}
         <span class="text-base">
diff --git a/src/components/Balance.svelte b/src/components/Balance.svelte
index 28bd69b3..a80664dc 100644
--- a/src/components/Balance.svelte
+++ b/src/components/Balance.svelte
@@ -1,4 +1,5 @@
 <script>
+  import Amount from "$comp/Amount.svelte";
   import Pin from "$comp/Pin.svelte";
   import { loc, f, toFiat, s, si, sat, sats } from "$lib/utils";
   import { pin } from "$lib/store";
@@ -6,6 +7,7 @@
 
   let show = $state();
   let { user, rate, balance } = $props();
+  let { currency } = $derived(user);
   let locale = loc(user);
   let toggleShow = (e) => {
     e.preventDefault();
@@ -25,18 +27,7 @@
       <div class="my-auto">{$t("user.showBalance")}</div>
     </button>
   {:else}
-    <div class="text-4xl font-bold flex items-center">
-      <iconify-icon icon="ph:lightning-fill" width="32" class="text-yellow-300"
-      ></iconify-icon>
-      {s(balance, locale)}
-    </div>
 
-    <div class="text-secondary text-xl">
-      {#if isNaN(rate)}
-        <div class="text-gray-200">&mdash;</div>
-      {:else}
-        {f(toFiat(balance, rate), user.currency, locale)}
-      {/if}
-    </div>
+    <Amount amount={balance} {rate} {currency} {locale} align="left" />
   {/if}
 </div>
diff --git a/src/components/Numpad.svelte b/src/components/Numpad.svelte
index 85f4b07f..a0c5260f 100644
--- a/src/components/Numpad.svelte
+++ b/src/components/Numpad.svelte
@@ -15,6 +15,10 @@
 
   export let amountFiat = 0;
 
+  let pasted = async () => {
+    html = (await navigator.clipboard.readText()).replace(/,/g, "");
+  };
+
   function getCurrencyInfo(locale = "en-US", currency) {
     const formatter = new Intl.NumberFormat(locale, {
       style: "currency",
@@ -207,6 +211,7 @@
           use:focus
           contenteditable
           bind:innerHTML={html}
+          on:paste={pasted}
           on:focus={select}
           on:blur={blur}
           on:input={input}