From 9fb49a6a61239ac30d6b85befc4f33a5f3469611 Mon Sep 17 00:00:00 2001
From: Adam Soltys <adam@coinos.io>
Date: Fri, 8 Nov 2024 17:06:38 -0800
Subject: fix tip dialog

---
 .../(app)/[username]/(profile)/+layout.svelte      | 53 ++++++-----------
 src/routes/(app)/invoice/[id]/tip/+page.svelte     | 67 +++++++---------------
 2 files changed, 39 insertions(+), 81 deletions(-)

(limited to 'src/routes')

diff --git a/src/routes/(app)/[username]/(profile)/+layout.svelte b/src/routes/(app)/[username]/(profile)/+layout.svelte
index 65911eee..2be99adc 100644
--- a/src/routes/(app)/[username]/(profile)/+layout.svelte
+++ b/src/routes/(app)/[username]/(profile)/+layout.svelte
@@ -1,6 +1,4 @@
 <script>
-  import { run, preventDefault } from 'svelte/legacy';
-
   import { invalidate } from "$app/navigation";
   import { browser } from "$app/environment";
   import { hexToUint8Array } from "uint8array-extras";
@@ -25,23 +23,8 @@
     followers,
     followList,
   } = $state(data);
-  let { currency, npub, username: n, display } = $state(subject);
-
-  let refresh = (data) => {
-    ({
-      events,
-      user,
-      subject,
-      src,
-      rates,
-      text,
-      follows,
-      followers,
-      followList,
-    } = data);
-    ({ currency, npub, username: n, display } = subject);
-  };
 
+  let { currency, npub, username: n, display } = $state(subject);
 
   let list = $state([]);
   let follow = async () => {
@@ -89,7 +72,6 @@
     }
   };
 
-
   let showBio = $state();
   let toggleBio = () => (showBio = !showBio);
 
@@ -98,7 +80,8 @@
 
   let password = $state();
 
-  let reset = async () => {
+  let reset = async (e) => {
+    e.preventDefault();
     try {
       await post(`/reset`, { username: n, password });
       success("Password reset");
@@ -106,18 +89,16 @@
       fail(e.message);
     }
   };
-  run(() => {
-    refresh(data);
-  });
+
   let stripped = $derived(n.replace(/\s/g, ""));
   let username = $derived(n.length > 60 ? n.substr(0, 6) : display || stripped);
-  let lnaddr = $derived(subject?.anon
-    ? subject.lud16 || undefined
-    : `${stripped}@${$page.url.host}`);
+  let lnaddr = $derived(
+    subject?.anon
+      ? subject.lud16 || undefined
+      : `${stripped}@${$page.url.host}`,
+  );
   let profile = $derived(`${$page.url.host}/${subject.anon ? npub : stripped}`);
-  run(() => {
-    followList.then((l) => (list = l));
-  });
+  $effect(() => followList.then((l) => (list = l)));
   let following = $derived(list.some((t) => t.includes(subject.pubkey)));
 </script>
 
@@ -184,10 +165,12 @@
               </div>
               <div class="flex mb-auto gap-1">
                 <button class="my-auto" onclick={() => copy(lnaddr)}
-                  ><iconify-icon icon="ph:copy-bold" width="32"></iconify-icon></button
+                  ><iconify-icon icon="ph:copy-bold" width="32"
+                  ></iconify-icon></button
                 >
                 <a href={`/qr/${encodeURIComponent(lnaddr)}`} class="my-auto">
-                  <iconify-icon icon="ph:qr-code-bold" width="32"></iconify-icon>
+                  <iconify-icon icon="ph:qr-code-bold" width="32"
+                  ></iconify-icon>
                 </a>
               </div>
             </div>
@@ -201,7 +184,8 @@
             </div>
             <div class="flex mb-auto gap-1">
               <button class="my-auto" onclick={() => copy(profile)}
-                ><iconify-icon icon="ph:copy-bold" width="32"></iconify-icon></button
+                ><iconify-icon icon="ph:copy-bold" width="32"
+                ></iconify-icon></button
               >
               <a
                 href={`/qr/${encodeURIComponent(
@@ -222,7 +206,8 @@
             </div>
             <div class="flex my-auto gap-1">
               <button class="my-auto" onclick={() => copy(npub)}
-                ><iconify-icon icon="ph:copy-bold" width="32"></iconify-icon></button
+                ><iconify-icon icon="ph:copy-bold" width="32"
+                ></iconify-icon></button
               >
               <a href={`/qr/${encodeURIComponent(npub)}`} class="my-auto">
                 <iconify-icon icon="ph:qr-code-bold" width="32"></iconify-icon>
@@ -262,7 +247,7 @@
       <!-- {/if} -->
 
       {#if user?.admin && user.username !== subject.username}
-        <form class="w-full flex" onsubmit={preventDefault(reset)}>
+        <form class="w-full flex" onsubmit={reset}>
           <input placeholder="Password reset" bind:value={password} />
           <button
             type="submit"
diff --git a/src/routes/(app)/invoice/[id]/tip/+page.svelte b/src/routes/(app)/invoice/[id]/tip/+page.svelte
index 53f0eb4b..29516c61 100644
--- a/src/routes/(app)/invoice/[id]/tip/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/tip/+page.svelte
@@ -1,7 +1,6 @@
 <script>
-  import { run, preventDefault } from 'svelte/legacy';
+  import { untrack } from "svelte";
 
-  import { onMount } from "svelte";
   import { browser } from "$app/environment";
   import { invoice as inv, request } from "$lib/store";
   import { copy, focus, f, sat, get, reverseFormat, s, sats } from "$lib/utils";
@@ -18,7 +17,9 @@
   let customInput = $state();
   let customTipAmount = $state();
 
-  let apply = async () => {
+  let apply = async (e) => {
+    e.preventDefault();
+
     if (customTipAmount > 0) {
       tipPercent = (customTipAmount / amountFiat) * 100;
       showCustomAmount = false;
@@ -29,8 +30,9 @@
     !customTipAmount && Math.round(tipPercent) === parseInt(amount.slice(0, 2));
 
   const handleCustomTipAmount = (e) => {
-    tipPercent = 0;
     customTipAmount = e.target.value;
+    tipPercent = (customTipAmount / amountFiat) * 100;
+    tip = Math.round((amount / 100) * tipPercent);
   };
 
   let timeout;
@@ -40,15 +42,18 @@
       customInput.value = "";
     }
     tipPercent = e.target.value;
+    tip = Math.round((amount / 100) * tipPercent);
   };
 
   let submitting = $state();
-  const handleTipButtonClick = async (amount) => {
+  const handleTipButtonClick = async (v) => {
     submitting = true;
-    if (amount === "No") {
+    if (v === "No") {
       tipPercent = 0;
+      tip = 0;
     } else {
-      tipPercent = parseInt(amount.slice(0, 2));
+      tipPercent = parseInt(v.slice(0, 2));
+      tip = Math.round((amount / 100) * tipPercent);
     }
 
     await tick();
@@ -65,57 +70,25 @@
     hash,
     items,
     type,
-    rate,
     received,
     prompt,
     text,
     tip,
-    user: { username, currency },
+    user: { username },
   } = $state(invoice);
 
   let qr;
-  let tipPercent = $state(0);
+  let tipPercent = $state((tip / amount) * 100);
 
   let fullscreen;
 
-  let refresh = (data) => {
-    $inv = null;
-
-    ({ invoice, id } = data);
-    ({
-      aid,
-      amount,
-      hash,
-      items,
-      type,
-      received,
-      prompt,
-      text,
-      tip,
-      user: { username },
-    } = invoice);
-
-    tipPercent = (tip / amount) * 100;
-  };
-
-
-
+  let currency = user?.currency || invoice.currency;
+  let rate = invoice.rate * (rates[currency] / rates[invoice.currency]);
 
-
-
-  onMount(() => ($request = undefined));
-  run(() => {
-    refresh(data);
-  });
-  run(() => {
-    currency = user?.currency || invoice.currency;
-  });
-  run(() => {
-    rate = invoice.rate * (rates[currency] / rates[invoice.currency]);
-  });
-  run(() => {
-    tip = Math.round((amount / 100) * tipPercent);
+  $effect(() => {
+    tip = Math.round((amount / 100) * untrack(() => tipPercent));
   });
+
   let amountFiat = $derived(parseFloat(((amount * rate) / sats).toFixed(2)));
   let tipAmount = $derived(((tip * rate) / sats).toFixed(2));
   let invoiceAmountFiatFormatted = $derived(f(amountFiat, currency));
@@ -205,7 +178,7 @@
   </form>
 
   {#if showCustomAmount}
-    <form onsubmit={preventDefault(apply)} class="space-y-2">
+    <form onsubmit={apply} class="space-y-2">
       <input
         bind:this={customInput}
         type="number"
-- 
cgit v1.2.3