feat(3448): header update #11763

vinnyhoward · 2024-10-11T17:51:44Z

Description

The header is being updated according to this Figma design (second to last screen).

Because WalletAccount is being removed, the more icon or overflow icon will be moved to the AccountSelectorList. Here is the PR for more info

Related issues

Ticket: #3448

Manual testing steps

Wallet Home Page
- Open the account picker and switch between accounts
- Verify functionality remains the same as before
Copy Address
- Use the copy address feature in the top right
- Confirm it works as expected
Network Switcher
- Switch between different networks
- Ensure all networks load correctly and balances update
Overflow (Edit Account): This is on feat(3481): overflow update #11823
- Tap on account picker and a bottom sheet will appear
- Click on the overflow icon (the vertical more icon) and edit your account just like before

Screenshots/Recordings

Light	Dark

Before

Light	Dark

After

Light	Dark

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.

## **Description** This is NOT being merged into `main` and is being merged into the feature branch of [feat-header-update](https://github.com/MetaMask/metamask-mobile/tree/feat-header-update) Updating the `NetworkPicker` design according to this [Figma](https://www.figma.com/design/aMYisczaJyEsYl1TYdcPUL/Portfolio-View?m=auto&node-id=5019-59597). This is just a component update only and NOT the full header redesign. The prop of `hideNetworkName` is introduced to the component and the default value is `false`. We could potentially just remove that flag altogether and remove the actual network name. Just need confirmation from DS team ## **Related issues** Feature: [#3447](MetaMask/MetaMask-planning#3447) ## **Manual testing steps** 1. Goto wallet home page 2. Goto `app/components/UI/Navbar/index.js` and scroll down to `PickerNetwork` and add prop `hideNetworkName={true}` 3. Or goto storybook ## **Screenshots/Recordings** ### Light Mode | Regular | Hidden | |:---:|:---:| |![light_mode_regular](https://github.com/user-attachments/assets/0a889689-2d2f-4066-ba8b-355736a0228d)|![light_mode_hidden](https://github.com/user-attachments/assets/d0f0bade-9094-4973-bef6-1f4915b04b4d)| ### Dark Mode | Regular | Hidden | |:---:|:---:| |![dark_mode_regular](https://github.com/user-attachments/assets/2a2a1fb3-4004-4715-b3eb-822ad3faf572)|![dark_mode_hidden](https://github.com/user-attachments/assets/efafd673-50a7-4bee-84ba-6553db55528d)| ### Storybook <img src="https://github.com/user-attachments/assets/590d5ce2-4d21-4c09-9e24-edcb7784897c" width="320px" alt="storybook"/> ### **Before** NA ### **After** NA ## **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** - [x] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [x] 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.

## **Description** This is NOT being merged into `main` and is being merged into the feature branch of [feat-header-update](https://github.com/MetaMask/metamask-mobile/tree/feat-header-update) Updating the `AddressCopy` component to be the new design according to this [Figma](https://www.figma.com/design/aMYisczaJyEsYl1TYdcPUL/Portfolio-View?m=auto&node-id=5019-59597). This is just a component update only and NOT the full header redesign. The component has been simplified and there are no other affected screens other than `WalletAccount` component The `WalletAccount` will possibly be removed in this PR as well after some feedback from the @MetaMask/design-system team on what they think. It exists no where else and isn't needed ## **Related issues** Feature: [#3449](MetaMask/MetaMask-planning#3449) ## **Manual testing steps** 1. Goto wallet home page (ignore the fact the wallet action component is missing) ## **Screenshots/Recordings** ![address_copy](https://github.com/user-attachments/assets/64f76cbb-9e09-45a1-bbbd-c0e94ddbdf05) ### **Before** NA ### **After** NA ## **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** - [x] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [x] 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.

github-actions · 2024-10-11T17:51:59Z

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.

…header-update

github-actions · 2024-10-16T01:16:19Z

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: 8a0b55b
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/92e89506-51c2-410c-b3f3-29c4682b0687

Note

You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

Tip

Check the documentation if you have any doubts on how to understand the failure on bitrise

github-actions · 2024-10-16T15:24:21Z

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: bf53cb4
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/348b6ca8-90e4-43c6-8ce0-d55a256e6675

Note

You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

Tip

Check the documentation if you have any doubts on how to understand the failure on bitrise

codecov-commenter · 2024-10-16T15:34:16Z

Codecov Report

Attention: Patch coverage is 70.27027% with 11 lines in your changes missing coverage. Please review.

Project coverage is 54.49%. Comparing base (b0ef1a7) to head (bf53cb4).
Report is 38 commits behind head on main.

