Move add tokens error handling out of useExecute

immutable · Jan 10, 2025 · fca4191 · fca4191
1 parent 80eb046
commit fca4191
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 66 deletions.
diff --git a/packages/checkout/widgets-lib/src/lib/squid/hooks/useExecute.ts b/packages/checkout/widgets-lib/src/lib/squid/hooks/useExecute.ts
@@ -1,31 +1,23 @@
 import { Web3Provider } from '@ethersproject/providers';
-import { useContext } from 'react';
 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 { Flow } from '@imtbl/metrics';
 import { EIP6963ProviderInfo } from '@imtbl/checkout-sdk';
 import { isSquidNativeToken } from '../functions/isSquidNativeToken';
-import { useError } from './useError';
-import { AddTokensError, AddTokensErrorTypes } from '../../../widgets/add-tokens/types';
-import { EventTargetContext } from '../../../context/event-target-context/EventTargetContext';
-import { sendAddTokensFailedEvent } from '../../../widgets/add-tokens/AddTokensWidgetEvents';
 import { retry } from '../../retry';
 import { withMetricsAsync } from '../../metrics';
 import { useAnalytics, UserJourney } from '../../../context/analytics-provider/SegmentAnalyticsProvider';
 import { isRejectedError } from '../../../functions/errorType';
 
 const TRANSACTION_NOT_COMPLETED = 'transaction not completed';
 
-export const useExecute = (contextId: string, environment: Environment) => {
-  const { showErrorHandover } = useError(environment);
+export const useExecute = (
+  onTransactionError: (err: unknown) => void,
+) => {
   const { user } = useAnalytics();
-  const {
-    eventTargetState: { eventTarget },
-  } = useContext(EventTargetContext);
 
   const waitForReceipt = async (
     provider: Web3Provider,
@@ -59,51 +51,6 @@ export const useExecute = (contextId: string, environment: Environment) => {
     return result;
   };
 
-  const handleTransactionError = (err: unknown) => {
-    const reason = `${
-      (err as any)?.reason || (err as any)?.message || ''
-    }`.toLowerCase();
-
-    let errorType = AddTokensErrorTypes.WALLET_FAILED;
-
-    if (reason.includes('failed') && reason.includes('open confirmation')) {
-      errorType = AddTokensErrorTypes.WALLET_POPUP_BLOCKED;
-    }
-
-    if (reason.includes('rejected') && reason.includes('user')) {
-      errorType = AddTokensErrorTypes.WALLET_REJECTED;
-    }
-
-    if (
-      reason.includes('failed to submit')
-      && reason.includes('highest gas limit')
-    ) {
-      errorType = AddTokensErrorTypes.WALLET_REJECTED_NO_FUNDS;
-    }
-
-    if (
-      reason.includes('status failed')
-      || reason.includes('transaction failed')
-    ) {
-      errorType = AddTokensErrorTypes.TRANSACTION_FAILED;
-      sendAddTokensFailedEvent(eventTarget, errorType);
-    }
-
-    if (
-      reason.includes('unrecognized chain')
-      || reason.includes('unrecognized chain')
-    ) {
-      errorType = AddTokensErrorTypes.UNRECOGNISED_CHAIN;
-    }
-
-    const error: AddTokensError = {
-      type: errorType,
-      data: { error: err },
-    };
-
-    showErrorHandover(errorType, { contextId, error });
-  };
-
   const getAllowance = async (
     provider: Web3Provider,
     routeResponse: RouteResponse,
@@ -132,7 +79,7 @@ export const useExecute = (contextId: string, environment: Environment) => {
 
       return ethers.constants.MaxUint256; // no approval is needed for native tokens
     } catch (error) {
-      showErrorHandover(AddTokensErrorTypes.DEFAULT, { contextId, error });
+      onTransactionError(error);
       return undefined;
     }
   };
@@ -195,7 +142,7 @@ export const useExecute = (contextId: string, environment: Environment) => {
       }
       return undefined;
     } catch (error) {
-      handleTransactionError(error);
+      onTransactionError(error);
       return undefined;
     }
   };
@@ -233,7 +180,7 @@ export const useExecute = (contextId: string, environment: Environment) => {
         (error) => (isRejectedError(error) ? 'rejected' : ''),
       );
     } catch (error) {
-      handleTransactionError(error);
+      onTransactionError(error);
       return undefined;
     }
   };
