fix(accounts): render official chain icon in account list rows

[swdiscordia]

Description

The Accounts screen rendered a bare colored Chakra <Circle> with only a border for every chain row, even though Asset.networkIcon is already populated for most chains and the existing ChainIcon component (in src/components/ChainMenu.tsx) already handles the fee-asset fallback. Swap the Circle for ChainIcon so users see real chain logos in the Accounts list.

One-line code change. No new dependencies. No asset-data updates needed.

Issue (if applicable)

closes #12343

Risk

Very low — purely visual change, isolated to one component on the Accounts screen. No transaction code, no state-management code, no new assets, no new dependencies. The replacement component (ChainIcon) is already used elsewhere in the app (ChainMenu, MobileWebSelect, LimitOrderCard, Modals/Receive/SupportedNetworks).

What protocols, transaction types, wallets or contract interactions might be affected by this PR?

None.

Testing

Engineering

1. pnpm install && pnpm dev
2. Connect any wallet, open the wallet drawer → Accounts tab
3. Verify each chain row shows the official chain logo (Arbitrum, Base, Optimism, Abstract, Avalanche, BNB, Berachain, BOB, Bitcoin, …) instead of an empty colored circle
4. For chains without a dedicated networkIcon (e.g. Ethereum, BNB Smart Chain, Aptos, Bitcoin), verify the fee-asset icon renders — which is the canonical chain logo for those L1s

Operations

• 🏁 My feature is behind a flag and doesn't require operations testing (yet)

Non-technical QA can compare to the screenshots below.

Screenshots

Before (empty colored rings):

After (real chain logos: Abstract, Arbitrum One, Avalanche C-Chain, BNB Smart Chain, BOB, Base, Berachain, Bitcoin…):

Same fresh "Test wallet", same viewport, only the one-line code change differs.

Summary by CodeRabbit

• Style

  • Updated chain row header to use the new chain icon component for a consistent look.

• Bug Fixes

  • Replaced asset icons for Plume, Celo, and Story so their images display correctly.

• Chores

  • Added a new state migration entry to ensure persisted data upgrades apply cleanly.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 55a975a4-adcc-43d4-86e8-099a11c47f7a

📥 Commits

Reviewing files that changed from the base of the PR and between ae7aa31 and 28962c9.

⛔ Files ignored due to path filters (9)

• public/generated/asset-manifest.json is excluded by !**/generated/**
• public/generated/asset-manifest.json.br is excluded by !**/generated/**
• public/generated/asset-manifest.json.gz is excluded by !**/*.gz, !**/generated/**
• public/generated/generatedAssetData.json is excluded by !**/generated/**
• public/generated/generatedAssetData.json.br is excluded by !**/generated/**
• public/generated/generatedAssetData.json.gz is excluded by !**/*.gz, !**/generated/**
• public/generated/relatedAssetIndex.json is excluded by !**/generated/**
• public/generated/relatedAssetIndex.json.br is excluded by !**/generated/**
• public/generated/relatedAssetIndex.json.gz is excluded by !**/*.gz, !**/generated/**

📒 Files selected for processing (2)

• packages/utils/src/assetData/baseAssets.ts
• src/state/migrations/index.ts

✅ Files skipped from review due to trivial changes (1)

• packages/utils/src/assetData/baseAssets.ts

---

📝 Walkthrough

Walkthrough

ChainRow header icon now renders ChainIcon instead of a Chakra Circle. Three base asset definitions (plume, celo, story) have updated image URLs. The clearAssetsMigrations manifest gains one additional numeric migration entry mapping to clearAssets.

Changes

Chain Icon Rendering

Layer / File(s)	Summary
Replace Circle with ChainIcon in ChainRow header src/pages/Accounts/components/ChainRow.tsx	Imports adjusted to remove Chakra Circle and add ChainIcon. Header icon element replaced from Circle with ChainIcon chainId={chainId} size='sm'.

Asset images & state migration

Layer / File(s)	Summary
Update base asset icon URLs packages/utils/src/assetData/baseAssets.ts	plume, celo, and story asset definitions had their icon and networkIcon URLs replaced with new CoinGecko image URLs.
Add migration entry to clearAssetsMigrations src/state/migrations/index.ts	The exported clearAssetsMigrations manifest was extended with one additional numeric migration key mapping to clearAssets.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

I swapped the ring for a proper face,
Now logos hop into their place.
Plume, Celo, Story wear fresh attire,
Migrations nudged one step higher. 🐇✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	❓ Inconclusive	While the primary ChainRow.tsx change is in-scope, the asset URL updates in baseAssets.ts and migration entry in migrations/index.ts lack clear connection to the linked issue requirements.	Clarify whether the baseAssets.ts icon URL updates and migrations/index.ts changes are related to supporting the chain icon display, or if they represent separate scope.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: replacing empty circle icons with official chain icons in the account list rows component.
Linked Issues check	✅ Passed	The pull request successfully implements all coding requirements from issue #12343: replacing the Circle component with ChainIcon in ChainRow.tsx, updating imports, and maintaining the fee-asset fallback behavior.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

• Generate code and open pull requests
• Plan features and break down work
• Investigate incidents and troubleshoot customer tickets together
• Automate recurring tasks and respond to alerts with triggers
• Summarize progress and report instantly

Built for teams:

• Shared memory across your entire org—no repeating context
• Per-thread sandboxes to safely plan and execute work
• Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}