chore: update header for send flow by brianacnguyen · Pull Request #24253 · MetaMask/metamask-mobile

brianacnguyen · 2026-01-06T00:18:10Z

Description

Refactored the send flow navbar to use the new HeaderCenter component pattern via getHeaderCenterNavbarOptions. This replaces the manual header configuration (custom headerLeft, headerRight, headerTitle, and headerStyle implementations) with the standardized header component, significantly simplifying the code.

Why:
The send flow was using a custom inline header implementation with individually defined components for back button, close button, title, and styling. This duplicated logic that exists in the reusable HeaderCenter component.

Improvement:

Reduced useSendNavbar hook from ~100 lines to ~50 lines
Aligned send flow headers with the standardized HeaderCenter pattern used across the app
Improved maintainability by using a centralized header component

Changelog

CHANGELOG entry: null

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/MDP-654

Manual testing steps

Feature: Send flow navigation header

  Scenario: User navigates through send flow screens
    Given user is on the wallet home screen with available ETH balance

    When user taps on Send button
    Then user sees the Asset selection screen with "Send" title in header

    When user selects an asset and proceeds to Recipient screen
    Then user sees the Recipient screen with centered "Send" title, back button (left), and close button (right)

    When user selects a recipient and proceeds to Amount screen
    Then user sees the Amount screen with centered "Send" title, back button (left), and close button (right)

    When user taps the back button
    Then user navigates to the previous screen

    When user taps the close (X) button
    Then the send flow is closed and user returns to the home screen

Screenshots/Recordings

Before

After

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2026-01-05.at.16.14.01.mov

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

Migrates the send flow to the standardized HeaderCenter header options and updates tests to match the new API.

Replaces manual headerLeft/headerRight/headerTitle/headerStyle with getHeaderCenterNavbarOptions for Amount, Asset, and Recipient, wiring onBack/onClose, includesTopInset, and test IDs
Removes theme/design-system header composition and related code from useSendNavbar
Updates tests to render the header function, assert back/close buttons and title, and adjusts mocks (react-navigation, safe area, tailwind, design-system)

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

…to header/send

github-actions · 2026-01-06T00:18:18Z

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.

cursor · 2026-01-06T00:23:09Z

app/components/Views/confirmations/hooks/send/useSendNavbar.tsx

+      onBack: handleCancelPress,
+      title: strings('send.title'),
+      includesTopInset: true,
+    }),


Asset screen loses close button, shows back arrow instead

The Asset screen configuration uses onBack: handleCancelPress instead of onClose: handleCancelPress. This changes the UI from showing a close button (X) on the right side to showing a back arrow (←) on the left side. The original implementation had headerRight with a close button for Asset, not a back button. For consistency with the old behavior, the Asset configuration likely needs onClose instead of onBack to render the X button on the right side rather than a back arrow on the left.

app/components/Views/confirmations/hooks/send/useSendNavbar.test.tsx

nmg8679-web · 2026-01-06T00:56:32Z

please assist

…

