@rainlanguage/ui-components 0.0.1-alpha.48 → 0.0.1-alpha.50

package/dist/components/deployment/DeploymentSteps.svelte

@@ -1,4 +1,4 @@
-<script>import { Alert } from "flowbite-svelte";
+<script>import { Alert, Button, Spinner } from "flowbite-svelte";
 import TokenIOInput from "./TokenIOInput.svelte";
 import ComposedRainlangModal from "./ComposedRainlangModal.svelte";
 import {
@@ -7,12 +7,10 @@ import WalletConnect from "../wallet/WalletConnect.svelte";
 import {
 } from "@rainlanguage/orderbook/js_api";
 import { fade } from "svelte/transition";
-import { Button, Toggle, Spinner } from "flowbite-svelte";
-import {} from "@wagmi/core";
+import { Toggle } from "flowbite-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";
 import FieldDefinitionInput from "./FieldDefinitionInput.svelte";
@@ -21,12 +19,14 @@ import SelectToken from "./SelectToken.svelte";
 import DeploymentSectionHeader from "./DeploymentSectionHeader.svelte";
 import { useGui } from "../../hooks/useGui";
 import { useAccount } from "../../providers/wallet/useAccount";
-export let settings;
-export let dotrain;
+import { handleDeployment } from "./handleDeployment";
+import {} from "../../types/transaction";
 export let deployment;
 export let strategyDetail;
-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 = [];
@@ -34,28 +34,25 @@ let allFieldDefinitionsWithoutDefaults = [];
 let allFieldDefinitionsWithDefaults = [];
 let allTokensSelected = false;
 let showAdvancedOptions = false;
-let checkingDeployment = false;
 let allTokenInfos = [];
+let selectTokens = void 0;
+let checkingDeployment = false;
+let subgraphUrl = void 0;
 const { account } = useAccount();
 const gui = useGui();
-let selectTokens = void 0;
-let networkKey = "";
-$: subgraphUrl = $settings?.subgraphs?.[networkKey] ?? "";
 let deploymentStepsError = DeploymentStepsError.error;
-export let wagmiConfig;
-export let wagmiConnected;
-export let appKitModal;
 onMount(async () => {
   const selectTokensResult = gui.getSelectTokens();
   if (selectTokensResult.error) {
     throw new Error(selectTokensResult.error.msg);
   }
   selectTokens = selectTokensResult.value;
-  const networkKeyResult = gui.getNetworkKey();
-  if (networkKeyResult.error) {
-    throw new Error(networkKeyResult.error.msg);
+  const { value, error } = gui.getNetworkKey();
+  if (error) {
+    DeploymentStepsError.catch(error, DeploymentStepsErrorCode.NO_NETWORK_KEY);
+  } else if (value) {
+    subgraphUrl = $settings?.subgraphs?.[value];
   }
-  networkKey = networkKeyResult.value;
   await areAllTokensSelected();
 });
 function getAllFieldDefinitions() {
@@ -141,54 +138,6 @@ 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;
-  }
-  if (!networkKey) {
-    DeploymentStepsError.catch(null, DeploymentStepsErrorCode.NO_CHAIN);
-    return;
-  }
-  if (!$account) {
-    DeploymentStepsError.catch(null, DeploymentStepsErrorCode.NO_WALLET);
-    return;
-  }
-  let result = null;
-  checkingDeployment = true;
-  try {
-    result = await getDeploymentTransactionArgs(gui, $account);
-  } catch (e) {
-    DeploymentStepsError.catch(e, DeploymentStepsErrorCode.ADD_ORDER_FAILED);
-    checkingDeployment = false;
-    return;
-  }
-  checkingDeployment = false;
-  const onAccept = () => {
-    if (!networkKey) {
-      DeploymentStepsError.catch(null, DeploymentStepsErrorCode.NO_CHAIN);
-      return;
-    }
-    handleDeployModal({
-      open: true,
-      args: {
-        ...result,
-        subgraphUrl,
-        network: networkKey,
-        account
-      }
-    });
-  };
-  handleDisclaimerModal({
-    open: true,
-    onAccept
-  });
-}
 const areAllTokensSelected = async () => {
   try {
     const areAllTokensSelectedResult = gui.areAllTokensSelected();
@@ -217,97 +166,115 @@ const areAllTokensSelected = async () => {
     DeploymentStepsError.catch(e, DeploymentStepsErrorCode.NO_SELECT_TOKENS);
   }
 };
+async function handleDeployButtonClick() {
+  if (checkingDeployment) {
+    return;
+  }
+  checkingDeployment = true;
+  try {
+    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) {
+    DeploymentStepsError.catch(e, DeploymentStepsErrorCode.ADD_ORDER_FAILED);
+  } finally {
+    checkingDeployment = false;
+  }
+}
 </script>
 
-<div class="py-6">
-	{#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}
+<div>
+	{#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 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}
+					{#each allFieldDefinitionsWithoutDefaults as fieldDefinition}
+						<FieldDefinitionInput {fieldDefinition} />
+					{/each}
 				{/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 showAdvancedOptions}
+					{#each allFieldDefinitionsWithDefaults as fieldDefinition}
+						<FieldDefinitionInput {fieldDefinition} />
+					{/each}
 
-					{#if allFieldDefinitionsWithDefaults.length > 0 && showAdvancedOptions}
-						{#each allFieldDefinitionsWithDefaults as fieldDefinition}
-							<FieldDefinitionInput {fieldDefinition} />
-						{/each}
-					{/if}
+					{#each allDepositFields as deposit}
+						<DepositInput {deposit} />
+					{/each}
 
-					{#if showAdvancedOptions}
-						{#each allDepositFields as deposit}
-							<DepositInput {deposit} />
-						{/each}
-					{/if}
+					{#each allTokenInputs as input, i}
+						<TokenIOInput {i} label="Input" vault={input} />
+					{/each}
 
-					{#if showAdvancedOptions}
-						{#each allTokenInputs as input, i}
-							<TokenIOInput {i} label="Input" vault={input} />
-						{/each}
+					{#each allTokenOutputs as output, i}
+						<TokenIOInput {i} label="Output" vault={output} />
+					{/each}
+				{/if}
 
-						{#each allTokenOutputs as output, i}
-							<TokenIOInput {i} label="Output" vault={output} />
-						{/each}
-					{/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}
 
-					{#if $deploymentStepsError}
-						<Alert color="red">
-							<p class="text-red-500">{$deploymentStepsError.code}</p>
-							{#if $deploymentStepsError.details}
-								<p class="text-red-500">{$deploymentStepsError.details}</p>
+				<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}
-						</Alert>
+						</Button>
+					{:else}
+						<WalletConnect {appKitModal} connected={wagmiConnected} />
 					{/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} />
-						{/if}
-						<ComposedRainlangModal />
-						<ShareChoicesButton handleShareChoices={_handleShareChoices} />
-					</div>
-				{/if}
-			</div>
-		{/if}
+					<ComposedRainlangModal />
+					<ShareChoicesButton handleShareChoices={_handleShareChoices} />
+				</div>
+			{/if}
+		</div>
 	{/if}
 </div>

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

@@ -1,26 +1,22 @@
 import { SvelteComponent } from "svelte";
 import { type ConfigSource } from '@rainlanguage/orderbook/js_api';
 import { 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';
+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;
-        handleDeployModal: (args: DeployModalProps) => void;
-        handleDisclaimerModal: (args: DisclaimerModalProps) => void;
-        registryUrl: string;
-        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>;
+        settings: Writable<ConfigSource>;
+        registryUrl: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/deployment/handleDeployment.d.ts

@@ -0,0 +1,11 @@
+import type { DotrainOrderGui } from '@rainlanguage/orderbook/js_api';
+import type { DeploymentArgs } from '../../types/transaction';
+export declare enum AddOrderErrors {
+    ADD_ORDER_FAILED = "Failed to add order",
+    MISSING_GUI = "Order GUI is required",
+    MISSING_CONFIG = "Wagmi config is required",
+    NO_ACCOUNT_CONNECTED = "No wallet address found",
+    ERROR_GETTING_ARGS = "Error getting deployment transaction args",
+    ERROR_GETTING_NETWORK_KEY = "Error getting network key"
+}
+export declare function handleDeployment(gui: DotrainOrderGui, account: string | null, subgraphUrl?: string): Promise<DeploymentArgs>;

package/dist/components/deployment/handleDeployment.js

@@ -0,0 +1,33 @@
+export var AddOrderErrors;
+(function (AddOrderErrors) {
+    AddOrderErrors["ADD_ORDER_FAILED"] = "Failed to add order";
+    AddOrderErrors["MISSING_GUI"] = "Order GUI is required";
+    AddOrderErrors["MISSING_CONFIG"] = "Wagmi config is required";
+    AddOrderErrors["NO_ACCOUNT_CONNECTED"] = "No wallet address found";
+    AddOrderErrors["ERROR_GETTING_ARGS"] = "Error getting deployment transaction args";
+    AddOrderErrors["ERROR_GETTING_NETWORK_KEY"] = "Error getting network key";
+})(AddOrderErrors || (AddOrderErrors = {}));
+export async function handleDeployment(gui, account, subgraphUrl) {
+    const networkKeyResult = gui.getNetworkKey();
+    if (networkKeyResult.error) {
+        throw new Error(AddOrderErrors.ERROR_GETTING_NETWORK_KEY);
+    }
+    const network = networkKeyResult.value;
+    if (!account) {
+        throw new Error(AddOrderErrors.NO_ACCOUNT_CONNECTED);
+    }
+    const result = await gui.getDeploymentTransactionArgs(account);
+    if (result.error) {
+        throw new Error(result.error.msg);
+    }
+    const { approvals, deploymentCalldata, orderbookAddress, chainId } = result.value;
+    return {
+        approvals,
+        deploymentCalldata,
+        // Cast to Hex, since js_api returns a string
+        orderbookAddress: orderbookAddress,
+        chainId,
+        network,
+        subgraphUrl
+    };
+}

package/dist/errors/DeploymentStepsError.d.ts

@@ -10,6 +10,7 @@ export declare enum DeploymentStepsErrorCode {
     NO_TOKEN_OUTPUTS = "Error loading token outputs",
     NO_GUI_DETAILS = "Error getting GUI details",
     NO_CHAIN = "Unsupported chain ID",
+    NO_NETWORK_KEY = "No network key found",
     SERIALIZE_ERROR = "Error serializing state",
     ADD_ORDER_FAILED = "Failed to add order",
     NO_WALLET = "No account address found"

package/dist/errors/DeploymentStepsError.js

@@ -12,6 +12,7 @@ export var DeploymentStepsErrorCode;
     DeploymentStepsErrorCode["NO_TOKEN_OUTPUTS"] = "Error loading token outputs";
     DeploymentStepsErrorCode["NO_GUI_DETAILS"] = "Error getting GUI details";
     DeploymentStepsErrorCode["NO_CHAIN"] = "Unsupported chain ID";
+    DeploymentStepsErrorCode["NO_NETWORK_KEY"] = "No network key found";
     DeploymentStepsErrorCode["SERIALIZE_ERROR"] = "Error serializing state";
     DeploymentStepsErrorCode["ADD_ORDER_FAILED"] = "Failed to add order";
     DeploymentStepsErrorCode["NO_WALLET"] = "No account address found";

package/dist/stores/transactionStore.d.ts

@@ -1,6 +1,7 @@
 import type { Hex } from 'viem';
 import type { Config } from '@wagmi/core';
-import type { ApprovalCalldata, DepositCalldataResult, RemoveOrderCalldata, SgVault, WithdrawCalldataResult, DepositAndAddOrderCalldataResult } from '@rainlanguage/orderbook/js_api';
+import type { ApprovalCalldata, DepositCalldataResult, RemoveOrderCalldata, SgVault, WithdrawCalldataResult } from '@rainlanguage/orderbook/js_api';
+import type { DeploymentArgs } from '../types/transaction';
 export declare const ADDRESS_ZERO = "0x0000000000000000000000000000000000000000";
 export declare const ONE: bigint;
 export declare enum TransactionStatus {
@@ -32,14 +33,9 @@ export declare enum TransactionErrorMessage {
 export type ExtendedApprovalCalldata = ApprovalCalldata & {
     symbol?: string;
 };
-export type DeploymentTransactionArgs = {
+export type DeploymentArgsWithoutAccount = Omit<DeploymentArgs, 'account'>;
+export type DeploymentTransactionArgs = DeploymentArgsWithoutAccount & {
     config: Config;
-    approvals: ExtendedApprovalCalldata[];
-    deploymentCalldata: DepositAndAddOrderCalldataResult;
-    orderbookAddress: Hex;
-    chainId: number;
-    subgraphUrl: string;
-    network: string;
 };
 export type DepositOrWithdrawTransactionArgs = {
     config: Config;

package/dist/stores/transactionStore.js

@@ -200,7 +200,10 @@ const transactionStore = () => {
             const transactionExplorerLink = await getExplorerLink(hash, chainId, 'tx');
             awaitTx(hash, TransactionStatus.PENDING_DEPLOYMENT, transactionExplorerLink);
             await waitForTransactionReceipt(config, { hash });
-            return awaitNewOrderIndexing(subgraphUrl, hash, network);
+            if (subgraphUrl) {
+                return awaitNewOrderIndexing(subgraphUrl, hash, network);
+            }
+            return transactionSuccess(hash, 'Deployment successful. Check the Orders page for your new order.', '', network);
         }
         catch {
             return transactionError(TransactionErrorMessage.DEPLOYMENT_FAILED);

package/dist/types/transaction.d.ts

@@ -7,9 +7,8 @@ export type DeploymentArgs = {
     deploymentCalldata: DepositAndAddOrderCalldataResult;
     orderbookAddress: Hex;
     chainId: number;
-    subgraphUrl: string;
+    subgraphUrl?: string;
     network: string;
-    account: Account;
 };
 export type DepositOrWithdrawArgs = {
     vault: SgVault;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@rainlanguage/ui-components",
-	"version": "0.0.1-alpha.48",
+	"version": "0.0.1-alpha.50",
 	"description": "A component library for building Svelte applications to be used with Raindex.",
 	"license": "LicenseRef-DCL-1.0",
 	"author": "Rain Open Source Software Ltd",
@@ -53,7 +53,7 @@
 		"@fontsource/dm-sans": "5.1.0",
 		"@imask/svelte": "7.6.1",
 		"@observablehq/plot": "0.6.16",
-		"@rainlanguage/orderbook": "0.0.1-alpha.48",
+		"@rainlanguage/orderbook": "0.0.1-alpha.50",
 		"@reown/appkit": "1.6.4",
 		"@reown/appkit-adapter-wagmi": "1.6.4",
 		"@sentry/sveltekit": "7.120.0",

package/dist/components/deployment/getDeploymentTransactionArgs.d.ts

@@ -1,13 +0,0 @@
-import type { DepositAndAddOrderCalldataResult, DotrainOrderGui } from '@rainlanguage/orderbook/js_api';
-import type { Hex } from 'viem';
-import type { ExtendedApprovalCalldata } from '../../stores/transactionStore';
-export declare enum AddOrderErrors {
-    ADD_ORDER_FAILED = "Failed to add order"
-}
-export interface HandleAddOrderResult {
-    approvals: ExtendedApprovalCalldata[];
-    deploymentCalldata: DepositAndAddOrderCalldataResult;
-    orderbookAddress: Hex;
-    chainId: number;
-}
-export declare function getDeploymentTransactionArgs(gui: DotrainOrderGui, account: Hex): Promise<HandleAddOrderResult>;

package/dist/components/deployment/getDeploymentTransactionArgs.js

@@ -1,17 +0,0 @@
-export var AddOrderErrors;
-(function (AddOrderErrors) {
-    AddOrderErrors["ADD_ORDER_FAILED"] = "Failed to add order";
-})(AddOrderErrors || (AddOrderErrors = {}));
-export async function getDeploymentTransactionArgs(gui, account) {
-    const result = await gui.getDeploymentTransactionArgs(account);
-    if (result.error) {
-        throw new Error(result.error.msg);
-    }
-    const { approvals, deploymentCalldata, orderbookAddress, chainId } = result.value;
-    return {
-        approvals,
-        deploymentCalldata,
-        orderbookAddress: orderbookAddress,
-        chainId
-    };
-}