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

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

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

Props

UI Language and Direction

<PartyLayerKit network="devnet" appName="My dApp" locale="tr-TR" direction="rtl">
  <ConnectButton />
</PartyLayerKit>

English is the default. Supported languages are English, Turkish, Spanish, French, German, Portuguese, Italian, Russian, Arabic, Hindi, Indonesian, Japanese, Korean and Simplified Chinese. Regional tags share a catalog; unsupported languages and Traditional Chinese scripts fall back to English. Arabic automatically uses RTL; direction overrides that choice. Changing language preserves the client and wallet connection. English and Turkish render synchronously. Other catalogs load on demand; initial server and hydration output uses English, then updates when ready. Browser language is not guessed and the application document is not mutated.

This translates PartyLayer connection, account, cost and transaction UI, including accessible labels. Your application content, custom labels, wallet names, identifiers, provider error details and vendor approval screens retain their own language settings. Advanced provider compositions can use PartyLayerLocaleProvider with the same locale and direction props.

Network Configuration

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

// 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 supplies the supported wallet catalog for your network and channel. Configure WalletConnect and Bron through application options:

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

const walletConnect = { projectId: 'your-walletconnect-project-id' };
const bron = {
  auth: {
    clientId: 'your-client-id',
    redirectUri: 'https://your-app.com/auth/callback',
    authorizationUrl: 'https://auth.bron.example/authorize',
    tokenUrl: 'https://auth.bron.example/token',
  },
  api: { baseUrl: 'https://api.bron.example' },
};

<PartyLayerKit network="mainnet" appName="My dApp" walletConnect={walletConnect} bron={bron}>
  <ConnectButton />
</PartyLayerKit>

Custom Wallet Icons

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

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

// 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()