On Mon, Jan 5, 2026, 4:51 PM cursor[bot] ***@***.***> wrote: ***@***.***[bot]* commented on this pull request. ------------------------------ In app/components/Views/confirmations/hooks/send/useSendNavbar.test.tsx <#24253 (comment)> : > - shadowColor: 'transparent', - elevation: 0, - }); + expect(Amount.header).toBeDefined(); + expect(typeof Amount.header).toBe('function'); + }); + + it('renders back and close buttons in header', () => { + const { result } = renderHookWithProvider(() => useSendNavbar()); + const { Amount } = result.current; + + const Header = Amount.header; + const { getByTestId } = render(<Header />); + + expect(getByTestId('send-navbar-back-button')).toBeTruthy(); + expect(getByTestId('send-navbar-close-button')).toBeTruthy(); Tests use weak matchers instead of toBeOnTheScreen() (Bugbot Rules) The tests use toBeTruthy() to assert element presence (e.g., expect(getByTestId('send-navbar-back-button')).toBeTruthy()), which violates the testing guideline that states: "Do not use weak matchers like toBeDefined or toBeTruthy to assert element presence. Use toBeOnTheScreen()." This applies to assertions for back buttons, close buttons, and title text across the Amount, Asset, and Recipient route tests. Additional Locations (1) - app/components/Views/confirmations/hooks/send/useSendNavbar.test.tsx#L304-L306 <https://github.com/MetaMask/metamask-mobile/blob/aa3525245405eb498fc4d742a5c3054f1fe309b1/app/components/Views/confirmations/hooks/send/useSendNavbar.test.tsx#L304-L306> [image: Fix in Cursor] <https://cursor.com/open?data=eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6ImJ1Z2JvdC12MiJ9.eyJ2ZXJzaW9uIjoxLCJ0eXBlIjoiQlVHQk9UX0ZJWF9JTl9DVVJTT1IiLCJkYXRhIjp7InJlZGlzS2V5IjoiYnVnYm90OjRjZDQ5M2JmLWNlMzMtNDI2Yy05OGJmLTI4NGMwNjgyMGZiZiIsImVuY3J5cHRpb25LZXkiOiI4Tm8xV1RDV2JUR2l6YkZOQkxySjVXQ2FRY1Y0SGhZTk9ZQ1IycG85QUJNIiwiYnJhbmNoIjoiaGVhZGVyL3NlbmQifSwiaWF0IjoxNzY3NjYwNjQwLCJleHAiOjE3NzAyNTI2NDB9.Ws7roCGDsx8Nc7ALncnNiM6tZYoFlt4oefmyK0YRrlEwV4nvPxOJPAYvoMTWGRAEgcsPiCWCf57PLFaZ82ljuuZZIq8GVdtJM2npqicMp3hByvLCrltLung87_przLFmFIICAkFtuIxZxsx2ty8Xie8gp2Q0YwAltovQm91Fb_KiM2coAfsKx02FZ6iG2SvwGZHQXunu52JZf9wPnsjn7-Pplmy1oWHjIMOS5qxCMBiFdE05e9PZHlEEn7aULiwmZUAjBTSF9r-30xKItlZ-l2M_dJqu5UoPcerX1jZIR2POoX4Z8HGQQJHjqvv5GZTNsM_tEAF3wQC_L0IKfyomRQ> [image: Fix in Web] <https://cursor.com/agents?data=eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6ImJ1Z2JvdC12MiJ9.eyJ2ZXJzaW9uIjoxLCJ0eXBlIjoiQlVHQk9UX0ZJWF9JTl9XRUIiLCJkYXRhIjp7InJlZGlzS2V5IjoiYnVnYm90OjRjZDQ5M2JmLWNlMzMtNDI2Yy05OGJmLTI4NGMwNjgyMGZiZiIsImVuY3J5cHRpb25LZXkiOiI4Tm8xV1RDV2JUR2l6YkZOQkxySjVXQ2FRY1Y0SGhZTk9ZQ1IycG85QUJNIiwiYnJhbmNoIjoiaGVhZGVyL3NlbmQiLCJyZXBvT3duZXIiOiJNZXRhTWFzayIsInJlcG9OYW1lIjoibWV0YW1hc2stbW9iaWxlIiwicHJOdW1iZXIiOjI0MjUzLCJjb21taXRTaGEiOiJhYTM1MjUyNDU0MDVlYjQ5OGZjNGQ3NDJhNWMzMDU0ZjFmZTMwOWIxIiwicHJvdmlkZXIiOiJnaXRodWIifSwiaWF0IjoxNzY3NjYwNjQwLCJleHAiOjE3NzAyNTI2NDB9.FgRqWqy_0IDxpYVe8tT1e_TmEc-yYvMJdpi6z2DerlonXf4V3gT1TEpjp5UjSov1g9DAKqtNSd69LdOJ25WHrScTyVAys8s8gurCK4rjQO-AZ9wl5nB17yXeERnPhWYAjhFlcpKfiZUQ9tjK8v1kav0ZJKAmqzEwY20Ffst24hb7n92UivESk-xViWk7Y0yr0TV8VWA8j6X5r6dLKYu69ERjirc7w6MtdNv0JH59V1_46DOGVess_s9uwp5SWq6wLnyqKETvco-1P9AFwMUySJXDowteSiG0fLnPLEwidIdK9aOzyWq2x_wlAVBgERsuWDp2XMsvpUSR3q9YCgc_gw> — Reply to this email directly, view it on GitHub <#24253 (review)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/B3SIO5ZD3FDE6S7E3S25S6T4FMBITAVCNFSM6AAAAACQY4CN2OVHI2DSMVQWIX3LMV43YUDVNRWFEZLROVSXG5CSMV3GSZLXHMZTMMRYHA4TCNJZHA> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

