problem: value in USD not displayed

src/components/MeritSummaryCard.svelte

@@ -11,7 +11,7 @@
 	import { Separator } from '$lib/components/ui/separator/index.js';
 	import * as Table from '@/components/ui/table';
 	import { Rocket, RocketATagFilter } from '@/event_helpers/rockets';
-	import { getRocketURL, unixToRelativeTime } from '@/helpers';
+	import { getCuckPrice, getRocketURL, unixToRelativeTime } from '@/helpers';
 	import { derived } from 'svelte/store';
 
 	import { goto } from '$app/navigation';
@@ -25,6 +25,7 @@
 
 	export let merit: MeritRequest;
 	export let rocket: NDKEvent;
+	let cuckPrice: number | undefined = undefined;
 
 	let result: VoteDirection | undefined;
 
@@ -41,6 +42,18 @@
 		_votes.unsubscribe();
 	});
 
+	$: {
+		if (!cuckPrice) {
+			getCuckPrice().then((data) => {
+				if (data instanceof Error) {
+					console.error(data);
+				} else {
+					cuckPrice = data;
+				}
+			});
+		}
+	}
+
 	let votes = derived(_votes, ($_votes) => {
 		return new MapOfVotes($_votes, parsedRocket, merit).Votes;
 	});
@@ -136,7 +149,8 @@
 						<span class="text-muted-foreground">
 							Approximate value of {merit.Sats.toLocaleString()} sats in CuckLoserBucks
 						</span>
-						<span>${merit.Sats.toLocaleString()}</span>
+						<span>${cuckPrice ? ((merit.Sats / 100000000) * cuckPrice).toFixed(2) : 'Loading'}</span
+						>
 					</li>
 				</ul>
 				<Separator class="my-4" />

src/lib/helpers.ts

@@ -56,3 +56,16 @@ export function unixToRelativeTime(timestamp: number): string {
 		return formattedDate;
 	}
 }
+
+export async function getCuckPrice(): Promise<number | Error> {
+	try {
+		var url = 'https://api.coindesk.com/v1/bpi/currentprice.json';
+		var symbol = 'USD';
+		const data = await fetch(url);
+		const json = await data.json();
+		const cuckPrice = parseFloat(json.bpi[symbol].rate.replace(/,/g, ''));
+		return cuckPrice;
+	} catch (e) {
+		return e as Error;
+	}
+}