update queries to use hook queryclient

rainlanguage · Feb 17, 2025 · 231b9ed · 231b9ed
1 parent a39712a
commit 231b9ed
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 28 deletions.
diff --git a/packages/ui-components/src/lib/components/detail/OrderDetail.svelte b/packages/ui-components/src/lib/components/detail/OrderDetail.svelte
@@ -11,7 +11,6 @@
 	import OrderVaultsVolTable from '../tables/OrderVaultsVolTable.svelte';
 	import { QKEY_ORDER } from '../../queries/keys';
 	import CodeMirrorRainlang from '../CodeMirrorRainlang.svelte';
-	import { queryClient } from '../../stores/queryClient';
 	import {
 		getOrder,
 		type OrderSubgraph,
@@ -20,7 +19,7 @@
 	} from '@rainlanguage/orderbook/js_api';
 	import { createQuery } from '@tanstack/svelte-query';
 	import { Button, TabItem, Tabs } from 'flowbite-svelte';
-	import { onDestroy } from 'svelte';
+	import { onDestroy, onMount } from 'svelte';
 	import type { Writable } from 'svelte/store';
 	import OrderApy from '../tables/OrderAPY.svelte';
 	import { page } from '$app/stores';
@@ -71,21 +70,24 @@
 	export let signerAddress: Writable<string | null> | undefined = undefined;
 	let codeMirrorDisabled = true;
 	let codeMirrorStyles = {};
+	import { useQueryClient } from '@tanstack/svelte-query';
+	import Refresh from '../icon/Refresh.svelte';
+
+	const queryClient = useQueryClient();
 
 	$: orderDetailQuery = createQuery<OrderWithSortedVaults>({
 		queryKey: [id, QKEY_ORDER + id],
 		queryFn: () => {
+			console.log('getting orders!');
 			return getOrder(subgraphUrl, id);
 		},
 		enabled: !!subgraphUrl
 	});
 
 	const interval = setInterval(async () => {
-		// This invalidate function invalidates
-		// both order detail and order trades list queries
 		await queryClient.invalidateQueries({
 			queryKey: [id],
-			refetchType: 'active',
+			refetchType: 'all',
 			exact: false
 		});
 	}, 5000);
@@ -100,30 +102,48 @@
 <TanstackPageContentDetail query={orderDetailQuery} emptyMessage="Order not found">
 	<svelte:fragment slot="top" let:data>
 		<div
-			class="flex w-full flex-wrap justify-between gap-4 text-3xl font-medium lg:justify-normal dark:text-white"
+			class="flex w-full flex-wrap items-center justify-between gap-4 text-3xl font-medium lg:justify-between dark:text-white"
 		>
-			<div class="flex gap-x-2">
-				<span class="font-light">Order</span>
-				<Hash shorten value={data.order.orderHash} />
+			<div class="flex items-center gap-x-2">
+				<div class="flex gap-x-2">
+					<span class="font-light">Order</span>
+					<Hash shorten value={data.order.orderHash} />
+				</div>
+
+				<BadgeActive active={data.order.active} large />
 			</div>
