@rainlanguage/ui-components 0.0.1-alpha.13 → 0.0.1-alpha.131

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

@@ -1,27 +1,21 @@
 import { SvelteComponent } from "svelte";
-import { type ConfigSource } from '@rainlanguage/orderbook/js_api';
-import { DotrainOrderGui, type NameAndDescriptionCfg } from '@rainlanguage/orderbook/js_api';
-import { type Config } from '@wagmi/core';
+import { type NameAndDescriptionCfg, type NewConfig, DotrainOrderGui } from '@rainlanguage/orderbook';
 import { type Writable } from 'svelte/store';
 import type { AppKit } from '@reown/appkit';
-import type { DisclaimerModalProps, DeployModalProps } from '../../types/modal';
+import type { Account } from '../../types/account';
 declare const __propDef: {
     props: {
-        settings: Writable<ConfigSource>;
-        dotrain: string;
-        deployment: {
+        /** The deployment configuration containing key, name and description */ deployment: {
             key: string;
             name: string;
             description: string;
         };
-        strategyDetail: NameAndDescriptionCfg;
-        gui: DotrainOrderGui;
-        handleDeployModal: (args: DeployModalProps) => void;
-        handleDisclaimerModal: (args: DisclaimerModalProps) => void;
-        wagmiConfig: Writable<Config | undefined>;
+        /** Strategy details containing name and description configuration */ strategyDetail: NameAndDescriptionCfg;
+        /** Handlers for deployment modals */ onDeploy: (gui: DotrainOrderGui, subgraphUrl?: string) => void;
         wagmiConnected: Writable<boolean>;
         appKitModal: Writable<AppKit>;
-        signerAddress: Writable<string | null>;
+        settings: Writable<NewConfig>;
+        account: Account;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/deployment/DeploymentsSection.svelte

@@ -1,20 +1,24 @@
-<script>import { DotrainOrderGui } from "@rainlanguage/orderbook/js_api";
+<script>import { DotrainOrderGui } from "@rainlanguage/orderbook";
 import DeploymentTile from "./DeploymentTile.svelte";
 export let dotrain;
 export let strategyName;
 </script>
 
-{#await DotrainOrderGui.getDeploymentDetails(dotrain) then deploymentsWithDetails}
-	<div
-		class="mr-auto grid w-full grid-cols-1 justify-items-start gap-4 md:grid-cols-2 lg:w-auto lg:grid-cols-3"
-	>
-		{#each deploymentsWithDetails as [key, { name, description }]}
-			<DeploymentTile {name} {description} {key} {strategyName} />
-		{/each}
-	</div>
-{:catch error}
-	<p class="text-red-500">Error loading deployments:</p>
-	<p class="text-gray-500">
-		{error instanceof Error ? error.message : 'Unknown error'}
-	</p>
+{#await DotrainOrderGui.getDeploymentDetails(dotrain) then result}
+	{#if result.error}
+		<p class="text-red-500">Error loading deployments:</p>
+		<p class="text-gray-500">
+			{result.error.msg}
+		</p>
+	{/if}
+
+	{#if result.value}
+		<div
+			class="mr-auto grid w-full grid-cols-1 justify-items-start gap-4 md:grid-cols-2 lg:w-auto lg:grid-cols-3"
+		>
+			{#each result.value as [key, { name, description }]}
+				<DeploymentTile {name} {description} {key} {strategyName} />
+			{/each}
+		</div>
+	{/if}
 {/await}

package/dist/components/deployment/DepositInput.svelte

@@ -1,13 +1,12 @@
-<script>import {
-  DotrainOrderGui
-} from "@rainlanguage/orderbook/js_api";
+<script>import {} from "@rainlanguage/orderbook";
 import { Input } from "flowbite-svelte";
 import ButtonSelectOption from "./ButtonSelectOption.svelte";
 import DeploymentSectionHeader from "./DeploymentSectionHeader.svelte";
 import { CloseCircleSolid } from "flowbite-svelte-icons";
 import { onMount } from "svelte";
+import { useGui } from "../../hooks/useGui";
 export let deposit;
-export let gui;
+const gui = useGui();
 let error = "";
 let currentDeposit;
 let inputValue = "";
@@ -15,18 +14,30 @@ let tokenInfo = null;
 onMount(() => {
   setCurrentDeposit();
 });
-const setCurrentDeposit = async () => {
+const getCurrentDeposit = () => {
+  const deposits = gui.getDeposits();
+  if (deposits.error) {
+    throw new Error(deposits.error.msg);
+  }
+  return deposits.value.find((d) => d.token === deposit.token?.key);
+};
+const setCurrentDeposit = () => {
   try {
-    currentDeposit = gui.getDeposits().find((d) => d.token === deposit.token?.key);
+    currentDeposit = getCurrentDeposit();
     inputValue = currentDeposit?.amount || "";
-  } catch {
+  } catch (e) {
     currentDeposit = void 0;
+    error = e.message ? e.message : "Error setting current deposit.";
   }
 };
 const getTokenSymbol = async () => {
   if (!deposit.token?.key) return;
   try {
-    tokenInfo = await gui?.getTokenInfo(deposit.token?.key);
+    let result = await gui.getTokenInfo(deposit.token?.key);
+    if (result.error) {
+      throw new Error(result.error.msg);
+    }
+    tokenInfo = result.value;
   } catch (e) {
     const errorMessage = e.message ? e.message : "Error getting token info.";
     error = errorMessage;
@@ -35,18 +46,24 @@ const getTokenSymbol = async () => {
 function handlePresetClick(preset) {
   if (deposit.token?.key) {
     inputValue = preset;
-    gui?.saveDeposit(deposit.token?.key, preset);
-    gui = gui;
-    currentDeposit = gui?.getDeposits().find((d) => d.token === deposit.token?.key);
+    gui.saveDeposit(deposit.token?.key, preset);
+    try {
+      currentDeposit = getCurrentDeposit();
+    } catch (e) {
+      error = e.message ? e.message : "Error handling preset click.";
+    }
   }
 }
 function handleInput(e) {
   if (deposit.token?.key) {
     if (e.currentTarget instanceof HTMLInputElement) {
       inputValue = e.currentTarget.value;
-      gui?.saveDeposit(deposit.token.key, e.currentTarget.value);
-      gui = gui;
-      currentDeposit = gui?.getDeposits().find((d) => d.token === deposit.token?.key);
+      gui.saveDeposit(deposit.token.key, e.currentTarget.value);
+      try {
+        currentDeposit = getCurrentDeposit();
+      } catch (e2) {
+        error = e2.message ? e2.message : "Error handling input.";
+      }
     }
   }
 }
@@ -68,6 +85,7 @@ $: if (deposit.token?.key) {
 			<div class="flex w-full flex-wrap gap-4">
 				{#each deposit.presets as preset}
 					<ButtonSelectOption
+						dataTestId={`deposit-preset-${preset}`}
 						active={currentDeposit?.amount === preset}
 						buttonText={preset}
 						clickHandler={() => handlePresetClick(preset)}

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

@@ -1,9 +1,8 @@
 import { SvelteComponent } from "svelte";
-import { DotrainOrderGui, type GuiDepositCfg } from '@rainlanguage/orderbook/js_api';
+import { type GuiDepositCfg } from '@rainlanguage/orderbook';
 declare const __propDef: {
     props: {
         deposit: GuiDepositCfg;
-        gui: DotrainOrderGui;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/deployment/DisclaimerModal.svelte

@@ -13,6 +13,7 @@ async function handleAcceptDisclaimer() {
 	bind:open
 	class="max-h-full dark:border dark:border-gray-700 dark:bg-gray-900"
 	dialogClass="fixed top-0 start-0 end-1 h-modal md:inset-0 md:h-full z-50 w-full p-4 flex justify-center items-center h-full"
+	data-testid="deployment-disclaimer-modal"
 >
 	<div class="flex flex-col items-start gap-y-8 p-4">
 		<div class="space-y-4">

package/dist/components/deployment/FieldDefinitionInput.svelte

@@ -1,17 +1,21 @@
 <script>import { Input } from "flowbite-svelte";
 import {
-  DotrainOrderGui
-} from "@rainlanguage/orderbook/js_api";
+} from "@rainlanguage/orderbook";
 import ButtonSelectOption from "./ButtonSelectOption.svelte";
 import DeploymentSectionHeader from "./DeploymentSectionHeader.svelte";
 import { onMount } from "svelte";
+import { useGui } from "../../hooks/useGui";
 export let fieldDefinition;
-export let gui;
+const gui = useGui();
 let currentValue;
 let inputValue = currentValue?.value ? currentValue?.value : fieldDefinition.default || null;
 onMount(() => {
   try {
-    currentValue = gui.getFieldValue(fieldDefinition.binding);
+    const result = gui.getFieldValue(fieldDefinition.binding);
+    if (result.error) {
+      throw new Error(result.error.msg);
+    }
+    currentValue = result.value;
     inputValue = currentValue?.value ? currentValue?.value : fieldDefinition.default || null;
   } catch {
     currentValue = void 0;
@@ -19,19 +23,21 @@ onMount(() => {
 });
 async function handlePresetClick(preset) {
   inputValue = preset.value;
-  gui?.saveFieldValue(fieldDefinition.binding, {
-    isPreset: true,
-    value: preset.id
-  });
-  currentValue = gui.getFieldValue(fieldDefinition.binding);
+  gui.saveFieldValue(fieldDefinition.binding, inputValue);
+  const result = gui.getFieldValue(fieldDefinition.binding);
+  if (result.error) {
+    throw new Error(result.error.msg);
+  }
+  currentValue = result.value;
 }
 async function handleCustomInputChange(value) {
   inputValue = value;
-  gui?.saveFieldValue(fieldDefinition.binding, {
-    isPreset: false,
-    value
-  });
-  currentValue = gui.getFieldValue(fieldDefinition.binding);
+  gui.saveFieldValue(fieldDefinition.binding, inputValue);
+  const result = gui.getFieldValue(fieldDefinition.binding);
+  if (result.error) {
+    throw new Error(result.error.msg);
+  }
+  currentValue = result.value;
 }
 </script>
 
@@ -42,6 +48,7 @@ async function handleCustomInputChange(value) {
 			<div class="flex w-full flex-wrap gap-4">
 				{#each fieldDefinition.presets as preset}
 					<ButtonSelectOption
+						dataTestId={`binding-${fieldDefinition.binding}-preset-${preset.name || preset.value}`}
 						buttonText={preset.name || preset.value}
 						clickHandler={() => handlePresetClick(preset)}
 						active={currentValue?.value === preset.value}
@@ -52,6 +59,7 @@ async function handleCustomInputChange(value) {
 
 		{#if !fieldDefinition.presets || fieldDefinition.showCustomField}
 			<Input
+				data-testid={`binding-${fieldDefinition.binding}-input`}
 				size="lg"
 				placeholder="Enter custom value"
 				bind:value={inputValue}

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

@@ -1,9 +1,8 @@
 import { SvelteComponent } from "svelte";
-import { DotrainOrderGui, type GuiFieldDefinitionCfg } from '@rainlanguage/orderbook/js_api';
+import { type GuiFieldDefinitionCfg } from '@rainlanguage/orderbook';
 declare const __propDef: {
     props: {
         fieldDefinition: GuiFieldDefinitionCfg;
-        gui: DotrainOrderGui;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/deployment/SelectToken.svelte

@@ -2,16 +2,21 @@
 import { CheckCircleSolid, CloseCircleSolid } from "flowbite-svelte-icons";
 import { Spinner } from "flowbite-svelte";
 import { onMount } from "svelte";
+import { useGui } from "../../hooks/useGui";
 export let token;
-export let gui;
 export let onSelectTokenSelect;
 let inputValue = null;
 let tokenInfo = null;
 let error = "";
 let checking = false;
+const gui = useGui();
 onMount(async () => {
   try {
-    tokenInfo = await gui?.getTokenInfo(token.key);
+    let result = await gui.getTokenInfo(token.key);
+    if (result.error) {
+      throw new Error(result.error.msg);
+    }
+    tokenInfo = result.value;
     if (tokenInfo?.address) {
       inputValue = tokenInfo.address;
     }
@@ -21,7 +26,11 @@ onMount(async () => {
 async function getInfoForSelectedToken() {
   error = "";
   try {
-    tokenInfo = await gui.getTokenInfo(token.key);
+    let result = await gui.getTokenInfo(token.key);
+    if (result.error) {
+      throw new Error(result.error.msg);
+    }
+    tokenInfo = result.value;
     error = "";
   } catch {
     return error = "No token exists at this address.";
@@ -72,7 +81,10 @@ async function handleInput(event) {
 					<span>Checking...</span>
 				</div>
 			{:else if tokenInfo}
-				<div class="flex h-5 flex-row items-center gap-2">
+				<div
+					class="flex h-5 flex-row items-center gap-2"
+					data-testid={`select-token-success-${token.key}`}
+				>
 					<CheckCircleSolid class="h-5 w-5" color="green" />
 					<span>{tokenInfo.name}</span>
 				</div>

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

@@ -1,9 +1,8 @@
 import { SvelteComponent } from "svelte";
-import type { DotrainOrderGui, GuiSelectTokensCfg } from '@rainlanguage/orderbook/js_api';
+import type { GuiSelectTokensCfg } from '@rainlanguage/orderbook';
 declare const __propDef: {
     props: {
         token: GuiSelectTokensCfg;
-        gui: DotrainOrderGui;
         onSelectTokenSelect: () => void;
     };
     events: {

package/dist/components/deployment/StrategyPage.svelte

@@ -1,5 +1,5 @@
 <script>import { fade } from "svelte/transition";
-import { DotrainOrderGui } from "@rainlanguage/orderbook/js_api";
+import { DotrainOrderGui } from "@rainlanguage/orderbook";
 import DeploymentsSection from "./DeploymentsSection.svelte";
 import SvelteMarkdown from "svelte-markdown";
 export let strategyName = "";
@@ -21,7 +21,11 @@ const fetchMarkdownContent = async (url) => {
 };
 const getStrategyWithMarkdown = async () => {
   try {
-    const strategyDetails = await DotrainOrderGui.getStrategyDetails(dotrain);
+    const result = await DotrainOrderGui.getStrategyDetails(dotrain);
+    if (result.error) {
+      throw new Error(result.error.msg);
+    }
+    const strategyDetails = result.value;
     if (strategyDetails.description && isMarkdownUrl(strategyDetails.description)) {
       await fetchMarkdownContent(strategyDetails.description);
     }

package/dist/components/deployment/TokenIOInput.svelte

@@ -1,17 +1,22 @@
 <script>import { Input } from "flowbite-svelte";
-import {
-} from "@rainlanguage/orderbook/js_api";
+import {} from "@rainlanguage/orderbook";
 import DeploymentSectionHeader from "./DeploymentSectionHeader.svelte";
 import { onMount } from "svelte";
+import { useGui } from "../../hooks/useGui";
+const gui = useGui();
 export let i;
 export let label;
 export let vault;
-export let gui;
 let tokenInfo = null;
 let inputValue = "";
 let error = "";
 onMount(() => {
-  const vaultIds = gui.getVaultIds();
+  const result = gui.getVaultIds();
+  if (result.error) {
+    error = result.error.msg;
+    return;
+  }
+  const vaultIds = result.value;
   if (label === "Input") {
     inputValue = vaultIds.get("input")?.[i];
   } else if (label === "Output") {
@@ -21,7 +26,12 @@ onMount(() => {
 const handleGetTokenInfo = async () => {
   if (!vault.token?.key) return;
   try {
-    tokenInfo = await gui?.getTokenInfo(vault.token?.key);
+    let result = await gui.getTokenInfo(vault.token?.key);
+    if (result.error) {
+      error = result.error.msg;
+      return;
+    }
+    tokenInfo = result.value;
   } catch (e) {
     const errorMessage = e.message ? e.message : "Error getting token info.";
     error = errorMessage;
@@ -49,6 +59,7 @@ $: if (vault.token?.key) {
 	/>
 	<div class="flex flex-col gap-2">
 		<Input
+			data-testid="vault-id-input"
 			size="lg"
 			type="text"
 			placeholder="Enter vault ID"

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

@@ -1,11 +1,10 @@
 import { SvelteComponent } from "svelte";
-import { type OrderIOCfg, type DotrainOrderGui } from '@rainlanguage/orderbook/js_api';
+import { type OrderIOCfg } from '@rainlanguage/orderbook';
 declare const __propDef: {
     props: {
         i: number;
         label: "Input" | "Output";
         vault: OrderIOCfg;
-        gui: DotrainOrderGui;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/detail/OrderDetail.svelte

@@ -5,23 +5,28 @@ 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
+} from "flowbite-svelte-icons";
+import { useAccount } from "../../providers/wallet/useAccount";
+import {
+  getOrderByHash
+} from "@rainlanguage/orderbook";
+import { useToasts } from "../../providers/toasts/useToasts";
 export let handleQuoteDebugModal = void 0;
 export const handleDebugTradeModal = void 0;
 export let colorTheme;
@@ -31,25 +36,36 @@ 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 onRemove;
+export let onDeposit;
+export let onWithdraw;
 let codeMirrorDisabled = true;
 let codeMirrorStyles = {};
 const queryClient = useQueryClient();
+const { matchesAccount } = useAccount();
+const { errToast } = useToasts();
 $: orderDetailQuery = createQuery({
   queryKey: [orderHash, QKEY_ORDER + orderHash],
-  queryFn: () => {
-    return getOrderByHash(subgraphUrl, orderHash);
+  queryFn: async () => {
+    const result = await getOrderByHash(subgraphUrl, orderHash);
+    if (result.error) throw new Error(result.error.msg);
+    return result.value;
   },
   enabled: !!subgraphUrl
 });
 const interval = setInterval(async () => {
-  await invalidateIdQuery(queryClient, orderHash);
+  await invalidateTanstackQueries(queryClient, [orderHash]);
 }, 1e4);
 onDestroy(() => {
   clearInterval(interval);
 });
+const handleRefresh = async () => {
+  try {
+    await invalidateTanstackQueries(queryClient, [orderHash]);
+  } catch {
+    errToast("Failed to refresh");
+  }
+};
 $: subgraphName = $page.url.pathname.split("/")[2]?.split("-")[0];
 </script>
 
@@ -63,33 +79,23 @@ $: subgraphName = $page.url.pathname.split("/")[2]?.split("-")[0];
 					<span class="font-light">Order</span>
 					<Hash shorten value={data.order.orderHash} />
 				</div>
-
 				<BadgeActive active={data.order.active} large />
 			</div>
 
 			<div class="flex items-center gap-2">
-				{#if data && $signerAddress === data.order.owner && data.order.active && handleOrderRemoveModal && $wagmiConfig && chainId && orderbookAddress}
-					<Button
-						data-testid="remove-button"
-						color="dark"
-						on:click={() =>
-							handleOrderRemoveModal({
-								open: true,
-								args: {
-									order: data.order,
-									onRemove: $orderDetailQuery.refetch,
-									chainId,
-									orderbookAddress,
-									subgraphUrl
-								}
-							})}
-						disabled={!handleOrderRemoveModal}
-					>
-						Remove
-					</Button>
+				{#if matchesAccount(data.order.owner)}
+					{#if data.order.active}
+						<Button
+							on:click={() => onRemove(data.order)}
+							data-testid="remove-button"
+							aria-label="Remove order">Remove</Button
+						>
+					{/if}
 				{/if}
+
 				<Refresh
-					on:click={async () => await invalidateIdQuery(queryClient, orderHash)}
+					testId="top-refresh"
+					on:click={handleRefresh}
 					spin={$orderDetailQuery.isLoading || $orderDetailQuery.isFetching}
 				/>
 			</div>
@@ -118,7 +124,7 @@ $: subgraphName = $page.url.pathname.split("/")[2]?.split("-")[0];
 				</svelte:fragment>
 			</CardProperty>
 
-			{#each [{ key: 'Input vaults', type: 'inputs' }, { key: 'Output vaults', type: 'outputs' }, { key: 'Input & output vaults', type: 'inputs_outputs' }] as { key, type }}
+			{#each [{ key: 'Output vaults', type: 'outputs' }, { key: 'Input vaults', type: 'inputs' }, { key: 'Input & output vaults', type: 'inputs_outputs' }] as { key, type }}
 				{#if data.vaults.get(type)?.length !== 0}
 					<CardProperty>
 						<svelte:fragment slot="key"
@@ -135,15 +141,25 @@ $: subgraphName = $page.url.pathname.split("/")[2]?.split("-")[0];
 								{#each data.vaults.get(type) || [] as vault}
 									<ButtonVaultLink tokenVault={vault} {subgraphName}>
 										<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(vault)}
+													>
+														<ArrowDownToBracketOutline size="xs" />
+													</Button>
+													<Button
+														color="light"
+														size="xs"
+														data-testid="withdraw-button"
+														on:click={() => onWithdraw(vault)}
+													>
+														<ArrowUpFromBracketOutline size="xs" />
+													</Button>
+												</div>
 											{/if}
 										</svelte:fragment>
 									</ButtonVaultLink>

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

@@ -1,12 +1,9 @@
 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 { QuoteDebugModalHandler, DebugTradeModalHandler } from '../../types/modal';
+import { type SgOrder, type SgVault } from '@rainlanguage/orderbook';
 declare const __propDef: {
     props: {
-        handleDepositOrWithdrawModal?: ((props: DepositOrWithdrawModalProps) => void) | undefined;
-        handleOrderRemoveModal?: ((props: OrderRemoveModalProps) => void) | undefined;
         handleQuoteDebugModal?: QuoteDebugModalHandler | undefined;
         handleDebugTradeModal?: DebugTradeModalHandler | undefined;
         colorTheme: any;
@@ -16,9 +13,15 @@ declare const __propDef: {
         orderHash: string;
         rpcUrl: string;
         subgraphUrl: string;
-        chainId: number | undefined;
-        wagmiConfig?: Writable<Config> | undefined;
-        signerAddress?: Writable<string | null> | undefined;
+        /** Callback function when remove action is triggered for an order
+             * @param order The order to remove
+             */ onRemove: (order: SgOrder) => void;
+        /** Callback function when deposit action is triggered for a vault
+             * @param vault The vault to deposit into
+             */ onDeposit: (vault: SgVault) => void;
+        /** Callback function when withdraw action is triggered for a vault
+             * @param vault The vault to withdraw from
+             */ onWithdraw: (vault: SgVault) => void;
     };
     events: {
         [evt: string]: CustomEvent<any>;