NPM packages that offers an innovative way to interact with Substrate-based blockchains directly in your browser.

Table of contents

• Table of contents
• Introduction
  • Write Secure and Effective dApps with the Polkadot Network
  • Additional Resources
  • Why Embed a Light Client in Browser Extensions?
• Comprehensive API Documentation
• Repository Structure
  • Packages
  • Showcase Projects
  • Examples
• Development
  • Getting Started
  • Cleanup Commands
• Releasing
• Useful Links

Introduction

Substrate Connect provides a groundbreaking method to engage with Substrate-based blockchains directly in your browser, eliminating the need for an RPC server. By utilizing the smoldot WASM light client, it ensures a secure and efficient connection to the blockchain network without reliance on specific third parties.

Write Secure and Effective dApps with the Polkadot Network

The aim of this repository is to offer NPM packages that can be used to:

• Provide a secure and efficient connection to the Polkadot network via @substrate/connect, leveraging the excellent Smoldot WASM light client.
• Discover browser extensions that implement the discovery protocol, including those which expose a light client via @substrate/smoldot-discovery. Substrate Connect will automatically leverage these where possible.
• Easily enhance a browser extension with a light client via @substrate/light-client-extension-helpers.

We also provide example projects using the above packages, including:

• Basic light client demo: a demo using @substrate/connect to obtain information about chains on the Polkadot network.
• Light client extension demo: an example of a browser extension that provides a light client.
• Wallet extension demo: an example of a browser extension that provides a full Polkadot wallet leveraging a light client.

Additional Resources

• A step-by-step guide on how to integrate a light client into a browser extension.
• Details on the discovery protocol, including how to implement it on the browser or extension side.

Why Embed a Light Client in Browser Extensions?

Embedding a light client in browser extensions offers several advantages:

• Shared Light Client Across Multiple dApps: By sharing a single light client among various decentralized applications (dApps), the time spent on startup and syncing is reduced. This avoids slowing down individual dApps and enhances overall efficiency.
• Overcoming Browser Limitations: Browser limitations on WebSockets from HTTPS pages make it challenging to establish a robust number of peers, as many nodes must be available with TLS. Substrate Connect addresses this issue through a powerful browser extension, enabling chains to stay synced in the background and significantly improving the performance of your applications. This ensures a more robust connection to the Polkadot ecosystem.

Comprehensive API Documentation

For detailed API usage, refer to the Substrate Connect API documentation.

Repository Structure

Packages

The core implementations of @subtrate/connect and @substrate/discovery, and some auxiliary packages.

• @substrate/discovery
• @substrate/connect
• @substrate/connect-known-chains
• @substrate/connect-discovery and @substrate/smoldot-discovery

Showcase Projects

Showcase full implementations of @substrate/connect and @substrate/discovery for a Wallet, Extension or Generic usage.

• Wallet implementation
• Extension implementation
• Parachain Demo

Examples

dApp and Extensions example implementations of @substrate/connect and @substrate/discovery.

Development

This repository utilizes pnpm workspaces and corepack, ensuring the correct version of pnpm is used. For contributions, please review our contributing guidelines to understand our workflow and how to smoothly integrate your contributions to the project.

Getting Started

Follow these steps to install everything and launch a demo if you're hacking on this repository:

1. Install Prerequisites (tested with the following versions):

   • Node.js (node) v20.9.0
   • pnpm 9.0.6 (npm install -g pnpm)
   • corepack 0.20.0 (bundled with recent Node.js versions)

2. Clone the Repository:

   • git clone https://github.com/paritytech/substrate-connect.git
   • Navigate to the repository root: cd substrate-connect

3. Install Dependencies:

   • corepack pnpm install

4. Run the Extension in Development Mode:

   • In terminal A: cd projects/extension && corepack pnpm dev

5. Launch the Extension:

   • In terminal B: cd projects/extension && corepack pnpm start
   • This opens a Chrome browser window with the extension pre-loaded. Ensure the extension is running.

6. Run the Demo Application:

   • In terminal C: cd projects/demo && corepack pnpm dev
   • Navigate to the URL logged in the Chrome browser opened in step 5. You should see the extension activate and the demo app log the latest blocks.

Cleanup Commands

To clean up all build artifacts in workspaces in the repository:

corepack pnpm clean

To clean up all build artifacts and dependencies in workspaces in the repository:

corepack pnpm deep-clean

Releasing

For releasing a new version of the extension, follow the steps outlined in the release doc.

Useful Links

• Substrate Connect Documentation Page
• Download from:
  • Chrome Store
  • Mozilla Addons