[NO CHANGELOG] [Add Tokens Widget] Add tokens/id 2965 confirmation (#…

…2410)
immutable · Nov 22, 2024 · ac42275 · ac42275
1 parent 4f4efcc
commit ac42275
Show file tree

Hide file tree

Showing 7 changed files with 464 additions and 99 deletions.
diff --git a/packages/checkout/widgets-lib/src/locales/en.json b/packages/checkout/widgets-lib/src/locales/en.json
@@ -793,12 +793,36 @@
           "subHeading": "Confirm the transaction request to complete this transaction"
         },
         "executing": {
-          "heading": "Processing"
+          "heading": "Processing",
+          "subHeadingDuration": "This should take {{duration}}",
+          "subHeading": "Go to <axelarscanLink>Axelarscan</axelarscanLink> for transaction details"
         },
         "executed": {
-          "heading": "Funds added successfully",
-          "subHeadingGoTo": "Go to",
-          "subHeadingTransactionDetails": "for transaction details"
+          "heading": "Tokens Added",
+          "subHeading": "Go to <axelarscanLink>Axelarscan</axelarscanLink> for transaction details",
+          "primaryButtonText": "Done"
+        },
+        "executedZkEVM": {
+          "heading": "Tokens Added",
+          "subHeading": "Go to <explorerLink>Immutable zkEVM explorer</explorerLink> for transaction details",
+          "primaryButtonText": "Done"
+        },
+        "needsGas": {
+          "heading": "Gas has surged",
+          "subHeading": "You’ll need to pay more gas to complete this transaction. You can do this via <axelarscanLink>Axelarscan</axelarscanLink>.",
+          "primaryButtonText": "Go to Axelarscan",
+          "secondaryButtonText": "Dismiss"
+        },
+        "partialSuccess": {
+          "heading": "You’ve received axlUSDC",
+          "subHeading": "Your transaction was subject to slippage and you’ve received axlUSDC. To receive the token you intended to add, you may need to complete a swap via <squidLink>Squid</squidLink>. ",
+          "primaryButtonText": "Go to Squid",
+          "secondaryButtonText": "Dismiss"
+        },
+        "statusFailed": {
+          "heading": "Unable to complete transaction",
+          "subHeading": "Something went wrong, and we were unable to complete this transaction. Visit <axelarscanLink>Axelarscan</axelarscanLink> for details.",
+          "secondaryButtonText": "Dismiss"
         }
       },
       "onboarding": {

diff --git a/packages/checkout/widgets-lib/src/locales/ja.json b/packages/checkout/widgets-lib/src/locales/ja.json
@@ -776,12 +776,36 @@
           "subHeading": "取引リクエストを確認してこの取引を完了してください"
         },
         "executing": {
-          "heading": "処理中"
+          "heading": "処理中",
+          "subHeadingDuration": "この処理には{{duration}}かかります",
+          "subHeading": "<axelarscanLink>Axelarscan</axelarscanLink>でトランザクションの詳細をご確認ください"
         },
         "executed": {
-          "heading": "資金が正常に追加されました",
-          "subHeadingGoTo": "移動",
-          "subHeadingTransactionDetails": "取引詳細はこちら"
+          "heading": "トークンが追加されました",
+          "subHeading": "<axelarscanLink>Axelarscan</axelarscanLink>でトランザクションの詳細をご確認ください",
+          "primaryButtonText": "完了"
+        },
+        "executedZkEVM": {
+          "heading": "トークンが追加されました",
+          "subHeading": "<explorerLink>Immutable zkEVM explorer</explorerLink>でトランザクションの詳細をご確認ください",
+          "primaryButtonText": "完了"
+        },
+        "needsGas": {
+          "heading": "ガス料金が急騰しました",
+          "subHeading": "このトランザクションを完了するためには、さらにガス料金を支払う必要があります。<axelarscanLink>Axelarscan</axelarscanLink>で手続きを行えます。",
+          "primaryButtonText": "Axelarscanに移動",
+          "secondaryButtonText": "閉じる"
+        },
+        "partialSuccess": {
+          "heading": "axlUSDCを受け取りました",
+          "subHeading": "トランザクションはスリッページの影響を受け、axlUSDCを受け取りました。意図したトークンを受け取るには、<squidLink>Squid</squidLink>でスワップを完了する必要があります。",
+          "primaryButtonText": "Squidに移動",
+          "secondaryButtonText": "閉じる"
+        },
+        "statusFailed": {
+          "heading": "トランザクションを完了できませんでした",
+          "subHeading": "問題が発生し、トランザクションを完了できませんでした。詳細は<axelarscanLink>Axelarscan</axelarscanLink>をご確認ください。",
+          "secondaryButtonText": "閉じる"
         }
       },
       "onboarding": {

diff --git a/packages/checkout/widgets-lib/src/locales/ko.json b/packages/checkout/widgets-lib/src/locales/ko.json
@@ -773,12 +773,36 @@
           "subHeading": "거래 요청을 확인하여 이 거래를 완료하세요"
         },
         "executing": {
-          "heading": "처리 중"
+          "heading": "처리 중",
+          "subHeadingDuration": "이 작업은 {{duration}} 소요됩니다",
+          "subHeading": "트랜잭션 세부 정보는 <axelarscanLink>Axelarscan</axelarscanLink>에서 확인하세요"
         },
         "executed": {
-          "heading": "자금이 성공적으로 추가되었습니다",
-          "subHeadingGoTo": "이동",
-          "subHeadingTransactionDetails": "거래 세부 정보 보기"
+          "heading": "토큰이 추가되었습니다",
+          "subHeading": "트랜잭션 세부 정보는 <axelarscanLink>Axelarscan</axelarscanLink>에서 확인하세요",
+          "primaryButtonText": "완료"
+        },
+        "executedZkEVM": {
+          "heading": "토큰이 추가되었습니다",
+          "subHeading": "트랜잭션 세부 정보는 <explorerLink>Immutable zkEVM explorer</explorerLink>에서 확인하세요",
+          "primaryButtonText": "완료"
+        },
+        "needsGas": {
+          "heading": "가스 요금 급등",
+          "subHeading": "이 트랜잭션을 완료하려면 더 높은 가스 요금을 지불해야 합니다. <axelarscanLink>Axelarscan</axelarscanLink>에서 진행할 수 있습니다.",
+          "primaryButtonText": "Axelarscan으로 이동",
+          "secondaryButtonText": "닫기"
+        },
+        "partialSuccess": {
+          "heading": "axlUSDC를 받았습니다",
+          "subHeading": "트랜잭션이 슬리피지에 영향을 받아 axlUSDC를 받았습니다. 의도한 토큰을 받으려면 <squidLink>Squid</squidLink>에서 스왑을 완료해야 할 수 있습니다.",
+          "primaryButtonText": "Squid로 이동",
+          "secondaryButtonText": "닫기"
+        },
+        "statusFailed": {
+          "heading": "트랜잭션을 완료할 수 없습니다",
+          "subHeading": "문제가 발생하여 트랜잭션을 완료할 수 없습니다. 자세한 내용은 <axelarscanLink>Axelarscan</axelarscanLink>에서 확인하세요.",
+          "secondaryButtonText": "닫기"
         }
       },
       "onboarding": {

diff --git a/packages/checkout/widgets-lib/src/locales/zh.json b/packages/checkout/widgets-lib/src/locales/zh.json
@@ -773,12 +773,36 @@
           "subHeading": "确认交易请求以完成此交易"
         },
         "executing": {
-          "heading": "处理中"
+          "heading": "处理中",
+          "subHeadingDuration": "预计耗时{{duration}}",
+          "subHeading": "您可以前往<axelarscanLink>Axelarscan</axelarscanLink>查看交易详情"
         },
         "executed": {
-          "heading": "资金添加成功",
-          "subHeadingGoTo": "前往",
-          "subHeadingTransactionDetails": "查看交易详情"
+          "heading": "代币已添加",
+          "subHeading": "您可以前往<axelarscanLink>Axelarscan</axelarscanLink>查看交易详情",
+          "primaryButtonText": "完成"
+        },
+        "executedZkEVM": {
+          "heading": "代币已添加",
+          "subHeading": "您可以前往<explorerLink>Immutable zkEVM explorer</explorerLink>查看交易详情",
+          "primaryButtonText": "完成"
+        },
+        "needsGas": {
+          "heading": "Gas费用激增",
+          "subHeading": "完成此交易需要支付更高的Gas费用。您可以通过<axelarscanLink>Axelarscan</axelarscanLink>完成。",
+          "primaryButtonText": "前往Axelarscan",
+          "secondaryButtonText": "关闭"
+        },
+        "partialSuccess": {
+          "heading": "您已收到axlUSDC",
+          "subHeading": "交易受到滑点影响，您已收到axlUSDC。如需获得目标代币，可能需要通过<squidLink>Squid</squidLink>完成兑换。",
+          "primaryButtonText": "前往Squid",
+          "secondaryButtonText": "关闭"
+        },
+        "statusFailed": {
+          "heading": "交易未能完成",
+          "subHeading": "交易发生错误，未能完成。详情请前往<axelarscanLink>Axelarscan</axelarscanLink>查看。",
+          "secondaryButtonText": "关闭"
         }
       },
       "onboarding": {

diff --git a/packages/checkout/widgets-lib/src/widgets/add-tokens/hooks/useExecute.ts b/packages/checkout/widgets-lib/src/widgets/add-tokens/hooks/useExecute.ts
@@ -4,6 +4,8 @@ import { RouteResponse } from '@0xsquid/squid-types';
 import { Squid } from '@0xsquid/sdk';
 import { ethers } from 'ethers';
 import { Environment } from '@imtbl/config';
+
+import { StatusResponse } from '@0xsquid/sdk/dist/types';
 import { isSquidNativeToken } from '../functions/isSquidNativeToken';
 import { useError } from './useError';
 import { AddTokensError, AddTokensErrorTypes } from '../types';
@@ -13,6 +15,8 @@ import { retry } from '../../../lib/retry';
 import { withMetricsAsync } from '../../../lib/metrics';
 import { UserJourney } from '../../../context/analytics-provider/SegmentAnalyticsProvider';
 
+const TRANSACTION_NOT_COMPLETED = 'transaction not completed';
+
 export const useExecute = (contextId: string, environment: Environment) => {
   const { showErrorHandover } = useError(environment);
   const {
@@ -165,7 +169,7 @@ export const useExecute = (contextId: string, environment: Environment) => {
   const callApprove = async (
     provider: Web3Provider,
     routeResponse: RouteResponse,
-  ):Promise<ethers.providers.TransactionReceipt> => {
+  ): Promise<ethers.providers.TransactionReceipt> => {
     const erc20Abi = [
       'function approve(address spender, uint256 amount) public returns (bool)',
     ];
@@ -212,7 +216,7 @@ export const useExecute = (contextId: string, environment: Environment) => {
     squid: Squid,
     provider: Web3Provider,
     routeResponse: RouteResponse,
-  ):Promise<ethers.providers.TransactionReceipt> => {
+  ): Promise<ethers.providers.TransactionReceipt> => {
     const tx = (await squid.executeRoute({
       signer: provider.getSigner(),
       route: routeResponse.route,
@@ -239,10 +243,53 @@ export const useExecute = (contextId: string, environment: Environment) => {
     }
   };
 
+  const getStatus = async (
+    squid: Squid,
+    transactionHash: string,
+  ): Promise<StatusResponse | undefined> => {
+    const completedTransactionStatus = [
+      'success',
+      'partial_success',
+      'needs_gas',
+      'not_found',
+    ];
+    try {
+      return await retry(
+        async () => {
+          const result = await squid.getStatus({
+            transactionId: transactionHash,
+          });
+          if (
+            completedTransactionStatus.includes(
+              result.squidTransactionStatus ?? '',
+            )
+          ) {
+            return result;
+          }
+          return Promise.reject(TRANSACTION_NOT_COMPLETED);
+        },
+        {
+          retries: 240,
+          retryIntervalMs: 5000,
+          nonRetryable: (err) => {
+            if (err.response) {
+              return err.response.status === 400 || err.response.status === 500;
+            }
+            return err !== TRANSACTION_NOT_COMPLETED;
+          },
+        },
+      );
+    } catch (error) {
+      handleTransactionError(error);
+      return undefined;
+    }
+  };
+
   return {
     checkProviderChain,
     getAllowance,
     approve,
     execute,
+    getStatus,
   };
 };
diff --git a/packages/checkout/widgets-lib/src/widgets/add-tokens/utils/config.ts b/packages/checkout/widgets-lib/src/widgets/add-tokens/utils/config.ts
@@ -8,4 +8,8 @@ export const APPROVE_TXN_ANIMATION = '/access_coins.riv';
 
 export const EXECUTE_TXN_ANIMATION = '/swapping_coins.riv';
 
+export const BLOCK_TXN_ANIMATION = '/blocked.riv';
+
+export const ERROR_TXN_ANIMATION = '/error.riv';
+
 export const TOKEN_PRIORITY_ORDER = ['IMX', 'USDC', 'ETH'];