feat: Add autoProceed to swap widget (#2112)

Co-authored-by: Luã de Souza <[email protected]>
immutable · Aug 27, 2024 · 9a961b9 · 9a961b9
1 parent 7b97078
commit 9a961b9
Show file tree

Hide file tree

Showing 16 changed files with 308 additions and 275 deletions.
diff --git a/packages/checkout/sdk/src/sdk.ts b/packages/checkout/sdk/src/sdk.ts
@@ -77,7 +77,7 @@ import { WidgetConfiguration } from './widgets/definitions/configurations';
 import { SemanticVersion } from './widgets/definitions/types';
 import { validateAndBuildVersion } from './widgets/version';
 import { InjectedProvidersManager } from './provider/injectedProvidersManager';
-import { SwapParams, SwapResult } from './types/swap';
+import { SwapParams, SwapQuoteResult, SwapResult } from './types/swap';
 
 const SANDBOX_CONFIGURATION = {
   baseConfig: {
@@ -726,7 +726,7 @@ export class Checkout {
   }
 
   /**
-   * Fetches the approval and swap transaction details including the quote for the swap.
+   * Fetches a quote and then performs the approval and swap transaction.
    * @param {SwapParams} params - The parameters for the swap.
    * @returns {Promise<SwapResult>} - A promise that resolves to the swap result (swap tx, swap tx receipt, quote used in the swap).
    */
@@ -747,4 +747,27 @@ export class Checkout {
       params.deadline,
     );
   }
+
+  /**
+   * Fetches a quote for the swap.
+   * @param {SwapParams} params - The parameters for the swap.
+   * @returns {Promise<SwapQuoteResult>} - A promise that resolves to the swap quote result.
+   */
+  public async swapQuote(params: SwapParams): Promise<SwapQuoteResult> {
+    const web3Provider = await provider.validateProvider(
+      this.config,
+      params.provider,
+    );
+    return swap.swapQuote(
+      this.config,
+      web3Provider,
+      params.fromToken,
+      params.toToken,
+      params.fromAmount,
+      params.toAmount,
+      params.slippagePercent,
+      params.maxHops,
+      params.deadline,
+    );
+  }
 }
diff --git a/packages/checkout/sdk/src/widgets/definitions/parameters/swap.ts b/packages/checkout/sdk/src/widgets/definitions/parameters/swap.ts
@@ -1,6 +1,11 @@
 import { WalletProviderName } from '../../../types';
 import { WidgetLanguage } from '../configurations';
 
+export enum SwapDirection {
+  FROM = 'FROM',
+  TO = 'TO',
+}
+
 /**
  * Swap Widget parameters
  * @property {string | undefined} amount
@@ -19,4 +24,8 @@ export type SwapWidgetParams = {
   walletProviderName?: WalletProviderName;
   /** The language to use for the swap widget */
   language?: WidgetLanguage;
+  /** Whether the swap widget should display the form or automatically proceed with the swap */
+  autoProceed?: boolean;
+  /** The direction of the swap */
+  direction?: SwapDirection;
 };
