fix(per-dapp-selected-network): restore per-dapp network picker in permissions view #13686

EtherWizard33 · 2025-02-24T10:34:26Z

Description

This PR fixes the regression on PR #10788, and then restores the network picker functionality in the permissions view that was previously removed, while properly integrating with the per-dapp network selection feature. Changes include:

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
Add proper network info display in permissions view
Integrate with @metamask/selected-network-controller for per-dapp network state

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

github-actions · 2025-02-24T10:34:41Z

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-02-24T10:34:55Z

Bitrise

🔄🔄🔄 pr_smoke_e2e_pipeline started on Bitrise...🔄🔄🔄

Commit hash: e7fa261
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/4f65be5a-ae35-4448-8715-34c3d577eb2f

Note

This comment will auto-update when build completes
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

sonarqubecloud · 2025-02-24T10:48:00Z

Quality Gate failed

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

See analysis details on SonarQube Cloud

EtherWizard33 · 2025-02-24T12:14:37Z

Status: after QA tested Alex Donesky's per dapp work, in hope of getting per do to switch like on his video

different bugs are reported on different dapps, some during switching some during confirming
of these bugs, the one closest to a complete dapp transaction flow working is on pancakeswap where the confirmation displayed the wrong network (displayed global wallet network and its balance etc), but when accepting the transaction the transaction was made on the per dapp network.
Confirmations team, codeowner of confirmations screens like this one, offered to answer questions but wont do the fix
Point 2. above seems the lowest hanging fruit at this time, and the one to get working

We can see the following are not as expected:

In the 'From:' box, the network name, network badge, and balance are from main net, not from Linea as expected
EDIT: still working on it, got some the per dapp network showing as expected but still working on account balance (of the From token), to show for the network of the dapp rather than the one from the wallet, i've put the latest status in the 'After' column below.

Before (wallet on 0x1, dapp on Linea)	After (still working on it)

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

EtherWizard33 · 2025-02-27T17:36:48Z

In regards to switching from the wallet, 008 bug pointed it didnt, but per dapp, it looks like it does as expected

dapp chain switches from wallet

adonesky1 · 2025-03-11T19:08:20Z

app/components/UI/AccountFromToInfoCard/AddressFrom.tsx

+  // FIXME: this could be the wrong selector, probably needs to be per dapp (per origin)
+  // console.log('>>> AddressFrom origin', origin);
+  const { networkName, networkImageSource } = useNetworkInfo(origin);


🤔 if you're passing in the origin here, the useNetworkInfo selector should be selecting the correct state based on that parameter. Is the comment outdated?

adonesky1 · 2025-03-11T19:10:23Z

app/components/UI/PermissionsSummary/PermissionsSummary.tsx

+    return isPerDappSelectedNetworkEnabled() ? (
+      <View style={[styles.domainLogoContainer, styles.assetLogoContainer]}>
+        <TouchableOpacity
+          onPress={switchNetwork}
+          testID={ConnectedAccountsSelectorsIDs.NETWORK_PICKER}
+        >
+          <BadgeWrapper
+            badgeElement={
+              <Badge
+                variant={BadgeVariant.Network}
+                name={networkName}
+                imageSource={networkImageSource}
+              />
+            }
+          >
+            {icon ? (
+              <AvatarFavicon
+                imageSource={{
+                  uri: typeof icon === 'string' ? icon : icon?.uri,
+                }}
+                size={AvatarSize.Md}
+              />
+            ) : (
+              <AvatarToken
+                name={iconTitle}
+                isHaloEnabled
+                size={AvatarSize.Md}
+              />
+            )}
+          </BadgeWrapper>
+        </TouchableOpacity>
+      </View>
+    ) : (


why is this conditional required? Not understanding what's changed here. Could you explain?

adonesky1 · 2025-03-11T19:10:52Z

app/components/Views/BrowserTab/BrowserTab.tsx

@@ -700,8 +642,6 @@ export const BrowserTab: React.FC<BrowserTabProps> = ({
        name: siteInfo.title,
        url: getMaskedUrl(siteInfo.url, sessionENSNamesRef.current),
      });
-
-      checkTabPermissions();


why is this no longer required?

adonesky1 · 2025-03-11T19:11:16Z

app/components/Views/NetworkSelector/NetworkSelector.tsx

      } else {
        const { networkClientId } = rpcEndpoints[defaultRpcEndpointIndex];
        try {
          await MultichainNetworkController.setActiveNetwork(networkClientId);
        } catch (error) {
-          Logger.error(new Error(`Error in setActiveNetwork: ${error}`));
+          Logger.error(new Error(`Error i setActiveNetwork: ${error}`));


🤔 whats this change about?

adonesky1 · 2025-03-11T19:21:54Z

app/selectors/selectedNetworkController.ts

      const relevantNetworkClientId =
        domainNetworkClientId || globalNetworkClientId;
+
+      const relevantChainId = chainIdToUse || chainId;


Suggested change

const relevantChainId = chainIdToUse || chainId;

const relevantChainId = chainIdToUse || globalChainId;

adonesky1 · 2025-03-11T19:22:19Z

app/selectors/selectedNetworkController.ts

@@ -77,6 +83,34 @@ const selectProviderNetworkImageSource = createSelector(
    }),
 );

+const selectChainIdToUse = createSelector(


Suggested change

const selectChainIdToUse = createSelector(

const selectOriginSelectedChainId = createSelector(

EtherWizard33 and others added 13 commits February 19, 2025 19:05

fix: fix permissisons network switch

84a8171

style: remove console.logs

21bc3a2

style: remove console.log from permission summary

421fc5c

style: remove console.log from network selector

ae28079

feat: remove console.log from chain utils

b82b7ac

style(lint): cleanup

5c02c47

feat: remove temporary network picker from AcounntPermissionsConnecte…

339d998

…d component

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

1aa5cc5

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

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

e7fa261

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

EtherWizard33 added Run Smoke E2E Triggers smoke e2e on Bitrise team-wallet-ux labels Feb 24, 2025

Merge branch 'main' into feat-4144-per-dapp-selected-network-poc-2

2589252

EtherWizard33 added Run Smoke E2E Triggers smoke e2e on Bitrise and removed Run Smoke E2E Triggers smoke e2e on Bitrise labels Feb 25, 2025

EtherWizard33 added 3 commits February 26, 2025 12:30

feat: remove non-permitted network flow check for dapps

f49d889

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

3c2de6e

- 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

f6783d3

- 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

f3dfe54

adonesky1 reviewed Mar 11, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(per-dapp-selected-network): restore per-dapp network picker in permissions view #13686

fix(per-dapp-selected-network): restore per-dapp network picker in permissions view #13686

EtherWizard33 commented Feb 24, 2025

github-actions bot commented Feb 24, 2025

github-actions bot commented Feb 24, 2025

sonarqubecloud bot commented Feb 24, 2025

EtherWizard33 commented Feb 24, 2025 •

edited

Loading

EtherWizard33 commented Feb 27, 2025 •

edited

Loading

adonesky1 Mar 11, 2025

adonesky1 Mar 11, 2025

adonesky1 Mar 11, 2025

adonesky1 Mar 11, 2025

adonesky1 Mar 11, 2025

adonesky1 Mar 11, 2025

	const relevantChainId = chainIdToUse \|\| chainId;
	const relevantChainId = chainIdToUse \|\| globalChainId;

	const selectChainIdToUse = createSelector(
	const selectOriginSelectedChainId = createSelector(

fix(per-dapp-selected-network): restore per-dapp network picker in permissions view #13686

Are you sure you want to change the base?

fix(per-dapp-selected-network): restore per-dapp network picker in permissions view #13686

Conversation

EtherWizard33 commented Feb 24, 2025

Description

Related issues

Manual testing steps

Screenshots/Recordings

Pre-merge author checklist

Pre-merge reviewer checklist

github-actions bot commented Feb 24, 2025

github-actions bot commented Feb 24, 2025

Bitrise

sonarqubecloud bot commented Feb 24, 2025

Quality Gate failed

EtherWizard33 commented Feb 24, 2025 • edited Loading

EtherWizard33 commented Feb 27, 2025 • edited Loading

adonesky1 Mar 11, 2025

Choose a reason for hiding this comment

adonesky1 Mar 11, 2025

Choose a reason for hiding this comment

adonesky1 Mar 11, 2025

Choose a reason for hiding this comment

adonesky1 Mar 11, 2025

Choose a reason for hiding this comment

adonesky1 Mar 11, 2025

Choose a reason for hiding this comment

adonesky1 Mar 11, 2025

Choose a reason for hiding this comment

EtherWizard33 commented Feb 24, 2025 •

edited

Loading

EtherWizard33 commented Feb 27, 2025 •

edited

Loading