feat: Replace EVM transaction details modal with bottom sheet by wachunei · Pull Request #25400 · MetaMask/metamask-mobile

wachunei · 2026-01-29T17:56:55Z

Description

This PR replaces the legacy react-native-modal based transaction details modal in TransactionElement with a modern bottom sheet component, aligning with the pattern already used for multichain transactions (MultichainTransactionDetailsSheet).

Why this change?

The existing transaction details modal used react-native-modal wrapped in DetailsModal, which is:

Inconsistent with the newer bottom sheet pattern used across the app
Not following the component library standards
Using inline modal rendering within the component

What was changed?

Key architectural change: The modal has been replaced with a navigation-based bottom sheet pattern:

Before	After
Modal rendered inline in `TransactionElement`	Navigation to `TransactionDetailsSheet` via `Routes.SHEET.TRANSACTION_DETAILS`
State-controlled visibility (`detailsModalVisible`)	Navigation-based (no local visibility state needed)
Modal wrapping `TransactionDetails`	`BottomSheet` wrapping `TransactionDetails`

What remains the same?

✅ All existing functionality is preserved:

The TransactionDetails component is reused inside the new sheet (no changes to transaction details rendering)
Speed up / Cancel transaction actions work identically (callbacks are passed via navigation params)
Block explorer navigation works the same
Transaction summary, status, from/to addresses, nonce, fees display unchanged
Date formatting preserved

Files changed:

TransactionDetailsSheet.tsx (new) - Bottom sheet component that wraps TransactionDetails
TransactionDetailsSheet/index.ts (new) - Export file
Routes.ts - Added SHEET.TRANSACTION_DETAILS route
App.tsx - Registered TransactionDetailsSheet in RootModalNav navigator
TransactionElement/index.js - Updated onPressItem to navigate to sheet, removed modal code and related state

Changelog

CHANGELOG entry: Replaced transaction details modal with bottom sheet for improved UX consistency

Related issues

Fixes: #23782 Fixes: #22319

Manual testing steps

Feature: Transaction Details Bottom Sheet

  Scenario: User views transaction details
    Given the user is on the wallet activity/transactions screen
    And there is at least one confirmed EVM transaction visible

    When user taps on a transaction row
    Then a bottom sheet appears from the bottom of the screen
    And the sheet displays the transaction title and date in the header
    And the sheet displays transaction status, from/to addresses, nonce, and fee summary

  Scenario: User closes transaction details sheet
    Given the transaction details sheet is open

    When user taps the close button in the header
    Then the sheet closes and returns to the transactions list

    When user swipes down on the sheet
    Then the sheet closes and returns to the transactions list

  Scenario: User views transaction on block explorer
    Given the transaction details sheet is open
    And the transaction has a valid hash

    When user taps "View on Etherscan" link
    Then the sheet closes
    And a webview opens with the block explorer transaction page

  Scenario: User initiates speed up on pending transaction
    Given the transaction details sheet is open for a pending transaction
    And speed up/cancel buttons are visible

    When user taps the "Speed Up" button
    Then the sheet closes
    And the speed up modal appears

  Scenario: User initiates cancel on pending transaction
    Given the transaction details sheet is open for a pending transaction
    And speed up/cancel buttons are visible

    When user taps the "Cancel" button
    Then the sheet closes
    And the cancel modal appears

Screenshots/Recordings

Before

before_tx_det.mp4

After

after_tx_det.mp4

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.

Note

Medium Risk
Moderate risk because it changes the interaction flow for opening EVM transaction details from an inline modal to navigation-driven sheets, which can impact back/close behavior and action callbacks (speed up/cancel).

Overview
Replaces the legacy inline react-native-modal transaction details modal in TransactionElement with a navigation-driven bottom sheet (TransactionDetailsSheet).

Adds a new Routes.SHEET.TRANSACTION_DETAILS entry and registers the sheet in RootModalFlow, then updates transaction row presses to navigate to the sheet and pass the transaction data plus speed-up/cancel callbacks via route params.

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

- Create TransactionDetailsSheet component wrapping TransactionDetails - Add SHEET.TRANSACTION_DETAILS route - Register TransactionDetailsSheet in RootModalNav navigator - Update TransactionElement to navigate to sheet instead of showing modal - Remove detailsModalVisible state and onCloseDetailsModal method

app/components/UI/TransactionElement/TransactionDetailsSheet/TransactionDetailsSheet.tsx

- Create TransactionDetailsSheet component wrapping TransactionDetails - Add SHEET.TRANSACTION_DETAILS route - Register TransactionDetailsSheet in RootModalNav navigator - Update TransactionElement to navigate to sheet instead of showing modal - Pass showSpeedUpModal/showCancelModal callbacks from TransactionElement - Sheet closes first, then triggers the callback with proper gas data

app/components/UI/TransactionElement/index.js

app/components/UI/TransactionElement/TransactionDetailsSheet/TransactionDetailsSheet.tsx

TransactionDetails is now rendered inside TransactionDetailsSheet, so the import in TransactionElement is no longer needed.

TransactionDetails already calls close() before invoking showSpeedUpModal/showCancelModal, so the sheet handlers don't need to close again. This prevents double navigation.goBack() calls.

vinnyhoward

LGTM glad that modal is gone. I've always hated that UX

github-actions · 2026-01-29T19:30:07Z

🔍 Smart E2E Test Selection

