From 614fbd99b7963ec89666b8b4252fa5f73c81653c Mon Sep 17 00:00:00 2001
From: Adam Soltys <adam@coinos.io>
Date: Thu, 14 Nov 2024 10:55:08 -0800
Subject: amount component

---
 src/components/Amount.svelte                       | 31 ++++++++++++++++++++++
 src/components/Balance.svelte                      |  4 +--
 src/lib/utils.ts                                   |  2 +-
 src/routes/(app)/fund/[id]/sweep/+page.svelte      |  4 +--
 src/routes/(app)/invoice/[id]/+page.svelte         |  6 ++---
 src/routes/(app)/invoice/[id]/paid/+page.svelte    | 21 ++++++++++-----
 src/routes/(app)/payment/[id]/+page.svelte         |  4 +--
 src/routes/(app)/payment/[id]/plain/+page.svelte   |  8 +++---
 src/routes/(app)/payments/[...page]/+page.svelte   |  3 ++-
 src/routes/(app)/send/invoice/[id]/+page.svelte    | 24 +++--------------
 .../(app)/send/lightning/[payreq]/+page.svelte     |  9 +++----
 src/routes/(app)/sent/[id]/+page.svelte            | 23 +++-------------
 12 files changed, 71 insertions(+), 68 deletions(-)
 create mode 100644 src/components/Amount.svelte

(limited to 'src')

