From 0fb61dc6e1e32952e711180162e59dfc70027b40 Mon Sep 17 00:00:00 2001 From: infiniteflower <139582705+infiniteflower@users.noreply.github.com> Date: Thu, 12 Dec 2024 11:34:19 -0500 Subject: [PATCH] chore: delay linea bridge tx to make it less flaky (#29109) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## **Description** [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/29109?quickstart=1) ## **Related issues** Fixes: ## **Manual testing steps** 1. Set network to Linea 2. Bridge an ERC20 to another network 3. Observe loading spinner on quotes page 4. Get redirected to activity list 5. See successful ERC20 approval and bridge tx ## **Screenshots/Recordings** ### **Before** ### **After** https://github.com/user-attachments/assets/e6079f43-632e-4bd3-a9e0-54f7c427b541 ## **Pre-merge author checklist** - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Extension Coding Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [x] I've completed the PR template to the best of my ability - [ ] I’ve included tests if applicable - [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots. --- .../hooks/useSubmitBridgeTransaction.ts | 25 ++++++++++++++ ui/pages/bridge/prepare/bridge-cta-button.tsx | 34 ++++++++++++------- 2 files changed, 47 insertions(+), 12 deletions(-) diff --git a/ui/pages/bridge/hooks/useSubmitBridgeTransaction.ts b/ui/pages/bridge/hooks/useSubmitBridgeTransaction.ts index 39e905631e82..847df1204ab3 100644 --- a/ui/pages/bridge/hooks/useSubmitBridgeTransaction.ts +++ b/ui/pages/bridge/hooks/useSubmitBridgeTransaction.ts @@ -2,18 +2,25 @@ import { useDispatch, useSelector } from 'react-redux'; import { zeroAddress } from 'ethereumjs-util'; import { useHistory } from 'react-router-dom'; import { TransactionMeta } from '@metamask/transaction-controller'; +import { createProjectLogger, Hex } from '@metamask/utils'; import { QuoteMetadata, QuoteResponse } from '../types'; import { DEFAULT_ROUTE } from '../../../helpers/constants/routes'; import { setDefaultHomeActiveTabName } from '../../../store/actions'; import { startPollingForBridgeTxStatus } from '../../../ducks/bridge-status/actions'; import { getQuoteRequest } from '../../../ducks/bridge/selectors'; +import { CHAIN_IDS } from '../../../../shared/constants/network'; +import { getCurrentChainId } from '../../../../shared/modules/selectors/networks'; import useAddToken from './useAddToken'; import useHandleApprovalTx from './useHandleApprovalTx'; import useHandleBridgeTx from './useHandleBridgeTx'; +const debugLog = createProjectLogger('bridge'); +const LINEA_DELAY_MS = 5000; + export default function useSubmitBridgeTransaction() { const history = useHistory(); const dispatch = useDispatch(); + const srcChainId = useSelector(getCurrentChainId); const { addSourceToken, addDestToken } = useAddToken(); const { handleApprovalTx } = useHandleApprovalTx(); const { handleBridgeTx } = useHandleBridgeTx(); @@ -33,6 +40,24 @@ export default function useSubmitBridgeTransaction() { }); } + if ( + ( + [ + CHAIN_IDS.LINEA_MAINNET, + CHAIN_IDS.LINEA_GOERLI, + CHAIN_IDS.LINEA_SEPOLIA, + ] as Hex[] + ).includes(srcChainId) + ) { + debugLog( + 'Delaying submitting bridge tx to make Linea confirmation more likely', + ); + const waitPromise = new Promise((resolve) => + setTimeout(resolve, LINEA_DELAY_MS), + ); + await waitPromise; + } + const bridgeTxMeta = await handleBridgeTx({ quoteResponse, approvalTxId: approvalTxMeta?.id, diff --git a/ui/pages/bridge/prepare/bridge-cta-button.tsx b/ui/pages/bridge/prepare/bridge-cta-button.tsx index c8738a6551de..931b6cb4e8ea 100644 --- a/ui/pages/bridge/prepare/bridge-cta-button.tsx +++ b/ui/pages/bridge/prepare/bridge-cta-button.tsx @@ -35,6 +35,7 @@ export const BridgeCTAButton = () => { const { maxRefreshCount, refreshRate } = useSelector(getBridgeQuotesConfig); const { submitBridgeTransaction } = useSubmitBridgeTransaction(); + const [isSubmitting, setIsSubmitting] = useState(false); const { isNoQuotesAvailable, isInsufficientBalance } = useSelector(getValidationErrors); @@ -108,20 +109,29 @@ export const BridgeCTAButton = () => { data-testid="bridge-cta-button" onClick={() => { if (activeQuote && isTxSubmittable) { - quoteRequestProperties && - requestMetadataProperties && - tradeProperties && - trackCrossChainSwapsEvent({ - event: MetaMetricsEventName.ActionSubmitted, - properties: { - ...quoteRequestProperties, - ...requestMetadataProperties, - ...tradeProperties, - }, - }); - submitBridgeTransaction(activeQuote); + try { + // We don't need to worry about setting to true if the tx submission succeeds + // because we route immediately to Activity list page + setIsSubmitting(true); + + quoteRequestProperties && + requestMetadataProperties && + tradeProperties && + trackCrossChainSwapsEvent({ + event: MetaMetricsEventName.ActionSubmitted, + properties: { + ...quoteRequestProperties, + ...requestMetadataProperties, + ...tradeProperties, + }, + }); + submitBridgeTransaction(activeQuote); + } catch (error) { + setIsSubmitting(false); + } } }} + loading={isSubmitting} disabled={!isTxSubmittable || isQuoteExpired} > {label}