MetaMask / MetaMask/metamask-design-system
[DSR]: Add badge support to AvatarToken
- 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
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