This project demonstrates how to build high-throughput, low-latency Web3 applications.
The core goal is to show how to use @erc7824/nitrolite, a state channel framework for EVM chains, to enable off-chain interactions with on-chain security. This allows you to build a user experience with instant finality that feels as responsive as a traditional Web2 application.
In this workshop, we will use a sample content platform application as a practical example. We will walk through the process of integrating Nitrolite to enable features like instant microtransactions. The principles you learn here can be applied to any dApp to significantly improve user experience by removing transaction friction.
- Framework: Preact with Hooks
- Language: TypeScript
- Build Tool: Vite
- Styling: CSS Modules
- Key Library:
@erc7824/nitrolite
- Node.js (v18 or later)
- A WebSocket RPC endpoint for Nitrolite.
-
Clone the repository:
git clone <your-repo-url> cd nitrolite-example
-
Install dependencies:
npm install
-
Set up environment variables: Create a file named
.env.localin the root of the project and add your Nitrolite WebSocket URL:# .env.local VITE_NITROLITE_WS_URL=wss://your-rpc-endpoint.com/ws
-
Run the development server:
npm run dev
The application will be available at
http://localhost:5173(or the next available port).
This repository uses branches to guide you through the workshop. You can switch between branches to see the code evolve at each stage.
main: The initial project setup.chapter-1-wallet-connect: Solution for Chapter 1 (Connecting to a user's wallet).chapter-2-ws-connection: Solution for Chapter 2 (Initializing the WebSocket connection).chapter-3-session-auth: Solution for Chapter 3 (Authenticating the session via WebSocket).chapter-4-display-balances: Solution for Chapter 4 (Fetching and displaying asset balances).final-p2p-transfer: The final, completed application with peer-to-peer transfers.