From bee96ca44e871b0482012be50e8e7686f534c5a3 Mon Sep 17 00:00:00 2001
From: Adam Soltys <adam@coinos.io>
Date: Tue, 12 Nov 2024 23:36:15 -0800
Subject: lightning bolt

---
 src/components/Balance.svelte                    |  2 +-
 src/components/InvoiceData.svelte                | 34 +++++++-----
 src/components/InvoiceTypes.svelte               | 16 +++---
 src/lib/utils.ts                                 |  9 ++--
 src/routes/(app)/[username]/receive/+page.svelte |  3 +-
 src/routes/(app)/invoice/[id]/+layout.server.ts  |  2 +-
 src/routes/(app)/invoice/[id]/+page.svelte       |  2 +-
 src/routes/(app)/payment/[id]/+page.svelte       | 67 +++++++++---------------
 src/routes/(app)/payments/[...page]/+page.svelte |  4 +-
 9 files changed, 63 insertions(+), 76 deletions(-)

(limited to 'src')

diff --git a/src/components/Balance.svelte b/src/components/Balance.svelte
index 0129d1ab..ebd46f44 100644
--- a/src/components/Balance.svelte
+++ b/src/components/Balance.svelte
@@ -34,7 +34,7 @@
       {#if isNaN(rate)}
         <div class="text-gray-200">&mdash;</div>
       {:else}
-        {f(fiat(balance, rate))} {user.currency}
+        {f(fiat(balance, rate), user.currency)}
       {/if}
     </div>
   {/if}
diff --git a/src/components/InvoiceData.svelte b/src/components/InvoiceData.svelte
index 2298d150..c6721829 100644
--- a/src/components/InvoiceData.svelte
+++ b/src/components/InvoiceData.svelte
@@ -10,7 +10,7 @@
     amountFiat,
     currency,
     tip,
-    rate
+    rate,
   } = $props();
 </script>
 
@@ -49,23 +49,31 @@
 
 {#if amount > 0}
   <div class="text-center font-bold text-2xl">
-    <div>
-      {f(amountFiat, currency)}
+    <div class="flex justify-center items-end gap-2">
+      <div>{f(amountFiat, currency)}</div>
 
       {#if tip}
-        <span class="text-sm">
-          +{f(tip * (rate / sats), currency)}
-        </span>
+        <div class="text-base flex items-center gap-1">
+          <div>+</div>
+          <div>{f(tip * (rate / sats), currency)}</div>
+        </div>
       {/if}
     </div>
-    <div>
-      <span class="text-secondary font-normal text-xl">⚡️{`${s(amount)}`}</span
-      >
-
+    <div class="flex justify-center items-end text-secondary font-normal text-xl gap-2">
+      <div class="flex items-center">
+        <iconify-icon icon="ph:lightning-fill" class="text-yellow-300"
+        ></iconify-icon>
+        <div>
+          {`${s(amount)}`}
+        </div>
+      </div>
       {#if tip}
-        <span class="text-sm text-secondary font-normal">
-          +⚡️{s(tip)}
-        </span>
+        <div class="text-base flex items-center">
+          <div>+</div>
+          <iconify-icon icon="ph:lightning-fill" class="text-yellow-300"
+          ></iconify-icon>
+          <div>{s(tip)}</div>
+        </div>
       {/if}
     </div>
   </div>
diff --git a/src/components/InvoiceTypes.svelte b/src/components/InvoiceTypes.svelte
index cdd01aac..4dae235a 100644
--- a/src/components/InvoiceTypes.svelte
+++ b/src/components/InvoiceTypes.svelte
@@ -1,15 +1,8 @@
 <script>
-  let {
-    aid,
-    user,
-    type,
-    types,
-    t,
-    setType
-  } = $props();
+  let { aid, invoice, user, type, types, t, setType } = $props();
 </script>
 
-{#if aid === user?.id}
+{#if invoice.uid === aid}
   <div class="grid grid-cols-2 gap-2 justify-around text-secondary">
     <button
       class="btn flex-nowrap"
@@ -38,7 +31,10 @@
       onclick={() => setType(types.lightning)}
     >
       <div class="bg-base-100 rounded-full w-8 h-8 text-center flex">
-        <div class="m-auto">⚡️</div>
+        <div class="m-auto">
+          <iconify-icon icon="ph:lightning-fill" class="text-yellow-300"
+          ></iconify-icon>
+        </div>
       </div>
       <div class="my-auto text-lg">Lightning</div>
     </button>
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 9830844a..f6b11df0 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -200,12 +200,15 @@ export const fd = async (req: Request): Promise<any> => {
 	return obj;
 };
 
-export const f = (s: number): string =>
+export const f = (s: number, currency: string): string =>
 	new Intl.NumberFormat("en-US", {
-		style: "decimal",
+		style: "currency",
+		currency,
 		minimumFractionDigits: 2,
 		maximumFractionDigits: 2,
-	}).format(s);
+	})
+		.format(s)
+		.replace("CA", "");
 
 export const s = (s: number): string =>
 	new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 }).format(s);
diff --git a/src/routes/(app)/[username]/receive/+page.svelte b/src/routes/(app)/[username]/receive/+page.svelte
index 56bb1f92..17cb4f09 100644
--- a/src/routes/(app)/[username]/receive/+page.svelte
+++ b/src/routes/(app)/[username]/receive/+page.svelte
@@ -34,6 +34,7 @@
     aid,
     type: types.lightning,
     items: [],
+    uid: subject.id,
     user: subject,
   });
   let amount = $state(),
@@ -115,7 +116,7 @@
     t={$t}
   />
 
-  <InvoiceTypes {aid} {user} {type} {types} {setType} t={$t} />
+  <InvoiceTypes {aid} {invoice} {user} {type} {types} {setType} t={$t} />
 </div>
 
 <SetAmount
