Wallet Connect Button

A comprehensive Solana wallet connection button with modal dialog, dropdown menu, and wallet management features.

Usage

Basic Usage

import { WalletConnectButton } from "@/components/soldevkit-ui/wallet/wallet-connect-button";

export default function Example() {
  return <WalletConnectButton variant="outline" size="lg" />;
}

With Icon

import { WalletConnectButton } from "@/components/soldevkit-ui/wallet/wallet-connect-button";
import { Wallet } from "lucide-react";

export default function ExampleWithIcon() {
  return <WalletConnectButton variant="default" size="lg" icon={<Wallet className="h-4 w-4" />} />;
}

With Custom Labels

import { WalletConnectButton } from "@/components/soldevkit-ui/wallet/wallet-connect-button";
import { Shield } from "lucide-react";

export default function ExampleWithCustomLabels() {
  return (
    <WalletConnectButton
      variant="outline"
      size="lg"
      icon={<Shield className="h-4 w-4" />}
      labels={{
        "has-wallet": "🚀 Launch Wallet",
        connecting: "🔄 Launching...",
        disconnect: "👋 Goodbye",
        "change-wallet": "🔄 Switch Wallet",
        "copy-address": "📋 Copy Address",
        copied: "✅ Copied!",
      }}
    />
  );
}

Features

Smart State Management: Automatically handles wallet connection states
Modal Dialog: Clean wallet selection interface with installed/not installed badges
Dropdown Menu: Connected wallet management with copy address and disconnect options
Collapsible Wallets: Expandable section for additional wallet options
Icon Support: Add custom icons to enhance visual appeal and branding
Responsive Design: Works seamlessly on desktop and mobile devices
Customizable Labels: Override default text labels for internationalization
Button Variants: Supports all standard button variants and sizes

The icon prop accepts any React node, allowing you to use icons from various libraries or custom SVG elements. The icon is automatically positioned on the left side of the button text with proper spacing.

With Lucide React Icons

import { Wallet, Shield, Zap, Lock, Globe } from "lucide-react";

// Different icon examples
<WalletConnectButton icon={<Wallet className="h-4 w-4" />} />
<WalletConnectButton icon={<Shield className="h-4 w-4" />} />
<WalletConnectButton icon={<Zap className="h-4 w-4" />} />

Icon Sizing Guidelines

Small buttons: Use h-3 w-3 for icons
Default buttons: Use h-4 w-4 for icons
Large buttons: Use h-5 w-5 for icons

<WalletConnectButton size="sm" icon={<Wallet className="h-3 w-3" />} />
<WalletConnectButton size="default" icon={<Wallet className="h-4 w-4" />} />
<WalletConnectButton size="lg" icon={<Wallet className="h-5 w-5" />} />

Custom SVG Icons

const CustomIcon = () => (
  <svg className="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
    <path d="M12 2L2 7v10c0 5.55 3.84 9.74 9 11 5.16-1.26 9-5.45 9-11V7l-10-5z" />
  </svg>
);

<WalletConnectButton icon={<CustomIcon />} />;

Label Customization

You can customize all text labels used by the component:

const customLabels = {
  "change-wallet": "Switch Wallet",
  connecting: "Connecting...",
  "copy-address": "Copy Address",
  copied: "Copied!",
  disconnect: "Disconnect",
  "has-wallet": "Connect Wallet",
  "no-wallet": "Select Wallet",
};

<WalletConnectButton labels={customLabels} />;

Wallet States

The component automatically handles different wallet states:

Not Connected: Shows "Connect Wallet" button that opens the wallet selection modal
Connecting: Shows loading spinner with "Connecting..." text
Connected: Shows wallet icon and truncated address, with dropdown menu for actions

Dependencies

This component requires the following Solana wallet adapter packages:

@solana/wallet-adapter-react
@solana/wallet-adapter-base
@solana/wallet-adapter-react-ui
@solana/wallet-adapter-wallets
@solana/web3.js

Make sure your app is wrapped with the appropriate wallet providers.

Credits

Credits to Shadcn UI for the button style.