MetaMask / MetaMask/metamask-extension

[Extension] Network avatar shape change

Open
#27,375 0 comments 0 reactions 0 assignees View on GitHub
area-design team-design-system type-enhancement
Dominant language
TypeScript
Stars
13.2k
Forks
5.6k
Avg merge
2d 5h
Merged PRs (30d)
451

Description

### What is this about?

https://www.figma.com/design/iJhERJwWooEVpkXJl6ulgi/Network-avatar-shape?node-id=0-1&t=r5WdNDIkTVsGFzfx-1

Updating the shape of the network avatar to square(ish), specs in Figma;
In addition, when the network is a badge, it will be bottom-right instead of top-right.

### Scenario

_No response_

### Design

_No response_

### Technical Details

_No response_

### Threat Modeling Framework

_No response_

### Acceptance Criteria

_No response_

### Stakeholder review needed before the work gets merged

- [ ] Engineering (needed in most cases)
- [x] Design
- [ ] Product
- [ ] QA (automation tests are required to pass before merging PRs but not all changes are covered by automation tests - please review if QA is needed beyond automation tests)
- [ ] Security
- [ ] Legal
- [ ] Marketing
- [ ] Management (please specify)
- [ ] Other (please specify)

### References

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with the linked Figma design to understand the square-ish network avatar and the bottom-right badge placement. Then locate the network avatar and badge rendering entry points in the extension and verify the finished UI matches the Figma specifications.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.