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

package/dist/components/deployment/DepositInput.svelte

@@ -1,13 +1,13 @@
 <script>import {
-  DotrainOrderGui
-} from "@rainlanguage/orderbook/js_api";
+} from "@rainlanguage/raindex";
 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 { useRaindexOrderBuilder } from "../../hooks/useRaindexOrderBuilder";
 export let deposit;
-export let gui;
+const builder = useRaindexOrderBuilder();
 let error = "";
 let currentDeposit;
 let inputValue = "";
@@ -16,7 +16,7 @@ onMount(() => {
   setCurrentDeposit();
 });
 const getCurrentDeposit = () => {
-  const deposits = gui.getDeposits();
+  const deposits = builder.getDeposits();
   if (deposits.error) {
     throw new Error(deposits.error.msg);
   }
@@ -34,7 +34,7 @@ const setCurrentDeposit = () => {
 const getTokenSymbol = async () => {
   if (!deposit.token?.key) return;
   try {
-    let result = await gui.getTokenInfo(deposit.token?.key);
+    let result = await builder.getTokenInfo(deposit.token?.key);
     if (result.error) {
       throw new Error(result.error.msg);
     }
@@ -44,11 +44,10 @@ const getTokenSymbol = async () => {
     error = errorMessage;
   }
 };
-function handlePresetClick(preset) {
+async function handlePresetClick(preset) {
   if (deposit.token?.key) {
     inputValue = preset;
-    gui?.saveDeposit(deposit.token?.key, preset);
-    gui = gui;
+    await builder.setDeposit(deposit.token?.key, preset);
     try {
       currentDeposit = getCurrentDeposit();
     } catch (e) {
@@ -56,12 +55,11 @@ function handlePresetClick(preset) {
     }
   }
 }
-function handleInput(e) {
+async 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;
+      await builder.setDeposit(deposit.token.key, e.currentTarget.value);
       try {
         currentDeposit = getCurrentDeposit();
       } catch (e2) {
@@ -88,6 +86,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 OrderBuilderDepositCfg } from '@rainlanguage/raindex';
 declare const __propDef: {
     props: {
-        deposit: GuiDepositCfg;
-        gui: DotrainOrderGui;
+        deposit: OrderBuilderDepositCfg;
     };
     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">
@@ -20,7 +21,7 @@ async function handleAcceptDisclaimer() {
 				<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...
+						Before you deploy your order, make sure you understand the following...
 					</span>
 				</div>
 			</Alert>
@@ -29,16 +30,14 @@ async function handleAcceptDisclaimer() {
 					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.
+					You are deploying your own order 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">There is no endorsement or guarantee provided with these orders.</li>
+				<li class="ml-4">Do not proceed if you do not understand the order you are deploying.</li>
 				<li class="ml-4">Do not invest unless you are prepared to lose all funds.</li>
 			</ul>
 		</div>

package/dist/components/deployment/FieldDefinitionInput.svelte

@@ -1,17 +1,17 @@
 <script>import { Input } from "flowbite-svelte";
 import {
-  DotrainOrderGui
-} from "@rainlanguage/orderbook/js_api";
+} from "@rainlanguage/raindex";
 import ButtonSelectOption from "./ButtonSelectOption.svelte";
 import DeploymentSectionHeader from "./DeploymentSectionHeader.svelte";
 import { onMount } from "svelte";
+import { useRaindexOrderBuilder } from "../../hooks/useRaindexOrderBuilder";
 export let fieldDefinition;
-export let gui;
+const builder = useRaindexOrderBuilder();
 let currentValue;
 let inputValue = currentValue?.value ? currentValue?.value : fieldDefinition.default || null;
 onMount(() => {
   try {
-    const result = gui.getFieldValue(fieldDefinition.binding);
+    const result = builder.getFieldValue(fieldDefinition.binding);
     if (result.error) {
       throw new Error(result.error.msg);
     }
@@ -23,11 +23,8 @@ onMount(() => {
 });
 async function handlePresetClick(preset) {
   inputValue = preset.value;
-  gui?.saveFieldValue(fieldDefinition.binding, {
-    isPreset: true,
-    value: preset.id
-  });
-  const result = gui.getFieldValue(fieldDefinition.binding);
+  builder.setFieldValue(fieldDefinition.binding, inputValue);
+  const result = builder.getFieldValue(fieldDefinition.binding);
   if (result.error) {
     throw new Error(result.error.msg);
   }
@@ -35,11 +32,8 @@ async function handlePresetClick(preset) {
 }
 async function handleCustomInputChange(value) {
   inputValue = value;
-  gui?.saveFieldValue(fieldDefinition.binding, {
-    isPreset: false,
-    value
-  });
-  const result = gui.getFieldValue(fieldDefinition.binding);
+  builder.setFieldValue(fieldDefinition.binding, inputValue);
+  const result = builder.getFieldValue(fieldDefinition.binding);
   if (result.error) {
     throw new Error(result.error.msg);
   }
@@ -54,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}
@@ -64,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 OrderBuilderFieldDefinitionCfg } from '@rainlanguage/raindex';
 declare const __propDef: {
     props: {
-        fieldDefinition: GuiFieldDefinitionCfg;
-        gui: DotrainOrderGui;
+        fieldDefinition: OrderBuilderFieldDefinitionCfg;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/deployment/InvalidOrdersSection.svelte

@@ -0,0 +1,17 @@
+<script>export let ordersWithErrors;
+</script>
+
+<div
+	class="flex flex-col gap-4 rounded-xl bg-red-100 p-6 dark:bg-red-900"
+	data-testid="invalid-orders"
+>
+	<h2 class="text-xl font-semibold text-gray-900 dark:text-white">Invalid orders in rainlang</h2>
+	<div class="flex flex-col gap-2">
+		{#each ordersWithErrors as order}
+			<div class="flex flex-col gap-1">
+				<span class="font-medium">{order.name}</span>
+				<span class="text-red-600 dark:text-red-400">{order.error}</span>
+			</div>
+		{/each}
+	</div>
+</div>

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

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { InvalidOrderDetail } from '../../types/order';
+declare const __propDef: {
+    props: {
+        ordersWithErrors: InvalidOrderDetail[];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type InvalidOrdersSectionProps = typeof __propDef.props;
+export type InvalidOrdersSectionEvents = typeof __propDef.events;
+export type InvalidOrdersSectionSlots = typeof __propDef.slots;
+export default class InvalidOrdersSection extends SvelteComponent<InvalidOrdersSectionProps, InvalidOrdersSectionEvents, InvalidOrdersSectionSlots> {
+}
+export {};

package/dist/components/deployment/{StrategyPage.svelte → OrderPage.svelte}

@@ -1,9 +1,10 @@
 <script>import { fade } from "svelte/transition";
-import { DotrainOrderGui } from "@rainlanguage/orderbook/js_api";
 import DeploymentsSection from "./DeploymentsSection.svelte";
 import SvelteMarkdown from "svelte-markdown";
-export let strategyName = "";
-export let dotrain = "";
+import { onMount } from "svelte";
+export let orderName = "";
+export let orderDetail;
+export let deployments = [];
 let markdownContent = "";
 let error;
 const isMarkdownUrl = (url) => {
@@ -19,29 +20,19 @@ const fetchMarkdownContent = async (url) => {
     error = `Failed to fetch markdown`;
   }
 };
-const getStrategyWithMarkdown = async () => {
-  try {
-    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);
-    }
-    return strategyDetails;
-  } catch {
-    throw new Error("Failed to get strategy details");
+onMount(async () => {
+  if (orderDetail?.description && isMarkdownUrl(orderDetail.description)) {
+    await fetchMarkdownContent(orderDetail.description);
   }
-};
+});
 </script>
 
-{#await getStrategyWithMarkdown() then strategyDetails}
+{#if orderDetail}
 	<div>
 		<div in:fade class="flex flex-col gap-8">
 			<div class="flex max-w-2xl flex-col gap-3 text-start lg:gap-6">
 				<h1 class="text-4xl font-semibold text-gray-900 lg:text-6xl dark:text-white">
-					{strategyDetails.name}
+					{orderDetail.name ?? orderName}
 				</h1>
 				{#if markdownContent}
 					<div data-testid="markdown-content" class="prose dark:prose-invert">
@@ -56,19 +47,19 @@ const getStrategyWithMarkdown = async () => {
 							data-testid="plain-description"
 							class="text-base text-gray-600 lg:text-lg dark:text-gray-400"
 						>
-							{strategyDetails.description}
+							{orderDetail.description}
 						</p>
 					</div>
 				{/if}
 			</div>
 			<div class="u flex flex-col gap-4">
 				<h2 class="text-3xl font-semibold text-gray-900 dark:text-white">Deployments</h2>
-				<DeploymentsSection {dotrain} {strategyName} />
+				<DeploymentsSection {deployments} {orderName} />
 			</div>
 		</div>
 	</div>
-{:catch error}
+{:else}
 	<div>
-		<p class="text-red-500">{error}</p>
+		<p class="text-red-500">Failed to load order details.</p>
 	</div>
-{/await}
+{/if}

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

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+import type { NameAndDescriptionCfg } from '@rainlanguage/raindex';
+declare const __propDef: {
+    props: {
+        orderName?: string;
+        orderDetail: NameAndDescriptionCfg;
+        deployments?: Map<string, NameAndDescriptionCfg> | [string, NameAndDescriptionCfg][];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type OrderPageProps = typeof __propDef.props;
+export type OrderPageEvents = typeof __propDef.events;
+export type OrderPageSlots = typeof __propDef.slots;
+export default class OrderPage extends SvelteComponent<OrderPageProps, OrderPageEvents, OrderPageSlots> {
+}
+export {};

package/dist/components/deployment/SelectToken.svelte

@@ -2,30 +2,75 @@
 import { CheckCircleSolid, CloseCircleSolid } from "flowbite-svelte-icons";
 import { Spinner } from "flowbite-svelte";
 import { onMount } from "svelte";
+import { useRaindexOrderBuilder } from "../../hooks/useRaindexOrderBuilder";
+import ButtonSelectOption from "./ButtonSelectOption.svelte";
+import TokenSelectionModal from "./TokenSelectionModal.svelte";
+import TokenBalanceComponent from "./TokenBalance.svelte";
 export let token;
-export let gui;
 export let onSelectTokenSelect;
+export let tokenBalances = /* @__PURE__ */ new Map();
 let inputValue = null;
 let tokenInfo = null;
 let error = "";
 let checking = false;
+let selectionMode = "dropdown";
+let selectedToken = null;
+const builder = useRaindexOrderBuilder();
 onMount(async () => {
   try {
-    let result = await gui.getTokenInfo(token.key);
+    let result = await builder.getTokenInfo(token.key);
     if (result.error) {
       throw new Error(result.error.msg);
     }
     tokenInfo = result.value;
-    if (tokenInfo?.address) {
-      inputValue = tokenInfo.address;
+    if (result.value.address) {
+      inputValue = result.value.address;
+      onSelectTokenSelect(token.key);
     }
   } catch {
   }
 });
+$: if (tokenInfo?.address && inputValue === null) {
+  inputValue = tokenInfo.address;
+}
+function setMode(mode) {
+  selectionMode = mode;
+  error = "";
+  if (mode === "custom") {
+    selectedToken = null;
+    tokenInfo = null;
+    inputValue = "";
+    error = "";
+    clearTokenSelection();
+  }
+}
+function handleTokenSelect(token2) {
+  selectedToken = token2;
+  inputValue = token2.address;
+  saveTokenSelection(token2.address);
+}
+async function saveTokenSelection(address) {
+  checking = true;
+  error = "";
+  try {
+    await builder.setSelectToken(token.key, address);
+    await getInfoForSelectedToken();
+  } catch (e) {
+    const errorMessage = e.message || "Invalid token address.";
+    error = errorMessage;
+  } finally {
+    checking = false;
+    onSelectTokenSelect(token.key);
+  }
+}
+function clearTokenSelection() {
+  builder.unsetSelectToken(token.key);
+  onSelectTokenSelect(token.key);
+}
 async function getInfoForSelectedToken() {
   error = "";
   try {
-    let result = await gui.getTokenInfo(token.key);
+    let result = await builder.getTokenInfo(token.key);
     if (result.error) {
       throw new Error(result.error.msg);
     }
@@ -36,61 +81,93 @@ async function getInfoForSelectedToken() {
   }
 }
 async function handleInput(event) {
-  tokenInfo = null;
   const currentTarget = event.currentTarget;
   if (currentTarget instanceof HTMLInputElement) {
     inputValue = currentTarget.value;
+    if (tokenInfo && tokenInfo.address.toLowerCase() !== inputValue.toLowerCase()) {
+      tokenInfo = null;
+      selectedToken = null;
+    }
     if (!inputValue) {
       error = "";
+      tokenInfo = null;
+      selectedToken = null;
+      return;
     }
-    checking = true;
-    try {
-      await gui.saveSelectToken(token.key, currentTarget.value);
-      await getInfoForSelectedToken();
-    } catch (e) {
-      const errorMessage = e.message ? e.message : "Invalid token address.";
-      error = errorMessage;
-    }
+    saveTokenSelection(inputValue);
   }
-  checking = false;
-  onSelectTokenSelect();
 }
 </script>
 
-<div class="flex w-full flex-col">
-	<div class="flex flex-col gap-2">
-		<div class="flex flex-col justify-start gap-4 lg:flex-row lg:items-center lg:justify-between">
-			{#if token.name || token.description}
-				<div class="flex flex-col">
-					{#if token.name}
-						<h1 class="break-words text-xl font-semibold text-gray-900 lg:text-xl dark:text-white">
-							{token.name}
-						</h1>
-					{/if}
-					{#if token.description}
-						<p class="text-sm font-light text-gray-600 lg:text-base dark:text-gray-400">
-							{token.description}
-						</p>
-					{/if}
-				</div>
-			{/if}
-			{#if checking}
-				<div class="flex h-5 flex-row items-center gap-2">
-					<Spinner class="h-5 w-5" />
-					<span>Checking...</span>
-				</div>
-			{:else if tokenInfo}
-				<div class="flex h-5 flex-row items-center gap-2">
-					<CheckCircleSolid class="h-5 w-5" color="green" />
-					<span>{tokenInfo.name}</span>
-				</div>
-			{:else if error}
-				<div class="flex h-5 flex-row items-center gap-2" data-testid="error">
-					<CloseCircleSolid class="h-5 w-5" color="red" />
-					<span>{error}</span>
-				</div>
-			{/if}
+<div class="token-selection-container flex w-full flex-col gap-4">
+	<div class="token-header">
+		{#if token.name || token.description}
+			<div class="flex flex-col">
+				{#if token.name}
+					<h1 class="break-words text-xl font-semibold text-gray-900 lg:text-xl dark:text-white">
+						{token.name}
+					</h1>
+				{/if}
+				{#if token.description}
+					<p class="text-sm font-light text-gray-600 lg:text-base dark:text-gray-400">
+						{token.description}
+					</p>
+				{/if}
+			</div>
+		{/if}
+	</div>
+
+	<div class="selection-mode flex gap-2">
+		<ButtonSelectOption
+			active={selectionMode === 'dropdown'}
+			buttonText="Select from list"
+			clickHandler={() => setMode('dropdown')}
+			dataTestId="dropdown-mode-button"
+		/>
+		<ButtonSelectOption
+			active={selectionMode === 'custom'}
+			buttonText="Custom address"
+			clickHandler={() => setMode('custom')}
+			dataTestId="custom-mode-button"
+		/>
+	</div>
+
+	{#if selectionMode === 'dropdown'}
+		<TokenSelectionModal {selectedToken} onSelect={handleTokenSelect} />
+	{/if}
+
+	{#if selectionMode === 'custom'}
+		<div class="custom-input">
+			<Input
+				type="text"
+				size="lg"
+				placeholder="Enter token address (0x...)"
+				bind:value={inputValue}
+				on:input={handleInput}
+			/>
 		</div>
-		<Input type="text" size="lg" on:input={handleInput} bind:value={inputValue} />
+	{/if}
+
+	<div class="token-status">
+		{#if checking}
+			<div class="flex h-5 flex-row items-center gap-2">
+				<Spinner class="h-5 w-5" />
+				<span>Checking...</span>
+			</div>
+		{:else if tokenInfo}
+			<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>
+				<TokenBalanceComponent tokenBalance={tokenBalances.get(token.key)} />
+			</div>
+		{:else if error}
+			<div class="flex h-5 flex-row items-center gap-2" data-testid="error">
+				<CloseCircleSolid class="h-5 w-5" color="red" />
+				<span>{error}</span>
+			</div>
+		{/if}
 	</div>
 </div>

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

@@ -1,10 +1,11 @@
 import { SvelteComponent } from "svelte";
-import type { DotrainOrderGui, GuiSelectTokensCfg } from '@rainlanguage/orderbook/js_api';
+import type { OrderBuilderSelectTokensCfg } from '@rainlanguage/raindex';
+import type { TokenBalance } from '../../types/tokenBalance';
 declare const __propDef: {
     props: {
-        token: GuiSelectTokensCfg;
-        gui: DotrainOrderGui;
-        onSelectTokenSelect: () => void;
+        token: OrderBuilderSelectTokensCfg;
+        onSelectTokenSelect: (key: string) => void;
+        tokenBalances?: Map<string, TokenBalance>;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/deployment/TokenBalance.svelte

@@ -0,0 +1,19 @@
+<script>import { Spinner } from "flowbite-svelte";
+export let tokenBalance;
+</script>
+
+{#if tokenBalance}
+	{#if tokenBalance.loading}
+		<div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
+			<Spinner class="h-4 w-4" />
+		</div>
+	{:else if !tokenBalance.error}
+		<div class="text-sm text-gray-600 dark:text-gray-400">
+			Balance: {tokenBalance.value.formattedBalance}
+		</div>
+	{:else if tokenBalance.error}
+		<div class="text-sm text-red-600 dark:text-red-400">
+			{tokenBalance.error}
+		</div>
+	{/if}
+{/if}

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

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