feat(4144): per-dapp-selected-networks #14539

EtherWizard33 · 2025-04-08T22:11:30Z

Description

Issue: All dapps are connected on the same chain, if one switches, others as well. Most likely the user would prefer to have his selected networks to be specific to each dapp (aka per-dapp).

Solution: Add per-dapp-selected-network, Add a touchable favicon to the permission summary header that enables network switching for dapps.

Per-DApp Selected Network Implementation

Key Changes

Features

Implemented per-dapp network selection functionality with interactive favicon
Added network badge and switching capability in permission summary header
Enhanced chain fallback logic for per-dapp-selected-network feature
Added origin-specific network info for transaction reviews
Removed non-permitted network flow checks for dapps (TODO: keep behind feature flag, enabled when !perDapp)

Fixes

Updated transaction notifications to use chain-specific ticker symbols
Fixed network client ID handling for smart transactions
Improved chain comparison logic for per-dapp transactions
Corrected domain logo container placement behind feature flag
Fixed favicon display logic in permission summary for unconnected dapps

Refactoring

Centralized per-DApp network logic using isPerDappSelectedNetworkEnabled helper
Cleaned up network selection implementation
Removed temporary network picker components
Updated network name and image source to be origin-aware
Standardized feature flag usage across components

Code Quality

Removed debug logging statements
Code cleanup and linting improvements
Updated test snapshots for network name changes

Related issues

Contributes to: https://github.com/MetaMask/MetaMask-planning/issues/4104

Manual testing steps

Testing:

Enable feature flags below if they are not enabled already
Connect to a dapp and verify network picker appears in permissions view
Switch networks and verify correct network displays for that specific dapp
Verify network switching works properly and modal dismisses correctly
Verify network info displays correctly in permissions view

Make sure to include all env vars:

export MM_MULTICHAIN_V1_ENABLED="true"
export MM_CHAIN_PERMISSIONS="true"
export MM_PER_DAPP_SELECTED_NETWORK="true"
export MULTICHAIN_V1="true"

Screenshots/Recordings

Before	After

Pre-merge author checklist

I’ve followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
I've completed the PR template to the best of my ability
I’ve included tests if applicable
I’ve documented my code using JSDoc format if applicable
I’ve applied the right labels on the PR (see labeling guidelines). 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.

…ature can work when its feature flags are enabled make sure to include all env vars: export MM_MULTICHAIN_V1_ENABLED="true" export MM_CHAIN_PERMISSIONS="true" export MM_PER_DAPP_SELECTED_NETWORK="1" export MULTICHAIN_V1="true"

- Replace direct checks of process.env.MM_PER_DAPP_SELECTED_NETWORK in AccountPermissionsConnected.tsx with the isPerDappSelectedNetworkEnabled function. - Update ethereum-chain-utils.js to use isPerDappSelectedNetworkEnabled when switching networks. - Modify selectedNetworkController selectors to use isPerDappSelectedNetworkEnabled for feature flag checks. - Add the isPerDappSelectedNetworkEnabled utility in util/networks/index.js. This change centralizes the per-DApp network logic for better consistency and maintainability.

Add a touchable favicon to the permission summary header that enables network switching for dapps. This combines the dapp's identity (favicon/token) with network selection in a single interactive component. - Replace static WebsiteIcon with touchable BadgeWrapper pattern - Add network badge to indicate current network - Enable network switching via network selector bottom sheet - Add fallback to AvatarToken when favicon unavailable - Guard implementation behind per-dapp network selection feature flag - Preserve original WebsiteIcon when feature disabled This matches the interaction pattern from AccountPermissionsConnected, providing a consistent way to manage dapp-specific networks across the app.

…d component

…flag The domain logo container view was incorrectly placed outside the per-dapp network feature flag check. This change moves the container view inside the feature flag condition to ensure consistent UI behavior when the feature is enabled/disabled. - Moved View wrapper inside isPerDappSelectedNetworkEnabled() check - Simplified conditional rendering logic - Maintains existing functionality but with proper feature flag control

