feat: ID-1674 allow L2 token transfers via Checkout bridge widget (#1756

)
immutable · May 14, 2024 · ecdd884 · ecdd884
1 parent ee9acdd
commit ecdd884
Show file tree

Hide file tree

Showing 14 changed files with 316 additions and 98 deletions.
diff --git a/packages/checkout/sdk/src/sdk.ts b/packages/checkout/sdk/src/sdk.ts
@@ -11,13 +11,17 @@ import * as provider from './provider';
 import * as wallet from './wallet';
 import * as network from './network';
 import * as transaction from './transaction';
+import { handleProviderError } from './transaction';
 import * as gasEstimatorService from './gasEstimate';
 import * as buy from './smartCheckout/buy';
 import * as cancel from './smartCheckout/cancel';
 import * as sell from './smartCheckout/sell';
 import * as smartCheckout from './smartCheckout';
 import {
+  AddNetworkParams,
   BuyParams,
+  BuyResult,
+  CancelResult,
   ChainId,
   CheckConnectionParams,
   CheckConnectionResult,
@@ -26,6 +30,11 @@ import {
   ConnectResult,
   CreateProviderParams,
   CreateProviderResult,
+  EIP6963ProviderDetail,
+  FiatRampParams,
+  GasEstimateBridgeToL2Result,
+  GasEstimateParams,
+  GasEstimateSwapResult,
   GetAllBalancesParams,
   GetAllBalancesResult,
   GetBalanceParams,
@@ -35,29 +44,21 @@ import {
   GetNetworkParams,
   GetTokenAllowListParams,
   GetTokenAllowListResult,
+  GetTokenInfoParams,
   GetWalletAllowListParams,
   GetWalletAllowListResult,
   NetworkInfo,
+  OnRampProviderFees,
+  SellResult,
   SendTransactionParams,
   SendTransactionResult,
+  SmartCheckoutParams,
+  SmartCheckoutResult,
   SwitchNetworkParams,
   SwitchNetworkResult,
-  ValidateProviderOptions,
-  GasEstimateParams,
-  GasEstimateSwapResult,
-  GasEstimateBridgeToL2Result,
-  SmartCheckoutParams,
   TokenFilterTypes,
-  OnRampProviderFees,
-  FiatRampParams,
-  SmartCheckoutResult,
-  CancelResult,
-  BuyResult,
-  SellResult,
   TokenInfo,
-  GetTokenInfoParams,
-  AddNetworkParams,
-  EIP6963ProviderDetail,
+  ValidateProviderOptions,
 } from './types';
 import { CheckoutConfiguration } from './config';
 import { createReadOnlyProviders } from './readOnlyProviders/readOnlyProvider';
@@ -481,6 +482,31 @@ export class Checkout {
     return await transaction.sendTransaction(web3Provider, params.transaction);
   }
 
+  /**
+   * Wraps a Web3Provider call to validate the provider and handle errors.
+   * @param {Web3Provider} web3Provider - The provider to connect to the network.
+   * @param {(web3Provider: Web3Provider) => Promise<T>)} block - The block executing the provider call.
+   * @returns {Promise<T>} Returns the result of the provided block param.
+   */
+  public async providerCall<T>(
+    web3Provider: Web3Provider,
+    block: (web3Provider: Web3Provider) => Promise<T>,
+  ): Promise<T> {
+    const validatedProvider = await provider.validateProvider(
+      this.config,
+      web3Provider,
+      {
+        allowUnsupportedProvider: true,
+        allowMistmatchedChainId: true,
+      } as ValidateProviderOptions,
+    );
+    try {
+      return await block(validatedProvider);
+    } catch (err: any) {
+      throw handleProviderError(err);
+    }
+  }
+
   /**
    * Retrieves network information using the specified provider.
    * @param {GetNetworkParams} params - The parameters for retrieving network information.

diff --git a/packages/checkout/sdk/src/transaction/transaction.ts b/packages/checkout/sdk/src/transaction/transaction.ts
@@ -21,6 +21,35 @@ export const setTransactionGasLimits = async (
   return rawTx;
 };
 
+export const handleProviderError = (err: any) => {
+  if (err.code === ethers.errors.INSUFFICIENT_FUNDS) {
+    return new CheckoutError(
+      err.message,
+      CheckoutErrorType.INSUFFICIENT_FUNDS,
+      { error: err },
+    );
+  }
+  if (err.code === ethers.errors.ACTION_REJECTED) {
+    return new CheckoutError(
+      err.message,
+      CheckoutErrorType.USER_REJECTED_REQUEST_ERROR,
+      { error: err },
+    );
+  }
+  if (err.code === ethers.errors.UNPREDICTABLE_GAS_LIMIT) {
+    return new CheckoutError(
+      err.message,
+      CheckoutErrorType.UNPREDICTABLE_GAS_LIMIT,
+      { error: err },
+    );
+  }
+  return new CheckoutError(
+    err.message,
+    CheckoutErrorType.TRANSACTION_FAILED,
+    { error: err },
+  );
+};
+
 export const sendTransaction = async (
   web3Provider: Web3Provider,
   transaction: TransactionRequest,
@@ -35,31 +64,6 @@ export const sendTransaction = async (
       transactionResponse,
     };
   } catch (err: any) {
-    if (err.code === ethers.errors.INSUFFICIENT_FUNDS) {
-      throw new CheckoutError(
-        err.message,
-        CheckoutErrorType.INSUFFICIENT_FUNDS,
-        { error: err },
-      );
-    }
-    if (err.code === ethers.errors.ACTION_REJECTED) {
-      throw new CheckoutError(
-        err.message,
-        CheckoutErrorType.USER_REJECTED_REQUEST_ERROR,
-        { error: err },
-      );
-    }
-    if (err.code === ethers.errors.UNPREDICTABLE_GAS_LIMIT) {
-      throw new CheckoutError(
-        err.message,
-        CheckoutErrorType.UNPREDICTABLE_GAS_LIMIT,
-        { error: err },
-      );
-    }
-    throw new CheckoutError(
-      err.message,
-      CheckoutErrorType.TRANSACTION_FAILED,
-      { error: err },
-    );
+    throw handleProviderError(err);
   }
 };
diff --git a/packages/checkout/widgets-lib/src/context/view-context/BridgeViewContextTypes.ts b/packages/checkout/widgets-lib/src/context/view-context/BridgeViewContextTypes.ts
@@ -45,6 +45,7 @@ interface BridgeReview extends ViewType {
 interface BridgeInProgress extends ViewType {
   type: BridgeWidgetViews.IN_PROGRESS,
   transactionHash: string,
+  isTransfer: boolean,
 }
 
 interface BridgeFailure extends ViewType {
@@ -54,8 +55,8 @@ interface BridgeFailure extends ViewType {
 
 interface BridgeApproveTransaction extends ViewType {
   type: BridgeWidgetViews.APPROVE_TRANSACTION,
-  approveTransaction: ApproveBridgeResponse;
-  transaction: BridgeTxResponse;
+  approveTransaction: ApproveBridgeResponse | undefined;
+  transaction: BridgeTxResponse | undefined;
 }
 
 interface BridgeTransactions extends ViewType {

diff --git a/packages/checkout/widgets-lib/src/context/view-context/ViewContext.test.ts b/packages/checkout/widgets-lib/src/context/view-context/ViewContext.test.ts
@@ -196,6 +196,7 @@ describe('view-context', () => {
             {
               type: BridgeWidgetViews.IN_PROGRESS,
               transactionHash: '',
+              isTransfer: false,
             },
             {
               type: BridgeWidgetViews.BRIDGE_FAILURE,
@@ -233,6 +234,7 @@ describe('view-context', () => {
             {
               type: BridgeWidgetViews.IN_PROGRESS,
               transactionHash: '',
+              isTransfer: false,
             },
             {
               type: BridgeWidgetViews.BRIDGE_FAILURE,
@@ -270,6 +272,7 @@ describe('view-context', () => {
             {
               type: BridgeWidgetViews.IN_PROGRESS,
               transactionHash: '',
+              isTransfer: false,
             },
             {
               type: BridgeWidgetViews.BRIDGE_FAILURE,
@@ -292,6 +295,7 @@ describe('view-context', () => {
           {
             type: BridgeWidgetViews.IN_PROGRESS,
             transactionHash: '',
+            isTransfer: false,
           },
           {
             type: BridgeWidgetViews.BRIDGE_FAILURE,

diff --git a/packages/checkout/widgets-lib/src/locales/en.json b/packages/checkout/widgets-lib/src/locales/en.json
@@ -450,7 +450,8 @@
       "toFormInput": {
         "heading": "To",
         "selectDefaultText": "Select wallet and network",
-        "walletSelectorHeading": "To wallet"
+        "walletSelectorHeading": "To wallet",
+        "networkSelectorHeading": "To network"
       },
       "submitButton": {
         "text": "Next"
@@ -522,7 +523,8 @@
     "IN_PROGRESS": {
       "heading": "Move in progress",
       "body1": "Your funds have been sent, with less than 20 mins remaining until they're received. You can return and view progress by clicking on the rocket icon.",
-      "body2": "You can close this window."
+      "body2": "You can close this window.",
+      "transferHeading": "Funds transferred"
     },
     "TRANSACTIONS": {
       "layoutHeading": "In progress",

diff --git a/packages/checkout/widgets-lib/src/locales/ja.json b/packages/checkout/widgets-lib/src/locales/ja.json
@@ -456,7 +456,8 @@
       "toFormInput": {
         "heading": "To",
         "selectDefaultText": "ウォレットとネットワークを選択",
-        "walletSelectorHeading": "To wallet"
+        "walletSelectorHeading": "To wallet",
+        "networkSelectorHeading": "To network"
       },
       "submitButton": {
         "text": "次へ"
@@ -528,7 +529,8 @@
     "IN_PROGRESS": {
       "heading": "移動進行中",
       "body1": "資金は送信されました。受信まで残り20分未満です。進捗状況は、ロケットアイコンをクリックして戻って確認できます。",
-      "body2": "このウィンドウを閉じてもよろしいです。"
+      "body2": "このウィンドウを閉じてもよろしいです。",
+      "transferHeading": "Funds transferred"
     },
     "TRANSACTIONS": {
       "layoutHeading": "進行中",

diff --git a/packages/checkout/widgets-lib/src/locales/ko.json b/packages/checkout/widgets-lib/src/locales/ko.json
@@ -449,7 +449,8 @@
       "toFormInput": {
         "heading": "To",
         "selectDefaultText": "지갑과 네트워크를 선택하세요",
-        "walletSelectorHeading": "지갑으로"
+        "walletSelectorHeading": "지갑으로",
+        "networkSelectorHeading": "To network"
       },
       "submitButton": {
         "text": "다음"
@@ -521,7 +522,8 @@
     "IN_PROGRESS": {
       "heading": "이동 중",
       "body1": "자금이 송금되었습니다. 수령까지 남은 시간은 20분 미만입니다. 로켓 아이콘을 클릭하여 진행 상황을 확인할 수 있습니다.",
-      "body2": "이 창을 닫아도 됩니다."
+      "body2": "이 창을 닫아도 됩니다.",
+      "transferHeading": "Funds transferred"
     },
     "TRANSACTIONS": {
       "layoutHeading": "진행 중",

diff --git a/packages/checkout/widgets-lib/src/locales/zh.json b/packages/checkout/widgets-lib/src/locales/zh.json
@@ -449,7 +449,8 @@
       "toFormInput": {
         "heading": "至",
         "selectDefaultText": "选择钱包和网络",
-        "walletSelectorHeading": "至钱包"
+        "walletSelectorHeading": "至钱包",
+        "networkSelectorHeading": "To network"
       },
       "submitButton": {
         "text": "下一步"
@@ -521,7 +522,8 @@
     "IN_PROGRESS": {
       "heading": "转移进行中",
       "body1": "您的资金已经发送，距离收到不到20分钟。您可以点击火箭图标返回并查看进展。",
-      "body2": "您可以关闭这个窗口。"
+      "body2": "您可以关闭这个窗口。",
+      "transferHeading": "Funds transferred"
     },
     "TRANSACTIONS": {
       "layoutHeading": "进行中",

diff --git a/packages/checkout/widgets-lib/src/widgets/bridge/BridgeWidget.tsx b/packages/checkout/widgets-lib/src/widgets/bridge/BridgeWidget.tsx
@@ -216,6 +216,7 @@ export default function BridgeWidget({
           {viewState.view.type === BridgeWidgetViews.IN_PROGRESS && (
             <MoveInProgress
               transactionHash={viewState.view.transactionHash}
+              isTransfer={viewState.view.isTransfer}
             />
           )}
           {viewState.view.type === BridgeWidgetViews.BRIDGE_FAILURE
@@ -247,8 +248,9 @@ export default function BridgeWidget({
 
           {viewState.view.type === BridgeWidgetViews.APPROVE_TRANSACTION && (
             <ApproveTransaction
-              approveTransaction={viewState.view.approveTransaction}
-              transaction={viewState.view.transaction}
+              bridgeTransaction={viewState.view.approveTransaction && viewState.view.transaction
+                ? { approveTransaction: viewState.view.approveTransaction, transaction: viewState.view.transaction }
+                : undefined}
             />
           )}
           {viewState.view.type === BridgeWidgetViews.TRANSACTIONS && (