Commit 695c91d
authored
feat(NetworkMultiSelector): enhance network switching with event tracking and metrics (MetaMask#23414)
<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->
## **Description**
This PR implements `NETWORK_SWITCHED` Segment event tracking when users
switch networks via the network filter in the Activity view and Tokens
tab. The event is tracked with the correct properties (`chain_id`,
`from_network`, `to_network`, and `source: "Network Filter"`) and
handles both EVM and non-EVM networks correctly.
## **Changelog**
<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`
If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`
(This helps the Release Engineer do their job more quickly and
accurately)
-->
CHANGELOG entry: null
## **Related issues**
Fixes: https://consensyssoftware.atlassian.net/browse/TMCU-212
## **Manual testing steps**
```gherkin
Feature: Network Switched Event Tracking
Scenario: User switches from EVM to EVM network via filter
Given the user is on the Activity view or Tokens tab
And the network filter is open
And the current network is Ethereum Mainnet (0x1)
When the user selects Base network (0x2105) from the filter
Then the network should switch to Base
And a NETWORK_SWITCHED event should be tracked with:
- chain_id: "8453"
- from_network: "Ethereum Main Network"
- to_network: "Base"
- source: "Network Filter"
Scenario: User switches from non-EVM to non-EVM network via filter
Given the user is on the Activity view or Tokens tab
And the network filter is open
And the current network is Solana
When the user selects Bitcoin network from the filter
Then the network should switch to Bitcoin
And a NETWORK_SWITCHED event should be tracked with:
- chain_id: "bip122:000000000019d6689c085ae165831e93"
- from_network: "Solana"
- to_network: "Bitcoin"
- source: "Network Filter"
```
## **Screenshots/Recordings**
<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->
### **Before**
<!-- [screenshots/recordings] -->
### **After**
<!-- [screenshots/recordings] -->
## **Pre-merge author checklist**
- [x] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.
## **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.
<!-- CURSOR_SUMMARY -->
---
> [!NOTE]
> Adds metrics-driven NETWORK_SWITCHED tracking to NetworkMultiSelector
for EVM and non‑EVM selections, including “All Networks,” with robust
CAIP parsing and edge-case handling.
>
> - **NetworkMultiSelector
(`app/components/UI/NetworkMultiSelector/NetworkMultiSelector.tsx`)**:
> - Integrates metrics to emit `MetaMetricsEvents.NETWORK_SWITCHED` with
`chain_id`, `from_network`, `to_network`, `source`.
> - Implements CAIP parsing and current network resolution
(`parseCaipChainId`, `getDecimalChainId`, `toHex`), plus
`getNetworkName` helper.
> - Uses selectors `selectEvmNetworkConfigurationsByChainId`,
`selectNonEvmNetworkConfigurationsByChainId`,
`selectIsEvmNetworkSelected`, `selectSelectedNonEvmNetworkChainId`,
`selectEvmChainId` to derive names/IDs.
> - Updates `onSelectNetwork`/`onSelectAllPopularNetworks` to track
switches (EVM and non‑EVM, and "All Networks"), guard unknown networks,
and log parse errors.
> - **Tests (`NetworkMultiSelector.test.tsx`)**:
> - Adds comprehensive cases covering EVM↔EVM, non‑EVM↔non‑EVM,
non‑EVM↔EVM, switching to/from "All Networks", malformed IDs, and
missing/unknown configs, with shared helpers and mocks.
>
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
9dd92de. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->1 parent 5fd9eb9 commit 695c91d
2 files changed
Lines changed: 1595 additions & 7 deletions
File tree
- app/components/UI/NetworkMultiSelector
0 commit comments