@rainlanguage/ui-components 0.0.1-alpha.61 → 0.0.1-alpha.63

package/dist/__mocks__/stores.d.ts

@@ -1,11 +1,6 @@
 import type { ConfigSource } from '@rainlanguage/orderbook';
 import { type Config } from '@wagmi/core';
 import type { Page } from '@sveltejs/kit';
-export declare const mockWalletAddressMatchesOrBlankStore: {
-    subscribe: (this: void, run: import("svelte/store").Subscriber<() => boolean>, invalidate?: import("svelte/store").Invalidator<() => boolean> | undefined) => import("svelte/store").Unsubscriber;
-    set: (this: void, value: () => boolean) => void;
-    mockSetSubscribeValue: (value: () => boolean) => void;
-};
 export declare const mockSettingsStore: {
     subscribe: (this: void, run: import("svelte/store").Subscriber<ConfigSource | undefined>, invalidate?: import("svelte/store").Invalidator<ConfigSource | undefined> | undefined) => import("svelte/store").Unsubscriber;
     set: (this: void, value: ConfigSource | undefined) => void;

package/dist/__mocks__/stores.js

@@ -13,17 +13,11 @@ const mockActiveNetworkRefWritable = writable('');
 const mockActiveOrderbookRefWritable = writable('');
 const mockActiveAccountsWritable = writable({});
 const mockSubgraphUrlWritable = writable('');
-const mockWalletAddressMatchesOrBlankWritable = writable(() => false);
 const mockChainIdWritable = writable(0);
 const mockConnectedWritable = writable(true);
 const mockWagmiConfigWritable = writable(mockWeb3Config);
 const mockShowMyItemsOnlyWritable = writable(false);
 const mockPageWritable = writable();
-export const mockWalletAddressMatchesOrBlankStore = {
-    subscribe: mockWalletAddressMatchesOrBlankWritable.subscribe,
-    set: mockWalletAddressMatchesOrBlankWritable.set,
-    mockSetSubscribeValue: (value) => mockWalletAddressMatchesOrBlankWritable.set(value)
-};
 export const mockSettingsStore = {
     subscribe: mockSettingsWritable.subscribe,
     set: mockSettingsWritable.set,

package/dist/components/TanstackAppTable.svelte

@@ -1,4 +1,4 @@
-<script generics="T">import { invalidateIdQuery } from "../queries/queryClient";
+<script generics="T">import { invalidateTanstackQueries } from "../queries/queryClient";
 import Refresh from "./icon/Refresh.svelte";
 import { Button, Table, TableBody, TableBodyRow, TableHead } from "flowbite-svelte";
 import { createEventDispatcher } from "svelte";
@@ -21,9 +21,8 @@ export let rowHoverable = true;
 		spin={$query.isLoading || $query.isFetching}
 		on:click={async () => {
 			if (queryKey) {
-				await invalidateIdQuery(queryClient, queryKey);
+				invalidateTanstackQueries(queryClient, [queryKey]);
 			}
-			$query.refetch();
 		}}
 	/>
 </div>

package/dist/components/TanstackAppTable.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponent } from "svelte";
 import type { CreateInfiniteQueryResult, InfiniteData } from '@tanstack/svelte-query';
 declare class __sveltets_Render<T> {
     props(): {
-        queryKey: string | undefined;
+        queryKey: string;
         query: CreateInfiniteQueryResult<InfiniteData<T[], unknown>, Error>;
         emptyMessage?: string;
         rowHoverable?: boolean;

package/dist/components/detail/OrderDetail.svelte

@@ -10,19 +10,18 @@ import ButtonVaultLink from "../ButtonVaultLink.svelte";
 import OrderVaultsVolTable from "../tables/OrderVaultsVolTable.svelte";
 import { QKEY_ORDER } from "../../queries/keys";
 import CodeMirrorRainlang from "../CodeMirrorRainlang.svelte";
-import {
-  getOrderByHash
-} from "@rainlanguage/orderbook";
 import { createQuery, useQueryClient } from "@tanstack/svelte-query";
 import { Button, TabItem, Tabs, Tooltip } from "flowbite-svelte";
 import { onDestroy } from "svelte";
 import OrderApy from "../tables/OrderAPY.svelte";
 import { page } from "$app/stores";
 import Refresh from "../icon/Refresh.svelte";
-import { invalidateIdQuery } from "../../queries/queryClient";
+import { invalidateTanstackQueries } from "../../queries/queryClient";
 import { ArrowDownOutline, ArrowUpOutline, InfoCircleOutline } from "flowbite-svelte-icons";
 import { useAccount } from "../../providers/wallet/useAccount";
-import { isAddressEqual, isAddress } from "viem";
+import {
+  getOrderByHash
+} from "@rainlanguage/orderbook";
 export let handleQuoteDebugModal = void 0;
 export const handleDebugTradeModal = void 0;
 export let colorTheme;
@@ -32,14 +31,13 @@ export let orderbookAddress;
 export let orderHash;
 export let rpcUrl;
 export let subgraphUrl;
-export let chainId;
 export let onRemove;
 export let onDeposit;
 export let onWithdraw;
 let codeMirrorDisabled = true;
 let codeMirrorStyles = {};
 const queryClient = useQueryClient();
-const { account } = useAccount();
+const { matchesAccount } = useAccount();
 $: orderDetailQuery = createQuery({
   queryKey: [orderHash, QKEY_ORDER + orderHash],
   queryFn: () => {
@@ -48,7 +46,7 @@ $: orderDetailQuery = createQuery({
   enabled: !!subgraphUrl
 });
 const interval = setInterval(async () => {
-  await invalidateIdQuery(queryClient, orderHash);
+  await invalidateTanstackQueries(queryClient, [orderHash]);
 }, 1e4);
 onDestroy(() => {
   clearInterval(interval);
@@ -70,7 +68,7 @@ $: subgraphName = $page.url.pathname.split("/")[2]?.split("-")[0];
 			</div>
 
 			<div class="flex items-center gap-2">
-				{#if $account && isAddress($account) && isAddress(data.order.owner) && isAddressEqual($account, data.order.owner)}
+				{#if matchesAccount(data.order.owner)}
 					{#if data.order.active}
 						<Button
 							on:click={() => onRemove(data.order)}
@@ -82,7 +80,7 @@ $: subgraphName = $page.url.pathname.split("/")[2]?.split("-")[0];
 
 				<Refresh
 					testId="top-refresh"
-					on:click={async () => await invalidateIdQuery(queryClient, orderHash)}
+					on:click={() => invalidateTanstackQueries(queryClient, [orderHash])}
 					spin={$orderDetailQuery.isLoading || $orderDetailQuery.isFetching}
 				/>
 			</div>
@@ -128,7 +126,7 @@ $: subgraphName = $page.url.pathname.split("/")[2]?.split("-")[0];
 								{#each data.vaults.get(type) || [] as vault}
 									<ButtonVaultLink tokenVault={vault} {subgraphName}>
 										<svelte:fragment slot="buttons">
-											{#if $account && isAddress($account) && isAddress(vault.owner) && isAddressEqual($account, vault.owner) && chainId}
+											{#if matchesAccount(vault.owner)}
 												<div class="flex gap-1">
 													<Button
 														color="light"

package/dist/components/detail/OrderDetail.svelte.d.ts

@@ -1,8 +1,7 @@
 import { SvelteComponent } from "svelte";
-import { type SgOrder } from '@rainlanguage/orderbook';
 import type { Hex } from 'viem';
 import type { QuoteDebugModalHandler, DebugTradeModalHandler } from '../../types/modal';
-import type { SgVault } from '@rainlanguage/orderbook';
+import { type SgOrder, type SgVault } from '@rainlanguage/orderbook';
 declare const __propDef: {
     props: {
         handleQuoteDebugModal?: QuoteDebugModalHandler | undefined;
@@ -14,7 +13,6 @@ declare const __propDef: {
         orderHash: string;
         rpcUrl: string;
         subgraphUrl: string;
-        chainId: number | undefined;
         /** Callback function when remove action is triggered for an order
              * @param order The order to remove
              */ onRemove: (order: SgOrder) => void;

package/dist/components/detail/TanstackOrderQuote.svelte

@@ -1,4 +1,4 @@
-<script generics="T">import { invalidateIdQuery } from "../../queries/queryClient";
+<script generics="T">import { invalidateTanstackQueries } from "../../queries/queryClient";
 import Refresh from "../icon/Refresh.svelte";
 import EditableSpan from "../EditableSpan.svelte";
 import { getOrderQuote } from "@rainlanguage/orderbook";
@@ -23,7 +23,7 @@ export let handleQuoteDebugModal = void 0;
 let enabled = true;
 const queryClient = useQueryClient();
 const refreshQuotes = async () => {
-  await invalidateIdQuery(queryClient, id);
+  invalidateTanstackQueries(queryClient, [id, QKEY_ORDER_QUOTE + id]);
 };
 $: orderQuoteQuery = createQuery({
   queryKey: [id, QKEY_ORDER_QUOTE + id],

package/dist/components/detail/VaultDetail.svelte

@@ -6,13 +6,13 @@ import TanstackPageContentDetail from "./TanstackPageContentDetail.svelte";
 import CardProperty from "../CardProperty.svelte";
 import { QKEY_VAULT } from "../../queries/keys";
 import { getVault } from "@rainlanguage/orderbook";
-import { formatUnits, isAddress, isAddressEqual } from "viem";
+import { formatUnits } from "viem";
 import { createQuery } from "@tanstack/svelte-query";
 import { onDestroy } from "svelte";
 import { useQueryClient } from "@tanstack/svelte-query";
 import OrderOrVaultHash from "../OrderOrVaultHash.svelte";
 import Refresh from "../icon/Refresh.svelte";
-import { invalidateIdQuery } from "../../queries/queryClient";
+import { invalidateTanstackQueries } from "../../queries/queryClient";
 import { useAccount } from "../../providers/wallet/useAccount";
 import { Button } from "flowbite-svelte";
 import { ArrowDownOutline, ArrowUpOutline } from "flowbite-svelte-icons";
@@ -26,7 +26,7 @@ export let onDeposit;
 export let onWithdraw;
 const subgraphUrl = $settings?.subgraphs?.[network] || "";
 const queryClient = useQueryClient();
-const { account } = useAccount();
+const { matchesAccount } = useAccount();
 $: vaultDetailQuery = createQuery({
   queryKey: [id, QKEY_VAULT + id],
   queryFn: () => {
@@ -39,11 +39,7 @@ const updateActiveNetworkAndOrderbook = (subgraphName) => {
   activeOrderbookRef.set(subgraphName);
 };
 const interval = setInterval(async () => {
-  await queryClient.invalidateQueries({
-    queryKey: [id],
-    refetchType: "active",
-    exact: false
-  });
+  invalidateTanstackQueries(queryClient, [id, QKEY_VAULT + id]);
 }, 5e3);
 onDestroy(() => {
   clearInterval(interval);
@@ -59,7 +55,7 @@ onDestroy(() => {
 			{data.token.name}
 		</div>
 		<div class="flex items-center gap-2">
-			{#if $account && isAddress($account) && isAddress(data.owner) && isAddressEqual($account, data.owner)}
+			{#if matchesAccount(data.owner)}
 				<Button
 					color="light"
 					size="xs"
@@ -81,7 +77,8 @@ onDestroy(() => {
 			{/if}
 
 			<Refresh
-				on:click={async () => await invalidateIdQuery(queryClient, id)}
+				testId="top-refresh"
+				on:click={() => invalidateTanstackQueries(queryClient, [id, QKEY_VAULT + id])}
 				spin={$vaultDetailQuery.isLoading || $vaultDetailQuery.isFetching}
 			/>
 		</div>

package/dist/components/tables/OrdersListTable.svelte

@@ -1,8 +1,9 @@
 <script generics="T">import { goto } from "$app/navigation";
 import { DotsVerticalOutline } from "flowbite-svelte-icons";
-import {} from "@rainlanguage/orderbook";
 import { createInfiniteQuery } from "@tanstack/svelte-query";
-import { getOrders } from "@rainlanguage/orderbook";
+import {
+  getOrders
+} from "@rainlanguage/orderbook";
 import TanstackAppTable from "../TanstackAppTable.svelte";
 import { formatTimestampSecondsAsLocal } from "../../utils/time";
 import ListViewOrderbookFilters from "../ListViewOrderbookFilters.svelte";
@@ -18,8 +19,7 @@ import {
   TableHeadCell
 } from "flowbite-svelte";
 import { useAccount } from "../../providers/wallet/useAccount";
-export const walletAddressMatchesOrBlank = void 0;
-export const handleOrderRemoveModal = void 0;
+export let handleOrderRemoveModal = void 0;
 export let activeSubgraphs;
 export let settings;
 export let accounts;
@@ -31,7 +31,7 @@ export let showMyItemsOnly;
 export let currentRoute;
 export let activeNetworkRef;
 export let activeOrderbookRef;
-const { account } = useAccount();
+const { matchesAccount, account } = useAccount();
 $: multiSubgraphArgs = Object.entries(
   Object.keys($activeSubgraphs ?? {}).length ? $activeSubgraphs : $settings?.subgraphs ?? {}
 ).map(([name, url]) => ({
@@ -87,7 +87,7 @@ $: isOrdersPage = currentRoute.startsWith("/orders");
 
 <AppTable
 	{query}
-	queryKey={undefined}
+	queryKey={QKEY_ORDERS}
 	emptyMessage="No Orders Found"
 	on:clickRow={(e) => {
 		activeNetworkRef.set(e.detail.item.subgraphName);
@@ -150,10 +150,10 @@ $: isOrdersPage = currentRoute.startsWith("/orders");
 		<TableBodyCell data-testid="orderListRowTrades" tdClass="break-word p-2"
 			>{item.order.trades.length > 99 ? '>99' : item.order.trades.length}</TableBodyCell
 		>
-		{#if walletAddressMatchesOrBlank && handleOrderRemoveModal}
+		{#if matchesAccount(item.order.owner) && handleOrderRemoveModal}
 			<div data-testid="wallet-actions">
 				<TableBodyCell tdClass="px-0 text-right">
-					{#if $walletAddressMatchesOrBlank(item.order.owner) && item.order.active}
+					{#if item.order.active}
 						<Button
 							color="alternative"
 							outline={false}
@@ -168,7 +168,7 @@ $: isOrdersPage = currentRoute.startsWith("/orders");
 						</Button>
 					{/if}
 				</TableBodyCell>
-				{#if $walletAddressMatchesOrBlank(item.order.owner) && item.order.active}
+				{#if item.order.active}
 					<Dropdown placement="bottom-end" triggeredBy={`#order-menu-${item.order.id}`}>
 						<DropdownItem
 							on:click={(e) => {

package/dist/components/tables/OrdersListTable.svelte.d.ts

@@ -2,7 +2,6 @@ import { SvelteComponent } from "svelte";
 import type { AppStoresInterface } from '../../types/appStores';
 declare class __sveltets_Render<T> {
     props(): {
-        walletAddressMatchesOrBlank?: any;
         handleOrderRemoveModal?: any;
         activeSubgraphs: AppStoresInterface["activeSubgraphs"];
         settings: AppStoresInterface["settings"];
@@ -27,7 +26,5 @@ export type OrdersListTableProps<T> = ReturnType<__sveltets_Render<T>['props']>;
 export type OrdersListTableEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
 export type OrdersListTableSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
 export default class OrdersListTable<T> extends SvelteComponent<OrdersListTableProps<T>, OrdersListTableEvents<T>, OrdersListTableSlots<T>> {
-    get walletAddressMatchesOrBlank(): any;
-    get handleOrderRemoveModal(): any;
 }
 export {};

package/dist/components/tables/VaultBalanceChangesTable.svelte

@@ -30,7 +30,7 @@ const AppTable = TanstackAppTable;
 
 <AppTable
 	query={balanceChangesQuery}
-	queryKey={undefined}
+	queryKey={id}
 	emptyMessage="No deposits or withdrawals found"
 	rowHoverable={false}
 >

package/dist/components/tables/VaultsListTable.svelte

@@ -29,13 +29,12 @@ export let hideZeroBalanceVaults;
 export let activeNetworkRef;
 export let activeOrderbookRef;
 export let activeAccounts;
-export let walletAddressMatchesOrBlank;
 export let handleDepositGenericModal = void 0;
 export let handleDepositModal = void 0;
 export let handleWithdrawModal = void 0;
 export let currentRoute;
 export let showMyItemsOnly;
-const { account } = useAccount();
+const { account, matchesAccount } = useAccount();
 $: multiSubgraphArgs = Object.entries(
   Object.keys($activeSubgraphs ?? {}).length ? $activeSubgraphs : $settings?.subgraphs ?? {}
 ).map(([name, url]) => ({
@@ -94,7 +93,7 @@ const AppTable = TanstackAppTable;
 	/>
 	<AppTable
 		{query}
-		queryKey={undefined}
+		queryKey={QKEY_VAULTS}
 		emptyMessage="No Vaults Found"
 		on:clickRow={(e) => {
 			updateActiveNetworkAndOrderbook(e.detail.item.subgraphName);
@@ -182,47 +181,44 @@ const AppTable = TanstackAppTable;
 					</div>
 				{/if}
 			</TableBodyCell>
-			{#if handleDepositModal && handleWithdrawModal && $walletAddressMatchesOrBlank(item.vault.owner)}
+			{#if handleDepositModal && handleWithdrawModal && matchesAccount(item.vault.owner)}
 				<TableBodyCell tdClass="px-0 text-right">
-					{#if $walletAddressMatchesOrBlank(item.vault.owner)}
-						<Button
-							color="alternative"
-							outline={false}
-							data-testid="vault-menu"
-							id={`vault-menu-${item.vault.id}`}
-							class="mr-2 border-none px-2"
-							on:click={(e) => {
-								e.stopPropagation();
-							}}
-						>
-							<DotsVerticalOutline class="dark:text-white" />
-						</Button>
-					{/if}
-				</TableBodyCell>
-				{#if $walletAddressMatchesOrBlank(item.vault.owner)}
-					<Dropdown
-						data-testid="dropdown"
-						placement="bottom-end"
-						triggeredBy={`#vault-menu-${item.vault.id}`}
+					<Button
+						color="alternative"
+						outline={false}
+						data-testid="vault-menu"
+						id={`vault-menu-${item.vault.id}`}
+						class="mr-2 border-none px-2"
+						on:click={(e) => {
+							e.stopPropagation();
+						}}
 					>
-						<DropdownItem
-							data-testid="deposit-button"
-							on:click={(e) => {
-								e.stopPropagation();
-								handleDepositModal(item.vault, $query.refetch);
-							}}
-							>Deposit
-						</DropdownItem>
-						<DropdownItem
-							data-testid="withdraw-button"
-							on:click={(e) => {
-								e.stopPropagation();
-								handleWithdrawModal(item.vault, $query.refetch);
-							}}
-							>Withdraw
-						</DropdownItem>
-					</Dropdown>
-				{/if}
+						<DotsVerticalOutline class="dark:text-white" />
+					</Button>
+				</TableBodyCell>
+
+				<Dropdown
+					data-testid="dropdown"
+					placement="bottom-end"
+					triggeredBy={`#vault-menu-${item.vault.id}`}
+				>
+					<DropdownItem
+						data-testid="deposit-button"
+						on:click={(e) => {
+							e.stopPropagation();
+							handleDepositModal(item.vault, $query.refetch);
+						}}
+						>Deposit
+					</DropdownItem>
+					<DropdownItem
+						data-testid="withdraw-button"
+						on:click={(e) => {
+							e.stopPropagation();
+							handleWithdrawModal(item.vault, $query.refetch);
+						}}
+						>Withdraw
+					</DropdownItem>
+				</Dropdown>
 			{/if}
 		</svelte:fragment>
 	</AppTable>

package/dist/components/tables/VaultsListTable.svelte.d.ts

@@ -19,7 +19,6 @@ declare class __sveltets_Render<T> {
         activeAccounts: Readable<{
             [k: string]: string;
         }>;
-        walletAddressMatchesOrBlank: Readable<(otherAddress: string) => boolean>;
         handleDepositGenericModal?: (() => void) | undefined;
         handleDepositModal?: ((vault: SgVault, refetch: () => void) => void) | undefined;
         handleWithdrawModal?: ((vault: SgVault, refetch: () => void) => void) | undefined;

package/dist/index.d.ts

@@ -76,6 +76,7 @@ export { bigintStringToHex, HEX_INPUT_REGEX } from './utils/hex';
 export { vaultBalanceDisplay } from './utils/vault';
 export { bigintToFloat } from './utils/number';
 export { getExplorerLink } from './services/getExplorerLink';
+export { invalidateTanstackQueries } from './queries/queryClient';
 export { DEFAULT_PAGE_SIZE, DEFAULT_REFRESH_INTERVAL } from './queries/constants';
 export { QKEY_VAULTS, QKEY_VAULT, QKEY_VAULT_CHANGES, QKEY_ORDERS, QKEY_ORDER, QKEY_ORDER_TRADES_LIST, QKEY_ORDER_QUOTE, QKEY_VAULTS_VOL_LIST, QKEY_ORDER_APY } from './queries/keys';
 export { darkChartTheme, lightChartTheme } from './utils/lightweightChartsThemes';

package/dist/index.js

@@ -73,6 +73,7 @@ export { bigintStringToHex, HEX_INPUT_REGEX } from './utils/hex';
 export { vaultBalanceDisplay } from './utils/vault';
 export { bigintToFloat } from './utils/number';
 export { getExplorerLink } from './services/getExplorerLink';
+export { invalidateTanstackQueries } from './queries/queryClient';
 // Constants
 export { DEFAULT_PAGE_SIZE, DEFAULT_REFRESH_INTERVAL } from './queries/constants';
 export { QKEY_VAULTS, QKEY_VAULT, QKEY_VAULT_CHANGES, QKEY_ORDERS, QKEY_ORDER, QKEY_ORDER_TRADES_LIST, QKEY_ORDER_QUOTE, QKEY_VAULTS_VOL_LIST, QKEY_ORDER_APY } from './queries/keys';

package/dist/providers/wallet/useAccount.d.ts

@@ -4,4 +4,5 @@
  */
 export declare function useAccount(): {
     account: import("../../types/account").Account;
+    matchesAccount: (otherAddress: string) => boolean;
 };

package/dist/providers/wallet/useAccount.js

@@ -1,3 +1,5 @@
+import { get } from 'svelte/store';
+import { isAddress, isAddressEqual } from 'viem';
 import { getAccountContext } from './context';
 import { readable } from 'svelte/store';
 /**
@@ -5,28 +7,141 @@ import { readable } from 'svelte/store';
  * Must be used within a component that is a child of WalletProvider
  */
 export function useAccount() {
+    /**
+     * The account store containing the current wallet address (as a Hex string) or null if not connected.
+     * This is a readable Svelte store that can be subscribed to for reactive updates.
+     * @type {import('svelte/store').Readable<Hex | null>}
+     */
     const account = getAccountContext();
+    /**
+     * Checks if the provided address matches the currently connected account.
+     * Returns false if no account is connected or if the provided address is invalid.
+     */
+    const matchesAccount = (otherAddress) => {
+        if (!otherAddress)
+            return false;
+        const currentAccount = get(account);
+        if (!currentAccount) {
+            return false;
+        }
+        if (isAddress(currentAccount) &&
+            isAddress(otherAddress) &&
+            isAddressEqual(currentAccount, otherAddress)) {
+            return true;
+        }
+        return false;
+    };
     return {
-        account
+        account,
+        matchesAccount
     };
 }
 if (import.meta.vitest) {
     const { describe, it, expect, vi, beforeEach } = import.meta.vitest;
+    vi.mock('viem', async () => {
+        const actual = await vi.importActual('viem');
+        return {
+            ...actual,
+            isAddress: vi.fn(),
+            isAddressEqual: vi.fn()
+        };
+    });
     vi.mock('./context', () => ({
         getAccountContext: vi.fn()
     }));
+    vi.mock('svelte/store', async () => {
+        const actual = await vi.importActual('svelte/store');
+        return {
+            ...actual,
+            get: vi.fn()
+        };
+    });
     describe('useAccount', () => {
         const mockGetAccountContext = vi.mocked(getAccountContext);
+        const mockGet = vi.mocked(get);
+        const mockIsAddress = vi.mocked(isAddress);
+        const mockIsAddressEqual = vi.mocked(isAddressEqual);
         beforeEach(() => {
-            mockGetAccountContext.mockReset();
+            vi.clearAllMocks();
         });
         it('should return account wrapped in an object', () => {
-            const mockAccount = readable('0x123');
-            mockGetAccountContext.mockReturnValue(mockAccount);
+            const mockAccountStore = readable('0x123');
+            mockGetAccountContext.mockReturnValue(mockAccountStore);
             const result = useAccount();
             expect(mockGetAccountContext).toHaveBeenCalled();
-            expect(result).toEqual({
-                account: mockAccount
+            expect(result.account).toBe(mockAccountStore);
+            expect(result.matchesAccount).toBeInstanceOf(Function);
+        });
+        describe('matchesAccount', () => {
+            const mockAccountStore = readable('0x123');
+            const currentAccount = '0x123';
+            const testAddress1 = '0x123';
+            const testAddress2 = '0xdef';
+            const invalidAddress = 'invalid';
+            beforeEach(() => {
+                mockGetAccountContext.mockReturnValue(mockAccountStore);
+            });
+            it('should return true if addresses are valid and equal', () => {
+                // Setup mocks
+                mockGet.mockReturnValue(currentAccount);
+                mockIsAddress.mockReturnValue(true);
+                mockIsAddressEqual.mockReturnValue(true);
+                const { matchesAccount } = useAccount();
+                const result = matchesAccount(testAddress1);
+                expect(mockGet).toHaveBeenCalledWith(mockAccountStore);
+                expect(mockIsAddress).toHaveBeenCalledWith(currentAccount);
+                expect(mockIsAddress).toHaveBeenCalledWith(testAddress1);
+                expect(mockIsAddressEqual).toHaveBeenCalledWith(currentAccount, testAddress1);
+                expect(result).toBe(true);
+            });
+            it('should return false if addresses are valid but not equal', () => {
+                // Setup mocks
+                mockGet.mockReturnValue(currentAccount);
+                mockIsAddress.mockReturnValue(true);
+                mockIsAddressEqual.mockReturnValue(false);
+                const { matchesAccount } = useAccount();
+                const result = matchesAccount(testAddress2);
+                expect(mockGet).toHaveBeenCalledWith(mockAccountStore);
+                expect(mockIsAddress).toHaveBeenCalledWith(currentAccount);
+                expect(mockIsAddress).toHaveBeenCalledWith(testAddress2);
+                expect(mockIsAddressEqual).toHaveBeenCalledWith(currentAccount, testAddress2);
+                expect(result).toBe(false);
+            });
+            it('should return false if current account is not set', () => {
+                // Setup mocks
+                mockGet.mockReturnValue(null);
+                const { matchesAccount } = useAccount();
+                const result = matchesAccount(testAddress1);
+                expect(mockGet).toHaveBeenCalledWith(mockAccountStore);
+                expect(mockIsAddress).not.toHaveBeenCalled();
+                expect(mockIsAddressEqual).not.toHaveBeenCalled();
+                expect(result).toBe(false);
+            });
+            it('should return false if provided address is invalid', () => {
+                // Setup mocks
+                mockGet.mockReturnValue(currentAccount);
+                // This is crucial: we need to ensure short-circuit evaluation works correctly
+                mockIsAddress.mockImplementation((address) => {
+                    return address !== invalidAddress; // Only the invalid address returns false
+                });
+                // This should never be called due to short-circuit evaluation
+                mockIsAddressEqual.mockReturnValue(false);
+                const { matchesAccount } = useAccount();
+                const result = matchesAccount(invalidAddress);
+                expect(mockGet).toHaveBeenCalledWith(mockAccountStore);
+                expect(mockIsAddress).toHaveBeenCalledWith(currentAccount);
+                expect(mockIsAddress).toHaveBeenCalledWith(invalidAddress);
+                expect(mockIsAddressEqual).not.toHaveBeenCalled(); // This should now pass
+                expect(result).toBe(false);
+            });
+            it('should return false if provided address is null', () => {
+                // Setup mocks
+                mockGet.mockReturnValue(currentAccount);
+                const { matchesAccount } = useAccount();
+                const result = matchesAccount(null);
+                expect(mockIsAddress).not.toHaveBeenCalled();
+                expect(mockIsAddressEqual).not.toHaveBeenCalled();
+                expect(result).toBe(false);
             });
         });
     });

package/dist/queries/queryClient.d.ts

@@ -1,3 +1,3 @@
 import { QueryClient } from '@tanstack/svelte-query';
 export declare const queryClient: QueryClient;
-export declare const invalidateIdQuery: (queryClient: QueryClient, id: string) => Promise<void>;
+export declare const invalidateTanstackQueries: (queryClient: QueryClient, queryKey: string[]) => void;

package/dist/queries/queryClient.js

@@ -7,9 +7,9 @@ export const queryClient = new QueryClient({
         }
     }
 });
-export const invalidateIdQuery = async (queryClient, id) => {
-    await queryClient.invalidateQueries({
-        queryKey: [id],
+export const invalidateTanstackQueries = (queryClient, queryKey) => {
+    queryClient.invalidateQueries({
+        queryKey,
         refetchType: 'all',
         exact: false
     });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@rainlanguage/ui-components",
-	"version": "0.0.1-alpha.61",
+	"version": "0.0.1-alpha.63",
 	"description": "A component library for building Svelte applications to be used with Raindex.",
 	"license": "LicenseRef-DCL-1.0",
 	"author": "Rain Open Source Software Ltd",
@@ -53,7 +53,7 @@
 		"@fontsource/dm-sans": "5.1.0",
 		"@imask/svelte": "7.6.1",
 		"@observablehq/plot": "0.6.16",
-		"@rainlanguage/orderbook": "0.0.1-alpha.61",
+		"@rainlanguage/orderbook": "0.0.1-alpha.63",
 		"@reown/appkit": "1.6.4",
 		"@reown/appkit-adapter-wagmi": "1.6.4",
 		"@sentry/sveltekit": "7.120.0",