ConnectButton

ConnectButton is a ready-to-use component that handles the entire wallet connection lifecycle. It renders a connect button when disconnected and shows the connected party ID with a disconnect dropdown when connected.

Basic Usage

tsx

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

function Navbar() {
  return (
    <nav>
      <h1>My dApp</h1>
      <ConnectButton />
    </nav>
  );
}

Props

Prop	Type	Default	Description
label	string	"Connect Wallet"	Text shown on the button when disconnected.
connectedLabel	"address" \| "wallet" \| "custom"	"address"	What to display when connected: truncated party ID, wallet name, or custom format.
formatAddress	(partyId: string) => string	—	Custom formatter for the connected label. Only used when connectedLabel="custom".
className	string	—	CSS class name for the outer container.
style	CSSProperties	—	Inline styles for the outer container.
showDisconnect	boolean	true	Whether to show the disconnect option in the connected dropdown.

Button States

ConnectButton automatically transitions between three states:

Disconnected

Shows a yellow branded button with the connect label. Clicking opens the WalletModal.

tsx

<ConnectButton label="Connect Wallet" />

Connecting

While a wallet connection is in progress, the button shows a loading spinner. This state is automatic — no configuration needed.

Connected

Shows the connected party ID (truncated) with a green status dot. Clicking opens a dropdown with session details and a disconnect button.

The dropdown shows:

Status badge — green "CONNECTED" indicator
Party ID — the full connected party ID
Wallet name — which wallet is connected
Disconnect button — cleanly ends the session

Connected Label Formats

tsx

// Show truncated party ID (default)
<ConnectButton connectedLabel="address" />
// Result: "party::abc1...xyz9"

// Show wallet name
<ConnectButton connectedLabel="wallet" />
// Result: "Console Wallet"

// Custom format
<ConnectButton
  connectedLabel="custom"
  formatAddress={(partyId) => `Connected: ${partyId.slice(0, 12)}...`}
/>
// Result: "Connected: party::abc1..."

Custom Styling

You can override styles with the style and className props:

tsx

<ConnectButton
  style={{ borderRadius: 8, fontSize: 16 }}
  className="my-connect-button"
/>

💡 Custom Button

If you need full control over the button rendering, use the WalletModal component directly with your own trigger button, plus the useSession and useDisconnect hooks. See WalletModal for details.

Building a Custom Connect Button

For full control, skip ConnectButton and use hooks directly:

tsx

import { useState } from 'react';
import { WalletModal, useSession, useDisconnect, truncatePartyId } from '@partylayer/react';

function CustomConnect() {
  const [modalOpen, setModalOpen] = useState(false);
  const session = useSession();
  const { disconnect } = useDisconnect();

  if (session) {
    return (
      <div>
        <span>{truncatePartyId(String(session.partyId))}</span>
        <button onClick={() => disconnect()}>Disconnect</button>
      </div>
    );
  }

  return (
    <>
      <button onClick={() => setModalOpen(true)}>Connect</button>
      <WalletModal
        isOpen={modalOpen}
        onClose={() => setModalOpen(false)}
        onConnect={() => setModalOpen(false)}
      />
    </>
  );
}

PreviousPartyLayerKit NextWalletModal