Connect a wallet

To execute a swap you bring a connected Canton wallet. PartyLayer is the browser connector (Loop and others speak it); this page takes you from nothing to a connected client, then hands it to the quickstart's five-line adapter. Your app holds no keys; the wallet signs.

Building a wallet, not a dApp? If your user is already inside your wallet and you sign natively, none of this page applies: there is no connect step. Go to Hosted wallets: you are the wallet.

1. Install

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

@partylayer/react gives you the connect hooks; @tanstack/react-query is its data layer. This is a browser flow, a wallet connects in the page, not in a headless script.

2. Wrap your app in the provider

Create ONE client with your network and wrap your tree. Session state is kept in memory (no browser storage), matching Synfin's own app.

import { createPartyLayer } from '@partylayer/sdk';
import { PartyLayerProvider } from '@partylayer/react';
import { createMemoryStorage } from '@partylayer/session';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

// One client for your app. 'mainnet' or 'devnet'.
const client = createPartyLayer({
  network: 'mainnet',
  app: { name: 'Your App' },
});
const queryClient = new QueryClient();

export function App({ children }) {
  return (
    <QueryClientProvider client={queryClient}>
      <PartyLayerProvider
        client={client}
        sessionOptions={{ storage: createMemoryStorage() }}
      >
        {children}
      </PartyLayerProvider>
    </QueryClientProvider>
  );
}

3. Connect, and read the party

List the available wallets, connect to one, and read the connected party from the session. That party is the taker.

import { useConnect, useWallets, useClientSession } from '@partylayer/react';

function ConnectButton() {
  const { connect } = useConnect();
  const { wallets } = useWallets();          // e.g. Loop
  const session = useClientSession();
  const party = session?.account?.party;     // the connected taker party

  if (party) return <p>Connected: {party}</p>;

  return wallets.map((w) => (
    <button key={w.walletId} onClick={() => connect({ walletId: w.walletId })}>
      Connect {w.name}
    </button>
  ));
}

4. Hand the client to the reference adapter

Pass the client and the party to @synfin/wallet-partylayer. Nothing network-specific: the registry base defaults to mainnet and the deposit admin is read from the wallet's holdings.

import { createPartyLayerWalletAdapter } from '@synfin/wallet-partylayer';

// `client` is the createPartyLayer client above; `party` is from the session.
const wallet = createPartyLayerWalletAdapter(client, { party });
// hand `wallet` to executePlan(plan, { wallet }) -- see the quickstart.

From here the quickstart's execute step drives it: executePlan(plan, { wallet }), then track to a terminal state. Which wallets are supported is the support matrix; PartyLayer's own docs cover wallet-specific connect details.