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.

Sign up for GitHub

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

Jump to bottom

Improve transaction confirmation page performance #16205

Merged
merged 6 commits into from Oct 28, 2022
Merged

Improve transaction confirmation page performance #16205

merged 6 commits into from Oct 28, 2022

Conversation

FrederikBolding
Copy link
Member

@FrederikBolding FrederikBolding commented Oct 14, 2022 •
edited

Explanation

This issue fixes a Flask issue by fixing an underlying problem with the selectors used in the transaction confirmation screen (also in stable). The issue arose in Flask because we relied on the txData object for a useEffect. The txData object was continuously updated through spreads etc without memoization. This PR fixes the problem by wrapping the existing logic in reselect selectors and enabling deep equal memoization for these selectors.

More Information

Fixes MetaMask/snaps#828

Manual Testing Steps

  1. Create an transaction insight snap that logs every time it is called
  2. View the transaction insight tab in the confirmation screen
  3. See that the transaction insight snap only logs once

(Perhaps another way to test in stable?)

@FrederikBolding FrederikBolding requested a review from a team as a code owner October 14, 2022 10:37
@FrederikBolding
Copy link
Member Author

@Gudahtt Maybe this PR should be renamed to something else given that it now affects both stable and Flask? While the main goal was to fix a Flask bug.

@metamaskbot
Copy link
Collaborator

Builds ready [84e9586]
Page Load Metrics (2595 ± 169 ms)
PlatformPageMetricMin (ms)Max (ms)Average (ms)StandardDeviation (ms)MarginOfError (ms)
ChromeHomefirstPaint982181362914
domContentLoaded184130972573345166
load184131652595352169
domInteractive184130962573345166

highlights:

storybook

CHANDRAMA2
CHANDRAMA2 approved these changes Oct 14, 2022
View reviewed changes
Copy link

@CHANDRAMA2 CHANDRAMA2 left a comment

Choose a reason for hiding this comment

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

Hello sir

@Gudahtt
Copy link
Member

Gudahtt commented Oct 14, 2022

Maybe this PR should be renamed to something else given that it now affects both stable and Flask? While the main goal was to fix a Flask bug.

Agreed! Maybe something about improving transaction confirmation page performance. It should generally be a perf improvement across the board.

@ritave
Copy link
Member

ritave commented Oct 15, 2022 •
edited

In the future, that screen might be rerendered again for other reason, but it still shouldn't call onTransaction. How about using const [txInsights, setTxInsights] = useState() to maintain the tx insights cache inside of useTransactionInsightSnap

@FrederikBolding FrederikBolding changed the title [FLASK] Reduce calls to transaction insight snaps Improve transaction confirmation page performance Oct 24, 2022
@FrederikBolding
Copy link
Member Author

In the future, that screen might be rerendered again for other reason, but it still shouldn't call onTransaction. How about using const [txInsights, setTxInsights] = useState() to maintain the tx insights cache inside of useTransactionInsightSnap

Strictly if the transaction changes or you switch the tab back and forth (unmounting and remounting). In my opinion that should be fine.

jpuri
jpuri approved these changes Oct 26, 2022
View reviewed changes
Copy link
Contributor

@jpuri jpuri left a comment

Choose a reason for hiding this comment

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

LGTM

@ritave ritave added flask and removed flask labels Oct 26, 2022
@FrederikBolding FrederikBolding merged commit 012e9fa into develop Oct 28, 2022
@FrederikBolding FrederikBolding deleted the fb/reduce-calls-to-insight-snaps branch October 28, 2022 08:37
@github-actions github-actions bot locked and limited conversation to collaborators Oct 28, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@jpuri jpuri jpuri approved these changes

@GuillaumeRx GuillaumeRx GuillaumeRx approved these changes

@CHANDRAMA2 CHANDRAMA2 CHANDRAMA2 approved these changes

@brad-decker brad-decker Awaiting requested review from brad-decker brad-decker is a code owner automatically assigned from MetaMask/extension-devs

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

onTransaction is called repeatedly
7 participants
@FrederikBolding @metamaskbot @Gudahtt @ritave @jpuri @GuillaumeRx @CHANDRAMA2