From b72ffb61784cd84ed230f352bb1a99c4bb630e1c Mon Sep 17 00:00:00 2001 From: Alberto Gualis Date: Wed, 25 Sep 2024 15:04:23 +0200 Subject: [PATCH] fix: receipt timeouts (#1127) * fix: change waitForReceipt timeout to undefined to avoid wagmi bug * mend * fix: avoid animations when rendering a historic receipt (#1128) --- .../add-liquidity/modal/AddLiquidityModal.tsx | 10 ++++++++-- .../RemoveLiquidityProvider.tsx | 1 + .../modal/RemoveLiquidityModal.tsx | 4 +++- lib/modules/swap/modal/SwapModal.tsx | 12 ++++++++++-- .../web3/contracts/useManagedSendTransaction.ts | 3 +++ lib/modules/web3/contracts/wagmi-helpers.ts | 15 +++++++-------- .../components/modals/ActionModalFooter.tsx | 17 ++++++++++++++++- 7 files changed, 48 insertions(+), 14 deletions(-) diff --git a/lib/modules/pool/actions/add-liquidity/modal/AddLiquidityModal.tsx b/lib/modules/pool/actions/add-liquidity/modal/AddLiquidityModal.tsx index a3ea863d8..c22aee8eb 100644 --- a/lib/modules/pool/actions/add-liquidity/modal/AddLiquidityModal.tsx +++ b/lib/modules/pool/actions/add-liquidity/modal/AddLiquidityModal.tsx @@ -35,8 +35,13 @@ export function AddLiquidityModal({ }: Props & Omit) { const { isDesktop } = useBreakpoints() const initialFocusRef = useRef(null) - const { transactionSteps, addLiquidityTxHash, hasQuoteContext, setInitialHumanAmountsIn } = - useAddLiquidity() + const { + transactionSteps, + addLiquidityTxHash, + hasQuoteContext, + urlTxHash, + setInitialHumanAmountsIn, + } = useAddLiquidity() const { pool, chain } = usePool() const { redirectToPoolPage } = usePoolRedirect(pool) const { userAddress } = useUserAccount() @@ -101,6 +106,7 @@ export function AddLiquidityModal({ currentStep={transactionSteps.currentStep} returnLabel="Return to pool" returnAction={redirectToPoolPage} + urlTxHash={urlTxHash} /> diff --git a/lib/modules/pool/actions/remove-liquidity/RemoveLiquidityProvider.tsx b/lib/modules/pool/actions/remove-liquidity/RemoveLiquidityProvider.tsx index dc1ab349c..bc0abcbc1 100644 --- a/lib/modules/pool/actions/remove-liquidity/RemoveLiquidityProvider.tsx +++ b/lib/modules/pool/actions/remove-liquidity/RemoveLiquidityProvider.tsx @@ -254,6 +254,7 @@ export function _useRemoveLiquidity(urlTxHash?: Hash) { previewModalDisclosure, handler, wethIsEth, + urlTxHash, removeLiquidityTxHash, hasQuoteContext, amountsOut, diff --git a/lib/modules/pool/actions/remove-liquidity/modal/RemoveLiquidityModal.tsx b/lib/modules/pool/actions/remove-liquidity/modal/RemoveLiquidityModal.tsx index 452b9b1cf..a748cb5cf 100644 --- a/lib/modules/pool/actions/remove-liquidity/modal/RemoveLiquidityModal.tsx +++ b/lib/modules/pool/actions/remove-liquidity/modal/RemoveLiquidityModal.tsx @@ -35,7 +35,8 @@ export function RemoveLiquidityModal({ }: Props & Omit) { const { isDesktop } = useBreakpoints() const initialFocusRef = useRef(null) - const { transactionSteps, removeLiquidityTxHash, hasQuoteContext } = useRemoveLiquidity() + const { transactionSteps, removeLiquidityTxHash, urlTxHash, hasQuoteContext } = + useRemoveLiquidity() const { pool, chain } = usePool() const { redirectToPoolPage } = usePoolRedirect(pool) const { userAddress } = useUserAccount() @@ -99,6 +100,7 @@ export function RemoveLiquidityModal({ currentStep={transactionSteps.currentStep} returnLabel="Return to pool" returnAction={redirectToPoolPage} + urlTxHash={urlTxHash} /> diff --git a/lib/modules/swap/modal/SwapModal.tsx b/lib/modules/swap/modal/SwapModal.tsx index 2ece65953..4f71d8a30 100644 --- a/lib/modules/swap/modal/SwapModal.tsx +++ b/lib/modules/swap/modal/SwapModal.tsx @@ -39,8 +39,15 @@ export function SwapPreviewModal({ const { userAddress } = useUserAccount() const { stopTokenPricePolling } = useTokens() - const { transactionSteps, swapAction, isWrap, selectedChain, swapTxHash, hasQuoteContext } = - useSwap() + const { + transactionSteps, + swapAction, + isWrap, + selectedChain, + swapTxHash, + urlTxHash, + hasQuoteContext, + } = useSwap() const swapReceipt = useSwapReceipt({ txHash: swapTxHash, @@ -97,6 +104,7 @@ export function SwapPreviewModal({ currentStep={transactionSteps.currentStep} returnLabel="Swap again" returnAction={onClose} + urlTxHash={urlTxHash} /> diff --git a/lib/modules/web3/contracts/useManagedSendTransaction.ts b/lib/modules/web3/contracts/useManagedSendTransaction.ts index 62ab598ac..680c1bb0f 100644 --- a/lib/modules/web3/contracts/useManagedSendTransaction.ts +++ b/lib/modules/web3/contracts/useManagedSendTransaction.ts @@ -64,6 +64,9 @@ export function useManagedSendTransaction({ hash: txHash, confirmations: minConfirmations, timeout: getWaitForReceiptTimeout(chainId), + query: { + ...onlyExplicitRefetch, + }, }) const bundle = { diff --git a/lib/modules/web3/contracts/wagmi-helpers.ts b/lib/modules/web3/contracts/wagmi-helpers.ts index cee5070d9..adc1c0d80 100644 --- a/lib/modules/web3/contracts/wagmi-helpers.ts +++ b/lib/modules/web3/contracts/wagmi-helpers.ts @@ -1,8 +1,6 @@ // Helpers for wagmi transactions import { Address } from 'viem' import { TransactionBundle } from './contract.types' -import { polygon } from 'viem/chains' -import { secs } from '@/lib/shared/utils/time' export function getHashFromTransaction(transactionBundle?: TransactionBundle): Address | undefined { if (!transactionBundle) return @@ -23,11 +21,12 @@ export function isValidUserAddress(userAddress?: Address) { Returns timeout to be used in useWaitForTransactionReceipt options By default all react queries retry 3 times More info: https://tanstack.com/query/v5/docs/framework/react/guides/query-retries - */ +*/ +/* eslint-disable @typescript-eslint/no-unused-vars */ export function getWaitForReceiptTimeout(chainId: number) { - // In polygon there will be 3 retries of 25 seconds until we throw the timeout error - if (chainId === polygon.id) return secs(25).toMs() - - // In other chains there will be 3 retries of 15 seconds until we throw the timeout error - return secs(15).toMs() + /* Using an specific timeout was throwing a timeout error after confirmation + Wagmi bug: https://github.com/wevm/viem/discussions/1351 + Using undefined seems to be more reliable + */ + return undefined } diff --git a/lib/shared/components/modals/ActionModalFooter.tsx b/lib/shared/components/modals/ActionModalFooter.tsx index b3b307349..27a37b95f 100644 --- a/lib/shared/components/modals/ActionModalFooter.tsx +++ b/lib/shared/components/modals/ActionModalFooter.tsx @@ -49,9 +49,24 @@ type Props = { currentStep: TransactionStep returnLabel: string returnAction: () => void + urlTxHash?: string } -export function ActionModalFooter({ isSuccess, currentStep, returnLabel, returnAction }: Props) { +export function ActionModalFooter({ + isSuccess, + currentStep, + returnLabel, + returnAction, + urlTxHash, +}: Props) { + // Avoid animations when displaying a historic receipt + if (urlTxHash) { + return ( + + + + ) + } return (