problem: attention is not drawn to satflow upon payment

src/components/MeritsAndSatflow.svelte

@@ -12,6 +12,7 @@
 	import PurchaseToast from './PurchaseToast.svelte';
 	import { devmode } from '@/stores/session';
 	import Button from '@/components/ui/button/button.svelte';
+	import { sleep } from '@/helpers';
 
 	export let rocket: Rocket;
 	export let unratifiedZaps: Map<string, ZapPurchase>;
@@ -19,6 +20,21 @@
 	let unratifiedZapsAmount = 0;
 	let lastCheckTime = Date.now() / 1000;
 
+	let revenueClass = '';
+
+	function toastIt(zapPurchase: ZapPurchase) {
+		revenueClass = ' text-xl';
+		toast(PurchaseToast, {
+			componentProps: {
+				zapPurchase,
+				rocket: rocket
+			}
+		});
+		sleep(3000).then(() => {
+			revenueClass = 'text-base';
+		});
+	}
+
 	function checkNewZaps() {
 		const currentTime = Date.now() / 1000;
 		const recentZaps = Array.from(unratifiedZaps.values()).filter(
@@ -29,12 +45,7 @@
 		);
 
 		recentZaps.forEach((zapPurchase) => {
-			toast(PurchaseToast, {
+			toastIt(zapPurchase);
-				componentProps: {
-					zapPurchase,
-					rocket: rocket
-				}
-			});
 		});
 
 		lastCheckTime = currentTime;
@@ -49,7 +60,7 @@
 		lastCheckTime = Date.now() / 1000 - 30; // 30 seconds ago
 	});
 
-	$: lasted = Array.from(unratifiedZaps.values()).sort((a, b) => {
+	$: mostRecentZap = Array.from(unratifiedZaps.values()).sort((a, b) => {
 		if (a.ZapReceipt.created_at && b.ZapReceipt.created_at) {
 			return b.ZapReceipt.created_at - a.ZapReceipt.created_at;
 		} else return 0;
@@ -148,7 +159,7 @@
 								<NumberIncrement targetValue={merits} />
 							</Table.Cell>
 							<Table.Cell
-								class="table-cell text-pretty text-right font-mono font-extrabold text-white dark:text-gray-900"
+								class="table-cell text-pretty text-right font-mono font-extrabold text-white dark:text-gray-900 {revenueClass}"
 							>
 								<NumberIncrement targetValue={sats} />
 							</Table.Cell>
@@ -162,16 +173,10 @@
 		{#if $devmode}
 			<Button
 				on:click={() => {
-					if (!lasted) {
+					if (!mostRecentZap) {
 						toast('unratifiedZaps is null');
 					} else {
-						console.log(lasted);
+						toastIt(mostRecentZap);
-						toast(PurchaseToast, {
-							componentProps: {
-								zapPurchase: lasted,
-								rocket: rocket
-							}
-						});
 					}
 				}}
 				variant="outline">Popup Last Purchase Notification</Button

src/components/Pie.svelte

@@ -133,7 +133,7 @@
 
 <div class="relative h-full w-full">
 	<Chart options={$o} class="py-6" />
-	<div class="absolute left-1/2 top-0 z-20 w-[356px] -translate-x-1/2 transform">
+	<div class="absolute -top-10 left-1/2 z-20 w-[356px] -translate-x-1/2 transform">
-		<Toaster position="top-center" id="purchase" duration={10000} />
+		<Toaster position="top-center" id="purchase" duration={3000} />
 	</div>
 </div>

src/lib/helpers.ts

@@ -228,3 +228,7 @@ export function drawSvgPath(qr: QrCode, border: number): string {
 	}
 	return parts.join(' ');
 }
+
+export function sleep(ms: number) {
+	return new Promise((resolve) => setTimeout(resolve, ms));
+}