metamask-extension
metamask-extension copied to clipboard
MetaMask
New token details page
Description
Initial implementation of the new token details page. Introduces a chart.js dependency for graphing asset prices.
Related issues
Figma: https://www.figma.com/file/TfVzSMJA8KwpWX8TTWQ2iO/MMASSETS-15%3A-Asset-list-and-details?node-id=1719%3A48736&mode=dev
Manual testing steps
TODO
Screenshots/Recordings
Before
After
https://github.com/MetaMask/metamask-extension/assets/3500406/7c865444-d56c-4075-976a-b87783a613c7
Pre-merge author checklist
- [ ] I’ve followed MetaMask Coding Standards.
- [ ] I've clearly explained what problem this PR is solving and how it is solved.
- [ ] I've linked related issues
- [ ] I've included manual testing steps
- [ ] I've included screenshots/recordings if applicable
- [ ] 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.
- [ ] I’ve properly set the pull request status:
- [ ] In case it's not yet "ready for review", I've set it to "draft".
- [ ] In case it's "ready for review", I've changed it from "draft" to "non-draft".
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.
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.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Builds ready [d2e4fb0]
- builds: chrome, firefox
- builds (beta): chrome
- builds (flask): chrome, firefox
- builds (MMI): chrome, firefox
- builds (test): chrome, firefox
- builds (test-flask): chrome, firefox
- build viz: Build System
- mv3: Background Module Init Stats
- mv3: UI Init Stats
- mv3: Module Load Stats
- mv3: Bundle Size Stats
- mv2: E2e Actions Stats
- code coverage: Report
- storybook: Storybook
- typescript migration: Dashboard
- all artifacts
Page Load Metrics (1172 ± 95 ms)
| Platform | Page | Metric | Min (ms) | Max (ms) | Average (ms) | StandardDeviation (ms) | MarginOfError (ms) |
|---|---|---|---|---|---|---|---|
| Chrome | Home | firstPaint | 85 | 272 | 137 | 61 | 29 |
| domContentLoaded | 9 | 179 | 48 | 62 | 30 | ||
| load | 810 | 1578 | 1172 | 198 | 95 | ||
| domInteractive | 9 | 179 | 48 | 62 | 30 |
Bundle size diffs [🚨 Warning! Bundle size has increased!]
- background: 0 Bytes (0.00%)
- ui: 14 Bytes (0.00%)
- common: 1.1 KiB (0.02%)
New dependencies detected. Learn more about Socket for GitHub ↗︎
| Package | New capabilities | Transitives | Size | Publisher |
|---|---|---|---|---|
| npm/@kurkle/[email protected] | None | 0 |
79.2 kB | kurkle |
| npm/[email protected] | None | +1 |
5.01 MB | chartjs-ci |
| npm/[email protected] | Transitive: environment | +8 |
5.48 MB | dangreen |
![socket-security[bot] avatar](https://avatars.githubusercontent.com/in/156372?v=4 "Published by a pub.dev verified publisher"){kind=small}
👍 Dependency issues cleared. Learn more about Socket for GitHub ↗︎
This PR previously contained dependency changes with security issues that have been resolved, removed, or ignored.
First of all, I cannot tell you how awesome this is. Soooooo good!
A few suggestions:
Title
I think we should add a title here. Maybe "All Tokens" next to the "<" or something to that effect?
Fullscreen Button Overlap
There's a weird overlap in the buttons in full screen. Maybe add excess padding to the content when in fullscreen view?
A few suggestions:
New fullscreen look after design feedback.
The header does fill with your balance, if you scroll far enough to hide the main balance section:
But I will see what design thinks about the emptiness when balance is not shown.
Builds ready [4c55af7]
- builds: chrome, firefox
- builds (beta): chrome
- builds (flask): chrome, firefox
- builds (MMI): chrome, firefox
- builds (test): chrome, firefox
- builds (test-flask): chrome, firefox
- build viz: Build System
- mv3: Background Module Init Stats
- mv3: UI Init Stats
- mv3: Module Load Stats
- mv3: Bundle Size Stats
- mv2: E2e Actions Stats
- code coverage: Report
- storybook: Storybook
- typescript migration: Dashboard
- all artifacts
Page Load Metrics (1092 ± 395 ms)
| Platform | Page | Metric | Min (ms) | Max (ms) | Average (ms) | StandardDeviation (ms) | MarginOfError (ms) |
|---|---|---|---|---|---|---|---|
| Chrome | Home | firstPaint | 72 | 365 | 131 | 65 | 31 |
| domContentLoaded | 10 | 93 | 35 | 27 | 13 | ||
| load | 62 | 1990 | 1092 | 823 | 395 | ||
| domInteractive | 10 | 93 | 35 | 27 | 13 |
Bundle size diffs [🚨 Warning! Bundle size has increased!]
- background: 715 Bytes (0.02%)
- ui: 276.09 KiB (3.89%)
- common: 1.14 KiB (0.02%)
Codecov Report
Attention: Patch coverage is 9.35673% with 310 lines in your changes are missing coverage. Please review.
Project coverage is 68.27%. Comparing base (
9671603) to head (7f470eb).
Additional details and impacted files
@@ Coverage Diff @@
## develop #22508 +/- ##
===========================================
- Coverage 68.74% 68.27% -0.46%
===========================================
Files 1128 1141 +13
Lines 43544 43873 +329
Branches 11643 11765 +122
===========================================
+ Hits 29930 29954 +24
- Misses 13614 13919 +305
:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.
![codecov[bot] avatar](https://avatars.githubusercontent.com/in/254?v=4 "Published by a pub.dev verified publisher"){kind=small}