@rainlanguage/ui-components 0.0.1-alpha.8 → 0.0.1-alpha.80

package/dist/__fixtures__/orderDetail.d.ts

@@ -1,4 +1,4 @@
-import type { OrderDetailExtended } from '@rainlanguage/orderbook/js_api';
+import type { OrderDetailExtended } from '@rainlanguage/orderbook';
 export declare const mockOrderDetailsExtended: OrderDetailExtended;
 export declare const mockOrder: {
     id: string;

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__/mockTransactionStore.d.ts

@@ -1,22 +1,4 @@
-import { TransactionStatus, TransactionErrorMessage } from '../stores/transactionStore';
-type MockTransactionStoreState = {
-    status: TransactionStatus;
-    error: string;
-    hash: string;
-    data: null;
-    functionName: string;
-    message: string;
+import { type TransactionState, type TransactionStore } from '../stores/transactionStore';
+export declare const mockTransactionStore: Partial<TransactionStore> & {
+    mockSetSubscribeValue: (value: Partial<TransactionState>) => void;
 };
-export declare const mockTransactionStore: {
-    subscribe: (this: void, run: import("svelte/store").Subscriber<MockTransactionStoreState>, invalidate?: import("svelte/store").Invalidator<MockTransactionStoreState> | undefined) => import("svelte/store").Unsubscriber;
-    set: (this: void, value: MockTransactionStoreState) => void;
-    reset: () => void;
-    handleDeploymentTransaction: () => Promise<void>;
-    checkingWalletAllowance: (message?: string) => void;
-    awaitWalletConfirmation: (message?: string) => void;
-    awaitApprovalTx: (hash: string) => void;
-    transactionSuccess: (hash: string, message?: string) => void;
-    transactionError: (error: TransactionErrorMessage, hash?: string) => void;
-    mockSetSubscribeValue: (value: Partial<MockTransactionStoreState>) => void;
-};
-export {};

package/dist/__mocks__/mockTransactionStore.js

@@ -1,17 +1,8 @@
 import { writable } from 'svelte/store';
-import { TransactionStatus, TransactionErrorMessage } from '../stores/transactionStore';
-const initialState = {
-    status: TransactionStatus.IDLE,
-    error: '',
-    hash: '',
-    data: null,
-    functionName: '',
-    message: ''
-};
+import { TransactionStatus, initialState, TransactionErrorMessage } from '../stores/transactionStore';
 const mockTransactionWritable = writable(initialState);
 export const mockTransactionStore = {
     subscribe: mockTransactionWritable.subscribe,
-    set: mockTransactionWritable.set,
     reset: () => mockTransactionWritable.set(initialState),
     handleDeploymentTransaction: async () => {
         mockTransactionWritable.update((state) => ({
@@ -20,6 +11,25 @@ export const mockTransactionStore = {
             message: 'Strategy deployed successfully!',
             hash: '0x123'
         }));
+        return Promise.resolve();
+    },
+    handleDepositOrWithdrawTransaction: async () => {
+        mockTransactionWritable.update((state) => ({
+            ...state,
+            status: TransactionStatus.SUCCESS,
+            message: 'Transaction successful!',
+            hash: '0x456'
+        }));
+        return Promise.resolve();
+    },
+    handleRemoveOrderTransaction: async () => {
+        mockTransactionWritable.update((state) => ({
+            ...state,
+            status: TransactionStatus.SUCCESS,
+            message: 'Order removed successfully',
+            hash: '0x789'
+        }));
+        return Promise.resolve();
     },
     checkingWalletAllowance: (message = '') => mockTransactionWritable.update((state) => ({
         ...state,
@@ -35,13 +45,15 @@ export const mockTransactionStore = {
         ...state,
         hash,
         status: TransactionStatus.PENDING_APPROVAL,
-        message: ''
+        message: 'Approving token spend...'
     })),
-    transactionSuccess: (hash, message = '') => mockTransactionWritable.update((state) => ({
+    transactionSuccess: (hash, message = '', newOrderHash = '', network = '') => mockTransactionWritable.update((state) => ({
         ...state,
         status: TransactionStatus.SUCCESS,
         hash,
-        message
+        message,
+        newOrderHash,
+        network
     })),
     transactionError: (error, hash = '') => mockTransactionWritable.update((state) => ({
         ...state,
@@ -49,6 +61,7 @@ export const mockTransactionStore = {
         error,
         hash
     })),
+    // Extra function for testing purposes
     mockSetSubscribeValue: (value) => mockTransactionWritable.update((state) => ({
         ...state,
         ...value

package/dist/__mocks__/settings.d.ts

@@ -1,3 +1,7 @@
-import type { ConfigSource } from '@rainlanguage/orderbook/js_api';
+import type { ConfigSource } from '@rainlanguage/orderbook';
 export declare const mockConfigSource: ConfigSource;
-export declare const mockSettingsStore: import("svelte/store").Writable<ConfigSource>;
+export declare const mockSettingsStore: {
+    subscribe: (this: void, run: import("svelte/store").Subscriber<ConfigSource>, invalidate?: import("svelte/store").Invalidator<ConfigSource> | undefined) => import("svelte/store").Unsubscriber;
+    set: (this: void, value: ConfigSource) => void;
+    mockSetSubscribeValue: (value: ConfigSource) => void;
+};

package/dist/__mocks__/settings.js

@@ -34,4 +34,9 @@ export const mockConfigSource = {
         name_two: 'address_two'
     }
 };
-export const mockSettingsStore = writable(mockConfigSource);
+const mockSettingsStoreWritable = writable(mockConfigSource);
+export const mockSettingsStore = {
+    subscribe: mockSettingsStoreWritable.subscribe,
+    set: mockSettingsStoreWritable.set,
+    mockSetSubscribeValue: (value) => mockSettingsStoreWritable.set(value)
+};

package/dist/__mocks__/stores.d.ts

@@ -1,10 +1,24 @@
-import type { ConfigSource } from '@rainlanguage/orderbook/js_api';
+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;
+declare const initialPageState: {
+    data: {
+        stores: {
+            settings: {};
+        };
+        dotrain: string;
+        deployment: {
+            key: string;
+        };
+        strategyDetail: {};
+    };
+    url: URL;
+    params: {};
+    form: {};
+    status: number;
+    error: null;
+    route: {
+        id: null;
+    };
 };
 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;
@@ -25,9 +39,9 @@ export declare const mockActiveAccountsItemsStore: {
     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;
+    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;
@@ -59,12 +73,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;
@@ -88,7 +96,66 @@ export declare const mockShowMyItemsOnlyStore: {
     mockSetSubscribeValue: (value: boolean) => 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<{
+        data: {
+            stores: {
+                settings: {};
+            };
+            dotrain: string;
+            deployment: {
+                key: string;
+            };
+            strategyDetail: {};
+        };
+        url: URL;
+        params: {};
+        form: {};
+        status: number;
+        error: null;
+        route: {
+            id: null;
+        };
+    }>, invalidate?: import("svelte/store").Invalidator<{
+        data: {
+            stores: {
+                settings: {};
+            };
+            dotrain: string;
+            deployment: {
+                key: string;
+            };
+            strategyDetail: {};
+        };
+        url: URL;
+        params: {};
+        form: {};
+        status: number;
+        error: null;
+        route: {
+            id: null;
+        };
+    }> | undefined) => import("svelte/store").Unsubscriber;
+    set: (this: void, value: {
+        data: {
+            stores: {
+                settings: {};
+            };
+            dotrain: string;
+            deployment: {
+                key: string;
+            };
+            strategyDetail: {};
+        };
+        url: URL;
+        params: {};
+        form: {};
+        status: number;
+        error: null;
+        route: {
+            id: null;
+        };
+    }) => void;
+    mockSetSubscribeValue: (newValue: Partial<typeof initialPageState>) => void;
+    reset: () => void;
+};
+export {};

package/dist/__mocks__/stores.js

@@ -2,29 +2,38 @@ import { writable } from 'svelte/store';
 import settingsFixture from '../__fixtures__/settings-12-11-24.json';
 import {} from '@wagmi/core';
 import { mockWeb3Config } from './mockWeb3Config';
+const initialPageState = {
+    data: {
+        stores: { settings: {} },
+        dotrain: 'some dotrain content',
+        deployment: { key: 'deploy-key' },
+        strategyDetail: {}
+    },
+    url: new URL('http://localhost:3000/deploy'),
+    params: {},
+    form: {},
+    status: 200,
+    error: null,
+    route: {
+        id: null
+    }
+};
+const mockPageWritable = writable(initialPageState);
 const mockSettingsWritable = writable(settingsFixture);
 const mockActiveSubgraphsWritable = writable({});
 const mockAccountsWritable = writable({});
 const mockActiveAccountsItemsWritable = writable({});
-const mockActiveOrderStatusWritable = writable(undefined);
+const mockActiveOrderStatusWritable = writable(true);
 const mockOrderHashWritable = writable('');
 const mockHideZeroBalanceVaultsWritable = 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,
@@ -78,12 +87,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,
@@ -109,5 +112,11 @@ export const mockShowMyItemsOnlyStore = {
 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)
 };

package/dist/components/ButtonVaultLink.svelte

@@ -1,5 +1,5 @@
 <script>import { bigintStringToHex } from "../utils/hex";
-import { Tooltip } from "flowbite-svelte";
+import Tooltip from "./Tooltip.svelte";
 import { formatUnits } from "viem";
 export let tokenVault;
 export let subgraphName;
@@ -10,10 +10,10 @@ 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">
+		<Tooltip triggeredBy={`#token-info-${tokenVault.vaultId}`}>
 			ID: <span class="font-mono">{bigintStringToHex(tokenVault.vaultId)}</span>
 		</Tooltip>
-		<a href={`/vaults/${subgraphName}-${tokenVault.id}`} id="token-info">
+		<a href={`/vaults/${subgraphName}-${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">

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { SgVault } from '@rainlanguage/orderbook/js_api';
+import type { SgVault } from '@rainlanguage/orderbook';
 declare const __propDef: {
     props: {
         tokenVault: SgVault;

package/dist/components/CheckboxMyItemsOnly.svelte

@@ -1,7 +1,8 @@
 <script>import { Checkbox, Label } from "flowbite-svelte";
+import { useAccount } from "../providers/wallet/useAccount";
 export let showMyItemsOnly;
 export let context;
-export let signerAddress;
+const { account } = useAccount();
 function handleShowMyItemsChange() {
   $showMyItemsOnly = !$showMyItemsOnly;
 }
@@ -18,6 +19,6 @@ function handleShowMyItemsChange() {
 		id="show-my-items"
 		checked={$showMyItemsOnly}
 		on:change={handleShowMyItemsChange}
-		disabled={!$signerAddress}
+		disabled={!$account}
 	/>
 </div>

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

@@ -4,7 +4,6 @@ declare const __propDef: {
     props: {
         showMyItemsOnly: Writable<boolean>;
         context: "orders" | "vaults";
-        signerAddress: Writable<string | null> | undefined;
     };
     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,4 +1,4 @@
-<script>import { extendOrder } from "@rainlanguage/orderbook/js_api";
+<script>import { extendOrder } from "@rainlanguage/orderbook";
 import CodeMirror from "svelte-codemirror-editor";
 import { RainlangLR } from "codemirror-rainlang";
 export let order = void 0;
@@ -9,7 +9,7 @@ export let codeMirrorStyles = {};
 $: extendedOrder = order ? extendOrder(order) : void 0;
 </script>
 
-{#if extendedOrder?.rainlang}
+{#if rainlangText || extendedOrder?.rainlang}
 	<CodeMirror
 		value={rainlangText || extendedOrder.rainlang}
 		extensions={[RainlangLR]}

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { SgOrder } from '@rainlanguage/orderbook/js_api';
+import type { SgOrder } from '@rainlanguage/orderbook';
 declare const __propDef: {
     props: {
         order?: SgOrder | undefined;

package/dist/components/Hash.svelte

@@ -7,7 +7,7 @@
 })(HashType || {});
 </script>
 
-<script>import { Tooltip } from "flowbite-svelte";
+<script>import Tooltip from "./Tooltip.svelte";
 import {
   WalletOutline,
   FingerprintOutline,
@@ -60,7 +60,7 @@ function copy(e) {
 {#if showCopiedMessage}
 	<div
 		out:fade
-		class="fixed rounded bg-green-500 px-2 py-1 text-xs text-white shadow"
+		class="fixed rounded bg-green-500 px-2 py-1 text-xs text-white"
 		style="top: {cursorY + 10}px; left: {cursorX + 10}px"
 	>
 		Copied to clipboard
@@ -68,7 +68,7 @@ function copy(e) {
 {/if}
 
 {#if shorten}
-	<Tooltip triggeredBy={`#${id}`} class="z-20 whitespace-normal">
+	<Tooltip triggeredBy={`#${id}`}>
 		<div class="flex items-center justify-start space-x-2">
 			{#if type === HashType.Wallet}
 				<WalletOutline size="sm" />

package/dist/components/License.svelte

@@ -2,19 +2,20 @@
 	import { Heading, Text, BlockQuote } from '@rainlanguage/ui-components';
 	import Markdown from 'svelte-markdown';
 	import { onMount } from 'svelte';
+	import { LICENSE_URL } from '../consts';
 
 	let source = '';
 
 	onMount(async () => {
 		try {
-			const response = await fetch(
-				'https://raw.githubusercontent.com/rainlanguage/decentralicense/refs/heads/master/README.md'
-			);
+			const response = await fetch(LICENSE_URL);
 			if (response.ok) {
 				source = await response.text();
+			} else {
+				source = `Failed to fetch license: HTTP ${response.status}`;
 			}
 		} catch {
-			source = '';
+			source = 'Failed to fetch license.';
 		}
 	});
 </script>

package/dist/components/ListViewOrderbookFilters.svelte

@@ -1,11 +1,14 @@
-<script generics="T">import { isEmpty } from "lodash";
-import { Alert, Tooltip } from "flowbite-svelte";
+<script generics="T">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 DropdownOrderStatus from "./dropdown/DropdownOrderStatus.svelte";
+import CheckboxActiveOrders from "./checkbox/CheckboxActiveOrders.svelte";
 import DropdownOrderListAccounts from "./dropdown/DropdownOrderListAccounts.svelte";
 import InputOrderHash from "./input/InputOrderHash.svelte";
 import CheckboxZeroBalanceVault from "./CheckboxZeroBalanceVault.svelte";
 import CheckboxMyItemsOnly from "./CheckboxMyItemsOnly.svelte";
+import { useAccount } from "../providers/wallet/useAccount";
 export let settings;
 export let accounts;
 export let hideZeroBalanceVaults;
@@ -14,9 +17,9 @@ export let showMyItemsOnly;
 export let activeSubgraphs;
 export let activeOrderStatus;
 export let orderHash;
-export let isVaultsPage;
-export let isOrdersPage;
-export let signerAddress;
+$: isVaultsPage = $page.url.pathname === "/vaults";
+$: isOrdersPage = $page.url.pathname === "/orders";
+const { account } = useAccount();
 </script>
 
 <div
@@ -30,12 +33,8 @@ export let signerAddress;
 	{:else}
 		{#if $accounts && !Object.values($accounts).length}
 			<div class="mt-4 w-full lg:w-auto" data-testid="my-items-only">
-				<CheckboxMyItemsOnly
-					context={isVaultsPage ? 'vaults' : 'orders'}
-					{showMyItemsOnly}
-					{signerAddress}
-				/>
-				{#if !$signerAddress}
+				<CheckboxMyItemsOnly context={isVaultsPage ? 'vaults' : 'orders'} {showMyItemsOnly} />
+				{#if !$account}
 					<Tooltip>Connect a wallet to filter by {isVaultsPage ? 'vault' : 'order'} owner</Tooltip>
 				{/if}
 			</div>
@@ -48,7 +47,9 @@ export let signerAddress;
 
 		{#if isOrdersPage}
 			<InputOrderHash {orderHash} />
-			<DropdownOrderStatus {activeOrderStatus} />
+			<div class="mt-4">
+				<CheckboxActiveOrders {activeOrderStatus} />
+			</div>
 		{/if}
 		{#if $accounts && Object.values($accounts).length > 0}
 			<DropdownOrderListAccounts {accounts} {activeAccountsItems} />

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

@@ -1,6 +1,6 @@
 import { SvelteComponent } from "svelte";
 import type { Readable, Writable } from 'svelte/store';
-import type { ConfigSource } from '@rainlanguage/orderbook/js_api';
+import type { ConfigSource } from '@rainlanguage/orderbook';
 declare class __sveltets_Render<T> {
     props(): {
         settings: Writable<ConfigSource | undefined>;
@@ -9,11 +9,8 @@ declare class __sveltets_Render<T> {
         activeAccountsItems: Writable<Record<string, string>> | undefined;
         showMyItemsOnly: Writable<boolean>;
         activeSubgraphs: Writable<Record<string, string>>;
-        activeOrderStatus: Writable<boolean | undefined>;
+        activeOrderStatus: Writable<boolean>;
         orderHash: Writable<string>;
-        isVaultsPage: boolean;
-        isOrdersPage: boolean;
-        signerAddress: Writable<string | null> | undefined;
     };
     events(): {} & {
         [evt: string]: CustomEvent<any>;

package/dist/components/OrderOrVaultHash.svelte

@@ -1,22 +1,25 @@
 <script>import { Button } from "flowbite-svelte";
 import Hash, { HashType } from "./Hash.svelte";
+import {
+  constructHashLink,
+  isOrderOrVaultActive,
+  extractHash
+} from "../utils/constructHashLink";
 export let orderOrVault;
 export let type;
 export let network;
 export let updateActiveNetworkAndOrderbook;
-let hash;
-$: isOrder = "orderHash" in (orderOrVault || {});
-$: slug = isOrder ? orderOrVault.orderHash : orderOrVault?.id;
-$: hash = isOrder ? orderOrVault.orderHash : orderOrVault?.id || "";
-$: isActive = isOrder ? orderOrVault.active : false;
+$: hash = extractHash(orderOrVault);
+$: isActive = isOrderOrVaultActive(orderOrVault);
+$: linkPath = constructHashLink(orderOrVault, type, network);
 </script>
 
-<a href={`/${type}/${network}-${slug}`}>
+<a data-testid="order-or-vault-hash" href={linkPath}>
 	<Button
 		class="mr-1 mt-1 px-2 py-1 text-sm"
 		color={isActive ? 'green' : 'yellow'}
 		data-testid="vault-order-input"
-		data-id={slug}
+		data-id={hash}
 		on:click={() => {
 			updateActiveNetworkAndOrderbook(network);
 		}}><Hash type={HashType.Identifier} value={hash} copyOnClick={false} /></Button

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { SgOrderAsIO, SgOrder, SgVault } from '@rainlanguage/orderbook/js_api';
+import type { SgOrderAsIO, SgOrder, SgVault } from '@rainlanguage/orderbook';
 declare const __propDef: {
     props: {
         orderOrVault: SgOrder | SgVault | SgOrderAsIO;