feat: Solana accountChanged event

app/components/UI/CaipAccountSelectorList/CaipAccountSelectorList.tsx

@@ -32,7 +32,7 @@ import { Account, Assets } from '../../hooks/useAccounts';
 import Engine from '../../../core/Engine';
 import {
   removeAccountsFromPermissions,
-  sortAccountsByLastSelected,
+  sortMultichainAccountsByLastSelected,
 } from '../../../core/Permissions';
 import Routes from '../../../constants/navigation/Routes';
 
@@ -44,8 +44,7 @@ import { WalletViewSelectorsIDs } from '../../../../e2e/selectors/wallet/WalletV
 import { RootState } from '../../../reducers';
 import { ACCOUNT_SELECTOR_LIST_TESTID } from './CaipAccountSelectorList.constants';
 import { toHex } from '@metamask/controller-utils';
-import { CaipAccountId, Hex } from '@metamask/utils';
-import { parseAccountId } from '@walletconnect/utils';
+import { CaipAccountId, parseCaipAccountId } from '@metamask/utils';
 
 const CaipAccountSelectorList = ({
   onSelectAccount,
@@ -155,21 +154,15 @@ const CaipAccountSelectorList = ({
                   const nextCaipAccountIds = selectedAddresses.filter(
                     (selectedAddress) => selectedAddress !== caipAccountId,
                   );
-                  const nextAddresses = nextCaipAccountIds.map(
-                    (nextCaipAccountId) => {
-                      const { address: nextAddress } =
-                        parseAccountId(nextCaipAccountId);
-                      return nextAddress as Hex;
-                    },
-                  );
+                  const [nextCaipAccountId] =
+                    sortMultichainAccountsByLastSelected(nextCaipAccountIds);
 
-                  const nextAddressesSorted =
-                    sortAccountsByLastSelected(nextAddresses);
+                  const nextAddress = nextCaipAccountId ? parseCaipAccountId(nextCaipAccountId).address : '';
                   const selectedAccountAddress = accounts.find(
                     (acc) => acc.isSelected,
                   )?.address;
                   nextActiveAddress =
-                    nextAddressesSorted[0] || selectedAccountAddress || '';
+                  nextAddress || selectedAccountAddress || '';
                 }
 
                 // Switching accounts on the PreferencesController must happen before account is removed from the KeyringController, otherwise UI will break.

app/components/Views/AccountConnect/AccountConnect.tsx

@@ -470,7 +470,7 @@ const AccountConnect = (props: AccountConnectProps) => {
         ),
       },
     };
-    
+
     const connectedAccountLength = selectedAddresses.length;
     const activeAddress = selectedAddresses[0];
 

app/components/Views/AccountPermissions/AccountPermissions.test.tsx

@@ -135,6 +135,7 @@ jest.mock('../../../core/Engine', () => ({
     },
     AccountsController: {
       listAccounts: jest.fn(() => MOCK_USE_ACCOUNTS_RETURN),
+      listMultichainAccounts: jest.fn(() => MOCK_INTERNAL_ACCOUNTS),
       getAccountByAddress: jest.fn((address: string) =>
         MOCK_INTERNAL_ACCOUNTS.find((account) => account.address === address),
       ),
@@ -240,13 +241,6 @@ const mockInitialState = (
   },
 });
 
-const evmNetworkConfigurationsByChainId =
-  mockInitialState().engine?.backgroundState?.NetworkController
-    ?.networkConfigurationsByChainId;
-const nonEvmNetworkConfigurationsByChainId =
-  mockInitialState().engine?.backgroundState?.MultichainNetworkController
-    ?.multichainNetworkConfigurationsByChainId;
-
 describe('AccountPermissions', () => {
   beforeEach(() => {
     mockUpdatePermittedChains.mockReset();
@@ -426,8 +420,6 @@ describe('AccountPermissions', () => {
     expect(mockAddPermittedAccounts).toHaveBeenCalledWith(
       'test',
       ['eip155:0:0xd018538C87232FF95acbCe4870629b75640a78E7'],
-      evmNetworkConfigurationsByChainId,
-      nonEvmNetworkConfigurationsByChainId,
     );
   });
 
@@ -457,8 +449,6 @@ describe('AccountPermissions', () => {
     expect(mockAddPermittedAccounts).toHaveBeenCalledWith(
       'test',
       ['eip155:0:0xd018538C87232FF95acbCe4870629b75640a78E7'],
-      evmNetworkConfigurationsByChainId,
-      nonEvmNetworkConfigurationsByChainId,
     );
     expect(mockRemovePermittedAccounts).not.toHaveBeenCalled();
   });
@@ -527,8 +517,6 @@ describe('AccountPermissions', () => {
     expect(mockAddPermittedAccounts).toHaveBeenCalledWith(
       'test',
       ['eip155:0:0xd018538C87232FF95acbCe4870629b75640a78E7'],
-      evmNetworkConfigurationsByChainId,
-      nonEvmNetworkConfigurationsByChainId,
     );
     expect(mockRemovePermittedAccounts).toHaveBeenCalledWith('test', [
       '0xC4955C0d639D99699Bfd7Ec54d9FaFEe40e4D272',

app/components/Views/AccountPermissions/AccountPermissions.tsx

@@ -23,6 +23,7 @@ import {
   getPermittedCaipAccountIdsByHostname,
   removePermittedAccounts,
   getPermittedCaipChainIdsByHostname,
+  sortMultichainAccountsByLastSelected,
 } from '../../../core/Permissions';
 import AccountConnectMultiSelector from '../AccountConnect/AccountConnectMultiSelector';
 import NetworkConnectMultiSelector from '../NetworkConnect/NetworkConnectMultiSelector';
@@ -87,7 +88,6 @@ import { parseChainId } from '@walletconnect/utils';
 import { NetworkConfiguration } from '@metamask/network-controller';
 import { NetworkAvatarProps } from '../AccountConnect/AccountConnect.types';
 import styleSheet from './AccountPermissions.styles';
-import { selectNonEvmNetworkConfigurationsByChainId } from '../../../selectors/multichainNetworkController';
 
 const AccountPermissions = (props: AccountPermissionsProps) => {
   const { navigate } = useNavigation();
@@ -109,8 +109,6 @@ const AccountPermissions = (props: AccountPermissionsProps) => {
 
   const accountsLength = useSelector(selectAccountsLength);
   const currentEvmChainId = useSelector(selectEvmChainId);
-  const evmNetworkConfigurationsByChainId = useSelector(selectEvmNetworkConfigurationsByChainId);
-  const nonEvmNetworkConfigurationsByChainId = useSelector(selectNonEvmNetworkConfigurationsByChainId);
   const networkInfo = useNetworkInfo(hostname);
   const nonTestnetNetworks = useSelector(
     (state: RootState) =>
@@ -138,7 +136,8 @@ const AccountPermissions = (props: AccountPermissionsProps) => {
     permittedAccountsList,
     hostname,
   );
-  const permittedCaipAccountIds = uniq(
+  const permittedCaipAccountIds = useMemo(() => {
+    const unsortedPermittedAccounts = uniq(
     nonRemappedPermittedAccounts.map((caipAccountId) => {
       const {
         address,
@@ -149,8 +148,10 @@ const AccountPermissions = (props: AccountPermissionsProps) => {
         return `eip155:0:${address}` as CaipAccountId;
       }
       return caipAccountId;
-    }),
-  );
+    }));
+
+    return sortMultichainAccountsByLastSelected(unsortedPermittedAccounts);
+  }, [nonRemappedPermittedAccounts]);
 
   const permittedCaipChainIds = getPermittedCaipChainIdsByHostname(
     permittedAccountsList,
@@ -424,7 +425,7 @@ const AccountPermissions = (props: AccountPermissionsProps) => {
         );
 
         if (accountsToAdd.length > 0) {
-          addPermittedAccounts(hostname, accountsToAdd, evmNetworkConfigurationsByChainId, nonEvmNetworkConfigurationsByChainId);
+          addPermittedAccounts(hostname, accountsToAdd);
           newPermittedAccounts = [...newPermittedAccounts, ...accountsToAdd];
         }
 
@@ -484,8 +485,6 @@ const AccountPermissions = (props: AccountPermissionsProps) => {
       }
     },
     [
-      evmNetworkConfigurationsByChainId,
-      nonEvmNetworkConfigurationsByChainId,
       permittedCaipAccountIds,
       setIsLoading,
       hostname,
@@ -623,7 +622,8 @@ const AccountPermissions = (props: AccountPermissionsProps) => {
         onDismissSheet={hideSheet}
         accounts={accountsFilteredByPermissions.permitted}
         ensByAccountAddress={ensByAccountAddress}
-        selectedAddresses={permittedCaipAccountIds}
+        // This is only okay because permittedCaipAccountIds is sorted by lastSelected already
+        selectedAddresses={permittedCaipAccountIds.length > 0 ? [permittedCaipAccountIds[0]] : []}
         favicon={faviconSource}
         hostname={hostname}
         urlWithProtocol={urlWithProtocol}

app/components/Views/AccountPermissions/AccountPermissionsConnected/AccountPermissionsConnected.tsx

@@ -5,7 +5,6 @@ import { View } from 'react-native';
 // External dependencies.
 import SheetActions from '../../../../component-library/components-temp/SheetActions';
 import { strings } from '../../../../../locales/i18n';
-import EvmAccountSelectorList from '../../../../components/UI/EvmAccountSelectorList';
 import { AccountPermissionsScreens } from '../AccountPermissions.types';
 import {
   ToastContext,
@@ -30,6 +29,8 @@ import Button, {
   ButtonWidthTypes,
 } from '../../../../component-library/components/Buttons/Button';
 import Engine from '../../../../core/Engine';
+import CaipAccountSelectorList from '../../../UI/CaipAccountSelectorList';
+import { CaipAccountId, parseCaipAccountId } from '@metamask/utils';
 
 const AccountPermissionsConnected = ({
   ensByAccountAddress,
@@ -42,21 +43,19 @@ const AccountPermissionsConnected = ({
   favicon,
   accountAvatarType,
 }: AccountPermissionsConnectedProps) => {
-  const activeAddress = selectedAddresses[0];
   const { toastRef } = useContext(ToastContext);
 
   const onConnectMoreAccounts = useCallback(() => {
     onSetPermissionsScreen(AccountPermissionsScreens.ConnectMoreAccounts);
   }, [onSetPermissionsScreen]);
 
   const switchActiveAccount = useCallback(
-    (address: string) => {
-      if (address !== activeAddress) {
-        Engine.setSelectedAddress(address);
-      }
+    (caipAccountId: CaipAccountId) => {
+      const {address} = parseCaipAccountId(caipAccountId);
+      Engine.setSelectedAddress(address);
       onDismissSheet();
       const activeAccountName = getAccountNameWithENS({
-        accountAddress: address,
+        caipAccountId,
         accounts,
         ensByAccountAddress,
       });
@@ -75,7 +74,6 @@ const AccountPermissionsConnected = ({
       });
     },
     [
-      activeAddress,
       onDismissSheet,
       accounts,
       ensByAccountAddress,
@@ -120,7 +118,7 @@ const AccountPermissionsConnected = ({
           {strings('accounts.connected_accounts_title')}
         </Text>
       </View>
-      <EvmAccountSelectorList
+      <CaipAccountSelectorList
         onSelectAccount={switchActiveAccount}
         accounts={accounts}
         ensByAccountAddress={ensByAccountAddress}

app/components/Views/AccountPermissions/AccountPermissionsConnected/AccountPermissionsConnected.types.ts

@@ -6,14 +6,15 @@ import { UseAccounts } from '../../../hooks/useAccounts';
 import { AccountPermissionsScreens } from '../AccountPermissions.types';
 import { IconName } from '../../../../component-library/components/Icons/Icon';
 import { AvatarAccountType } from '../../../../component-library/components/Avatars/Avatar/variants/AvatarAccount';
+import { CaipAccountId } from '@metamask/utils';
 
 /**
  * AccountPermissionsConnected props.
  */
 export interface AccountPermissionsConnectedProps
   extends Omit<UseAccounts, 'evmAccounts'> {
   isLoading?: boolean;
-  selectedAddresses: string[];
+  selectedAddresses: CaipAccountId[];
   onSetPermissionsScreen: (screen: AccountPermissionsScreens) => void;
   onDismissSheet: () => void;
   hostname: string;

app/components/Views/AccountPermissions/__snapshots__/AccountPermissions.test.tsx.snap

@@ -242,7 +242,7 @@ exports[`AccountPermissions renders correctly 1`] = `
               style={
                 {
                   "alignItems": "center",
-                  "backgroundColor": "#ffffff",
+                  "backgroundColor": "#4459ff1a",
                   "flexDirection": "row",
                 }
               }
@@ -569,6 +569,34 @@ exports[`AccountPermissions renders correctly 1`] = `
                     </View>
                   </View>
                 </View>
+                <View
+                  accessibilityRole="checkbox"
+                  accessible={true}
+                  style={
+                    {
+                      "backgroundColor": "#4459ff1a",
+                      "bottom": 0,
+                      "flexDirection": "row",
+                      "left": 0,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                      "width": 4,
+                    }
+                  }
+                >
+                  <View
+                    style={
+                      {
+                        "backgroundColor": "#4459ff",
+                        "borderRadius": 2,
+                        "marginLeft": 4,
+                        "marginVertical": 4,
+                        "width": 4,
+                      }
+                    }
+                  />
+                </View>
               </TouchableOpacity>
               <View
                 style={

app/components/Views/Browser/index.js

@@ -208,12 +208,12 @@ const homePageUrl = useCallback(
 
   useEffect(() => {
     const checkIfActiveAccountChanged = (hostnameForToastCheck) => {
-      const permittedAccounts = getPermittedAccounts(hostnameForToastCheck);
-      const activeAccountAddress = permittedAccounts?.[0];
+      const permittedEvmAccounts = getPermittedAccounts(hostnameForToastCheck);
+      const activeAccountAddress = permittedEvmAccounts?.[0];
 
       if (activeAccountAddress) {
         const accountName = getAccountNameWithENS({
-          accountAddress: activeAccountAddress,
+          caipAccountId: `eip155:0:${activeAccountAddress}`,
           accounts,
           ensByAccountAddress,
         });
@@ -495,4 +495,4 @@ Browser.propTypes = {
 
 export { default as createBrowserNavDetails } from './Browser.types';
 
-export default connect(mapStateToProps, mapDispatchToProps)(Browser);
+export default connect(mapStateToProps, mapDispatchToProps)(Browser);

app/components/Views/Browser/index.test.tsx

@@ -275,12 +275,13 @@ describe('Browser', () => {
 
     // Mock accounts and ENS data
     const mockAccounts = [
-      { 
-        address: testAccountAddress, 
+      {
+        address: testAccountAddress,
         name: mockAccountName,
         type: KeyringTypes.simple,
         yOffset: 0,
-        isSelected: true
+        isSelected: true,
+        caipAccountId: `eip155:0:${testAccountAddress}`
       }
     ];
     const mockEnsByAccountAddress = {
@@ -365,8 +366,8 @@ describe('Browser', () => {
     const mockAccountName2 = 'Account 2';
 
     const mockAccounts = [
-      { address: testAccountAddress1, name: mockAccountName1, type: KeyringTypes.simple, yOffset: 0, isSelected: true },
-      { address: testAccountAddress2, name: mockAccountName2, type: KeyringTypes.simple, yOffset: 0, isSelected: false },
+      { address: testAccountAddress1, name: mockAccountName1, type: KeyringTypes.simple, yOffset: 0, isSelected: true, caipAccountId: `eip155:0:${testAccountAddress1}` },
+      { address: testAccountAddress2, name: mockAccountName2, type: KeyringTypes.simple, yOffset: 0, isSelected: false, caipAccountId: `eip155:0:${testAccountAddress2}` },
     ];
     const mockEnsByAccountAddress = {
       [testAccountAddress1]: 'account1.eth',

app/components/Views/BrowserTab/BrowserTab.tsx

@@ -55,6 +55,7 @@ import {
   getCaip25Caveat,
   getPermittedCaipAccountIdsByHostname,
   getPermittedEvmAddressesByHostname,
+  sortMultichainAccountsByLastSelected,
 } from '../../../core/Permissions';
 import Routes from '../../../constants/navigation/Routes';
 import {
@@ -187,7 +188,7 @@ export const BrowserTab: React.FC<BrowserTabProps> = React.memo(({
   const backgroundBridgeRef = useRef<{
     url: string;
     hostname: string;
-    sendNotification: (payload: unknown) => void;
+    sendNotificationEip1193: (payload: unknown) => void;
     onDisconnect: () => void;
     onMessage: (message: Record<string, unknown>) => void;
   }>();
@@ -211,10 +212,11 @@ export const BrowserTab: React.FC<BrowserTabProps> = React.memo(({
       permissionsControllerState,
       hostname,
     );
-    const permittedAccountAddresses = permittedAccountIds.map((accountId) => {
-      const { address } = parseCaipAccountId(accountId)
+    const sortedPermittedAccountIds = sortMultichainAccountsByLastSelected(permittedAccountIds);
+    const permittedAccountAddresses = sortedPermittedAccountIds.map((accountId) => {
+      const { address } = parseCaipAccountId(accountId);
       return address;
-    })
+    });
     return permittedAccountAddresses;
   }, isEqual);
 
@@ -248,7 +250,7 @@ export const BrowserTab: React.FC<BrowserTabProps> = React.memo(({
   }, []);
 
   const notifyAllConnections = useCallback((payload: unknown) => {
-    backgroundBridgeRef.current?.sendNotification(payload);
+    backgroundBridgeRef.current?.sendNotificationEip1193(payload);
   }, []);
 
   /**