Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: remove scroll-to-bottom requirement in redesigned transaction confirmations #27910

Merged
merged 10 commits into from
Nov 6, 2024

Conversation

vinistevam
Copy link
Contributor

@vinistevam vinistevam commented Oct 16, 2024

Description

This PR addresses the removal of the scroll-to-bottom requirement in the redesigned transaction confirmation screens. It eliminates the need for users to scroll to the bottom in order to enable the confirm button, streamlining the confirmation process. The scroll-to-bottom arrow is also removed, ensuring a smoother user experience without unnecessary interaction barriers.

Open in GitHub Codespaces

Related issues

Fixes: https://github.com/MetaMask/MetaMask-planning/issues/3495

Manual testing steps

  1. Go to test dapp
  2. Have 2+ transaction insights snaps installed
  3. Click Create Token
  4. See the confirm button disabled until you scroll to bottom

Screenshots/Recordings

deploy.webm

Before

After

Pre-merge author checklist

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.

@vinistevam vinistevam added the team-confirmations Push issues to confirmations team label Oct 16, 2024
Copy link
Contributor

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.

Copy link

@metamaskbot
Copy link
Collaborator

Builds ready [7f55b70]
Page Load Metrics (1780 ± 96 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint33323721718377181
domContentLoaded14602304175020297
load14722317178019996
domInteractive15176523617
backgroundConnect691312512
firstReactRender46208954321
getState467202311
initialActions01000
loadScripts10451876132419091
setupStore1095323015
uiStartup165625222012219105
Bundle size diffs
  • background: 0 Bytes (0.00%)
  • ui: 185 Bytes (0.00%)
  • common: 0 Bytes (0.00%)

@vinistevam vinistevam changed the title fix: remove scroll to bottom when confirmation is transaction redesigned fix: remove scroll-to-bottom requirement in redesigned transaction confirmations Oct 17, 2024
@vinistevam vinistevam marked this pull request as ready for review October 17, 2024 07:28
@vinistevam vinistevam requested review from a team as code owners October 17, 2024 07:28
setIsScrollToBottomCompleted(true);
return;
}

setIsScrollToBottomCompleted(!isScrollable || hasScrolledToBottom);
}, [isScrollable, hasScrolledToBottom]);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this hook to have isTransactionRedesign dependency?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great catch, done.

@@ -49,6 +51,13 @@ const ScrollToBottom = ({ children }: ContentProps) => {
offsetPxFromBottom: 0,
});

