Quick Start

Get a full wallet connection flow working in your React app in 3 steps. By the end of this guide, your users will be able to connect any Canton wallet.

Step 1: Install

Add the PartyLayer packages to your existing React project. If you're starting fresh with Vite, run npm create vite@latest my-dapp -- --template react-ts first.

npm install @partylayer/sdk @partylayer/react

Step 2: Wrap Your App

Add PartyLayerKit at the root of your component tree. It handles wallet discovery, session management, and theming automatically.

// src/main.tsx
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { PartyLayerKit } from '@partylayer/react';
import App from './App';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <PartyLayerKit network="mainnet" appName="My dApp">
      <App />
    </PartyLayerKit>
  </StrictMode>,
);

Step 3: Add ConnectButton

Drop ConnectButton anywhere in your app. It renders a connect button when disconnected and shows the connected address with a disconnect dropdown when connected.

// src/App.tsx
import { ConnectButton } from '@partylayer/react';

export default function App() {
  return (
    <div>
      <h1>My Canton dApp</h1>
      <ConnectButton />
    </div>
  );
}

That's it! Your app now has a complete wallet connection flow with a polished modal, wallet auto-discovery, and session management.

Complete Example

Here's the full setup in a single file:

// src/main.tsx
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { PartyLayerKit, ConnectButton } from '@partylayer/react';

function App() {
  return (
    <>
      <nav>
        <h1>My dApp</h1>
        <ConnectButton />
      </nav>
      <main>
        <p>Your app content here</p>
      </main>
    </>
  );
}

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <PartyLayerKit network="mainnet" appName="My dApp">
      <App />
    </PartyLayerKit>
  </StrictMode>,
);

What's Happening Under the Hood?

When PartyLayerKit mounts, it:

1. Creates a PartyLayerClient: the core SDK instance that manages all wallet operations
2. Registers built-in adapters: Console, Loop, Cantor8, and Nightly wallet adapters (Send is served through the CIP-0103 announce path)
3. Fetches the wallet registry: verified wallet metadata from registry.partylayer.xyz
4. Groups CIP-0103 native wallets: those flagged cip0103.native: true in the registry render in a dedicated picker section
5. Restores existing sessions: if a user was previously connected, the session is restored automatically

Using Session Data

Once connected, read the session reactively from any component with useAccount:

import { useAccount } from '@partylayer/react';

function Profile() {
  const { isConnected, status, party, networkId } = useAccount();

  if (!isConnected) return <p>Not connected ({status})</p>;

  return (
    <div>
      <p>Party ID: {party}</p>
      <p>Network: {networkId}</p>
    </div>
  );
}

Next Steps

Now that you have basic connectivity, explore more:

1. PartyLayerKit: Configuration options (network, adapters, theme)
2. ConnectButton: Customize the button appearance and behavior
3. React Hooks: Use useSignMessage, useSubmitTransaction, and more
4. Theming: Switch between light, dark, and custom themes
5. Wallets & Adapters: Add custom wallet adapters or the Bron enterprise wallet