…permission sumamry is displayed, keep showing the WebsiteIcon rather than the AvatarFavicon.

…1Enabled rather than its 'corresponding' env variable MULTICHAIN_V1

Remove the permission check for non-permitted network flows in dapps, paving the way for the per-dapp-selected-network feature. Temporary screens handling these flows are pending removal upon feature completion.

- Replace global network selectors with origin-specific useNetworkInfo hook - Update network name and image source to be origin-aware - Update test snapshot for network name changes

- Add origin prop to AccountFromToInfoCard for per-dapp network info - Add debug logs for transaction review flow

… the per-dapp-selected-network enabled feature

… dapp chain if there is a hostname (if its a transaction from a dapp)

… confirming tx from dapp while stx is enabled

…ctNetworkConfigurations - and fix lint errors

…on notifications The commit updates the ticker selection to use the transaction's specific chainId instead of the global network state, ensuring correct token symbol is displayed in the TransactionSummary when openned from the TransactionNotification for per-dapp-selected-network transactions.

github-actions · 2025-04-08T22:11:40Z

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.

github-actions · 2025-05-21T14:30:43Z

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: 6def8e4
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/aef6496c-b419-4ca2-82ec-6709b1e1eec6

Note

You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

Tip

Check the documentation if you have any doubts on how to understand the failure on bitrise

github-actions · 2025-05-21T15:43:30Z

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: 58a0647
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/27b4e1a5-f198-4cdb-8866-de6fb62adef6

Note

You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

Tip

Check the documentation if you have any doubts on how to understand the failure on bitrise

sonarqubecloud · 2025-05-21T16:24:15Z

Quality Gate passed

Issues
7 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

EtherWizard33 and others added 27 commits April 7, 2025 15:28

fix: fix permissisons network switch

01a81e0

style: remove console.logs

d878587

style: remove console.log from permission summary

82b5521

style: remove console.log from network selector

fc966a9

feat: remove console.log from chain utils

9521bf4

style(lint): cleanup

cadfc88

feat: remove temporary network picker from AcounntPermissionsConnecte…

27a6e8c

…d component

fix(permission-summary): When the dapp is not yet connected, and the …

6e17a0b

…permission sumamry is displayed, keep showing the WebsiteIcon rather than the AvatarFavicon.

chore: in engine.ts, make use of the local feature flag isMultichainV…

e379088

…1Enabled rather than its 'corresponding' env variable MULTICHAIN_V1

feat: remove non-permitted network flow check for dapps

4193532

Remove the permission check for non-permitted network flows in dapps, paving the way for the per-dapp-selected-network feature. Temporary screens handling these flows are pending removal upon feature completion.

feat(AddressFrom): get network info per dapp origin

4b9210e

- Replace global network selectors with origin-specific useNetworkInfo hook - Update network name and image source to be origin-aware - Update test snapshot for network name changes

feat(TransactionReview): pass origin prop to AccountFromToInfoCard

71ce34d

- Add origin prop to AccountFromToInfoCard for per-dapp network info - Add debug logs for transaction review flow

Use provided chainId to determine balance in useAddressBalance hook

05f6617

feat: make the chain fallback logic worth in both on and off state of…

e9f7712

… the per-dapp-selected-network enabled feature

feat: ensure that when checkActiveAccountAndChainId it checks the per…

c64169c

… dapp chain if there is a hostname (if its a transaction from a dapp)

doc: log the transactionMeta for debugging purposes, currently undefined

3e72ab6

fix: per-dapp also gets the request vs dapp chain comparison

10f1ed0

fix: pass the network client id in hopes of fixing the stx error when…

a4d8212

… confirming tx from dapp while stx is enabled

refactor: use selectEvmNetworkConfigurationsByChainId instead of sele…

8086b32

…ctNetworkConfigurations - and fix lint errors

wip

bcac90d

