Skip to content

Create example wallet screens using library components and classnames #654

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
georgewrmarshall opened this issue May 8, 2025 · 0 comments
Assignees

Comments

@georgewrmarshall
Copy link
Contributor

Description

Add example screens to storybook environments to showcase component integration and provide realistic usage examples across platforms. Currently, our storybook only demonstrates individual components in isolation, but lacks complete UI examples that reflect how components work together in real-world applications like MetaMask Extension and Mobile.

Technical Details

  • Create a "Wallet Home" example screen for both web (React) and mobile (React Native) storybooks that mimics the layout and functionality of a typical wallet interface
  • Implement consistent UI patterns across platforms while respecting platform-specific conventions
  • Structure the example using components from our design system to demonstrate best practices and patterns
  • Showcase various design system components working together including:
    • Account displays
    • Balance sections
    • Action buttons
    • Navigation elements
    • Token lists
    • Network badges
  • Ensure examples adapt correctly to different device/viewport sizes
  • Document any platform-specific limitations or considerations

Acceptance Criteria

  • Both React and React Native storybooks contain a "Wallet Home" example page in an "Examples" section
  • The examples should be visually aligned between platforms while respecting platform conventions
  • All UI elements are built using design system components
  • Examples demonstrate responsive design principles
  • Examples contain realistic content (addresses, token amounts, etc.)
  • Examples illustrate proper component composition and hierarchy
  • Code is well-structured and follows best practices for each platform
  • Documentation includes notes on implementation differences between platforms
  • Stories are properly organized in the storybook navigation

References

  • MetaMask extension wallet UI for reference
  • MetaMask mobile wallet UI for reference
  • Design system component inventory
  • Existing storybook structure
  • Tailwind configuration for proper styling
  • React Native specific considerations for mobile examples
@georgewrmarshall georgewrmarshall changed the title Create example wallet screen stories Create example wallet screens using library components and classnames May 8, 2025
@georgewrmarshall georgewrmarshall self-assigned this May 8, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant