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

bash

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.

app/providers.tsx

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

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <PartyLayerKit network="mainnet" appName="My dApp">
      {children}
    </PartyLayerKit>
  );
}

💡 Tip

PartyLayerKit automatically registers all built-in wallet adapters (Console, Loop, Cantor8, Nightly), fetches the wallet registry, and sets up session persistence.

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.

app/page.tsx

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

export default function Home() {
  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:

app/layout.tsx

import { PartyLayerKit, ConnectButton } from '@partylayer/react';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <PartyLayerKit network="mainnet" appName="My dApp">
          <nav>
            <h1>My dApp</h1>
            <ConnectButton />
          </nav>
          {children}
        </PartyLayerKit>
      </body>
    </html>
  );
}

What's Happening Under the Hood?

When PartyLayerKit mounts, it:

Creates a PartyLayerClient — the core SDK instance that manages all wallet operations
Registers built-in adapters — Console, Loop, Cantor8, and Nightly wallet adapters
Fetches the wallet registry — verified wallet metadata from registry.partylayer.xyz
Scans for native CIP-0103 providers — auto-discovers wallets injected at window.canton.*
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:

tsx

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:

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

PreviousInstallation NextPartyLayerKit