fix: Fix stuck pending withdraw (MetaMask#24214)

gambinish · web-flow · commit 0b20391b3a3d · 2026-01-09T16:34:56.000Z
## **Description** Withdrawal indicators in Perps could get stuck in "pending" or "bridging" state indefinitely, even after the withdrawal had successfully completed on-chain. This created a poor user experience where users saw stale pending indicators that never resolved. **Solution** Enhanced the 1useWithdrawalRequests1 hook to automatically reconcile pending withdrawal states with completed withdrawals from the HyperLiquid API: 1. Auto-reconciliation: When a completed withdrawal from the API matches a pending one in controller state, the controller is automatically updated to reflect the completion 2. Active polling: Polls the HyperLiquid ledger API every 10 seconds when there are active (pending/bridging) withdrawals to detect completions promptly 3. Relaxed flexible matching: Matches withdrawals by amount (±$0.01 tolerance) and asset type; removed timestamp constraint since bridging operations can sometimes take hours 4. Deduplication tracking: Uses a ref to track which withdrawals have already been updated, preventing duplicate updateWithdrawalStatus calls Account isolation: Filters withdrawals by the current selected account to prevent showing stale indicators from other accounts ## **Changelog** CHANGELOG entry: Fixed an issue where Perps withdrawal indicators could remain stuck in "pending" state after the withdrawal completed ## **Related issues** Fixes: https://consensyssoftware.atlassian.net/browse/TAT-2128 ## **Manual testing steps** ```gherkin Feature: Perps Withdrawal Status Resolution Scenario: Pending withdrawal resolves to completed Given user has an active Perps account with USDC balance And user initiates a withdrawal from Perps When the withdrawal completes on HyperLiquid (wait up to 10 seconds for poll) Then the withdrawal status updates from "pending" or "bridging" to "completed" And the withdrawal displays the transaction hash Scenario: Pending indicators clear on account switch Given user has a pending withdrawal on Account A And user switches to Account B which has no withdrawals When the withdrawal list renders Then no pending withdrawal indicators are shown for Account B Scenario: Completed withdrawals persist after app restart Given user had a withdrawal complete while the app was closed When user opens the app and navigates to Perps withdrawals Then the withdrawal shows as "completed" (fetched from HyperLiquid API) And no stale "pending" indicator is displayed ``` ## **Screenshots/Recordings**  ### **Before**  ### **After**  ## **Pre-merge author checklist** - [x] I’ve followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile Coding Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [x] I've completed the PR template to the best of my ability - [x] I’ve included tests if applicable - [x] 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-mobile/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.  --- > [!NOTE] > Resolves stuck pending/bridging withdrawal indicators by reconciling controller state with HyperLiquid ledger completions. > > - Reworks `useWithdrawalRequests` to merge pending with completed withdrawals, matching by `amount` (±0.01) and `asset` and removing timestamp constraints; requires `txHash` for completed matches > - Moves side-effectful controller updates into `useEffect` and adds `updatedWithdrawalIdsRef` to prevent duplicate `updateWithdrawalStatus` calls > - Adds polling every 10s when active withdrawals exist; maintains sorting by timestamp (newest first) and filters by selected account > - Updates tests to cover long-bridge timestamp gaps, small amount tolerances, txHash requirement, polling behavior, and error handling > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 836ad08. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup>
diff --git a/app/components/UI/Perps/hooks/useWithdrawalRequests.test.ts b/app/components/UI/Perps/hooks/useWithdrawalRequests.test.ts
@@ -675,10 +675,12 @@ describe('useWithdrawalRequests', () => {
       expect(mockController.updateWithdrawalStatus).not.toHaveBeenCalled();
     });
 
-    it('does not match withdrawals with different timestamps', async () => {
+    it('matches withdrawals even with very different timestamps (bridging can take hours)', async () => {
+      // This test verifies that withdrawals match regardless of timestamp differences
+      // because HyperLiquid -> Arbitrum bridging can take hours, not just minutes
       const pendingWithdrawal = {
-        id: 'withdrawal-no-match',
-        timestamp: 1640995200000,
+        id: 'withdrawal-long-bridge',
+        timestamp: 1640995200000, // When withdrawal was initiated
         amount: '100',
         asset: 'USDC',
         accountAddress: mockAddress,
@@ -701,7 +703,7 @@ describe('useWithdrawalRequests', () => {
             nonce: 456,
           },
           hash: '0xledger1',
-          time: 1640995200000 + 1000000, // 16+ minutes later
+          time: 1640995200000 + 3600000, // 1 hour later (bridging took time)
         },
       ] as unknown as unknown[]);
 
@@ -714,12 +716,18 @@ describe('useWithdrawalRequests', () => {
       });
 
       const withdrawalRequests = result.current.withdrawalRequests;
-      const pendingWithdrawalResult = withdrawalRequests.find(
-        (w) => w.id === 'withdrawal-no-match',
+      const matchedWithdrawal = withdrawalRequests.find(
+        (w) => w.id === 'withdrawal-long-bridge',
       );
 
-      expect(pendingWithdrawalResult?.status).toBe('pending');
-      expect(mockController.updateWithdrawalStatus).not.toHaveBeenCalled();
+      // Should match and be marked completed even though timestamps differ significantly
+      expect(matchedWithdrawal?.status).toBe('completed');
+      expect(matchedWithdrawal?.txHash).toBe('0xledger1');
+      expect(mockController.updateWithdrawalStatus).toHaveBeenCalledWith(
+        'withdrawal-long-bridge',
+        'completed',
+        '0xledger1',
+      );
     });
 
     it('does not match withdrawals with different assets', async () => {
diff --git a/app/components/UI/Perps/hooks/useWithdrawalRequests.ts b/app/components/UI/Perps/hooks/useWithdrawalRequests.ts
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState, useMemo } from 'react';
+import { useCallback, useEffect, useState, useMemo, useRef } from 'react';
 import { useSelector } from 'react-redux';
 import Engine from '../../../../core/Engine';
 import { usePerpsSelector } from './usePerpsSelector';
@@ -200,87 +200,154 @@ export const useWithdrawalRequests = (
     }
   }, [startTime, selectedAddress]);
 
-  // Combine pending and completed withdrawals
-  const allWithdrawals = useMemo(() => {
-    // More nuanced approach: only mark as completed if we have a matching completed withdrawal
-    // with a transaction hash (indicating it reached Arbitrum)
-    const combined = [...pendingWithdrawals, ...completedWithdrawals];
-
-    // Remove duplicates by matching pending/bridging withdrawals with completed ones
-    const uniqueWithdrawals = combined.reduce((acc, withdrawal) => {
-      // For pending and bridging withdrawals, keep them as-is
-      if (withdrawal.status === 'pending' || withdrawal.status === 'bridging') {
-        acc.push(withdrawal);
-        return acc;
-      }
+  // Track which withdrawals have already been updated in the controller
+  // to prevent duplicate updateWithdrawalStatus calls
+  const updatedWithdrawalIdsRef = useRef<Set<string>>(new Set());
 
-      // For completed withdrawals, try to match with a pending or bridging one
-      if (withdrawal.status === 'completed') {
-        // Only match if the completed withdrawal has a transaction hash (reached Arbitrum)
-        if (withdrawal.txHash) {
-          // Look for a pending or bridging withdrawal with similar timestamp and amount
-          const pendingMatch = acc.findIndex((w) => {
-            if (w.status !== 'pending' && w.status !== 'bridging') {
-              return false;
-            }
-
-            // More flexible amount matching - allow for small differences
-            const amountDiff = Math.abs(
-              parseFloat(w.amount) - parseFloat(withdrawal.amount),
-            );
-            const isAmountMatch = amountDiff < 0.01; // Allow up to 1 cent difference
-
-            // More flexible timestamp matching - allow up to 15 minutes
-            const timeDiff = Math.abs(w.timestamp - withdrawal.timestamp);
-            const isTimeMatch = timeDiff < 900000; // 15 minutes
-
-            // Asset must match
-            const isAssetMatch = w.asset === withdrawal.asset;
-
-            return isAmountMatch && isTimeMatch && isAssetMatch;
+  // Combine pending and completed withdrawals (pure data transformation, no side effects)
+  const allWithdrawals = useMemo(() => {
+    // Build a list that merges pending withdrawals with their completed counterparts
+    const result: WithdrawalRequest[] = [];
+
+    // Track which completed withdrawals have been matched to prevent
+    // multiple same-amount pending withdrawals from matching the same completed one
+    const matchedCompletedIds = new Set<string>();
+
+    // First, add all pending/bridging withdrawals
+    for (const pending of pendingWithdrawals) {
+      if (pending.status === 'pending' || pending.status === 'bridging') {
+        // Check if this pending withdrawal has a matching UNMATCHED completed one
+        const matchingCompleted = completedWithdrawals.find((completed) => {
+          if (!completed.txHash) return false;
+          // Skip completed withdrawals that have already been matched
+          if (matchedCompletedIds.has(completed.id)) return false;
+
+          const amountDiff = Math.abs(
+            parseFloat(pending.amount) - parseFloat(completed.amount),
+          );
+          const isAmountMatch = amountDiff < 0.01;
+          const isAssetMatch = pending.asset === completed.asset;
+
+          return isAmountMatch && isAssetMatch;
+        });
+
+        if (matchingCompleted) {
+          // Mark this completed withdrawal as matched
+          matchedCompletedIds.add(matchingCompleted.id);
+          // Merge: use pending's ID but update with completed data
+          result.push({
+            ...pending,
+            status: 'completed',
+            txHash: matchingCompleted.txHash,
+            withdrawalId: matchingCompleted.withdrawalId,
           });
-
-          if (pendingMatch >= 0) {
-            // Update the pending/bridging withdrawal with completed data
-            const matchedWithdrawal = acc[pendingMatch];
-            acc[pendingMatch] = {
-              ...matchedWithdrawal,
-              status: 'completed',
-              txHash: withdrawal.txHash,
-              withdrawalId: withdrawal.withdrawalId,
-            };
-
-            // Update the controller state to reflect the completion
-            const controller = Engine.context.PerpsController;
-            if (controller) {
-              controller.updateWithdrawalStatus(
-                matchedWithdrawal.id,
-                'completed',
-                withdrawal.txHash,
-              );
-            }
-          } else {
-            // No pending/bridging match found, add as new completed withdrawal
-            acc.push(withdrawal);
-          }
         } else {
-          // Completed withdrawal without txHash - don't match, keep as separate
-          acc.push(withdrawal);
+          // No match found, keep as pending/bridging
+          result.push(pending);
         }
       } else {
-        // For failed withdrawals, add as-is
-        acc.push(withdrawal);
+        // Already completed or failed in controller state
+        // Check if this matches an API completed withdrawal to prevent duplicates
+        // This handles the case where controller state was updated in a previous render
+        if (pending.status === 'completed' && pending.txHash) {
+          const matchingApiCompleted = completedWithdrawals.find(
+            (completed) => completed.txHash === pending.txHash,
+          );
+          if (matchingApiCompleted) {
+            matchedCompletedIds.add(matchingApiCompleted.id);
+          }
+        }
+        result.push(pending);
+      }
+    }
+
+    // Add completed withdrawals that weren't matched to any pending ones
+    // (historical withdrawals that were completed before the app started tracking)
+    for (const completed of completedWithdrawals) {
+      // Skip if already matched to a pending withdrawal
+      if (matchedCompletedIds.has(completed.id)) {
+        continue;
       }
 
-      return acc;
-    }, [] as WithdrawalRequest[]);
+      if (!completed.txHash) {
+        result.push(completed);
+        continue;
+      }
 
-    // Sort by timestamp (newest first)
-    const sorted = uniqueWithdrawals.sort((a, b) => b.timestamp - a.timestamp);
+      // This completed withdrawal wasn't matched, add it to results
+      result.push(completed);
+    }
 
-    return sorted;
+    // Sort by timestamp (newest first)
+    return result.sort((a, b) => b.timestamp - a.timestamp);
   }, [pendingWithdrawals, completedWithdrawals]);
 
+  // Update controller state when we detect completed withdrawals that match pending ones
+  // This is a side effect that should be in useEffect, not useMemo
+  useEffect(() => {
+    const controller = Engine.context.PerpsController;
+    if (!controller) return;
+
+    // Track which pending withdrawals have been matched in THIS render cycle
+    // to prevent multiple completed withdrawals from matching the same pending one
+    const matchedPendingIdsThisCycle = new Set<string>();
+
+    for (const completed of completedWithdrawals) {
+      // Skip if no txHash (not confirmed on chain)
+      if (!completed.txHash) continue;
+
+      // Find first UNMATCHED pending withdrawal that matches this completed one
+      const matchingPending = pendingWithdrawals.find((w) => {
+        if (w.status !== 'pending' && w.status !== 'bridging') {
+          return false;
+        }
+        // Skip if already matched in this render cycle
+        if (matchedPendingIdsThisCycle.has(w.id)) {
+          return false;
+        }
+        // Skip if already updated in a previous render cycle
+        if (updatedWithdrawalIdsRef.current.has(w.id)) {
+          return false;
+        }
+
+        // Match by amount - allow for small differences (fees, rounding)
+        const amountDiff = Math.abs(
+          parseFloat(w.amount) - parseFloat(completed.amount),
+        );
+        const isAmountMatch = amountDiff < 0.01;
+
+        // Asset must match
+        const isAssetMatch = w.asset === completed.asset;
+
+        return isAmountMatch && isAssetMatch;
+      });
+
+      if (matchingPending) {
+        // Mark as matched in this cycle to prevent another completed from matching it
+        matchedPendingIdsThisCycle.add(matchingPending.id);
+
+        DevLogger.log(
+          'useWithdrawalRequests: Updating withdrawal status to completed',
+          {
+            pendingId: matchingPending.id,
+            txHash: completed.txHash,
+            amount: completed.amount,
+          },
+        );
+
+        // Mark as updated to prevent duplicate calls across render cycles
+        updatedWithdrawalIdsRef.current.add(matchingPending.id);
+
+        // Update the controller state to reflect the completion
+        controller.updateWithdrawalStatus(
+          matchingPending.id,
+          'completed',
+          completed.txHash,
+        );
+      }
+    }
+  }, [completedWithdrawals, pendingWithdrawals]);
+
   // Initial fetch when component mounts
   useEffect(() => {
     if (!skipInitialFetch) {