@@ -275,7 +222,7 @@ export const useExecute = (contextId: string, environment: Environment) => {
         },
       );
     } catch (error) {
-      handleTransactionError(error);
+      onTransactionError(error);
       return undefined;
     }
   };

diff --git a/packages/checkout/widgets-lib/src/widgets/add-tokens/hooks/useErrorHandler.ts b/packages/checkout/widgets-lib/src/widgets/add-tokens/hooks/useErrorHandler.ts
@@ -23,7 +23,7 @@ export const useErrorHandler = () => {
     eventTargetState: { eventTarget },
   } = useContext(EventTargetContext);
 
-  const handleTransactionError = (err: unknown) => {
+  const onTransactionError = (err: unknown) => {
     const reason = `${(err as any)?.reason || (err as any)?.message || ''
     }`.toLowerCase();
 
@@ -64,5 +64,5 @@ export const useErrorHandler = () => {
     showErrorHandover(errorType, { contextId, error });
   };
 
-  return { handleTransactionError };
+  return { onTransactionError };
 };
diff --git a/packages/checkout/widgets-lib/src/widgets/add-tokens/views/Review.tsx b/packages/checkout/widgets-lib/src/widgets/add-tokens/views/Review.tsx
@@ -25,7 +25,6 @@ import {
 import { RouteResponse } from '@0xsquid/squid-types';
 import { t } from 'i18next';
 import { Trans } from 'react-i18next';
-import { Environment } from '@imtbl/config';
 import { ChainId } from '@imtbl/checkout-sdk';
 import { trackFlow } from '@imtbl/metrics';
 import { SimpleLayout } from '../../../components/SimpleLayout/SimpleLayout';
@@ -57,7 +56,6 @@ import { getTotalRouteFees } from '../../../lib/squid/functions/getTotalRouteFee
 import { getRouteChains } from '../../../lib/squid/functions/getRouteChains';
 
 import { SquidFooter } from '../../../lib/squid/components/SquidFooter';
-import { useError } from '../../../lib/squid/hooks/useError';
 import {
   sendAddTokensCloseEvent,
   sendAddTokensSuccessEvent,
@@ -74,6 +72,8 @@ import { getDurationFormatted } from '../../../functions/getDurationFormatted';
 import { getFormattedNumber, getFormattedAmounts } from '../../../functions/getFormattedNumber';
 import { RiveStateMachineInput } from '../../../types/HandoverTypes';
 import { verifyAndSwitchChain } from '../../../lib/squid/functions/verifyAndSwitchChain';
+import { useErrorHandler } from '../hooks/useErrorHandler';
+import { useError } from '../../../lib/squid/hooks/useError';
 
 interface ReviewProps {
   data: AddTokensReviewData;
@@ -112,6 +112,8 @@ export function Review({
     },
   } = useProvidersContext();
 
+  const { showErrorHandover } = useError(checkout.config.environment);
+
   const {
     eventTargetState: { eventTarget },
   } = useContext(EventTargetContext);
@@ -127,11 +129,11 @@ export function Review({
     id: HandoverTarget.GLOBAL,
   });
 
-  const { showErrorHandover } = useError(checkout.config.environment);
+  const { onTransactionError } = useErrorHandler();
 
   const {
     getAllowance, approve, execute, getStatus,
-  } = useExecute(id, checkout?.config.environment || Environment.SANDBOX);
+  } = useExecute(onTransactionError);
 
   useEffect(() => {
     page({