MetaMask / MetaMask/metamask-design-system

[DSR]: Add badge support to AvatarToken

Open
#505 0 comments 0 reactions 0 assignees View on GitHub
team-design-system
Dominant language
TypeScript
Stars
37
Forks
14
Avg merge
1d 9h
Merged PRs (30d)
60

Description

### **Description**

Upgrade the `AvatarToken` component to support display of `BadgeNetwork` and `BadgeIcon`, representing the network the token is associated with and the action type shown in activity details.

This follows recent UI audit recommendations to improve visual context around token-related activity.

### **Technical Details**

- Integrate `BadgeNetwork` and `BadgeIcon` components within `AvatarToken`
- Ensure proper alignment and positioning per Figma design
- Leverage props to conditionally render badges for network and action type
- Use action-type icons (e.g., send, receive, swap) from shared component library

### **Acceptance Criteria**

- `AvatarToken` renders network and icon badges based on props
- UI matches Figma designs
- Component remains backwards-compatible
- Responsive behavior verified across screen sizes
- Design QA passes (e.g., audit spacing, size, color, etc.)

### **References**

- https://www.figma.com/board/pQa2vI7r08pHiqsAPTWdQ8/Avatar%2C-Token%2C-Network%2C-Icon%2C-Badge-Audit-and-Insight-Report?node-id=0-1&t=0EWeZ4yjDqhzZril-1
- https://www.figma.com/design/1D6tnzXqWgnUC3spaAOELN/%F0%9F%A6%8A%5BWIP%5D-DS-Components-(Shared-UI-lib)?node-id=120-1621&t=E6652Uk8pwcj6f2f-1

Contributor guide

Open the contributing guide

Research direction

Start at the AvatarToken component and inspect the shared BadgeNetwork and BadgeIcon APIs, then compare their intended placement with the linked Figma designs. Trace the existing props and rendering behavior to preserve backwards compatibility; done means conditional network and action badges align with the designs and responsive behavior passes design QA.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
design, frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.