Problem: purchase toast code is not close to where it is used

src/components/MeritsAndSatflow.svelte

@@ -7,11 +7,53 @@
 	import { writable } from 'svelte/store';
 	import Pie from './Pie.svelte';
 	import NumberIncrement from './NumberIncrement.svelte';
+	import { toast } from 'svelte-sonner';
+	import { onMount } from 'svelte';
+	import PurchaseToast from './PurchaseToast.svelte';
+	import { devmode } from '@/stores/session';
+	import Button from '@/components/ui/button/button.svelte';
 
 	export let rocket: Rocket;
 	export let unratifiedZaps: Map<string, ZapPurchase>;
 
 	let unratifiedZapsAmount = 0;
+	let lastCheckTime = Date.now() / 1000;
+
+	function checkNewZaps() {
+		const currentTime = Date.now() / 1000;
+		const recentZaps = Array.from(unratifiedZaps.values()).filter(
+			(zap) =>
+				zap.ZapReceipt.created_at &&
+				zap.ZapReceipt.created_at > lastCheckTime &&
+				zap.ZapReceipt.created_at <= currentTime
+		);
+
+		recentZaps.forEach((zapPurchase) => {
+			toast(PurchaseToast, {
+				componentProps: {
+					zapPurchase,
+					rocket: rocket
+				}
+			});
+		});
+
+		lastCheckTime = currentTime;
+	}
+	$: {
+		if (unratifiedZaps.size > 0) {
+			checkNewZaps();
+		}
+	}
+
+	onMount(() => {
+		lastCheckTime = Date.now() / 1000 - 30; // 30 seconds ago
+	});
+
+	$: lasted = 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;
+	})[0];
 
 	$: {
 		unratifiedZapsAmount = 0;
@@ -82,6 +124,7 @@
 				This graph displays the Meritization of equity in {rocket.Name()}
 				<Pie data={$merits} />
 			</div>
+
 			<Table.Root class="col-span-1 text-black">
 				<Table.Header>
 					<Table.Row class="">
@@ -115,5 +158,27 @@
 			</Table.Root>
 		</Card.Description>
 	</Card.Header>
-	<Card.Footer></Card.Footer>
+	<Card.Footer>
+		{#if $devmode}
+			<Button
+				on:click={() => {
+					if (!lasted) {
+						toast('unratifiedZaps is null');
+					} else {
+						console.log(lasted);
+						toast(PurchaseToast, {
+							componentProps: {
+								zapPurchase: lasted,
+								rocket: rocket
+							}
+						});
+					}
+				}}
+				variant="outline">Popup Last Purchase Notification</Button
+			>
+			<Button variant="outline" on:click={() => console.log(Array.from(unratifiedZaps.values()))}
+				>print unratifiedZaps</Button
+			>
+		{/if}
+	</Card.Footer>
 </Card.Root>

src/components/PurchaseToast.svelte

@@ -1,11 +1,8 @@
 <script lang="ts">
-	import { Avatar, Name } from '@nostr-dev-kit/ndk-svelte-components';
-	import { ndk } from '@/ndk';
-	import { unixToRelativeTime } from '@/helpers';
 	import { fetchEvent } from '@/event_helpers/products';
 	import { Product, Rocket, type ZapPurchase } from '@/event_helpers/rockets';
-	import Heading from './Heading.svelte';
-	import Separator from '@/components/ui/separator/separator.svelte';
+	import { ndk } from '@/ndk';
+	import { Avatar, Name } from '@nostr-dev-kit/ndk-svelte-components';
 
 	export let zapPurchase: ZapPurchase;
 	export let rocket: Rocket;

src/components/RocketDashboard.svelte

@@ -2,10 +2,8 @@
 	import * as Breadcrumb from '$lib/components/ui/breadcrumb/index.js';
 	import Button from '@/components/ui/button/button.svelte';
 	import * as Card from '@/components/ui/card';
-	import PurchaseToast from './PruchaseToast.svelte';
 	import { Rocket, ZapPurchase } from '@/event_helpers/rockets';
 	import { devmode } from '@/stores/session';
-	import { toast } from 'svelte-sonner';
 	import type { NDKEvent } from '@nostr-dev-kit/ndk';
 	import BitcoinAssociations from './AssociatedBitcoinAddresses.svelte';
 	import MeritRequests from './MeritRequests.svelte';
@@ -13,47 +11,10 @@
 	import ProductFomo from './ProductFomo.svelte';
 	import ProposedProducts from './ProposedProducts.svelte';
 	import UpdateMission from './UpdateMission.svelte';
-	import { onMount } from 'svelte';
 
 	export let rocket: NDKEvent;
 
 	$: unratifiedZaps = new Map<string, ZapPurchase>();
-	let lastCheckTime = Date.now() / 1000; // Current time in seconds
-
-	function checkNewZaps() {
-		const currentTime = Date.now() / 1000;
-		const recentZaps = Array.from(unratifiedZaps.values()).filter(
-			(zap) =>
-				zap.ZapReceipt.created_at &&
-				zap.ZapReceipt.created_at > lastCheckTime &&
-				zap.ZapReceipt.created_at <= currentTime
-		);
-
-		recentZaps.forEach((zapPurchase) => {
-			toast(PurchaseToast, {
-				componentProps: {
-					zapPurchase,
-					rocket: new Rocket(rocket)
-				}
-			});
-		});
-
-		lastCheckTime = currentTime;
-	}
-	$: {
-		if (unratifiedZaps.size > 0) {
-			checkNewZaps();
-		}
-	}
-	onMount(() => {
-		lastCheckTime = Date.now() / 1000 - 30; // 30 seconds ago
-	});
-
-	$: lasted = 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;
-	})[0];
 </script>
 
 <div class="flex flex-col gap-4">
@@ -71,27 +32,6 @@
 		</Breadcrumb.Root>
 	</header>
 	<main class="grid w-full flex-1 grid-cols-1 items-start gap-4 sm:grid-cols-3 md:gap-2">
-		{#if $devmode}
-			<Button
-				on:click={() => {
-					if (!lasted) {
-						toast('unratifiedZaps is null');
-					} else {
-						console.log(lasted);
-						toast(PurchaseToast, {
-							componentProps: {
-								zapPurchase: lasted,
-								rocket: new Rocket(rocket)
-							}
-						});
-					}
-				}}
-				variant="outline">Popup Last Purchase Notification</Button
-			>
-			<Button variant="outline" on:click={() => console.log(Array.from(unratifiedZaps.values()))}
-				>print unratifiedZaps</Button
-			>
-		{/if}
 		<MeritsAndSatflow {unratifiedZaps} rocket={new Rocket(rocket)} />
 
 		<ProductFomo bind:unratifiedZaps rocket={new Rocket(rocket)} />