Skip to content

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

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.

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

Open
wants to merge 56 commits into
base: main
Choose a base branch
from

Conversation

EtherWizard33
Copy link
Contributor

@EtherWizard33 EtherWizard33 commented Apr 8, 2025

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.

Note to devs:

  • At the origin, this PR starts by fixing the regression on PR chore: Add @metamask/selected-network-controller & integrate #10788 which dated from Sept. 2024 and never used since hidden behind feature flag.
  • This PR started as "restore and replace per-dapp network picker in permissions view", then this PR now contains more than just the picker, but also the confirmations screens, transaction details screens etc, that kept using the global selected network in every way possible instead of the per dapp's and everying derived from it.

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:

  1. Enable feature flags below if they are not enabled already
  2. Connect to a dapp and verify network picker appears in permissions view
  3. Switch networks and verify correct network displays for that specific dapp
  4. Verify network switching works properly and modal dismisses correctly
  5. 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
Screenshot 2024-04-18 at 3 56 43 PM Screenshot 2024-04-18 at 3 56 43 PM

Pre-merge author checklist

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.

EtherWizard33 and others added 27 commits April 7, 2025 15:28
…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.
…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.
Copy link
Contributor

github-actions bot commented Apr 8, 2025

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.

@EtherWizard33 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 and others added 9 commits April 29, 2025 14:25
…f per-dapp-selected-networks.

Tests were fixed mostly by adding missing mocks.
… of per-dapp-selected-networks.

Tests were fixed mostly by adding missing mocks. The rest of the changes seems mostly like code formatter changes.
…should be enabled locally per dev using env variables.

Otherwise QA gets builds with these chains which are not ready to QA and then log bugs on features still in development.
… and the snapshot of two other tests.

The previous mock failed because the selector could not find the expected NetworkConfiguration in state, with this fix it passes. For the snapshots, it seems the previous version contained only an Amount label, while this version contains all other labels and fields we usually see in the transaction detail screen, therefore this new snapshot does seem relevant.
This can be a permanent or temporary fix just intended for the PR before review. I did message someone from the stx team who had written that line to see if the change is expected or required a deeper dive and this PR would be adjusted as needed.
These changes are more likely related to stx changes in this per dapp selected network PR.
@EtherWizard33 EtherWizard33 added the No E2E Smoke Needed If the PR does not need E2E smoke test run label May 2, 2025
@EtherWizard33
Copy link
Contributor Author

I have read the CLA Document and I hereby sign the CLA

1 similar comment
@EtherWizard22
Copy link

I have read the CLA Document and I hereby sign the CLA

@EtherWizard33 EtherWizard33 added Run Smoke E2E Triggers smoke e2e on Bitrise and removed No QA Needed Apply this label when your PR does not need any QA effort. No E2E Smoke Needed If the PR does not need E2E smoke test run labels May 2, 2025
Copy link
Contributor

github-actions bot commented May 2, 2025

https://bitrise.io/ Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: 2981fb1
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/b5643dc2-1b79-4135-94fb-758b0453c183

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

@EtherWizard33 EtherWizard33 added the No QA Needed Apply this label when your PR does not need any QA effort. label May 2, 2025
@EtherWizard33 EtherWizard33 marked this pull request as ready for review May 2, 2025 21:02
@EtherWizard33 EtherWizard33 requested review from a team as code owners May 2, 2025 21:02
@EtherWizard33 EtherWizard33 changed the title feat(4144): per-dapp-selected-networks WIP feat(4144): per-dapp-selected-networks May 2, 2025
Copy link

sonarqubecloud bot commented May 2, 2025

Quality Gate Failed Quality Gate failed

Failed conditions
60.1% Coverage on New Code (required ≥ 80%)

See analysis details on SonarQube Cloud

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
No QA Needed Apply this label when your PR does not need any QA effort. Run Smoke E2E Triggers smoke e2e on Bitrise team-wallet-ux
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug]: Unable to add more than certain number of networks using Choose from Permitted Networks modal
6 participants