invalidate queries and show toast

packages/webapp/src/routes/vaults/[network]-[id]/+page.svelte

@@ -1,36 +1,50 @@
 <script lang="ts">
-	import {
-		PageHeader,
-		QKEY_VAULT,
-		QKEY_VAULT_CHANGES,
-		TransactionStatus,
-		transactionStore
-	} from '@rainlanguage/ui-components';
+	import { PageHeader, TransactionStatus, transactionStore } from '@rainlanguage/ui-components';
 	import { page } from '$app/stores';
 	import { VaultDetail } from '@rainlanguage/ui-components';
 	import { wagmiConfig, signerAddress } from '$lib/stores/wagmi';
 	import { handleDepositOrWithdrawModal } from '$lib/services/modal';
 	import { useQueryClient } from '@tanstack/svelte-query';
+	import { Toast } from 'flowbite-svelte';
+	import { CheckCircleSolid } from 'flowbite-svelte-icons';
+	import { fade } from 'svelte/transition';
 	const queryClient = useQueryClient();
 
 	const { settings, activeOrderbookRef, activeNetworkRef, lightweightChartsTheme } =
 		$page.data.stores;
 
+	let toastOpen: boolean = false;
+	let counter: number = 5;
+
+	function triggerToast() {
+		toastOpen = true;
+		counter = 5;
+		timeout();
+	}
+
+	function timeout() {
+		if (--counter > 0) return setTimeout(timeout, 1000);
+		toastOpen = false;
+	}
+
 	$: if ($transactionStore.status === TransactionStatus.SUCCESS) {
-		console.log('invalidating vault detail', $page.params.id);
-		// queryClient.invalidateQueries({
-		// 	queryKey: [
-		// 		$page.params.id,
-		// 		QKEY_VAULT_CHANGES + $page.params.id,
-		// 		QKEY_VAULT_CHANGES,
-		// 		QKEY_VAULT
-		// 	]
-		// });
+		queryClient.invalidateQueries({
+			queryKey: [$page.params.id]
+		});
+		triggerToast();
 	}
 </script>
 
 <PageHeader title="Vault" pathname={$page.url.pathname} />
 
+{#if toastOpen}
+	<Toast dismissable={true} position="top-right" transition={fade}>
+		<CheckCircleSolid slot="icon" class="h-5 w-5" />
+		Vault balance updated
+		<span class="text-sm text-gray-500">Autohide in {counter}s.</span>
+	</Toast>
+{/if}
+
 <VaultDetail
 	id={$page.params.id}
 	network={$page.params.network}