Merge pull request #33 from reserve-protocol/fix/tx-failed

Fix: restore after tx reverted/rejected

Author: JuampiRombola

CHANGELOG.md

@@ -1,3 +1,9 @@
+## [2.4.1] - 2026-07-08
+
+### Fixed
+
+- The submit CTA no longer stays disabled/loading indefinitely after a transaction reverts or is rejected in the wallet. The quote is now refreshed immediately on failure (instead of resuming from the stale, often expired, frozen quote), and the gas-estimate simulation is re-run whenever a new quote lands — previously an errored simulation query could never recover when the refreshed quote carried identical tx bytes, leaving the button stuck on "Simulation failed - Refetching quote".
+
 ## [2.4.0] - 2026-07-08
 
 ### Added

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reserve-protocol/react-zapper",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "type": "module",
   "packageManager": "pnpm@11.1.1",
   "description": "React component for DTF minting with zap functionality",
@@ -25,6 +25,7 @@
     "build:demo": "vite build --mode demo",
     "prepublishOnly": "pnpm run build",
     "lint": "eslint src --ext .ts,.tsx",
+    "test": "vitest run",
     "clean": "rm -rf dist",
     "extract": "lingui extract",
     "compile": "lingui compile"
@@ -82,6 +83,7 @@
     "@radix-ui/react-select": "^2.2.5",
     "@radix-ui/react-slot": "^1.2.3",
     "@rainbow-me/rainbowkit": "^2.2.5",
+    "@testing-library/react": "^16.3.2",
     "@types/mixpanel-browser": "^2.50.2",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.1",
@@ -94,6 +96,7 @@
     "eslint": "^8.0.0",
     "eslint-plugin-react": "^7.33.0",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "jsdom": "^29.1.1",
     "postcss": "^8.4.49",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
@@ -102,6 +105,7 @@
     "viem": "2.50.4",
     "vite": "^7.0.2",
     "vite-plugin-dts": "^4.5.4",
+    "vitest": "3.2.4",
     "wagmi": "2.19.5"
   }
 }

pnpm-lock.yaml

