Skip to content

refactor: app header#25143

Merged
montelaidev merged 13 commits intodevelopfrom
refactor/app-header
Jun 12, 2024
Merged

refactor: app header#25143
montelaidev merged 13 commits intodevelopfrom
refactor/app-header

Conversation

@montelaidev
Copy link
Copy Markdown
Contributor

@montelaidev montelaidev commented Jun 7, 2024

Description

This PR refactors the app header into smaller components and adds multichain selectors.

Related issues

Related to https://github.com/MetaMask/accounts-planning/issues/425

Manual testing steps

  1. Create several accounts
  2. Check that the wallet view, header, and account list UI/UX has no regressions

Screenshots/Recordings

Just an UI/UX components refactor. No 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.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Jun 7, 2024

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.

@montelaidev montelaidev self-assigned this Jun 7, 2024
@montelaidev montelaidev added the team-accounts-framework Accounts team label Jun 7, 2024
@montelaidev montelaidev marked this pull request as ready for review June 7, 2024 14:45
@montelaidev montelaidev requested a review from a team as a code owner June 7, 2024 14:45
@codecov
Copy link
Copy Markdown

codecov bot commented Jun 7, 2024

Codecov Report

Attention: Patch coverage is 50.54945% with 45 lines in your changes missing coverage. Please review.

Project coverage is 65.64%. Comparing base (9a5aeae) to head (594ba76).

Files Patch % Lines
...tichain/app-header/app-header-unlocked-content.tsx 47.27% 29 Missing ⚠️
...ultichain/app-header/app-header-locked-content.tsx 7.14% 13 Missing ⚠️
...ted-status-indicator/connected-status-indicator.js 0.00% 1 Missing ⚠️
...nts/multichain/app-header/app-header-container.tsx 85.71% 1 Missing ⚠️
ui/components/multichain/app-header/app-header.js 90.00% 1 Missing ⚠️
Additional details and impacted files
@@             Coverage Diff             @@
##           develop   #25143      +/-   ##
===========================================
- Coverage    65.64%   65.64%   -0.00%     
===========================================
  Files         1367     1370       +3     
  Lines        54257    54281      +24     
  Branches     14189    14199      +10     
===========================================
+ Hits         35616    35630      +14     
- Misses       18641    18651      +10     

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

@metamaskbot
Copy link
Copy Markdown
Collaborator

Builds ready [03c423c]
Page Load Metrics (129 ± 148 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint7412688136
domContentLoaded10201221
load441467129307148
domInteractive10201221
Bundle size diffs
  • background: 0 Bytes (0.00%)
  • ui: 9.25 KiB (0.14%)
  • common: 0 Bytes (0.00%)

@montelaidev montelaidev force-pushed the refactor/app-header branch from 03c423c to e4e9424 Compare June 11, 2024 12:48
gantunesr
gantunesr previously approved these changes Jun 11, 2024
@metamaskbot
Copy link
Copy Markdown
Collaborator

Builds ready [594ba76]
Page Load Metrics (305 ± 393 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint69187942914
domContentLoaded106715136
load433560305817393
domInteractive106715136
Bundle size diffs
  • background: 0 Bytes (0.00%)
  • ui: 9.2 KiB (0.13%)
  • common: 0 Bytes (0.00%)

Copy link
Copy Markdown
Contributor

@ccharly ccharly left a comment

Choose a reason for hiding this comment

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

LGTM, I strongly rely on the snapshots being the same as the original AppHeader here.

One small note (that could be addressed in another PR), since this PR moves from .js to .ts, some new typing issues arise, and we repeat this pattern a lot: field={currentNetwork?.field ?? ''

So it would be great if we could rewrite those in a more DRY way like:

const currentNetworkNickname = currentNetwork?.nickname ?? '';

<Component
  label={currentNetworkNickname}
/>

@montelaidev montelaidev merged commit 3595052 into develop Jun 12, 2024
@montelaidev montelaidev deleted the refactor/app-header branch June 12, 2024 13:35
@github-actions github-actions bot locked and limited conversation to collaborators Jun 12, 2024
@metamaskbot metamaskbot added the release-12.1.0 Issue or pull request that will be included in release 12.1.0 label Jun 12, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

release-12.1.0 Issue or pull request that will be included in release 12.1.0 team-accounts-framework Accounts team

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants