metamask-extension
metamask-extension copied to clipboard
feat: add token autodetect modal
Description
Add in recommended auto token enablement button in new Extension app update, once we enable auto token detection by default for new users, for existing users, we need to get them to turn on auto token detection as well.
Related issues
Fixes:
Manual testing steps
- you are an existing user and you have token autodetection off
- once the upgrade will be done , you should see the modal below right after what's new pop up
- if you have it of and you decide to disable , you should see the pop up once
Screenshots/Recordings
Before
No Modal was displayed
After
Existing users with toggle off
https://github.com/MetaMask/metamask-extension/assets/26223211/2ff49f38-e652-4287-9b0a-a7092b8a1812
Users with toggle on and want to disable it ( the modal should be displayed once )
https://github.com/MetaMask/metamask-extension/assets/26223211/4438312f-cbb3-47f1-bc80-d1158b73e66a
Pre-merge author checklist
- [x] I’ve followed MetaMask Coding Standards.
- [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 format if applicable
- [x] 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.
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.
Codecov Report
Attention: Patch coverage is 46.96970%
with 35 lines
in your changes are missing coverage. Please review.
Project coverage is 65.76%. Comparing base (
5f22357
) to head (283fd03
).
Additional details and impacted files
@@ Coverage Diff @@
## develop #24281 +/- ##
===========================================
- Coverage 65.79% 65.76% -0.02%
===========================================
Files 1364 1366 +2
Lines 54315 54385 +70
Branches 14126 14139 +13
===========================================
+ Hits 35732 35766 +34
- Misses 18583 18619 +36
:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.
Builds ready [85398c5]
- 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 (581 ± 501 ms)
Platform | Page | Metric | Min (ms) | Max (ms) | Average (ms) | StandardDeviation (ms) | MarginOfError (ms) |
---|---|---|---|---|---|---|---|
Chrome | Home | firstPaint | 60 | 161 | 82 | 26 | 12 |
domContentLoaded | 8 | 60 | 13 | 11 | 5 | ||
load | 47 | 2701 | 581 | 1043 | 501 | ||
domInteractive | 8 | 60 | 13 | 11 | 5 |
Bundle size diffs [🚨 Warning! Bundle size has increased!]
- background: 30 Bytes (0.00%)
- ui: 4.94 KiB (0.08%)
- common: 1.64 KiB (0.03%)
I haven't been able to get this modal to appear yet. Maybe my process is wrong, and not sufficient to simulate the upgrade.
I imported a fresh build from develop
and disabled token autodetect. Then I changed to a build of this branch. But it doesn't show the modal because this is undefined
instead of null
:
I haven't been able to get this modal to appear yet. Maybe my process is wrong, and not sufficient to simulate the upgrade.
I imported a fresh build from
develop
and disabled token autodetect. Then I changed to a build of this branch. But it doesn't show the modal because this isundefined
instead ofnull
:![]()
Hey @bergeron ,
It seems there's an issue with the process you're following. The modal in question is designed to show up exclusively during the onboarding/upgrade process, and it will only do so after a fresh installation of the app.
if you're doing the fresh app using develop branch, you'll not see the modal.
To replicate the issue, there are two methods. The first method applies to users who have the auto-detection feature turned off by default:
- In the
preferences.js
file, set the state to false (this simulates users who have token auto-detection disabled by default). - Build and import your app using the auto-detect-token-modal branch.
- Import your account.
- You should see the modal appear right after the transaction simulation (refer to the linked video for clarity).
https://github.com/MetaMask/metamask-extension/assets/26223211/b242c243-a5c6-40e2-b293-536576d0720d
The second method is for users who had auto-detection enabled by default upon installing the app:
- Install your app from the build using the auto-detect-token-modal branch.
- Navigate to settings and turn off token auto-detection.
- Return to the wallet view, and the modal should appear.
- For this scenario, please refer to the provided video for more details.
https://github.com/MetaMask/metamask-extension/assets/26223211/f9129b17-a2db-4471-a8d9-4154117dd147
Let me know if you need any further information or clarification.
Builds ready [73b61f5]
- 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 (1353 ± 684 ms)
Platform | Page | Metric | Min (ms) | Max (ms) | Average (ms) | StandardDeviation (ms) | MarginOfError (ms) |
---|---|---|---|---|---|---|---|
Chrome | Home | firstPaint | 73 | 160 | 97 | 25 | 12 |
domContentLoaded | 10 | 86 | 18 | 17 | 8 | ||
load | 59 | 3454 | 1353 | 1424 | 684 | ||
domInteractive | 10 | 86 | 18 | 17 | 8 |
Bundle size diffs [🚨 Warning! Bundle size has increased!]
- background: 30 Bytes (0.00%)
- ui: 4.94 KiB (0.08%)
- common: 1.68 KiB (0.03%)
Builds ready [30b2041]
- 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 (782 ± 531 ms)
Platform | Page | Metric | Min (ms) | Max (ms) | Average (ms) | StandardDeviation (ms) | MarginOfError (ms) |
---|---|---|---|---|---|---|---|
Chrome | Home | firstPaint | 66 | 247 | 102 | 42 | 20 |
domContentLoaded | 9 | 22 | 12 | 3 | 2 | ||
load | 51 | 3176 | 782 | 1105 | 531 | ||
domInteractive | 9 | 22 | 12 | 3 | 2 |
Bundle size diffs [🚨 Warning! Bundle size has increased!]
- background: 30 Bytes (0.00%)
- ui: 4.94 KiB (0.07%)
- common: 1.68 KiB (0.03%)
Builds ready [8dfc4b7]
- 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 (653 ± 480 ms)
Platform | Page | Metric | Min (ms) | Max (ms) | Average (ms) | StandardDeviation (ms) | MarginOfError (ms) |
---|---|---|---|---|---|---|---|
Chrome | Home | firstPaint | 77 | 139 | 96 | 19 | 9 |
domContentLoaded | 8 | 42 | 13 | 9 | 4 | ||
load | 65 | 2549 | 653 | 1000 | 480 | ||
domInteractive | 8 | 42 | 13 | 9 | 4 |
Bundle size diffs [🚨 Warning! Bundle size has increased!]
- background: 58 Bytes (0.00%)
- ui: 4.93 KiB (0.07%)
- common: 1.68 KiB (0.03%)
I ve tested the upgrade scenario and the fresh import, the modal was displayed correctly, thnx 🙏
Builds ready [283fd03]
- 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 (66 ± 8 ms)
Platform | Page | Metric | Min (ms) | Max (ms) | Average (ms) | StandardDeviation (ms) | MarginOfError (ms) |
---|---|---|---|---|---|---|---|
Chrome | Home | firstPaint | 80 | 127 | 98 | 12 | 6 |
domContentLoaded | 11 | 24 | 13 | 3 | 1 | ||
load | 48 | 109 | 66 | 16 | 8 | ||
domInteractive | 11 | 23 | 13 | 3 | 1 |