@rainlanguage/ui-components 0.0.1-alpha.60 → 0.0.1-alpha.62

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/detail/OrderDetail.svelte

@@ -10,9 +10,6 @@ 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";
@@ -22,7 +19,9 @@ import Refresh from "../icon/Refresh.svelte";
 import { invalidateIdQuery } 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: () => {
@@ -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)}
@@ -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/VaultDetail.svelte

@@ -6,7 +6,7 @@ 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";
@@ -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: () => {
@@ -59,7 +59,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"

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]) => ({
@@ -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/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]) => ({
@@ -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/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/stores/transactionStore.d.ts

@@ -20,7 +20,7 @@ export declare enum TransactionStatus {
 export declare enum TransactionErrorMessage {
     BAD_CALLLDATA = "Bad calldata.",
     DEPLOY_FAILED = "Lock transaction failed.",
-    TIMEOUT = "Transaction timed out.",
+    TIMEOUT = "The subgraph took too long to respond. Please check the transaction link.",
     APPROVAL_FAILED = "Approval transaction failed.",
     USER_REJECTED_APPROVAL = "User rejected approval transaction.",
     USER_REJECTED_TRANSACTION = "User rejected the transaction.",

package/dist/stores/transactionStore.js

@@ -22,7 +22,7 @@ export var TransactionErrorMessage;
 (function (TransactionErrorMessage) {
     TransactionErrorMessage["BAD_CALLLDATA"] = "Bad calldata.";
     TransactionErrorMessage["DEPLOY_FAILED"] = "Lock transaction failed.";
-    TransactionErrorMessage["TIMEOUT"] = "Transaction timed out.";
+    TransactionErrorMessage["TIMEOUT"] = "The subgraph took too long to respond. Please check the transaction link.";
     TransactionErrorMessage["APPROVAL_FAILED"] = "Approval transaction failed.";
     TransactionErrorMessage["USER_REJECTED_APPROVAL"] = "User rejected approval transaction.";
     TransactionErrorMessage["USER_REJECTED_TRANSACTION"] = "User rejected the transaction.";
@@ -46,6 +46,10 @@ export const initialState = {
 const transactionStore = () => {
     const { subscribe, set, update } = writable(initialState);
     const reset = () => set(initialState);
+    const returnError = (interval) => {
+        clearInterval(interval);
+        return transactionError(TransactionErrorMessage.TIMEOUT);
+    };
     const awaitTransactionIndexing = async (subgraphUrl, txHash, successMessage) => {
         update((state) => ({
             ...state,
@@ -56,18 +60,22 @@ const transactionStore = () => {
         let newTx;
         const interval = setInterval(async () => {
             attempts++;
-            newTx = await getTransaction(subgraphUrl, txHash);
-            if (newTx) {
-                clearInterval(interval);
-                transactionSuccess(txHash, successMessage);
+            try {
+                newTx = await getTransaction(subgraphUrl, txHash);
+                if (newTx) {
+                    clearInterval(interval);
+                    transactionSuccess(txHash, successMessage);
+                }
+                else if (attempts >= 10) {
+                    update((state) => ({
+                        ...state,
+                        message: 'The subgraph took too long to respond. Please check again later.'
+                    }));
+                    return returnError(interval);
+                }
             }
-            else if (attempts >= 10) {
-                update((state) => ({
-                    ...state,
-                    message: 'The subgraph took too long to respond. Please check again later.'
-                }));
-                clearInterval(interval);
-                return transactionError(TransactionErrorMessage.TIMEOUT);
+            catch {
+                return returnError(interval);
             }
         }, 1000);
     };
@@ -80,18 +88,18 @@ const transactionStore = () => {
         let attempts = 0;
         const interval = setInterval(async () => {
             attempts++;
-            const addOrders = await getTransactionAddOrders(subgraphUrl, txHash);
-            if (attempts >= 10) {
-                update((state) => ({
-                    ...state,
-                    message: 'The subgraph took too long to respond. Please check again later.'
-                }));
-                clearInterval(interval);
-                return transactionError(TransactionErrorMessage.TIMEOUT);
+            try {
+                const addOrders = await getTransactionAddOrders(subgraphUrl, txHash);
+                if (attempts >= 10) {
+                    return returnError(interval);
+                }
+                else if (addOrders?.length > 0) {
+                    clearInterval(interval);
+                    return transactionSuccess(txHash, '', addOrders[0].order.orderHash, network);
+                }
             }
-            else if (addOrders?.length > 0) {
-                clearInterval(interval);
-                return transactionSuccess(txHash, '', addOrders[0].order.orderHash, network);
+            catch {
+                return returnError(interval);
             }
         }, 1000);
     };
@@ -104,18 +112,22 @@ const transactionStore = () => {
         let attempts = 0;
         const interval = setInterval(async () => {
             attempts++;
-            const removeOrders = await getTransactionRemoveOrders(subgraphUrl, txHash);
-            if (attempts >= 10) {
-                update((state) => ({
-                    ...state,
-                    message: 'The subgraph took too long to respond. Please check again later.'
-                }));
-                clearInterval(interval);
-                return transactionError(TransactionErrorMessage.TIMEOUT);
+            try {
+                const removeOrders = await getTransactionRemoveOrders(subgraphUrl, txHash);
+                if (attempts >= 10) {
+                    update((state) => ({
+                        ...state,
+                        message: 'The subgraph took too long to respond. Please check again later.'
+                    }));
+                    return returnError(interval);
+                }
+                else if (removeOrders?.length > 0) {
+                    clearInterval(interval);
+                    return transactionSuccess(txHash, 'Order removed successfully');
+                }
             }
-            else if (removeOrders?.length > 0) {
-                clearInterval(interval);
-                return transactionSuccess(txHash, 'Order removed successfully');
+            catch {
+                return returnError(interval);
             }
         }, 1000);
     };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@rainlanguage/ui-components",
-	"version": "0.0.1-alpha.60",
+	"version": "0.0.1-alpha.62",
 	"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.60",
+		"@rainlanguage/orderbook": "0.0.1-alpha.62",
 		"@reown/appkit": "1.6.4",
 		"@reown/appkit-adapter-wagmi": "1.6.4",
 		"@sentry/sveltekit": "7.120.0",