@rainlanguage/ui-components 0.0.1-alpha.238 → 0.0.1-alpha.239

package/dist/components/detail/VaultDetail.svelte

@@ -3,9 +3,7 @@ import VaultBalanceChangesTable from "../tables/VaultBalanceChangesTable.svelte"
 import TanstackPageContentDetail from "./TanstackPageContentDetail.svelte";
 import CardProperty from "../CardProperty.svelte";
 import { QKEY_VAULT } from "../../queries/keys";
-import {
-  RaindexClient
-} from "@rainlanguage/orderbook";
+import { RaindexClient } from "@rainlanguage/raindex";
 import { toHex } from "viem";
 import { createQuery } from "@tanstack/svelte-query";
 import { onDestroy } from "svelte";
@@ -24,7 +22,7 @@ import { getExplorerLink } from "../../services/getExplorerLink";
 import { useToasts } from "../../providers/toasts/useToasts";
 import { useRaindexClient } from "../../hooks/useRaindexClient";
 export let id;
-export let orderbookAddress;
+export let raindexAddress;
 export let chainId;
 export let onDeposit;
 export let onWithdraw;
@@ -35,7 +33,7 @@ const raindexClient = useRaindexClient();
 $: vaultDetailQuery = createQuery({
   queryKey: [id, QKEY_VAULT + id],
   queryFn: async () => {
-    const result = await raindexClient.getVault(chainId, orderbookAddress, id);
+    const result = await raindexClient.getVault(chainId, raindexAddress, id);
     if (result.error) throw new Error(result.error.readableMsg);
     return result.value;
   }
@@ -69,6 +67,7 @@ const handleRefresh = async () => {
 					color="light"
 					size="xs"
 					data-testid="deposit-button"
+					title="Deposit to vault"
 					aria-label="Deposit to vault"
 					on:click={() => onDeposit(raindexClient, data)}
 				>
@@ -78,6 +77,7 @@ const handleRefresh = async () => {
 					color="light"
 					size="xs"
 					data-testid="withdraw-button"
+					title="Withdraw from vault"
 					aria-label="Withdraw from vault"
 					on:click={() => onWithdraw(raindexClient, data)}
 				>
@@ -87,6 +87,8 @@ const handleRefresh = async () => {
 
 			<Refresh
 				testId="top-refresh"
+				title="Refresh vault"
+				ariaLabel="Refresh vault"
 				on:click={handleRefresh}
 				spin={$vaultDetailQuery.isLoading || $vaultDetailQuery.isFetching}
 			/>
@@ -98,10 +100,10 @@ const handleRefresh = async () => {
 			<svelte:fragment slot="value">{toHex(data.vaultId)}</svelte:fragment>
 		</CardProperty>
 
-		<CardProperty data-testid="vaultDetailOrderbookAddress">
-			<svelte:fragment slot="key">Orderbook</svelte:fragment>
+		<CardProperty data-testid="vaultDetailRaindexAddress">
+			<svelte:fragment slot="key">Raindex</svelte:fragment>
 			<svelte:fragment slot="value">
-				<Hash type={HashType.Identifier} value={data.orderbook} />
+				<Hash type={HashType.Identifier} value={data.raindex} />
 			</svelte:fragment>
 		</CardProperty>
 
@@ -145,7 +147,7 @@ const handleRefresh = async () => {
 				<p data-testid="vaultDetailOrdersAsInput" class="flex flex-wrap justify-start">
 					{#if data.ordersAsInput && data.ordersAsInput.length > 0}
 						{#each data.ordersAsInput as order}
-							<OrderOrVaultHash type="orders" orderOrVault={order} {chainId} {orderbookAddress} />
+							<OrderOrVaultHash type="orders" orderOrVault={order} {chainId} {raindexAddress} />
 						{/each}
 					{:else}
 						None
@@ -160,7 +162,7 @@ const handleRefresh = async () => {
 				<p data-testid="vaultDetailOrdersAsOutput" class="flex flex-wrap justify-start">
 					{#if data.ordersAsOutput && data.ordersAsOutput.length > 0}
 						{#each data.ordersAsOutput as order}
-							<OrderOrVaultHash type="orders" orderOrVault={order} {chainId} {orderbookAddress} />
+							<OrderOrVaultHash type="orders" orderOrVault={order} {chainId} {raindexAddress} />
 						{/each}
 					{:else}
 						None

package/dist/components/detail/VaultDetail.svelte.d.ts

@@ -1,9 +1,9 @@
 import { SvelteComponent } from "svelte";
-import { RaindexClient, type Address, type Hex, type RaindexVault } from '@rainlanguage/orderbook';
+import { RaindexClient, type Address, type Hex, type RaindexVault } from '@rainlanguage/raindex';
 declare const __propDef: {
     props: {
         id: Hex;
-        orderbookAddress: Address;
+        raindexAddress: Address;
         chainId: number;
         /**
              * Required callback function when deposit action is triggered for a vault

package/dist/components/dropdown/{DropdownOrderbooksFilter.svelte → DropdownRaindexesFilter.svelte}

@@ -3,22 +3,22 @@ import { ChevronDownSolid, SearchSolid } from "flowbite-svelte-icons";
 import { isEmpty } from "lodash";
 import { getNetworkName } from "../../utils/getNetworkName";
 import { useRaindexClient } from "../../hooks/useRaindexClient";
-export let activeOrderbookAddresses;
-export let selectedOrderbookAddresses;
+export let activeRaindexAddresses;
+export let selectedRaindexAddresses;
 export let selectedChainIds;
-export let label = "Filter by orderbook";
-export let allLabel = "All orderbooks";
-export let emptyMessage = "No orderbooks available";
+export let label = "Filter by raindex";
+export let allLabel = "All raindexes";
+export let emptyMessage = "No raindexes available";
 const raindexClient = useRaindexClient();
-let filteredOrderbooks = [];
+let filteredRaindexes = [];
 let searchTerm = "";
 let selectedIndex = 0;
-$: orderbooksResult = raindexClient.getAllOrderbooks();
-$: orderbooksMap = orderbooksResult?.value ?? /* @__PURE__ */ new Map();
-$: orderbooksError = orderbooksResult?.error;
-$: availableOrderbooks = (() => {
+$: raindexesResult = raindexClient.getAllRaindexes();
+$: raindexesMap = raindexesResult?.value ?? /* @__PURE__ */ new Map();
+$: raindexesError = raindexesResult?.error;
+$: availableRaindexes = (() => {
   const items = [];
-  orderbooksMap.forEach((cfg, key) => {
+  raindexesMap.forEach((cfg, key) => {
     if (selectedChainIds.length === 0 || selectedChainIds.includes(cfg.network.chainId)) {
       items.push({
         key,
@@ -30,62 +30,62 @@ $: availableOrderbooks = (() => {
   });
   return items;
 })();
-$: selectedCount = selectedOrderbookAddresses.length;
-$: allSelected = selectedCount === availableOrderbooks.length && availableOrderbooks.length > 0;
-$: buttonText = selectedCount === 0 ? "Select orderbooks" : allSelected ? allLabel : `${selectedCount} orderbook${selectedCount > 1 ? "s" : ""}`;
+$: selectedCount = selectedRaindexAddresses.length;
+$: allSelected = selectedCount === availableRaindexes.length && availableRaindexes.length > 0;
+$: buttonText = selectedCount === 0 ? "Select raindexes" : allSelected ? allLabel : `${selectedCount} raindex${selectedCount > 1 ? "es" : ""}`;
 $: {
   if (searchTerm.trim() === "") {
-    filteredOrderbooks = availableOrderbooks;
+    filteredRaindexes = availableRaindexes;
     selectedIndex = 0;
   } else {
     const term = searchTerm.toLowerCase();
-    filteredOrderbooks = availableOrderbooks.filter(
-      (ob) => ob.label?.toLowerCase().includes(term) || ob.address?.toLowerCase().includes(term) || ob.key?.toLowerCase().includes(term)
+    filteredRaindexes = availableRaindexes.filter(
+      (raindex) => raindex.label?.toLowerCase().includes(term) || raindex.address?.toLowerCase().includes(term) || raindex.key?.toLowerCase().includes(term)
     );
-    selectedIndex = filteredOrderbooks.length > 0 ? 0 : -1;
+    selectedIndex = filteredRaindexes.length > 0 ? 0 : -1;
   }
 }
-$: sortedFilteredOrderbooks = [...filteredOrderbooks].sort((a, b) => {
-  const aSelected = selectedOrderbookAddresses.some(
+$: sortedFilteredRaindexes = [...filteredRaindexes].sort((a, b) => {
+  const aSelected = selectedRaindexAddresses.some(
     (addr) => addr.toLowerCase() === a.address.toLowerCase()
   );
-  const bSelected = selectedOrderbookAddresses.some(
+  const bSelected = selectedRaindexAddresses.some(
     (addr) => addr.toLowerCase() === b.address.toLowerCase()
   );
   if (aSelected === bSelected) return 0;
   return aSelected ? -1 : 1;
 });
-function getDisplayName(ob) {
-  const truncatedAddr = `${ob.address.slice(0, 6)}...${ob.address.slice(-4)}`;
-  return ob.label ? `${ob.label} (${truncatedAddr})` : truncatedAddr;
+function getDisplayName(raindex) {
+  const truncatedAddr = `${raindex.address.slice(0, 6)}...${raindex.address.slice(-4)}`;
+  return raindex.label ? `${raindex.label} (${truncatedAddr})` : truncatedAddr;
 }
-function updateSelectedOrderbooks(newSelection) {
-  activeOrderbookAddresses.set(newSelection);
+function updateSelectedRaindexes(newSelection) {
+  activeRaindexAddresses.set(newSelection);
 }
-function toggleOrderbook({ address }) {
+function toggleRaindex({ address }) {
   if (!address) return;
   const normalizedAddress = address.toLowerCase();
-  const isSelected = selectedOrderbookAddresses.some(
+  const isSelected = selectedRaindexAddresses.some(
     (addr) => addr.toLowerCase() === normalizedAddress
   );
-  const newSelection = isSelected ? $activeOrderbookAddresses.filter((addr) => addr.toLowerCase() !== normalizedAddress) : [...$activeOrderbookAddresses, normalizedAddress];
-  updateSelectedOrderbooks(newSelection);
+  const newSelection = isSelected ? $activeRaindexAddresses.filter((addr) => addr.toLowerCase() !== normalizedAddress) : [...$activeRaindexAddresses, normalizedAddress];
+  updateSelectedRaindexes(newSelection);
 }
 function handleKeyDown(event) {
-  if (!sortedFilteredOrderbooks.length) return;
+  if (!sortedFilteredRaindexes.length) return;
   switch (event.key) {
     case "Enter":
       event.preventDefault();
-      if (sortedFilteredOrderbooks.length > 0) {
-        const orderbookToToggle = sortedFilteredOrderbooks[selectedIndex];
-        if (orderbookToToggle) {
-          toggleOrderbook(orderbookToToggle);
+      if (sortedFilteredRaindexes.length > 0) {
+        const raindexToToggle = sortedFilteredRaindexes[selectedIndex];
+        if (raindexToToggle) {
+          toggleRaindex(raindexToToggle);
         }
       }
       break;
     case "ArrowDown":
       event.preventDefault();
-      selectedIndex = Math.min(selectedIndex + 1, sortedFilteredOrderbooks.length - 1);
+      selectedIndex = Math.min(selectedIndex + 1, sortedFilteredRaindexes.length - 1);
       break;
     case "ArrowUp":
       event.preventDefault();
@@ -105,8 +105,8 @@ function handleKeyDown(event) {
 		<Button
 			color="alternative"
 			class="flex w-full justify-between overflow-hidden pl-2 pr-0 text-left"
-			data-testid="dropdown-orderbooks-filter-button"
-			aria-label="Select orderbooks to filter"
+			data-testid="dropdown-raindexes-filter-button"
+			aria-label="Select raindexes to filter"
 			aria-expanded="false"
 			aria-haspopup="listbox"
 		>
@@ -118,49 +118,49 @@ function handleKeyDown(event) {
 
 		<Dropdown
 			class="max-h-[75vh] w-full min-w-60 overflow-y-auto py-0"
-			data-testid="dropdown-orderbooks-filter"
+			data-testid="dropdown-raindexes-filter"
 		>
-			{#if orderbooksError}
+			{#if raindexesError}
 				<div class="ml-2 w-full rounded-lg p-3 text-red-500">
-					Cannot load orderbooks list: {orderbooksError.readableMsg || 'Unknown error'}
+					Cannot load raindexes list: {raindexesError.readableMsg || 'Unknown error'}
 				</div>
-			{:else if isEmpty(availableOrderbooks)}
+			{:else if isEmpty(availableRaindexes)}
 				<div class="ml-2 w-full rounded-lg p-3">{emptyMessage}</div>
 			{:else}
 				<div class="sticky top-0 bg-white p-3 dark:bg-gray-800">
 					<Input
-						placeholder="Search orderbooks..."
+						placeholder="Search raindexes..."
 						bind:value={searchTerm}
 						autofocus
 						on:keydown={handleKeyDown}
-						data-testid="orderbooks-filter-search"
+						data-testid="raindexes-filter-search"
 					>
 						<SearchSolid slot="left" class="h-4 w-4 text-gray-500" />
 					</Input>
 				</div>
 
-				{#if isEmpty(filteredOrderbooks)}
-					<div class="ml-2 w-full rounded-lg p-3">No orderbooks match your search</div>
+				{#if isEmpty(filteredRaindexes)}
+					<div class="ml-2 w-full rounded-lg p-3">No raindexes match your search</div>
 				{:else}
-					{#each sortedFilteredOrderbooks as orderbook, index (`${orderbook.address}-${orderbook.chainId}`)}
+					{#each sortedFilteredRaindexes as raindex, index (`${raindex.address}-${raindex.chainId}`)}
 						<Checkbox
-							data-testid="dropdown-orderbooks-filter-option"
+							data-testid="dropdown-raindexes-filter-option"
 							class="w-full rounded-lg p-3 hover:bg-gray-100 dark:hover:bg-gray-600 {selectedIndex ===
 							index
 								? 'bg-blue-100 dark:bg-blue-900'
 								: ''}"
-							on:click={() => toggleOrderbook(orderbook)}
+							on:click={() => toggleRaindex(raindex)}
 							checked={!!(
-								orderbook.address &&
-								selectedOrderbookAddresses.some(
-									(addr) => addr.toLowerCase() === orderbook.address.toLowerCase()
+								raindex.address &&
+								selectedRaindexAddresses.some(
+									(addr) => addr.toLowerCase() === raindex.address.toLowerCase()
 								)
 							)}
 						>
 							<div class="ml-2 flex w-full">
-								<div class="flex-1 text-sm font-medium">{getDisplayName(orderbook)}</div>
+								<div class="flex-1 text-sm font-medium">{getDisplayName(raindex)}</div>
 								<div class="text-xs text-gray-500">
-									{getNetworkName(orderbook.chainId)}
+									{getNetworkName(raindex.chainId)}
 								</div>
 							</div>
 						</Checkbox>

package/dist/components/dropdown/DropdownRaindexesFilter.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+import type { Address } from '@rainlanguage/raindex';
+import type { AppStoresInterface } from '../../types/appStores';
+declare const __propDef: {
+    props: {
+        activeRaindexAddresses: AppStoresInterface["activeRaindexAddresses"];
+        selectedRaindexAddresses: Address[];
+        selectedChainIds: number[];
+        label?: string;
+        allLabel?: string;
+        emptyMessage?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type DropdownRaindexesFilterProps = typeof __propDef.props;
+export type DropdownRaindexesFilterEvents = typeof __propDef.events;
+export type DropdownRaindexesFilterSlots = typeof __propDef.slots;
+export default class DropdownRaindexesFilter extends SvelteComponent<DropdownRaindexesFilterProps, DropdownRaindexesFilterEvents, DropdownRaindexesFilterSlots> {
+}
+export {};

package/dist/components/dropdown/DropdownTokensFilter.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { Address, RaindexVaultToken } from '@rainlanguage/orderbook';
+import type { Address, RaindexVaultToken } from '@rainlanguage/raindex';
 import type { AppStoresInterface } from '../../types/appStores';
 import type { Readable } from 'svelte/store';
 import type { QueryObserverResult } from '@tanstack/svelte-query';

package/dist/components/icon/Refresh.svelte

@@ -11,6 +11,7 @@ const sizes = {
 export let size = ctx.size || "md";
 export let role = ctx.role || "img";
 export let ariaLabel = "refresh";
+export let title = "Refresh";
 export let spin = false;
 export let testId = "refresh-button";
 </script>
@@ -19,7 +20,7 @@ export let testId = "refresh-button";
 	data-testid={testId}
 	xmlns="http://www.w3.org/2000/svg"
 	fill="none"
-	{...$$restProps}
+	{...{ title, ...$$restProps }}
 	class={twMerge(
 		'shrink-0 cursor-pointer outline-none',
 		sizes[size],

package/dist/components/icon/Refresh.svelte.d.ts

@@ -6,6 +6,7 @@ declare const __propDef: {
         size?: ("xs" | "sm" | "md" | "lg" | "xl") | undefined;
         role?: AriaRole | undefined;
         ariaLabel?: string | undefined;
+        title?: string | undefined;
         spin?: boolean | undefined;
         testId?: string | undefined;
     };

package/dist/components/input/InputTokenAmount.svelte

@@ -1,12 +1,20 @@
 <script>import { InputAddon, Button } from "flowbite-svelte";
-import { Float } from "@rainlanguage/orderbook";
+import { Float } from "@rainlanguage/raindex";
+import { validateAmount } from "../../services/validateAmount";
 export let symbol = void 0;
 export let maxValue = void 0;
 export let value = Float.parse("0").value;
 let inputValue = "";
+let decimalsError = null;
 function handleInput(event) {
   const input = event.target;
   inputValue = input.value;
+  const decimalsValidation = validateAmount(inputValue);
+  decimalsError = decimalsValidation.errorMessage;
+  if (!decimalsValidation.isValid) {
+    value = Float.parse("0").value;
+    return;
+  }
   if (inputValue === "") {
     value = Float.parse("0").value;
   } else {
@@ -21,6 +29,7 @@ function handleInput(event) {
 function fillMaxValue() {
   if (!maxValue) return;
   value = maxValue;
+  decimalsError = null;
   let formattedValue = value.format().value;
   if (!formattedValue) {
     inputValue = "";
@@ -55,4 +64,10 @@ function fillMaxValue() {
 			</InputAddon>
 		{/if}
 	</div>
+
+	{#if decimalsError}
+		<p class="mt-1 text-sm text-red-500" data-testid="decimals-error">
+			{decimalsError}
+		</p>
+	{/if}
 </div>

package/dist/components/input/InputTokenAmount.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import { Float } from '@rainlanguage/orderbook';
+import { Float } from '@rainlanguage/raindex';
 declare const __propDef: {
     props: {
         symbol?: string | undefined;

package/dist/components/tables/OrderTradesListTable.svelte

@@ -28,7 +28,10 @@ $: orderTradesQuery = createInfiniteQuery({
   },
   initialPageParam: 0,
   getNextPageParam: (lastPage, allPages, lastPageParam) => {
-    const fetchedCount = allPages.reduce((sum, p) => sum + p.trades.length, 0);
+    const fetchedCount = allPages.reduce(
+      (sum, p) => sum + p.trades.length,
+      0
+    );
     return fetchedCount < Number(lastPage.totalCount) ? lastPageParam + 1 : void 0;
   }
 });
@@ -36,103 +39,115 @@ const AppTable = TanstackAppTable;
 </script>
 
 <AppTable
-	query={orderTradesQuery}
-	dataSelector={(page) => page.trades}
-	emptyMessage="No trades found"
-	rowHoverable={false}
-	queryKey={order.id}
+  query={orderTradesQuery}
+  dataSelector={(page) => page.trades}
+  emptyMessage="No trades found"
+  rowHoverable={false}
+  queryKey={order.id}
 >
-	<svelte:fragment slot="info">
-		{#if tradesCount !== undefined}
-			<div class="px-2">{tradesCount} Trades</div>
-		{/if}
-	</svelte:fragment>
-	<svelte:fragment slot="timeFilter">
-		<TableTimeFilters bind:startTimestamp bind:endTimestamp />
-	</svelte:fragment>
-	<svelte:fragment slot="head">
-		<TableHeadCell padding="p-4" class="w-[15%]">Date</TableHeadCell>
-		<TableHeadCell padding="p-4" class="w-[20%]">Transaction</TableHeadCell>
-		<TableHeadCell padding="p-2" class="w-[18%]">Input</TableHeadCell>
-		<TableHeadCell padding="p-2" class="w-[18%]">Output</TableHeadCell>
-		<TableHeadCell padding="p-2" class="w-[25%]">IO Ratio</TableHeadCell>
-		<TableHeadCell padding="p-0" class="w-[4%]"><span class="sr-only">Actions</span></TableHeadCell>
-	</svelte:fragment>
+  <svelte:fragment slot="info">
+    {#if tradesCount !== undefined}
+      <div class="px-2">{tradesCount} Trades</div>
+    {/if}
+  </svelte:fragment>
+  <svelte:fragment slot="timeFilter">
+    <TableTimeFilters bind:startTimestamp bind:endTimestamp />
+  </svelte:fragment>
+  <svelte:fragment slot="head">
+    <TableHeadCell padding="p-4" class="w-[15%]">Date</TableHeadCell>
+    <TableHeadCell padding="p-4" class="w-[20%]">Transaction</TableHeadCell>
+    <TableHeadCell padding="p-2" class="w-[18%]">Input</TableHeadCell>
+    <TableHeadCell padding="p-2" class="w-[18%]">Output</TableHeadCell>
+    <TableHeadCell padding="p-2" class="w-[25%]">IO Ratio</TableHeadCell>
+    <TableHeadCell padding="p-0" class="w-[4%]"
+      ><span class="sr-only">Actions</span></TableHeadCell
+    >
+  </svelte:fragment>
 
-	<svelte:fragment slot="bodyRow" let:item>
-		{@const inputAmt = Number(item.inputVaultBalanceChange.formattedAmount)}
-		{@const outputAmt = Number(item.outputVaultBalanceChange.formattedAmount)}
-		{@const ioRatio = Math.abs(inputAmt / outputAmt)}
-		{@const oiRatio = Math.abs(outputAmt / inputAmt)}
-		{@const validRatio = Number.isFinite(ioRatio) && Number.isFinite(oiRatio)}
-		<TableBodyCell tdClass="px-4 py-2">
-			{formatTimestampSecondsAsLocal(BigInt(item.timestamp))}
-		</TableBodyCell>
-		<TableBodyCell 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">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="p-2" data-testid="input">
-			<div class="flex flex-col overflow-hidden">
-				<span class="truncate font-medium">{item.inputVaultBalanceChange.token.symbol}</span>
-				<span id={`input-${item.id}`} class="truncate text-sm text-gray-500 dark:text-gray-400"
-					>{item.inputVaultBalanceChange.formattedAmount}</span
-				>
-				<Tooltip triggeredBy={`#input-${item.id}`}>
-					{item.inputVaultBalanceChange.formattedAmount}
-					{item.inputVaultBalanceChange.token.symbol}
-				</Tooltip>
-			</div>
-		</TableBodyCell>
-		<TableBodyCell tdClass="p-2" data-testid="output">
-			<div class="flex flex-col overflow-hidden">
-				<span class="truncate font-medium">{item.outputVaultBalanceChange.token.symbol}</span>
-				<span id={`output-${item.id}`} class="truncate text-sm text-gray-500 dark:text-gray-400"
-					>{item.outputVaultBalanceChange.formattedAmount}</span
-				>
-				<Tooltip triggeredBy={`#output-${item.id}`}>
-					{item.outputVaultBalanceChange.formattedAmount}
-					{item.outputVaultBalanceChange.token.symbol}
-				</Tooltip>
-			</div>
-		</TableBodyCell>
-		<TableBodyCell tdClass="p-2" data-testid="io-ratio">
-			<div id={`io-ratio-${item.id}`} class="truncate">
-				{#if validRatio}
-					{ioRatio}
-					<span class="text-gray-400">({oiRatio})</span>
-				{:else}
-					-
-				{/if}
-			</div>
-			<Tooltip triggeredBy={`#io-ratio-${item.id}`}>
-				{#if validRatio}
-					{ioRatio} ({oiRatio})
-				{:else}
-					-
-				{/if}
-			</Tooltip>
-		</TableBodyCell>
-		<TableBodyCell tdClass="py-2">
-			{#if rpcs && handleDebugTradeModal}
-				<button
-					data-testid="debug-trade-button"
-					class="text-gray-500 hover:text-gray-700"
-					on:click={() => {
-						if (rpcs) handleDebugTradeModal(item.transaction.id, rpcs);
-					}}
-				>
-					<BugOutline size="xs" />
-				</button>
-			{/if}
-		</TableBodyCell>
-	</svelte:fragment>
+  <svelte:fragment slot="bodyRow" let:item>
+    {@const inputAmt = Number(item.inputVaultBalanceChange.formattedAmount)}
+    {@const outputAmt = Number(item.outputVaultBalanceChange.formattedAmount)}
+    {@const ioRatio = Math.abs(inputAmt / outputAmt)}
+    {@const oiRatio = Math.abs(outputAmt / inputAmt)}
+    {@const validRatio = Number.isFinite(ioRatio) && Number.isFinite(oiRatio)}
+    <TableBodyCell tdClass="px-4 py-2">
+      {formatTimestampSecondsAsLocal(BigInt(item.timestamp))}
+    </TableBodyCell>
+    <TableBodyCell 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">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="p-2" data-testid="input">
+      <div class="flex flex-col overflow-hidden">
+        <span class="truncate font-medium"
+          >{item.inputVaultBalanceChange.token.symbol}</span
+        >
+        <span
+          id={`input-${item.id}`}
+          class="truncate text-sm text-gray-500 dark:text-gray-400"
+          >{item.inputVaultBalanceChange.formattedAmount}</span
+        >
+        <Tooltip triggeredBy={`#input-${item.id}`}>
+          {item.inputVaultBalanceChange.formattedAmount}
+          {item.inputVaultBalanceChange.token.symbol}
+        </Tooltip>
+      </div>
+    </TableBodyCell>
+    <TableBodyCell tdClass="p-2" data-testid="output">
+      <div class="flex flex-col overflow-hidden">
+        <span class="truncate font-medium"
+          >{item.outputVaultBalanceChange.token.symbol}</span
+        >
+        <span
+          id={`output-${item.id}`}
+          class="truncate text-sm text-gray-500 dark:text-gray-400"
+          >{item.outputVaultBalanceChange.formattedAmount}</span
+        >
+        <Tooltip triggeredBy={`#output-${item.id}`}>
+          {item.outputVaultBalanceChange.formattedAmount}
+          {item.outputVaultBalanceChange.token.symbol}
+        </Tooltip>
+      </div>
+    </TableBodyCell>
+    <TableBodyCell tdClass="p-2" data-testid="io-ratio">
+      <div id={`io-ratio-${item.id}`} class="truncate">
+        {#if validRatio}
+          {ioRatio}
+          <span class="text-gray-400">({oiRatio})</span>
+        {:else}
+          -
+        {/if}
+      </div>
+      <Tooltip triggeredBy={`#io-ratio-${item.id}`}>
+        {#if validRatio}
+          {ioRatio} ({oiRatio})
+        {:else}
+          -
+        {/if}
+      </Tooltip>
+    </TableBodyCell>
+    <TableBodyCell tdClass="py-2">
+      {#if rpcs && handleDebugTradeModal}
+        <button
+          data-testid="debug-trade-button"
+          class="text-gray-500 hover:text-gray-700"
+          title="Debug trade"
+          aria-label="Debug trade"
+          on:click={() => {
+            if (rpcs) handleDebugTradeModal(item.transaction.id, rpcs);
+          }}
+        >
+          <BugOutline size="xs" />
+        </button>
+      {/if}
+    </TableBodyCell>
+  </svelte:fragment>
 </AppTable>

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

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

package/dist/components/tables/OrderVaultsVolTable.svelte

@@ -1,7 +1,7 @@
 <script>import { createInfiniteQuery } from "@tanstack/svelte-query";
 import TanstackAppTable from "../TanstackAppTable.svelte";
 import { QKEY_VAULTS_VOL_LIST } from "../../queries/keys";
-import {} from "@rainlanguage/orderbook";
+import {} from "@rainlanguage/raindex";
 import { TableBodyCell, TableHeadCell } from "flowbite-svelte";
 import Hash, { HashType } from "../Hash.svelte";
 import TableTimeFilters from "../charts/TableTimeFilters.svelte";