fix: multiple alert modal selected index sync

[imblue-dabadee]

Description

Fixes a bug in MultipleAlertModal where closing the modal while viewing one alert and reopening it by clicking a different alert would cause a mismatch between the alert content and styling.

Root cause: The selectedIndex state (used for styling/severity) was not syncing with the alertKey (used for content) when the modal was reopened. This caused scenarios where a Warning alert's yellow styling would display with a Danger alert's red content, or vice versa.

Solution: Added a useEffect that syncs selectedIndex with alertKey whenever the alertKey changes, ensuring the correct styling is always applied.

Changelog

CHANGELOG entry: Fixed a bug where alert modal styling would not update correctly when switching between different severity alerts.

Related issues

Fixes: https://github.com/MetaMask/metamask-mobile/issues/23841

Manual testing steps

Feature: Multiple alert modal styling synchronization

  Scenario: user closes and reopens alert modal with different alert
    Given the user is on a transaction confirmation screen with multiple alerts of different severities (e.g., a Warning alert on "Network fee" and a Danger alert on "You receive")

    When user clicks on the Warning alert to open the modal
    And user navigates to the Danger alert using the arrow
    And user closes the modal by tapping outside
    And user clicks on the Warning alert again
    Then the modal displays the Warning alert with correct yellow/warning styling

  Scenario: user switches between danger and warning alerts
    Given the user is on a transaction confirmation screen with a Danger alert and a Warning alert

    When user clicks on the Danger alert to open the modal
    And user closes the modal by tapping outside
    And user clicks on the Warning alert
    Then the modal displays the Warning alert with correct yellow/warning styling (not red/danger styling)## 

Screenshots/Recordings

Before

https://github.com/user-attachments/assets/81a6f432-fc08-4f27-8bce-6287ce5e330c

After

https://github.com/user-attachments/assets/2afa4cfd-95ce-4d35-9886-fac5e6cfcf03

Pre-merge author checklist

• [x] I’ve followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
• [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 format if applicable
• [x] 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.

---

[!NOTE] Synchronizes selectedIndex with alertKey in MultipleAlertModal and adds tests to validate correct alert display and styling.

• Confirmations UI:
  • app/components/Views/confirmations/components/modals/multiple-alert-modal/multiple-alert-modal.tsx
    • Add useEffect to sync selectedIndex with alertKey, ensuring alert content and severity styling stay aligned when reopening/navigating alerts.
• Tests:
  • app/components/Views/confirmations/components/modals/multiple-alert-modal/multiple-alert-modal.test.tsx
    • Add cases verifying alert content changes with alertKey updates and that severity icon/styling updates accordingly.

^{Written by Cursor Bugbot for commit 4a708af021b26d508b9de89ef7a3e5063dae8b66. This will update automatically on new commits. Configure here.}

[github-actions[bot]]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[github-actions[bot]]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokeConfirmationsRedesigned
• Risk Level: low
• AI Confidence: 90%

click to see 🤖 AI reasoning details

The changes are focused on the MultipleAlertModal component within the confirmations system. The modification adds a useEffect hook to sync the selectedIndex state with the alertKey when the modal is reopened, ensuring correct styling is applied. This is a small, targeted bug fix with accompanying unit tests.

The component is part of the alert system context used in the redesigned confirmations flow (app/components/Views/confirmations/). The MultipleAlertModal is rendered within the AlertSystemContextProvider which wraps confirmation components.

Since this change:

1. Is localized to the confirmations alert modal
2. Only affects UI state synchronization (not core logic)
3. Has unit tests included
4. Is part of the redesigned confirmations system

The appropriate tag is SmokeConfirmationsRedesigned which covers the new confirmation UI and all confirmation flows. The risk is low because it's a small, well-tested UI fix that doesn't change core functionality.

View GitHub Actions results

[sonarqubecloud[bot]]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
100.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud