PartyLayerKit

PartyLayerKit is the zero-config wrapper component that sets up everything your dApp needs for wallet connectivity. It creates the SDK client, registers adapters, fetches the wallet registry, and provides theme and session context to all child components.

Basic Usage

tsx

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

function App() {
  return (
    <PartyLayerKit network="mainnet" appName="My dApp">
      {/* Your app components */}
    </PartyLayerKit>
  );
}

Props

Prop	Type	Default	Description
network	"devnet" \| "testnet" \| "mainnet"	—	Canton network to connect to. Determines which wallets and registry entries are available.
appName	string	—	Your application name, shown to wallets during connection requests.
children	ReactNode	—	Your application component tree.
registryUrl	string	"https://registry.partylayer.xyz"	Override the wallet registry URL. Useful for self-hosted registries.
channel	"stable" \| "beta"	"stable"	Registry channel. Use "beta" to include wallets in beta testing.
adapters	(WalletAdapter \| AdapterClass)[]	Built-in adapters	Custom wallet adapter list. Overrides the default built-in adapters if provided.
theme	"light" \| "dark" \| "auto" \| PartyLayerTheme	"light"	Theme preset or a custom theme object. "auto" follows system preference.
walletIcons	Record<string, string>	{}	Custom wallet icon URLs keyed by walletId. Overrides registry icons.

Network Configuration

The network prop determines which Canton network your dApp connects to. Wallets and registry entries are filtered by network.

tsx

// Development
<PartyLayerKit network="devnet" appName="My dApp">

// Staging / testing
<PartyLayerKit network="testnet" appName="My dApp">

// Production
<PartyLayerKit network="mainnet" appName="My dApp">

Custom Adapters

By default, PartyLayerKit auto-registers all built-in adapters: Console, Loop, Cantor8, and Nightly. To add additional adapters (like Bron) or use a custom set:

tsx

import { PartyLayerKit } from '@partylayer/react';
import { getBuiltinAdapters } from '@partylayer/sdk';
import { BronAdapter } from '@partylayer/adapter-bron';

function App() {
  return (
    <PartyLayerKit
      network="mainnet"
      appName="My dApp"
      adapters={[
        ...getBuiltinAdapters(),
        new BronAdapter({ clientId: 'your-client-id' }),
      ]}
    >
      {children}
    </PartyLayerKit>
  );
}

⚠️ Warning

When you provide the adapters prop, it replaces the default set entirely. Always include getBuiltinAdapters() if you want to keep the built-in wallets alongside your custom adapter.

Custom Wallet Icons

Override wallet icons with the walletIcons prop. Keys are wallet IDs and values are image URLs:

tsx

<PartyLayerKit
  network="mainnet"
  appName="My dApp"
  walletIcons={{
    console: '/images/console-logo.png',
    loop: '/images/loop-logo.svg',
    'my-custom-wallet': '/images/custom-wallet.png',
  }}
>

Icons are resolved with this priority: walletIcons prop (exact match) → walletIcons (fuzzy match) → registry icon URL → fallback.

Theming

Pass a theme preset or a custom PartyLayerTheme object:

tsx

// Preset themes
<PartyLayerKit theme="light" ...>
<PartyLayerKit theme="dark" ...>
<PartyLayerKit theme="auto" ...>  {/* Follows system preference */}

// Custom theme
import { lightTheme } from '@partylayer/react';

const myTheme = {
  ...lightTheme,
  colors: {
    ...lightTheme.colors,
    primary: '#7C3AED',
    primaryHover: '#6D28D9',
  },
};

<PartyLayerKit theme={myTheme} ...>

See Theming for full theme customization details.

How It Works

PartyLayerKit internally:

Creates a PartyLayerClient via createPartyLayer()
Wraps children in PartyLayerProvider (React context for the SDK client)
Wraps in ThemeProvider (theme context for styled components)
Wraps in WalletIconsContext (icon override context)
Handles client cleanup on unmount via client.destroy()

💡 Tip

The client is only re-created when network, appName,registryUrl, or channel change. The adapters array uses a stable ref to avoid unnecessary re-initialization.

PreviousQuick Start NextConnectButton