metamask-extension
metamask-extension copied to clipboard
Review spending cap screen
Explanation
Created a new screen - 'Review Spending Cap' screen.
More Information
- Fixes #15220
Screenshots/Screencaps
Before
https://user-images.githubusercontent.com/92310504/191487193-b08b626c-0b3f-4f82-a055-eebb54828e08.mov
After
https://user-images.githubusercontent.com/92310504/191487280-373e2ae3-141e-4bc1-89e5-fe66f83292d9.mov
Manual Testing Steps
BEFORE TESTING - in your .metamaskrc
file, set TOKEN_ALLOWANCE_IMPROVEMENTS=1
and then start the app
- Open the Test Dapp: https://metamask.github.io/test-dapp/
- Under the section
Send Tokens
click onCREATE TOKEN
- Wait for the token to be created and then, under the same section, click on
APPROVE TOKENS
orAPPROVE TOKENS WITHOUT GAS
in order to see the newly created screen
To see how the screen looks like when the enhanced gas fee is enabled, go to Settings (Experimental tab)
and enable it (Enable enhanced gas fee UI
toggle).
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.
Builds ready [e49ab08]
- builds: chrome, firefox, opera
- builds (beta): chrome, firefox, opera
- builds (flask): chrome, firefox, opera
- 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 (1437 ± 89 ms)
Platform | Page | Metric | Min (ms) | Max (ms) | Average (ms) | StandardDeviation (ms) | MarginOfError (ms) |
---|---|---|---|---|---|---|---|
Chrome | Home | firstPaint | 88 | 1579 | 260 | 416 | 200 |
domContentLoaded | 1169 | 1823 | 1422 | 191 | 92 | ||
load | 1169 | 1855 | 1437 | 186 | 89 | ||
domInteractive | 1169 | 1823 | 1422 | 191 | 92 |
highlights:
storybook
- ui/components/app/metamask-translation/metamask-translation.stories.js
- ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.stories.js
- ui/pages/confirm-approve/confirm-approve.stories.js
- ui/pages/confirm-import-token/confirm-import-token.stories.js
- ui/pages/confirm-token-transaction-base/confirm-token-transaction-base.stories.js
Builds ready [d90bade]
- builds: chrome, firefox, opera
- builds (beta): chrome, firefox, opera
- builds (flask): chrome, firefox, opera
- 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 (2179 ± 77 ms)
Platform | Page | Metric | Min (ms) | Max (ms) | Average (ms) | StandardDeviation (ms) | MarginOfError (ms) |
---|---|---|---|---|---|---|---|
Chrome | Home | firstPaint | 94 | 1887 | 197 | 388 | 186 |
domContentLoaded | 1841 | 2458 | 2160 | 160 | 77 | ||
load | 1841 | 2458 | 2179 | 161 | 77 | ||
domInteractive | 1841 | 2458 | 2160 | 160 | 77 |
highlights:
storybook
- ui/components/app/metamask-translation/metamask-translation.stories.js
- ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.stories.js
- ui/pages/confirm-approve/confirm-approve.stories.js
- ui/pages/confirm-import-token/confirm-import-token.stories.js
- ui/pages/confirm-token-transaction-base/confirm-token-transaction-base.stories.js
Builds ready [4d8ce74]
- builds: chrome, firefox, opera
- builds (beta): chrome, firefox, opera
- builds (flask): chrome, firefox, opera
- 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 (2650 ± 191 ms)
Platform | Page | Metric | Min (ms) | Max (ms) | Average (ms) | StandardDeviation (ms) | MarginOfError (ms) |
---|---|---|---|---|---|---|---|
Chrome | Home | firstPaint | 98 | 3130 | 456 | 887 | 426 |
domContentLoaded | 2079 | 3178 | 2641 | 407 | 195 | ||
load | 2100 | 3196 | 2650 | 398 | 191 | ||
domInteractive | 2079 | 3178 | 2641 | 407 | 195 |
highlights:
storybook
- ui/components/app/metamask-translation/metamask-translation.stories.js
- ui/components/app/modals/contract-details-modal/contract-details-modal.stories.js
- ui/components/ui/contract-token-values/contract-token-values.stories.js
- ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.stories.js
- ui/pages/confirm-approve/confirm-approve.stories.js
- ui/pages/confirm-import-token/confirm-import-token.stories.js
- ui/pages/confirm-token-transaction-base/confirm-token-transaction-base.stories.js
Verified by QA
Builds ready [d588c5e]
- builds: chrome, firefox, opera
- builds (beta): chrome, firefox, opera
- builds (flask): chrome, firefox, opera
- 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 (2540 ± 110 ms)
Platform | Page | Metric | Min (ms) | Max (ms) | Average (ms) | StandardDeviation (ms) | MarginOfError (ms) |
---|---|---|---|---|---|---|---|
Chrome | Home | firstPaint | 91 | 152 | 119 | 17 | 8 |
domContentLoaded | 2215 | 2955 | 2519 | 224 | 107 | ||
load | 2215 | 2982 | 2540 | 230 | 110 | ||
domInteractive | 2215 | 2955 | 2519 | 224 | 107 |
highlights:
storybook
- ui/components/app/metamask-translation/metamask-translation.stories.js
- ui/components/app/modals/contract-details-modal/contract-details-modal.stories.js
- ui/components/ui/contract-token-values/contract-token-values.stories.js
- ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.stories.js
- ui/pages/confirm-approve/confirm-approve.stories.js
- ui/pages/confirm-import-token/confirm-import-token.stories.js
- ui/pages/confirm-token-transaction-base/confirm-token-transaction-base.stories.js
Builds ready [6c593ba]
- builds: chrome, firefox, opera
- builds (beta): chrome, firefox, opera
- builds (flask): chrome, firefox, opera
- 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 (2481 ± 209 ms)
Platform | Page | Metric | Min (ms) | Max (ms) | Average (ms) | StandardDeviation (ms) | MarginOfError (ms) |
---|---|---|---|---|---|---|---|
Chrome | Home | firstPaint | 88 | 214 | 132 | 31 | 15 |
domContentLoaded | 1864 | 3553 | 2460 | 434 | 208 | ||
load | 1937 | 3553 | 2481 | 435 | 209 | ||
domInteractive | 1864 | 3553 | 2460 | 434 | 208 |
highlights:
storybook
- ui/components/app/metamask-translation/metamask-translation.stories.js
- ui/components/app/modals/contract-details-modal/contract-details-modal.stories.js
- ui/components/ui/contract-token-values/contract-token-values.stories.js
- ui/components/ui/review-spending-cap/review-spending-cap.stories.js
- ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.stories.js
- ui/pages/confirm-approve/confirm-approve.stories.js
- ui/pages/confirm-import-token/confirm-import-token.stories.js
- ui/pages/confirm-token-transaction-base/confirm-token-transaction-base.stories.js
Hey @georgewrmarshall! Good catch! :raised_hands:
I fixed everything you mentioned except two things that I suppose were there before.
I am not sure why on your computer it opens up the app in the full-screen view. You can check the attached video and see that on my computer it works fine. Also, I would like to mention that one of my colleagues has the same issue as you in different scenarios. He firstly saw this issue before this PR was created.
Regarding the opening link in a new tab from the full-screen view, you can also check it from the attached video. There you can see that this issue is existing and was there before. I suppose it can be fixed somehow by changing the Button
component that is being used throughout the app.
https://user-images.githubusercontent.com/92310504/193084350-0f102626-15ab-43b4-9c25-b06786685518.mov
Builds ready [6ce3438]
- builds: chrome, firefox, opera
- builds (beta): chrome, firefox, opera
- builds (flask): chrome, firefox, opera
- 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 (2359 ± 128 ms)
Platform | Page | Metric | Min (ms) | Max (ms) | Average (ms) | StandardDeviation (ms) | MarginOfError (ms) |
---|---|---|---|---|---|---|---|
Chrome | Home | firstPaint | 91 | 2410 | 252 | 498 | 239 |
domContentLoaded | 1932 | 2910 | 2352 | 260 | 125 | ||
load | 1932 | 2926 | 2359 | 267 | 128 | ||
domInteractive | 1932 | 2910 | 2352 | 260 | 125 |
highlights:
storybook
- ui/components/app/metamask-translation/metamask-translation.stories.js
- ui/components/app/modals/contract-details-modal/contract-details-modal.stories.js
- ui/components/ui/contract-token-values/contract-token-values.stories.js
- ui/components/ui/review-spending-cap/review-spending-cap.stories.js
- ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.stories.js
- ui/pages/confirm-approve/confirm-approve.stories.js
- ui/pages/confirm-import-token/confirm-import-token.stories.js
- ui/pages/confirm-token-transaction-base/confirm-token-transaction-base.stories.js
- ui/pages/token-allowance/token-allowance.stories.js
Builds ready [984fdfb]
- builds: chrome, firefox, opera
- builds (beta): chrome, firefox, opera
- builds (flask): chrome, firefox, opera
- 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 (2225 ± 71 ms)
Platform | Page | Metric | Min (ms) | Max (ms) | Average (ms) | StandardDeviation (ms) | MarginOfError (ms) |
---|---|---|---|---|---|---|---|
Chrome | Home | firstPaint | 86 | 139 | 104 | 14 | 6 |
domContentLoaded | 1941 | 2524 | 2196 | 140 | 67 | ||
load | 2004 | 2643 | 2225 | 149 | 71 | ||
domInteractive | 1941 | 2524 | 2196 | 140 | 67 |
highlights:
storybook
- ui/components/app/metamask-translation/metamask-translation.stories.js
- ui/components/app/modals/contract-details-modal/contract-details-modal.stories.js
- ui/components/ui/contract-token-values/contract-token-values.stories.js
- ui/components/ui/review-spending-cap/review-spending-cap.stories.js
- ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.stories.js
- ui/pages/confirm-approve/confirm-approve.stories.js
- ui/pages/confirm-import-token/confirm-import-token.stories.js
- ui/pages/confirm-token-transaction-base/confirm-token-transaction-base.stories.js
- ui/pages/token-allowance/token-allowance.stories.js
It would be nice to have stories for approve content card now, but not a blocker.
I'll then add the missing storybook in the following PR where this token allowance improvements feature
will be fully completed.
Builds ready [7382be0]
- builds: chrome, firefox, opera
- builds (beta): chrome, firefox, opera
- builds (flask): chrome, firefox, opera
- 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 (2210 ± 72 ms)
Platform | Page | Metric | Min (ms) | Max (ms) | Average (ms) | StandardDeviation (ms) | MarginOfError (ms) |
---|---|---|---|---|---|---|---|
Chrome | Home | firstPaint | 89 | 138 | 105 | 13 | 6 |
domContentLoaded | 1899 | 2507 | 2197 | 141 | 68 | ||
load | 1899 | 2594 | 2210 | 151 | 72 | ||
domInteractive | 1899 | 2507 | 2197 | 141 | 68 |
highlights:
storybook
- ui/components/app/metamask-translation/metamask-translation.stories.js
- ui/components/app/modals/contract-details-modal/contract-details-modal.stories.js
- ui/components/ui/contract-token-values/contract-token-values.stories.js
- ui/components/ui/review-spending-cap/review-spending-cap.stories.js
- ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.stories.js
- ui/pages/confirm-approve/confirm-approve.stories.js
- ui/pages/confirm-import-token/confirm-import-token.stories.js
- ui/pages/confirm-token-transaction-base/confirm-token-transaction-base.stories.js
- ui/pages/token-allowance/token-allowance.stories.js