Description

This PR introduces a new MultichainAddressRow component for displaying network information and addresses in MetaMask's multichain interface. The component provides a clean, consistent way to show network icons, names, truncated addresses, and action buttons (copy and QR code) across the application.

What is the reason for the change?
As part of the multichain accounts feature development, we need a reusable component to display network-address pairs in a standardized format throughout the UI.

What is the improvement/solution?
The new MultichainAddressRow component:

• Displays network icon using AvatarNetwork component
• Shows network name and truncated address in a two-line layout
• Provides copy-to-clipboard functionality with visual feedback
• Includes QR code button for address sharing
• Integrates with the existing MultichainNetwork type system

Out of scope

• QR code button click implementation

Changelog

CHANGELOG entry: Added MultichainAddressRow component for displaying network information and addresses in multichain interface

Related issues

Fixes:
Jira ticket: https://consensyssoftware.atlassian.net/browse/MUL-401

Manual testing steps

1. Go to this page...

Screenshots/Recordings

Before

After

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.