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
3. Fetches the wallet registry — verified wallet metadata from registry.partylayer.xyz
4. Scans for native CIP-0103 providers — auto-discovers wallets injected at window.canton.*
5. Restores existing sessions — if a user was previously connected, the session is restored automatically

Using Session Data

Once connected, access the session from any component with useSession:

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

function Profile() {
  const session = useSession();

  if (!session) return <p>Not connected</p>;

  return (
    <div>
      <p>Party ID: {session.partyId}</p>
      <p>Wallet: {session.walletId}</p>
      <p>Network: {session.network}</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