Hermis - Headless Solana Wallet Adapter

useConnection()

Hook to access the Solana RPC connection. Supports both legacy @solana/web3.js Connection and modern @solana/kit Rpc.

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

const { connection, network } = useConnection();

// Works with both Connection and Kit Rpc
const balance = await connection.getBalance(publicKey);

Return Values

DualConnection

Solana connection instance for RPC calls. Can be either:

Legacy: Connection from @solana/web3.js
Kit: Rpc from @solana/kit

The connection type depends on what you passed to ConnectionProvider or HermisProvider. All dual architecture transaction methods work seamlessly with either type.

WalletAdapterNetwork

Current network (mainnet-beta, devnet, testnet). Optional field.

Usage with web3.js Connection

import { useConnection, useWallet } from '@hermis/solana-headless-react';
import { LAMPORTS_PER_SOL } from '@solana/web3.js';
import { useEffect, useState } from 'react';

function AccountBalance() {
  const { publicKey } = useWallet();
  const { connection } = useConnection();
  const [balance, setBalance] = useState(0);

  useEffect(() => {
    if (publicKey) {
      connection.getBalance(publicKey).then(setBalance);
    }
  }, [publicKey, connection]);

  return <div>Balance: {balance / LAMPORTS_PER_SOL} SOL</div>;
}

Usage with Kit Rpc

import { useConnection, useWallet } from '@hermis/solana-headless-react';
import { createSolanaRpc, devnet } from '@solana/kit';

function SendTransaction() {
  const { address, transactionSigner } = useWallet();
  const { connection } = useConnection();

  const handleSend = async () => {
    if (!address || !transactionSigner) return;

    // connection is Kit Rpc when configured with Kit
    const { value: latestBlockhash } = await connection.getLatestBlockhash().send();

    // Use with Kit transaction patterns
    // ... build and send transaction
  };

  return <button onClick={handleSend}>Send Transaction</button>;
}

Provider Setup

With Legacy Connection

import { ConnectionProvider } from '@hermis/solana-headless-react';
import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';

function App() {
  return (
    <ConnectionProvider
      endpoint="https://api.devnet.solana.com"
      network={WalletAdapterNetwork.Devnet}
      config={{ commitment: 'confirmed' }}
    >
      {children}
    </ConnectionProvider>
  );
}

With Kit Rpc (Custom Provider)

Note: ConnectionProvider creates a legacy Connection internally. To use Kit Rpc, create a custom provider:

import { FC, ReactNode, useMemo } from 'react';
import { createSolanaRpc, devnet, Rpc } from '@solana/kit';
import { ConnectionContext } from '@hermis/solana-headless-react';
import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';

interface KitRpcProviderProps {
  children: ReactNode;
  endpoint: string;
  network?: WalletAdapterNetwork;
}

export const KitRpcProvider: FC<KitRpcProviderProps> = ({
  children,
  endpoint,
  network = WalletAdapterNetwork.Devnet
}) => {
  const rpc = useMemo(() =>
    createSolanaRpc(devnet(endpoint)),
    [endpoint]
  );

  return (
    <ConnectionContext.Provider value={{ connection: rpc as any, network }}>
      {children}
    </ConnectionContext.Provider>
  );
};

// Usage
function App() {
  return (
    <KitRpcProvider endpoint="https://api.devnet.solana.com">
      {children}
    </KitRpcProvider>
  );
}

With HermisProvider (Simplified)

Note: HermisProvider uses ConnectionProvider internally, which creates a legacy Connection.

import { HermisProvider } from '@hermis/solana-headless-react';
import { WalletAdapterNetwork } from '@solana/wallet-adapter-base';

function App() {
  return (
    <HermisProvider
      endpoint="https://api.devnet.solana.com"
      network={WalletAdapterNetwork.Devnet}
      autoConnect={true}
    >
      {children}
    </HermisProvider>
  );
}

The HermisProvider is the recommended approach for most applications. It combines wallet and connection setup with sensible defaults.

DualConnection Type

The DualConnection type is a union type that accepts both architectures:

type DualConnection = Connection | Rpc<any>

This means you can pass either:

Connection from @solana/web3.js (legacy)
Rpc from @solana/kit (modern)

All transaction methods in the SDK (like sendTransaction, signAndSendTransaction) automatically handle both connection types.

Network Detection

When using auto-detected networks, the connection analyzes the RPC endpoint URL:

