@rainlanguage/ui-components 0.0.1-alpha.21 → 0.0.1-alpha.211

package/dist/components/tables/OrdersListTable.svelte

@@ -1,14 +1,15 @@
-<script generics="T">import { goto } from "$app/navigation";
+<script>import { getNetworkName } from "../../utils/getNetworkName";
+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 { createInfiniteQuery, createQuery } from "@tanstack/svelte-query";
+import { RaindexOrder } from "@rainlanguage/orderbook";
 import TanstackAppTable from "../TanstackAppTable.svelte";
-import { formatTimestampSecondsAsLocal } from "../../utils/time";
+import { formatTimestampSecondsAsLocal } from "../../services/time";
 import ListViewOrderbookFilters from "../ListViewOrderbookFilters.svelte";
 import Hash, { HashType } from "../Hash.svelte";
+import VaultCard from "../VaultCard.svelte";
 import { DEFAULT_PAGE_SIZE, DEFAULT_REFRESH_INTERVAL } from "../../queries/constants";
-import { QKEY_ORDERS } from "../../queries/keys";
+import { QKEY_ORDERS, QKEY_TOKENS } from "../../queries/keys";
 import {
   Badge,
   Button,
@@ -17,47 +18,73 @@ import {
   TableBodyCell,
   TableHeadCell
 } from "flowbite-svelte";
-export const walletAddressMatchesOrBlank = void 0;
-export const handleOrderRemoveModal = void 0;
-export let activeSubgraphs;
-export let settings;
-export let accounts;
+import { useAccount } from "../../providers/wallet/useAccount";
+import { useRaindexClient } from "../../hooks/useRaindexClient";
+import { getAllContexts } from "svelte";
+const context = getAllContexts();
+export let handleOrderRemoveModal = void 0;
+export let handleTakeOrderModal = void 0;
+export let selectedChainIds;
 export let activeAccountsItems;
-export let activeOrderStatus;
+export let showInactiveOrders;
 export let orderHash;
 export let hideZeroBalanceVaults;
+export let hideInactiveOrdersVaults;
 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] : [];
