@rainlanguage/ui-components 0.0.1-alpha.22 → 0.0.1-alpha.221

package/dist/__fixtures__/settings.yaml

@@ -0,0 +1,125 @@
+version: 2
+networks:
+  flare:
+    rpc: https://rpc.ankr.com/flare
+    chain-id: 14
+    currency: FLR
+  base:
+    rpc: https://mainnet.base.org
+    chain-id: 8453
+    currency: ETH
+  sepolia:
+    rpc: https://1rpc.io/sepolia
+    chain-id: 11155111
+    currency: ETH
+  polygon:
+    rpc: https://rpc.ankr.com/polygon
+    chain-id: 137
+    currency: POL
+  arbitrum:
+    rpc: https://rpc.ankr.com/arbitrum
+    chain-id: 42161
+    currency: ETH
+  matchain:
+    rpc: https://rpc.ankr.com/polygon
+    chain-id: 137
+    currency: POL
+  bsc:
+    rpc: https://rpc.ankr.com/bsc
+    chain-id: 56
+    currency: BNB
+  linea:
+    rpc: https://rpc.linea.build
+    chain-id: 59144
+    currency: ETH
+  ethereum:
+    rpc: https://rpc.ankr.com/eth
+    chain-id: 1
+    currency: ETH
+subgraphs:
+  flare: https://api.goldsky.com/api/public/project_clv14x04y9kzi01saerx7bxpg/subgraphs/ob4-flare/0.8/gn
+  base: https://api.goldsky.com/api/public/project_clv14x04y9kzi01saerx7bxpg/subgraphs/ob4-base/0.9/gn
+  sepolia: https://api.goldsky.com/api/public/project_clv14x04y9kzi01saerx7bxpg/subgraphs/ob4-sepolia/0.1/gn
+  polygon: https://api.goldsky.com/api/public/project_clv14x04y9kzi01saerx7bxpg/subgraphs/ob4-polygon/0.1/gn
+  arbitrum: https://api.goldsky.com/api/public/project_clv14x04y9kzi01saerx7bxpg/subgraphs/ob4-arbitrum/0.2/gn
+  matchain: https://api.goldsky.com/api/public/project_clv14x04y9kzi01saerx7bxpg/subgraphs/ob4-polygon/0.1/gn
+  bsc: https://api.goldsky.com/api/public/project_clv14x04y9kzi01saerx7bxpg/subgraphs/ob4-bsc/2024-10-14-63f4/gn
+  linea: https://api.goldsky.com/api/public/project_clv14x04y9kzi01saerx7bxpg/subgraphs/ob4-linea/2024-10-14-12fc/gn
+  ethereum: https://api.goldsky.com/api/public/project_clv14x04y9kzi01saerx7bxpg/subgraphs/metadata-mainnet/2024-10-25-2857/gn
+metaboards:
+  flare: https://api.goldsky.com/api/public/project_clv14x04y9kzi01saerx7bxpg/subgraphs/mb-flare-0x893BBFB7/0.1/gn
+  base: https://api.goldsky.com/api/public/project_clv14x04y9kzi01saerx7bxpg/subgraphs/mb-base-0x59401C93/0.1/gn
+  sepolia: https://api.goldsky.com/api/public/project_clv14x04y9kzi01saerx7bxpg/subgraphs/mb-sepolia-0x77991674/0.1/gn
+  polygon: https://api.goldsky.com/api/public/project_clv14x04y9kzi01saerx7bxpg/subgraphs/mb-polygon/0.1/gn
+  arbitrum: https://api.goldsky.com/api/public/project_clv14x04y9kzi01saerx7bxpg/subgraphs/mb-arbitrum/0.1/gn
+  matchain: https://api.goldsky.com/api/public/project_clv14x04y9kzi01saerx7bxpg/subgraphs/mb-polygon/0.1/gn
+  bsc: https://api.goldsky.com/api/public/project_clv14x04y9kzi01saerx7bxpg/subgraphs/mb-bsc/0.1/gn
+  linea: https://api.goldsky.com/api/public/project_clv14x04y9kzi01saerx7bxpg/subgraphs/mb-linea-0xed7d6156/1.0.0/gn
+  ethereum: https://api.goldsky.com/api/public/project_clv14x04y9kzi01saerx7bxpg/subgraphs/metadata-mainnet/2024-10-25-2857/gn
+orderbooks:
+  flare:
+    address: 0xCEe8Cd002F151A536394E564b84076c41bBBcD4d
+    network: flare
+    subgraph: flare
+  base:
+    address: 0xd2938e7c9fe3597f78832ce780feb61945c377d7
+    network: base
+    subgraph: base
+  sepolia:
+    address: 0x0bB72B4C7c0d47b2CaED07c804D9243C1B8a0728
+    network: sepolia
+    subgraph: sepolia
+  polygon:
+    address: 0x7D2f700b1f6FD75734824EA4578960747bdF269A
+    network: polygon
+    subgraph: polygon
+  arbitrum:
+    address: 0x550878091b2B1506069F61ae59e3A5484Bca9166
+    network: arbitrum
+    subgraph: arbitrum
+  matchain:
+    address: 0x40312edab8fe65091354172ad79e9459f21094e2
+    network: matchain
+    subgraph: matchain
+  bsc:
+    address: 0xd2938E7c9fe3597F78832CE780Feb61945c377d7
+    network: bsc
+    subgraph: bsc
+  linea:
+    address: 0x22410e2a46261a1B1e3899a072f303022801C764
+    network: linea
+    subgraph: linea
+  ethereum:
+    address: 0x0eA6d458488d1cf51695e1D6e4744e6FB715d37C
+    network: ethereum
+    subgraph: ethereum
+deployers:
+  flare:
+    address: 0xE3989Ea7486c0F418C764e6c511e86f6E8830FAb
+    network: flare
+  base:
+    address: 0xC1A14cE2fd58A3A2f99deCb8eDd866204eE07f8D
+    network: base
+  sepolia:
+    address: 0x7692BA8446Bb8B3140A2c02df073080BeD0a7F8E
+    network: sepolia
+  polygon:
+    address: 0xE7116BC05C8afe25e5B54b813A74F916B5D42aB1
+    network: polygon
+  arbitrum:
+    address: 0x9B0D254bd858208074De3d2DaF5af11b3D2F377F
+    network: arbitrum
+  matchain:
+    address: 0x582d9e838FE6cD9F8147C66A8f56A3FBE513a6A2
+    network: matchain
+  bsc:
+    address: 0xA2f56F8F74B7d04d61f281BE6576b6155581dcBA
+    network: bsc
+  linea:
+    address: 0xA2f56F8F74B7d04d61f281BE6576b6155581dcBA
+    network: linea
+  ethereum:
+    address: 0xd19581a021f4704ad4eBfF68258e7A0a9DB1CD77
+accounts:
+  wallet1: 0xf08bCbce72f62c95Dcb7c07dCb5Ed26ACfCfBc11
+  wallet2: 0x6bc14a99ccf7f9037c98d75eec6c6d807f9d953f

