@rainlanguage/ui-components 0.0.1-alpha.10

package/dist/components/tables/OrderVaultsVolTable.svelte

@@ -0,0 +1,67 @@
+<script>import { createInfiniteQuery } from "@tanstack/svelte-query";
+import TanstackAppTable from "../TanstackAppTable.svelte";
+import { QKEY_VAULTS_VOL_LIST } from "../../queries/keys";
+import { getOrderVaultsVolume } from "@rainlanguage/orderbook/js_api";
+import { TableBodyCell, TableHeadCell } from "flowbite-svelte";
+import Hash, { HashType } from "../Hash.svelte";
+import { formatUnits } from "viem";
+import TableTimeFilters from "../charts/TableTimeFilters.svelte";
+import { bigintStringToHex } from "../../utils/hex";
+export let id;
+export let subgraphUrl;
+let startTimestamp;
+let endTimestamp;
+$: queryStartTime = startTimestamp ? BigInt(startTimestamp) : void 0;
+$: queryEndTime = endTimestamp ? BigInt(endTimestamp) : void 0;
+$: vaultsVol = createInfiniteQuery({
+  queryKey: [id, QKEY_VAULTS_VOL_LIST + id],
+  queryFn: () => getOrderVaultsVolume(subgraphUrl || "", id, queryStartTime, queryEndTime),
+  initialPageParam: 0,
+  getNextPageParam: () => void 0,
+  enabled: !!subgraphUrl
+});
+</script>
+
+<TanstackAppTable
+	query={vaultsVol}
+	emptyMessage="No trades found"
+	rowHoverable={false}
+	queryKey={id}
+>
+	<svelte:fragment slot="timeFilter">
+		<TableTimeFilters bind:startTimestamp bind:endTimestamp />
+	</svelte:fragment>
+	<svelte:fragment slot="head">
+		<TableHeadCell padding="p-4">Vault</TableHeadCell>
+		<TableHeadCell padding="p-0">Token</TableHeadCell>
+		<TableHeadCell padding="p-0">In Volume</TableHeadCell>
+		<TableHeadCell padding="p-0">Out Volume</TableHeadCell>
+		<TableHeadCell padding="p-0">Net Volume</TableHeadCell>
+		<TableHeadCell padding="p-0">Total Volume</TableHeadCell>
+	</svelte:fragment>
+
+	<svelte:fragment slot="bodyRow" let:item>
+		<TableBodyCell tdClass="px-4 py-2">
+			<Hash type={HashType.Identifier} shorten value={bigintStringToHex(item.id)} />
+		</TableBodyCell>
+		<TableBodyCell tdClass="break-all py-2 min-w-32">
+			<div class="flex gap-x-3">
+				<Hash type={HashType.Address} shorten value={item.token.address} />
+				{item.token.symbol}
+			</div>
+		</TableBodyCell>
+		<TableBodyCell tdClass="break-all py-2 min-w-32" data-testid="total-in">
+			{formatUnits(BigInt(item.volDetails.totalIn), Number(item.token.decimals ?? 0))}
+		</TableBodyCell>
+		<TableBodyCell tdClass="break-all py-2" data-testid="total-out">
+			{formatUnits(BigInt(item.volDetails.totalOut), Number(item.token.decimals ?? 0))}
+		</TableBodyCell>
+		<TableBodyCell tdClass="break-all py-2" data-testid="net-vol">
+			{(BigInt(item.volDetails.totalIn) >= BigInt(item.volDetails.totalOut) ? '' : '-') +
+				formatUnits(BigInt(item.volDetails.netVol), Number(item.token.decimals ?? 0))}
+		</TableBodyCell>
+		<TableBodyCell tdClass="break-all py-2" data-testid="total-vol">
+			{formatUnits(BigInt(item.volDetails.totalVol), Number(item.token.decimals ?? 0))}
+		</TableBodyCell>
+	</svelte:fragment>
+</TanstackAppTable>

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

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        id: string;
+        subgraphUrl: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type OrderVaultsVolTableProps = typeof __propDef.props;
+export type OrderVaultsVolTableEvents = typeof __propDef.events;
+export type OrderVaultsVolTableSlots = typeof __propDef.slots;
+export default class OrderVaultsVolTable extends SvelteComponent<OrderVaultsVolTableProps, OrderVaultsVolTableEvents, OrderVaultsVolTableSlots> {
+}
+export {};