+export let activeTokens;
+export let activeOrderbookAddresses;
+const { matchesAccount, account } = useAccount();
+const raindexClient = useRaindexClient();
+$: owners = $activeAccountsItems && Object.values($activeAccountsItems).length > 0 ? Object.values($activeAccountsItems) : $showMyItemsOnly && $account ? [$account] : [];
+$: tokensQuery = createQuery({
+  queryKey: [QKEY_TOKENS, $selectedChainIds],
+  queryFn: async () => {
+    const result = await raindexClient.getAllVaultTokens($selectedChainIds);
+    if (result.error) throw new Error(result.error.readableMsg);
+    return result.value;
+  },
+  enabled: true
+});
+$: selectedTokens = $activeTokens?.filter(
+  (address) => !$tokensQuery.data || $tokensQuery.data.some((t) => t.address === address)
+) ?? [];
+$: orderbooksMap = raindexClient.getAllOrderbooks()?.value ?? /* @__PURE__ */ new Map();
+$: availableOrderbookAddresses = (() => {
+  const addrs = [];
+  orderbooksMap.forEach((cfg) => {
+    if ($selectedChainIds.length === 0 || $selectedChainIds.includes(cfg.network.chainId)) {
+      addrs.push(cfg.address.toLowerCase());
+    }
+  });
+  return addrs;
+})();
+$: selectedOrderbookAddresses = $activeOrderbookAddresses?.filter(
+  (address) => availableOrderbookAddresses.includes(address.toLowerCase())
+) ?? [];
 $: query = createInfiniteQuery({
   queryKey: [
     QKEY_ORDERS,
-    $activeSubgraphs,
-    $settings,
-    multiSubgraphArgs,
+    $selectedChainIds,
     owners,
-    $activeOrderStatus,
-    $orderHash
+    $showInactiveOrders,
+    $orderHash,
+    selectedTokens,
+    selectedOrderbookAddresses
   ],
-  queryFn: ({ pageParam }) => {
-    return getOrders(
-      multiSubgraphArgs,
+  queryFn: async ({ pageParam }) => {
+    const result = await raindexClient.getOrders(
+      $selectedChainIds,
       {
         owners,
-        active: $activeOrderStatus,
-        orderHash: $orderHash || void 0
+        active: $showInactiveOrders ? void 0 : true,
+        orderHash: $orderHash || void 0,
+        tokens: selectedTokens.length > 0 ? { inputs: selectedTokens, outputs: selectedTokens } : void 0,
+        orderbookAddresses: selectedOrderbookAddresses.length > 0 ? selectedOrderbookAddresses : void 0
       },
-      { page: pageParam + 1, pageSize: DEFAULT_PAGE_SIZE }
+      pageParam + 1
     );
+    if (result.error) throw new Error(result.error.readableMsg);
+    return result.value;
   },
   initialPageParam: 0,
   getNextPageParam(lastPage, _allPages, lastPageParam) {
@@ -67,115 +94,180 @@ $: query = createInfiniteQuery({
   enabled: true
 });
 const AppTable = TanstackAppTable;
-$: isVaultsPage = currentRoute.startsWith("/vaults");
-$: isOrdersPage = currentRoute.startsWith("/orders");
 </script>
 
 <ListViewOrderbookFilters
-	{activeSubgraphs}
-	{settings}
-	{accounts}
+	{selectedChainIds}
 	{activeAccountsItems}
 	{showMyItemsOnly}
-	{activeOrderStatus}
+	{showInactiveOrders}
 	{orderHash}
 	{hideZeroBalanceVaults}
-	{isVaultsPage}
-	{isOrdersPage}
-	{signerAddress}
+	{hideInactiveOrdersVaults}
+	{tokensQuery}
+	{activeTokens}
+	{selectedTokens}
+	{activeOrderbookAddresses}
+	{selectedOrderbookAddresses}
 />
 
 <AppTable
 	{query}
-	queryKey={undefined}
+	queryKey={QKEY_ORDERS}
 	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}`);
+		goto(`/orders/${e.detail.item.chainId}-${e.detail.item.orderbook}-${e.detail.item.orderHash}`);
 	}}
 >
 	<svelte:fragment slot="title">
-		<slot name="filters" />
+		<div class="mt-2 flex w-full justify-between">
+			<div class="text-3xl font-medium dark:text-white" data-testid="title">Orders</div>
+			<slot name="filters" />
+		</div>
 	</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>
+		{#if $account && (handleTakeOrderModal || handleOrderRemoveModal)}
+			<TableHeadCell data-testid="orderListHeadingOrderInfo" padding="p-4" class="w-[15%]"
+				>Order Info</TableHeadCell
+			>
+			<TableHeadCell data-testid="orderListHeadingAddresses" padding="p-4" class="w-[18%]"
+				>Addresses</TableHeadCell
+			>
+			<TableHeadCell data-testid="orderListHeadingInputs" padding="px-2 py-4" class="w-[23.5%]"
+				>Input Token(s)</TableHeadCell
+			>
+			<TableHeadCell data-testid="orderListHeadingOutputs" padding="px-2 py-4" class="w-[23.5%]"
+				>Output Token(s)</TableHeadCell
+			>
+			<TableHeadCell data-testid="orderListHeadingTrades" padding="px-2 py-4" class="w-[10%]"
+				>Trades</TableHeadCell
+			>
+			<TableHeadCell data-testid="orderListHeadingActions" padding="px-2 py-4" class="w-[10%]"
+				>Actions</TableHeadCell
+			>
+		{:else}
+			<TableHeadCell data-testid="orderListHeadingOrderInfo" padding="p-4" class="w-[15%]"
+				>Order Info</TableHeadCell
+			>
+			<TableHeadCell data-testid="orderListHeadingAddresses" padding="p-4" class="w-[20%]"
+				>Addresses</TableHeadCell
+			>
+			<TableHeadCell data-testid="orderListHeadingInputs" padding="px-2 py-4" class="w-[27.5%]"
+				>Input Token(s)</TableHeadCell
+			>
+			<TableHeadCell data-testid="orderListHeadingOutputs" padding="px-2 py-4" class="w-[27.5%]"
+				>Output Token(s)</TableHeadCell
+			>
+			<TableHeadCell data-testid="orderListHeadingTrades" padding="px-2 py-4" class="w-[10%]"
+				>Trades</TableHeadCell
+			>
+		{/if}
 	</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 data-testid="orderListRowOrderInfo" tdClass="px-4 py-2">
+			<div class="flex flex-col gap-1">
+				<div class="flex items-center gap-2">
+					<span class="text-sm font-medium">{getNetworkName(Number(item.chainId))}</span>
+					{#if item.active}
+						<Badge color="green">Active</Badge>
+					{:else}
+						<Badge color="yellow">Inactive</Badge>
+					{/if}
+				</div>
+				<span class="text-xs text-gray-500 dark:text-gray-400">
+					Added: {formatTimestampSecondsAsLocal(item.timestampAdded)}
+				</span>
+			</div>
 		</TableBodyCell>
-		<TableBodyCell data-testid="orderListRowOrderbook" tdClass="break-all px-4 py-2">
-			<Hash type={HashType.Identifier} value={item.order.orderbook.id} />
+		<TableBodyCell data-testid="orderListRowAddresses" tdClass="px-4 py-2">
+			<div class="flex flex-col gap-1 text-sm">
+				<div class="flex items-center gap-1">
+					<span class="text-gray-500 dark:text-gray-400">Order:</span>
+					<Hash type={HashType.Identifier} value={item.orderHash} />
+				</div>
+				<div class="flex items-center gap-1">
+					<span class="text-gray-500 dark:text-gray-400">Owner:</span>
+					<Hash type={HashType.Wallet} value={item.owner} />
+				</div>
+				<div class="flex items-center gap-1">
+					<span class="text-gray-500 dark:text-gray-400">Orderbook:</span>
+					<Hash type={HashType.Identifier} value={item.orderbook} />
+				</div>
+			</div>
 		</TableBodyCell>
-		<TableBodyCell data-testid="orderListRowLastAdded" tdClass="break-word px-4 py-2">
-			{formatTimestampSecondsAsLocal(BigInt(item.order.timestampAdded))}
+
+		<TableBodyCell data-testid="orderListRowInputs" tdClass="p-2 whitespace-normal">
+			<div class="grid w-full grid-cols-1 gap-2 sm:grid-cols-2">
+				{#each item.inputsList.items as vault}
+					<VaultCard {vault} />
+				{/each}
+				{#each item.inputsOutputsList.items as vault}
+					{#if !item.inputsList.items.find((v) => v.id === vault.id)}
+						<VaultCard {vault} />
+					{/if}
+				{/each}
+			</div>
 		</TableBodyCell>
-		<TableBodyCell data-testid="orderListRowInputs" tdClass="break-word p-2">
-			{item.order.inputs?.map((t) => t.token.symbol)}
+
+		<TableBodyCell data-testid="orderListRowOutputs" tdClass="p-2 whitespace-normal">
+			<div class="grid w-full grid-cols-1 gap-2 sm:grid-cols-2">
+				{#each item.outputsList.items as vault}
+					<VaultCard {vault} />
+				{/each}
+				{#each item.inputsOutputsList.items as vault}
+					{#if !item.outputsList.items.find((v) => v.id === vault.id)}
+						<VaultCard {vault} />
+					{/if}
+				{/each}
+			</div>
 		</TableBodyCell>
-		<TableBodyCell data-testid="orderListRowOutputs" tdClass="break-word p-2">
-			{item.order.outputs?.map((t) => t.token.symbol)}
+
+		<TableBodyCell data-testid="orderListRowTrades" tdClass="break-word p-2">
+			{item.tradesCount > 99 ? '>99' : item.tradesCount}
 		</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}
+		{#if $account && (handleTakeOrderModal || handleOrderRemoveModal)}
+			<TableBodyCell data-testid="orderListRowActions" tdClass="px-2 py-2">
+				{#if item.active}
+					{#if handleTakeOrderModal}
 						<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"
+							size="xs"
+							data-testid={`order-take-${item.id}`}
 							on:click={(e) => {
 								e.stopPropagation();
+								handleTakeOrderModal(item, $query.refetch, context);
 							}}
 						>
-							<DotsVerticalOutline class="dark:text-white" />
+							Take Order
 						</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 matchesAccount(item.owner) && handleOrderRemoveModal}
+						<div data-testid="wallet-actions">
+							<Button
+								color="alternative"
+								outline={false}
+								data-testid={`order-menu-${item.id}`}
+								id={`order-menu-${item.id}`}
+								class="border-none px-2"
+								on:click={(e) => {
+									e.stopPropagation();
+								}}
+							>
+								<DotsVerticalOutline class="dark:text-white" />
+							</Button>
+							<Dropdown placement="bottom-end" triggeredBy={`#order-menu-${item.id}`}>
+								<DropdownItem
+									on:click={(e) => {
+										e.stopPropagation();
+										handleOrderRemoveModal(item, $query.refetch, context);
+									}}>Remove</DropdownItem
+								>
+							</Dropdown>
+						</div>
+					{/if}
 				{/if}
-			</div>
+			</TableBodyCell>
 		{/if}
 	</svelte:fragment>
 </AppTable>

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

@@ -1,35 +1,31 @@
 import { SvelteComponent } from "svelte";
 import type { AppStoresInterface } from '../../types/appStores';
-import type { Writable } from 'svelte/store';
-declare class __sveltets_Render<T> {
-    props(): {
-        walletAddressMatchesOrBlank?: any;
+declare const __propDef: {
+    props: {
         handleOrderRemoveModal?: any;
-        activeSubgraphs: AppStoresInterface["activeSubgraphs"];
-        settings: AppStoresInterface["settings"];
-        accounts: AppStoresInterface["accounts"] | undefined;
+        handleTakeOrderModal?: any;
+        selectedChainIds: AppStoresInterface["selectedChainIds"];
         activeAccountsItems: AppStoresInterface["activeAccountsItems"] | undefined;
-        activeOrderStatus: AppStoresInterface["activeOrderStatus"];
+        showInactiveOrders: AppStoresInterface["showInactiveOrders"];
         orderHash: AppStoresInterface["orderHash"];
         hideZeroBalanceVaults: AppStoresInterface["hideZeroBalanceVaults"];
+        hideInactiveOrdersVaults: AppStoresInterface["hideInactiveOrdersVaults"];
         showMyItemsOnly: AppStoresInterface["showMyItemsOnly"];
-        currentRoute: string;
-        signerAddress: Writable<string | null> | undefined;
-        activeNetworkRef: AppStoresInterface["activeNetworkRef"];
-        activeOrderbookRef: AppStoresInterface["activeOrderbookRef"];
+        activeTokens: AppStoresInterface["activeTokens"];
+        activeOrderbookAddresses: AppStoresInterface["activeOrderbookAddresses"];
     };
-    events(): {} & {
+    events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots(): {
+    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;
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type OrdersListTableProps = typeof __propDef.props;
+export type OrdersListTableEvents = typeof __propDef.events;
+export type OrdersListTableSlots = typeof __propDef.slots;
+export default class OrdersListTable extends SvelteComponent<OrdersListTableProps, OrdersListTableEvents, OrdersListTableSlots> {
 }
 export {};

package/dist/components/tables/VaultBalanceChangesTable.svelte

@@ -1,74 +1,114 @@
-<script generics="T">import { Heading, TableHeadCell, TableBodyCell } from "flowbite-svelte";
-import { formatUnits } from "viem";
+<script>import { Badge, Heading, TableHeadCell, TableBodyCell } from "flowbite-svelte";
 import { createInfiniteQuery } from "@tanstack/svelte-query";
 import {
-  getVaultBalanceChanges
-} from "@rainlanguage/orderbook/js_api";
-import { formatTimestampSecondsAsLocal } from "../../utils/time";
+  RaindexVault
+} from "@rainlanguage/orderbook";
+import { formatTimestampSecondsAsLocal } from "../../services/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;
+import Tooltip from "../Tooltip.svelte";
+import VaultBalanceChangeTypeFilter from "../VaultBalanceChangeTypeFilter.svelte";
+function getTypeBadgeColor(type) {
+  const lowerType = type.toLowerCase();
+  if (lowerType.includes("deposit")) return "green";
+  if (lowerType.includes("withdrawal")) return "yellow";
+  if (lowerType.includes("bounty")) return "purple";
+  if (lowerType.includes("trade") || lowerType.includes("takeorder")) return "blue";
+  if (lowerType.includes("clear")) return "pink";
+  return "dark";
+}
+export let vault;
+let filterTypes = void 0;
 $: balanceChangesQuery = createInfiniteQuery({
-  queryKey: [id, QKEY_VAULT_CHANGES + id],
-  queryFn: ({ pageParam }) => {
-    return getVaultBalanceChanges(subgraphUrl || "", id, {
-      page: pageParam + 1,
-      pageSize: DEFAULT_PAGE_SIZE
-    });
+  queryKey: [vault.id, QKEY_VAULT_CHANGES + vault.id, filterTypes],
+  queryFn: async ({ pageParam }) => {
+    const result = await vault.getBalanceChanges(pageParam + 1, filterTypes);
+    if (result.error) throw new Error(result.error.msg);
+    return result.value;
   },
   initialPageParam: 0,
   getNextPageParam(lastPage, _allPages, lastPageParam) {
     return lastPage.length === DEFAULT_PAGE_SIZE ? lastPageParam + 1 : void 0;
-  },
-  enabled: !!subgraphUrl
+  }
 });
 const AppTable = TanstackAppTable;
 </script>
 
+<div class="flex w-full justify-end">
+	<VaultBalanceChangeTypeFilter bind:value={filterTypes} />
+</div>
+
 <AppTable
 	query={balanceChangesQuery}
-	queryKey={undefined}
-	emptyMessage="No deposits or withdrawals found"
+	queryKey={vault.id}
+	emptyMessage="No balance changes found"
 	rowHoverable={false}
 >
 	<svelte:fragment slot="title">
-		<Heading tag="h5" class="mb-4 mt-6 font-normal">Vault Balance Changes</Heading>
+		<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>
+		<TableHeadCell padding="p-4" class="w-[18%]">Info</TableHeadCell>
+		<TableHeadCell padding="p-4" class="w-[22%]">Transaction</TableHeadCell>
+		<TableHeadCell padding="p-2" class="w-[30%]">Balance Change</TableHeadCell>
+		<TableHeadCell padding="p-2" class="w-[30%]">New Balance</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 tdClass="px-4 py-2" data-testid="vaultBalanceChangesTableInfo">
+			<div class="flex flex-col gap-1 overflow-hidden">
+				<div class="flex">
+					<Badge
+						id={`type-${item.transaction.id}`}
+						class="truncate"
+						color={getTypeBadgeColor(item.type)}>{item.typeDisplayName}</Badge
+					>
+					<Tooltip triggeredBy={`#type-${item.transaction.id}`}>
+						{item.typeDisplayName}
+					</Tooltip>
+				</div>
+				<span class="text-xs text-gray-500 dark:text-gray-400">
+					{formatTimestampSecondsAsLocal(BigInt(item.timestamp))}
+				</span>
+			</div>
 		</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 tdClass="px-4 py-2" data-testid="vaultBalanceChangesTableTx">
+			<div class="flex flex-col gap-1 text-sm">
+				<div class="flex items-center gap-1">
+					<span class="text-gray-500 dark:text-gray-400">Sender:</span>
+					<Hash type={HashType.Wallet} value={item.transaction.from} />
+				</div>
+				<div class="flex items-center gap-1">
+					<span class="text-gray-500 dark:text-gray-400">Tx:</span>
+					<Hash type={HashType.Transaction} value={item.transaction.id} />
+				</div>
+			</div>
 		</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 tdClass="p-2" data-testid="vaultBalanceChangesTableBalanceChange">
+			<div class="flex flex-col overflow-hidden">
+				<span class="truncate font-medium">{item.token.symbol}</span>
+				<span
+					id={`change-${item.transaction.id}`}
+					class="truncate text-sm text-gray-500 dark:text-gray-400">{item.formattedAmount}</span
+				>
+				<Tooltip triggeredBy={`#change-${item.transaction.id}`}>
+					{`${item.formattedAmount} ${item.token.symbol}`}
+				</Tooltip>
+			</div>
 		</TableBodyCell>
-		<TableBodyCell tdClass="break-word p-0 text-left" data-testid="vaultBalanceChangesTableType">
-			{item.__typename}
+		<TableBodyCell tdClass="p-2" data-testid="vaultBalanceChangesTableBalance">
+			<div class="flex flex-col overflow-hidden">
+				<span class="truncate font-medium">{item.token.symbol}</span>
+				<span
+					id={`balance-${item.transaction.id}`}
+					class="truncate text-sm text-gray-500 dark:text-gray-400">{item.formattedNewBalance}</span
+				>
+				<Tooltip triggeredBy={`#balance-${item.transaction.id}`}>
+					{`${item.formattedNewBalance} ${item.token.symbol}`}
+				</Tooltip>
+			</div>
 		</TableBodyCell>
 	</svelte:fragment>
 </AppTable>

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

@@ -1,17 +1,19 @@
 import { SvelteComponent } from "svelte";
-declare class __sveltets_Render<T> {
-    props(): {
-        id: string;
-        subgraphUrl: string;
+import { RaindexVault } from '@rainlanguage/orderbook';
+declare const __propDef: {
+    props: {
+        vault: RaindexVault;
     };
-    events(): {} & {
+    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>> {
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type VaultBalanceChangesTableProps = typeof __propDef.props;
+export type VaultBalanceChangesTableEvents = typeof __propDef.events;
+export type VaultBalanceChangesTableSlots = typeof __propDef.slots;
+export default class VaultBalanceChangesTable extends SvelteComponent<VaultBalanceChangesTableProps, VaultBalanceChangesTableEvents, VaultBalanceChangesTableSlots> {
 }
 export {};