@chiefwoods/connector-kit

Prebuilt React UI for Solana wallet connections, built on @solana/connector.

Usage

bun add @chiefwoods/connector-kit @solana/connector

Peer dependencies: react and react-dom (^19). Import the package stylesheet so Tailwind can scan its class names:

@import '@chiefwoods/connector-kit/styles.css';

Wrap your app with @solana/connector's AppProvider, then WalletProvider:

import { AppProvider, getDefaultConfig, getDefaultMobileConfig } from '@solana/connector/react';
import { WalletProvider } from '@chiefwoods/connector-kit';

const connectorConfig = getDefaultConfig({
  appName: 'My App',
  appUrl: window.location.origin,
  autoConnect: true,
  enableMobile: true,
  network: 'devnet',
});

const mobile = getDefaultMobileConfig({
  appName: 'My App',
  appUrl: window.location.origin,
});

export function App() {
  return (
    <AppProvider connectorConfig={connectorConfig} mobile={mobile}>
      <WalletProvider>{/* ... */}</WalletProvider>
    </AppProvider>
  );
}

ConnectButton opens the wallet modal when disconnected, and an account dropdown when connected:

import { ConnectButton } from '@chiefwoods/connector-kit';

<ConnectButton />;

Additional sections can be toggled:

<ConnectButton showCluster showBalance showTokenList showTransactionHistory />

Open the modal from anywhere under WalletProvider:

import { useWallet } from '@chiefwoods/connector-kit';

const { openModal } = useWallet();

<button onClick={openModal}>Connect</button>;

Development

To work on this repo locally:

bun install

Preview component changes:

bun --cwd playground dev