-			<BadgeActive active={data.order.active} large />
-			{#if data && $signerAddress === data.order.owner && data.order.active && handleOrderRemoveModal && $wagmiConfig && chainId && orderbookAddress}
+
+			<div class="flex gap-2">
+				{#if data && $signerAddress === data.order.owner && data.order.active && handleOrderRemoveModal && $wagmiConfig && chainId && orderbookAddress}
+					<Button
+						data-testid="remove-button"
+						color="dark"
+						on:click={() =>
+							handleOrderRemoveModal({
+								order: data.order,
+								onRemove: $orderDetailQuery.refetch,
+								wagmiConfig: $wagmiConfig,
+								chainId,
+								orderbookAddress
+							})}
+						disabled={!handleOrderRemoveModal}
+					>
+						Remove
+					</Button>
+				{/if}
 				<Button
-					data-testid="remove-button"
-					color="dark"
+					class="flex gap-1"
 					on:click={() =>
-						handleOrderRemoveModal({
-							order: data.order,
-							onRemove: $orderDetailQuery.refetch,
-							wagmiConfig: $wagmiConfig,
-							chainId,
-							orderbookAddress
+						queryClient.invalidateQueries({
+							queryKey: [id],
+							refetchType: 'all',
+							exact: false
 						})}
-					disabled={!handleOrderRemoveModal}
+					>Refresh <Refresh
+						spin={$orderDetailQuery.isLoading || $orderDetailQuery.isFetching}
+					/></Button
 				>
-					Remove
-				</Button>
-			{/if}
+			</div>
 		</div>
 	</svelte:fragment>
 	<svelte:fragment slot="card" let:data>

diff --git a/packages/ui-components/src/lib/components/detail/VaultDetail.svelte b/packages/ui-components/src/lib/components/detail/VaultDetail.svelte
@@ -14,14 +14,15 @@
 
 	import { onDestroy } from 'svelte';
 	import type { Readable, Writable } from 'svelte/store';
-	import { queryClient } from '../../queries/queryClient';
+	import { useQueryClient } from '@tanstack/svelte-query';
 
 	import { ArrowDownOutline, ArrowUpOutline } from 'flowbite-svelte-icons';
 	import type { Vault } from '@rainlanguage/orderbook/js_api';
 	import OrderOrVaultHash from '../OrderOrVaultHash.svelte';
 	import type { AppStoresInterface } from '../../types/appStores';
 	import type { Config } from 'wagmi';
 	import DepositOrWithdrawButtons from './DepositOrWithdrawButtons.svelte';
+	import Refresh from '../icon/Refresh.svelte';
 
 	export let handleDepositOrWithdrawModal:
 		| ((args: {
@@ -53,6 +54,7 @@
 	const subgraphUrl = $settings?.subgraphs?.[network] || '';
 	const chainId = $settings?.networks?.[network]?.['chain-id'] || 0;
 	const rpcUrl = $settings?.networks?.[network]?.['rpc'] || '';
+	const queryClient = useQueryClient();
 
 	$: vaultDetailQuery = createQuery({
 		queryKey: [id, QKEY_VAULT + id],
@@ -90,7 +92,7 @@
 		>
 			{data.token.name}
 		</div>
-		<div>
+		<div class="flex gap-2">
 			{#if $wagmiConfig && handleDepositOrWithdrawModal && $signerAddress === data.owner}
 				<DepositOrWithdrawButtons
 					vault={data}
@@ -114,6 +116,18 @@
 					><ArrowUpOutline size="xs" class="mr-2" />Withdraw</Button
 				>
 			{/if}
+			<Button
+				class="flex gap-1"
+				on:click={() =>
+					queryClient.invalidateQueries({
+						queryKey: [id],
+						refetchType: 'all',
+						exact: false
+					})}
+				>Refresh <Refresh
+					spin={$vaultDetailQuery.isLoading || $vaultDetailQuery.isFetching}
+				/></Button
+			>
 		</div>
 	</svelte:fragment>
 	<svelte:fragment slot="card" let:data>

diff --git a/packages/ui-components/src/lib/components/icon/Refresh.svelte b/packages/ui-components/src/lib/components/icon/Refresh.svelte
@@ -22,7 +22,7 @@
 	xmlns="http://www.w3.org/2000/svg"
 	fill="none"
 	{...$$restProps}
-	class={twMerge('shrink-0', sizes[size], $$props.class, spin ? 'animate-spin' : '')}
+	class={twMerge('shrink-0', sizes[size], $$props.class, spin ? 'animate-spin ease-out' : '')}
 	{role}
 	aria-label={ariaLabel}
 	viewBox="0 0 24 24"

diff --git a/packages/webapp/src/routes/orders/[network]-[id]/+page.svelte b/packages/webapp/src/routes/orders/[network]-[id]/+page.svelte
@@ -38,7 +38,9 @@
 
 	$: if ($transactionStore.status === TransactionStatus.SUCCESS) {
 		queryClient.invalidateQueries({
-			queryKey: [$page.params.id]
+			queryKey: [$page.params.id],
+			refetchType: 'all',
+			exact: false
 		});
 		triggerToast();
 	}

diff --git a/packages/webapp/src/routes/vaults/[network]-[id]/+page.svelte b/packages/webapp/src/routes/vaults/[network]-[id]/+page.svelte
@@ -29,7 +29,9 @@
 
 	$: if ($transactionStore.status === TransactionStatus.SUCCESS) {
 		queryClient.invalidateQueries({
-			queryKey: [$page.params.id]
+			queryKey: [$page.params.id],
+			refetchType: 'all',
+			exact: false
 		});
 		triggerToast();
 	}