Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/status-im/status-web

Packages for building web applications in the Status ecosystem.
https://github.com/status-im/status-web

blockchain chat dapp decentralized encryption ethereum messenger waku

Last synced: 4 days ago
JSON representation

Packages for building web applications in the Status ecosystem.

Host: GitHub
URL: https://github.com/status-im/status-web
Owner: status-im
License: mpl-2.0
Created: 2021-09-03T07:33:05.000Z (about 3 years ago)
Default Branch: main
Last Pushed: 2024-10-18T11:42:01.000Z (26 days ago)
Last Synced: 2024-10-19T12:23:56.289Z (25 days ago)
Topics: blockchain, chat, dapp, decentralized, encryption, ethereum, messenger, waku
Language: TypeScript
Homepage: https://status-components.vercel.app
Size: 212 MB
Stars: 80
Watchers: 11
Forks: 35
Open Issues: 45
Metadata Files:
- Readme: README.md
- License: LICENSE.md

Awesome Lists containing this project

README

        # `status-web`

[![CI](https://github.com/status-im/status-web/actions/workflows/ci.yml/badge.svg)](https://github.com/status-im/status-web/actions/workflows/ci.yml)

This monorepo contains packages for building web applications in the Status ecosystem. These packages can be used separately or combined to create consistent and beautiful user interfaces.

## Packages

| Name                                                   | `npm`                                                                                                                               | Description                                                                                                                                                                   |

| ------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

| [`@status-im/components`](./packages/components)       | [![npm version](https://img.shields.io/npm/v/@status-im/components)](https://www.npmjs.com/package/@status-im/components)           | Component library built with Radix UI, React Aria, Tailwind CSS.                                                                                                              |

| [`@status-im/js`](./packages/status-js)                | [![npm version](https://img.shields.io/npm/v/@status-im/js)](https://www.npmjs.com/package/@status-im/js)                           | Libary for Waku protocol integration and blockchain interactions.                                                                                                             |

| [`@status-im/icons`](./packages/icons)                 | [![npm version](https://img.shields.io/npm/v/@status-im/icons)](https://www.npmjs.com/package/@status-im/icons)                     | Auto-generated icon library based on our [design system](https://www.figma.com/design/qLLuMLfpGxK9OfpIavwsmK/Iconset?node-id=3239-987&node-type=frame&t=0h8iIiZ3Sf0g4MRV-11). |

| [`@status-im/colors`](./packages/colors)               | [![npm version](https://img.shields.io/npm/v/@status-im/colors.svg)](https://www.npmjs.com/package/@status-im/colors)               | Auto-generated color palette based on our [design system](https://www.figma.com/design/v98g9ZiaSHYUdKWrbFg9eM/Foundations?node-id=619-5995&node-type=canvas&m=dev).           |

| [`@status-im/eslint-config`](./packages/eslint-config) | [![npm version](https://img.shields.io/npm/v/@status-im/eslint-config.svg)](https://www.npmjs.com/package/@status-im/eslint-config) | Shared ESLint configuration for consistent code style across projects.                                                                                                        |

## Apps

| Name                                   | Description                                                                   |

| -------------------------------------- | ----------------------------------------------------------------------------- |

| [`./apps/connector`](./apps/connector) | Status Desktop Wallet extended to decentralised applications in your browser. |

## Prerequisites

Required:

- **[Node.js](https://nodejs.org/)** v20.x

- **[pnpm](https://pnpm.io)** v9.12.x

Recommended:

- **[Visual Studio Code](https://code.visualstudio.com/)**

  - 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.

## Sponsors

This project is sponsored by Browserstack.