feat(4057): replace asset avatars with network avatars #13910

vinnyhoward · 2025-03-07T00:53:06Z

Description

This PR changes the account list item to display network avatars. This change supports a more network-centric approach to account selection, which is more valuable in a multichain context. Here is the Figma

Implementation

The account list now shows the top 4 networks by total value for each account
Networks are sorted by their total fiat balance
Only networks with a balance greater than zero are displayed
The implementation uses the existing useMultiAccountChainBalances hook to get balance data across chains for all accounts

Related issues

Feature: #4057

Manual testing steps

Go to this page wallet home screen
Click on account picker at the top
Observe that account selector now have network icons sorted by aggregated network balance

Screenshots/Recordings

Recording

Before	After

Screenshot

Before	After

Before

NA

After

NA

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.

…n list. added new hook to fetch aggregated chain data for all accounts

github-actions · 2025-03-07T00:53:20Z

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.

…alancse for account selector list are always shown now

github-actions · 2025-03-11T21:44:54Z

Bitrise

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

Commit hash: 3e47871
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/0fd910bc-3219-456b-bdd8-231a4dbe78f1

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

…4057-replace-asset-avatars-with-network-avatars

github-actions · 2025-03-11T21:47:20Z

Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: 675ab11
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/9c920c5d-8d96-44f2-b6f1-5e82aee097e8

Note

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

vinnyhoward · 2025-03-12T02:19:52Z

app/component-library/components/Avatars/AvatarGroup/AvatarGroup.tsx

@@ -27,51 +27,55 @@ const AvatarGroup = ({
  maxStackedAvatars = DEFAULT_AVATARGROUP_MAXSTACKEDAVATARS,
  includesBorder = true,
  spaceBetweenAvatars,
+  renderOverflowCounter = true,


This is introduced to optionally avoid rendering the overflow counter to match the Figma

with prop without prop

vinnyhoward · 2025-03-12T02:21:14Z

app/components/UI/AccountSelectorList/AccountSelector.test.tsx

      expect(
        within(businessAccountItem).getByText(regex.usd(3200)),
      ).toBeDefined();

      expect(within(businessAccountItem).queryByText('••••••')).toBeNull();
    });
  });
