ConnectWalletButton

The ConnectWalletButton is a drop-in component that manages the entire wallet connection flow. It automatically toggles between a “Connect” state and a “Connected” state based on the user’s session.

Key Features

Automatic Truncation: Long Stellar addresses are shortened (e.g., GABCDE...STUV) to fit perfectly in your navigation bar.
State Awareness: The button knows when to show the connection modal and when to trigger a logout.
Headless Styling: While it comes with clean defaults, it is designed to be restyled via simple CSS variables.
Zero Logic Required: You do not need to manually check isConnected or handle click events.

Basic Usage

import { ConnectWalletButton } from "@sorokit/wallet-adapter";

function Header() {
  return (
    <nav>
      <h1>My dApp</h1>
      <ConnectWalletButton />
    </nav>
  );
}

Customization via Props

The component accepts a few simple props for basic labeling and layout:

connectLabel: Change the text shown when no wallet is linked (defaults to “Connect Wallet”).
className: Pass your own Tailwind classes or standard CSS classes to adjust position or margins.

<ConnectWalletButton connectLabel="Sign In" className="my-4" />

Advanced Theming

To make the button match your brand perfectly, use the built-in CSS custom properties. This is more efficient than overriding complex class hierarchies. Add these to your global CSS file:

:root {
  --sorokit-button-bg: #101010;
  --sorokit-button-fg: #ffffff;
  --sorokit-button-radius: 9999px;
  --sorokit-button-padding: 0.5rem 1.5rem;
  --sorokit-button-border: 1px solid #303030;
  --sorokit-button-font-weight: 500;
}

Why use this over a custom button

Consistency: It uses the exact same connect and disconnect logic as the rest of the Sorokit suite.
Safety: It handles the edge cases of wallet rejections and network mismatches internally.
Speed: You can go from a blank page to a fully functioning wallet connection UI in one line of code.

Properties Reference

className: string (Optional). Applied to the underlying HTML button element.
connectLabel: string (Optional). The text displayed during the IDLE state.

​Key Features

​Basic Usage

​Customization via Props

​Advanced Theming

​Why use this over a custom button

​Properties Reference