const { connection, network } = useConnection();

// Endpoint: https://api.devnet.solana.com
// network = WalletAdapterNetwork.Devnet

Supported network detection patterns:

URLs containing “devnet” → WalletAdapterNetwork.Devnet
URLs containing “testnet” → WalletAdapterNetwork.Testnet
URLs containing “mainnet” → WalletAdapterNetwork.Mainnet

Common RPC Methods

Both Connection and Kit Rpc support these common methods (with slight API differences):

getBalance

// web3.js Connection
const balance = await connection.getBalance(publicKey);

// Kit Rpc
const { value: balance } = await connection.getBalance(address).send();

getAccountInfo

// web3.js Connection
const accountInfo = await connection.getAccountInfo(publicKey);

// Kit Rpc
const { value: accountInfo } = await connection.getAccountInfo(address).send();

getLatestBlockhash

// web3.js Connection
const { blockhash } = await connection.getLatestBlockhash();

// Kit Rpc
const { value: latestBlockhash } = await connection.getLatestBlockhash().send();

Type Safety

TypeScript will correctly infer the connection type based on your provider setup:

// If you set up ConnectionProvider with Connection
const { connection } = useConnection();
// connection: Connection

// If you set up ConnectionProvider with Kit Rpc
const { connection } = useConnection();
// connection: Rpc<any>

However, if you need to check at runtime which type you have:

import { isLegacyConnection } from '@hermis/solana-headless-core';

const { connection } = useConnection();

if (isLegacyConnection(connection)) {
  // connection is web3.js Connection
  const balance = await connection.getBalance(publicKey);
} else {
  // connection is Kit Rpc
  const { value: balance } = await connection.getBalance(address).send();
}

Migration Notes

If you’re upgrading from v1 and want to use Kit:

// v1 (legacy only)
import { Connection } from '@solana/web3.js';
const connection = new Connection('https://api.devnet.solana.com');

// v2 with Kit (optional, legacy still works!)
import { createSolanaRpc, devnet } from '@solana/kit';
const rpc = createSolanaRpc(devnet('https://api.devnet.solana.com'));

Both approaches work - choose based on your needs:

Stick with Connection if you have existing web3.js code
Upgrade to Kit Rpc for modern features and better tree-shaking

Using Kit Rpc Without Providers

If you want to use Kit Rpc but don’t want to create a custom provider, you can pass the connection directly to transaction methods:

import { useWallet } from '@hermis/solana-headless-react';
import { createSolanaRpc, devnet } from '@solana/kit';
import { useMemo } from 'react';

function SendTransaction() {
  const { sendTransaction } = useWallet();

  // Create Kit Rpc instance
  const rpc = useMemo(() =>
    createSolanaRpc(devnet('https://api.devnet.solana.com')),
    []
  );

  const handleSend = async () => {
    // Pass Kit Rpc directly to transaction methods
    const signature = await sendTransaction(transaction, rpc);
    console.log('Transaction sent:', signature);
  };

  return <button onClick={handleSend}>Send Transaction</button>;
}

This approach works because all transaction methods (sendTransaction, signAndSendTransaction, etc.) accept DualConnection and handle both connection types automatically.

Adapter Base API

React API

useConnection Hook

useConnection()

Return Values

Usage with web3.js Connection

Usage with Kit Rpc

Provider Setup

With Legacy Connection

With Kit Rpc (Custom Provider)

With HermisProvider (Simplified)

DualConnection Type

Network Detection

Common RPC Methods

getBalance

getAccountInfo

getLatestBlockhash

Type Safety

Migration Notes

Using Kit Rpc Without Providers

​useConnection()

​Return Values

​Usage with web3.js Connection

​Usage with Kit Rpc

​Provider Setup

​With Legacy Connection

​With Kit Rpc (Custom Provider)

​With HermisProvider (Simplified)

​DualConnection Type

​Network Detection

​Common RPC Methods

​getBalance

​getAccountInfo

​getLatestBlockhash

​Type Safety

​Migration Notes

​Using Kit Rpc Without Providers

useConnection()

Return Values

Usage with web3.js Connection

Usage with Kit Rpc

Provider Setup

With Legacy Connection

With Kit Rpc (Custom Provider)

With HermisProvider (Simplified)

DualConnection Type

Network Detection

Common RPC Methods

getBalance

getAccountInfo

getLatestBlockhash

Type Safety

Migration Notes

Using Kit Rpc Without Providers