metamask-extension icon indicating copy to clipboard operation
metamask-extension copied to clipboard

Published 20 hours ago • verified publisher icon MetaMask

Create "Review/Revoke Spending Cap" screen

Open hilvmason opened this issue 2 years ago • 5 comments

Create new screen --> "Review Spending Cap" screen Screen Shot 2022-07-13 at 16 05 51

Resources

Figma Design file

Acceptance Criteria

  1. The "Verify contract details" link is added to both token allowances screens (a.k.a Set spending cap & Review spending cap) Screen Shot 2022-07-13 at 16.25.46.png

  2. Clicking on the link opens the Contract details modal Screen Shot 2022-07-13 at 15 52 23

  3. On the second token allowance screen (a.k.a. "Review the spending cap"), the navigation header should have a < Back button on the left side and display 2 of 2 on the right side (2nd screenshot). Screen Shot 2022-07-13 at 14 30 06

hilvmason avatar Jul 13 '22 15:07 hilvmason

Acceptance Criteria

  • Create new screen --> "Review/Revoke Spending Cap" screen according to the figma design. image

  • Screen is opened in two ways

  1. By clicking the Next button on the "Set spending cap" screen, issue: https://github.com/MetaMask/metamask-extension/issues/15211
  2. When the dapp send 0 allowance amount
  • The screen consist of following elements as shown on the picture below. image

Note

Rename "Cancel" button to "Reject" (differ from design)

  1. Navigation header: "< Back button" on the left side and display "2 of 2" on the right side
  2. Network + account + balance header component - issue: https://github.com/MetaMask/metamask-extension/issues/15222
  3. Pill component with new design - issue: https://github.com/MetaMask/metamask-extension/issues/15213
  4. Title: should be:
  • "Review the spending cap for your" - when the amount is greater than 0
  • "Revoke the spending cap for your" - when the amount is equal to 0
  1. New token component - issue: https://github.com/MetaMask/metamask-extension/issues/15215
  2. Clicking on the "Verify contract details" link opens the "Contract details modal" - issue: https://github.com/MetaMask/metamask-extension/issues/15226
  3. Review spending cap component - issue: https://github.com/MetaMask/metamask-extension/issues/15212. Click on the Edit button will show the screen 1 of 2 (a.k.a "Set spending cap", issue: https://github.com/MetaMask/metamask-extension/issues/15211)
  4. Estimated fee data and Fee details option - as has been implemented in the current Token allowance version
  5. Transaction details option - as has been implemented in the current Token allowance version
  6. Command buttons - Cancel/Reject and Approve buttons. Cancel/Reject button will close the screen as has been implemented in the current version - "Reject" button. Approve button will approve spending cap limit as as has been implemented in the current version - "Confirm" button. Current version screenshot is below. image

EHaracic avatar Jul 27 '22 11:07 EHaracic

Only comment on the above AC: let's continue to use "Reject" as the copy for the reject/cancel button. No changes needed there.

bschorchit avatar Jul 28 '22 11:07 bschorchit

Removing the blocked label as well required PRs have been merged already

bschorchit avatar Sep 05 '22 22:09 bschorchit

As agreed with @danjm and @bschorchit, the old gas component will be used. View full transaction details button from the gas component will be removed and by clicking on the View details button (new design) data will be shown (without the granted one, as it is being shown on the contract details modal). @bschorchit needs to check whether the old design will be used for the gas component when the enhanced gas fee is enabled or some new design.

filipsekulic avatar Sep 19 '22 12:09 filipsekulic

Sounds good! We should also use the existing old design for the gas component when enhanced gas fee is enabled.

bschorchit avatar Sep 20 '22 20:09 bschorchit