@@ -268,26 +268,26 @@ const SLOW_LOADING_TEXTS: MessageDescriptor[] = [
 
 const SlowLoading = ({ enabled }: { enabled: boolean }) => {
   const { t } = useLingui()
-  const [countdown, setCountdown] = useState(60)
+  const [elapsed, setElapsed] = useState(1)
   const [textIndex, setTextIndex] = useState(0)
 
   useEffect(() => {
     if (!enabled) {
-      setCountdown(60)
+      setElapsed(1)
       setTextIndex(0)
       return
     }
 
-    const countdownInterval = setInterval(() => {
-      setCountdown((prev) => (prev > 0 ? prev - 1 : 0))
+    const elapsedInterval = setInterval(() => {
+      setElapsed((prev) => prev + 1)
     }, 1000)
 
     const textInterval = setInterval(() => {
       setTextIndex((prev) => (prev + 1) % SLOW_LOADING_TEXTS.length)
     }, 5000)
 
     return () => {
-      clearInterval(countdownInterval)
+      clearInterval(elapsedInterval)
       clearInterval(textInterval)
     }
   }, [enabled])
@@ -305,14 +305,7 @@ const SlowLoading = ({ enabled }: { enabled: boolean }) => {
           <Loader size={16} className="animate-spin-slow" />
           {t(SLOW_LOADING_TEXTS[textIndex])}
         </div>
-        <div
-          className={cn(
-            'text-muted-foreground',
-            countdown > 0 ? 'min-w-4' : ''
-          )}
-        >
-          {countdown > 0 && `${countdown}s`}
-        </div>
+        <div className="text-muted-foreground min-w-4">{`${elapsed}s`}</div>
       </div>
     </div>
   )

src/components/ui/swap.tsx

@@ -209,22 +209,25 @@ const SubmitZapButton = ({
     )
   }, [gas, chainId])
 
-  const { error: simulationError, failureReason: simulationFailureReason } =
-    useEstimateGas({
-      to: tx?.to as Address,
-      data: tx?.data as Hex,
-      value: BigInt(tx?.value || 0),
-      gas: gasLimit,
-      chainId,
-      query: {
-        // Stop simulating once a tx is in flight/done — a failed simulation
-        // would force a quote refetch and overwrite the frozen result.
-        enabled: readyToSubmit && !!tx && !ongoingTx,
-        refetchIntervalInBackground: true,
-        refetchOnWindowFocus: true,
-        refetchInterval: 2_000,
-      },
-    })
+  const {
+    error: simulationError,
+    failureReason: simulationFailureReason,
+    refetch: refetchSimulation,
+  } = useEstimateGas({
+    to: tx?.to as Address,
+    data: tx?.data as Hex,
+    value: BigInt(tx?.value || 0),
+    gas: gasLimit,
+    chainId,
+    query: {
+      // Stop simulating once a tx is in flight/done — a failed simulation
+      // would force a quote refetch and overwrite the frozen result.
+      enabled: readyToSubmit && !!tx && !ongoingTx,
+      refetchIntervalInBackground: true,
+      refetchOnWindowFocus: true,
+      refetchInterval: 2_000,
+    },
+  })
 
   const simulationFailed = useMemo(
     () => Boolean(simulationError || simulationFailureReason),
@@ -234,12 +237,28 @@ const SubmitZapButton = ({
   const queryClient = useQueryClient()
   useEffect(() => {
     if (simulationFailed) {
-      queryClient.setQueriesData({ queryKey: ['zapDeploy'] }, () => undefined)
       queryClient.invalidateQueries({ queryKey: ['zapDeploy'] })
       refetchQuote.fn?.()
     }
   }, [simulationFailed, refetchQuote, queryClient])
 
+  // Once its retries are exhausted, an errored estimateGas query never runs
+  // again on its own, and a refreshed quote can carry identical tx bytes
+  // (same queryKey). Re-arm the simulation whenever a quote lands while the
+  // last simulation failed, so a failed attempt can't leave the CTA disabled
+  // forever.
+  useEffect(() => {
+    if (ongoingTx || !readyToSubmit || !tx || !simulationFailed) return
+    refetchSimulation()
+  }, [
+    tx,
+    validUntil,
+    ongoingTx,
+    readyToSubmit,
+    simulationFailed,
+    refetchSimulation,
+  ])
+
   const {
     data: receipt,
     isMining: validatingTx,
@@ -356,6 +375,12 @@ const SubmitZapButton = ({
     ) {
       setOngoingTx(false)
     }
+    // The quote was frozen while the tx was in flight, so after a failure it
+    // is stale (often already expired) — replace it right away instead of
+    // waiting for the next refresh tick.
+    if (approvalTxError || txError || isErrorApproval || isErrorSend) {
+      refetchQuote.fn?.()
+    }
   }, [
     receipt,
     approvalReceipt,
@@ -364,6 +389,7 @@ const SubmitZapButton = ({
     isErrorApproval,
     isErrorSend,
     setOngoingTx,
+    refetchQuote,
   ])
 
   useTrackIndexDTFZapError({

src/components/zap-mint/submit-zap.tsx

@@ -106,6 +106,9 @@ const ReportButton = ({ error }: { error?: string }) => {
     }
   }
 
+  const labels = [t`Sending...`, t`Reported`, t`Report`]
+  const label = isLoading ? labels[0] : hasReported ? labels[1] : labels[2]
+
   return (
     <div className="flex flex-col items-end gap-0.5">
       <Button
@@ -115,7 +118,16 @@ const ReportButton = ({ error }: { error?: string }) => {
           isLoading || hasReported || !sessionId || !quoteId || !retryId
         }
       >
-        {isLoading ? t`Sending...` : hasReported ? t`Reported` : t`Report`}
+        {/* Overlay every state's label so the button keeps the width of the
+            widest one and doesn't resize/overflow when the state changes */}
+        <span className="grid text-center">
+          {labels.map((l) => (
+            <span key={l} className="col-start-1 row-start-1 invisible">
+              {l}
+            </span>
+          ))}
+          <span className="col-start-1 row-start-1">{label}</span>
+        </span>
       </Button>
       {reportFailed && (
         <span className="text-red-500 text-[10px]">

src/components/zap-mint/zap-error-msg.tsx

@@ -0,0 +1,42 @@
+import { vi } from 'vitest'
+
+// mixpanel does real network I/O at init/track time — neutralize it entirely.
+vi.mock('mixpanel-browser/src/loaders/loader-module-core', () => ({
+  default: {
+    init: () => {},
+    track: () => {},
+    time_event: () => {},
+    register: () => {},
+    unregister: () => {},
+    people: { set: () => {} },
+  },
+}))
+
+// jsdom is missing a few browser APIs used by radix/lucide/etc.
+class ResizeObserverStub {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const g = globalThis as any
+g.ResizeObserver = g.ResizeObserver ?? ResizeObserverStub
+g.matchMedia =
+  g.matchMedia ??
+  ((query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: () => {},
+    removeListener: () => {},
+    addEventListener: () => {},
+    removeEventListener: () => {},
+    dispatchEvent: () => false,
+  }))
+if (typeof Element !== 'undefined') {
+  Element.prototype.scrollIntoView = Element.prototype.scrollIntoView || (() => {})
+  Element.prototype.hasPointerCapture =
+    Element.prototype.hasPointerCapture || (() => false)
+  Element.prototype.releasePointerCapture =
+    Element.prototype.releasePointerCapture || (() => {})
+}