package/dist/__mocks__/CodeMirrorRainlang.svelte

@@ -0,0 +1,4 @@
+<script>export let rainlangText;
+</script>
+
+<div data-testid="codemirror-rainlang">{rainlangText}</div>

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

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        rainlangText: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type CodeMirrorRainlangProps = typeof __propDef.props;
+export type CodeMirrorRainlangEvents = typeof __propDef.events;
+export type CodeMirrorRainlangSlots = typeof __propDef.slots;
+export default class CodeMirrorRainlang extends SvelteComponent<CodeMirrorRainlangProps, CodeMirrorRainlangEvents, CodeMirrorRainlangSlots> {
+}
+export {};

package/dist/__mocks__/MockComponent.svelte

@@ -1,3 +1,7 @@
 <script>import { props } from "./MockComponent";
 $: $props = $$props;
 </script>
+
+<div data-testid="mock-component" {...$$props}>
+	<slot />
+</div>

package/dist/__mocks__/MockComponent.svelte.d.ts

@@ -6,7 +6,9 @@ declare const __propDef: {
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
     exports?: undefined;
     bindings?: undefined;
 };

package/dist/__mocks__/stores.d.ts

@@ -1,33 +1,27 @@
-import type { ConfigSource } from '@rainlanguage/orderbook/js_api';
+import type { Address } 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;
-    mockSetSubscribeValue: (value: ConfigSource | undefined) => void;
-};
-export declare const mockActiveSubgraphsStore: {
-    subscribe: (this: void, run: import("svelte/store").Subscriber<Record<string, string>>, invalidate?: import("svelte/store").Invalidator<Record<string, string>> | undefined) => import("svelte/store").Unsubscriber;
-    set: (this: void, value: Record<string, string>) => void;
-    mockSetSubscribeValue: (value: Record<string, string>) => void;
-};
-export declare const mockAccountsStore: {
-    subscribe: (this: void, run: import("svelte/store").Subscriber<Record<string, string>>, invalidate?: import("svelte/store").Invalidator<Record<string, string>> | undefined) => import("svelte/store").Unsubscriber;
-};
-export declare const mockActiveAccountsItemsStore: {
-    subscribe: (this: void, run: import("svelte/store").Subscriber<Record<string, string>>, invalidate?: import("svelte/store").Invalidator<Record<string, string>> | undefined) => import("svelte/store").Unsubscriber;
-    set: (this: void, value: Record<string, string>) => void;
-    mockSetSubscribeValue: (value: Record<string, string>) => void;
-};
-export declare const mockActiveOrderStatusStore: {
-    subscribe: (this: void, run: import("svelte/store").Subscriber<boolean | undefined>, invalidate?: import("svelte/store").Invalidator<boolean | undefined> | undefined) => import("svelte/store").Unsubscriber;
-    set: (this: void, value: boolean | undefined) => void;
-    mockSetSubscribeValue: (value: boolean | undefined) => void;
+type MockDeployment = {
+    key: string;
+    name?: string;
+    description?: string;
+} | null;
+type MockPageState = {
+    data: Record<string, unknown> & {
+        deployment: MockDeployment;
+    };
+    url: URL;
+    params: Record<string, unknown>;
+    form: Record<string, unknown>;
+    status: number;
+    error: unknown;
+    route: {
+        id: string | null;
+    };
+};
+export declare const mockShowInactiveOrdersStore: {
+    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 mockOrderHashStore: {
     subscribe: (this: void, run: import("svelte/store").Subscriber<string>, invalidate?: import("svelte/store").Invalidator<string> | undefined) => import("svelte/store").Unsubscriber;
@@ -39,6 +33,11 @@ export declare const mockHideZeroBalanceVaultsStore: {
     set: (this: void, value: boolean) => void;
     mockSetSubscribeValue: (value: boolean) => void;
 };
+export declare const mockHideInactiveOrdersVaultsStore: {
+    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 mockActiveNetworkRefStore: {
     subscribe: (this: void, run: import("svelte/store").Subscriber<string>, invalidate?: import("svelte/store").Invalidator<string> | undefined) => import("svelte/store").Unsubscriber;
     set: (this: void, value: string) => void;
@@ -59,12 +58,6 @@ export declare const mockSubgraphUrlStore: {
     set: (this: void, value: string) => void;
     mockSetSubscribeValue: (value: string) => void;
 };
-export declare const mockSignerAddressStore: {
-    subscribe: (this: void, run: import("svelte/store").Subscriber<string>, invalidate?: import("svelte/store").Invalidator<string> | undefined) => import("svelte/store").Unsubscriber;
-    set: (this: void, value: string) => void;
-    mockSetSubscribeValue: (value: string) => void;
-    update: (this: void, updater: import("svelte/store").Updater<string>) => void;
-};
 export declare const mockChainIdStore: {
     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;
@@ -82,13 +75,30 @@ export declare const mockWagmiConfigStore: {
     update: (this: void, updater: import("svelte/store").Updater<Config>) => void;
     mockSetSubscribeValue: (value: Config) => void;
 };
-export declare const mockShowMyItemsOnlyStore: {
-    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 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<Page<Record<string, string>, string | null>>, invalidate?: import("svelte/store").Invalidator<Page<Record<string, string>, string | null>> | undefined) => import("svelte/store").Unsubscriber;
-    set: (this: void, value: Page<Record<string, string>, string | null>) => void;
-    mockSetSubscribeValue: (value: Page) => void;
-};
+    subscribe: (this: void, run: import("svelte/store").Subscriber<MockPageState>, invalidate?: import("svelte/store").Invalidator<MockPageState> | undefined) => import("svelte/store").Unsubscriber;
+    set: (this: void, value: MockPageState) => void;
+    mockSetSubscribeValue: (newValue: Partial<MockPageState>) => void;
+    reset: () => void;
+};
+export declare const mockActiveTokensStore: {
+    subscribe: (this: void, run: import("svelte/store").Subscriber<string[]>, invalidate?: import("svelte/store").Invalidator<string[]> | undefined) => import("svelte/store").Unsubscriber;
+    set: (this: void, value: string[]) => void;
+    mockSetSubscribeValue: (value: string[]) => void;
+};
+export declare const mockActiveOrderbookAddressesStore: {
+    subscribe: (this: void, run: import("svelte/store").Subscriber<string[]>, invalidate?: import("svelte/store").Invalidator<string[]> | undefined) => import("svelte/store").Unsubscriber;
+    set: (this: void, value: string[]) => void;
+    mockSetSubscribeValue: (value: string[]) => void;
+};
+export declare const mockOwnerFilterStore: {
+    subscribe: (this: void, run: import("svelte/store").Subscriber<`0x${string}`>, invalidate?: import("svelte/store").Invalidator<`0x${string}`> | undefined) => import("svelte/store").Unsubscriber;
+    set: (this: void, value: `0x${string}`) => void;
+    mockSetSubscribeValue: (value: Address) => void;
+};
+export {};

package/dist/__mocks__/stores.js

@@ -1,52 +1,49 @@
 import { writable } from 'svelte/store';
-import settingsFixture from '../__fixtures__/settings-12-11-24.json';
 import {} from '@wagmi/core';
 import { mockWeb3Config } from './mockWeb3Config';
-const mockSettingsWritable = writable(settingsFixture);
-const mockActiveSubgraphsWritable = writable({});
-const mockAccountsWritable = writable({});
-const mockActiveAccountsItemsWritable = writable({});
-const mockActiveOrderStatusWritable = writable(undefined);
+if (import.meta.vitest) {
+    vi.mock(import('@rainlanguage/orderbook'), async (importOriginal) => {
+        const actual = await importOriginal();
+        return {
+            ...actual
+        };
+    });
+}
+const initialPageState = {
+    data: {
+        dotrain: 'some dotrain content',
+        deployment: { key: 'deploy-key', name: '', description: '' },
+        orderDetail: {}
+    },
+    url: new URL('http://localhost:3000/deploy'),
+    params: {},
+    form: {},
+    status: 200,
+    error: null,
+    route: {
+        id: null
+    }
+};
+const mockPageWritable = writable(initialPageState);
+const mockShowInactiveOrdersWritable = writable(true);
 const mockOrderHashWritable = writable('');
 const mockHideZeroBalanceVaultsWritable = writable(false);
+const mockHideInactiveOrdersVaultsWritable = writable(false);
 const mockActiveNetworkRefWritable = writable('');
 const mockActiveOrderbookRefWritable = writable('');
 const mockActiveAccountsWritable = writable({});
 const mockSubgraphUrlWritable = writable('');
-const mockWalletAddressMatchesOrBlankWritable = writable(() => false);
-const mockSignerAddressWritable = writable('');
 const mockChainIdWritable = writable(0);
-const mockConnectedWritable = writable(false);
+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,
-    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
-};
-export const mockActiveAccountsItemsStore = {
-    subscribe: mockActiveAccountsItemsWritable.subscribe,
-    set: mockActiveAccountsItemsWritable.set,
-    mockSetSubscribeValue: (value) => mockActiveAccountsItemsWritable.set(value)
-};
-export const mockActiveOrderStatusStore = {
-    subscribe: mockActiveOrderStatusWritable.subscribe,
-    set: mockActiveOrderStatusWritable.set,
-    mockSetSubscribeValue: (value) => mockActiveOrderStatusWritable.set(value)
+const mockSelectedChainIdsWritable = writable([]);
+const mockActiveTokensWritable = writable([]);
+const mockActiveOrderbookAddressesWritable = writable([]);
+const mockOwnerFilterWritable = writable('');
+export const mockShowInactiveOrdersStore = {
+    subscribe: mockShowInactiveOrdersWritable.subscribe,
+    set: mockShowInactiveOrdersWritable.set,
+    mockSetSubscribeValue: (value) => mockShowInactiveOrdersWritable.set(value)
 };
 export const mockOrderHashStore = {
     subscribe: mockOrderHashWritable.subscribe,
@@ -58,6 +55,11 @@ export const mockHideZeroBalanceVaultsStore = {
     set: mockHideZeroBalanceVaultsWritable.set,
     mockSetSubscribeValue: (value) => mockHideZeroBalanceVaultsWritable.set(value)
 };
+export const mockHideInactiveOrdersVaultsStore = {
+    subscribe: mockHideInactiveOrdersVaultsWritable.subscribe,
+    set: mockHideInactiveOrdersVaultsWritable.set,
+    mockSetSubscribeValue: (value) => mockHideInactiveOrdersVaultsWritable.set(value)
+};
 export const mockActiveNetworkRefStore = {
     subscribe: mockActiveNetworkRefWritable.subscribe,
     set: mockActiveNetworkRefWritable.set,
@@ -78,12 +80,6 @@ export const mockSubgraphUrlStore = {
     set: mockSubgraphUrlWritable.set,
     mockSetSubscribeValue: (value) => mockSubgraphUrlWritable.set(value)
 };
-export const mockSignerAddressStore = {
-    subscribe: mockSignerAddressWritable.subscribe,
-    set: mockSignerAddressWritable.set,
-    mockSetSubscribeValue: (value) => mockSignerAddressWritable.set(value),
-    update: mockSignerAddressWritable.update
-};
 export const mockChainIdStore = {
     subscribe: mockChainIdWritable.subscribe,
     set: mockChainIdWritable.set,
@@ -101,13 +97,34 @@ export const mockWagmiConfigStore = {
     update: mockWagmiConfigWritable.update,
     mockSetSubscribeValue: (value) => mockWagmiConfigWritable.set(value)
 };
-export const mockShowMyItemsOnlyStore = {
-    subscribe: mockShowMyItemsOnlyWritable.subscribe,
-    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,
-    mockSetSubscribeValue: (value) => mockPageWritable.set(value)
+    mockSetSubscribeValue: (newValue) => {
+        mockPageWritable.update((currentValue) => ({
+            ...currentValue,
+            ...newValue
+        }));
+    },
+    reset: () => mockPageWritable.set(initialPageState)
+};
+export const mockActiveTokensStore = {
+    subscribe: mockActiveTokensWritable.subscribe,
+    set: mockActiveTokensWritable.set,
+    mockSetSubscribeValue: (value) => mockActiveTokensWritable.set(value)
+};
+export const mockActiveOrderbookAddressesStore = {
+    subscribe: mockActiveOrderbookAddressesWritable.subscribe,
+    set: mockActiveOrderbookAddressesWritable.set,
+    mockSetSubscribeValue: (value) => mockActiveOrderbookAddressesWritable.set(value)
+};
+export const mockOwnerFilterStore = {
+    subscribe: mockOwnerFilterWritable.subscribe,
+    set: mockOwnerFilterWritable.set,
+    mockSetSubscribeValue: (value) => mockOwnerFilterWritable.set(value)
 };

package/dist/components/ButtonLoading.svelte

@@ -5,7 +5,7 @@ export let disabled = false;
 
 <Button disabled={loading || disabled} {...$$props} on:click>
 	{#if loading}
-		<Spinner class="mr-2 h-4 w-4" color="white" />
+		<Spinner data-testid="spinner" class="mr-2 h-4 w-4" color="white" />
 	{/if}
 	<slot />
 </Button>

package/dist/components/ButtonVaultLink.svelte

@@ -1,8 +1,8 @@
-<script>import { bigintStringToHex } from "../utils/hex";
-import { Tooltip } from "flowbite-svelte";
-import { formatUnits } from "viem";
+<script>import { toHex } from "viem";
+import Tooltip from "./Tooltip.svelte";
 export let tokenVault;
-export let subgraphName;
+export let chainId;
+export let orderbookAddress;
 </script>
 
 <div
@@ -10,17 +10,17 @@ export let subgraphName;
 	data-testid="vault-link"
 >
 	<div class="flex flex-col items-start gap-y-2">
-		<Tooltip triggeredBy="#token-info" class="z-[99] w-96">
-			ID: <span class="font-mono">{bigintStringToHex(tokenVault.vaultId)}</span>
+		<Tooltip triggeredBy={`#token-info-${tokenVault.vaultId}`}>
+			ID: <span class="font-mono">{toHex(tokenVault.vaultId)}</span>
 		</Tooltip>
-		<a href={`/vaults/${subgraphName}-${tokenVault.id}`} id="token-info">
+		<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: {tokenVault.formattedBalance}
 		</span>
 	</div>
 	<div>

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

@@ -1,9 +1,10 @@
 import { SvelteComponent } from "svelte";
-import type { SgVault } from '@rainlanguage/orderbook/js_api';
+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/CheckboxInactiveOrdersVault.svelte

@@ -0,0 +1,20 @@
+<script>import { Checkbox, Label } from "flowbite-svelte";
+export let hideInactiveOrdersVaults;
+function handleHideInactiveOrdersVaultsChange() {
+  $hideInactiveOrdersVaults = !$hideInactiveOrdersVaults;
+}
+</script>
+
+<div data-testid="inactive-orders-vault-checkbox" class="flex items-center gap-x-2">
+	<Label
+		for="hide-inactive-orders-vaults"
+		class="cursor-pointer whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-300"
+	>
+		Hide vaults without active orders
+	</Label>
+	<Checkbox
+		id="hide-inactive-orders-vaults"
+		checked={$hideInactiveOrdersVaults}
+		on:change={handleHideInactiveOrdersVaultsChange}
+	/>
+</div>

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

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { AppStoresInterface } from '../types/appStores';
+declare const __propDef: {
+    props: {
+        hideInactiveOrdersVaults: AppStoresInterface["hideInactiveOrdersVaults"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type CheckboxInactiveOrdersVaultProps = typeof __propDef.props;
+export type CheckboxInactiveOrdersVaultEvents = typeof __propDef.events;
+export type CheckboxInactiveOrdersVaultSlots = typeof __propDef.slots;
+export default class CheckboxInactiveOrdersVault extends SvelteComponent<CheckboxInactiveOrdersVaultProps, CheckboxInactiveOrdersVaultEvents, CheckboxInactiveOrdersVaultSlots> {
+}
+export {};

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

@@ -1,8 +1,8 @@
 import { SvelteComponent } from "svelte";
-import type { Writable } from 'svelte/store';
+import type { AppStoresInterface } from '../types/appStores';
 declare const __propDef: {
     props: {
-        hideZeroBalanceVaults: Writable<boolean>;
+        hideZeroBalanceVaults: AppStoresInterface["hideZeroBalanceVaults"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/CodeMirrorDotrain.svelte

@@ -6,6 +6,7 @@ export let disabled = false;
 export let styles = {};
 export let rainlangExtension;
 export let codeMirrorTheme;
+export let onTextChange;
 </script>
 
 <div data-testid="codemirror-dotrain">
@@ -22,6 +23,9 @@ export let codeMirrorTheme;
 			},
 			...styles
 		}}
+		on:change={(e) => {
+			onTextChange(e.detail);
+		}}
 		on:ready={(e) => {
 			openLintPanel(e.detail);
 		}}

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

@@ -7,6 +7,7 @@ declare const __propDef: {
         styles?: {};
         rainlangExtension: RawRainlangExtension;
         codeMirrorTheme: any;
+        onTextChange: (text: string) => void;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/CodeMirrorRainlang.svelte

@@ -1,17 +1,15 @@
-<script>import { extendOrder } from "@rainlanguage/orderbook/js_api";
-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 = {};
-$: extendedOrder = order ? extendOrder(order) : 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}
@@ -24,11 +22,4 @@ $: extendedOrder = order ? extendOrder(order) : void 0;
 			...codeMirrorStyles
 		}}
 	/>
-{: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/js_api';
+import type { RaindexOrder } from '@rainlanguage/orderbook';
 declare const __propDef: {
     props: {
-        order?: SgOrder | undefined;
+        order?: RaindexOrder | undefined;
         rainlangText?: string | undefined;
         codeMirrorTheme: any;
         codeMirrorDisabled?: boolean;