-  it('Text is hidden when privacy mode is on', async () => {


This test is removed because we are no longer showing the selected network token balance, instead it shows the network avatar icons. See the before and after screenshots

vinnyhoward · 2025-03-12T02:22:01Z

app/components/UI/AccountSelectorList/AccountSelectorList.tsx

      const fiatBalanceStrSplit = fiatBalance.split('\n');
      const fiatBalanceAmount = fiatBalanceStrSplit[0] || '';
-      const tokenTicker = fiatBalanceStrSplit[1] || '';


No longer shows the token balance based on selected network. See before and after screenshots

vinnyhoward · 2025-03-12T02:25:06Z

app/components/hooks/useAccounts/useAccounts.ts

@@ -73,7 +78,7 @@ const useAccounts = ({
  );
  const formattedTokensWithBalancesPerChain = useGetFormattedTokensPerChain(
    internalAccounts,
-    !isTokenNetworkFilterEqualCurrentNetwork,
+    shouldAggregateAcrossChains || !isTokenNetworkFilterEqualCurrentNetwork,


This arg is added to allow the opting out of the popular network filter. Going forward we should always show the aggregated balance of each account in the app/components/UI/AccountSelectorList/AccountSelectorList.tsx. The network filter should not affect the AccountSelectorList component and should only affect the token list

github-actions · 2025-03-12T02:27:35Z

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: 01a4d95
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/29440b90-9e84-49cc-bb83-d62d6781bf89

Note

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

Tip

Check the documentation if you have any doubts on how to understand the failure on bitrise

…-avatars

github-actions · 2025-03-12T20:48:07Z

Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: f741507
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/c7ea3a8d-b5ca-433c-80e4-5cd5c9ffeb01

Note

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-03-12T20:59:37Z

Quality Gate passed

Issues
2 New issues
0 Accepted issues

Measures
0 Security Hotspots
80.2% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

gambinish · 2025-03-12T23:26:13Z

app/component-library/components/Avatars/AvatarGroup/AvatarGroup.styles.ts

+    avatarGroup: {
+      borderRadius: 4,
+      borderWidth: 2,
+      height: 16,
+      width: 16,
+    },


Will these styles be applied to all AvatarGroup styles throughout the app?

Theres only one other instance of it being used which is network permission summary when interacting with dapps. I believe this change is fine for that scenario but I'll double check with Hester

feat: replaced asset avatars with network avatars in account selectio…

d5508fa

…n list. added new hook to fetch aggregated chain data for all accounts

metamaskbot added the team-wallet-ux label Mar 7, 2025

vinnyhoward added 3 commits March 6, 2025 17:54

fix: update comments

f2ac4e4

fix: update and refined account selector unit tests

5641532

fix: add test coverage as well as fixed more unit tests, aggregated b…

3e47871

…alancse for account selector list are always shown now

vinnyhoward added Run Smoke E2E Triggers smoke e2e on Bitrise team-design-system All issues relating to design system in Mobile labels Mar 11, 2025

Merge branch 'main' of github.com:MetaMask/metamask-mobile into feat-…

675ab11

…4057-replace-asset-avatars-with-network-avatars

vinnyhoward added Run Smoke E2E Triggers smoke e2e on Bitrise and removed Run Smoke E2E Triggers smoke e2e on Bitrise labels Mar 11, 2025

vinnyhoward commented Mar 12, 2025

View reviewed changes

update: comments

01a4d95

vinnyhoward added Run Smoke E2E Triggers smoke e2e on Bitrise and removed Run Smoke E2E Triggers smoke e2e on Bitrise labels Mar 12, 2025

Merge branch 'main' into feat-4057-replace-asset-avatars-with-network…

f741507

…-avatars

vinnyhoward added Run Smoke E2E Triggers smoke e2e on Bitrise and removed Run Smoke E2E Triggers smoke e2e on Bitrise labels Mar 12, 2025

gambinish reviewed Mar 12, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(4057): replace asset avatars with network avatars #13910

feat(4057): replace asset avatars with network avatars #13910

vinnyhoward commented Mar 7, 2025 •

edited

Loading

github-actions bot commented Mar 7, 2025

github-actions bot commented Mar 11, 2025

github-actions bot commented Mar 11, 2025 •

edited by metamaskbot

Loading

vinnyhoward Mar 12, 2025

vinnyhoward Mar 12, 2025

vinnyhoward Mar 12, 2025

vinnyhoward Mar 12, 2025

github-actions bot commented Mar 12, 2025 •

edited by metamaskbot

Loading

github-actions bot commented Mar 12, 2025 •

edited by metamaskbot

Loading

sonarqubecloud bot commented Mar 12, 2025

gambinish Mar 12, 2025

vinnyhoward Mar 12, 2025

feat(4057): replace asset avatars with network avatars #13910

Are you sure you want to change the base?

feat(4057): replace asset avatars with network avatars #13910

Conversation

vinnyhoward commented Mar 7, 2025 • edited Loading

Description

Implementation

Related issues

Manual testing steps

Screenshots/Recordings

Recording

Screenshot

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

github-actions bot commented Mar 7, 2025

github-actions bot commented Mar 11, 2025

Bitrise

github-actions bot commented Mar 11, 2025 • edited by metamaskbot Loading

Bitrise

vinnyhoward Mar 12, 2025

Choose a reason for hiding this comment

vinnyhoward Mar 12, 2025

Choose a reason for hiding this comment

vinnyhoward Mar 12, 2025

Choose a reason for hiding this comment

vinnyhoward Mar 12, 2025

Choose a reason for hiding this comment

github-actions bot commented Mar 12, 2025 • edited by metamaskbot Loading

Bitrise

github-actions bot commented Mar 12, 2025 • edited by metamaskbot Loading

Bitrise

sonarqubecloud bot commented Mar 12, 2025

Quality Gate passed

gambinish Mar 12, 2025

Choose a reason for hiding this comment

vinnyhoward Mar 12, 2025

Choose a reason for hiding this comment

vinnyhoward commented Mar 7, 2025 •

edited

Loading

github-actions bot commented Mar 11, 2025 •

edited by metamaskbot

Loading

github-actions bot commented Mar 12, 2025 •

edited by metamaskbot

Loading

github-actions bot commented Mar 12, 2025 •

edited by metamaskbot

Loading