@rainlanguage/ui-components 0.0.1-alpha.24 → 0.0.1-alpha.241

package/dist/components/tables/OrderAPY.svelte

@@ -1,39 +1,10 @@
-<script>import { createInfiniteQuery } from "@tanstack/svelte-query";
-import TanstackAppTable from "../TanstackAppTable.svelte";
-import { QKEY_ORDER_APY } from "../../queries/keys";
-import { getOrderPerformance } from "@rainlanguage/orderbook/js_api";
-import { TableBodyCell, TableHeadCell } from "flowbite-svelte";
-import ApyTimeFilters from "../charts/APYTimeFilters.svelte";
-import { bigintStringToPercentage } from "../../utils/number";
-export let id;
-export let subgraphUrl;
-let startTimestamp;
-let endTimestamp;
-$: queryStartTime = startTimestamp ? BigInt(startTimestamp) : void 0;
-$: queryEndTime = endTimestamp ? BigInt(endTimestamp) : void 0;
-$: orderPerformance = createInfiniteQuery({
-  queryKey: [id, QKEY_ORDER_APY + id],
-  queryFn: async () => {
-    return [
-      await getOrderPerformance(
-        subgraphUrl || "",
-        id,
-        queryStartTime,
-        queryEndTime
-      )
-    ];
-  },
-  initialPageParam: 0,
-  getNextPageParam: () => void 0,
-  enabled: !!subgraphUrl
-});
-</script>
+<script></script>
 
-<TanstackAppTable
+<!-- <TanstackAppTable
 	query={orderPerformance}
 	emptyMessage="APY Unavailable"
 	rowHoverable={false}
-	queryKey={id}
+	queryKey={order.id}
 >
 	<svelte:fragment slot="timeFilter">
 		<ApyTimeFilters bind:startTimestamp bind:endTimestamp />
