@rainlanguage/ui-components 0.0.1-alpha.10

package/dist/components/deployment/DeploymentSteps.svelte

@@ -0,0 +1,252 @@
+<script>import { Alert } from "flowbite-svelte";
+import TokenIOSection from "./TokenIOSection.svelte";
+import DepositsSection from "./DepositsSection.svelte";
+import SelectTokensSection from "./SelectTokensSection.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";
+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;
+export let deployment;
+export let strategyDetail;
+export let gui;
+export let handleDeployModal;
+export let handleDisclaimerModal;
+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 deploymentStepsError = DeploymentStepsError.error;
+export let wagmiConfig;
+export let wagmiConnected;
+export let appKitModal;
+export let signerAddress;
+onMount(async () => {
+  await areAllTokensSelected();
+});
+function getAllFieldDefinitions() {
+  try {
+    allFieldDefinitionsWithoutDefaults = gui.getAllFieldDefinitions(false);
+    allFieldDefinitionsWithDefaults = gui.getAllFieldDefinitions(true);
+  } catch (e) {
+    DeploymentStepsError.catch(e, DeploymentStepsErrorCode.NO_FIELD_DEFINITIONS);
+  }
+}
+async function getAllDepositFields() {
+  try {
+    let dep = gui.getCurrentDeployment();
+    let depositFields = dep.deposits;
+    allDepositFields = depositFields;
+  } catch (e) {
+    DeploymentStepsError.catch(e, DeploymentStepsErrorCode.NO_DEPOSITS);
+  }
+}
+let allTokenInputs = [];
+function getAllTokenInputs() {
+  try {
+    allTokenInputs = gui.getCurrentDeployment().deployment.order.inputs;
+  } catch (e) {
+    DeploymentStepsError.catch(e, DeploymentStepsErrorCode.NO_TOKEN_INPUTS);
+  }
+}
+function getAllTokenOutputs() {
+  try {
+    allTokenOutputs = gui.getCurrentDeployment().deployment.order.outputs;
+  } catch (e) {
+    DeploymentStepsError.catch(e, DeploymentStepsErrorCode.NO_TOKEN_OUTPUTS);
+  }
+}
+$: if (selectTokens?.length === 0 || allTokensSelected) {
+  updateFields();
+}
+async function updateFields() {
+  try {
+    DeploymentStepsError.clear();
+    getAllDepositFields();
+    getAllFieldDefinitions();
+    getAllTokenInputs();
+    getAllTokenOutputs();
+  } catch (e) {
+    DeploymentStepsError.catch(e, DeploymentStepsErrorCode.NO_GUI);
+  }
+}
+async function _handleShareChoices() {
+  await handleShareChoices(gui);
+}
+async function onSelectTokenSelect() {
+  await areAllTokensSelected();
+  if (allTokensSelected) {
+    let newAllTokenInfos = await gui.getAllTokenInfos();
+    if (allTokenInfos !== newAllTokenInfos) {
+      allTokenInfos = newAllTokenInfos;
+      getAllDepositFields();
+      getAllFieldDefinitions();
+    }
+  }
+}
+async function handleDeployButtonClick() {
+  DeploymentStepsError.clear();
+  if (!allTokenOutputs) {
+    DeploymentStepsError.catch(null, DeploymentStepsErrorCode.NO_TOKEN_OUTPUTS);
+    return;
+  }
+  if (!wagmiConfig) {
+    DeploymentStepsError.catch(null, DeploymentStepsErrorCode.NO_CHAIN);
+    return;
+  }
+  if (!networkKey) {
+    DeploymentStepsError.catch(null, DeploymentStepsErrorCode.NO_CHAIN);
+    return;
+  }
+  let result = null;
+  checkingDeployment = true;
+  try {
+    result = await getDeploymentTransactionArgs(gui, $wagmiConfig);
+  } catch (e) {
+    checkingDeployment = false;
+    DeploymentStepsError.catch(e, DeploymentStepsErrorCode.ADD_ORDER_FAILED);
+  }
+  if (!result) {
+    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}
+		</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 allTokensSelected || selectTokens?.length === 0}
+					{#if allFieldDefinitionsWithoutDefaults.length > 0}
+						<FieldDefinitionsSection
+							allFieldDefinitions={allFieldDefinitionsWithoutDefaults}
+							{gui}
+						/>
+					{/if}
+
+					<Toggle bind:checked={showAdvancedOptions}>Show advanced options</Toggle>
+
+					{#if allFieldDefinitionsWithDefaults.length > 0 && showAdvancedOptions}
+						<FieldDefinitionsSection allFieldDefinitions={allFieldDefinitionsWithDefaults} {gui} />
+					{/if}
+
+					{#if allDepositFields.length > 0 && showAdvancedOptions}
+						<DepositsSection bind:allDepositFields {gui} />
+					{/if}
+
+					{#if allTokenInputs.length > 0 && allTokenOutputs.length > 0 && showAdvancedOptions}
+						<TokenIOSection bind:allTokenInputs bind:allTokenOutputs {gui} />
+					{/if}
+
+					{#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}
+
+					<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}
+						<ComposedRainlangModal {gui} />
+						<ShareChoicesButton handleShareChoices={_handleShareChoices} />
+					</div>
+				{/if}
+			</div>
+		{/if}
+	{/if}
+</div>

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

@@ -0,0 +1,38 @@
+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 Writable } from 'svelte/store';
+import type { AppKit } from '@reown/appkit';
+import type { DisclaimerModalProps, DeployModalProps } from '../../types/modal';
+declare const __propDef: {
+    props: {
+        settings: Writable<ConfigSource>;
+        dotrain: string;
+        deployment: {
+            key: string;
+            name: string;
+            description: string;
+        };
+        strategyDetail: NameAndDescriptionCfg;
+        gui: DotrainOrderGui;
+        handleDeployModal: (args: DeployModalProps) => void;
+        handleDisclaimerModal: (args: DisclaimerModalProps) => void;
+        wagmiConfig: Writable<Config | undefined>;
+        wagmiConnected: Writable<boolean>;
+        appKitModal: Writable<AppKit>;
+        signerAddress: Writable<string | null>;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type DeploymentStepsProps = typeof __propDef.props;
+export type DeploymentStepsEvents = typeof __propDef.events;
+export type DeploymentStepsSlots = typeof __propDef.slots;
+export default class DeploymentSteps extends SvelteComponent<DeploymentStepsProps, DeploymentStepsEvents, DeploymentStepsSlots> {
+}
+export {};

package/dist/components/deployment/DeploymentTile.svelte

@@ -0,0 +1,19 @@
+<script>import { page } from "$app/stores";
+import { onMount } from "svelte";
+export let strategyName;
+export let key;
+export let name;
+export let description;
+let customRegistryParam = "";
+onMount(async () => {
+  customRegistryParam = $page.url.searchParams.get("registry") ? `?registry=${$page.url.searchParams.get("registry")}` : "";
+});
+</script>
+
+<a
+	href={`/deploy/${strategyName}/${key}${customRegistryParam}`}
+	class="flex h-full w-full max-w-sm cursor-pointer flex-col gap-y-4 rounded-3xl border border-gray-200 bg-white p-4 text-left hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700"
+>
+	<h1 class="text-2xl font-semibold text-gray-900 dark:text-white">{name}</h1>
+	<p class="text-gray-600 dark:text-gray-400">{description}</p>
+</a>

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

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        strategyName: string;
+        key: string;
+        name: string;
+        description: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type DeploymentTileProps = typeof __propDef.props;
+export type DeploymentTileEvents = typeof __propDef.events;
+export type DeploymentTileSlots = typeof __propDef.slots;
+export default class DeploymentTile extends SvelteComponent<DeploymentTileProps, DeploymentTileEvents, DeploymentTileSlots> {
+}
+export {};

package/dist/components/deployment/DeploymentsSection.svelte

@@ -0,0 +1,20 @@
+<script>import { DotrainOrderGui } from "@rainlanguage/orderbook/js_api";
+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}

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

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        dotrain: string;
+        strategyName: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type DeploymentsSectionProps = typeof __propDef.props;
+export type DeploymentsSectionEvents = typeof __propDef.events;
+export type DeploymentsSectionSlots = typeof __propDef.slots;
+export default class DeploymentsSection extends SvelteComponent<DeploymentsSectionProps, DeploymentsSectionEvents, DeploymentsSectionSlots> {
+}
+export {};

package/dist/components/deployment/DepositInput.svelte

@@ -0,0 +1,93 @@
+<script>import {
+  DotrainOrderGui
+} from "@rainlanguage/orderbook/js_api";
+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";
+export let deposit;
+export let gui;
+let error = "";
+let currentDeposit;
+let inputValue = "";
+let tokenInfo = null;
+onMount(() => {
+  setCurrentDeposit();
+});
+const setCurrentDeposit = async () => {
+  try {
+    currentDeposit = gui.getDeposits().find((d) => d.token === deposit.token?.key);
+    inputValue = currentDeposit?.amount || "";
+  } catch {
+    currentDeposit = void 0;
+  }
+};
+const getTokenSymbol = async () => {
+  if (!deposit.token?.key) return;
+  try {
+    tokenInfo = await gui?.getTokenInfo(deposit.token?.key);
+  } catch (e) {
+    const errorMessage = e.message ? e.message : "Error getting token info.";
+    error = errorMessage;
+  }
+};
+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);
+  }
+}
+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);
+    }
+  }
+}
+$: if (deposit.token?.key) {
+  getTokenSymbol();
+}
+</script>
+
+<div class="flex w-full flex-col gap-6">
+	<DeploymentSectionHeader
+		title={tokenInfo?.symbol ? `Deposit amount (${tokenInfo?.symbol})` : 'Deposit amount'}
+		description={tokenInfo?.symbol
+			? `The amount of ${tokenInfo?.symbol} that you want to deposit.`
+			: 'The amount that you want to deposit.'}
+	/>
+
+	<div class="flex w-full flex-col gap-6">
+		{#if deposit.presets}
+			<div class="flex w-full flex-wrap gap-4">
+				{#each deposit.presets as preset}
+					<ButtonSelectOption
+						active={currentDeposit?.amount === preset}
+						buttonText={preset}
+						clickHandler={() => handlePresetClick(preset)}
+					/>
+				{/each}
+			</div>
+		{/if}
+
+		<Input
+			size="lg"
+			placeholder="Enter deposit amount"
+			bind:value={inputValue}
+			on:input={(e) => handleInput(e)}
+		/>
+
+		{#if error}
+			<div class="flex h-5 flex-row items-center gap-2">
+				<CloseCircleSolid class="h-5 w-5" color="red" />
+				<span>{error}</span>
+			</div>
+		{/if}
+	</div>
+</div>

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

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import { DotrainOrderGui, type GuiDepositCfg } from '@rainlanguage/orderbook/js_api';
+declare const __propDef: {
+    props: {
+        deposit: GuiDepositCfg;
+        gui: DotrainOrderGui;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type DepositInputProps = typeof __propDef.props;
+export type DepositInputEvents = typeof __propDef.events;
+export type DepositInputSlots = typeof __propDef.slots;
+export default class DepositInput extends SvelteComponent<DepositInputProps, DepositInputEvents, DepositInputSlots> {
+}
+export {};

package/dist/components/deployment/DepositsSection.svelte

@@ -0,0 +1,8 @@
+<script>import DepositInput from "./DepositInput.svelte";
+export let allDepositFields;
+export let gui;
+</script>
+
+{#each allDepositFields as deposit}
+	<DepositInput bind:deposit {gui} />
+{/each}

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

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { DotrainOrderGui, GuiDepositCfg } from '@rainlanguage/orderbook/js_api';
+declare const __propDef: {
+    props: {
+        allDepositFields: GuiDepositCfg[];
+        gui: DotrainOrderGui;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type DepositsSectionProps = typeof __propDef.props;
+export type DepositsSectionEvents = typeof __propDef.events;
+export type DepositsSectionSlots = typeof __propDef.slots;
+export default class DepositsSection extends SvelteComponent<DepositsSectionProps, DepositsSectionEvents, DepositsSectionSlots> {
+}
+export {};

package/dist/components/deployment/DisclaimerModal.svelte

@@ -0,0 +1,54 @@
+<script>import { Alert, Modal, Button } from "flowbite-svelte";
+import { ExclamationCircleSolid } from "flowbite-svelte-icons";
+export let open = false;
+export let onAccept = () => {
+};
+async function handleAcceptDisclaimer() {
+  open = false;
+  onAccept();
+}
+</script>
+
+<Modal
+	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"
+>
+	<div class="flex flex-col items-start gap-y-8 p-4">
+		<div class="space-y-4">
+			<Alert color="red" class="text-base">
+				<div class="flex items-center justify-center">
+					<ExclamationCircleSolid class="h-6 w-6 text-red-500" />
+					<span class="ml-2">
+						Before you deploy your strategy, make sure you understand the following...
+					</span>
+				</div>
+			</Alert>
+			<ul class="list-outside list-disc space-y-2">
+				<li class="ml-4">
+					This front end is provided as a tool to interact with the Raindex smart contracts.
+				</li>
+				<li class="ml-4">
+					You are deploying your own strategy and depositing funds to an immutable smart contract
+					using your own wallet and private keys.
+				</li>
+				<li class="ml-4">
+					Nobody is custodying your funds, there is no recourse for recovery of funds if lost.
+				</li>
+				<li class="ml-4">There is no endorsement or guarantee provided with these strategies.</li>
+				<li class="ml-4">
+					Do not proceed if you do not understand the strategy you are deploying.
+				</li>
+				<li class="ml-4">Do not invest unless you are prepared to lose all funds.</li>
+			</ul>
+		</div>
+		<div class="flex justify-center gap-2">
+			<Button
+				size="lg"
+				class="w-32 bg-gradient-to-br from-blue-600 to-violet-600"
+				on:click={handleAcceptDisclaimer}>Deploy</Button
+			>
+			<Button size="lg" class="w-32" color="light" on:click={() => (open = false)}>Cancel</Button>
+		</div>
+	</div>
+</Modal>

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

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        open?: boolean;
+        onAccept?: () => void;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type DisclaimerModalProps = typeof __propDef.props;
+export type DisclaimerModalEvents = typeof __propDef.events;
+export type DisclaimerModalSlots = typeof __propDef.slots;
+export default class DisclaimerModal extends SvelteComponent<DisclaimerModalProps, DisclaimerModalEvents, DisclaimerModalSlots> {
+}
+export {};

package/dist/components/deployment/FieldDefinitionInput.svelte

@@ -0,0 +1,66 @@
+<script>import { Input } from "flowbite-svelte";
+import {
+  DotrainOrderGui
+} from "@rainlanguage/orderbook/js_api";
+import ButtonSelectOption from "./ButtonSelectOption.svelte";
+import DeploymentSectionHeader from "./DeploymentSectionHeader.svelte";
+import { onMount } from "svelte";
+export let fieldDefinition;
+export let gui;
+let currentValue;
+let inputValue = currentValue?.value ? currentValue?.value : fieldDefinition.default || null;
+onMount(() => {
+  try {
+    currentValue = gui.getFieldValue(fieldDefinition.binding);
+    inputValue = currentValue?.value ? currentValue?.value : fieldDefinition.default || null;
+  } catch {
+    currentValue = void 0;
+  }
+});
+async function handlePresetClick(preset) {
+  inputValue = preset.value;
+  gui?.saveFieldValue(fieldDefinition.binding, {
+    isPreset: true,
+    value: preset.id
+  });
+  currentValue = gui.getFieldValue(fieldDefinition.binding);
+}
+async function handleCustomInputChange(value) {
+  inputValue = value;
+  gui?.saveFieldValue(fieldDefinition.binding, {
+    isPreset: false,
+    value
+  });
+  currentValue = gui.getFieldValue(fieldDefinition.binding);
+}
+</script>
+
+<div class="flex w-full flex-col gap-6">
+	<DeploymentSectionHeader title={fieldDefinition.name} description={fieldDefinition.description} />
+	<div class="flex w-full flex-col gap-6">
+		{#if fieldDefinition.presets}
+			<div class="flex w-full flex-wrap gap-4">
+				{#each fieldDefinition.presets as preset}
+					<ButtonSelectOption
+						buttonText={preset.name || preset.value}
+						clickHandler={() => handlePresetClick(preset)}
+						active={currentValue?.value === preset.value}
+					/>
+				{/each}
+			</div>
+		{/if}
+
+		{#if !fieldDefinition.presets || fieldDefinition.showCustomField}
+			<Input
+				size="lg"
+				placeholder="Enter custom value"
+				bind:value={inputValue}
+				on:input={({ currentTarget }) => {
+					if (currentTarget instanceof HTMLInputElement) {
+						handleCustomInputChange(currentTarget.value);
+					}
+				}}
+			/>
+		{/if}
+	</div>
+</div>

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

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import { DotrainOrderGui, type GuiFieldDefinitionCfg } from '@rainlanguage/orderbook/js_api';
+declare const __propDef: {
+    props: {
+        fieldDefinition: GuiFieldDefinitionCfg;
+        gui: DotrainOrderGui;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type FieldDefinitionInputProps = typeof __propDef.props;
+export type FieldDefinitionInputEvents = typeof __propDef.events;
+export type FieldDefinitionInputSlots = typeof __propDef.slots;
+export default class FieldDefinitionInput extends SvelteComponent<FieldDefinitionInputProps, FieldDefinitionInputEvents, FieldDefinitionInputSlots> {
+}
+export {};