Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.hermis.dev/llms.txt

Use this file to discover all available pages before exploring further.

​
React Example

import { useWallet } from '@hermis/solana-headless-react';

function ConnectButton() {
  const { connect, disconnect, connected, connecting, wallet, publicKey } = useWallet();

  if (connected) {
    return (
      <div>
        <p>Connected to {wallet?.adapter.name}</p>
        <p>{publicKey?.toBase58()}</p>
        <button onClick={disconnect}>Disconnect</button>
      </div>
    );
  }

  return (
    <button onClick={connect} disabled={connecting}>
      {connecting ? 'Connecting...' : 'Connect Wallet'}
    </button>
  );
}

​
With Wallet Selection

import { useWallet, useWalletAdapters } from '@hermis/solana-headless-react';

function WalletSelector() {
  const { select, connect } = useWallet();
  const { installed } = useWalletAdapters();

  return (
    <div>
      {installed.map(adapter => (
        <button
          key={adapter.name}
          onClick={async () => {
            select(adapter.name);
            await connect();
          }}
        >
          {adapter.icon && <img src={adapter.icon} width={20} />}
          {adapter.name}
        </button>
      ))}
    </div>
  );
}

​
Vanilla JavaScript

import { WalletAdapterManager, getStandardWalletAdapters } from '@hermis/solana-headless-adapter-base';

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

manager.on('connect', (publicKey) => {
  console.log('Connected:', publicKey.toBase58());
});

// Connect
manager.selectAdapter('Phantom');
await manager.connect();

​
Error Handling

const handleConnect = async () => {
  try {
    await connect();
  } catch (error) {
    if (error.code === 4001) {
      console.log('User rejected connection');
    } else if (error.message.includes('not installed')) {
      alert('Please install the wallet extension');
    } else {
      console.error('Connection failed:', error);
    }
  }
};

​
Auto-Connect

<HermisProvider autoConnect={true}>
  {children}
</HermisProvider>

​
Accessing Kit Signers

After connecting a wallet, you can access Kit-compatible signers for @solana/kit operations: 
import { useWallet, useConnection } from '@hermis/solana-headless-react';
import { createKitSignersFromAdapter } from '@hermis/solana-headless-adapter-base';
import { useEffect, useState } from 'react';

function KitSignerInfo() {
  const { wallet, connected, addressString } = useWallet();
  const { connection } = useConnection();
  const [signerInfo, setSignerInfo] = useState<string>('');

  useEffect(() => {
    if (connected && wallet) {
      // Create Kit signers from connected wallet adapter
      const { address, messageSigner, transactionSigner } = createKitSignersFromAdapter(
        wallet.adapter,
        connection
      );

      const info = `
        Kit Address: ${address}
        Message Signer: ${messageSigner ? 'Available' : 'Not supported'}
        Transaction Signer: ${transactionSigner ? 'Available' : 'Not supported'}
      `;
      setSignerInfo(info);
    } else {
      setSignerInfo('Not connected');
    }
  }, [connected, wallet, connection]);

  return (
    <div>
      <h3>Kit Signer Status</h3>
      <pre>{signerInfo}</pre>
    </div>
  );
}
What are Kit Signers?
  • messageSigner - Sign messages using Kit’s MessageModifyingSigner interface
  • transactionSigner - Sign and send transactions using Kit’s TransactionSendingSigner interface
  • address - Kit Address type (base58 string compatible with Kit functions)
  • addressString - Plain string representation of the address
When to use Kit Signers:
  • Building with @solana/kit architecture
  • Using Kit-native programs and instructions
  • Need type-safe signer interfaces
  • Want to integrate with Kit ecosystem libraries