Skip to content

chore: consolidate navigation style - ux team#25877

Closed
asalsys wants to merge 7 commits into
mainfrom
chore/consolidate-navigation-style-ux
Closed

chore: consolidate navigation style - ux team#25877
asalsys wants to merge 7 commits into
mainfrom
chore/consolidate-navigation-style-ux

Conversation

@asalsys

@asalsys asalsys commented Feb 10, 2026

Copy link
Copy Markdown
Contributor

Description

This PR consolidates navigation styles across the codebase by replacing inline navigationOptions style definitions with the shared getNavigationOptionsTitle utility function.

Reason for change:

  • Preparing the codebase for the upgrade to React Navigation v6
  • Navigation header styles were defined inconsistently across components using the legacy navigationOptions pattern
  • Centralizing navigation options will make the migration to React Navigation v6's new API smoother and reduce the scope of changes required during the upgrade

Solution:

  • Replaced inline style definitions with the centralized getNavigationOptionsTitle function from app/components/UI/Navbar
  • This ensures consistent navigation header styling across the app and simplifies the upcoming React Navigation v6 migration

Changelog

CHANGELOG entry: null

Related issues

Fixes: #23765 Part of React Navigation v6 upgrade preparation (split from original PR for easier code review by team)

Manual testing steps

Feature: Navigation header consistency

Scenario: User navigates to screens affected by this PR
Given the app is running

When user navigates to any screen modified in this PR
Then the navigation header should display correctly with proper title styling
And the back button should function as expected

Screenshots/Recordings

Before

N/A - No visual changes

After

N/A - No visual changes

