lightning bolt

5 files changed, 29 insertions, 49 deletions

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>