diff --git a/packages/checkout/widgets-lib/src/context/view-context/SwapViewContextTypes.ts b/packages/checkout/widgets-lib/src/context/view-context/SwapViewContextTypes.ts
@@ -58,7 +58,7 @@ interface SwapInProgressView extends ViewType {
   }
 }
 export interface ApproveERC20SwapData {
-  approveTransaction: TransactionRequest;
+  approveTransaction?: TransactionRequest;
   transaction: TransactionRequest;
   info: Quote;
   swapFormInfo: PrefilledSwapForm;

diff --git a/packages/checkout/widgets-lib/src/locales/en.json b/packages/checkout/widgets-lib/src/locales/en.json
@@ -172,6 +172,11 @@
         "loading": {
           "text": "Swap in progress"
         }
+      },
+      "PREPARE_SWAP": {
+        "loading": {
+          "text": "Calculating swap"
+        }
       }
     },
     "APPROVE_ERC20": {

diff --git a/packages/checkout/widgets-lib/src/locales/ja.json b/packages/checkout/widgets-lib/src/locales/ja.json
@@ -175,6 +175,11 @@
         "loading": {
           "text": "スワップ進行中"
         }
+      },
+      "PREPARE_SWAP": {
+        "loading": {
+          "text": "スワップ計算"
+        }
       }
     },
     "APPROVE_ERC20": {

diff --git a/packages/checkout/widgets-lib/src/locales/ko.json b/packages/checkout/widgets-lib/src/locales/ko.json
@@ -171,6 +171,11 @@
         "loading": {
           "text": "교환 진행 중"
         }
+      },
+      "PREPARE_SWAP": {
+        "loading": {
+          "text": "스왑 계산"
+        }
       }
     },
     "APPROVE_ERC20": {

diff --git a/packages/checkout/widgets-lib/src/locales/zh.json b/packages/checkout/widgets-lib/src/locales/zh.json
@@ -171,6 +171,11 @@
         "loading": {
           "text": "交换进行中"
         }
+      },
+      "PREPARE_SWAP": {
+        "loading": {
+          "text": "计算交换"
+        }
       }
     },
     "APPROVE_ERC20": {

diff --git a/packages/checkout/widgets-lib/src/widgets/swap/SwapWidget.tsx b/packages/checkout/widgets-lib/src/widgets/swap/SwapWidget.tsx
@@ -7,10 +7,9 @@ import {
   useState,
 } from 'react';
 import {
-  DexConfig, TokenFilterTypes, IMTBLWidgetEvents, SwapWidgetParams,
+  TokenFilterTypes, IMTBLWidgetEvents, SwapWidgetParams,
+  SwapDirection,
 } from '@imtbl/checkout-sdk';
-import { ImmutableConfiguration } from '@imtbl/config';
-import { Exchange } from '@imtbl/dex-sdk';
 import { useTranslation } from 'react-i18next';
 import { SwapCoins } from './views/SwapCoins';
 import { LoadingView } from '../../views/loading/LoadingView';
@@ -61,6 +60,8 @@ export default function SwapWidget({
   fromTokenAddress,
   toTokenAddress,
   config,
+  autoProceed,
+  direction,
 }: SwapWidgetInputs) {
   const { t } = useTranslation();
   const {
@@ -169,30 +170,6 @@ export default function SwapWidget({
       // connect loader handle the switch network functionality
       if (network.chainId !== getL2ChainId(checkout.config)) return;
 
-      let dexConfig: DexConfig | undefined;
-      try {
-        dexConfig = (
-          (await checkout.config.remote.getConfig('dex')) as DexConfig
-        );
-      } catch (err: any) {
-        showErrorView(err);
-        return;
-      }
-
-      const exchange = new Exchange({
-        chainId: network.chainId,
-        baseConfig: new ImmutableConfiguration({ environment }),
-        secondaryFees: dexConfig.secondaryFees,
-        overrides: dexConfig.overrides,
-      });
-
-      swapDispatch({
-        payload: {
-          type: SwapActions.SET_EXCHANGE,
-          exchange,
-        },
-      });
-
       swapDispatch({
         payload: {
           type: SwapActions.SET_NETWORK,
@@ -208,6 +185,31 @@ export default function SwapWidget({
     })();
   }, [checkout, provider]);
 
+  useEffect(() => {
+    swapDispatch({
+      payload: {
+        type: SwapActions.SET_AUTO_PROCEED,
+        autoProceed: autoProceed ?? false,
+        direction: direction ?? SwapDirection.FROM,
+      },
+    });
+  }, [autoProceed, direction]);
+
+  const cancelAutoProceed = useCallback(() => {
+    if (autoProceed) {
+      swapDispatch({
+        payload: {
+          type: SwapActions.SET_AUTO_PROCEED,
+          autoProceed: false,
+          direction: SwapDirection.FROM,
+        },
+      });
+    }
+  }, [autoProceed, swapDispatch]);
+
+  const fromAmount = direction === SwapDirection.FROM || direction == null ? amount : undefined;
+  const toAmount = direction === SwapDirection.TO ? amount : undefined;
+
   return (
     <ViewContext.Provider value={viewReducerValues}>
       <SwapContext.Provider value={swapReducerValues}>
@@ -218,14 +220,11 @@ export default function SwapWidget({
           {viewState.view.type === SwapWidgetViews.SWAP && (
           <SwapCoins
             theme={theme}
-            fromAmount={viewState.view.data?.fromAmount ?? amount}
-            fromTokenAddress={
-                  viewState.view.data?.fromTokenAddress
-                  ?? fromTokenAddress
-                }
-            toTokenAddress={
-                  viewState.view.data?.toTokenAddress ?? toTokenAddress
-                }
+            cancelAutoProceed={cancelAutoProceed}
+            fromAmount={fromAmount}
+            toAmount={toAmount}
+            fromTokenAddress={viewState.view.data?.fromTokenAddress ?? fromTokenAddress}
+            toTokenAddress={viewState.view.data?.toTokenAddress ?? toTokenAddress}
           />
           )}
           {viewState.view.type === SwapWidgetViews.IN_PROGRESS && (

diff --git a/packages/checkout/widgets-lib/src/widgets/swap/SwapWidgetRoot.tsx b/packages/checkout/widgets-lib/src/widgets/swap/SwapWidgetRoot.tsx
@@ -2,6 +2,7 @@ import React, { Suspense } from 'react';
 import {
   ChainId,
   IMTBLWidgetEvents,
+  SwapDirection,
   SwapWidgetParams,
   WalletProviderName,
   WidgetConfiguration,
@@ -71,6 +72,10 @@ export class Swap extends Base<WidgetType.SWAP> {
       validatedParams.toTokenAddress = '';
     }
 
+    if (params.autoProceed) {
+      validatedParams.autoProceed = true;
+    }
+
     return validatedParams;
   }
 
@@ -131,6 +136,8 @@ export class Swap extends Base<WidgetType.SWAP> {
                         toTokenAddress={this.parameters.toTokenAddress}
                         amount={this.parameters.amount}
                         config={this.strongConfig()}
+                        autoProceed={this.parameters.autoProceed}
+                        direction={this.parameters.direction ?? SwapDirection.FROM}
                       />
                     </Suspense>
                   </ConnectLoader>