Docs/Hyperkit SDK/Components/ConnectWallet

ConnectWallet

Interactive button component for wallet connection and account management. Handles connection, disconnection, and account display with a dropdown menu.

Overview

The ConnectWallet component provides a complete wallet connection interface. It automatically handles connection state, displays account information, and provides options to copy the address or disconnect.

Props

Name	Type	Default	Description
`onSuccess`	`(address: string) => void`	-	Callback fired when wallet connects successfully
`onError`	`(error: string) => void`	-	Callback fired when connection fails
`onDisconnect`	`() => void`	-	Callback fired when wallet disconnects
`showDropdown`	`boolean`	`true`	Whether to show dropdown menu when connected

Basic Usage

Use ConnectWallet in your application:

App.tsx

import { ConnectWallet } from 'hyperkit';

function App() {
  return (
    <div>
      <ConnectWallet />
    </div>
  );
}

Using Callbacks

Handle connection events with callbacks:

WithCallbacks.tsx

import { ConnectWallet } from 'hyperkit';

function App() {
  const handleSuccess = (address: string) => {
    console.log('Connected:', address);
  };

  const handleError = (error: string) => {
    console.error('Connection failed:', error);
  };

  return (
    <ConnectWallet
      onSuccess={handleSuccess}
      onError={handleError}
      onDisconnect={() => console.log('Disconnected')}
    />
  );
}

Customization

Disable dropdown menu for simpler display:

SimpleDisplay.tsx

import { ConnectWallet } from 'hyperkit';

function App() {
  return (
    <ConnectWallet showDropdown={false} />
  );
}

Styling

ConnectWallet inherits styling from Container component. You can customize appearance using Container props or by overriding CSS classes.

Components

Swap