status-web

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

Packages

Name	Deployments	Builds	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	Deployments	Builds	Description
./apps/connector			Status Desktop Wallet extended to decentralised applications in your browser.
./apps/portfolio
./apps/wallet			Easily view and manage your crypto portfolio in real time — Beta crypto wallet and Web3 portfolio tracker in one.
./apps/api

Prerequisites

Required:

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

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.

Sponsors

This project is sponsored by Browserstack.