@rainlanguage/ui-components 0.0.1-alpha.23 → 0.0.1-alpha.230

package/dist/components/deployment/TokenSelectionModal.svelte

@@ -0,0 +1,148 @@
+<script>import { Input, Button, Modal } from "flowbite-svelte";
+import { SearchOutline, CheckCircleSolid, ChevronDownSolid } from "flowbite-svelte-icons";
+import { useGui } from "../../hooks/useGui";
+import { onMount, tick } from "svelte";
+export let selectedToken = null;
+export let onSelect;
+let modalOpen = false;
+let searchQuery = "";
+let tokens = [];
+let isSearching = false;
+let failedImages = /* @__PURE__ */ new Set();
+const gui = useGui();
+async function loadTokens(search) {
+  isSearching = true;
+  const result = await gui.getAllTokens(search);
+  if (result.error) {
+    tokens = [];
+  } else {
+    tokens = result.value;
+  }
+  isSearching = false;
+}
+function handleSearch(event) {
+  const target = event.target;
+  searchQuery = target.value;
+  loadTokens(searchQuery || void 0);
+}
+onMount(() => loadTokens());
+function formatAddress(address) {
+  return `${address.slice(0, 6)}...${address.slice(-4)}`;
+}
+function handleTokenSelect(token) {
+  onSelect(token);
+  modalOpen = false;
+}
+function handleImageError(address) {
+  failedImages = /* @__PURE__ */ new Set([...failedImages, address]);
+}
+$: displayText = selectedToken ? `${selectedToken.name} (${selectedToken.symbol})` : "Select a token...";
+$: if (modalOpen) {
+  tick().then(() => {
+    const input = document.querySelector(".token-search-input");
+    if (input) {
+      input.focus();
+    }
+  });
+}
+</script>
+
+<div class="token-dropdown">
+	<div class="relative w-full">
+		<Button
+			color="alternative"
+			class="flex w-full justify-between overflow-hidden overflow-ellipsis pl-4 pr-2 text-left"
+			size="lg"
+			on:click={() => (modalOpen = true)}
+		>
+			<div class="flex-grow overflow-hidden">
+				<span class="text-gray-900 dark:text-white">{displayText}</span>
+			</div>
+			<ChevronDownSolid class="ml-2 h-4 w-4 text-black dark:text-white" />
+		</Button>
+
+		<Modal bind:open={modalOpen} size="md" class="w-full max-w-lg">
+			<div slot="header" class="flex w-full items-center justify-between">
+				<h3 class="text-xl font-medium text-gray-900 dark:text-white">Select a token</h3>
+			</div>
+			<div class="relative w-full border-b border-gray-200 p-2 dark:border-gray-600">
+				<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-5">
+					<SearchOutline class="h-4 w-4 text-gray-500 dark:text-gray-400" />
+				</div>
+				<Input
+					type="text"
+					placeholder="Search tokens..."
+					bind:value={searchQuery}
+					on:input={handleSearch}
+					class="token-search-input pl-10"
+				/>
+			</div>
+
+			<div class="token-list max-h-80 overflow-y-auto">
+				{#if isSearching}
+					<div class="p-4 text-center text-gray-500 dark:text-gray-400">
+						<p>Searching tokens...</p>
+					</div>
+				{:else}
+					{#each tokens as token (token.address)}
+						<div
+							class="token-item flex cursor-pointer items-center border-b border-gray-100 p-3 last:border-b-0 hover:bg-gray-50 dark:border-gray-600 dark:hover:bg-gray-700"
+							class:bg-blue-50={selectedToken?.address === token.address}
+							class:dark:bg-blue-900={selectedToken?.address === token.address}
+							class:border-l-4={selectedToken?.address === token.address}
+							class:border-l-blue-500={selectedToken?.address === token.address}
+							on:click={() => handleTokenSelect(token)}
+							on:keydown={(e) => e.key === 'Enter' && handleTokenSelect(token)}
+							role="button"
+							tabindex="0"
+						>
+							{#if token.logoUri && !failedImages.has(token.address)}
+								<img
+									src={token.logoUri}
+									alt="{token.symbol} logo"
+									class="mr-3 h-8 w-8 rounded-full object-cover"
+									on:error={() => handleImageError(token.address)}
+								/>
+							{:else}
+								<div
+									class="mr-3 flex h-8 w-8 items-center justify-center rounded-full bg-gray-200 dark:bg-gray-600"
+								>
+									<span class="text-xs font-medium text-gray-500 dark:text-gray-400">
+										{token.symbol?.slice(0, 2) || '??'}
+									</span>
+								</div>
+							{/if}
+							<div class="token-info flex-grow">
+								<div class="token-name font-medium text-gray-900 dark:text-white">
+									{token.name}
+								</div>
+								<div class="token-details flex gap-2 text-sm text-gray-500 dark:text-gray-400">
+									<span class="symbol font-medium">{token.symbol}</span>
+									<span class="address">{formatAddress(token.address)}</span>
+								</div>
+							</div>
+							{#if selectedToken?.address === token.address}
+								<CheckCircleSolid class="selected-icon h-5 w-5 text-green-500" />
+							{/if}
+						</div>
+					{/each}
+
+					{#if tokens.length === 0}
+						<div class="no-results p-4 text-center text-gray-500 dark:text-gray-400">
+							<p>No tokens found matching your search.</p>
+							<button
+								class="mt-2 text-blue-600 underline hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
+								on:click={() => {
+									searchQuery = '';
+									loadTokens();
+								}}
+							>
+								Clear search
+							</button>
+						</div>
+					{/if}
+				{/if}
+			</div>
+		</Modal>
+	</div>
+</div>

package/dist/components/deployment/TokenSelectionModal.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { ExtendedTokenInfo } from '@rainlanguage/orderbook';
+declare const __propDef: {
+    props: {
+        selectedToken?: ExtendedTokenInfo | null;
+        onSelect: (token: ExtendedTokenInfo) => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type TokenSelectionModalProps = typeof __propDef.props;
+export type TokenSelectionModalEvents = typeof __propDef.events;
+export type TokenSelectionModalSlots = typeof __propDef.slots;
+export default class TokenSelectionModal extends SvelteComponent<TokenSelectionModalProps, TokenSelectionModalEvents, TokenSelectionModalSlots> {
+}
+export {};

package/dist/components/deployment/{ValidStrategiesSection.svelte → ValidOrdersSection.svelte}

@@ -1,24 +1,24 @@
 <script>import { onMount } from "svelte";
 import { page } from "$app/stores";
-export let strategies;
+export let orders;
 let customRegistryParam = "";
 onMount(async () => {
   customRegistryParam = $page.url.searchParams.get("registry") ? `?registry=${$page.url.searchParams.get("registry")}` : "";
 });
 </script>
 
-<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3" data-testid="valid-strategies">
-	{#each strategies as strategy}
+<div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3" data-testid="valid-orders">
+	{#each orders as order}
 		<a
-			href={`/deploy/${strategy.name}${customRegistryParam}`}
-			data-testid="strategy-short-tile"
+			href={`/deploy/${order.name}${customRegistryParam}`}
+			data-testid="order-short-tile"
 			class="flex flex-col gap-y-2 rounded-xl border border-gray-200 p-4 hover:bg-gray-50 dark:border-gray-800 dark:hover:bg-gray-900"
 		>
 			<h3 class="text-2xl font-semibold text-gray-900 dark:text-white">
-				{strategy.details.name}
+				{order.details.name}
 			</h3>
 			<p class="text-lg text-gray-600 dark:text-gray-400">
-				{strategy.details.short_description}
+				{order.details.short_description}
 			</p>
 		</a>
 	{/each}

package/dist/components/deployment/ValidOrdersSection.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { ValidOrderDetail } from '../../types/order';
+declare const __propDef: {
+    props: {
+        orders: ValidOrderDetail[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type ValidOrdersSectionProps = typeof __propDef.props;
+export type ValidOrdersSectionEvents = typeof __propDef.events;
+export type ValidOrdersSectionSlots = typeof __propDef.slots;
+export default class ValidOrdersSection extends SvelteComponent<ValidOrdersSectionProps, ValidOrdersSectionEvents, ValidOrdersSectionSlots> {
+}
+export {};

package/dist/components/deployment/VaultIdInformation.svelte

@@ -0,0 +1,17 @@
+<script>import TokenBalanceComponent from "./TokenBalance.svelte";
+export let title;
+export let description;
+export let tokenBalance;
+</script>
+
+<div class="flex max-w-xl flex-grow flex-col gap-y-4 text-left">
+	<h1 class="break-words text-xl font-semibold text-gray-900 lg:text-2xl dark:text-white">
+		{title}
+	</h1>
+	<div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
+		<div class="text-gray-600 dark:text-gray-400">
+			{description}
+		</div>
+		<TokenBalanceComponent {tokenBalance} />
+	</div>
+</div>

package/dist/components/deployment/VaultIdInformation.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+import type { TokenBalance } from '../../types/tokenBalance';
+declare const __propDef: {
+    props: {
+        title: string;
+        description: string;
+        tokenBalance: TokenBalance | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type VaultIdInformationProps = typeof __propDef.props;
+export type VaultIdInformationEvents = typeof __propDef.events;
+export type VaultIdInformationSlots = typeof __propDef.slots;
+export default class VaultIdInformation extends SvelteComponent<VaultIdInformationProps, VaultIdInformationEvents, VaultIdInformationSlots> {
+}
+export {};

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/orderbook";
+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 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, orderbookAddress, 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 formatGuiState = (guiState) => {
+  try {
+    return JSON.stringify(JSON.parse(guiState), null, 2);
+  } catch {
+    return "Invalid GUI state";
+  }
+};
 </script>
 
 <TanstackPageContentDetail query={orderDetailQuery} emptyMessage="Order not found">
@@ -61,35 +97,30 @@ $: 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"
+					on:click={handleRefresh}
 					spin={$orderDetailQuery.isLoading || $orderDetailQuery.isFetching}
 				/>
 			</div>
@@ -100,50 +131,119 @@ $: subgraphName = $page.url.pathname.split("/")[2]?.split("-")[0];
 			<CardProperty>
 				<svelte:fragment slot="key">Orderbook</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.orderbook} />
 				</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} {orderbookAddress}>
 										<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"
+														on:click={() => onDeposit(raindexClient, vault)}
+													>
+														<ArrowDownToBracketOutline size="xs" />
+													</Button>
+													<Button
+														color="light"
+														size="xs"
+														data-testid="withdraw-button"
+														on:click={() => onWithdraw(raindexClient, vault)}
+													>
+														<ArrowUpFromBracketOutline size="xs" />
+													</Button>
+												</div>
 											{/if}
 										</svelte:fragment>
 									</ButtonVaultLink>
@@ -153,42 +253,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.dotrainGuiState}
+				<TabItem title="Gui 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="gui-state-json">
+								{formatGuiState(data.dotrainGuiState)}
+							</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>