fix amount prompt

3 files changed, 27 insertions, 21 deletions

diff --git a/src/components/SetAmount.svelte b/src/components/SetAmount.svelte
index 332c2eca..5b703896 100644
--- a/src/components/SetAmount.svelte
+++ b/src/components/SetAmount.svelte
@@ -1,6 +1,5 @@
 <script>
-  import { preventDefault, stopPropagation } from "svelte/legacy";
-
+  import { amountPrompt } from "$lib/store";
   import Numpad from "$comp/Numpad.svelte";
   import Toggle from "$comp/Toggle.svelte";
 
@@ -14,7 +13,6 @@
     newAmount = $bindable(),
     toggleAmount,
     t,
-    amountPrompt = $bindable(),
   } = $props();
 </script>
 
@@ -25,13 +23,13 @@
     <div
       class="relative mx-auto p-12 max-w-xl shadow-lg rounded-md bg-base-100 space-y-5"
     >
-      <form onsubmit={preventDefault(setAmount)} class="space-y-5">
+      <form onsubmit={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"
-            onclick={stopPropagation(preventDefault(setAmount))}
+            onclick={setAmount}
             class="btn btn-accent"
           >
             <div class="my-auto">{t("payments.ok")}</div>
@@ -39,8 +37,8 @@
           <button
             type="button"
             class="btn"
-            onclick={stopPropagation(preventDefault(toggleAmount))}
-            onkeydown={stopPropagation(preventDefault(toggleAmount))}
+            onclick={toggleAmount}
+            onkeydown={toggleAmount}
           >
             <div class="my-auto">{t("payments.cancel")}</div>
           </button>
@@ -49,7 +47,7 @@
 
       <div class="flex justify-center gap-3">
         <div class="text-secondary">{t("payments.amountPrompt")}</div>
-        <Toggle id="notify" bind:value={amountPrompt} />
+        <Toggle id="notify" bind:value={$amountPrompt} />
       </div>
     </div>
   </div>
diff --git a/src/routes/(app)/[username]/receive/+page.svelte b/src/routes/(app)/[username]/receive/+page.svelte
index be4ed3d0..ddb17e71 100644
--- a/src/routes/(app)/[username]/receive/+page.svelte
+++ b/src/routes/(app)/[username]/receive/+page.svelte
@@ -16,10 +16,8 @@
 
   let showOptions;
 
-  let { id, rates, subject, user, src, text } = $state(data);
-  let refresh = (data) => {
-    ({ id, rates, subject, user, src, text } = data);
-  };
+  let { id, rates, subject, user, text } = $state(data);
+  let { src } = $derived(data);
 
   let { currency, username } = subject;
   let rate = rates[currency];
@@ -52,12 +50,17 @@
     });
   };
 
-  let setAmount = async () => {
-    if (typeof $amountPrompt === "undefined") $amountPrompt = true;
+  let setAmount = async (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+
     settingAmount = false;
+
+    if (typeof $amountPrompt === "undefined") $amountPrompt = true;
     amount = newAmount;
     invoice.amount = newAmount;
     invoice.tip = 0;
+
     ({ id } = await post(`/invoice`, {
       invoice,
       user: { username, currency },
@@ -75,15 +78,16 @@
   let fiat = $state(true);
   let toggleAmount = () => (settingAmount = !settingAmount);
   let submit;
-  run(() => {
-    refresh(data);
-  });
   let link = $derived(
     [types.bitcoin, types.liquid].includes(type) ? text : `lightning:${text}`,
   );
   let txt = $derived(
     [types.bitcoin, types.liquid].includes(type) ? hash : text,
   );
+
+  onMount(() => {
+    if ($amountPrompt && !amount) toggleAmount();
+  });
 </script>
 
 <div class="invoice container mx-auto max-w-xl px-4 space-y-2">
@@ -126,6 +130,5 @@
   {settingAmount}
   {setAmount}
   {toggleAmount}
-  amountPrompt={$amountPrompt}
   t={$t}
 />
diff --git a/src/routes/(app)/invoice/[id]/+page.svelte b/src/routes/(app)/invoice/[id]/+page.svelte
index 15dc97ae..8c6e2b75 100644
--- a/src/routes/(app)/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/+page.svelte
@@ -65,11 +65,16 @@
     goto(`./${id}?options=true`, { invalidateAll: true, noScroll: true });
   };
 
-  let setAmount = $state(async () => {
-    if (typeof $amountPrompt === "undefined") $amountPrompt = true;
+  let setAmount = async (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+
     settingAmount = false;
+
+    if (typeof $amountPrompt === "undefined") $amountPrompt = true;
     invoice.amount = newAmount;
     invoice.tip = 0;
+    
     ({ id } = await post(`/invoice`, {
       invoice,
       user: { username, currency },
@@ -80,7 +85,7 @@
     else url += "?options=true";
 
     goto(url, { invalidateAll: true, noScroll: true });
-  });
+  };
 
   let newAmount = $state(0);
   let settingAmount = $state();