Wallet Integration

Guide to integrating Solana wallets for interacting with KalshChain's smart contracts.

Overview

KalshChain supports all Solana wallets compatible with the @solana/wallet-adapter-react standard, including Phantom, Solflare, Backpack, and others.

Supported Wallets

  • ✓ Phantom
  • ✓ Solflare
  • ✓ Backpack
  • ✓ Glow
  • ✓ Slope
  • ✓ Ledger

Installation

Install the necessary dependencies for the wallet adapter components:

bash code
pnpm install @solana/wallet-adapter-react @solana/wallet-adapter-react-ui @solana/wallet-adapter-base

Wallet Connection

The main connection is handled by wrapping the app in a WalletProvider (see src/providers/WalletProvider.tsx).

Connect Button Component

typescript code
'use client';

import { useWallet } from '@solana/wallet-adapter-react';
import { WalletMultiButton } from '@solana/wallet-adapter-react-ui';

export function WalletConnectButton() {
  // Uses the global button styles set by the light theme refactor
  return (
    <WalletMultiButton className="!bg-cyan-primary-600 hover:!bg-cyan-primary-700 !rounded-lg" />
  );
}

// Custom connect button example
export function CustomWalletButton() {
  const { wallet, connect, disconnect, connecting, connected } = useWallet();
  
  const handleClick = () => {
    if (connected) {
      disconnect();
    } else if (wallet) {
      connect();
    }
  };
  
  return (
    <button
      onClick={handleClick}
      disabled={connecting}
      // Cyan-primary button styling
      className="px-6 py-3 bg-cyan-primary-600 hover:bg-cyan-primary-700 
                 rounded-lg font-semibold text-white transition-colors
                 disabled:opacity-50 disabled:cursor-not-allowed"
    >
      {connecting && 'Connecting...'}
      {connected && 'Disconnect'}
      {!connecting && !connected && 'Connect Wallet'}
    </button>
  );
}

Transaction Signing

To execute trades, you use the signTransaction function from the useWallet hook.

Next Steps