From 19a8c100da3b4281b68e9b8afc837e6f93b53230 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Mon, 18 Dec 2023 22:53:54 -0800
Subject: numpad focus

---
 src/components/Numpad.svelte                       | 26 ++++++++++++----------
 .../[username]/receive/[...param]/+page.svelte     |  1 +
 src/routes/(app)/send/invoice/[id]/+page.svelte    |  3 ++-
 .../send/user/[username]/[...amount]/+page.svelte  | 11 ++++++---
 4 files changed, 25 insertions(+), 16 deletions(-)

(limited to 'src')

diff --git a/src/components/Numpad.svelte b/src/components/Numpad.svelte
index 4dd73f6d..7006d7aa 100644
--- a/src/components/Numpad.svelte
+++ b/src/components/Numpad.svelte
@@ -1,7 +1,7 @@
 <script>
   import Left from "$comp/Left.svelte";
   import Icon from "$comp/Icon.svelte";
-  import { f, s, post, warning, sat, sats } from "$lib/utils";
+  import { f, s, focus, post, warning, sat, sats } from "$lib/utils";
   import { t } from "$lib/translations";
 
   export let amount,
@@ -10,7 +10,7 @@
     rate,
     submit = undefined;
 
-  export let amountFiat = 0;
+  export let amountFiat = "";
 
   let arrow = "<";
 
@@ -93,9 +93,7 @@
       } else if (value !== "<" && parseInt(amount + value) > sats) {
         warning($t("user.receive.lessThan1BTCWarning"));
       } else {
-        console.log("CLICK", amount.toString(), value);
         amount = parseInt(amount.toString() + value);
-        console.log("AMOUNT", amount);
       }
     }
   };
@@ -163,12 +161,14 @@
     }, 0);
   };
 
-  let focus = (e) => {
-    let range = document.createRange();
-    range.selectNodeContents(e.target);
-    let sel = getSelection();
-    sel.removeAllRanges();
-    sel.addRange(range);
+  let clear = (e) => {
+    if (amount > 0) {
+      let range = document.createRange();
+      range.selectNodeContents(e.target);
+      let sel = getSelection();
+      sel.removeAllRanges();
+      sel.addRange(range);
+    }
   };
 
   let keydown = (e) =>
@@ -185,9 +185,10 @@
           {fiat ? symbol : "⚡️"}
         </div>
         <div
+          use:focus
           contenteditable
           bind:innerHTML={html}
-          on:focus={focus}
+          on:focus={clear}
           on:input={input}
           on:keydown={keydown}
           class="outline-none my-auto"
@@ -220,7 +221,8 @@
           <button
             type="button"
             class="bg-primary rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white flex justify-center items-center hover:opacity-80"
-            on:click={() => handleInput(value)}>
+            on:click={() => handleInput(value)}
+          >
             <Left />
           </button>
         {:else}
diff --git a/src/routes/(app)/[username]/receive/[...param]/+page.svelte b/src/routes/(app)/[username]/receive/[...param]/+page.svelte
index 840f0277..37ab57f0 100644
--- a/src/routes/(app)/[username]/receive/[...param]/+page.svelte
+++ b/src/routes/(app)/[username]/receive/[...param]/+page.svelte
@@ -35,6 +35,7 @@
   <input type="hidden" name="currency" value={currency} />
   <input type="hidden" name="username" value={username} />
   <input type="hidden" name="type" value={type} />
+  <input type="hidden" name="rate" value={rate} />
 
   {#if request}
     <input type="hidden" name="request_id" value={request.id} />
diff --git a/src/routes/(app)/send/invoice/[id]/+page.svelte b/src/routes/(app)/send/invoice/[id]/+page.svelte
index 5a9dbe9a..1e26ece1 100644
--- a/src/routes/(app)/send/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/send/invoice/[id]/+page.svelte
@@ -9,7 +9,7 @@
   import Numpad from "$comp/Numpad.svelte";
   import Spinner from "$comp/Spinner.svelte";
   import { page } from "$app/stores";
-  import { post, back, f, fiat as toFiat, s, sats } from "$lib/utils";
+  import { post, back, f, fiat as toFiat, s, sats, focus } from "$lib/utils";
   export let data;
   export let form;
 
@@ -143,6 +143,7 @@
     <div class="flex w-full">
       {#if amount}
         <button
+          use:focus
           type="submit"
           class="opacity-100 hover:opacity-80'} rounded-2xl border py-3 font-bold mx-auto mt-2 bg-black text-white px-4 w-24">
           {#if loading}
diff --git a/src/routes/(app)/send/user/[username]/[...amount]/+page.svelte b/src/routes/(app)/send/user/[username]/[...amount]/+page.svelte
index 7d880cac..533a7039 100644
--- a/src/routes/(app)/send/user/[username]/[...amount]/+page.svelte
+++ b/src/routes/(app)/send/user/[username]/[...amount]/+page.svelte
@@ -31,6 +31,7 @@
     amount = a;
     amountFiat = parseFloat(af).toFixed(2);
     rate = fiat ? (sats * amountFiat) / amount : r;
+
     ({ hash } = await post(`/${subject.username}/invoice`, {
       invoice: {
         amount,
@@ -83,7 +84,8 @@
       {#if amount}
         <button
           type="submit"
-          class="opacity-100 hover:opacity-80'} rounded-2xl border py-3 font-bold mx-auto mt-2 bg-black text-white px-4 w-24">
+          class="opacity-100 hover:opacity-80'} rounded-2xl border py-3 font-bold mx-auto mt-2 bg-black text-white px-4 w-24"
+        >
           {#if loading}
             <Spinner />
           {:else}
@@ -96,8 +98,11 @@
           bind:this={next}
           class="opacity-100 hover:opacity-80'} rounded-2xl border py-3 font-bold mx-auto mt-2 bg-black text-white px-4 w-24"
           on:click={setAmount}
-          on:keydown={setAmount}> {$t("payments.next")}</button>
-        {/if}
+          on:keydown={setAmount}
+        >
+          {$t("payments.next")}</button
+        >
+      {/if}
     </div>
   </form>
 </div>
-- 
cgit v1.2.3