From 8612b714b0df37f5b40512f0fca92530de506746 Mon Sep 17 00:00:00 2001
From: Bob <dv4xd@proton.me>
Date: Tue, 6 Aug 2024 22:00:59 +0800
Subject: [PATCH] problem: product price not displayed nicely

---
 src/components/PayNow.svelte | 19 +++++++++++++------
 src/lib/helpers.ts           | 11 +++++++++++
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/components/PayNow.svelte b/src/components/PayNow.svelte
index 53aa8c8..0c02441 100644
--- a/src/components/PayNow.svelte
+++ b/src/components/PayNow.svelte
@@ -12,6 +12,7 @@
 	import QrCodeSvg from './QrCodeSvg.svelte';
 	import CopyButton from './CopyButton.svelte';
 	import type { Product, Rocket, RocketProduct } from '@/event_helpers/rockets';
+	import { formatSats } from '@/helpers';
 
 	export let product: Product;
 	export let rocketProduct: RocketProduct | undefined;
@@ -21,7 +22,11 @@
 
 	async function zap() {
 		if (rocketProduct) {
-			const z = new NDKZap({ ndk: $ndk, zappedEvent: rocket.Event, zappedUser: rocket.Event.author });
+			const z = new NDKZap({
+				ndk: $ndk,
+				zappedEvent: rocket.Event,
+				zappedUser: rocket.Event.author
+			});
 			invoice = await z.createZapRequest(
 				rocketProduct.Price * 1000,
 				`Purchase of ${product.Name()} from ${rocket.Event.dTag}`,
@@ -51,13 +56,11 @@
 {#if rocketProduct}
 	<Dialog.Root bind:open>
 		<Dialog.Trigger class={buttonVariants({ variant: 'default' })}
-			>Buy Now for {rocketProduct.Price} sats</Dialog.Trigger
+			>Buy Now for {formatSats(rocketProduct.Price)}</Dialog.Trigger
 		>
 		<Dialog.Content class="sm:max-w-[425px]">
 			<Dialog.Header>
-				<Dialog.Title
-					>Buy {product.Name()} from {rocket.Name()} now!</Dialog.Title
-				>
+				<Dialog.Title>Buy {product.Name()} from {rocket.Name()} now!</Dialog.Title>
 				{#if !currentUser}
 					<Alert.Root>
 						<Terminal class="h-4 w-4" />
@@ -67,7 +70,11 @@
 						>
 					</Alert.Root>
 				{/if}
-				<Dialog.Description>Pay {rocketProduct.Price} sats now with Lightning</Dialog.Description>
+				<Dialog.Description
+					>Pay {rocketProduct.Price === 1
+						? `${rocketProduct.Price} sat`
+						: `${rocketProduct.Price} sats`} now with Lightning</Dialog.Description
+				>
 			</Dialog.Header>
 			{#if invoice}
 				<QrCodeSvg content={invoice} />
diff --git a/src/lib/helpers.ts b/src/lib/helpers.ts
index 7a0178f..1a7efc0 100644
--- a/src/lib/helpers.ts
+++ b/src/lib/helpers.ts
@@ -71,6 +71,17 @@ export function formatReferenceTime(hours: number) {
 	return result || '0 minutes';
 }
 
+export function formatSats(sats: number): string {
+	if (sats === 1) {
+		return '1 sat';
+	} else if (sats >= 1000) {
+		const kSats = (sats / 1000).toFixed(0);
+		return `${kSats}k sats`;
+	} else {
+		return `${sats} sats`;
+	}
+}
+
 export async function getCuckPrice(): Promise<number | Error> {
 	try {
 		var url = 'https://api.coindesk.com/v1/bpi/currentprice.json';