feat: add network picker deeplink cp-13.18.0#39676
Conversation
Co-authored-by: prithpal.sooriya <prithpal.sooriya@consensys.net>
|
Cursor Agent can help with this pull request. Just |
|
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. |
✨ Files requiring CODEOWNER review ✨🔑 @MetaMask/accounts-engineers (2 files, +208 -3)
👨🔧 @MetaMask/core-extension-ux (2 files, +208 -3)
|
Builds ready [5c69415]
UI Startup Metrics (1284 ± 107 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
…rsor/deeplink-network-picker-modal-6fcb
This commit introduces a new deep link handling mechanism for the `openNetworkSelector` parameter in the home route. The changes include: - Updated the `HomeQueryParams` enum to rename `OpenNetworkPicker` to `OpenNetworkSelector`. - Enhanced the `homeRoute.handler` to process the `openNetworkSelector` parameter correctly. - Added unit tests for the `homeRoute` to validate the behavior of the `openNetworkSelector` parameter. - Implemented a custom hook `useHomeDeepLinkEffects` in `AccountOverviewTabs` to manage the opening of the network selector based on the deep link parameters. These updates improve the user experience by allowing the network selector to be opened directly via deep links, enhancing navigation and functionality within the application.
ui/components/multichain/account-overview/account-overview-tabs.tsx
Outdated
Show resolved
Hide resolved
…effects This commit adds a new `HomeDeepLinkActions` component that encapsulates the `useHomeDeepLinkEffects` hook, allowing for better management of deep link actions on the home route. The component is integrated into the home page layout, ensuring that deep link parameters are processed correctly. Additionally, unit tests are included to validate the behavior of the deep link handling logic, enhancing the overall functionality and user experience of the application.
d639f87 to
1687cd8
Compare
…ests This commit updates the test for the `homeRoute.handler` to ensure it correctly handles the `openNetworkSelector` parameter. The logic for creating URL search parameters has been adjusted to use a more explicit check for `undefined`, improving clarity and correctness in the test cases. Additionally, the import statement for `DEFAULT_ROUTE` in `HomeDeepLinkActions.tsx` has been restored to maintain consistency in the codebase.
This commit modifies the `HomeDeepLinkActions.test.tsx` file to include a configuration for the `MemoryRouter` that suppresses warnings related to future React Router features. Additionally, the baseline console warnings have been updated to reflect the removal of warnings from the home deep link tests.
| {/* Ghost component that manages the useHomeDeepLinkEffects */} | ||
| <HomeDeepLinkActions /> |
There was a problem hiding this comment.
Using a stable ghost component as this is a very heavy JS Class Component.
This allows us to keep the new underlying logic nice and composable using hooks, but has interoperability with this class component.
There was a problem hiding this comment.
We can probs kill the ghost component once this is migrated over to a functional component.
There was a problem hiding this comment.
This is perfectly fine. Did the same approach on one of the excessively re-rendering components in the account overview component.
Description
Add deeplink support to open the network picker modal on the home page when a specific query parameter is present.
Deeplink: https://link.metamask.io/home?openNetworkSelector=true
Changelog
CHANGELOG entry: feat: add network picker deeplink
Related issues
Fixes: https://consensyssoftware.atlassian.net/browse/ASSETS-2571
Manual testing steps
Screenshots/Recordings
Before
After
https://www.loom.com/share/2f9ed061070d4c07a12e49779482db8d
Pre-merge author checklist
Pre-merge reviewer checklist
Note
Low Risk
Scoped to home-page query param handling and a single Redux UI toggle, with param validation and cleanup plus targeted tests.
Overview
Adds deep-link support for opening the network selector from
https://link.metamask.io/home?openNetworkSelector=true.Updates the shared
homedeep-link route handler to recognizeopenNetworkSelector(acceptingtrue/1) and forward it as a normalizedopenNetworkSelector=truequery to the in-appDEFAULT_ROUTE, covered by a new unit test.Introduces
useHomeDeepLinkEffects/HomeDeepLinkActionson the UI home page to read the query param, dispatchtoggleNetworkMenu()when on the home route and the menu isn’t already open, then clear the deep-link params; adds React tests for the hook and ghost component across key scenarios.Written by Cursor Bugbot for commit 2b90e3a. This will update automatically on new commits. Configure here.