💰 Wallet Integration Example

Connect to Bitcoin wallets faster than a maximalist can say "have fun staying poor!"

The Problem

You want to connect to a user's Bitcoin wallet without the complexity of managing wallet connections yourself. You need a solution that works across different wallet providers and handles all the edge cases.

The LaserEyes Solution

LaserEyes makes wallet integration as easy as ordering pizza (but with fewer calories):

import { useLaserEyes } from 'laser-eyes';
import { WalletConnectCard } from 'laser-eyes/ui';

export function WalletConnector() {
  const { 
    connect, 
    disconnect, 
    isConnected, 
    wallet, 
    balance 
  } = useLaserEyes();
  
  if (!isConnected) {
    return (
      <div className="p-4 border rounded-lg">
        <h2 className="text-xl font-bold mb-4">Connect Your Wallet</h2>
        <WalletConnectCard onConnect={connect} />
      </div>
    );
  }
  
  return (
    <div className="p-4 border rounded-lg">
      <h2 className="text-xl font-bold mb-4">Wallet Connected!</h2>
      <p>Wallet: {wallet.name}</p>
      <p>Address: {wallet.address}</p>
      <p>Balance: {balance} sats</p>
      <button 
        onClick={disconnect}
        className="mt-4 px-4 py-2 bg-red-500 text-white rounded"
      >
        Disconnect
      </button>
    </div>
  );
}

How It Works

We use the useLaserEyes hook to access wallet functionality
The WalletConnectCard component provides a pre-styled UI for connecting wallets
When connected, we display wallet info and balance
The disconnect button lets users disconnect their wallet

Advanced: Custom Wallet Selection

For more control over the wallet selection UI:

import { useLaserEyes } from 'laser-eyes';
import { 
  WalletOption, 
  WalletList 
} from 'laser-eyes/ui';

export function CustomWalletSelector() {
  const { availableWallets, connect } = useLaserEyes();
  
  return (
    <div className="p-4 border rounded-lg">
      <h2 className="text-xl font-bold mb-4">Choose Your Weapon</h2>
      <WalletList>
        {availableWallets.map(wallet => (
          <WalletOption
            key={wallet.id}
            name={wallet.name}
            icon={wallet.icon}
            onClick={() => connect(wallet.id)}
          />
        ))}
      </WalletList>
    </div>
  );
}

Security Note

Always verify the wallet connection is secure. LaserEyes handles this for you, but it's good practice to understand what's happening under the hood. Never ask users for seed phrases - not even if they offer to send you 2 BTC if you send 1 BTC first.

🎉 Achievement Unlocked: Wallet Whisperer

You can now connect to Bitcoin wallets with the elegance of a blockchain ballet dancer!

Introduction