Switch TransactionDetails usage to transaction specific chainId

42c5fe0

wip

fa59824

EtherWizard33 changed the title ~~Feat 4144 per dapp updated from main april 7th~~ feat(4144): per dapp updated from main april 7th Apr 8, 2025

EtherWizard33 added the team-wallet-ux label Apr 8, 2025

EtherWizard22 and others added 2 commits May 21, 2025 10:28

Merge branch 'main' into feat-4144-per-dapp-updated-from-main-april-7th

b8a99e7

Merge branch 'main' into feat-4144-per-dapp-updated-from-main-april-7th

6def8e4

EtherWizard33 added Run Smoke E2E Requires smoke E2E testing and removed Run Smoke E2E Requires smoke E2E testing labels May 21, 2025

EtherWizard33 removed the request for review from a team May 21, 2025 14:36

EtherWizard33 added Run Smoke E2E Requires smoke E2E testing and removed Run Smoke E2E Requires smoke E2E testing labels May 21, 2025

elribonazo self-requested a review May 21, 2025 14:52

elribonazo approved these changes May 21, 2025

View reviewed changes

tommasini approved these changes May 21, 2025

View reviewed changes

Prithpal-Sooriya approved these changes May 21, 2025

View reviewed changes

jiexi approved these changes May 21, 2025

View reviewed changes

Merge branch 'main' into feat-4144-per-dapp-updated-from-main-april-7th

58a0647

EtherWizard33 added Run Smoke E2E Requires smoke E2E testing and removed Run Smoke E2E Requires smoke E2E testing labels May 21, 2025

Merge branch 'main' into feat-4144-per-dapp-updated-from-main-april-7th

fc72ed2

matthewwalsh0 approved these changes May 21, 2025

View reviewed changes

OGPoyraz approved these changes May 21, 2025

View reviewed changes

vinnyhoward approved these changes May 21, 2025

View reviewed changes

EtherWizard33 added No E2E Smoke Needed If the PR does not need E2E smoke test run and removed Run Smoke E2E Requires smoke E2E testing labels May 21, 2025

EtherWizard33 added this pull request to the merge queue May 21, 2025

Merged via the queue into main with commit 44296de May 21, 2025
47 of 48 checks passed

EtherWizard33 deleted the feat-4144-per-dapp-updated-from-main-april-7th branch May 21, 2025 17:08

github-actions bot locked and limited conversation to collaborators May 21, 2025

metamaskbot added the release-7.48.0 Issue or pull request that will be included in release 7.48.0 label May 21, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

feat(4144): per-dapp-selected-networks #14539

feat(4144): per-dapp-selected-networks #14539

EtherWizard33 commented Apr 8, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Apr 8, 2025 •

edited

Loading

Uh oh!

github-actions bot commented May 21, 2025 •

edited by metamaskbot

Loading

Uh oh!

github-actions bot commented May 21, 2025 •

edited by metamaskbot

Loading

Uh oh!

sonarqubecloud bot commented May 21, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

feat(4144): per-dapp-selected-networks #14539

feat(4144): per-dapp-selected-networks #14539

Conversation

EtherWizard33 commented Apr 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Per-DApp Selected Network Implementation

Key Changes

Features

Fixes

Refactoring

Code Quality

Related issues

Manual testing steps

Screenshots/Recordings

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions bot commented Apr 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented May 21, 2025 • edited by metamaskbot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bitrise

Uh oh!

github-actions bot commented May 21, 2025 • edited by metamaskbot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bitrise

Uh oh!

sonarqubecloud bot commented May 21, 2025

Quality Gate passed

Uh oh!

Uh oh!

Uh oh!

EtherWizard33 commented Apr 8, 2025 •

edited

Loading

github-actions bot commented Apr 8, 2025 •

edited

Loading

github-actions bot commented May 21, 2025 •

edited by metamaskbot

Loading

github-actions bot commented May 21, 2025 •

edited by metamaskbot

Loading