github-actions · 2026-01-06T01:14:23Z

🔍 Smart E2E Test Selection

Selected E2E tags: SmokeConfirmationsRedesigned
Risk Level: medium
AI Confidence: 85%

click to see 🤖 AI reasoning details

The changes are a UI refactoring of the Send flow navigation header in the confirmations feature. The useSendNavbar hook is being updated to use a centralized getHeaderCenterNavbarOptions utility instead of manually creating header components.

Key observations:

This is a pure UI refactoring - the navigation behavior (back button, close button, title) remains functionally the same
The changes affect the Send flow screens (Amount, Asset, Recipient) which are part of the confirmations flow
The test file has been updated to match the new implementation pattern
No business logic changes - just how the header components are rendered

The SmokeConfirmationsRedesigned tag is the most appropriate because:

The changes are in app/components/Views/confirmations/ directory
The Send flow is part of the confirmation process
The tag description mentions "New confirmation UI as well as all confirmation flows"

Risk is medium because while this is a refactoring, it affects user-visible navigation elements in a critical flow (sending assets). The comprehensive test updates provide good coverage for the changes.

View GitHub Actions results

sonarqubecloud · 2026-01-06T01:36:45Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

brianacnguyen added 3 commits December 31, 2025 16:21

Updated headers for send flow

8380025

Merge branch 'main' of https://github.com/MetaMask/metamask-mobile in…

99f1216

…to header/send

Updated header for main send flow

f10f4f7

brianacnguyen self-assigned this Jan 6, 2026

brianacnguyen requested a review from a team as a code owner January 6, 2026 00:18

brianacnguyen added No QA Needed Apply this label when your PR does not need any QA effort. team-design-system All issues relating to design system in Mobile no changelog required No changelog entry is required for this change labels Jan 6, 2026

github-actions bot added the size-S label Jan 6, 2026

cursor bot reviewed Jan 6, 2026

View reviewed changes

Updated usesendnavbar tests

a87d969

github-actions bot added size-M and removed size-S labels Jan 6, 2026

Clean up mocks for usesendnavbar

aa35252

cursor bot reviewed Jan 6, 2026

View reviewed changes

app/components/Views/confirmations/hooks/send/useSendNavbar.test.tsx Outdated Show resolved Hide resolved

Updated usesendnavbar test

53d0f5c

brianacnguyen enabled auto-merge January 6, 2026 16:09

OGPoyraz approved these changes Jan 6, 2026

View reviewed changes

brianacnguyen added this pull request to the merge queue Jan 6, 2026

Merged via the queue into main with commit 51d193f Jan 6, 2026
91 checks passed

brianacnguyen deleted the header/send branch January 6, 2026 16:37

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

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

chore: update header for send flow#24253

chore: update header for send flow#24253
brianacnguyen merged 6 commits intomainfrom
header/send

brianacnguyen commented Jan 6, 2026 •

edited by cursor bot

Loading

Uh oh!

github-actions bot commented Jan 6, 2026

Uh oh!

cursor bot Jan 6, 2026

Uh oh!

Uh oh!

nmg8679-web commented Jan 6, 2026 via email

Uh oh!

github-actions bot commented Jan 6, 2026

Uh oh!

sonarqubecloud bot commented Jan 6, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

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

Uh oh!

Description

Changelog

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions bot commented Jan 6, 2026

Uh oh!

cursor bot Jan 6, 2026

Choose a reason for hiding this comment

Asset screen loses close button, shows back arrow instead

Uh oh!

Uh oh!

nmg8679-web commented Jan 6, 2026 via email

Uh oh!

github-actions bot commented Jan 6, 2026

🔍 Smart E2E Test Selection

Uh oh!

sonarqubecloud bot commented Jan 6, 2026

Quality Gate passed

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

brianacnguyen commented Jan 6, 2026 •

edited by cursor bot

Loading