MetaMask / MetaMask/metamask-design-system

Reorganize our demo assets for DSR

Open
#560 0 comments 0 reactions 1 assignee Claimed by @georgewrmarshall View on GitHub
team-design-system
Dominant language
TypeScript
Stars
37
Forks
14
Avg merge
1d 9h
Merged PRs (30d)
60

Description

### **Description**

We need to reorganize our demo assets in the design system to better reflect real-world usage and improve maintainability. This involves two main changes:

1. Moving demo image assets from the component library packages to Storybook applications
2. Replacing Web2 example favicons with Web3 dApp examples that better represent MetaMask's ecosystem

This reorganization will reduce library bloat, prevent potential conflicts, and provide more relevant examples for developers.

### **Technical Details**

Asset Relocation:
- Move all demo images from component library packages to `apps/storybook-react/images/`
- Update all `.stories.tsx` files to reference new asset locations
- Ensure proper static asset configuration in Storybook

Web3 Asset Updates:
- Replace existing Web2 favicon examples (Google, Slack, Zoom) with Web3 dApp icons:
- Uniswap
- OpenSea
- Aave
- ENS
- 1inch
- Organize assets into clear categories:
- `/images/favicons/` - dApp favicons
- `/images/network-icons/` - blockchain networks
- `/images/token-icons/` - cryptocurrency tokens

### **Acceptance Criteria**

- [ ] All demo assets are moved from component library packages to Storybook applications
- [ ] No image assets remain in the component library packages
- [ ] All `.stories.tsx` files are updated to reference new asset locations
- [ ] Storybook configuration is updated to properly serve static assets
- [ ] Web2 favicon examples are replaced with Web3 dApp examples
- [ ] All components using these assets (AvatarFavicon, AvatarNetwork, etc.) work correctly in Storybook
- [ ] Documentation is updated to reflect new asset locations and usage
- [ ] Bundle size of component library is reduced due to removal of demo assets

### **References**

- Related PR discussion: https://github.com/MetaMask/metamask-design-system/pull/558#pullrequestreview-2774497137
- Components affected:
- AvatarFavicon
- AvatarNetwork
- AvatarToken
- AvatarGroup

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.