Files with missing lines	Patch %	Lines
...nts/UI/AccountSelectorList/AccountSelectorList.tsx	42.85%	3 Missing and 1 partial ⚠️
.../components/List/ListItemSelect/ListItemSelect.tsx	57.14%	2 Missing and 1 partial ⚠️
app/components/Views/Wallet/index.tsx	50.00%	0 Missing and 2 partials ⚠️
app/components/UI/Navbar/index.js	66.66%	1 Missing ⚠️
app/components/hooks/useAccountName.ts	83.33%	0 Missing and 1 partial ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #11763      +/-   ##
==========================================
+ Coverage   54.27%   54.49%   +0.22%     
==========================================
  Files        1711     1737      +26     
  Lines       38712    39269     +557     
  Branches     4738     4866     +128     
==========================================
+ Hits        21010    21401     +391     
- Misses      16253    16378     +125     
- Partials     1449     1490      +41

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

…uest for easier review

…ile into feat-header-update

github-actions · 2024-10-16T18:01:38Z

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: fc63b0a
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/347fdaf6-6f92-4e1e-83ff-d4af77cade57

Note

You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

Tip

Check the documentation if you have any doubts on how to understand the failure on bitrise

github-actions · 2024-10-18T18:57:19Z

Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: 498de87
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/804895b7-d4b4-4c90-a615-36da14a8c78e

Note

You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

app/components/hooks/useAccountName.ts

app/components/UI/Navbar/index.js

…ile into feat-header-update

…header-update

github-actions · 2024-10-18T22:37:49Z

Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: e98d68d
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/18287f10-70d4-48fe-bae7-2549d373ecca

Note

You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

…header-update

app/component-library/components/Pickers/PickerNetwork/PickerNetwork.test.tsx

github-actions · 2024-10-19T21:41:37Z

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: 266c7c9
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/4b9a0036-860f-44bd-a96b-1bd618e8fc7b

Note

You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

Tip

Check the documentation if you have any doubts on how to understand the failure on bitrise

github-actions · 2024-10-21T21:40:18Z

Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: 8b13549
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/124e3172-e210-4a08-be2f-9216404f02e1

Note

You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

…header-update

github-actions · 2024-10-22T18:12:20Z

Bitrise

🔄🔄🔄 pr_smoke_e2e_pipeline started on Bitrise...🔄🔄🔄

Commit hash: 452a6ab
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/58131ed5-9604-440d-8ce7-2941b79eb616

Note

This comment will auto-update when build completes
You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

github-actions · 2024-10-22T18:38:18Z

Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: 93fa100
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/10130901-ab15-492a-82e3-06fb643cad2a

Note

You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

sonarcloud · 2024-10-22T18:48:04Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarCloud

vinnyhoward added 2 commits October 11, 2024 11:50

vinnyhoward added No QA Needed Apply this label when your PR does not need any QA effort. team-wallet-ux labels Oct 11, 2024

update: picker account redesign

7569d35

devin-ai-integration bot added team-ai AI team (for the Devin AI bot) area-qa Relating to QA work (Quality Assurance) labels Oct 11, 2024

vinnyhoward added 4 commits October 15, 2024 18:10

update: move overflow flow

a24bba4

Merge branch 'main' of github.com:MetaMask/metamask-mobile into feat-…

ba929db

…header-update

fix: tests relating to missing mock func

f0082c7

Merge branch 'main' into feat-header-update

8a0b55b

vinnyhoward added Run Smoke E2E Triggers smoke e2e on Bitrise and removed No QA Needed Apply this label when your PR does not need any QA effort. labels Oct 16, 2024

vinnyhoward added Run Smoke E2E Triggers smoke e2e on Bitrise and removed Run Smoke E2E Triggers smoke e2e on Bitrise labels Oct 16, 2024

Merge branch 'main' into feat-header-update

bf53cb4

vinnyhoward added Run Smoke E2E Triggers smoke e2e on Bitrise and removed Run Smoke E2E Triggers smoke e2e on Bitrise labels Oct 16, 2024

vinnyhoward changed the title ~~feat: Header Update~~ feat(3448): header update Oct 16, 2024

vinnyhoward added 2 commits October 16, 2024 11:33

fix: reverting overflow related files in favor of a separate pull req…

971860c

…uest for easier review

Merge branch 'feat-header-update' of github.com:MetaMask/metamask-mob…

fc63b0a

…ile into feat-header-update

vinnyhoward added Run Smoke E2E Triggers smoke e2e on Bitrise and removed Run Smoke E2E Triggers smoke e2e on Bitrise labels Oct 16, 2024

Merge branch 'main' into feat-header-update

65df76f

vinnyhoward removed the Run Smoke E2E Triggers smoke e2e on Bitrise label Oct 17, 2024

vinnyhoward added Run Smoke E2E Triggers smoke e2e on Bitrise and removed Run Smoke E2E Triggers smoke e2e on Bitrise labels Oct 18, 2024

gambinish reviewed Oct 18, 2024

View reviewed changes

app/components/hooks/useAccountName.ts Show resolved Hide resolved

gambinish reviewed Oct 18, 2024

View reviewed changes

app/components/UI/Navbar/index.js Outdated Show resolved Hide resolved

vinnyhoward added 3 commits October 18, 2024 16:33

