fix: receipt timeouts (#1127)

* fix: change waitForReceipt timeout to undefined to avoid wagmi bug

* mend

* fix: avoid animations when rendering a historic receipt (#1128)

Author: agualis

lib/modules/pool/actions/add-liquidity/modal/AddLiquidityModal.tsx

@@ -35,8 +35,13 @@ export function AddLiquidityModal({
 }: Props & Omit<ModalProps, 'children'>) {
   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}
         />
       </ModalContent>
     </Modal>

lib/modules/pool/actions/remove-liquidity/RemoveLiquidityProvider.tsx

@@ -254,6 +254,7 @@ export function _useRemoveLiquidity(urlTxHash?: Hash) {
     previewModalDisclosure,
     handler,
     wethIsEth,
+    urlTxHash,
     removeLiquidityTxHash,
     hasQuoteContext,
     amountsOut,

lib/modules/pool/actions/remove-liquidity/modal/RemoveLiquidityModal.tsx

@@ -35,7 +35,8 @@ export function RemoveLiquidityModal({
 }: Props & Omit<ModalProps, 'children'>) {
   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}
         />
       </ModalContent>
     </Modal>

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}
         />
       </ModalContent>
     </Modal>

lib/modules/web3/contracts/useManagedSendTransaction.ts

@@ -64,6 +64,9 @@ export function useManagedSendTransaction({
     hash: txHash,
     confirmations: minConfirmations,
     timeout: getWaitForReceiptTimeout(chainId),
+    query: {
+      ...onlyExplicitRefetch,
+    },
   })
 
   const bundle = {

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
 }

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 (
+      <ModalFooter>
+        <SuccessActions returnLabel={returnLabel} returnAction={returnAction} />
+      </ModalFooter>
+    )
+  }
   return (
     <ModalFooter>
       <AnimatePresence mode="wait" initial={false}>