const isTransactionRedesign = REDESIGN_USER_TRANSACTION_TYPES.includes(
Copy link
Member

@OGPoyraz OGPoyraz Oct 17, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe a dumb question, this should definitely check if current confirmation in REDESIGN_USER_TRANSACTION_TYPES but also if user opted-in for redesigned transactions?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I assumed ScrollToBottom is used only for redesigned confirmations. I will double-check.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That make sense if that's the case

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In this case we probably want to use REDESIGN_DEV_TRANSACTION_TYPES instead, which is a superset of REDESIGN_USER_TRANSACTION_TYPES and includes any types not yet visible to the user but already in active development

OGPoyraz
OGPoyraz previously approved these changes Oct 17, 2024
@vinistevam vinistevam requested review from a team and kumavis as code owners October 20, 2024 13:12
@vinistevam vinistevam force-pushed the fix/remove-scroll-to-bottom-transaction branch 2 times, most recently from 42027be to b344e29 Compare October 20, 2024 13:14
@metamaskbot
Copy link
Collaborator

Builds ready [e53536f]
Page Load Metrics (1912 ± 189 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint62335141844477229
domContentLoaded161826351830222106
load165035261912393189
domInteractive16103472411
backgroundConnect118998618890
firstReactRender52290955526
getState470232010
initialActions01000
loadScripts11711745132913565
setupStore1093382512
uiStartup179437172155405194
Bundle size diffs
  • background: 0 Bytes (0.00%)
  • ui: 186 Bytes (0.00%)
  • common: 0 Bytes (0.00%)

jpuri
jpuri previously approved these changes Oct 21, 2024
@vinistevam vinistevam enabled auto-merge October 21, 2024 14:03
@vinistevam vinistevam disabled auto-merge October 21, 2024 14:03
@metamaskbot
Copy link
Collaborator

Builds ready [35c228a]
Page Load Metrics (1867 ± 61 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint17092235186911756
domContentLoaded1676201418149043
load16872244186712761
domInteractive18101462311
backgroundConnect11260505426
firstReactRender522501054522
getState4209244421
initialActions01000
loadScripts1205146313297134
setupStore12281396029
uiStartup185331602132287138
Bundle size diffs
  • background: 0 Bytes (0.00%)
  • ui: 186 Bytes (0.00%)
  • common: 0 Bytes (0.00%)

@vinistevam vinistevam enabled auto-merge October 22, 2024 14:01
@vinistevam vinistevam disabled auto-merge October 23, 2024 04:59
@vinistevam vinistevam enabled auto-merge October 23, 2024 06:51
@vinistevam vinistevam disabled auto-merge October 23, 2024 16:01
@vinistevam vinistevam dismissed stale reviews from pedronfigueiredo and jpuri via bdf56de October 29, 2024 11:39
@vinistevam vinistevam force-pushed the fix/remove-scroll-to-bottom-transaction branch from 1cd0727 to bdf56de Compare October 29, 2024 11:39
@vinistevam vinistevam removed request for a team and kumavis October 29, 2024 11:39
@metamaskbot
Copy link
Collaborator

Builds ready [c24e021]
Page Load Metrics (2009 ± 51 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint21521901845534256
domContentLoaded1770212419759747
load17742195200910651
domInteractive209452199
backgroundConnect781322512
firstReactRender67124102157
getState565202010
initialActions01000
loadScripts1238162714569847
setupStore1278412713
uiStartup20012472223711756
Bundle size diffs
  • background: 0 Bytes (0.00%)
  • ui: 186 Bytes (0.00%)
  • common: 0 Bytes (0.00%)

@metamaskbot
Copy link
Collaborator

Builds ready [b7155f2]
Page Load Metrics (1735 ± 34 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint28019041609433208
domContentLoaded1519188517147335
load1561190217357234
domInteractive147143157
backgroundConnect95219147
firstReactRender471981043316
getState56411168
initialActions01000
loadScripts1084137812596833
setupStore107820199
uiStartup17082244195712058
Bundle size diffs
  • background: 0 Bytes (0.00%)
  • ui: 186 Bytes (0.00%)
  • common: 0 Bytes (0.00%)

@vinistevam vinistevam added this pull request to the merge queue Nov 5, 2024
@vinistevam vinistevam removed this pull request from the merge queue due to a manual request Nov 5, 2024
@metamaskbot
Copy link
Collaborator

Builds ready [2fdb1dd]
Page Load Metrics (2090 ± 63 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint16942368208713665
domContentLoaded16872301206012661
load16972365209013163
domInteractive28104622110
backgroundConnect97922199
firstReactRender993051365828
getState782302512
initialActions00000
loadScripts12041689151010349
setupStore1293392914
uiStartup19512815240320599
Bundle size diffs
  • background: 0 Bytes (0.00%)
  • ui: 186 Bytes (0.00%)
  • common: 0 Bytes (0.00%)

@vinistevam vinistevam added this pull request to the merge queue Nov 6, 2024
Merged via the queue into develop with commit 63fb3ac Nov 6, 2024
76 checks passed
@vinistevam vinistevam deleted the fix/remove-scroll-to-bottom-transaction branch November 6, 2024 08:36
@github-actions github-actions bot locked and limited conversation to collaborators Nov 6, 2024
@metamaskbot metamaskbot added the release-12.8.0 Issue or pull request that will be included in release 12.8.0 label Nov 6, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
release-12.8.0 Issue or pull request that will be included in release 12.8.0 team-confirmations Push issues to confirmations team
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants