@rainlanguage/ui-components 0.0.1-alpha.8 → 0.0.1-alpha.80

package/dist/components/deployment/DeploymentSteps.svelte

@@ -1,61 +1,80 @@
-<script>import { Alert } from "flowbite-svelte";
-import TokenIOSection from "./TokenIOSection.svelte";
-import DepositsSection from "./DepositsSection.svelte";
-import SelectTokensSection from "./SelectTokensSection.svelte";
+<script>import { Alert, Button, Spinner, Toggle } from "flowbite-svelte";
+import TokenIOInput from "./TokenIOInput.svelte";
 import ComposedRainlangModal from "./ComposedRainlangModal.svelte";
-import FieldDefinitionsSection from "./FieldDefinitionsSection.svelte";
-import {} from "@rainlanguage/orderbook/js_api";
-import WalletConnect from "../wallet/WalletConnect.svelte";
 import {
-  DotrainOrderGui
-} from "@rainlanguage/orderbook/js_api";
-import { fade } from "svelte/transition";
-import { Button, Toggle, Spinner } from "flowbite-svelte";
-import {} from "@wagmi/core";
+} from "@rainlanguage/orderbook";
+import WalletConnect from "../wallet/WalletConnect.svelte";
 import {} from "svelte/store";
-import ShareChoicesButton from "./ShareChoicesButton.svelte";
 import { handleShareChoices } from "../../services/handleShareChoices";
-import { getDeploymentTransactionArgs } from "./getDeploymentTransactionArgs";
 import { DeploymentStepsError, DeploymentStepsErrorCode } from "../../errors";
 import { onMount } from "svelte";
-export let settings;
-export let dotrain;
+import FieldDefinitionInput from "./FieldDefinitionInput.svelte";
+import DepositInput from "./DepositInput.svelte";
+import SelectToken from "./SelectToken.svelte";
+import DeploymentSectionHeader from "./DeploymentSectionHeader.svelte";
+import { useGui } from "../../hooks/useGui";
+import { useAccount } from "../../providers/wallet/useAccount";
+import { handleDeployment } from "./handleDeployment";
+import {} from "../../types/transaction";
+import { fade } from "svelte/transition";
+import ShareChoicesButton from "./ShareChoicesButton.svelte";
 export let deployment;
 export let strategyDetail;
-export let gui;
-export let handleDeployModal;
-export let handleDisclaimerModal;
+export let onDeploy;
+export let wagmiConnected;
+export let appKitModal;
+export let settings;
+export let registryUrl;
 let allDepositFields = [];
 let allTokenOutputs = [];
 let allFieldDefinitionsWithoutDefaults = [];
 let allFieldDefinitionsWithDefaults = [];
 let allTokensSelected = false;
 let showAdvancedOptions = false;
-let checkingDeployment = false;
 let allTokenInfos = [];
-const selectTokens = gui.getSelectTokens();
-const networkKey = gui.getNetworkKey();
-const subgraphUrl = $settings?.subgraphs?.[networkKey] ?? "";
+let selectTokens = void 0;
+let checkingDeployment = false;
+let subgraphUrl = void 0;
+const { account } = useAccount();
+const gui = useGui();
 let deploymentStepsError = DeploymentStepsError.error;
