@rainlanguage/ui-components 0.0.1-alpha.136 → 0.0.1-alpha.137

package/dist/__mocks__/stores.d.ts

@@ -1,4 +1,4 @@
-import { type AccountCfg, type NewConfig, type SubgraphCfg } from '@rainlanguage/orderbook';
+import type { AccountCfg, NewConfig } from '@rainlanguage/orderbook';
 import { type Config } from '@wagmi/core';
 declare const initialPageState: {
     data: {
@@ -25,11 +25,6 @@ export declare const mockSettingsStore: {
     set: (this: void, value: NewConfig) => void;
     mockSetSubscribeValue: (value: NewConfig) => void;
 };
-export declare const mockActiveSubgraphsStore: {
-    subscribe: (this: void, run: import("svelte/store").Subscriber<Record<string, SubgraphCfg>>, invalidate?: import("svelte/store").Invalidator<Record<string, SubgraphCfg>> | undefined) => import("svelte/store").Unsubscriber;
-    set: (this: void, value: Record<string, SubgraphCfg>) => void;
-    mockSetSubscribeValue: (value: Record<string, SubgraphCfg>) => void;
-};
 export declare const mockAccountsStore: {
     subscribe: (this: void, run: import("svelte/store").Subscriber<Record<string, AccountCfg>>, invalidate?: import("svelte/store").Invalidator<Record<string, AccountCfg>> | undefined) => import("svelte/store").Unsubscriber;
 };
@@ -95,6 +90,11 @@ export declare const mockShowMyItemsOnlyStore: {
     set: (this: void, value: boolean) => void;
     mockSetSubscribeValue: (value: boolean) => void;
 };
+export declare const mockSelectedChainIdsStore: {
+    subscribe: (this: void, run: import("svelte/store").Subscriber<number[]>, invalidate?: import("svelte/store").Invalidator<number[]> | undefined) => import("svelte/store").Unsubscriber;
+    set: (this: void, value: number[]) => void;
+    mockSetSubscribeValue: (value: number[]) => void;
+};
 export declare const mockPageStore: {
     subscribe: (this: void, run: import("svelte/store").Subscriber<{
         data: {

package/dist/__mocks__/stores.js

@@ -35,7 +35,6 @@ const initialPageState = {
 };
 const mockPageWritable = writable(initialPageState);
 const mockSettingsWritable = writable(settingsFixture);
-const mockActiveSubgraphsWritable = writable({});
 const mockAccountsWritable = writable({});
 const mockActiveAccountsItemsWritable = writable({});
 const mockShowInactiveOrdersWritable = writable(true);
@@ -49,16 +48,12 @@ const mockChainIdWritable = writable(0);
 const mockConnectedWritable = writable(true);
 const mockWagmiConfigWritable = writable(mockWeb3Config);
 const mockShowMyItemsOnlyWritable = writable(false);
+const mockSelectedChainIdsWritable = writable([]);
 export const mockSettingsStore = {
     subscribe: mockSettingsWritable.subscribe,
     set: mockSettingsWritable.set,
     mockSetSubscribeValue: (value) => mockSettingsWritable.set(value)
 };
-export const mockActiveSubgraphsStore = {
-    subscribe: mockActiveSubgraphsWritable.subscribe,
-    set: mockActiveSubgraphsWritable.set,
-    mockSetSubscribeValue: (value) => mockActiveSubgraphsWritable.set(value)
-};
 export const mockAccountsStore = {
     subscribe: mockAccountsWritable.subscribe
 };
@@ -124,6 +119,11 @@ export const mockShowMyItemsOnlyStore = {
     set: mockShowMyItemsOnlyWritable.set,
     mockSetSubscribeValue: (value) => mockShowMyItemsOnlyWritable.set(value)
 };
+export const mockSelectedChainIdsStore = {
+    subscribe: mockSelectedChainIdsWritable.subscribe,
+    set: mockSelectedChainIdsWritable.set,
+    mockSetSubscribeValue: (value) => mockSelectedChainIdsWritable.set(value)
+};
 export const mockPageStore = {
     subscribe: mockPageWritable.subscribe,
     set: mockPageWritable.set,

package/dist/components/ButtonVaultLink.svelte

@@ -1,8 +1,8 @@
-<script>import { bigintStringToHex } from "../utils/hex";
+<script>import { formatUnits, toHex } from "viem";
 import Tooltip from "./Tooltip.svelte";
-import { formatUnits } from "viem";
 export let tokenVault;
-export let subgraphName;
+export let chainId;
+export let orderbookAddress;
 </script>
 
 <div
@@ -11,16 +11,16 @@ export let subgraphName;
 >
 	<div class="flex flex-col items-start gap-y-2">
 		<Tooltip triggeredBy={`#token-info-${tokenVault.vaultId}`}>
-			ID: <span class="font-mono">{bigintStringToHex(tokenVault.vaultId)}</span>
+			ID: <span class="font-mono">{toHex(tokenVault.vaultId)}</span>
 		</Tooltip>
-		<a href={`/vaults/${subgraphName}-${tokenVault.id}`} id={`token-info-${tokenVault.vaultId}`}>
+		<a
+			href={`/vaults/${chainId}-${orderbookAddress}-${tokenVault.id}`}
+			id={`token-info-${tokenVault.vaultId}`}
+		>
 			{tokenVault.token.name} ({tokenVault.token.symbol})
 		</a>
 		<span class="text-sm text-gray-500 dark:text-gray-400">
-			Balance: {formatUnits(
-				BigInt(tokenVault.balance),
-				parseInt(tokenVault.token.decimals || '18')
-			)}
+			Balance: {formatUnits(tokenVault.balance, Number(tokenVault.token.decimals) || 18)}
 		</span>
 	</div>
 	<div>

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

@@ -1,9 +1,10 @@
 import { SvelteComponent } from "svelte";
-import type { SgVault } from '@rainlanguage/orderbook';
+import type { Address, RaindexVault } from '@rainlanguage/orderbook';
 declare const __propDef: {
     props: {
-        tokenVault: SgVault;
-        subgraphName: string;
+        tokenVault: RaindexVault;
+        chainId: number;
+        orderbookAddress: Address;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/CodeMirrorRainlang.svelte

@@ -1,21 +1,15 @@
-<script>import { extendOrder } from "@rainlanguage/orderbook";
-import CodeMirror from "svelte-codemirror-editor";
+<script>import CodeMirror from "svelte-codemirror-editor";
 import { RainlangLR } from "codemirror-rainlang";
 export let order = void 0;
 export let rainlangText = void 0;
 export let codeMirrorTheme;
 export let codeMirrorDisabled = true;
 export let codeMirrorStyles = {};
-let result;
-let extendedOrder;
-$: result = order ? extendOrder(order) : void 0;
-$: extendedOrder = result && !result.error ? result.value : void 0;
-$: extendOrderError = result && result.error ? result.error : void 0;
 </script>
 
-{#if rainlangText || extendedOrder?.rainlang}
+{#if rainlangText || order?.rainlang}
 	<CodeMirror
-		value={rainlangText || extendedOrder?.rainlang}
+		value={rainlangText || order?.rainlang}
 		extensions={[RainlangLR]}
 		theme={codeMirrorTheme}
 		readonly={codeMirrorDisabled}
@@ -28,15 +22,4 @@ $: extendOrderError = result && result.error ? result.error : void 0;
 			...codeMirrorStyles
 		}}
 	/>
-{:else if extendOrderError}
-	<div class="w-full tracking-tight text-red-600 dark:text-red-400" data-testid="rainlang-error">
-		{extendOrderError.readableMsg}
-	</div>
-{:else if !extendedOrder?.rainlang && !rainlangText}
-	<div
-		class="w-full tracking-tight text-gray-900 dark:text-white"
-		data-testid="rainlang-not-included"
-	>
-		Rain source not included in order meta
-	</div>
 {/if}

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

@@ -1,8 +1,8 @@
 import { SvelteComponent } from "svelte";
-import type { SgOrder } from '@rainlanguage/orderbook';
+import type { RaindexOrder } from '@rainlanguage/orderbook';
 declare const __propDef: {
     props: {
-        order?: SgOrder | undefined;
+        order?: RaindexOrder | undefined;
         rainlangText?: string | undefined;
         codeMirrorTheme: any;
         codeMirrorDisabled?: boolean;

package/dist/components/ListViewOrderbookFilters.svelte

@@ -1,8 +1,8 @@
-<script generics="T">import { page } from "$app/stores";
+<script generics="T">import DropdownActiveNetworks from "./dropdown/DropdownActiveNetworks.svelte";
+import { page } from "$app/stores";
 import { isEmpty } from "lodash";
 import { Alert } from "flowbite-svelte";
 import Tooltip from "./Tooltip.svelte";
-import DropdownActiveSubgraphs from "./dropdown/DropdownActiveSubgraphs.svelte";
 import CheckboxActiveOrders from "./checkbox/CheckboxActiveOrders.svelte";
 import DropdownOrderListAccounts from "./dropdown/DropdownOrderListAccounts.svelte";
 import InputOrderHash from "./input/InputOrderHash.svelte";
@@ -14,7 +14,7 @@ export let accounts;
 export let hideZeroBalanceVaults;
 export let activeAccountsItems;
 export let showMyItemsOnly;
-export let activeSubgraphs;
+export let selectedChainIds;
 export let showInactiveOrders;
 export let orderHash;
 $: isVaultsPage = $page.url.pathname === "/vaults";
@@ -54,6 +54,6 @@ const { account } = useAccount();
 		{#if $accounts && Object.values($accounts).length > 0}
 			<DropdownOrderListAccounts {accounts} {activeAccountsItems} />
 		{/if}
-		<DropdownActiveSubgraphs settings={$settings} {activeSubgraphs} />
+		<DropdownActiveNetworks settings={$settings} {selectedChainIds} />
 	{/if}
 </div>

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

@@ -7,7 +7,7 @@ declare class __sveltets_Render<T> {
         hideZeroBalanceVaults: AppStoresInterface["hideZeroBalanceVaults"];
         activeAccountsItems: AppStoresInterface["activeAccountsItems"];
         showMyItemsOnly: AppStoresInterface["showMyItemsOnly"];
-        activeSubgraphs: AppStoresInterface["activeSubgraphs"];
+        selectedChainIds: AppStoresInterface["selectedChainIds"];
         showInactiveOrders: AppStoresInterface["showInactiveOrders"];
         orderHash: AppStoresInterface["orderHash"];
     };

package/dist/components/OrderOrVaultHash.svelte

@@ -7,11 +7,11 @@ import {
 } from "../utils/constructHashLink";
 export let orderOrVault;
 export let type;
-export let network;
-export let updateActiveNetworkAndOrderbook;
+export let chainId;
+export let orderbookAddress;
 $: hash = extractHash(orderOrVault);
 $: isActive = isOrderOrVaultActive(orderOrVault);
-$: linkPath = constructHashLink(orderOrVault, type, network);
+$: linkPath = constructHashLink(orderOrVault, type, chainId, orderbookAddress);
 </script>
 
 <a data-testid="order-or-vault-hash" href={linkPath}>
@@ -19,9 +19,6 @@ $: linkPath = constructHashLink(orderOrVault, type, network);
 		class="mr-1 mt-1 px-2 py-1 text-sm"
 		color={isActive ? 'green' : 'yellow'}
 		data-testid="vault-order-input"
-		data-id={hash}
-		on:click={() => {
-			updateActiveNetworkAndOrderbook(network);
-		}}><Hash type={HashType.Identifier} value={hash} copyOnClick={false} /></Button
+		data-id={hash}><Hash type={HashType.Identifier} value={hash} copyOnClick={false} /></Button
 	>
 </a>

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

@@ -1,11 +1,11 @@
 import { SvelteComponent } from "svelte";
-import type { SgOrderAsIO, SgOrder, SgVault } from '@rainlanguage/orderbook';
+import type { Address, RaindexOrder, RaindexOrderAsIO, RaindexVault } from '@rainlanguage/orderbook';
 declare const __propDef: {
     props: {
-        orderOrVault: SgOrder | SgVault | SgOrderAsIO;
+        orderOrVault: RaindexOrder | RaindexVault | RaindexOrderAsIO;
         type: "orders" | "vaults";
-        network: string;
-        updateActiveNetworkAndOrderbook: (subgraphName: string) => void;
+        chainId: number;
+        orderbookAddress: Address;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/charts/OrderTradesChart.svelte

@@ -1,29 +1,18 @@
-<script>import { getOrderTradesList } from "@rainlanguage/orderbook";
+<script>import {} from "@rainlanguage/orderbook";
 import { prepareHistoricalOrderChartData } from "../../services/historicalOrderCharts";
 import TanstackLightweightChartLine from "./TanstackLightweightChartLine.svelte";
 import { createQuery } from "@tanstack/svelte-query";
 import { QKEY_ORDER_TRADES_LIST } from "../../queries/keys";
-export let id;
-export let subgraphUrl;
+export let order;
 export let colorTheme;
 export let lightweightChartsTheme;
 $: query = createQuery({
-  queryKey: [QKEY_ORDER_TRADES_LIST, id],
+  queryKey: [QKEY_ORDER_TRADES_LIST, order.id],
   queryFn: async () => {
-    const data = await getOrderTradesList(
-      subgraphUrl || "",
-      id,
-      {
-        page: 1,
-        pageSize: 10
-      },
-      BigInt(1e3),
-      void 0
-    );
-    if (data.error) throw new Error(data.error.msg);
+    const data = await order.getTradesList(BigInt(1e3), void 0, 1);
+    if (data.error) throw new Error(data.error.readableMsg);
     return prepareHistoricalOrderChartData(data.value, $colorTheme);
-  },
-  enabled: !!subgraphUrl
+  }
 });
 </script>
 

package/dist/components/charts/OrderTradesChart.svelte.d.ts

@@ -1,8 +1,8 @@
 import { SvelteComponent } from "svelte";
+import { type RaindexOrder } from '@rainlanguage/orderbook';
 declare const __propDef: {
     props: {
-        id: string;
-        subgraphUrl: string;
+        order: RaindexOrder;
         colorTheme: any;
         lightweightChartsTheme: any;
     };

package/dist/components/charts/VaultBalanceChart.svelte

@@ -1,24 +1,17 @@
 <script>import { timestampSecondsToUTCTimestamp } from "../../services/time";
 import { bigintToFloat } from "../../utils/number";
 import { createQuery } from "@tanstack/svelte-query";
-import { getVaultBalanceChanges } from "@rainlanguage/orderbook";
 import TanstackLightweightChartLine from "../charts/TanstackLightweightChartLine.svelte";
 import { QKEY_VAULT_CHANGES } from "../../queries/keys";
 export let vault;
-export let id;
-export let subgraphUrl;
 export let lightweightChartsTheme;
 $: query = createQuery({
-  queryKey: [id, QKEY_VAULT_CHANGES + id, QKEY_VAULT_CHANGES],
+  queryKey: [vault.id, QKEY_VAULT_CHANGES + vault.id, QKEY_VAULT_CHANGES],
   queryFn: async () => {
-    const result = await getVaultBalanceChanges(subgraphUrl || "", vault.id, {
-      page: 1,
-      pageSize: 1e3
-    });
+    const result = await vault.getBalanceChanges(1);
     if (result.error) throw new Error(result.error.msg);
     return result.value;
-  },
-  enabled: !!subgraphUrl
+  }
 });
 const Chart = TanstackLightweightChartLine;
 </script>
@@ -29,8 +22,7 @@ const Chart = TanstackLightweightChartLine;
 		priceSymbol={vault.token.symbol}
 		{query}
 		timeTransform={(d) => timestampSecondsToUTCTimestamp(BigInt(d.timestamp))}
-		valueTransform={(d) =>
-			bigintToFloat(BigInt(d.newVaultBalance), Number(vault.token.decimals ?? 0))}
+		valueTransform={(d) => bigintToFloat(d.newBalance, Number(vault.token.decimals ?? 0))}
 		emptyMessage="No deposits or withdrawals found"
 		{lightweightChartsTheme}
 	/>

package/dist/components/charts/VaultBalanceChart.svelte.d.ts

@@ -1,10 +1,8 @@
 import { SvelteComponent } from "svelte";
-import type { SgVault } from '@rainlanguage/orderbook';
+import type { RaindexVault } from '@rainlanguage/orderbook';
 declare const __propDef: {
     props: {
-        vault: SgVault;
-        id: string;
-        subgraphUrl: string;
+        vault: RaindexVault;
         lightweightChartsTheme: any;
     };
     events: {

package/dist/components/deployment/DeploymentSteps.svelte

@@ -2,7 +2,8 @@
 import TokenIOInput from "./TokenIOInput.svelte";
 import ComposedRainlangModal from "./ComposedRainlangModal.svelte";
 import {
-  DotrainOrderGui
+  DotrainOrderGui,
+  RaindexClient
 } from "@rainlanguage/orderbook";
 import WalletConnect from "../wallet/WalletConnect.svelte";
 import {} from "svelte/store";
@@ -17,12 +18,12 @@ import { useGui } from "../../hooks/useGui";
 import { fade } from "svelte/transition";
 import ShareChoicesButton from "./ShareChoicesButton.svelte";
 import { useRegistry } from "../../providers/registry/useRegistry";
+import { useRaindexClient } from "../../hooks/useRaindexClient";
 export let deployment;
 export let strategyDetail;
 export let onDeploy;
 export let wagmiConnected;
 export let appKitModal;
-export let settings;
 export let account;
 let allDepositFields = [];
 let allTokenOutputs = [];
@@ -34,9 +35,9 @@ let showAdvancedOptions = false;
 let allTokenInfos = [];
 let selectTokens = void 0;
 let checkingDeployment = false;
-let subgraphUrl = void 0;
 const gui = useGui();
 const registry = useRegistry();
+const raindexClient = useRaindexClient();
 let deploymentStepsError = DeploymentStepsError.error;
 onMount(async () => {
   const selectTokensResult = gui.getSelectTokens();
@@ -44,12 +45,6 @@ onMount(async () => {
     throw new Error(selectTokensResult.error.msg);
   }
   selectTokens = selectTokensResult.value;
-  const { value, error } = gui.getNetworkKey();
-  if (error) {
-    DeploymentStepsError.catch(error, DeploymentStepsErrorCode.NO_NETWORK_KEY);
-  } else if (value) {
-    subgraphUrl = $settings.orderbook.subgraphs[value].url;
-  }
   await areAllTokensSelected();
 });
 $: if (selectTokens?.length === 0 || allTokensSelected) {
@@ -137,7 +132,7 @@ async function handleDeployButtonClick() {
       return;
     }
     DeploymentStepsError.clear();
-    return onDeploy(gui, subgraphUrl);
+    return onDeploy(raindexClient, gui);
   } catch (e) {
     DeploymentStepsError.catch(e, DeploymentStepsErrorCode.ADD_ORDER_FAILED);
   } finally {

package/dist/components/deployment/DeploymentSteps.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import { type NameAndDescriptionCfg, type NewConfig, DotrainOrderGui } from '@rainlanguage/orderbook';
+import { type NameAndDescriptionCfg, DotrainOrderGui, RaindexClient } from '@rainlanguage/orderbook';
 import { type Writable } from 'svelte/store';
 import type { AppKit } from '@reown/appkit';
 import type { Account } from '../../types/account';
@@ -11,10 +11,9 @@ declare const __propDef: {
             description: string;
         };
         /** Strategy details containing name and description configuration */ strategyDetail: NameAndDescriptionCfg;
-        /** Handlers for deployment modals */ onDeploy: (gui: DotrainOrderGui, subgraphUrl?: string) => void;
+        /** Handlers for deployment modals */ onDeploy: (raindexClient: RaindexClient, gui: DotrainOrderGui) => void;
         wagmiConnected: Writable<boolean>;
         appKitModal: Writable<AppKit>;
-        settings: Writable<NewConfig>;
         account: Account;
     };
     events: {

package/dist/components/detail/OrderDetail.svelte

@@ -14,7 +14,6 @@ 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 { invalidateTanstackQueries } from "../../queries/queryClient";
 import {
@@ -24,18 +23,21 @@ import {
 } from "flowbite-svelte-icons";
 import { useAccount } from "../../providers/wallet/useAccount";
 import {
-  getOrderByHash
+  RaindexClient,
+  RaindexOrder,
+  RaindexVault
 } from "@rainlanguage/orderbook";
 import { useToasts } from "../../providers/toasts/useToasts";
+import { useRaindexClient } from "../../hooks/useRaindexClient";
 export let handleQuoteDebugModal = void 0;
-export const handleDebugTradeModal = void 0;
+export let handleDebugTradeModal = void 0;
 export let colorTheme;
 export let codeMirrorTheme;
 export let lightweightChartsTheme;
 export let orderbookAddress;
 export let orderHash;
-export let rpcUrls;
-export let subgraphUrl;
+export let chainId;
+export let rpcUrls = void 0;
 export let onRemove;
 export let onDeposit;
 export let onWithdraw;
@@ -44,14 +46,14 @@ let codeMirrorStyles = {};
 const queryClient = useQueryClient();
 const { matchesAccount } = useAccount();
 const { errToast } = useToasts();
+const raindexClient = useRaindexClient();
 $: orderDetailQuery = createQuery({
   queryKey: [orderHash, QKEY_ORDER + orderHash],
   queryFn: async () => {
-    const result = await getOrderByHash(subgraphUrl, orderHash);
-    if (result.error) throw new Error(result.error.msg);
+    const result = await raindexClient.getOrderByHash(chainId, orderbookAddress, orderHash);
+    if (result.error) throw new Error(result.error.readableMsg);
     return result.value;
-  },
-  enabled: !!subgraphUrl
+  }
 });
 const interval = setInterval(async () => {
   await invalidateTanstackQueries(queryClient, [orderHash]);
@@ -66,7 +68,6 @@ const handleRefresh = async () => {
     errToast("Failed to refresh");
   }
 };
-$: subgraphName = $page.url.pathname.split("/")[2]?.split("-")[0];
 </script>
 
 <TanstackPageContentDetail query={orderDetailQuery} emptyMessage="Order not found">
@@ -77,16 +78,16 @@ $: subgraphName = $page.url.pathname.split("/")[2]?.split("-")[0];
 			<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} />
+					<Hash shorten value={data.orderHash} />
 				</div>
-				<BadgeActive active={data.order.active} large />
+				<BadgeActive active={data.active} large />
 			</div>
 
 			<div class="flex items-center gap-2">
-				{#if matchesAccount(data.order.owner)}
-					{#if data.order.active}
+				{#if matchesAccount(data.owner)}
+					{#if data.active}
 						<Button
-							on:click={() => onRemove(data.order)}
+							on:click={() => onRemove(raindexClient, data)}
 							data-testid="remove-button"
 							aria-label="Remove order">Remove</Button
 						>
@@ -106,31 +107,32 @@ $: subgraphName = $page.url.pathname.split("/")[2]?.split("-")[0];
 			<CardProperty>
 				<svelte:fragment slot="key">Orderbook</svelte:fragment>
 				<svelte:fragment slot="value">
-					<Hash type={HashType.Identifier} shorten={false} value={data.order.orderbook.id} />
+					<Hash type={HashType.Identifier} shorten={false} value={data.orderbook} />
 				</svelte:fragment>
 			</CardProperty>
 
 			<CardProperty>
 				<svelte:fragment slot="key">Owner</svelte:fragment>
 				<svelte:fragment slot="value">
-					<Hash type={HashType.Wallet} shorten={false} value={data.order.owner} />
+					<Hash type={HashType.Wallet} shorten={false} value={data.owner} />
 				</svelte:fragment>
 			</CardProperty>
 
 			<CardProperty>
 				<svelte:fragment slot="key">Created</svelte:fragment>
 				<svelte:fragment slot="value">
-					{formatTimestampSecondsAsLocal(BigInt(data.order.timestampAdded))}
+					{formatTimestampSecondsAsLocal(data.timestampAdded)}
 				</svelte:fragment>
 			</CardProperty>
 
-			{#each [{ key: 'Output vaults', type: 'outputs' }, { key: 'Input vaults', type: 'inputs' }, { key: 'Input & output vaults', type: 'inputs_outputs' }] as { key, type }}
-				{#if data.vaults.get(type)?.length !== 0}
+			{#each [{ key: 'Output vaults', type: 'output' }, { key: 'Input vaults', type: 'input' }, { key: 'Input & output vaults', type: 'inputOutput' }] as { key, type }}
+				{@const filteredVaults = data.vaults.filter((vault) => vault.vaultType === type)}
+				{#if filteredVaults.length !== 0}
 					<CardProperty>
 						<svelte:fragment slot="key"
 							><div class="flex items-center gap-x-2">
 								{key}
-								{#if type === 'inputs_outputs'}
+								{#if type === 'InputOutput'}
 									<InfoCircleOutline class="h-4 w-4" /><Tooltip
 										>{'These vaults can be an input or an output for this order'}</Tooltip
 									>{/if}
@@ -138,8 +140,8 @@ $: subgraphName = $page.url.pathname.split("/")[2]?.split("-")[0];
 						>
 						<svelte:fragment slot="value">
 							<div class="mt-2 space-y-2">
-								{#each data.vaults.get(type) || [] as vault}
-									<ButtonVaultLink tokenVault={vault} {subgraphName}>
+								{#each filteredVaults as vault}
+									<ButtonVaultLink tokenVault={vault} {chainId} {orderbookAddress}>
 										<svelte:fragment slot="buttons">
 											{#if matchesAccount(vault.owner)}
 												<div class="flex gap-1">
@@ -147,7 +149,7 @@ $: subgraphName = $page.url.pathname.split("/")[2]?.split("-")[0];
 														color="light"
 														size="xs"
 														data-testid="deposit-button"
-														on:click={() => onDeposit(vault)}
+														on:click={() => onDeposit(raindexClient, vault)}
 													>
 														<ArrowDownToBracketOutline size="xs" />
 													</Button>
@@ -155,7 +157,7 @@ $: subgraphName = $page.url.pathname.split("/")[2]?.split("-")[0];
 														color="light"
 														size="xs"
 														data-testid="withdraw-button"
-														on:click={() => onWithdraw(vault)}
+														on:click={() => onWithdraw(raindexClient, vault)}
 													>
 														<ArrowUpFromBracketOutline size="xs" />
 													</Button>
@@ -172,16 +174,10 @@ $: subgraphName = $page.url.pathname.split("/")[2]?.split("-")[0];
 		</div>
 	</svelte:fragment>
 	<svelte:fragment slot="chart" let:data>
-		<OrderTradesChart id={data.order.id} {subgraphUrl} {lightweightChartsTheme} {colorTheme} />
+		<OrderTradesChart order={data} {lightweightChartsTheme} {colorTheme} />
 	</svelte:fragment>
 	<svelte:fragment slot="below" let:data>
-		<TanstackOrderQuote
-			id={data.order.id}
-			order={data.order}
-			{rpcUrls}
-			{orderbookAddress}
-			{handleQuoteDebugModal}
-		/>
+		<TanstackOrderQuote order={data} {handleQuoteDebugModal} />
 		<Tabs
 			style="underline"
 			contentClass="mt-4"
@@ -190,7 +186,7 @@ $: subgraphName = $page.url.pathname.split("/")[2]?.split("-")[0];
 			<TabItem title="Rainlang source">
 				<div class="mb-8 overflow-hidden rounded-lg border dark:border-none">
 					<CodeMirrorRainlang
-						order={data.order}
+						order={data}
 						codeMirrorTheme={$codeMirrorTheme}
 						{codeMirrorDisabled}
 						{codeMirrorStyles}
@@ -198,13 +194,13 @@ $: subgraphName = $page.url.pathname.split("/")[2]?.split("-")[0];
 				</div>
 			</TabItem>
 			<TabItem open title="Trades">
-				<OrderTradesListTable id={data.order.id} {subgraphUrl} />
+				<OrderTradesListTable order={data} {handleDebugTradeModal} {rpcUrls} />
 			</TabItem>
 			<TabItem title="Volume">
-				<OrderVaultsVolTable id={data.order.id} {subgraphUrl} />
+				<OrderVaultsVolTable order={data} />
 			</TabItem>
 			<TabItem title="APY">
-				<OrderApy id={data.order.id} {subgraphUrl} />
+				<OrderApy order={data} />
 			</TabItem>
 		</Tabs>
 	</svelte:fragment>