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

package/dist/components/charts/transformAndSortData.js

@@ -0,0 +1,111 @@
+import { sortBy } from 'lodash';
+/**
+ * Filters out data points with duplicate timestamps, keeping only the first occurrence.
+ *
+ * @param data Array of data points with time and value properties
+ * @returns A new array with only unique timestamps
+ */
+export const deduplicateByTime = (data) => {
+    const uniqueData = [];
+    const seenTimes = new Set();
+    for (const dataPoint of data) {
+        if (!seenTimes.has(dataPoint.time)) {
+            uniqueData.push(dataPoint);
+            seenTimes.add(dataPoint.time);
+        }
+    }
+    return uniqueData;
+};
+/**
+ * Transforms and sorts data, ensuring unique timestamps.
+ *
+ * @param data The source data to transform
+ * @param options Configuration object with transform functions
+ * @returns Transformed, sorted, and deduplicated data
+ */
+export const transformAndSortData = (data, options) => {
+    const { valueTransform, timeTransform } = options;
+    const transformedData = data.map((d) => ({
+        value: valueTransform(d),
+        time: timeTransform(d)
+    }));
+    const sortedData = sortBy(transformedData, (d) => d.time);
+    return deduplicateByTime(sortedData);
+};
+if (import.meta.vitest) {
+    const { it, expect, describe } = import.meta.vitest;
+    describe('deduplicateByTime', () => {
+        it('should remove entries with duplicate timestamps', () => {
+            const data = [
+                { time: 100, value: 10 },
+                { time: 200, value: 20 },
+                { time: 200, value: 25 }, // Duplicate timestamp
+                { time: 300, value: 30 }
+            ];
+            const result = deduplicateByTime(data);
+            const expected = [
+                { time: 100, value: 10 },
+                { time: 200, value: 20 }, // First occurrence kept
+                { time: 300, value: 30 }
+            ];
+            expect(result).toEqual(expected);
+        });
+        it('should handle multiple duplicate timestamps', () => {
+            const data = [
+                { time: 100, value: 10 },
+                { time: 100, value: 15 }, // Duplicate
+                { time: 100, value: 18 }, // Duplicate
+                { time: 200, value: 20 }
+            ];
+            const result = deduplicateByTime(data);
+            const expected = [
+                { time: 100, value: 10 }, // Only first one kept
+                { time: 200, value: 20 }
+            ];
+            expect(result).toEqual(expected);
+        });
+        it('should return original array if no duplicates', () => {
+            const data = [
+                { time: 100, value: 10 },
+                { time: 200, value: 20 },
+                { time: 300, value: 30 }
+            ];
+            const result = deduplicateByTime(data);
+            expect(result).toEqual(data);
+            expect(result).not.toBe(data);
+        });
+        it('should handle empty array', () => {
+            const data = [];
+            const result = deduplicateByTime(data);
+            expect(result).toEqual([]);
+        });
+    });
+    describe('transformAndSortData', () => {
+        it('should transform, sort, and deduplicate data', () => {
+            const rawData = [
+                { timestamp: 3000, price: 300 },
+                { timestamp: 1000, price: 100 },
+                { timestamp: 2000, price: 200 },
+                { timestamp: 2000, price: 250 } // Duplicate timestamp
+            ];
+            const result = transformAndSortData(rawData, {
+                valueTransform: (item) => item.price,
+                timeTransform: (item) => item.timestamp
+            });
+            const expected = [
+                { time: 1000, value: 100 },
+                { time: 2000, value: 200 }, // First occurrence kept after sorting
+                { time: 3000, value: 300 }
+            ];
+            expect(result).toEqual(expected);
+        });
+        it('should handle empty data array', () => {
+            const rawData = [];
+            const result = transformAndSortData(rawData, {
+                valueTransform: (item) => item.price,
+                timeTransform: (item) => item.timestamp
+            });
+            expect(result).toEqual([]);
+        });
+    });
+}

package/dist/components/checkbox/CheckboxActiveOrders.svelte

