fix: fix snaps permission flow ui (#30116) (#30132)

Issue described
[here](#30087)

This commit fixes the snaps permission flow UI bug detected after
#29824

Screenshots after fix:


<img width="349" alt="Screenshot 2025-02-04 at 20 20 37"
src="https://github.com/user-attachments/assets/968d3d48-c6e4-4283-9c64-a5a28dc968dc"
/>
<img width="337" alt="Screenshot 2025-02-04 at 20 20 53"
src="https://github.com/user-attachments/assets/ebb73ffe-cd54-446f-aaf1-7da895dad0f0"
/>



<!--
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**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution? -->

[![Open in GitHub

Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/30116?quickstart=1)

## **Related issues**

Fixes:

## **Manual testing steps**

1. Go to this page... 2.
3.

## **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
Extension Coding

Standards](https://github.com/MetaMask/metamask-extension/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-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] 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.


<!--
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**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/30132?quickstart=1)

## **Related issues**

Fixes:

## **Manual testing steps**

1. Go to this page...
2.
3.

## **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**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] 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](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/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.

ui/components/app/permission-page-container/permission-page-container-content/permission-page-container-content.component.js

@@ -18,6 +18,7 @@ import { getURLHost } from '../../../../helpers/utils/util';
 
 export default class PermissionPageContainerContent extends PureComponent {
   static propTypes = {
+    request: PropTypes.object,
     subjectMetadata: PropTypes.shape({
       name: PropTypes.string.isRequired,
       origin: PropTypes.string.isRequired,
@@ -31,6 +32,7 @@ export default class PermissionPageContainerContent extends PureComponent {
   };
 
   static defaultProps = {
+    request: {},
     selectedAccounts: [],
     requestedChainIds: [],
   };
@@ -47,6 +49,7 @@ export default class PermissionPageContainerContent extends PureComponent {
       selectedAccounts,
       subjectMetadata,
       requestedChainIds,
+      request,
     } = this.props;
 
     const accounts = selectedAccounts.reduce((accumulator, account) => {
@@ -101,6 +104,7 @@ export default class PermissionPageContainerContent extends PureComponent {
           borderRadius={BorderRadius.XL}
         >
           <PermissionsConnectPermissionList
+            isLegacySwitchEthereumChain={request.isLegacySwitchEthereumChain}
             permissions={selectedPermissions}
             subjectName={subjectMetadata.origin}
             accounts={accounts}

ui/components/app/permission-page-container/permission-page-container.component.js

@@ -182,6 +182,7 @@ export default class PermissionPageContainer extends Component {
 
   render() {
     const {
+      request,
       requestMetadata,
       targetSubjectMetadata,
       selectedAccounts,
@@ -217,6 +218,7 @@ export default class PermissionPageContainer extends Component {
           />
         )}
         <PermissionPageContainerContent
+          request={request}
           requestMetadata={requestMetadata}
           subjectMetadata={targetSubjectMetadata}
           selectedPermissions={requestedPermissions}

ui/components/app/permissions-connect-permission-list/permissions-connect-permission-list.js

@@ -39,6 +39,7 @@ function getDescriptionNode({
 }
 
 export default function PermissionsConnectPermissionList({
+  isLegacySwitchEthereumChain,
   permissions,
   subjectName,
   accounts,
@@ -51,6 +52,7 @@ export default function PermissionsConnectPermissionList({
     <Box as="span">
       {getWeightedPermissions({
         t,
+        isLegacySwitchEthereumChain,
         permissions,
         getSubjectName: getSnapName(snapsMetadata),
         subjectName,
@@ -71,4 +73,5 @@ PermissionsConnectPermissionList.propTypes = {
   subjectName: PropTypes.string.isRequired,
   requestedChainIds: PropTypes.array,
   accounts: PropTypes.arrayOf(PropTypes.object),
+  isLegacySwitchEthereumChain: PropTypes.boolean,
 };

ui/helpers/utils/permission.js

@@ -8,10 +8,7 @@ import {
   getSnapDerivationPathName,
 } from '@metamask/snaps-utils';
 import { isNonEmptyArray } from '@metamask/controller-utils';
-import {
-  Caip25EndowmentPermissionName,
-  getEthAccounts,
-} from '@metamask/multichain';
+import { Caip25EndowmentPermissionName } from '@metamask/multichain';
 import {
   RestrictedMethods,
   EndowmentPermissions,
@@ -33,7 +30,6 @@ import {
 // TODO: Remove restricted import
 // eslint-disable-next-line import/no-restricted-paths
 import { PermissionNames } from '../../../app/scripts/controllers/permissions';
-import { getRequestedSessionScopes } from '../../pages/permissions-connect/connect-page/utils';
 import { getURLHost } from './util';
 
 const UNKNOWN_PERMISSION = Symbol('unknown');
@@ -56,14 +52,8 @@ function getSnapNameComponent(snapName) {
 
 const PERMISSION_DESCRIPTIONS = deepFreeze({
   // "endowment:caip25" entry is needed for the Snaps Permissions Review UI
-  [Caip25EndowmentPermissionName]: ({ t, permissionValue }) => {
-    const caveatValue = getRequestedSessionScopes({
-      permissions: permissionValue,
-    });
-    const requestedAccounts = getEthAccounts(caveatValue);
-    const isLegacySwitchChain = requestedAccounts.length === 0;
-
-    if (isLegacySwitchChain) {
+  [Caip25EndowmentPermissionName]: ({ t, isLegacySwitchEthereumChain }) => {
+    if (isLegacySwitchEthereumChain) {
       return {
         label: t('permission_walletSwitchEthereumChain'),
         leftIcon: IconName.Wifi,
@@ -656,6 +646,7 @@ const PERMISSION_DESCRIPTIONS = deepFreeze({
 /**
  * @typedef {object} PermissionDescriptionParamsObject
  * @property {Function} t - The translation function.
+ * @property {boolean} [isLegacySwitchEthereumChain] - Flag for checking if request incoming from 'wallet_switchEthereumChain'.
  * @property {string} permissionName - The name of the permission.
  * @property {object} permissionValue - The permission object.
  * @property {string} subjectName - The name of the subject.
@@ -668,6 +659,7 @@ const PERMISSION_DESCRIPTIONS = deepFreeze({
  */
 export const getPermissionDescription = ({
   t,
+  isLegacySwitchEthereumChain,
   permissionName,
   permissionValue,
   subjectName,
@@ -681,6 +673,7 @@ export const getPermissionDescription = ({
 
   const result = value({
     t,
+    isLegacySwitchEthereumChain,
     permissionName,
     permissionValue,
     subjectName,
@@ -700,6 +693,7 @@ export const getPermissionDescription = ({
 /**
  * @typedef {object} WeightedPermissionDescriptionParamsObject
  * @property {Function} t - The translation function.
+ * @property {boolean} [isLegacySwitchEthereumChain] - Flag for checking if request incoming from 'wallet_switchEthereumChain'.
  * @property {string} permissions - The permissions object.
  * @property {Function} [getSubjectName] - The function to get a subject name.
  * @property {string} [subjectName] - The name of the subject.
@@ -709,11 +703,12 @@ export const getPermissionDescription = ({
  * Get the weighted permissions from a permissions object. The weight is used to
  * sort the permissions in the UI.
  *
- * @param {WeightedPermissionDescriptionParamsObject} parms - The weighted permissions params object.
+ * @param {WeightedPermissionDescriptionParamsObject} params - The weighted permissions params object.
  * @returns {PermissionLabelObject[]}
  */
 export function getWeightedPermissions({
   t,
+  isLegacySwitchEthereumChain,
   permissions,
   getSubjectName,
   subjectName,
@@ -724,6 +719,7 @@ export function getWeightedPermissions({
         target.concat(
           getPermissionDescription({
             t,
+            isLegacySwitchEthereumChain,
             permissionName,
             permissionValue,
             subjectName,