> ## 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.

# Connect Wallet

> How to connect to Solana wallets

## React Example

```tsx theme={null}
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

```tsx theme={null}
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

```javascript theme={null}
import { WalletAdapterManager } from '@hermis/solana-headless-adapter-base';
import { getStandardWalletAdapters } from '@hermis/wallet-standard-base';
import { WalletAdapterNetwork } from '@hermis/solana-headless-core';

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

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

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

## Error Handling

```tsx theme={null}
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

```tsx theme={null}
<HermisProvider autoConnect={true}>
  {children}
</HermisProvider>
```

## Accessing Kit Signers

After connecting a wallet, you can access Kit-compatible signers for @solana/kit operations:

```tsx theme={null}
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