@@ -54,4 +25,6 @@ $: orderPerformance = createInfiniteQuery({
 				: 'Unavailable APY'}
 		</TableBodyCell>
 	</svelte:fragment>
-</TanstackAppTable>
+</TanstackAppTable> -->
+
+<div>TODO: Issue #1989</div>

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

@@ -1,9 +1,6 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
-    props: {
-        id: string;
-        subgraphUrl: string;
-    };
+    props: Record<string, never>;
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/tables/OrderTradesListTable.svelte

@@ -1,145 +1,153 @@
 <script>import { createInfiniteQuery } from "@tanstack/svelte-query";
 import TanstackAppTable from "../TanstackAppTable.svelte";
 import { QKEY_ORDER_TRADES_LIST } from "../../queries/keys";
-import { getOrderTradesList, getOrderTradesCount } from "@rainlanguage/orderbook/js_api";
-import { DEFAULT_PAGE_SIZE } from "../../queries/constants";
 import { TableBodyCell, TableHeadCell } from "flowbite-svelte";
-import { formatTimestampSecondsAsLocal } from "../../utils/time";
+import { formatTimestampSecondsAsLocal } from "../../services/time";
 import Hash, { HashType } from "../Hash.svelte";
-import { formatUnits } from "viem";
 import { BugOutline } from "flowbite-svelte-icons";
 import TableTimeFilters from "../charts/TableTimeFilters.svelte";
-export let id;
-export let subgraphUrl;
-export let rpcUrl = void 0;
+import Tooltip from "../Tooltip.svelte";
+export let order;
+export let rpcs = void 0;
 export let handleDebugTradeModal = void 0;
 let startTimestamp;
 let endTimestamp;
 let tradesCount;
 $: orderTradesQuery = createInfiniteQuery({
-  queryKey: [id, QKEY_ORDER_TRADES_LIST + id],
+  queryKey: [order.id, QKEY_ORDER_TRADES_LIST + order.id],
   queryFn: async ({ pageParam }) => {
     tradesCount = void 0;
-    const [count, trades] = await Promise.all([
-      getOrderTradesCount(
-        subgraphUrl || "",
-        id,
-        startTimestamp ? BigInt(startTimestamp) : void 0,
-        endTimestamp ? BigInt(endTimestamp) : void 0
-      ),
-      getOrderTradesList(
-        subgraphUrl || "",
-        id,
-        { page: pageParam + 1, pageSize: DEFAULT_PAGE_SIZE },
-        startTimestamp ? BigInt(startTimestamp) : void 0,
-        endTimestamp ? BigInt(endTimestamp) : void 0
-      )
-    ]);
-    if (typeof count === "number") {
-      tradesCount = count;
-    }
-    return trades;
+    const result = await order.getTradesList(
+      startTimestamp ? BigInt(startTimestamp) : void 0,
+      endTimestamp ? BigInt(endTimestamp) : void 0,
+      pageParam + 1
+    );
+    if (result.error) throw new Error(result.error.readableMsg);
+    tradesCount = Number(result.value.totalCount);
+    return result.value;
   },
   initialPageParam: 0,
-  getNextPageParam: (lastPage, _allPages, lastPageParam) => {
-    return lastPage.length === DEFAULT_PAGE_SIZE ? lastPageParam + 1 : void 0;
-  },
-  enabled: !!subgraphUrl
+  getNextPageParam: (lastPage, allPages, lastPageParam) => {
+    const fetchedCount = allPages.reduce(
+      (sum, p) => sum + p.trades.length,
+      0
+    );
+    return fetchedCount < Number(lastPage.totalCount) ? lastPageParam + 1 : void 0;
+  }
 });
+const AppTable = TanstackAppTable;
 </script>
 
-<TanstackAppTable
-	query={orderTradesQuery}
-	emptyMessage="No trades found"
-	rowHoverable={false}
-	queryKey={id}
+<AppTable
+  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">Date</TableHeadCell>
-		<TableHeadCell padding="p-0">Sender</TableHeadCell>
-		<TableHeadCell padding="p-0">Transaction Hash</TableHeadCell>
-		<TableHeadCell padding="p-0">Input</TableHeadCell>
-		<TableHeadCell padding="p-0">Output</TableHeadCell>
-		<TableHeadCell padding="p-0">IO Ratio</TableHeadCell>
-		<TableHeadCell padding="p-0"></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>
-		<TableBodyCell tdClass="px-4 py-2">
-			{formatTimestampSecondsAsLocal(BigInt(item.timestamp))}
-		</TableBodyCell>
-		<TableBodyCell tdClass="break-all py-2 min-w-32">
-			<Hash type={HashType.Wallet} value={item.tradeEvent.transaction.from} />
-		</TableBodyCell>
-		<TableBodyCell tdClass="break-all py-2 min-w-32">
-			<Hash type={HashType.Transaction} value={item.tradeEvent.transaction.id} />
-		</TableBodyCell>
-		<TableBodyCell tdClass="break-all py-2">
-			{formatUnits(
-				BigInt(item.inputVaultBalanceChange.amount),
-				Number(item.inputVaultBalanceChange.vault.token.decimals ?? 0)
-			)}
-			{item.inputVaultBalanceChange.vault.token.symbol}
-		</TableBodyCell>
-		<TableBodyCell tdClass="break-all py-2">
-			{formatUnits(
-				BigInt(item.outputVaultBalanceChange.amount) * BigInt(-1),
-				Number(item.outputVaultBalanceChange.vault.token.decimals ?? 0)
-			)}
-			{item.outputVaultBalanceChange.vault.token.symbol}
-		</TableBodyCell>
-		<TableBodyCell tdClass="break-all py-2" data-testid="io-ratio">
-			{Math.abs(
-				Number(
-					formatUnits(
-						BigInt(item.inputVaultBalanceChange.amount),
-						Number(item.inputVaultBalanceChange.vault.token.decimals ?? 0)
-					)
-				) /
-					Number(
-						formatUnits(
-							BigInt(item.outputVaultBalanceChange.amount),
-							Number(item.outputVaultBalanceChange.vault.token.decimals ?? 0)
-						)
-					)
-			)}
-			<span class="text-gray-400">
-				({Math.abs(
-					Number(
-						formatUnits(
-							BigInt(item.outputVaultBalanceChange.amount),
-							Number(item.outputVaultBalanceChange.vault.token.decimals ?? 0)
-						)
-					) /
-						Number(
-							formatUnits(
-								BigInt(item.inputVaultBalanceChange.amount),
-								Number(item.inputVaultBalanceChange.vault.token.decimals ?? 0)
-							)
-						)
-				)})
-			</span>
-		</TableBodyCell>
-		{#if rpcUrl && handleDebugTradeModal}
-			<TableBodyCell tdClass="py-2">
-				<button
-					data-testid="debug-trade-button"
-					class="text-gray-500 hover:text-gray-700"
-					on:click={() => {
-						if (rpcUrl) handleDebugTradeModal(item.tradeEvent.transaction.id, rpcUrl);
-					}}
-				>
-					<BugOutline size="xs" />
-				</button>
-			</TableBodyCell>
-		{/if}
-	</svelte:fragment>
-</TanstackAppTable>
+  <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,10 +1,10 @@
 import { SvelteComponent } from "svelte";
+import type { RaindexOrder } from "@rainlanguage/raindex";
 declare const __propDef: {
     props: {
-        id: string;
-        subgraphUrl: string;
-        rpcUrl?: string | undefined;
-        handleDebugTradeModal?: ((hash: string, rpcUrl: string) => void) | undefined;
+        order: RaindexOrder;
+        rpcs?: string[] | undefined;
+        handleDebugTradeModal?: ((hash: string, rpcs: string[]) => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/tables/OrderVaultsVolTable.svelte

@@ -1,33 +1,29 @@
 <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 {} from "@rainlanguage/raindex";
 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;
+export let order;
 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),
+  queryKey: [order.id, QKEY_VAULTS_VOL_LIST + order.id],
+  queryFn: async () => {
+    const result = await order.getVaultsVolume(queryStartTime, queryEndTime);
+    if (result.error) throw new Error(result.error.readableMsg);
+    return result.value;
+  },
   initialPageParam: 0,
-  getNextPageParam: () => void 0,
-  enabled: !!subgraphUrl
+  getNextPageParam: () => void 0
 });
+const AppTable = TanstackAppTable;
 </script>
 
-<TanstackAppTable
-	query={vaultsVol}
-	emptyMessage="No trades found"
-	rowHoverable={false}
-	queryKey={id}
->
+<AppTable query={vaultsVol} emptyMessage="No trades found" rowHoverable={false} queryKey={order.id}>
 	<svelte:fragment slot="timeFilter">
 		<TableTimeFilters bind:startTimestamp bind:endTimestamp />
 	</svelte:fragment>
@@ -42,7 +38,7 @@ $: vaultsVol = createInfiniteQuery({
 
 	<svelte:fragment slot="bodyRow" let:item>
 		<TableBodyCell tdClass="px-4 py-2">
-			<Hash type={HashType.Identifier} shorten value={bigintStringToHex(item.id)} />
+			<Hash type={HashType.Identifier} shorten value={item.id.toString()} />
 		</TableBodyCell>
 		<TableBodyCell tdClass="break-all py-2 min-w-32">
 			<div class="flex gap-x-3">
@@ -51,17 +47,16 @@ $: vaultsVol = createInfiniteQuery({
 			</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))}
+			{item.details.formattedTotalIn}
 		</TableBodyCell>
 		<TableBodyCell tdClass="break-all py-2" data-testid="total-out">
-			{formatUnits(BigInt(item.volDetails.totalOut), Number(item.token.decimals ?? 0))}
+			{item.details.formattedTotalOut}
 		</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))}
+			{item.details.formattedNetVol}
 		</TableBodyCell>
 		<TableBodyCell tdClass="break-all py-2" data-testid="total-vol">
-			{formatUnits(BigInt(item.volDetails.totalVol), Number(item.token.decimals ?? 0))}
+			{item.details.formattedTotalVol}
 		</TableBodyCell>
 	</svelte:fragment>
-</TanstackAppTable>
+</AppTable>

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

@@ -1,8 +1,8 @@
 import { SvelteComponent } from "svelte";
+import { type RaindexOrder } from '@rainlanguage/raindex';
 declare const __propDef: {
     props: {
-        id: string;
-        subgraphUrl: string;
+        order: RaindexOrder;
     };
     events: {
         [evt: string]: CustomEvent<any>;