metamask-extension icon indicating copy to clipboard operation
metamask-extension copied to clipboard
verified publisher icon MetaMask

feat: Add Confirm ScrollToBottom component and update ConfirmPage

Open digiwand opened this issue 2 years ago • 8 comments

Description

Fixes: https://github.com/MetaMask/metamask-extension/issues/21285

Creates a ScrollToBottom component for the ConfirmPage which reuses the ScrollToBottom hook

Features:

  • button only appears when the content is scrollable
  • button click scrolls to the bottom
  • button disappears when the user reaches the bottom
  • sets currentConfirmation.isScrollToBottomNeeded to be shared through the redux store

ScrollToBottom hook Updates:

  • add hasScrolledToBottom state while keeping isScrolledToBottom state allowing us to integrate the ability for the button to reappear after it disappears
  • add smooth scrolling

Additional Updates:

  • updates ConfirmPage to use the multichain Page component
  • new isScrollToBottomNeeded prop on Confirmation type
  • updates confirm reducer to accept object with only updated props rather than full CurrentConfirmation object

For confirmation page only, overrides ButtonIcon hover styles as hover styles have an outstanding issue with our Design System components. Currently, the hover style incorporates the opacity with the color which causes issues. (ref: https://github.com/MetaMask/metamask-extension/pull/19976/files)

[!NOTE]
no behavioral changes have been made to the other instances that use the ScrollToBottom hook except they will not use smooth scroll rather than instant scroll

Manual testing steps

  1. open storybook yarn storybook
  2. see http://localhost:6006/?path=/docs/components-app-confirm-scrolltobottom--docs

Screenshots/Recordings

Screenshot 2024-02-07 at 3 49 44 PM

confirm-scrolltobottom

Screenshot 2024-01-12 at 3 18 03 AM

https://github.com/MetaMask/metamask-extension/assets/20778143/9574cc8b-e9cb-4c26-a7d4-cd9f86dfd72c

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.

digiwand avatar Dec 19 '23 22:12 digiwand

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 Dec 19 '23 22:12 github-actions[bot]

Codecov Report

Attention: Patch coverage is 85.00000% with 3 lines in your changes are missing coverage. Please review.

Project coverage is 68.73%. Comparing base (6e397d0) to head (3eadb3e). Report is 2 commits behind head on develop.

:exclamation: Current head 3eadb3e differs from pull request most recent head cb799fc. Consider uploading reports for the commit cb799fc to get more accurate results

Files Patch % Lines
ui/hooks/useScrollRequired.js 66.67% 2 Missing :warning:
ui/ducks/confirm/confirm.ts 66.67% 1 Missing :warning:
Additional details and impacted files 
@@             Coverage Diff             @@
##           develop   #22349      +/-   ##
===========================================
+ Coverage    68.72%   68.73%   +0.01%     
===========================================
  Files         1124     1125       +1     
  Lines        43606    43621      +15     
  Branches     11669    11674       +5     
===========================================
+ Hits         29967    29981      +14     
- Misses       13639    13640       +1

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

codecov[bot] avatar Jan 18 '24 15:01 codecov[bot]

Builds ready [1e75af6]
Page Load Metrics (1262 ± 118 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint893021928240
domContentLoaded8205828038
load89417391262246118
domInteractive8205828038
Bundle size diffs
  • background: 0 Bytes (0.00%)
  • ui: 88 Bytes (0.00%)
  • common: 0 Bytes (0.00%)

metamaskbot avatar Jan 22 '24 20:01 metamaskbot

Builds ready [c396e97]
Page Load Metrics (768 ± 34 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint88138107136
domContentLoaded9291452
load6939317687134
domInteractive9291452
Bundle size diffs
  • background: 0 Bytes (0.00%)
  • ui: 88 Bytes (0.00%)
  • common: 0 Bytes (0.00%)

metamaskbot avatar Jan 27 '24 00:01 metamaskbot

Builds ready [996fd9d]
Page Load Metrics (787 ± 33 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint92155113136
domContentLoaded95419115
load6989817876833
domInteractive95419115
Bundle size diffs
  • background: 0 Bytes (0.00%)
  • ui: 88 Bytes (0.00%)
  • common: 0 Bytes (0.00%)

metamaskbot avatar Feb 05 '24 07:02 metamaskbot

Builds ready [0cc3610]
Page Load Metrics (831 ± 30 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint1031741302210
domContentLoaded105123136
load7579618316130
domInteractive105123136
Bundle size diffs
  • background: 0 Bytes (0.00%)
  • ui: 88 Bytes (0.00%)
  • common: 0 Bytes (0.00%)

metamaskbot avatar Feb 05 '24 16:02 metamaskbot

Builds ready [955a8e8]
Page Load Metrics (1037 ± 113 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint923601475728
domContentLoaded10251395125
load77118931037235113
domInteractive10251395125
Bundle size diffs
  • background: 0 Bytes (0.00%)
  • ui: 128 Bytes (0.00%)
  • common: 0 Bytes (0.00%)

metamaskbot avatar Feb 08 '24 15:02 metamaskbot

Builds ready [c9eb5f3]
Page Load Metrics (818 ± 35 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint80135102178
domContentLoaded9351663
load7099678187335
domInteractive9351663
Bundle size diffs
  • background: 0 Bytes (0.00%)
  • ui: 128 Bytes (0.00%)
  • common: 0 Bytes (0.00%)

metamaskbot avatar Feb 08 '24 23:02 metamaskbot

Builds ready [f18ec97]
Page Load Metrics (1001 ± 25 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint1082671983416
domContentLoaded10110492914
load894112310015325
domInteractive10110492914
Bundle size diffs
  • background: 0 Bytes (0.00%)
  • ui: 128 Bytes (0.00%)
  • common: 0 Bytes (0.00%)

metamaskbot avatar Feb 16 '24 05:02 metamaskbot

Builds ready [9de9905]
Page Load Metrics (1081 ± 37 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint1223791785828
domContentLoaded995282512
load893123410817637
domInteractive995282512
Bundle size diffs
  • background: 0 Bytes (0.00%)
  • ui: 128 Bytes (0.00%)
  • common: 0 Bytes (0.00%)

metamaskbot avatar Feb 20 '24 19:02 metamaskbot

Builds ready [3eadb3e]
Page Load Metrics (1447 ± 439 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint771711222311
domContentLoaded106028136
load5227201447914439
domInteractive106028136
Bundle size diffs
  • background: 0 Bytes (0.00%)
  • ui: 128 Bytes (0.00%)
  • common: 0 Bytes (0.00%)

metamaskbot avatar Mar 13 '24 02:03 metamaskbot

Builds ready [b623278]
Page Load Metrics (700 ± 398 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint713491316431
domContentLoaded1176312010
load662025700829398
domInteractive1176312010
Bundle size diffs
  • background: 0 Bytes (0.00%)
  • ui: 374 Bytes (0.00%)
  • common: 0 Bytes (0.00%)

metamaskbot avatar Mar 20 '24 17:03 metamaskbot