diff --git a/src/components/Amount.svelte b/src/components/Amount.svelte
new file mode 100644
index 00000000..de432400
--- /dev/null
+++ b/src/components/Amount.svelte
@@ -0,0 +1,31 @@
+<script>
+  import { s, f, toFiat } from "$lib/utils";
+  import { fiat } from "$lib/store";
+  const { amount, tip, rate, currency } = $props();
+</script>
+
+<div>
+  <h2 class="text-2xl md:text-3xl font-semibold flex justify-center items-end">
+    <div class="flex items-center">
+      <iconify-icon icon="ph:lightning-fill" class="text-yellow-300"
+      ></iconify-icon>{s(amount)}
+    </div>
+
+    {#if tip}
+      <div class="flex items-center text-lg ml-2">
+        <div>+</div>
+        <iconify-icon icon="ph:lightning-fill" class="text-yellow-300"
+        ></iconify-icon>
+        <div>{s(tip)}</div>
+      </div>
+    {/if}
+  </h2>
+  <h3 class="text-secondary md:text-lg">
+    {f(toFiat(amount, rate), currency)}
+    {#if tip}
+      <span class="text-base">
+        + {f(toFiat(tip, rate), currency)}
+      </span>
+    {/if}
+  </h3>
+</div>
diff --git a/src/components/Balance.svelte b/src/components/Balance.svelte
index ebd46f44..3451a9af 100644
--- a/src/components/Balance.svelte
+++ b/src/components/Balance.svelte
@@ -1,6 +1,6 @@
 <script>
   import Pin from "$comp/Pin.svelte";
-  import { f, fiat, s, si, sat, sats } from "$lib/utils";
+  import { f, toFiat, s, si, sat, sats } from "$lib/utils";
   import { pin } from "$lib/store";
   import { t } from "$lib/translations";
 
@@ -34,7 +34,7 @@
       {#if isNaN(rate)}
         <div class="text-gray-200">&mdash;</div>
       {:else}
-        {f(fiat(balance, rate), user.currency)}
+        {f(toFiat(balance, rate), user.currency)}
       {/if}
     </div>
   {/if}
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index f6b11df0..a15bb8e7 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -189,7 +189,7 @@ export const auth = (cookies: any) => ({
 export const btc = (fiat: number, rate: number): number =>
 	Math.round((fiat * sats) / rate);
 
-export const fiat = (amount: number, rate: number): number =>
+export const toFiat = (amount: number, rate: number): number =>
 	(amount * rate) / sats;
 
 export const fd = async (req: Request): Promise<any> => {
diff --git a/src/routes/(app)/fund/[id]/sweep/+page.svelte b/src/routes/(app)/fund/[id]/sweep/+page.svelte
index a34a8610..cd89f6ae 100644
--- a/src/routes/(app)/fund/[id]/sweep/+page.svelte
+++ b/src/routes/(app)/fund/[id]/sweep/+page.svelte
@@ -1,6 +1,6 @@
 <script>
   import { scale } from "svelte/transition";
-  import { fiat, f, s } from "$lib/utils";
+  import { toFiat, f, s } from "$lib/utils";
   import Icon from "$comp/Icon.svelte";
   import { t } from "$lib/translations";
 
@@ -25,7 +25,7 @@
     {$t("payments.fundsClaimed")}
   </h1>
   <h2 class="text-2xl md:text-3xl font-semibold">
-    {f(fiat(amount, rate), currency)}
+    {f(toFiat(amount, rate), currency)}
   </h2>
   <h3 class="text-secondary md:text-lg mb-6 mt-1">
     ⚡️{s(amount)}
diff --git a/src/routes/(app)/invoice/[id]/+page.svelte b/src/routes/(app)/invoice/[id]/+page.svelte
index 54e71071..15dc97ae 100644
--- a/src/routes/(app)/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/+page.svelte
@@ -28,9 +28,8 @@
 
   let { id, subject, user } = $state(data);
   let { invoice, src } = $derived(data);
-  let { hash, text } = $derived(invoice);
-  let { aid, amount, type, rate, tip } = $state(invoice);
-  let { username, currency } = invoice.user;
+  let { aid, amount, rate, tip, hash, text, type } = $derived(invoice);
+  let { username, currency } = $derived(invoice.user);
 
   let tipPercent = $derived(tip ? (tip / amount) * 100 : 0);
 
@@ -69,7 +68,6 @@
   let setAmount = $state(async () => {
     if (typeof $amountPrompt === "undefined") $amountPrompt = true;
     settingAmount = false;
-    amount = newAmount;
     invoice.amount = newAmount;
     invoice.tip = 0;
     ({ id } = await post(`/invoice`, {
diff --git a/src/routes/(app)/invoice/[id]/paid/+page.svelte b/src/routes/(app)/invoice/[id]/paid/+page.svelte
index 1bbba082..d6cfaa46 100644
--- a/src/routes/(app)/invoice/[id]/paid/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/paid/+page.svelte
@@ -1,15 +1,22 @@
 <script>
-  import { run } from 'svelte/legacy';
+  import { run } from "svelte/legacy";
 
   import { scale } from "svelte/transition";
   import Icon from "$comp/Icon.svelte";
   import { toast } from "@zerodevx/svelte-toast";
   import { browser } from "$app/environment";
   import { t } from "$lib/translations";
-  import { fiat, f, s, sat, sats } from "$lib/utils";
+  import { toFiat, f, s, sat, sats } from "$lib/utils";
 
   let { data } = $props();
-  let amount, currency = $state(), rate = $state(), received = $state(), pending = $state(), tip = $state(), user = $state(), id;
+  let amount,
+    currency = $state(),
+    rate = $state(),
+    received = $state(),
+    pending = $state(),
+    tip = $state(),
+    user = $state(),
+    id;
   let update = (data) => {
     ({ amount, currency, rate, received, pending, tip, user, id } =
       data.invoice);
@@ -35,10 +42,10 @@
     </h1>
 
     <h2 class="text-2xl md:text-3xl font-semibold">
-      {f(fiat(received - tip, rate), currency)}
+      {f(toFiat(received - tip, rate), currency)}
       {#if tip}
         <span class="text-lg">
-          + {f(fiat(tip, rate), currency)}
+          + {f(toFiat(tip, rate), currency)}
         </span>
       {/if}
     </h2>
@@ -63,9 +70,9 @@
 
     <h1 class="text-3xl md:text-4xl font-bold mb-6">Payment detected</h1>
     <h2 class="text-2xl md:text-3xl font-semibold">
-      {f(fiat(pending - tip, rate), currency)}
+      {f(toFiat(pending - tip, rate), currency)}
       {#if tip}
-        + {f(fiat(tip, rate), currency)}
+        + {f(toFiat(tip, rate), currency)}
       {/if}
     </h2>
 
diff --git a/src/routes/(app)/payment/[id]/+page.svelte b/src/routes/(app)/payment/[id]/+page.svelte
index 498a3f2e..45dc8642 100644
--- a/src/routes/(app)/payment/[id]/+page.svelte
+++ b/src/routes/(app)/payment/[id]/+page.svelte
@@ -8,7 +8,7 @@
     copy,
     f,
     s,
-    fiat,
+    toFiat,
     post,
     sats,
     fail,
@@ -114,7 +114,7 @@
         ></iconify-icon>{amount}
       </div>
       <span class="text-secondary text-lg">
-        {f(fiat(amount, rate), currency)}
+        {f(toFiat(amount, rate), currency)}
       </span>
     </div>
   </div>
diff --git a/src/routes/(app)/payment/[id]/plain/+page.svelte b/src/routes/(app)/payment/[id]/plain/+page.svelte
index 7d5c09aa..24031e1e 100644
--- a/src/routes/(app)/payment/[id]/plain/+page.svelte
+++ b/src/routes/(app)/payment/[id]/plain/+page.svelte
@@ -8,7 +8,7 @@
     copy,
     f,
     s,
-    fiat,
+    toFiat,
     post,
     sats,
     success,
@@ -42,7 +42,7 @@
   <div>
     <span class="text-lg text-secondary">Amount</span>
     <div>
-      {f(fiat(a, rate), currency)}
+      {f(toFiat(a, rate), currency)}
     </div>
   </div>
 
@@ -50,7 +50,7 @@
     <div>
       <span class="text-lg text-secondary">Tip</span>
       <div>
-        {f(fiat(tip, rate), currency)}
+        {f(toFiat(tip, rate), currency)}
         ({Math.round((tip * 100) / Math.abs(a))}%)
       </div>
     </div>
@@ -58,7 +58,7 @@
     <div>
       <span class="text-lg text-secondary">Total</span>
       <div>
-        {f(fiat(a + (tip || 0), rate), currency)}
+        {f(toFiat(a + (tip || 0), rate), currency)}
       </div>
     </div>
   {/if}
diff --git a/src/routes/(app)/payments/[...page]/+page.svelte b/src/routes/(app)/payments/[...page]/+page.svelte
index e967022f..d2f9782b 100644
--- a/src/routes/(app)/payments/[...page]/+page.svelte
+++ b/src/routes/(app)/payments/[...page]/+page.svelte
@@ -258,7 +258,8 @@
               {:else}
                 <div class="text-secondary flex gap-2">
                   {#if p.type === types.lightning}
-                    <div class="text-3xl">⚡️</div>
+                    <div class="text-3xl"><iconify-icon icon="ph:lightning-fill" class="text-yellow-300"
+        ></iconify-icon></div>
                   {:else if p.type === types.ecash}
                     <img src="/images/cash.png" class="w-12" />
                   {:else if p.type === types.reconcile}
diff --git a/src/routes/(app)/send/invoice/[id]/+page.svelte b/src/routes/(app)/send/invoice/[id]/+page.svelte
index 57f33f24..f5259170 100644
--- a/src/routes/(app)/send/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/send/invoice/[id]/+page.svelte
@@ -7,6 +7,7 @@
   import { goto, invalidateAll } from "$app/navigation";
   import { pin } from "$lib/store";
   import { enhance } from "$app/forms";
+  import Amount from "$comp/Amount.svelte";
   import Avatar from "$comp/Avatar.svelte";
   import Icon from "$comp/Icon.svelte";
   import Numpad from "$comp/Numpad.svelte";
@@ -18,7 +19,7 @@
     post,
     back,
     f,
-    fiat as toFiat,
+    toFiat,
     s,
     sats,
     focus,
@@ -99,25 +100,8 @@
     <h1 class="text-4xl font-bold">
       {$t("payments.send")}
     </h1>
-    <div>
-      <h2 class="text-2xl md:text-3xl font-semibold">
-        {f(toFiat(amount, rate), currency)}
-        {#if tip}
-          <span class="text-lg">
-            + {f(toFiat(tip, rate), currency)}
-          </span>
-        {/if}
-      </h2>
-      <h3 class="text-secondary md:text-lg mt-1">
-        ⚡️{s(amount)}
-
-        {#if tip}
-          <span class="text-lg">
-            + ⚡️{s(tip)}
-          </span>
-        {/if}
-      </h3>
-    </div>
+
+    <Amount {amount} {tip} {rate} {currency} />
 
     <h1 class="text-xl md:text-2xl text-secondary">
       {$t("payments.to")}
diff --git a/src/routes/(app)/send/lightning/[payreq]/+page.svelte b/src/routes/(app)/send/lightning/[payreq]/+page.svelte
index 6b9fe4e2..af3e09f4 100644
--- a/src/routes/(app)/send/lightning/[payreq]/+page.svelte
+++ b/src/routes/(app)/send/lightning/[payreq]/+page.svelte
@@ -7,7 +7,7 @@
   import Numpad from "$comp/Numpad.svelte";
   import Spinner from "$comp/Spinner.svelte";
   import { page } from "$app/stores";
-  import { back, fiat, f, s, focus } from "$lib/utils";
+  import { back, toFiat, f, s, focus } from "$lib/utils";
   import { rate, pin } from "$lib/store";
 
   let { data, form } = $props();
@@ -68,10 +68,7 @@
         {$t("payments.send")}
       </h1>
 
-      <h2 class="text-3xl font-semibold">
-        {f(fiat(amount, $rate), currency)}
-      </h2>
-      <h3 class="text-secondary text-xl">⚡️{s(amount)}</h3>
+      <Amount {amount} rate={$rate} {currency} />
     </div>
 
     <div class="text-xl">
@@ -86,7 +83,7 @@
         <div class="flex flex-wrap gap-4 justify-center">
           <div class="my-auto">
             <h2 class="text-xl">
-              {f(fiat(ourfee, $rate), currency)}
+              {f(toFiat(ourfee, $rate), currency)}
             </h2>
             <h3 class="text-secondary">⚡️{s(ourfee)}</h3>
           </div>
diff --git a/src/routes/(app)/sent/[id]/+page.svelte b/src/routes/(app)/sent/[id]/+page.svelte
index 615638c7..f2f14fef 100644
--- a/src/routes/(app)/sent/[id]/+page.svelte
+++ b/src/routes/(app)/sent/[id]/+page.svelte
@@ -1,6 +1,7 @@
 <script>
-  import { fiat, f, focus, s, sat, sats } from "$lib/utils";
+  import { f, focus, s, sat, sats } from "$lib/utils";
   import { scale } from "svelte/transition";
+  import Amount from "$comp/Amount.svelte";
   import Icon from "$comp/Icon.svelte";
   import { toast } from "@zerodevx/svelte-toast";
   import { t } from "$lib/translations";
@@ -18,29 +19,13 @@
     <Icon icon="check" style="mx-auto" />
   </div>
   <h1 class="text-3xl md:text-4xl font-bold mb-6">{$t("payments.sent")}!</h1>
-  <h2 class="text-2xl md:text-3xl font-semibold">
-    {f(fiat(amount, rate), currency)}
-    {#if tip}
-      <span class="text-lg">
-        + {f(fiat(tip, rate), currency)}
-      </span>
-    {/if}
-  </h2>
-  <h3 class="text-secondary md:text-lg mb-6 mt-1">
-    ⚡️{s(amount)}
-
-    {#if tip}
-      <span class="text-lg">
-        + ⚡️{s(tip)}
-      </span>
-    {/if}
-  </h3>
+  <Amount {amount} {tip} {rate} {currency} />
 </div>
 
 <a href={`/${username}`} use:focus>
   <div class="opacity-0 w-screen h-screen fixed top-0 left-0 z-50"></div>
 </a>
 
-<div class="flex justify-center">
+<div class="flex justify-center mt-4">
   {$t("payments.tapAnywhere")}
 </div>
-- 
cgit v1.2.3