Connect Kit

Providers and hooks for connecting to web3 wallets and interacting with accounts

Installation

npm install @w3ux/react-connect-kit

or

yarn add @w3ux/react-connect-kit

or

pnpm add @w3ux/react-connect-kit

Usage

import { ConnectProvider } from '@w3ux/react-connect-kit'

function App() {
  return (
    <ConnectProvider ss58={0} dappName="My Dapp">
      {/* Your app content */}
    </ConnectProvider>
  )
}

Adaptor Model

ConnectProvider supports an adaptors prop that accepts an array of provider components. Adaptors are dynamically nested inside ConnectProvider, allowing your dapp to opt in to whichever connection methods it needs without hard dependencies.

First-party adaptors:

• @w3ux/ledger-connect — Ledger hardware wallet support
• @w3ux/vault-connect — Polkadot Vault (QR-based) wallet support

import { ConnectProvider } from '@w3ux/react-connect-kit'
import { LedgerAdaptor } from '@w3ux/ledger-connect'

function App() {
  return (
    <ConnectProvider
      ss58={0}
      dappName="My Dapp"
      adaptors={[LedgerAdaptor]}
    >
      {/* Your app content */}
    </ConnectProvider>
  )
}

Each adaptor provides its own hooks for interacting with its connection method (e.g., useLedger from @w3ux/ledger-connect). Browser extension connectivity is built in via useExtensions and useExtensionAccounts.

Documentation

For comprehensive documentation and examples, visit the w3ux documentation.

Keywords

w3ux, polkadot, web3, react, hooks, wallet, connect, typescript

Repository

• Source: GitHub
• Package: npm
• Issues: GitHub Issues

License

This package is licensed under the GPL-3.0-only.

Part of the w3ux library - A collection of packages for building Web3 applications.