@@ -0,0 +1,11 @@
+<script>import { Checkbox } from "flowbite-svelte";
+export let showInactiveOrders;
+let checked = $showInactiveOrders ? true : false;
+function handleChange() {
+  $showInactiveOrders = !$showInactiveOrders;
+}
+</script>
+
+<div data-testid="order-status-checkbox">
+	<Checkbox {checked} on:change={handleChange}>Include inactive orders</Checkbox>
+</div>

package/dist/components/checkbox/CheckboxActiveOrders.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+import type { AppStoresInterface } from '../../types/appStores';
+declare const __propDef: {
+    props: {
+        showInactiveOrders: AppStoresInterface["showInactiveOrders"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: {} | undefined;
+    bindings?: string | undefined;
+};
+export type CheckboxActiveOrdersProps = typeof __propDef.props;
+export type CheckboxActiveOrdersEvents = typeof __propDef.events;
+export type CheckboxActiveOrdersSlots = typeof __propDef.slots;
+export default class CheckboxActiveOrders extends SvelteComponent<CheckboxActiveOrdersProps, CheckboxActiveOrdersEvents, CheckboxActiveOrdersSlots> {
+}
+export {};

package/dist/components/deployment/ButtonSelectOption.svelte

@@ -2,6 +2,7 @@
 export let active;
 export let buttonText;
 export let clickHandler;
+export let dataTestId;
 </script>
 
 <Button
@@ -9,6 +10,7 @@ export let clickHandler;
 	color="alternative"
 	class={active ? 'border-2 border-blue-300 dark:border-blue-700' : 'border-2 border-transparent'}
 	on:click={clickHandler}
+	data-testid={dataTestId}
 >
 	{buttonText}
 </Button>

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

@@ -4,6 +4,7 @@ declare const __propDef: {
         active: boolean;
         buttonText: string;
         clickHandler: () => void;
+        dataTestId: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/deployment/ComposedRainlangModal.svelte

@@ -2,15 +2,17 @@
 import { RainlangLR } from "codemirror-rainlang";
 import { lightCodeMirrorTheme } from "../../utils/codeMirrorThemes";
 import { Button, Modal } from "flowbite-svelte";
-export let gui;
+import { useGui } from "../../hooks/useGui";
+const gui = useGui();
 let rainlangText = null;
 let open = false;
 async function generateRainlang() {
-  const rainlang = await gui.getComposedRainlang();
-  if (rainlang) {
-    rainlangText = rainlang;
-    open = true;
+  let result = await gui.getComposedRainlang();
+  if (result.error) {
+    throw new Error(result.error.msg);
   }
+  rainlangText = result.value;
+  open = true;
 }
 </script>
 

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

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

package/dist/components/deployment/DeploymentSectionHeader.svelte

@@ -1,4 +1,5 @@
-<script>export let title;
+<script>import Markdown from "svelte-markdown";
+export let title;
 export let description = "";
 </script>
 
@@ -7,8 +8,10 @@ export let description = "";
 		{title}
 	</h1>
 	{#if description}
-		<p class="break-words text-sm font-light text-gray-600 lg:text-base dark:text-gray-400">
-			{description}
-		</p>
+		<div
+			class="prose prose-sm lg:prose-base prose-neutral dark:prose-invert text-gray-600 dark:text-gray-400"
+		>
+			<Markdown source={description} />
+		</div>
 	{/if}
 </div>

package/dist/components/deployment/DeploymentSteps.svelte

@@ -1,252 +1,236 @@
-<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 { fade } from "svelte/transition";
+import ShareChoicesButton from "./ShareChoicesButton.svelte";
+import { useRegistry } from "../../providers/registry/useRegistry";
 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 account;
 let allDepositFields = [];
 let allTokenOutputs = [];
+let allTokenInputs = [];
 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 gui = useGui();
+const registry = useRegistry();
 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);
+  const selectTokensResult = gui.getSelectTokens();
+  if (selectTokensResult.error) {
+    throw new Error(selectTokensResult.error.msg);
   }
-}
-async function getAllDepositFields() {
-  try {
-    let dep = gui.getCurrentDeployment();
-    let depositFields = dep.deposits;
-    allDepositFields = depositFields;
-  } catch (e) {
-    DeploymentStepsError.catch(e, DeploymentStepsErrorCode.NO_DEPOSITS);
+  selectTokens = selectTokensResult.value;
+  const { value, error } = gui.getNetworkKey();
+  if (error) {
+    DeploymentStepsError.catch(error, DeploymentStepsErrorCode.NO_NETWORK_KEY);
+  } else if (value) {
+    subgraphUrl = $settings.orderbook.subgraphs[value].url;
   }
+  await areAllTokensSelected();
+});
+$: if (selectTokens?.length === 0 || allTokensSelected) {
+  updateFields();
 }
-let allTokenInputs = [];
-function getAllTokenInputs() {
+function getAllGuiConfig() {
   try {
-    allTokenInputs = gui.getCurrentDeployment().deployment.order.inputs;
+    let result = gui.getAllGuiConfig();
+    if (result.error) {
+      throw new Error(result.error.msg);
+    }
+    allFieldDefinitionsWithoutDefaults = result.value.fieldDefinitionsWithoutDefaults;
+    allFieldDefinitionsWithDefaults = result.value.fieldDefinitionsWithDefaults;
+    allDepositFields = result.value.deposits;
+    allTokenOutputs = result.value.orderOutputs;
+    allTokenInputs = result.value.orderInputs;
   } catch (e) {
-    DeploymentStepsError.catch(e, DeploymentStepsErrorCode.NO_TOKEN_INPUTS);
+    DeploymentStepsError.catch(e, DeploymentStepsErrorCode.NO_GUI_CONFIG);
   }
 }
-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() {
+function updateFields() {
   try {
     DeploymentStepsError.clear();
-    getAllDepositFields();
-    getAllFieldDefinitions();
-    getAllTokenInputs();
-    getAllTokenOutputs();
+    getAllGuiConfig();
   } catch (e) {
     DeploymentStepsError.catch(e, DeploymentStepsErrorCode.NO_GUI);
   }
 }
 async function _handleShareChoices() {
-  await handleShareChoices(gui);
+  await handleShareChoices(gui, registry.getCurrentRegistry());
 }
 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();
-      getAllFieldDefinitions();
+      getAllGuiConfig();
     }
   }
 }
-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();
+    return onDeploy(gui, subgraphUrl);
   } 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}