fix: remove label in picker

6f335f5

Merge branch 'feat-header-update' of github.com:MetaMask/metamask-mob…

31072ee

…ile into feat-header-update

Merge branch 'main' of github.com:MetaMask/metamask-mobile into feat-…

e98d68d

…header-update

vinnyhoward added Run Smoke E2E Triggers smoke e2e on Bitrise and removed Run Smoke E2E Triggers smoke e2e on Bitrise labels Oct 18, 2024

Merge branch 'main' of github.com:MetaMask/metamask-mobile into feat-…

266c7c9

…header-update

gambinish requested changes Oct 18, 2024

View reviewed changes

app/component-library/components/Pickers/PickerNetwork/PickerNetwork.test.tsx Show resolved Hide resolved

app/component-library/components/Pickers/PickerNetwork/PickerNetwork.test.tsx Show resolved Hide resolved

vinnyhoward added Run Smoke E2E Triggers smoke e2e on Bitrise and removed Run Smoke E2E Triggers smoke e2e on Bitrise labels Oct 19, 2024

Merge branch 'main' into feat-header-update

8b13549

vinnyhoward added Run Smoke E2E Triggers smoke e2e on Bitrise and removed Run Smoke E2E Triggers smoke e2e on Bitrise labels Oct 21, 2024

vinnyhoward added 2 commits October 22, 2024 12:00

fix: reverting a style for picker network

354e2d8

Merge branch 'main' of github.com:MetaMask/metamask-mobile into feat-…

452a6ab

…header-update

vinnyhoward added Run Smoke E2E Triggers smoke e2e on Bitrise and removed Run Smoke E2E Triggers smoke e2e on Bitrise labels Oct 22, 2024

fix: added tests for new hook, updated tests ofr picker network

93fa100

vinnyhoward added Run Smoke E2E Triggers smoke e2e on Bitrise and removed Run Smoke E2E Triggers smoke e2e on Bitrise labels Oct 22, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(3448): header update #11763

feat(3448): header update #11763

vinnyhoward commented Oct 11, 2024 •

edited by gambinish

Loading

github-actions bot commented Oct 11, 2024

github-actions bot commented Oct 16, 2024 •

edited by metamaskbot

Loading

github-actions bot commented Oct 16, 2024 •

edited by metamaskbot

Loading

codecov-commenter commented Oct 16, 2024

github-actions bot commented Oct 16, 2024 •

edited by metamaskbot

Loading

github-actions bot commented Oct 18, 2024 •

edited by metamaskbot

Loading

github-actions bot commented Oct 18, 2024 •

edited by metamaskbot

Loading

github-actions bot commented Oct 19, 2024 •

edited by metamaskbot

Loading

github-actions bot commented Oct 21, 2024 •

edited by metamaskbot

Loading

github-actions bot commented Oct 22, 2024

github-actions bot commented Oct 22, 2024 •

edited by metamaskbot

Loading

sonarcloud bot commented Oct 22, 2024

feat(3448): header update #11763

Are you sure you want to change the base?

feat(3448): header update #11763

Conversation

vinnyhoward commented Oct 11, 2024 • edited by gambinish Loading

Description

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

github-actions bot commented Oct 11, 2024

github-actions bot commented Oct 16, 2024 • edited by metamaskbot Loading

Bitrise

github-actions bot commented Oct 16, 2024 • edited by metamaskbot Loading

Bitrise

codecov-commenter commented Oct 16, 2024

Codecov Report

github-actions bot commented Oct 16, 2024 • edited by metamaskbot Loading

Bitrise

github-actions bot commented Oct 18, 2024 • edited by metamaskbot Loading

Bitrise

github-actions bot commented Oct 18, 2024 • edited by metamaskbot Loading

Bitrise

github-actions bot commented Oct 19, 2024 • edited by metamaskbot Loading

Bitrise

github-actions bot commented Oct 21, 2024 • edited by metamaskbot Loading

Bitrise

github-actions bot commented Oct 22, 2024

Bitrise

github-actions bot commented Oct 22, 2024 • edited by metamaskbot Loading

Bitrise

sonarcloud bot commented Oct 22, 2024

Quality Gate passed

vinnyhoward commented Oct 11, 2024 •

edited by gambinish

Loading

github-actions bot commented Oct 16, 2024 •

edited by metamaskbot

Loading

github-actions bot commented Oct 16, 2024 •

edited by metamaskbot

Loading

github-actions bot commented Oct 16, 2024 •

edited by metamaskbot

Loading

github-actions bot commented Oct 18, 2024 •

edited by metamaskbot

Loading

github-actions bot commented Oct 18, 2024 •

edited by metamaskbot

Loading

github-actions bot commented Oct 19, 2024 •

edited by metamaskbot

Loading

github-actions bot commented Oct 21, 2024 •

edited by metamaskbot

Loading

github-actions bot commented Oct 22, 2024 •

edited by metamaskbot

Loading