Description

These changes are aiming to fix a case of stuck pending approvals we've been running into in our (@MetaMask/wallet-integrations) work on the MMConnect (new SDK). In some edge cases you can get approvals stuck in state where the isProcessing flag on the PermissionApproval component is never reset resulting in approvals queued behind it never showing and any subsequent request getting permanently stuck in this queue where nothing is shown and the user has no opportunity to approve or reject anything in the queue. As you can see in the "AFTER" video below, the external browser connection flows we support with the SDK create the possibility of multiple connection requests getting queued (in app browser avoids this since the confirmation blocks further action) since the SDK does not support per origin request rate limiting.

Root Cause:
The PermissionApproval component used a useRef-based isProcessing flag to prevent duplicate processing of approval requests. However, in certain edge cases (especially with external browser paths where multiple requests can queue), this flag would never reset to false, causing:

1. The current approval to be blocked from processing
2. All queued approvals behind it to never display
3. Subsequent requests to get permanently stuck in the queue with no UI shown to the user

Solution:

• Removed the isProcessing ref-based guard mechanism that was causing the stuck state
• Removed the early return check for ApprovalTypes.REQUEST_PERMISSIONS and eventSource that was resetting the flag inappropriately
• Added pendingApprovalList to the useEffect dependency array so the effect properly re-runs when the approval queue changes for further assurances that the queue does not get permanently stuck.

This change allows the component to reactively process approval requests based on the actual state of the approval queue, rather than relying on a ref-based flag that can get out of sync.

Changelog

CHANGELOG entry: Fixed an issue where pending approval requests could become permanently stuck in the queue, preventing users from approving or rejecting subsequent connection requests.

Related issues

Fixes: n/a

Manual testing steps

Feature: Permission approval queue handling

  Scenario: Multiple connection requests from external browser
    Given the user has MetaMask Mobile open
    And an external browser (not in-app browser) is used to initiate connection requests
    
    When multiple connection requests are queued in quick succession
    Then all queued approval requests should be displayed sequentially
    And users should be able to approve or reject each request
    And no requests should become permanently stuck in the queue

  Scenario: Approval queue processing after navigation
    Given a connection request is in the approval queue
    And the user navigates away from the approval screen
    
    When the user returns or a new approval request is added
    Then the approval queue should continue processing correctly
    And all pending approvals should be accessible to the user

Screenshots/Recordings

Before

After

Pre-merge author checklist

• I’ve followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
• 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 format if applicable
• I’ve applied the right labels on the PR (see labeling guidelines). 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.