+
+			{#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}
-		</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 allTokensSelected || selectTokens?.length === 0}
+				{#if allFieldDefinitionsWithoutDefaults.length > 0}
+					{#each allFieldDefinitionsWithoutDefaults as fieldDefinition}
+						<FieldDefinitionInput {fieldDefinition} />
+					{/each}
 				{/if}
 
-				{#if allTokensSelected || selectTokens?.length === 0}
-					{#if allFieldDefinitionsWithoutDefaults.length > 0}
-						<FieldDefinitionsSection
-							allFieldDefinitions={allFieldDefinitionsWithoutDefaults}
-							{gui}
-						/>
-					{/if}
+				<Toggle bind:checked={showAdvancedOptions}>Show advanced options</Toggle>
 
-					<Toggle bind:checked={showAdvancedOptions}>Show advanced options</Toggle>
+				{#if showAdvancedOptions}
+					{#each allFieldDefinitionsWithDefaults as fieldDefinition}
+						<FieldDefinitionInput {fieldDefinition} />
+					{/each}
 
-					{#if allFieldDefinitionsWithDefaults.length > 0 && showAdvancedOptions}
-						<FieldDefinitionsSection allFieldDefinitions={allFieldDefinitionsWithDefaults} {gui} />
-					{/if}
+					{#each allDepositFields as deposit}
+						<DepositInput {deposit} />
+					{/each}
 
-					{#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}
+					{#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>