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

package/dist/components/detail/OrderDetail.svelte

@@ -5,52 +5,88 @@ import OrderTradesListTable from "../tables/OrderTradesListTable.svelte";
 import TanstackOrderQuote from "./TanstackOrderQuote.svelte";
 import TanstackPageContentDetail from "./TanstackPageContentDetail.svelte";
 import CardProperty from "../CardProperty.svelte";
-import { formatTimestampSecondsAsLocal } from "../../utils/time";
+import { formatTimestampSecondsAsLocal } from "../../services/time";
 import ButtonVaultLink from "../ButtonVaultLink.svelte";
 import OrderVaultsVolTable from "../tables/OrderVaultsVolTable.svelte";
 import { QKEY_ORDER } from "../../queries/keys";
 import CodeMirrorRainlang from "../CodeMirrorRainlang.svelte";
-import { getOrderByHash } from "@rainlanguage/orderbook/js_api";
 import { createQuery, useQueryClient } from "@tanstack/svelte-query";
 import { Button, TabItem, Tabs, Tooltip } from "flowbite-svelte";
 import { onDestroy } from "svelte";
-import OrderApy from "../tables/OrderAPY.svelte";
-import { page } from "$app/stores";
-import DepositOrWithdrawButtons from "./DepositOrWithdrawButtons.svelte";
 import Refresh from "../icon/Refresh.svelte";
-import { invalidateIdQuery } from "../../queries/queryClient";
-import { InfoCircleOutline } from "flowbite-svelte-icons";
-export let handleDepositOrWithdrawModal = void 0;
-export let handleOrderRemoveModal = void 0;
+import { invalidateTanstackQueries } from "../../queries/queryClient";
+import {
+  ArrowDownToBracketOutline,
+  ArrowUpFromBracketOutline,
+  InfoCircleOutline,
+  WalletOutline
+} from "flowbite-svelte-icons";
+import { getExplorerLink } from "../../services/getExplorerLink";
+import { useAccount } from "../../providers/wallet/useAccount";
+import {
+  RaindexClient,
+  RaindexOrder,
+  RaindexVault,
+  RaindexVaultsList
+} from "@rainlanguage/raindex";
+import { useToasts } from "../../providers/toasts/useToasts";
+import { useRaindexClient } from "../../hooks/useRaindexClient";
 export let handleQuoteDebugModal = void 0;
-export const handleDebugTradeModal = void 0;
-export let colorTheme;
+export let handleDebugTradeModal = void 0;
 export let codeMirrorTheme;
 export let lightweightChartsTheme;
-export let orderbookAddress;
+export let raindexAddress;
 export let orderHash;
-export let rpcUrl;
-export let subgraphUrl;
 export let chainId;
-export let wagmiConfig = void 0;
-export let signerAddress = void 0;
+export let rpcs = void 0;
+export let onRemove;
+export let onDeposit;
+export let onWithdraw;
+export let onWithdrawAll = void 0;
+export let onTakeOrder = void 0;
 let codeMirrorDisabled = true;
 let codeMirrorStyles = {};
 const queryClient = useQueryClient();
+const { matchesAccount } = useAccount();
+const { errToast } = useToasts();
+const raindexClient = useRaindexClient();
 $: orderDetailQuery = createQuery({
-  queryKey: [orderHash, QKEY_ORDER + orderHash],
-  queryFn: () => {
-    return getOrderByHash(subgraphUrl, orderHash);
-  },
-  enabled: !!subgraphUrl
+  queryKey: [QKEY_ORDER, orderHash],
+  queryFn: async () => {
+    const result = await raindexClient.getOrderByHash(chainId, raindexAddress, orderHash);
+    if (result.error) throw new Error(result.error.readableMsg);
+    return result.value;
+  }
 });
 const interval = setInterval(async () => {
-  await invalidateIdQuery(queryClient, orderHash);
+  await invalidateTanstackQueries(queryClient, [orderHash]);
 }, 1e4);
 onDestroy(() => {
   clearInterval(interval);
 });
-$: subgraphName = $page.url.pathname.split("/")[2]?.split("-")[0];
+const handleRefresh = async () => {
+  try {
+    await invalidateTanstackQueries(queryClient, [orderHash]);
+  } catch {
+    errToast("Failed to refresh");
+  }
+};
+const vaultTypesMap = [
+  { key: "Output vaults", type: "output", getter: "outputsList" },
+  { key: "Input vaults", type: "input", getter: "inputsList" },
+  {
+    key: "Input & output vaults",
+    type: "inputOutput",
+    getter: "inputsOutputsList"
+  }
+];
+const formatBuilderState = (builderState) => {
+  try {
+    return JSON.stringify(JSON.parse(builderState), null, 2);
+  } catch {
+    return "Invalid builder state";
+  }
+};
 </script>
 
 <TanstackPageContentDetail query={orderDetailQuery} emptyMessage="Order not found">
@@ -61,35 +97,32 @@ $: subgraphName = $page.url.pathname.split("/")[2]?.split("-")[0];
 			<div class="flex items-center gap-x-2">
 				<div class="flex gap-x-2">
 					<span class="font-light">Order</span>
-					<Hash shorten value={data.order.orderHash} />
+					<Hash shorten value={data.orderHash} />
 				</div>
-
-				<BadgeActive active={data.order.active} large />
+				<BadgeActive active={data.active} large />
 			</div>
 
 			<div class="flex items-center gap-2">
-				{#if data && $signerAddress === data.order.owner && data.order.active && handleOrderRemoveModal && $wagmiConfig && chainId && orderbookAddress}
+				{#if matchesAccount(data.owner) && data.active}
 					<Button
+						on:click={() => onRemove(raindexClient, data)}
 						data-testid="remove-button"
-						color="dark"
-						on:click={() =>
-							handleOrderRemoveModal({
-								open: true,
-								args: {
-									order: data.order,
-									onRemove: $orderDetailQuery.refetch,
-									chainId,
-									orderbookAddress,
-									subgraphUrl
-								}
-							})}
-						disabled={!handleOrderRemoveModal}
+						aria-label="Remove order">Remove</Button
 					>
-						Remove
-					</Button>
 				{/if}
+				{#if data.active && onTakeOrder}
+					<Button
+						on:click={() => onTakeOrder(raindexClient, data)}
+						data-testid="take-order-button"
+						aria-label="Take order">Take Order</Button
+					>
+				{/if}
+
 				<Refresh
-					on:click={async () => await invalidateIdQuery(queryClient, orderHash)}
+					testId="top-refresh"
+					title="Refresh order"
+					ariaLabel="Refresh order"
+					on:click={handleRefresh}
 					spin={$orderDetailQuery.isLoading || $orderDetailQuery.isFetching}
 				/>
 			</div>
@@ -98,52 +131,125 @@ $: subgraphName = $page.url.pathname.split("/")[2]?.split("-")[0];
 	<svelte:fragment slot="card" let:data>
 		<div class="flex flex-col gap-y-6">
 			<CardProperty>
-				<svelte:fragment slot="key">Orderbook</svelte:fragment>
+				<svelte:fragment slot="key">Raindex</svelte:fragment>
 				<svelte:fragment slot="value">
-					<Hash type={HashType.Identifier} shorten={false} value={data.order.orderbook.id} />
+					<Hash type={HashType.Identifier} shorten={false} value={data.raindex} />
 				</svelte:fragment>
 			</CardProperty>
 
 			<CardProperty>
 				<svelte:fragment slot="key">Owner</svelte:fragment>
 				<svelte:fragment slot="value">
-					<Hash type={HashType.Wallet} shorten={false} value={data.order.owner} />
+					{@const explorerLink = getExplorerLink(data.owner, chainId, 'address')}
+					{#if explorerLink}
+						<a
+							href={explorerLink}
+							target="_blank"
+							rel="noopener noreferrer"
+							class="flex items-center justify-start space-x-2 text-left text-blue-500 hover:underline"
+						>
+							<WalletOutline size="sm" />
+							<span>{data.owner}</span>
+						</a>
+					{:else}
+						<Hash type={HashType.Wallet} shorten={false} value={data.owner} />
+					{/if}
 				</svelte:fragment>
 			</CardProperty>
 
 			<CardProperty>
 				<svelte:fragment slot="key">Created</svelte:fragment>
 				<svelte:fragment slot="value">
-					{formatTimestampSecondsAsLocal(BigInt(data.order.timestampAdded))}
+					{formatTimestampSecondsAsLocal(data.timestampAdded)}
 				</svelte:fragment>
 			</CardProperty>
 
-			{#each [{ key: 'Input vaults', type: 'inputs' }, { key: 'Output vaults', type: 'outputs' }, { key: 'Input & output vaults', type: 'inputs_outputs' }] as { key, type }}
-				{#if data.vaults.get(type)?.length !== 0}
+			{#if data.oracleUrl}
+				<CardProperty>
+					<svelte:fragment slot="key">
+						<div class="flex items-center gap-x-2">
+							Oracle
+							<InfoCircleOutline class="h-4 w-4" /><Tooltip
+								>This order uses a signed context oracle for external data (e.g. price feeds).
+								Quotes include oracle data automatically.</Tooltip
+							>
+						</div>
+					</svelte:fragment>
+					<svelte:fragment slot="value">
+						{#if data.oracleUrl.startsWith('https://') || data.oracleUrl.startsWith('http://')}
+							<a
+								href={data.oracleUrl}
+								target="_blank"
+								rel="noopener noreferrer"
+								class="break-all text-blue-500 hover:underline"
+							>
+								{data.oracleUrl}
+							</a>
+						{:else}
+							<span class="break-all text-gray-500">{data.oracleUrl}</span>
+						{/if}
+					</svelte:fragment>
+				</CardProperty>
+			{/if}
+
+			{#each vaultTypesMap as { key, type, getter }}
+				{@const filteredVaults = data.vaultsList.items.filter((vault) => vault.vaultType === type)}
+				{@const vaultsListByType = data[getter]}
+				{#if filteredVaults.length !== 0}
 					<CardProperty>
-						<svelte:fragment slot="key"
-							><div class="flex items-center gap-x-2">
-								{key}
-								{#if type === 'inputs_outputs'}
-									<InfoCircleOutline class="h-4 w-4" /><Tooltip
-										>{'These vaults can be an input or an output for this order'}</Tooltip
-									>{/if}
-							</div></svelte:fragment
-						>
+						<svelte:fragment slot="key">
+							<div class="flex items-center justify-between">
+								<div class="flex items-center gap-x-2">
+									{key}
+									{#if type === 'inputOutput'}
+										<InfoCircleOutline class="h-4 w-4" /><Tooltip
+											>{'These vaults can be an input or an output for this order'}</Tooltip
+										>{/if}
+								</div>
+								{#if onWithdrawAll}
+									<Button
+										color="light"
+										size="xs"
+										on:click={() =>
+											vaultsListByType && onWithdrawAll(raindexClient, vaultsListByType)}
+										disabled={!vaultsListByType ||
+											vaultsListByType.getWithdrawableVaults()?.value?.length === 0}
+										data-testid="withdraw-all-button"
+									>
+										<ArrowUpFromBracketOutline size="xs" class="mr-2" />
+										Withdraw all
+									</Button>
+								{/if}
+							</div>
+						</svelte:fragment>
 						<svelte:fragment slot="value">
 							<div class="mt-2 space-y-2">
-								{#each data.vaults.get(type) || [] as vault}
-									<ButtonVaultLink tokenVault={vault} {subgraphName}>
+								{#each filteredVaults as vault}
+									<ButtonVaultLink tokenVault={vault} {chainId} {raindexAddress}>
 										<svelte:fragment slot="buttons">
-											{#if handleDepositOrWithdrawModal && $signerAddress === vault.owner && chainId}
-												<DepositOrWithdrawButtons
-													{vault}
-													{chainId}
-													{rpcUrl}
-													query={orderDetailQuery}
-													{handleDepositOrWithdrawModal}
-													{subgraphUrl}
-												/>
+											{#if matchesAccount(vault.owner)}
+												<div class="flex gap-1">
+													<Button
+														color="light"
+														size="xs"
+														data-testid="deposit-button"
+														title="Deposit into vault"
+														aria-label="Deposit into vault"
+														on:click={() => onDeposit(raindexClient, vault)}
+													>
+														<ArrowDownToBracketOutline size="xs" />
+													</Button>
+													<Button
+														color="light"
+														size="xs"
+														data-testid="withdraw-button"
+														title="Withdraw from vault"
+														aria-label="Withdraw from vault"
+														on:click={() => onWithdraw(raindexClient, vault)}
+													>
+														<ArrowUpFromBracketOutline size="xs" />
+													</Button>
+												</div>
 											{/if}
 										</svelte:fragment>
 									</ButtonVaultLink>
@@ -153,42 +259,74 @@ $: subgraphName = $page.url.pathname.split("/")[2]?.split("-")[0];
 					</CardProperty>
 				{/if}
 			{/each}
+			{#if onWithdrawAll}
+				<Button
+					size="xs"
+					on:click={() =>
+						$orderDetailQuery.data?.vaultsList &&
+						onWithdrawAll(raindexClient, $orderDetailQuery.data.vaultsList)}
+					disabled={!$orderDetailQuery.data?.vaultsList ||
+						$orderDetailQuery.data?.vaultsList?.getWithdrawableVaults()?.value?.length === 0}
+					data-testid="withdraw-all-button"
+				>
+					<ArrowUpFromBracketOutline size="xs" class="mr-2" />
+					Withdraw all vaults
+				</Button>
+			{/if}
 		</div>
 	</svelte:fragment>
 	<svelte:fragment slot="chart" let:data>
-		<OrderTradesChart id={data.order.id} {subgraphUrl} {lightweightChartsTheme} {colorTheme} />
+		<OrderTradesChart order={data} {lightweightChartsTheme} />
 	</svelte:fragment>
 	<svelte:fragment slot="below" let:data>
-		<TanstackOrderQuote
-			id={data.order.id}
-			order={data.order}
-			{rpcUrl}
-			{orderbookAddress}
-			{handleQuoteDebugModal}
-		/>
+		<TanstackOrderQuote order={data} {handleQuoteDebugModal} />
 		<Tabs
 			style="underline"
 			contentClass="mt-4"
 			defaultClass="flex flex-wrap space-x-2 rtl:space-x-reverse mt-4 list-none"
 		>
-			<TabItem title="Rainlang source">
+			{#if data.dotrainSource}
+				<TabItem title="Dotrain">
+					<div class="mb-8 overflow-hidden rounded-lg border dark:border-none">
+						<CodeMirrorRainlang
+							rainlangText={data.dotrainSource}
+							codeMirrorTheme={$codeMirrorTheme}
+							{codeMirrorDisabled}
+							{codeMirrorStyles}
+						></CodeMirrorRainlang>
+					</div>
+				</TabItem>
+			{/if}
+			<TabItem title="On-chain Rainlang">
 				<div class="mb-8 overflow-hidden rounded-lg border dark:border-none">
 					<CodeMirrorRainlang
-						order={data.order}
+						rainlangText={data.rainlang}
 						codeMirrorTheme={$codeMirrorTheme}
 						{codeMirrorDisabled}
 						{codeMirrorStyles}
 					></CodeMirrorRainlang>
 				</div>
 			</TabItem>
+			{#if data.orderBuilderState}
+				<TabItem title="Builder State">
+					<div class="mb-4">
+						<div class="overflow-auto rounded-lg border bg-gray-50 p-4 dark:bg-gray-800">
+							<pre class="text-sm" data-testid="builder-state-json">
+								{formatBuilderState(data.orderBuilderState)}
+							</pre>
+						</div>
+					</div>
+				</TabItem>
+			{/if}
 			<TabItem open title="Trades">
-				<OrderTradesListTable id={data.order.id} {subgraphUrl} />
+				<OrderTradesListTable order={data} {handleDebugTradeModal} {rpcs} />
 			</TabItem>
 			<TabItem title="Volume">
-				<OrderVaultsVolTable id={data.order.id} {subgraphUrl} />
+				<OrderVaultsVolTable order={data} />
 			</TabItem>
 			<TabItem title="APY">
-				<OrderApy id={data.order.id} {subgraphUrl} />
+				<div>TODO: Issue #1989</div>
+				<!-- <OrderApy order={data} /> -->
 			</TabItem>
 		</Tabs>
 	</svelte:fragment>

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

@@ -1,24 +1,31 @@
 import { SvelteComponent } from "svelte";
-import type { Writable } from 'svelte/store';
-import type { Config } from 'wagmi';
-import type { Hex } from 'viem';
-import type { DepositOrWithdrawModalProps, OrderRemoveModalProps, QuoteDebugModalHandler, DebugTradeModalHandler } from '../../types/modal';
+import type { DebugTradeModalHandler, QuoteDebugModalHandler } from '../../types/modal';
+import { RaindexClient, RaindexOrder, RaindexVault, RaindexVaultsList, type Address, type Hex } from '@rainlanguage/raindex';
 declare const __propDef: {
     props: {
-        handleDepositOrWithdrawModal?: ((props: DepositOrWithdrawModalProps) => void) | undefined;
-        handleOrderRemoveModal?: ((props: OrderRemoveModalProps) => void) | undefined;
         handleQuoteDebugModal?: QuoteDebugModalHandler | undefined;
         handleDebugTradeModal?: DebugTradeModalHandler | undefined;
-        colorTheme: any;
         codeMirrorTheme: any;
         lightweightChartsTheme: any;
-        orderbookAddress: Hex;
-        orderHash: string;
-        rpcUrl: string;
-        subgraphUrl: string;
-        chainId: number | undefined;
-        wagmiConfig?: Writable<Config> | undefined;
-        signerAddress?: Writable<string | null> | undefined;
+        raindexAddress: Address;
+        orderHash: Hex;
+        chainId: number;
+        rpcs?: string[] | undefined;
+        /** Callback function when remove action is triggered for an order
+             * @param order The order to remove
+             */ onRemove: (raindexClient: RaindexClient, order: RaindexOrder) => void;
+        /** Callback function when deposit action is triggered for a vault
+             * @param vault The vault to deposit into
+             */ onDeposit: (raindexClient: RaindexClient, vault: RaindexVault) => void;
+        /** Callback function when withdraw action is triggered for a vault
+             * @param vault The vault to withdraw from
+             */ onWithdraw: (raindexClient: RaindexClient, vault: RaindexVault) => void;
+        /** Callback function when withdraw all action is triggered for a vault
+             * @param vaultsList The VaultsList struct containing the vaults to withdraw from
+             */ onWithdrawAll?: ((raindexClient: RaindexClient, vaultsList: RaindexVaultsList) => void) | undefined;
+        /** Callback function when take order action is triggered
+             * @param order The order to take
+             */ onTakeOrder?: ((raindexClient: RaindexClient, order: RaindexOrder) => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -31,6 +38,5 @@ export type OrderDetailProps = typeof __propDef.props;
 export type OrderDetailEvents = typeof __propDef.events;
 export type OrderDetailSlots = typeof __propDef.slots;
 export default class OrderDetail extends SvelteComponent<OrderDetailProps, OrderDetailEvents, OrderDetailSlots> {
-    get handleDebugTradeModal(): DebugTradeModalHandler;
 }
 export {};