Pre-merge author checklist

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.](chore: consolidate navigation style - ux team #25877)

Note

Low Risk
Small, localized navigation behavior change plus a test update; low risk but could affect post-RPC-selection routing if Routes.WALLET_VIEW isn’t equivalent everywhere.

Overview
Simplifies the RPC selection flow redirect by replacing nested navigate(Routes.WALLET.HOME, { ... }) calls with a direct navigate(Routes.WALLET_VIEW) after updating the default RPC and active network.

Updates ReceiveRequest navigation testing to pull receiveAsset from state.modals (instead of passing it as a prop) and to assert the exact navigation params ({ params: { receiveAsset } }) passed to PaymentRequestView.

Written by Cursor Bugbot for commit 688222d. This will update automatically on new commits. Configure here.

@asalsys asalsys self-assigned this Feb 10, 2026
@asalsys asalsys added the team-mobile-platform Mobile Platform team label Feb 10, 2026
@github-actions

Copy link
Copy Markdown
Contributor

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.

@asalsys asalsys force-pushed the chore/consolidate-navigation-style-ux branch from 94886bc to 27c8ae9 Compare February 12, 2026 15:35
Update test to match implementation that navigates directly to
'PaymentRequest' instead of 'PaymentRequestView' with nested screen.
@asalsys asalsys marked this pull request as ready for review February 16, 2026 17:02
@asalsys asalsys requested a review from a team as a code owner February 16, 2026 17:02
@asalsys asalsys enabled auto-merge February 16, 2026 17:02
Comment thread app/components/UI/ReceiveRequest/index.js
Comment thread app/components/UI/TransactionElement/index.js

@PatrykLucka PatrykLucka left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just tested this PR and the transaction details from activity view are not opening. It’s worth looking into BugBot’s comments.

@cursor cursor Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Comment thread app/components/UI/ReceiveRequest/index.test.tsx
@github-actions

Copy link
Copy Markdown
Contributor

🔍 Smart E2E Test Selection

  • Selected E2E tags: SmokeNetworkAbstractions
  • Selected Performance tags: None (no tests recommended)
  • Risk Level: low
  • AI Confidence: 80%
click to see 🤖 AI reasoning details

E2E Test Selection:
The PR contains two changes:

  1. ReceiveRequest/index.test.tsx: This is purely a test file update that changes how the test sets up Redux state (moving receiveAsset from a prop to modals.receiveAsset in state) and updates the navigation assertion to be more specific. This has no production code impact.

  2. RpcSelectionModal/RpcSelectionModal.tsx: This simplifies the navigation call after selecting an RPC endpoint from a nested navigation structure (navigate(Routes.WALLET.HOME, { screen: Routes.WALLET.TAB_STACK_FLOW, params: { screen: Routes.WALLET_VIEW } })) to a direct route (navigate(Routes.WALLET_VIEW)). This is a navigation simplification in the network RPC selection flow.

The RpcSelectionModal is part of the NetworkSelector component and is used when users select different RPC endpoints for networks. This functionality falls under network management, which is covered by SmokeNetworkAbstractions.

The risk is low because:

  • The test file change has no production impact
  • The navigation change is a simplification that follows the same pattern used elsewhere in the codebase (as seen in useSendNavbar.tsx, DeleteAccount.tsx, OptIn.hooks.tsx)
  • No E2E tests specifically test RPC selection modal navigation
  • The change doesn't alter the core functionality, just the navigation path after RPC selection

Performance Test Selection:
The changes are: (1) a test file update with no production impact, and (2) a navigation simplification in the RPC selection modal. Neither change affects UI rendering performance, data loading, state management, or any critical user flows that would impact app performance. The navigation change is a simple route simplification that doesn't add any computational overhead or affect render times.

View GitHub Actions results

@sonarqubecloud

Copy link
Copy Markdown

@asalsys asalsys requested a review from PatrykLucka February 20, 2026 19:44
github-merge-queue Bot pushed a commit that referenced this pull request Feb 20, 2026
<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

This PR consolidates navigation styles across the codebase by replacing
inline `navigationOptions` style definitions with the shared
`getNavigationOptionsTitle` utility function.

**Reason for change:**
- Preparing the codebase for the upgrade to React Navigation v6
- Navigation header styles were defined inconsistently across components
using the legacy `navigationOptions` pattern
- Centralizing navigation options will make the migration to React
Navigation v6's new API smoother and reduce the scope of changes
required during the upgrade

**Solution:**
- Replaced inline style definitions with the centralized
`getNavigationOptionsTitle` function from `app/components/UI/Navbar`
- This ensures consistent navigation header styling across the app and
simplifies the upcoming React Navigation v6 migration

## **Changelog**

CHANGELOG entry: null

## **Related issues**

Fixes: #23765 Part of
React Navigation v6 upgrade preparation (split from original PR for
easier code review by team)

## **Manual testing steps**

Feature: Navigation header consistency

  Scenario: User navigates to screens affected by this PR
    Given the app is running

    When user navigates to any screen modified in this PR
Then the navigation header should display correctly with proper title
styling
    And the back button should function as expected
## **Screenshots/Recordings**

<!-- No visual changes expected - this is a code refactoring PR -->

### **Before**

N/A - No visual changes

### **After**

N/A - No visual changes

## **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.](#25877)

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Touches navigation behavior in confirmation and account-switch flows,
so small route/stack differences could change where users land or how
modals close. Changes are localized and covered by updated tests.
> 
> **Overview**
> Consolidates confirmations-related navigation by replacing the nested
`navigation.navigate(Routes.WALLET.HOME, { ...Routes.WALLET_VIEW... })`
pattern with a direct `navigation.navigate(Routes.WALLET_VIEW)`.
> 
> This updates the switch-account-type modal’s close behavior
(`AccountNetworkRow`), the post-confirm flow for
`TransactionType.musdConversion` (`useTransactionConfirm`), and the
“reject then go home” path (`useConfirmActions`), with associated test
expectation updates.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
0d8b7de. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->
@github-actions

Copy link
Copy Markdown
Contributor

This PR has been automatically marked as stale because it has not had recent activity in the last 90 days. It will be closed in 7 days. Thank you for your contributions.

@github-actions github-actions Bot added the stale Issues that have not had activity in the last 90 days label May 22, 2026
@github-actions

Copy link
Copy Markdown
Contributor

This PR was closed because there has been no follow up activity in 7 days. Thank you for your contributions.

@github-actions github-actions Bot closed this May 29, 2026
auto-merge was automatically disabled May 29, 2026 01:14

Pull request was closed

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size-S stale Issues that have not had activity in the last 90 days team-mobile-platform Mobile Platform team

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[NAV UPGRADE - 4] Consolidate navigation API call style

2 participants