diff --git a/src/routes/(app)/invoice/[id]/+layout.server.ts b/src/routes/(app)/invoice/[id]/+layout.server.ts
index c4a4ccab..f89e0de8 100644
--- a/src/routes/(app)/invoice/[id]/+layout.server.ts
+++ b/src/routes/(app)/invoice/[id]/+layout.server.ts
@@ -25,7 +25,7 @@ export async function load({ cookies, depends, params, url, parent }) {
 
 		let { amount, pending, received } = invoice;
 		amount = parseInt(amount);
-		subject = user || invoice.user;
+		subject = invoice.user;
 
 		const paid =
 			(!amount && (pending || received)) ||
diff --git a/src/routes/(app)/invoice/[id]/+page.svelte b/src/routes/(app)/invoice/[id]/+page.svelte
index 4a838433..54e71071 100644
--- a/src/routes/(app)/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/invoice/[id]/+page.svelte
@@ -127,7 +127,7 @@
     bind:showQr={$showQr}
   />
 
-  <InvoiceTypes {aid} {user} {type} {types} {setType} t={$t} />
+  <InvoiceTypes {aid} {invoice} {user} {type} {types} {setType} t={$t} />
 </div>
 
 <SetAmount
diff --git a/src/routes/(app)/payment/[id]/+page.svelte b/src/routes/(app)/payment/[id]/+page.svelte
index fd5ea95f..498a3f2e 100644
--- a/src/routes/(app)/payment/[id]/+page.svelte
+++ b/src/routes/(app)/payment/[id]/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { run } from 'svelte/legacy';
+  import { run } from "svelte/legacy";
 
   import { browser } from "$app/environment";
   import { onMount, tick } from "svelte";
@@ -87,7 +87,8 @@
     }
   };
 
-  let txid = $state(), vout = $state();
+  let txid = $state(),
+    vout = $state();
   if (amount > 0) [txid, vout] = ref.split(":");
   else txid = hash;
 
@@ -104,6 +105,21 @@
   });
 </script>
 
+{#snippet field(title, amount)}
+  <div>
+    <span class="text-lg text-secondary">{$t(title)}</span>
+    <div class="flex gap-2 items-end">
+      <div class="flex items-center">
+        <iconify-icon icon="ph:lightning-fill" class="text-yellow-300"
+        ></iconify-icon>{amount}
+      </div>
+      <span class="text-secondary text-lg">
+        {f(fiat(amount, rate), currency)}
+      </span>
+    </div>
+  </div>
+{/snippet}
+
 <div class="container mx-auto max-w-lg px-4 space-y-8 break-all text-2xl">
   <h1 class="px-3 md:px-0 text-center text-3xl md:text-4xl font-semibold mb-10">
     {$t(amount < 0 ? "payments.sent" : "payments.received")}
@@ -135,53 +151,18 @@
       </a>
     </div>
   {/if}
-  <div>
-    <span class="text-lg text-secondary">{$t("payments.amount")}</span>
-    <div>
-      {f(fiat(a, rate), currency)}
-      <span class="text-secondary text-lg">
-        ⚡️{s(a)}
-      </span>
-    </div>
-  </div>
 
-  {#if tip}
-    <div>
-      <span class="text-lg text-secondary">{$t("invoice.tip")}</span>
-      <div>
-        {f(fiat(tip, rate), currency)}
-        ({Math.round((tip * 100) / Math.abs(a))}%)
-        <span class="text-secondary text-lg">
-          ⚡️{s(tip)}
-        </span>
-      </div>
-    </div>
+  {@render field("payments.amount", a)}
 
-    <div>
-      <span class="text-lg text-secondary">{$t("payments.total")}</span>
-      <div>
-        {f(fiat(a + (tip || 0), rate), currency)}
-        <span class="text-secondary text-lg">⚡️{`${s(a + (tip || 0))}`} </span>
-      </div>
-    </div>
+  {#if tip}
+    {@render field("invoice.tip", tip)}
+    {@render field("payments.total", a + (tip || 0))}
   {/if}
 
-  <div>
-    <span class="text-lg text-secondary">{$t("payments.networkFee")}</span>
-    <div>
-      {f(fiat(fee, rate), currency)}
-      <span class="text-secondary text-lg">⚡️{`${s(fee)}`}</span>
-    </div>
-  </div>
+  {@render field("payments.networkFee", fee)}
 
   {#if ourfee > 0}
-    <div>
-      <span class="text-lg text-secondary">{$t("payments.platformFee")}</span>
-      <div>
-        {f(fiat(ourfee, rate), currency)}
-        <span class="text-secondary">⚡️{`${s(ourfee)}`}</span>
-      </div>
-    </div>
+    {@render field("payments.platformFee", ourfee)}
   {/if}
 
   <div>
diff --git a/src/routes/(app)/payments/[...page]/+page.svelte b/src/routes/(app)/payments/[...page]/+page.svelte
index 41433757..e967022f 100644
--- a/src/routes/(app)/payments/[...page]/+page.svelte
+++ b/src/routes/(app)/payments/[...page]/+page.svelte
@@ -1,6 +1,5 @@
 <script>
   import { run } from "svelte/legacy";
-
   import Avatar from "$comp/Avatar.svelte";
   import { onMount } from "svelte";
   import { format } from "date-fns";
@@ -230,8 +229,7 @@
               </div>
 
               <div class="text-secondary flex items-center">
-                {si(Math.abs(p.amount) * (p.rate / sats), 2)}
-                {p.currency}
+                {f(Math.abs(p.amount) * (p.rate / sats), p.currency)}
               </div>
             </div>
 
-- 
cgit v1.2.3