-export let wagmiConfig;
-export let wagmiConnected;
-export let appKitModal;
-export let signerAddress;
 onMount(async () => {
+  const selectTokensResult = gui.getSelectTokens();
+  if (selectTokensResult.error) {
+    throw new Error(selectTokensResult.error.msg);
+  }
+  selectTokens = selectTokensResult.value;
+  const { value, error } = gui.getNetworkKey();
+  if (error) {
+    DeploymentStepsError.catch(error, DeploymentStepsErrorCode.NO_NETWORK_KEY);
+  } else if (value) {
+    subgraphUrl = $settings?.subgraphs?.[value];
+  }
   await areAllTokensSelected();
 });
 function getAllFieldDefinitions() {
   try {
-    allFieldDefinitionsWithoutDefaults = gui.getAllFieldDefinitions(false);
-    allFieldDefinitionsWithDefaults = gui.getAllFieldDefinitions(true);
+    const allFieldDefinitionsResult = gui.getAllFieldDefinitions(false);
+    if (allFieldDefinitionsResult.error) {
+      throw new Error(allFieldDefinitionsResult.error.msg);
+    }
+    allFieldDefinitionsWithoutDefaults = allFieldDefinitionsResult.value;
+    const allFieldDefinitionsWithDefaultsResult = gui.getAllFieldDefinitions(true);
+    if (allFieldDefinitionsWithDefaultsResult.error) {
+      throw new Error(allFieldDefinitionsWithDefaultsResult.error.msg);
+    }
+    allFieldDefinitionsWithDefaults = allFieldDefinitionsWithDefaultsResult.value;
   } catch (e) {
     DeploymentStepsError.catch(e, DeploymentStepsErrorCode.NO_FIELD_DEFINITIONS);
   }
 }
 async function getAllDepositFields() {
   try {
-    let dep = gui.getCurrentDeployment();
-    let depositFields = dep.deposits;
+    let result = gui.getCurrentDeployment();
+    if (result.error) {
+      throw new Error(result.error.msg);
+    }
+    let depositFields = result.value.deposits;
     allDepositFields = depositFields;
   } catch (e) {
     DeploymentStepsError.catch(e, DeploymentStepsErrorCode.NO_DEPOSITS);
@@ -64,14 +83,22 @@ async function getAllDepositFields() {
 let allTokenInputs = [];
 function getAllTokenInputs() {
   try {
-    allTokenInputs = gui.getCurrentDeployment().deployment.order.inputs;
+    let result = gui.getCurrentDeployment();
+    if (result.error) {
+      throw new Error(result.error.msg);
+    }
+    allTokenInputs = result.value.deployment.order.inputs;
   } catch (e) {
     DeploymentStepsError.catch(e, DeploymentStepsErrorCode.NO_TOKEN_INPUTS);
   }
 }
 function getAllTokenOutputs() {
   try {
-    allTokenOutputs = gui.getCurrentDeployment().deployment.order.outputs;
+    let result = gui.getCurrentDeployment();
+    if (result.error) {
+      throw new Error(result.error.msg);
+    }
+    allTokenOutputs = result.value.deployment.order.outputs;
   } catch (e) {
     DeploymentStepsError.catch(e, DeploymentStepsErrorCode.NO_TOKEN_OUTPUTS);
   }
@@ -91,12 +118,16 @@ async function updateFields() {
   }
 }
 async function _handleShareChoices() {
-  await handleShareChoices(gui);
+  await handleShareChoices(gui, registryUrl);
 }
 async function onSelectTokenSelect() {
   await areAllTokensSelected();
   if (allTokensSelected) {
-    let newAllTokenInfos = await gui.getAllTokenInfos();
+    let result = await gui.getAllTokenInfos();
+    if (result.error) {
+      throw new Error(result.error.msg);
+    }
+    let newAllTokenInfos = result.value;
     if (allTokenInfos !== newAllTokenInfos) {
       allTokenInfos = newAllTokenInfos;
       getAllDepositFields();
@@ -104,149 +135,143 @@ async function onSelectTokenSelect() {
     }
   }
 }
-async function handleDeployButtonClick() {
-  DeploymentStepsError.clear();
-  if (!allTokenOutputs) {
-    DeploymentStepsError.catch(null, DeploymentStepsErrorCode.NO_TOKEN_OUTPUTS);
-    return;
-  }
-  if (!wagmiConfig) {
-    DeploymentStepsError.catch(null, DeploymentStepsErrorCode.NO_CHAIN);
-    return;
+const areAllTokensSelected = async () => {
+  try {
+    const areAllTokensSelectedResult = gui.areAllTokensSelected();
+    if (areAllTokensSelectedResult.error) {
+      throw new Error(areAllTokensSelectedResult.error.msg);
+    }
+    allTokensSelected = areAllTokensSelectedResult.value;
+    if (!allTokensSelected) return;
+    const getAllTokenInfosResult = await gui.getAllTokenInfos();
+    if (getAllTokenInfosResult.error) {
+      throw new Error(getAllTokenInfosResult.error.msg);
+    }
+    allTokenInfos = getAllTokenInfosResult.value;
+    const hasDepositsResult = gui.hasAnyDeposit();
+    if (hasDepositsResult.error) {
+      throw new Error(hasDepositsResult.error.msg);
+    }
+    const hasVaultIdsResult = gui.hasAnyVaultId();
+    if (hasVaultIdsResult.error) {
+      throw new Error(hasVaultIdsResult.error.msg);
+    }
+    if (hasDepositsResult.value || hasVaultIdsResult.value) {
+      showAdvancedOptions = true;
+    }
+  } catch (e) {
+    DeploymentStepsError.catch(e, DeploymentStepsErrorCode.NO_SELECT_TOKENS);
   }
-  if (!networkKey) {
-    DeploymentStepsError.catch(null, DeploymentStepsErrorCode.NO_CHAIN);
+};
+async function handleDeployButtonClick() {
+  if (checkingDeployment) {
     return;
   }
-  let result = null;
   checkingDeployment = true;
   try {
-    result = await getDeploymentTransactionArgs(gui, $wagmiConfig);
+    if (!$account) {
+      DeploymentStepsError.catch(
+        "No wallet connected",
+        DeploymentStepsErrorCode.ADD_ORDER_FAILED
+      );
+      return;
+    }
+    DeploymentStepsError.clear();
+    const deploymentArgs = await handleDeployment(gui, $account, subgraphUrl);
+    return await onDeploy(deploymentArgs);
   } catch (e) {
-    checkingDeployment = false;
     DeploymentStepsError.catch(e, DeploymentStepsErrorCode.ADD_ORDER_FAILED);
-  }
-  if (!result) {
+  } finally {
     checkingDeployment = false;
-    DeploymentStepsError.catch(null, DeploymentStepsErrorCode.ADD_ORDER_FAILED);
-    return;
   }
-  checkingDeployment = false;
-  const onAccept = () => {
-    if (!networkKey) {
-      DeploymentStepsError.catch(null, DeploymentStepsErrorCode.NO_CHAIN);
-      return;
-    }
-    handleDeployModal({
-      open: true,
-      args: {
-        ...result,
-        subgraphUrl,
-        network: networkKey
-      }
-    });
-  };
-  handleDisclaimerModal({
-    open: true,
-    onAccept
-  });
 }
-const areAllTokensSelected = async () => {
-  try {
-    allTokensSelected = gui.areAllTokensSelected();
-    if (!allTokensSelected) return;
-    allTokenInfos = await gui.getAllTokenInfos();
-    const hasDeposits = gui.hasAnyDeposit();
-    const hasVaultIds = gui.hasAnyVaultId();
-    if (hasDeposits || hasVaultIds) {
-      showAdvancedOptions = true;
-    }
-  } catch (e) {
-    DeploymentStepsError.catch(e, DeploymentStepsErrorCode.NO_SELECT_TOKENS);
-  }
-};
 </script>
 
 <div>
-	{#if $deploymentStepsError}
-		<Alert color="red">
-			<p class="text-red-500">{$deploymentStepsError.code}</p>
-			{#if $deploymentStepsError.details}
-				<p class="text-red-500">{$deploymentStepsError.details}</p>
+	{#if gui}
+		<div class="flex max-w-3xl flex-col gap-12" in:fade>
+			{#if deployment}
+				<div class="flex max-w-2xl flex-col gap-4 text-start">
+					<h1 class="text-4xl font-semibold text-gray-900 lg:text-6xl dark:text-white">
+						{strategyDetail.name}
+					</h1>
+					<p class="text-xl text-gray-600 lg:text-2xl dark:text-gray-400">
+						{deployment.description}
+					</p>
+				</div>
 			{/if}
-		</Alert>
-	{/if}
-	{#if dotrain}
-		{#if gui}
-			<div class="flex max-w-3xl flex-col gap-12" in:fade>
-				{#if deployment}
-					<div class="flex max-w-2xl flex-col gap-4 text-start">
-						<h1 class=" text-4xl font-semibold text-gray-900 lg:text-6xl dark:text-white">
-							{strategyDetail.name}
-						</h1>
-						<p class="text-xl text-gray-600 lg:text-2xl dark:text-gray-400">
-							{deployment.description}
-						</p>
-					</div>
-				{/if}
 
-				{#if selectTokens && selectTokens.length > 0}
-					<SelectTokensSection {gui} {selectTokens} {onSelectTokenSelect} />
-				{/if}
+			{#if selectTokens && selectTokens.length > 0}
+				<div class="flex w-full flex-col gap-4">
+					<DeploymentSectionHeader
+						title="Select Tokens"
+						description="Select the tokens that you want to use in your order."
+					/>
+					{#each selectTokens as token}
+						<SelectToken {token} {onSelectTokenSelect} />
+					{/each}
+				</div>
+			{/if}
 
-				{#if allTokensSelected || selectTokens?.length === 0}
-					{#if allFieldDefinitionsWithoutDefaults.length > 0}
-						<FieldDefinitionsSection
-							allFieldDefinitions={allFieldDefinitionsWithoutDefaults}
-							{gui}
-						/>
-					{/if}
+			{#if allTokensSelected || selectTokens?.length === 0}
+				{#if allFieldDefinitionsWithoutDefaults.length > 0}
+					{#each allFieldDefinitionsWithoutDefaults as fieldDefinition}
+						<FieldDefinitionInput {fieldDefinition} />
+					{/each}
+				{/if}
 
-					<Toggle bind:checked={showAdvancedOptions}>Show advanced options</Toggle>
+				<Toggle bind:checked={showAdvancedOptions}>Show advanced options</Toggle>
 
-					{#if allFieldDefinitionsWithDefaults.length > 0 && showAdvancedOptions}
-						<FieldDefinitionsSection allFieldDefinitions={allFieldDefinitionsWithDefaults} {gui} />
-					{/if}
+				{#if showAdvancedOptions}
+					{#each allFieldDefinitionsWithDefaults as fieldDefinition}
+						<FieldDefinitionInput {fieldDefinition} />
+					{/each}
 
-					{#if allDepositFields.length > 0 && showAdvancedOptions}
-						<DepositsSection bind:allDepositFields {gui} />
-					{/if}
+					{#each allDepositFields as deposit}
+						<DepositInput {deposit} />
+					{/each}
 
-					{#if allTokenInputs.length > 0 && allTokenOutputs.length > 0 && showAdvancedOptions}
-						<TokenIOSection bind:allTokenInputs bind:allTokenOutputs {gui} />
-					{/if}
+					{#each allTokenOutputs as output, i}
+						<TokenIOInput {i} label="Output" vault={output} />
+					{/each}
 
-					{#if $deploymentStepsError}
-						<Alert color="red">
-							<p class="text-red-500">{$deploymentStepsError.code}</p>
-							{#if $deploymentStepsError.details}
-								<p class="text-red-500">{$deploymentStepsError.details}</p>
-							{/if}
-						</Alert>
-					{/if}
+					{#each allTokenInputs as input, i}
+						<TokenIOInput {i} label="Input" vault={input} />
+					{/each}
+				{/if}
 
-					<div class="flex flex-wrap items-start justify-start gap-2">
-						{#if $wagmiConnected}
-							<Button
-								size="lg"
-								on:click={handleDeployButtonClick}
-								class="bg-gradient-to-br from-blue-600 to-violet-600"
-							>
-								{#if checkingDeployment}
-									<Spinner size="4" color="white" />
-									<span class="ml-2">Checking deployment...</span>
-								{:else}
-									Deploy Strategy
-								{/if}
-							</Button>
-						{:else}
-							<WalletConnect {appKitModal} connected={wagmiConnected} {signerAddress} />
+				{#if $deploymentStepsError}
+					<Alert color="red">
+						<p class="text-red-500">{$deploymentStepsError.code}</p>
+						{#if $deploymentStepsError.details}
+							<p class="text-red-500">{$deploymentStepsError.details}</p>
 						{/if}
-						<ComposedRainlangModal {gui} />
-						<ShareChoicesButton handleShareChoices={_handleShareChoices} />
-					</div>
+					</Alert>
 				{/if}
-			</div>
-		{/if}
+
+				<div class="flex flex-wrap items-start justify-start gap-2">
+					{#if $account}
+						<Button
+							data-testid="deploy-button"
+							size="lg"
+							disabled={checkingDeployment}
+							on:click={handleDeployButtonClick}
+							class="bg-gradient-to-br from-blue-600 to-violet-600"
+						>
+							{#if checkingDeployment}
+								<Spinner size="4" color="white" />
+								<span class="ml-2">Checking deployment...</span>
+							{:else}
+								Deploy Strategy
+							{/if}
+						</Button>
+					{:else}
+						<WalletConnect {appKitModal} connected={wagmiConnected} />
+					{/if}
+					<ComposedRainlangModal />
+					<ShareChoicesButton handleShareChoices={_handleShareChoices} />
+				</div>
+			{/if}
+		</div>
 	{/if}
 </div>

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 ConfigSource, type NameAndDescriptionCfg } from '@rainlanguage/orderbook';
 import { type Writable } from 'svelte/store';
 import type { AppKit } from '@reown/appkit';
-import type { DisclaimerModalProps, DeployModalProps } from '../../types/modal';
+import { type DeploymentArgs } from '../../types/transaction';
 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: (deploymentArgs: DeploymentArgs) => void;
         wagmiConnected: Writable<boolean>;
         appKitModal: Writable<AppKit>;
-        signerAddress: Writable<string | null>;
+        settings: Writable<ConfigSource>;
+        registryUrl: string;
     };
     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.";
+      }
     }
   }
 }

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/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>
 

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>;