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.

bash

npm install @partylayer/sdk @partylayer/react @tanstack/react-query

Step 2: Wrap Your App

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

tsx

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

const queryClient = new QueryClient();

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

💡 Tip

PartyLayerKit automatically registers all built-in wallet adapters (Console, Loop, Cantor8, Nightly), fetches the wallet registry, and sets up session persistence. Send is discovered through the CIP-0103 announce path, so it appears in the picker without being registered.

ℹ️ Why QueryClientProvider

v2's data hooks (the @partylayer/react/query entrypoint) are built on TanStack Query, so they need a QueryClient in context. The base connect flow below (PartyLayerKit, ConnectButton, useAccount) works without it, but wrapping in QueryClientProvider now means the data hooks are ready when you reach for them. See the Hooks reference.

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.

tsx

// 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:

tsx

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

const queryClient = new QueryClient();

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

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

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 (Send is served through the CIP-0103 announce path)
Fetches the wallet registry: verified wallet metadata from registry.partylayer.xyz
Groups CIP-0103 native wallets: those flagged cip0103.native: true in the registry render in a dedicated picker section
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:

tsx

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:

PartyLayerKit: Configuration options (network, adapters, theme)
ConnectButton: Customize the button appearance and behavior
React Hooks: Use useSignMessage, useSubmitTransaction, and the /query data hooks (useDamlContract, useChoice, cost hooks)
Pattern Cookbook: Copy-paste recipes for the data hooks, optimistic updates, and Suspense
Theming: Switch between light, dark, and custom themes
Wallets & Adapters: Add custom wallet adapters or the Bron enterprise wallet

PreviousInstallation NextPartyLayerKit