Vanilla JavaScript Example

import { WalletAdapterManager, getStandardWalletAdapters } from '@hermis/solana-headless-adapter-base';
import { Connection, clusterApiUrl, LAMPORTS_PER_SOL } from '@solana/web3.js';

// Global state
let manager;
let connection;

// Initialize wallet manager and connection
function initWalletManager() {
  connection = new Connection(clusterApiUrl('devnet'));

  // Auto-detect wallet-standard compatible wallets
  const wallets = []; // Add custom wallet adapters here if needed
  const adapters = getStandardWalletAdapters(wallets);

  manager = new WalletAdapterManager(adapters);
  setupEventListeners();
  renderWalletOptions();
}

// Setup wallet event listeners
function setupEventListeners() {
  manager.on('connect', async (publicKey) => {
    console.log('Connected:', publicKey.toBase58());
    showWalletInfo(publicKey.toBase58());
    await updateBalance(publicKey);
  });

  manager.on('disconnect', () => {
    console.log('Disconnected');
    hideWalletInfo();
  });

  manager.on('error', (error) => {
    console.error('Error:', error);
    alert(`Wallet error: ${error.message}`);
  });

  document.getElementById('disconnect-btn').onclick = () => {
    manager.disconnect();
  };
}

// Render available wallet options
function renderWalletOptions() {
  const container = document.getElementById('wallet-selector');
  const adapters = manager.getAdapters();

  adapters.forEach(adapter => {
    const button = document.createElement('button');
    button.className = 'wallet-option';
    button.textContent = adapter.name;

    if (adapter.readyState === 'Installed') {
      button.classList.add('installed');
      const badge = document.createElement('span');
      badge.textContent = ' ✓ Installed';
      badge.style.color = '#14F195';
      badge.style.marginLeft = '10px';
      button.appendChild(badge);
    }

    button.onclick = async () => {
      manager.selectAdapter(adapter.name);
      try {
        await manager.connect();
      } catch (error) {
        console.error('Connection failed:', error);
      }
    };

    container.appendChild(button);
  });
}

// Update wallet balance
async function updateBalance(publicKey) {
  try {
    const balance = await connection.getBalance(publicKey);
    const solBalance = balance / LAMPORTS_PER_SOL;
    document.getElementById('wallet-balance').textContent = solBalance.toFixed(4);
  } catch (error) {
    console.error('Failed to get balance:', error);
    document.getElementById('wallet-balance').textContent = 'Error';
  }
}

// Show wallet info UI
function showWalletInfo(address) {
  document.getElementById('wallet-name').textContent = manager.getSelectedAdapter()?.name || 'Unknown';
  document.getElementById('wallet-address').textContent = address;
  document.getElementById('wallet-info').style.display = 'block';
  document.getElementById('wallet-selector').style.display = 'none';
}

// Hide wallet info UI
function hideWalletInfo() {
  document.getElementById('wallet-info').style.display = 'none';
  document.getElementById('wallet-selector').style.display = 'flex';
}

// Initialize on load
initWalletManager();

import { Transaction, SystemProgram, PublicKey, LAMPORTS_PER_SOL } from '@solana/web3.js';

// Send SOL transaction
async function sendSOL(recipientAddress, amountInSOL) {
  const publicKey = manager.getAdapter()?.publicKey;
  if (!publicKey) {
    throw new Error('Wallet not connected');
  }

  try {
    const transaction = new Transaction();
    transaction.add(
      SystemProgram.transfer({
        fromPubkey: publicKey,
        toPubkey: new PublicKey(recipientAddress),
        lamports: amountInSOL * LAMPORTS_PER_SOL
      })
    );

    const { blockhash } = await connection.getLatestBlockhash();
    transaction.recentBlockhash = blockhash;
    transaction.feePayer = publicKey;

    const signature = await manager.signAndSendTransaction(connection, transaction);

    if (!signature) {
      throw new Error('Transaction failed');
    }

    console.log('✅ Transaction signature:', signature);

    // Wait for confirmation
    await connection.confirmTransaction(signature, 'confirmed');
    console.log('✅ Transaction confirmed!');

    return signature;
  } catch (error) {
    console.error('❌ Transaction error:', error);
    throw error;
  }
}

// Wire up send button
document.getElementById('send-btn').onclick = async () => {
  const recipient = document.getElementById('recipient').value;
  const amount = parseFloat(document.getElementById('amount').value);
  const statusEl = document.getElementById('tx-status');

  if (!recipient || !amount) {
    statusEl.textContent = 'Please enter recipient and amount';
    return;
  }

  try {
    statusEl.textContent = 'Sending transaction...';
    const signature = await sendSOL(recipient, amount);
    statusEl.textContent = `Success! Signature: ${signature.substring(0, 20)}...`;
  } catch (error) {
    statusEl.textContent = `Error: ${error.message}`;
  }
};

// Sign message with wallet
async function signMessage(message) {
  const publicKey = manager.getAdapter()?.publicKey;
  if (!publicKey) {
    throw new Error('Wallet not connected');
  }

  try {
    // Encode message to Uint8Array
    const encodedMessage = new TextEncoder().encode(message);

    // Sign using manager
    const signature = await manager.signMessage(encodedMessage);

    if (!signature) {
      throw new Error('Message signing failed');
    }

    console.log('✅ Signature:', signature);
    return signature;
  } catch (error) {
    console.error('❌ Signing error:', error);
    throw error;
  }
}

// Wire up sign button
document.getElementById('sign-btn').onclick = async () => {
  const message = document.getElementById('message-input').value;
  const outputEl = document.getElementById('signature-output');

  if (!message) {
    outputEl.textContent = 'Please enter a message';
    return;
  }

  try {
    outputEl.textContent = 'Signing message...';
    const signature = await signMessage(message);
    outputEl.textContent = `Signature: ${Array.from(signature).slice(0, 10).join(', ')}...`;
  } catch (error) {
    outputEl.textContent = `Error: ${error.message}`;
  }
};