Skip to content

fix: multichain account icon address source #35859

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.

Sign up for GitHub

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

Merged
merged 8 commits into from
Sep 12, 2025
+136 −56
Merged

fix: multichain account icon address source #35859

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
b02b63c
chore: add getIconSeedAddressByAccountGroupId
gantunesr Sep 11, 2025
d7f1672
Merge branch 'main' of https://github.com/MetaMask/metamask-extension…
gantunesr Sep 11, 2025
1b70cb0
chore: update address source
gantunesr Sep 11, 2025
829eb62
test: fix unit test
gantunesr Sep 11, 2025
dfd204c
test: fix MultichainConnectPage tests
gantunesr Sep 11, 2025
0c7a4f4
test: fix MultichainAccountList mocks
gantunesr Sep 12, 2025
a1f279f
chore: remove only from test
gantunesr Sep 12, 2025
057c6af
Merge branch 'main' of https://github.com/MetaMask/metamask-extension…
gantunesr Sep 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion ui/components/multichain-accounts/multichain-account-cell/multichain-account-cell.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import {
describe('MultichainAccountCell', () => {
const store = configureStore(mockDefaultState);
const defaultProps: MultichainAccountCellProps = {
accountId: 'entropy:01JKAF3DSGM3AB87EM9N0K41AJ/default',
accountId: 'entropy:01JKAF3DSGM3AB87EM9N0K41AJ/0',
accountName: 'Test Account',
balance: '$2,400.00',
endAccessory: <span data-testid="end-accessory">More</span>,
Expand Down
7 changes: 6 additions & 1 deletion ui/components/multichain-accounts/multichain-account-cell/multichain-account-cell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import React from 'react';
import { useSelector } from 'react-redux';
import { AccountGroupId } from '@metamask/account-api';
import { getIconSeedAddressByAccountGroupId } from '../../../selectors/multichain-accounts/account-tree';
import { Box, Icon, IconName, Text } from '../../component-library';
import { PreferredAvatar } from '../../app/preferred-avatar';
import {
Expand Down Expand Up @@ -37,6 +39,9 @@ export const MultichainAccountCell = ({
disableHoverEffect = false,
}: MultichainAccountCellProps) => {
const handleClick = () => onClick?.(accountId);
const seedAddressIcon = useSelector((state) =>
getIconSeedAddressByAccountGroupId(state, accountId),
);

return (
<Box
Expand Down Expand Up @@ -69,7 +74,7 @@ export const MultichainAccountCell = ({
}
borderRadius={BorderRadius.XL}
>
<PreferredAvatar address={accountId} />
<PreferredAvatar address={seedAddressIcon} />
</Box>
<Box>
<Text
Expand Down
28 changes: 21 additions & 7 deletions ui/components/multichain-accounts/multichain-account-list/multichain-account-list.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React from 'react';
import { screen, fireEvent, act, within } from '@testing-library/react';
import {
AccountGroupId,
AccountGroupType,
AccountWalletType,
toAccountWalletId,
toDefaultAccountGroupId,
} from '@metamask/account-api';
import { AccountTreeWallets } from '../../../selectors/multichain-accounts/account-tree.types';
import { renderWithProvider } from '../../../../test/lib/render-helpers';
Expand Down Expand Up @@ -60,12 +60,12 @@ const walletOneId = toAccountWalletId(
AccountWalletType.Entropy,
mockWalletOneEntropySource,
);
const walletOneGroupId = toDefaultAccountGroupId(walletOneId);
const walletOneGroupId = `${walletOneId}/0` as AccountGroupId;
const walletTwoId = toAccountWalletId(
AccountWalletType.Entropy,
mockWalletTwoEntropySource,
);
const walletTwoGroupId = toDefaultAccountGroupId(walletTwoId);
const walletTwoGroupId = `${walletTwoId}/0` as AccountGroupId;

const mockWallets = {
[walletOneId]: {
Expand Down Expand Up @@ -126,8 +126,8 @@ describe('MultichainAccountList', () => {
selectedAccountGroups: [walletOneGroupId],
};

const renderComponent = (props = {}) => {
const store = configureStore(mockDefaultState);
const renderComponent = (props = {}, state = mockDefaultState) => {
const store = configureStore(state);

return renderWithProvider(
<MultichainAccountList {...defaultProps} {...props} />,
Expand Down Expand Up @@ -274,7 +274,7 @@ describe('MultichainAccountList', () => {
});

it('handles multiple account groups within a single wallet', () => {
const secondGroupId = `${walletOneId}/group2`;
const secondGroupId = `${walletOneId}/1`;
const multiGroupWallets = {
[walletOneId]: {
...mockWallets[walletOneId],
Expand All @@ -287,12 +287,26 @@ describe('MultichainAccountList', () => {
metadata: {
name: 'Account 2 from wallet 1',
},
accounts: ['784225f4-d30b-4e77-a900-c8bbce735b88'],
},
},
},
};

renderComponent({ wallets: multiGroupWallets });
renderComponent(
{ wallets: multiGroupWallets },
{
...mockDefaultState,
metamask: {
...mockDefaultState.metamask,
accountTree: {
...mockDefaultState.metamask.accountTree,
// @ts-expect-error - multiGroupWallets does not follow the exact structure due to test simplification
wallets: multiGroupWallets,
},
},
},
);

expect(
screen.queryAllByTestId('multichain-account-tree-wallet-header'),
Expand Down
48 changes: 24 additions & 24 deletions ...ichain-accounts-connect-page/__snapshots__/multichain-accounts-connect-page.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`MultichainConnectPage should render correctly 1`] = `
exports[`MultichainConnectPage renders correctly 1`] = `
<div>
<div
class="mm-box multichain-page multichain-page--has-app-header mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--width-full mm-box--height-full mm-box--background-color-background-default"
Expand Down Expand Up @@ -124,7 +124,7 @@ exports[`MultichainConnectPage should render correctly 1`] = `
class="flex [&>div]:!rounded-none"
>
<div
style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 32px; height: 32px; display: inline-block; background: rgb(249, 121, 1);"
style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 32px; height: 32px; display: inline-block; background: rgb(3, 94, 89);"
>
<svg
height="32"
Expand All @@ -133,25 +133,25 @@ exports[`MultichainConnectPage should render correctly 1`] = `
y="0"
>
<rect
fill="#FB182B"
fill="#FB188D"
height="32"
transform="translate(-3.8375659682281573 -7.729920834190221) rotate(314.3 16 16)"
transform="translate(-1.104254133951512 -2.2862708533878) rotate(359.4 16 16)"
width="32"
x="0"
y="0"
/>
<rect
fill="#2339E1"
fill="#018E77"
height="32"
transform="translate(-19.46949588758067 5.5952401536807) rotate(224.1 16 16)"
transform="translate(-14.912843860816645 10.855110856776372) rotate(246.0 16 16)"
width="32"
x="0"
y="0"
/>
<rect
fill="#F2D602"
fill="#C81471"
height="32"
transform="translate(11.272402434216547 -28.26152662443702) rotate(303.2 16 16)"
transform="translate(-30.373404418783903 -6.946818612317597) rotate(324.3 16 16)"
width="32"
x="0"
y="0"
Expand Down Expand Up @@ -238,7 +238,7 @@ exports[`MultichainConnectPage should render correctly 1`] = `
</div>
`;

exports[`MultichainConnectPage should render with existing permissions correctly 1`] = `
exports[`MultichainConnectPage renders with existing permissions correctly 1`] = `
<div>
<div
class="mm-box multichain-page multichain-page--has-app-header mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--width-full mm-box--height-full mm-box--background-color-background-default"
Expand Down Expand Up @@ -362,7 +362,7 @@ exports[`MultichainConnectPage should render with existing permissions correctly
class="flex [&>div]:!rounded-none"
>
<div
style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 32px; height: 32px; display: inline-block; background: rgb(249, 121, 1);"
style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 32px; height: 32px; display: inline-block; background: rgb(3, 94, 89);"
>
<svg
height="32"
Expand All @@ -371,25 +371,25 @@ exports[`MultichainConnectPage should render with existing permissions correctly
y="0"
>
<rect
fill="#FB182B"
fill="#FB188D"
height="32"
transform="translate(-3.8375659682281573 -7.729920834190221) rotate(314.3 16 16)"
transform="translate(-1.104254133951512 -2.2862708533878) rotate(359.4 16 16)"
width="32"
x="0"
y="0"
/>
<rect
fill="#2339E1"
fill="#018E77"
height="32"
transform="translate(-19.46949588758067 5.5952401536807) rotate(224.1 16 16)"
transform="translate(-14.912843860816645 10.855110856776372) rotate(246.0 16 16)"
width="32"
x="0"
y="0"
/>
<rect
fill="#F2D602"
fill="#C81471"
height="32"
transform="translate(11.272402434216547 -28.26152662443702) rotate(303.2 16 16)"
transform="translate(-30.373404418783903 -6.946818612317597) rotate(324.3 16 16)"
width="32"
x="0"
y="0"
Expand Down Expand Up @@ -476,7 +476,7 @@ exports[`MultichainConnectPage should render with existing permissions correctly
</div>
`;

exports[`MultichainConnectPage should render with multichain origin request correctly 1`] = `
exports[`MultichainConnectPage renders with multichain origin request correctly 1`] = `
<div>
<div
class="mm-box multichain-page multichain-page--has-app-header mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-center mm-box--width-full mm-box--height-full mm-box--background-color-background-default"
Expand Down Expand Up @@ -600,7 +600,7 @@ exports[`MultichainConnectPage should render with multichain origin request corr
class="flex [&>div]:!rounded-none"
>
<div
style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 32px; height: 32px; display: inline-block; background: rgb(249, 121, 1);"
style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 32px; height: 32px; display: inline-block; background: rgb(3, 94, 89);"
>
<svg
height="32"
Expand All @@ -609,25 +609,25 @@ exports[`MultichainConnectPage should render with multichain origin request corr
y="0"
>
<rect
fill="#FB182B"
fill="#FB188D"
height="32"
transform="translate(-3.8375659682281573 -7.729920834190221) rotate(314.3 16 16)"
transform="translate(-1.104254133951512 -2.2862708533878) rotate(359.4 16 16)"
width="32"
x="0"
y="0"
/>
<rect
fill="#2339E1"
fill="#018E77"
height="32"
transform="translate(-19.46949588758067 5.5952401536807) rotate(224.1 16 16)"
transform="translate(-14.912843860816645 10.855110856776372) rotate(246.0 16 16)"
width="32"
x="0"
y="0"
/>
<rect
fill="#F2D602"
fill="#C81471"
height="32"
transform="translate(11.272402434216547 -28.26152662443702) rotate(303.2 16 16)"
transform="translate(-30.373404418783903 -6.946818612317597) rotate(324.3 16 16)"
width="32"
x="0"
y="0"
Expand Down
Loading
Loading