Getting Started

Getting Started

Build your first Canton dApp in 5 minutes.

1. Install the SDK

npm install @partylayer/enterprise-react

2. Get Your API Key

Sign up at the PartyLayer Dashboard (opens in a new tab) and create an app. Copy your App ID and API Key from the API Keys section.

3. Wrap Your App

// app/layout.tsx or App.tsx
import { PartyLayerProvider } from '@partylayer/enterprise-react';
 
export default function RootLayout({ children }) {
  return (
    <PartyLayerProvider
      config={{
        appId: 'app_your_app_id',
        apiKey: 'pk_live_your_api_key',
        auth: {
          providers: ['google', 'email'],
        },
        wallet: {
          createOnLogin: true,
        },
      }}
    >
      {children}
    </PartyLayerProvider>
  );
}

4. Add Login

import { LoginButton } from '@partylayer/enterprise-react';
 
export function Header() {
  return (
    <nav>
      <h1>My dApp</h1>
      <LoginButton providers={['google', 'email']} />
    </nav>
  );
}

5. Use the Wallet

import { useAuth, useWallet } from '@partylayer/enterprise-react';
 
export function Dashboard() {
  const { user, isAuthenticated } = useAuth();
  const { wallet, submitTransaction, isReady } = useWallet();
 
  if (!isAuthenticated) return <p>Please log in.</p>;
  if (!isReady) return <p>Setting up wallet...</p>;
 
  return (
    <div>
      <p>Welcome, {user.name}</p>
      <p>Canton Party: {wallet.partyId}</p>
      <p>Trust Level: {wallet.trustLevel}</p>
 
      <button
        onClick={() =>
          submitTransaction({
            templateId: {
              package_id: 'your-package-id',
              module_name: 'YourModule',
              entity_name: 'YourTemplate',
            },
            args: { field1: 'value1' },
          })
        }
      >
        Submit Transaction
      </button>
    </div>
  );
}

Full Working Example

import {
  PartyLayerProvider,
  LoginButton,
  useAuth,
  useWallet,
} from '@partylayer/enterprise-react';
 
function App() {
  return (
    <PartyLayerProvider
      config={{
        appId: 'app_demo',
        apiKey: 'pk_test_demo',
        auth: { providers: ['google'] },
        wallet: { createOnLogin: true },
      }}
    >
      <Main />
    </PartyLayerProvider>
  );
}
 
function Main() {
  const { user, isAuthenticated, logout } = useAuth();
  const { wallet, isReady } = useWallet();
 
  if (!isAuthenticated) {
    return (
      <div style={{ textAlign: 'center', marginTop: '4rem' }}>
        <h1>Welcome to My Canton dApp</h1>
        <LoginButton providers={['google']} />
      </div>
    );
  }
 
  return (
    <div style={{ padding: '2rem' }}>
      <h1>Dashboard</h1>
      <p>Name: {user.name}</p>
      <p>Email: {user.email}</p>
      {isReady && <p>Wallet: {wallet.partyId}</p>}
      <button onClick={logout}>Logout</button>
    </div>
  );
}
 
export default App;

Next Steps

IntroductionAuthentication