package/dist/components/tables/OrdersListTable.svelte

@@ -0,0 +1,181 @@
+<script generics="T">import { goto } from "$app/navigation";
+import { DotsVerticalOutline } from "flowbite-svelte-icons";
+import {} from "@rainlanguage/orderbook/js_api";
+import { createInfiniteQuery } from "@tanstack/svelte-query";
+import { getOrders } from "@rainlanguage/orderbook/js_api";
+import TanstackAppTable from "../TanstackAppTable.svelte";
+import { formatTimestampSecondsAsLocal } from "../../utils/time";
+import ListViewOrderbookFilters from "../ListViewOrderbookFilters.svelte";
+import Hash, { HashType } from "../Hash.svelte";
+import { DEFAULT_PAGE_SIZE, DEFAULT_REFRESH_INTERVAL } from "../../queries/constants";
+import { QKEY_ORDERS } from "../../queries/keys";
+import {
+  Badge,
+  Button,
+  Dropdown,
+  DropdownItem,
+  TableBodyCell,
+  TableHeadCell
+} from "flowbite-svelte";
+export const walletAddressMatchesOrBlank = void 0;
+export const handleOrderRemoveModal = void 0;
+export let activeSubgraphs;
+export let settings;
+export let accounts;
+export let activeAccountsItems;
+export let activeOrderStatus;
+export let orderHash;
+export let hideZeroBalanceVaults;
+export let showMyItemsOnly;
+export let currentRoute;
+export let signerAddress;
+export let activeNetworkRef;
+export let activeOrderbookRef;
+$: multiSubgraphArgs = Object.entries(
+  Object.keys($activeSubgraphs ?? {}).length ? $activeSubgraphs : $settings?.subgraphs ?? {}
+).map(([name, url]) => ({
+  name,
+  url
+}));
+$: owners = $activeAccountsItems && Object.values($activeAccountsItems).length > 0 ? Object.values($activeAccountsItems) : $showMyItemsOnly && $signerAddress ? [$signerAddress] : [];
+$: query = createInfiniteQuery({
+  queryKey: [
+    QKEY_ORDERS,
+    $activeSubgraphs,
+    $settings,
+    multiSubgraphArgs,
+    owners,
+    $activeOrderStatus,
+    $orderHash
+  ],
+  queryFn: ({ pageParam }) => {
+    return getOrders(
+      multiSubgraphArgs,
+      {
+        owners,
+        active: $activeOrderStatus,
+        orderHash: $orderHash || void 0
+      },
+      { page: pageParam + 1, pageSize: DEFAULT_PAGE_SIZE }
+    );
+  },
+  initialPageParam: 0,
+  getNextPageParam(lastPage, _allPages, lastPageParam) {
+    return lastPage.length === DEFAULT_PAGE_SIZE ? lastPageParam + 1 : void 0;
+  },
+  refetchInterval: DEFAULT_REFRESH_INTERVAL,
+  enabled: true
+});
+const AppTable = TanstackAppTable;
+$: isVaultsPage = currentRoute.startsWith("/vaults");
+$: isOrdersPage = currentRoute.startsWith("/orders");
+</script>
+
+<ListViewOrderbookFilters
+	{activeSubgraphs}
+	{settings}
+	{accounts}
+	{activeAccountsItems}
+	{showMyItemsOnly}
+	{activeOrderStatus}
+	{orderHash}
+	{hideZeroBalanceVaults}
+	{isVaultsPage}
+	{isOrdersPage}
+	{signerAddress}
+/>
+
+<AppTable
+	{query}
+	queryKey={undefined}
+	emptyMessage="No Orders Found"
+	on:clickRow={(e) => {
+		activeNetworkRef.set(e.detail.item.subgraphName);
+		activeOrderbookRef.set(e.detail.item.subgraphName);
+		goto(`/orders/${e.detail.item.subgraphName}-${e.detail.item.order.orderHash}`);
+	}}
+>
+	<svelte:fragment slot="title">
+		<slot name="filters" />
+	</svelte:fragment>
+
+	<svelte:fragment slot="head">
+		<TableHeadCell data-testid="orderListHeadingNetwork" padding="p-4">Network</TableHeadCell>
+		<TableHeadCell data-testid="orderListHeadingActive" padding="p-4">Active</TableHeadCell>
+		<TableHeadCell data-testid="orderListHeadingID" padding="p-4">Order</TableHeadCell>
+		<TableHeadCell data-testid="orderListHeadingOwner" padding="p-4">Owner</TableHeadCell>
+		<TableHeadCell data-testid="orderListHeadingOrderbook" padding="p-4">Orderbook</TableHeadCell>
+		<TableHeadCell data-testid="orderListHeadingLastAdded" padding="p-4">Last Added</TableHeadCell>
+		<TableHeadCell data-testid="orderListHeadingInputs" padding="px-2 py-4"
+			>Input Token(s)</TableHeadCell
+		>
+		<TableHeadCell data-testid="orderListHeadingOutputs" padding="px-2 py-4"
+			>Output Token(s)</TableHeadCell
+		>
+		<TableHeadCell data-testid="orderListHeadingTrades" padding="px-2 py-4">Trades</TableHeadCell>
+	</svelte:fragment>
+
+	<svelte:fragment slot="bodyRow" let:item>
+		<TableBodyCell data-testid="orderListRowNetwork" tdClass="px-4 py-2">
+			{item.subgraphName}
+		</TableBodyCell>
+		<TableBodyCell data-testid="orderListRowActive" tdClass="px-4 py-2">
+			{#if item.order.active}
+				<Badge color="green">Active</Badge>
+			{:else}
+				<Badge color="yellow">Inactive</Badge>
+			{/if}
+		</TableBodyCell>
+		<TableBodyCell data-testid="orderListRowID" tdClass="break-all px-4 py-4">
+			<Hash type={HashType.Identifier} value={item.order.orderHash} />
+		</TableBodyCell>
+		<TableBodyCell data-testid="orderListRowOwner" tdClass="break-all px-4 py-2">
+			<Hash type={HashType.Wallet} value={item.order.owner} />
+		</TableBodyCell>
+		<TableBodyCell data-testid="orderListRowOrderbook" tdClass="break-all px-4 py-2">
+			<Hash type={HashType.Identifier} value={item.order.orderbook.id} />
+		</TableBodyCell>
+		<TableBodyCell data-testid="orderListRowLastAdded" tdClass="break-word px-4 py-2">
+			{formatTimestampSecondsAsLocal(BigInt(item.order.timestampAdded))}
+		</TableBodyCell>
+		<TableBodyCell data-testid="orderListRowInputs" tdClass="break-word p-2">
+			{item.order.inputs?.map((t) => t.token.symbol)}
+		</TableBodyCell>
+		<TableBodyCell data-testid="orderListRowOutputs" tdClass="break-word p-2">
+			{item.order.outputs?.map((t) => t.token.symbol)}
+		</TableBodyCell>
+		<TableBodyCell data-testid="orderListRowTrades" tdClass="break-word p-2"
+			>{item.order.trades.length > 99 ? '>99' : item.order.trades.length}</TableBodyCell
+		>
+		{#if walletAddressMatchesOrBlank && handleOrderRemoveModal}
+			<div data-testid="wallet-actions">
+				<TableBodyCell tdClass="px-0 text-right">
+					{#if $walletAddressMatchesOrBlank(item.order.owner) && item.order.active}
+						<Button
+							color="alternative"
+							outline={false}
+							data-testid={`order-menu-${item.order.id}`}
+							id={`order-menu-${item.order.id}`}
+							class="mr-2 border-none px-2"
+							on:click={(e) => {
+								e.stopPropagation();
+							}}
+						>
+							<DotsVerticalOutline class="dark:text-white" />
+						</Button>
+					{/if}
+				</TableBodyCell>
+				{#if $walletAddressMatchesOrBlank(item.order.owner) && item.order.active}
+					<Dropdown placement="bottom-end" triggeredBy={`#order-menu-${item.order.id}`}>
+						<DropdownItem
+							on:click={(e) => {
+								e.stopPropagation();
+								handleOrderRemoveModal(item.order, $query.refetch);
+							}}>Remove</DropdownItem
+						>
+					</Dropdown>
+				{/if}
+			</div>
+		{/if}
+	</svelte:fragment>
+</AppTable>

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

@@ -0,0 +1,35 @@
+import { SvelteComponent } from "svelte";
+import type { AppStoresInterface } from '../../types/appStores';
+import type { Writable } from 'svelte/store';
+declare class __sveltets_Render<T> {
+    props(): {
+        walletAddressMatchesOrBlank?: any;
+        handleOrderRemoveModal?: any;
+        activeSubgraphs: AppStoresInterface["activeSubgraphs"];
+        settings: AppStoresInterface["settings"];
+        accounts: AppStoresInterface["accounts"] | undefined;
+        activeAccountsItems: AppStoresInterface["activeAccountsItems"] | undefined;
+        activeOrderStatus: AppStoresInterface["activeOrderStatus"];
+        orderHash: AppStoresInterface["orderHash"];
+        hideZeroBalanceVaults: AppStoresInterface["hideZeroBalanceVaults"];
+        showMyItemsOnly: AppStoresInterface["showMyItemsOnly"];
+        currentRoute: string;
+        signerAddress: Writable<string | null> | undefined;
+        activeNetworkRef: AppStoresInterface["activeNetworkRef"];
+        activeOrderbookRef: AppStoresInterface["activeOrderbookRef"];
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {
+        filters: {};
+    };
+}
+export type OrdersListTableProps<T> = ReturnType<__sveltets_Render<T>['props']>;
+export type OrdersListTableEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
+export type OrdersListTableSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class OrdersListTable<T> extends SvelteComponent<OrdersListTableProps<T>, OrdersListTableEvents<T>, OrdersListTableSlots<T>> {
+    get walletAddressMatchesOrBlank(): any;
+    get handleOrderRemoveModal(): any;
+}
+export {};

package/dist/components/tables/VaultBalanceChangesTable.svelte

@@ -0,0 +1,74 @@
+<script generics="T">import { Heading, TableHeadCell, TableBodyCell } from "flowbite-svelte";
+import { formatUnits } from "viem";
+import { createInfiniteQuery } from "@tanstack/svelte-query";
+import {
+  getVaultBalanceChanges
+} from "@rainlanguage/orderbook/js_api";
+import { formatTimestampSecondsAsLocal } from "../../utils/time";
+import Hash, { HashType } from "../Hash.svelte";
+import { QKEY_VAULT_CHANGES } from "../../queries/keys";
+import { DEFAULT_PAGE_SIZE } from "../../queries/constants";
+import TanstackAppTable from "../TanstackAppTable.svelte";
+export let id;
+export let subgraphUrl;
+$: balanceChangesQuery = createInfiniteQuery({
+  queryKey: [id, QKEY_VAULT_CHANGES + id],
+  queryFn: ({ pageParam }) => {
+    return getVaultBalanceChanges(subgraphUrl || "", id, {
+      page: pageParam + 1,
+      pageSize: DEFAULT_PAGE_SIZE
+    });
+  },
+  initialPageParam: 0,
+  getNextPageParam(lastPage, _allPages, lastPageParam) {
+    return lastPage.length === DEFAULT_PAGE_SIZE ? lastPageParam + 1 : void 0;
+  },
+  enabled: !!subgraphUrl
+});
+const AppTable = TanstackAppTable;
+</script>
+
+<AppTable
+	query={balanceChangesQuery}
+	queryKey={undefined}
+	emptyMessage="No deposits or withdrawals found"
+	rowHoverable={false}
+>
+	<svelte:fragment slot="title">
+		<Heading tag="h5" class="mb-4 mt-6 font-normal">Vault Balance Changes</Heading>
+	</svelte:fragment>
+	<svelte:fragment slot="head">
+		<TableHeadCell padding="p-4">Date</TableHeadCell>
+		<TableHeadCell padding="p-0">Sender</TableHeadCell>
+		<TableHeadCell padding="p-0">Transaction Hash</TableHeadCell>
+		<TableHeadCell padding="p-0">Balance Change</TableHeadCell>
+		<TableHeadCell padding="p-0">Balance</TableHeadCell>
+		<TableHeadCell padding="p--">Type</TableHeadCell>
+	</svelte:fragment>
+
+	<svelte:fragment slot="bodyRow" let:item>
+		<TableBodyCell tdClass="px-4 py-2" data-testid="vaultBalanceChangesTableDate">
+			{formatTimestampSecondsAsLocal(BigInt(item.timestamp))}
+		</TableBodyCell>
+		<TableBodyCell tdClass="break-all py-2 min-w-48" data-testid="vaultBalanceChangesTableFrom">
+			<Hash type={HashType.Wallet} value={item.transaction.from} />
+		</TableBodyCell>
+		<TableBodyCell tdClass="break-all py-2 min-w-48" data-testid="vaultBalanceChangesTableTx">
+			<Hash type={HashType.Transaction} value={item.transaction.id} />
+		</TableBodyCell>
+		<TableBodyCell
+			tdClass="break-word p-0 text-left"
+			data-testid="vaultBalanceChangesTableBalanceChange"
+		>
+			{formatUnits(BigInt(item.amount), Number(item.vault.token.decimals ?? 0))}
+			{item.vault.token.symbol}
+		</TableBodyCell>
+		<TableBodyCell tdClass="break-word p-0 text-left" data-testid="vaultBalanceChangesTableBalance">
+			{formatUnits(BigInt(item.newVaultBalance), Number(item.vault.token.decimals ?? 0))}
+			{item.vault.token.symbol}
+		</TableBodyCell>
+		<TableBodyCell tdClass="break-word p-0 text-left" data-testid="vaultBalanceChangesTableType">
+			{item.__typename}
+		</TableBodyCell>
+	</svelte:fragment>
+</AppTable>

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

@@ -0,0 +1,17 @@
+import { SvelteComponent } from "svelte";
+declare class __sveltets_Render<T> {
+    props(): {
+        id: string;
+        subgraphUrl: string;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+}
+export type VaultBalanceChangesTableProps<T> = ReturnType<__sveltets_Render<T>['props']>;
+export type VaultBalanceChangesTableEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
+export type VaultBalanceChangesTableSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class VaultBalanceChangesTable<T> extends SvelteComponent<VaultBalanceChangesTableProps<T>, VaultBalanceChangesTableEvents<T>, VaultBalanceChangesTableSlots<T>> {
+}
+export {};

package/dist/components/tables/VaultsListTable.svelte

@@ -0,0 +1,229 @@
+<script generics="T">import { Button, Dropdown, DropdownItem, TableBodyCell, TableHeadCell } from "flowbite-svelte";
+import { goto } from "$app/navigation";
+import { DotsVerticalOutline } from "flowbite-svelte-icons";
+import { createInfiniteQuery } from "@tanstack/svelte-query";
+import TanstackAppTable from "../TanstackAppTable.svelte";
+import ListViewOrderbookFilters from "../ListViewOrderbookFilters.svelte";
+import OrderOrVaultHash from "../OrderOrVaultHash.svelte";
+import Hash, { HashType } from "../Hash.svelte";
+import { DEFAULT_PAGE_SIZE, DEFAULT_REFRESH_INTERVAL } from "../../queries/constants";
+import { vaultBalanceDisplay } from "../../utils/vault";
+import { bigintStringToHex } from "../../utils/hex";
+import {} from "@rainlanguage/orderbook/js_api";
+import {} from "@rainlanguage/orderbook/js_api";
+import { QKEY_VAULTS } from "../../queries/keys";
+import {
+  getVaults
+} from "@rainlanguage/orderbook/js_api";
+import {} from "svelte/store";
+export let activeOrderbook;
+export let subgraphUrl;
+export let accounts;
+export let activeAccountsItems;
+export let orderHash;
+export let activeSubgraphs;
+export let settings;
+export let activeOrderStatus;
+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;
+export let signerAddress;
+$: multiSubgraphArgs = Object.entries(
+  Object.keys($activeSubgraphs ?? {}).length ? $activeSubgraphs : $settings?.subgraphs ?? {}
+).map(([name, url]) => ({
+  name,
+  url
+}));
+$: owners = $activeAccountsItems && Object.values($activeAccountsItems).length > 0 ? Object.values($activeAccountsItems) : $showMyItemsOnly && $signerAddress ? [$signerAddress] : [];
+$: query = createInfiniteQuery({
+  queryKey: [
+    QKEY_VAULTS,
+    $activeAccounts,
+    $hideZeroBalanceVaults,
+    $activeSubgraphs,
+    multiSubgraphArgs,
+    $settings,
+    owners
+  ],
+  queryFn: ({ pageParam }) => {
+    return getVaults(
+      multiSubgraphArgs,
+      {
+        owners,
+        hideZeroBalance: $hideZeroBalanceVaults
+      },
+      { page: pageParam + 1, pageSize: DEFAULT_PAGE_SIZE }
+    );
+  },
+  initialPageParam: 0,
+  getNextPageParam(lastPage, _allPages, lastPageParam) {
+    return lastPage.length === DEFAULT_PAGE_SIZE ? lastPageParam + 1 : void 0;
+  },
+  refetchInterval: DEFAULT_REFRESH_INTERVAL,
+  enabled: !!$subgraphUrl
+});
+const updateActiveNetworkAndOrderbook = (subgraphName) => {
+  activeNetworkRef.set(subgraphName);
+  activeOrderbookRef.set(subgraphName);
+};
+$: isVaultsPage = currentRoute.startsWith("/vaults");
+$: isOrdersPage = currentRoute.startsWith("/orders");
+const AppTable = TanstackAppTable;
+</script>
+
+{#if $query}
+	<ListViewOrderbookFilters
+		{activeSubgraphs}
+		{settings}
+		{accounts}
+		{activeAccountsItems}
+		{showMyItemsOnly}
+		{activeOrderStatus}
+		{orderHash}
+		{hideZeroBalanceVaults}
+		{isVaultsPage}
+		{isOrdersPage}
+		{signerAddress}
+	/>
+	<AppTable
+		{query}
+		queryKey={undefined}
+		emptyMessage="No Vaults Found"
+		on:clickRow={(e) => {
+			updateActiveNetworkAndOrderbook(e.detail.item.subgraphName);
+			goto(`/vaults/${e.detail.item.subgraphName}-${e.detail.item.vault.id}`);
+		}}
+	>
+		<svelte:fragment slot="title">
+			<div class="mt-2 flex w-full justify-between">
+				<div class="flex items-center gap-x-6">
+					<div class="text-3xl font-medium dark:text-white">Vaults</div>
+					{#if handleDepositGenericModal}
+						<Button
+							disabled={!$activeOrderbook}
+							size="sm"
+							color="primary"
+							data-testid="new-vault-button"
+							on:click={() => {
+								handleDepositGenericModal();
+							}}
+							>New vault
+						</Button>
+					{/if}
+				</div>
+			</div>
+		</svelte:fragment>
+		<svelte:fragment slot="head">
+			<TableHeadCell padding="p-4">Network</TableHeadCell>
+			<TableHeadCell padding="px-4 py-4">Vault ID</TableHeadCell>
+			<TableHeadCell padding="px-4 py-4">Orderbook</TableHeadCell>
+			<TableHeadCell padding="px-4 py-4">Owner</TableHeadCell>
+			<TableHeadCell padding="px-2 py-4">Token</TableHeadCell>
+			<TableHeadCell padding="px-2 py-4">Balance</TableHeadCell>
+			<TableHeadCell padding="px-3 py-4">Input For</TableHeadCell>
+			<TableHeadCell padding="px-3 py-4">Output For</TableHeadCell>
+		</svelte:fragment>
+
+		<svelte:fragment slot="bodyRow" let:item>
+			<TableBodyCell tdClass="px-4 py-2" data-testid="vault-network">
+				{item.subgraphName}
+			</TableBodyCell>
+
+			<TableBodyCell tdClass="break-all px-4 py-4" data-testid="vault-id">
+				<Hash type={HashType.Identifier} value={bigintStringToHex(item.vault.vaultId)} />
+			</TableBodyCell>
+			<TableBodyCell tdClass="break-all px-4 py-2 min-w-48" data-testid="vault-orderbook">
+				<Hash type={HashType.Identifier} value={item.vault.orderbook.id} />
+			</TableBodyCell>
+			<TableBodyCell tdClass="break-all px-4 py-2 min-w-48" data-testid="vault-owner">
+				<Hash type={HashType.Wallet} value={item.vault.owner} />
+			</TableBodyCell>
+			<TableBodyCell tdClass="break-word p-2 min-w-48" data-testid="vault-token"
+				>{item.vault.token.name}</TableBodyCell
+			>
+			<TableBodyCell tdClass="break-all p-2 min-w-48" data-testid="vault-balance">
+				{vaultBalanceDisplay(item.vault)}
+				{item.vault.token.symbol}
+			</TableBodyCell>
+			<TableBodyCell tdClass="break-all p-2 min-w-48">
+				{#if item.vault.ordersAsInput.length > 0}
+					<div data-testid="vault-order-inputs" class="flex flex-wrap items-end justify-start">
+						{#each item.vault.ordersAsInput.slice(0, 3) as order}
+							<OrderOrVaultHash
+								type="orders"
+								orderOrVault={order}
+								network={item.subgraphName}
+								{updateActiveNetworkAndOrderbook}
+							/>
+						{/each}
+						{#if item.vault.ordersAsInput.length > 3}...{/if}
+					</div>
+				{/if}
+			</TableBodyCell>
+			<TableBodyCell tdClass="break-all p-2 min-w-48">
+				{#if item.vault.ordersAsOutput.length > 0}
+					<div data-testid="vault-order-outputs" class="flex flex-wrap items-end justify-start">
+						{#each item.vault.ordersAsOutput.slice(0, 3) as order}
+							<OrderOrVaultHash
+								type="orders"
+								orderOrVault={order}
+								network={item.subgraphName}
+								{updateActiveNetworkAndOrderbook}
+							/>
+						{/each}
+						{#if item.vault.ordersAsOutput.length > 3}...{/if}
+					</div>
+				{/if}
+			</TableBodyCell>
+			{#if handleDepositModal && handleWithdrawModal && $walletAddressMatchesOrBlank(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}`}
+					>
+						<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}
+			{/if}
+		</svelte:fragment>
+	</AppTable>
+{/if}

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

@@ -0,0 +1,40 @@
+import { SvelteComponent } from "svelte";
+import { type ConfigSource, type OrderbookConfigSource } from '@rainlanguage/orderbook/js_api';
+import { type SgVault } from '@rainlanguage/orderbook/js_api';
+import { type Writable, type Readable } from 'svelte/store';
+import type { AppStoresInterface } from '../../types/appStores.ts';
+declare class __sveltets_Render<T> {
+    props(): {
+        activeOrderbook: Readable<OrderbookConfigSource | undefined>;
+        subgraphUrl: Readable<string | undefined>;
+        accounts: AppStoresInterface["accounts"] | undefined;
+        activeAccountsItems: AppStoresInterface["activeAccountsItems"] | undefined;
+        orderHash: Writable<string>;
+        activeSubgraphs: Writable<Record<string, string>>;
+        settings: Writable<ConfigSource | undefined>;
+        activeOrderStatus: Writable<boolean | undefined>;
+        hideZeroBalanceVaults: Writable<boolean>;
+        activeNetworkRef: Writable<string | undefined>;
+        activeOrderbookRef: Writable<string | undefined>;
+        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;
+        currentRoute: string;
+        showMyItemsOnly: AppStoresInterface["showMyItemsOnly"];
+        signerAddress: Writable<string | null> | undefined;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+}
+export type VaultsListTableProps<T> = ReturnType<__sveltets_Render<T>['props']>;
+export type VaultsListTableEvents<T> = ReturnType<__sveltets_Render<T>['events']>;
+export type VaultsListTableSlots<T> = ReturnType<__sveltets_Render<T>['slots']>;
+export default class VaultsListTable<T> extends SvelteComponent<VaultsListTableProps<T>, VaultsListTableEvents<T>, VaultsListTableSlots<T>> {
+}
+export {};