From fca419112dd612e710299bb2f766c611628aa3c2 Mon Sep 17 00:00:00 2001 From: Mimi Immutable Date: Fri, 10 Jan 2025 13:26:21 +1100 Subject: [PATCH] Move add tokens error handling out of useExecute --- .../src/lib/squid/hooks/useExecute.ts | 67 ++----------------- .../add-tokens/hooks/useErrorHandler.ts | 4 +- .../src/widgets/add-tokens/views/Review.tsx | 10 +-- 3 files changed, 15 insertions(+), 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 index 04379e82ed..f5e882939e 100644 --- a/packages/checkout/widgets-lib/src/lib/squid/hooks/useExecute.ts +++ b/packages/checkout/widgets-lib/src/lib/squid/hooks/useExecute.ts @@ -1,18 +1,12 @@ 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'; @@ -20,12 +14,10 @@ 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 index 8eb541c383..306c815c0d 100644 --- 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 index 0c7997bfaf..a32895038a 100644 --- 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({