Revert "Revert "Hide header on wallet onboarding"" #18952
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Reverts #18948, which reverted #18896. Also introduces a fix for the issue that caused the first revert to happen.
The issue was when a navigation action would occur on the wallets page, a user would be redirected to the onboarding page, no matter if they accepted the disclaimer or not. This was because the
OnboardingOrWallets
component that handles routing to either the onboarding or wallets screen would be default show the onboarding screen and route to the wallets page when:OnboardingOrWallets
mounted andthis.props.acceptedDisclaimer === true
OnboardingOrWallets
was updated andprevProps.acceptedDisclaimer === false && this.props.acceptedDisclaimer === true
. The reason why we didn't just check ifthis.props.acceptedDisclaimer === true
was to avoid unnecessary navigation and re-renders.The issue came from this logic in 2. When a user who had accepted the disclaimer first navigated to the wallet page, the page would look fine, but any subsequent navigation (e.g., to another account or the account settings) through the subnavigatior on the page would trigger a re-render of
OnboardingOrWallets
, which would check theprevProps.acceptedDisclaimer === false && this.props.acceptedDisclaimer === true
condition. In this case, theacceptedDisclaimer
would be true both for the current and previous render and thus the navigation to the wallets page would not happen and the navigator would display the initial page, the onboarding page.My solution to this is to swap the initial page from the onboarding page to the wallets page. When
OnboardingOrWallets
mounts andthis.props.acceptedDisclaimer === false
, it will navigate to the onboarding page. The onboarding page does not contain a subnavigator, so it won't trigger any navigation events that will cause a re-render ofOnboardingOrWallets
. The logic in 2 will remain; when a user accepts the disclaimer from the onboarding page, they will be navigated to the wallets page.I also took this as an opportunity to remove some logic from
WalletsAndDetails
, a component rendered on the wallets page on desktop. It previously displayed the onboarding page before I implemented my navigation solution in #18896. Since it's only displayed when the disclaimer is accepted, it's redundant to haveWalletsAndDetails
check if the disclaimer is accepted and display the onboarding page if not.