Skip to content

Commit c380ca0

Browse files
runway-github[bot]vinnyhowardtommasini
authored
chore(runway): cherry-pick fix(16004): filter network icons by account scopes in dapp connections (#16246)
- fix(16004): filter network icons by account scopes in dapp connections (#16041) ## **Description** This PR fixes a bug where multichain dapp connections displayed incorrect network icons for accounts. Previously, all accounts would show network icons for all connected networks regardless of the account's actual blockchain type. ## **Related issues** Fixes: #16004 ## **Manual testing steps** 1. Connect to any dapp 2. Click on the top right (the account icon) 3. Manage your permissions by editing the accounts/networks connected 4. Observe that the correct network icons are shown for the account type (evm/non-evm) ## **Screenshots/Recordings** https://github.com/user-attachments/assets/0ca368d6-2400-422f-9f54-40db96506b3c ### **Before** ![image](https://github.com/user-attachments/assets/82db9d36-1032-49fd-ba32-3a7e78ea7cf2) ### **After** ![Screenshot 2025-06-03 at 1 53 19 PM](https://github.com/user-attachments/assets/f53874e8-a3d1-4f35-a120-5b356526f715) ## **Pre-merge author checklist** - [x] I’ve followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile Coding Standards](https://github.com/MetaMask/metamask-mobile/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-mobile/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. [a63aab6](a63aab6) Co-authored-by: Vince Howard <vincenguyenhoward@gmail.com> Co-authored-by: tommasini <46944231+tommasini@users.noreply.github.com>
1 parent 13b36ef commit c380ca0

17 files changed

Lines changed: 433 additions & 92 deletions

‎app/components/UI/PermissionsSummary/PermissionsSummary.test.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { CaipAccountId } from '@metamask/utils';
2+
import { CaipAccountId, CaipChainId } from '@metamask/utils';
33
import { EthScope } from '@metamask/keyring-api';
44
import PermissionsSummary from './PermissionsSummary';
55
import { backgroundState } from '../../../util/test/initial-root-state';
@@ -29,6 +29,7 @@ const MOCK_ACCOUNTS = [
2929
yOffset: 0,
3030
type: KeyringTypes.simple,
3131
isLoadingAccount: false,
32+
scopes: [EthScope.Eoa],
3233
},
3334
];
3435

@@ -44,6 +45,7 @@ const MOCK_NETWORK_AVATARS = [
4445
imageSource: { uri: 'test-network-avatar.png' },
4546
size: AvatarSize.Xs,
4647
variant: AvatarVariant.Network,
48+
caipChainId: 'eip155:1' as CaipChainId,
4749
},
4850
];
4951

