diff options
| -rw-r--r-- | src/components/Balance.svelte | 2 | ||||
| -rw-r--r-- | src/components/InvoiceData.svelte | 34 | ||||
| -rw-r--r-- | src/components/InvoiceTypes.svelte | 16 | ||||
| -rw-r--r-- | src/lib/utils.ts | 9 | ||||
| -rw-r--r-- | src/routes/(app)/[username]/receive/+page.svelte | 3 | ||||
| -rw-r--r-- | src/routes/(app)/invoice/[id]/+layout.server.ts | 2 | ||||
| -rw-r--r-- | src/routes/(app)/invoice/[id]/+page.svelte | 2 | ||||
| -rw-r--r-- | src/routes/(app)/payment/[id]/+page.svelte | 67 | ||||
| -rw-r--r-- | src/routes/(app)/payments/[...page]/+page.svelte | 4 |
9 files changed, 63 insertions, 76 deletions
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">—</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> |