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

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,40 +1,38 @@
 <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,
+    const [countResult, tradesResult] = await Promise.all([
+      order.getTradeCount(
         startTimestamp ? BigInt(startTimestamp) : void 0,
         endTimestamp ? BigInt(endTimestamp) : void 0
       ),
-      getOrderTradesList(
-        subgraphUrl || "",
-        id,
-        { page: pageParam + 1, pageSize: DEFAULT_PAGE_SIZE },
+      order.getTradesList(
         startTimestamp ? BigInt(startTimestamp) : void 0,
-        endTimestamp ? BigInt(endTimestamp) : void 0
+        endTimestamp ? BigInt(endTimestamp) : void 0,
+        pageParam + 1
       )
     ]);
+    if (countResult.error) throw new Error(countResult.error.readableMsg);
+    if (tradesResult.error) throw new Error(tradesResult.error.readableMsg);
+    const count = countResult.value;
+    const trades = tradesResult.value;
     if (typeof count === "number") {
       tradesCount = count;
     }
@@ -43,16 +41,16 @@ $: orderTradesQuery = createInfiniteQuery({
   initialPageParam: 0,
   getNextPageParam: (lastPage, _allPages, lastPageParam) => {
     return lastPage.length === DEFAULT_PAGE_SIZE ? lastPageParam + 1 : void 0;
-  },
-  enabled: !!subgraphUrl
+  }
 });
+const AppTable = TanstackAppTable;
 </script>
 
-<TanstackAppTable
+<AppTable
 	query={orderTradesQuery}
 	emptyMessage="No trades found"
 	rowHoverable={false}
-	queryKey={id}
+	queryKey={order.id}
 >
 	<svelte:fragment slot="info">
 		{#if tradesCount !== undefined}
@@ -63,83 +61,88 @@ $: orderTradesQuery = createInfiniteQuery({
 		<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>
+		<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="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 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="break-all py-2">
-			{formatUnits(
-				BigInt(item.inputVaultBalanceChange.amount),
-				Number(item.inputVaultBalanceChange.vault.token.decimals ?? 0)
-			)}
-			{item.inputVaultBalanceChange.vault.token.symbol}
+		<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="break-all py-2">
-			{formatUnits(
-				BigInt(item.outputVaultBalanceChange.amount) * BigInt(-1),
-				Number(item.outputVaultBalanceChange.vault.token.decimals ?? 0)
-			)}
-			{item.outputVaultBalanceChange.vault.token.symbol}
+		<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="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 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>
-		{#if rpcUrl && handleDebugTradeModal}
-			<TableBodyCell tdClass="py-2">
+		<TableBodyCell tdClass="py-2">
+			{#if rpcs && handleDebugTradeModal}
 				<button
 					data-testid="debug-trade-button"
 					class="text-gray-500 hover:text-gray-700"
 					on:click={() => {
-						if (rpcUrl) handleDebugTradeModal(item.tradeEvent.transaction.id, rpcUrl);
+						if (rpcs) handleDebugTradeModal(item.transaction.id, rpcs);
 					}}
 				>
 					<BugOutline size="xs" />
 				</button>
-			</TableBodyCell>
-		{/if}
+			{/if}
+		</TableBodyCell>
 	</svelte:fragment>
-</TanstackAppTable>
+</AppTable>

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

@@ -1,10 +1,10 @@
 import { SvelteComponent } from "svelte";
+import type { RaindexOrder } from '@rainlanguage/orderbook';
 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/orderbook";
 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/orderbook';
 declare const __propDef: {
     props: {
-        id: string;
-        subgraphUrl: string;
+        order: RaindexOrder;
     };
     events: {
         [evt: string]: CustomEvent<any>;