Selected E2E tags: SmokeAccounts, SmokeConfirmationsRedesigned, SmokeIdentity, SmokeNetworkAbstractions, SmokeNetworkExpansion, SmokeTrade, SmokeWalletPlatform, SmokeCard, SmokeRewards, SmokePerps, SmokeRamps, SmokePredictions, FlaskBuildTests
Selected Performance tags: @PerformanceAccountList, @PerformanceOnboarding, @PerformanceLogin, @PerformanceSwaps, @PerformanceLaunch, @PerformanceAssetLoading, @PerformancePredict, @PerformancePreps
Risk Level: high
AI Confidence: %

click to see 🤖 AI reasoning details

E2E Test Selection:
Fallback: AI analysis did not complete successfully. Running all tests.

Performance Test Selection:
Fallback: AI analysis did not complete successfully. Running all performance tests.

View GitHub Actions results

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

cursor · 2026-01-29T19:47:47Z

app/components/UI/TransactionElement/TransactionDetailsSheet/TransactionDetailsSheet.tsx

+
+  const handleClose = useCallback(() => {
+    sheetRef.current?.onCloseBottomSheet();
+  }, []);


Block explorer navigation conflicts with sheet close

High Severity

When viewing a transaction on the block explorer, TransactionDetails.viewOnEtherscan() calls navigation.push('Webview') followed by close(). The new handleClose triggers sheetRef.current?.onCloseBottomSheet(), which eventually calls navigation.goBack() due to shouldNavigateBack={true} on the BottomSheet. This causes the user to be navigated back from the webview after the close animation completes. The existing MultichainTransactionDetailsSheet handles this correctly by passing the navigation as a callback to onCloseBottomSheet(), ensuring navigation happens after the sheet closes instead of before.

sorry bot, I can't reproduce this one.

cant_repro.mp4

sonarqubecloud · 2026-01-29T19:51:33Z

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

metamaskbot added the team-money-movement issues related to Money Movement features label Jan 29, 2026

github-actions bot added the size-M label Jan 29, 2026

wachunei added team-mobile-ux Mobile UX team and removed team-money-movement issues related to Money Movement features labels Jan 29, 2026

wachunei marked this pull request as ready for review January 29, 2026 18:19

wachunei requested a review from a team as a code owner January 29, 2026 18:19

cursor bot reviewed Jan 29, 2026

View reviewed changes

app/components/UI/TransactionElement/TransactionDetailsSheet/TransactionDetailsSheet.tsx Outdated Show resolved Hide resolved

wachunei force-pushed the feat/transaction-details-bottom-sheet branch from 57d1227 to 6895e64 Compare January 29, 2026 18:38

cursor bot reviewed Jan 29, 2026

View reviewed changes

app/components/UI/TransactionElement/index.js Show resolved Hide resolved

app/components/UI/TransactionElement/TransactionDetailsSheet/TransactionDetailsSheet.tsx Show resolved Hide resolved

wachunei added 2 commits January 29, 2026 15:48

chore: remove unused TransactionDetails import

5e71aff

TransactionDetails is now rendered inside TransactionDetailsSheet, so the import in TransactionElement is no longer needed.

fix: remove redundant sheet close in speed up/cancel handlers

374d3a6

TransactionDetails already calls close() before invoking showSpeedUpModal/showCancelModal, so the sheet handlers don't need to close again. This prevents double navigation.goBack() calls.

vinnyhoward approved these changes Jan 29, 2026

View reviewed changes

Merge branch 'main' into feat/transaction-details-bottom-sheet

9f52d9e

cursor bot reviewed Jan 29, 2026

View reviewed changes

wachunei added this pull request to the merge queue Jan 29, 2026

Merged via the queue into main with commit 0d4f7ba Jan 29, 2026
102 checks passed

wachunei deleted the feat/transaction-details-bottom-sheet branch January 29, 2026 20:25

github-actions bot locked and limited conversation to collaborators Jan 29, 2026

metamaskbot added the release-7.65.0 Issue or pull request that will be included in release 7.65.0 label Jan 29, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: Replace EVM transaction details modal with bottom sheet#25400

feat: Replace EVM transaction details modal with bottom sheet#25400
wachunei merged 5 commits intomainfrom
feat/transaction-details-bottom-sheet

wachunei commented Jan 29, 2026 •

edited by cursor bot

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

vinnyhoward left a comment

Uh oh!

github-actions bot commented Jan 29, 2026

Uh oh!

cursor bot left a comment

Uh oh!

cursor bot Jan 29, 2026

Uh oh!

wachunei Jan 29, 2026 •

edited

Loading

Uh oh!

sonarqubecloud bot commented Jan 29, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

wachunei commented Jan 29, 2026 • edited by cursor bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Why this change?

What was changed?

What remains the same?

Files changed:

Changelog

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

Uh oh!

Uh oh!

Uh oh!

vinnyhoward left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Jan 29, 2026

🔍 Smart E2E Test Selection

Uh oh!

cursor bot left a comment

Choose a reason for hiding this comment

Uh oh!

cursor bot Jan 29, 2026

Choose a reason for hiding this comment

Block explorer navigation conflicts with sheet close

Uh oh!

wachunei Jan 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sonarqubecloud bot commented Jan 29, 2026

Quality Gate passed

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

wachunei commented Jan 29, 2026 •

edited by cursor bot

Loading

wachunei Jan 29, 2026 •

edited

Loading