‎app/components/UI/PermissionsSummary/PermissionsSummary.tsx‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
import ScrollableTabView from 'react-native-scrollable-tab-view';
99
import DefaultTabBar from 'react-native-scrollable-tab-view/DefaultTabBar';
1010
import { useNavigation } from '@react-navigation/native';
11+
import { NON_EVM_TESTNET_IDS } from '@metamask/multichain-network-controller';
1112
import StyledButton from '../StyledButton';
1213
import { strings } from '../../../../locales/i18n';
1314
import { useTheme } from '../../../util/theme';
@@ -64,7 +65,7 @@ import {
6465
SCALE_FACTOR,
6566
} from './PermissionSummary.constants';
6667
import { isCaipAccountIdInPermittedAccountIds } from '@metamask/chain-agnostic-permission';
67-
import { parseCaipAccountId } from '@metamask/utils';
68+
import { CaipChainId, parseCaipAccountId } from '@metamask/utils';
6869
import BadgeWrapper from '../../../component-library/components/Badges/BadgeWrapper';
6970
import Badge, {
7071
BadgeVariant,
@@ -552,6 +553,14 @@ const PermissionsSummary = ({
552553
[styles, colors],
553554
);
554555

556+
const filteredAccountAddresses = useMemo(
557+
() =>
558+
accountAddresses.filter((address) => {
559+
const { chainId: caipChainId } = parseCaipAccountId(address);
560+
return !NON_EVM_TESTNET_IDS.includes(caipChainId as CaipChainId);
561+
}),
562+
[accountAddresses],
563+
);
555564
const renderAccountsConnectedList = useCallback(
556565
(
557566
accountsConnectedTabKey: string,
@@ -568,7 +577,7 @@ const PermissionsSummary = ({
568577
) : (
569578
<AccountsConnectedList
570579
key={accountsConnectedTabKey}
571-
selectedAddresses={accountAddresses}
580+
selectedAddresses={filteredAccountAddresses}
572581
ensByAccountAddress={ensByAccountAddress}
573582
accounts={accounts}
574583
privacyMode={privacyMode}
@@ -578,14 +587,14 @@ const PermissionsSummary = ({
578587
/>
579588
),
580589
[
581-
accountAddresses,
582590
ensByAccountAddress,
583-
accounts,
584591
privacyMode,
585592
networkAvatars,
586593
handleEditAccountsButtonPress,
587594
promptToCreateSolanaAccount,
588595
onCreateAccount,
596+
accounts,
597+
filteredAccountAddresses,
589598
],
590599
);
591600

‎app/components/UI/PermissionsSummary/__snapshots__/PermissionsSummary.test.tsx.snap‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -367,6 +367,7 @@ exports[`PermissionsSummary should render correctly 1`] = `
367367
testID="avatargroup-avatar-container-0"
368368
>
369369
<View
370+
caipChainId="eip155:1"
370371
style={
371372
{
372373
"alignItems": "center",
@@ -900,6 +901,7 @@ exports[`PermissionsSummary should render correctly 1`] = `
900901
testID="avatargroup-avatar-container-0"
901902
>
902903
<View
904+
caipChainId="eip155:1"
903905
style={
904906
{
905907
"alignItems": "center",
@@ -2807,6 +2809,7 @@ exports[`PermissionsSummary should render only the network permissions card when
28072809
testID="avatargroup-avatar-container-0"
28082810
>
28092811
<View
2812+
caipChainId="eip155:1"
28102813
style={
28112814
{
28122815
"alignItems": "center",
@@ -3442,6 +3445,7 @@ exports[`PermissionsSummary should render the tab view when both showAccountsOnl
34423445
testID="avatargroup-avatar-container-0"
34433446
>
34443447
<View
3448+
caipChainId="eip155:1"
34453449
style={
34463450
{
34473451
"alignItems": "center",
@@ -3975,6 +3979,7 @@ exports[`PermissionsSummary should render the tab view when both showAccountsOnl
39753979
testID="avatargroup-avatar-container-0"
39763980
>
39773981
<View
3982+
caipChainId="eip155:1"
39783983
style={
39793984
{
39803985
"alignItems": "center",
@@ -4611,6 +4616,7 @@ exports[`PermissionsSummary should render with the correct initial tab based on
46114616
testID="avatargroup-avatar-container-0"
46124617
>
46134618
<View
4619+
caipChainId="eip155:1"
46144620
style={
46154621
{
46164622
"alignItems": "center",
@@ -5144,6 +5150,7 @@ exports[`PermissionsSummary should render with the correct initial tab based on
51445150
testID="avatargroup-avatar-container-0"
51455151
>
51465152
<View
5153+
caipChainId="eip155:1"
51475154
style={
51485155
{
51495156
"alignItems": "center",

‎app/components/UI/WalletAccount/WalletAccount.test.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import React from 'react';
33
import { fireEvent, waitFor } from '@testing-library/react-native';
44
import { KeyringTypes } from '@metamask/keyring-controller';
55
import { Hex } from '@metamask/utils';
6+
import { EthScope } from '@metamask/keyring-api';
67

78
// External dependencies
89
import renderWithProvider, {
@@ -36,6 +37,7 @@ const mockAccount: Account = {
3637
isSelected: true,
3738
caipAccountId: `eip155:0:${internalAccount2.address}`,
3839
isLoadingAccount: false,
40+
scopes: [EthScope.Eoa],
3941
};
4042

4143
jest.mock('../../../core/Engine', () => {

‎app/components/Views/AccountConnect/AccountConnect.tsx‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import React, {
1010
} from 'react';
1111
import Modal from 'react-native-modal';
1212
import { useSelector } from 'react-redux';
13+
import { NON_EVM_TESTNET_IDS } from '@metamask/multichain-network-controller';
1314

1415
// External dependencies.
1516
import { strings } from '../../../../locales/i18n';
@@ -201,12 +202,17 @@ const AccountConnect = (props: AccountConnectProps) => {
201202

202203
const selectedNetworkAvatars = useMemo(
203204
() =>
204-
selectedChainIds.map((selectedChainId) => ({
205-
size: AvatarSize.Xs,
206-
name: networkConfigurations[selectedChainId]?.name || '',
207-
imageSource: getNetworkImageSource({ chainId: selectedChainId }),
208-
variant: AvatarVariant.Network,
209-
})),
205+
selectedChainIds
206+
.filter(
207+
(selectedChainId) => !NON_EVM_TESTNET_IDS.includes(selectedChainId),
208+
)
209+
.map((selectedChainId) => ({
210+
size: AvatarSize.Xs,
211+
name: networkConfigurations[selectedChainId]?.name || '',
212+
imageSource: getNetworkImageSource({ chainId: selectedChainId }),
213+
variant: AvatarVariant.Network,
214+
caipChainId: selectedChainId,
215+
})),
210216
[networkConfigurations, selectedChainIds],
211217
);
212218

‎app/components/Views/AccountConnect/AccountConnect.types.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { ImageSourcePropType } from 'react-native';
2+
import { CaipChainId } from '@metamask/utils';
23
import {
34
AvatarSize,
45
AvatarVariant,
@@ -55,4 +56,5 @@ export interface NetworkAvatarProps {
5556
name: string;
5657
imageSource: ImageSourcePropType;
5758
variant: AvatarVariant;
59+
caipChainId: CaipChainId;
5860
}

‎app/components/Views/AccountConnect/AccountConnectMultiSelector/AccountConnectMultiSelector.test.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
22
import { fireEvent } from '@testing-library/react-native';
3+
import { EthScope, SolScope } from '@metamask/keyring-api';
34
import renderWithProvider from '../../../../util/test/renderWithProvider';
45
import AccountConnectMultiSelector from './AccountConnectMultiSelector';
56
import { backgroundState } from '../../../../util/test/initial-root-state';
@@ -9,7 +10,6 @@ import { ConnectAccountBottomSheetSelectorsIDs } from '../../../../../e2e/select
910
import { KeyringTypes } from '@metamask/keyring-controller';
1011
import { CaipAccountId } from '@metamask/utils';
1112
import { WalletClientType } from '../../../../core/SnapKeyring/MultichainWalletSnapClient';
12-
import { SolScope } from '@metamask/keyring-api';
1313

1414
const mockNavigate = jest.fn();
1515
const mockOnSubmit = jest.fn();
@@ -61,6 +61,7 @@ const mockAccounts = [
6161
isSelected: false,
6262
caipAccountId: 'eip155:0:0x1234' as const,
6363
isLoadingAccount: false,
64+
scopes: [EthScope.Eoa],
6465
},
6566
{
6667
address: '0x5678',
@@ -71,6 +72,7 @@ const mockAccounts = [
7172
isSelected: false,
7273
caipAccountId: 'eip155:0:0x5678' as const,
7374
isLoadingAccount: false,
75+
scopes: [EthScope.Eoa],
7476
},
7577
];
7678

‎app/components/Views/AccountConnect/AccountConnectMultiSelector/__snapshots__/AccountConnectMultiSelector.test.tsx.snap‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -247,6 +247,9 @@ exports[`AccountConnectMultiSelector renders correctly 1`] = `
247247
"isLoadingAccount": false,
248248
"isSelected": false,
249249
"name": "Account 1",
250+
"scopes": [
251+
"eip155:0",
252+
],
250253
"type": "Simple Key Pair",
251254
"yOffset": 0,
252255
},
@@ -257,6 +260,9 @@ exports[`AccountConnectMultiSelector renders correctly 1`] = `
257260
"isLoadingAccount": false,
258261
"isSelected": false,
259262
"name": "Account 2",
263+
"scopes": [
264+
"eip155:0",
265+
],
260266
"type": "Simple Key Pair",
261267
"yOffset": 0,
262268
},

0 commit comments

Comments
 (0)