status-web

Packages for building user interfaces, websites, web applications, dapps, browser extensions, and APIs in the Status ecosystem.

Packages

Name	npm	Description
@status-im/colors		Auto-generated color palette based on our design system.
@status-im/icons		Auto-generated icon library based on our design system.
@status-im/components		Component library built with Radix UI, React Aria, Tailwind CSS.
@status-im/js
@status-im/wallet
@status-im/eslint-config		Shared ESLint configuration for consistent code style across projects.

Apps

Name	Description
./apps/connector	Status Desktop Wallet extended to decentralised applications in your browser.
./apps/portfolio
./apps/wallet
./apps/api

Prerequisites

Required:

• Node.js v20.x
• pnpm v9.12.x

Recommended:

• Visual Studio Code
  • install extensions listed in .vscode/extensions.json for optimal development experience

Stack

• Turborepo: Manages our monorepo and speeds up builds
• TypeScript: Adds type safety to our code
• React: Our main library for building UIs
• Radix UI / React Aria: Provides accessible UI primitives
• Tailwind CSS: Used for styling
• Vite: Our build tool and dev server
• Storybook: For developing and showcasing components
• ESLint: Keeps our code consistent and catches potential issues
• Prettier: Formats our code
• Changesets: Manages versioning and changelogs

Getting Started

1. Clone the repository:

   git clone https://github.com/status-im/status-web.git
   cd status-web
   

2. Install dependencies:

   pnpm install
   

3. Build all packages:

   pnpm build
   

4. Run tests:

   pnpm test
   

5. Start development mode:

   pnpm dev
   

Storybook

To view and interact with the components, you can run Storybook:

pnpm storybook

This will start the Storybook server, allowing you to browse and test components in isolation.

Continuous Integration

The builds of main branch are available in Jenkins CI.

Sponsors

This project is sponsored by Browserstack.