Skip to main content

​
Welcome

This guide will help you get started with Hermis. Whether you’re building a new dApp or integrating wallet functionality into an existing application, we’ll walk you through the setup process.

​
Choose Your Path

React

Start with React hooks and providers

Adapter Base

Vanilla TypeScript implementation for any framework

​
Installation

Choose the package that best fits your needs: 
npm install @hermis/solana-headless-react @solana/web3.js
This package includes everything you need for React applications, including hooks and context providers.
Both packages work seamlessly with @solana/web3.js and @solana/kit with identical APIs.

​
Quick Setup

Here’s a minimal example to get you started: 
import { HermisProvider, useWallet } from '@hermis/solana-headless-react';
import { Connection, clusterApiUrl } from '@solana/web3.js';

function App() {
  const connection = new Connection(clusterApiUrl('mainnet-beta'));

  return (
    <HermisProvider
      connection={connection}
      autoConnect={false}
    >
      <WalletButton />
    </HermisProvider>
  );
}

function WalletButton() {
  const { connect, disconnect, connected, publicKey } = useWallet();

  return (
    <button onClick={connected ? disconnect : connect}>
      {connected ? `Connected: ${publicKey?.toBase58()}` : 'Connect Wallet'}
    </button>
  );
}

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

function App() {
  const rpc = createSolanaRpc(mainnet('https://api.mainnet-beta.solana.com'));

  return (
    <HermisProvider
      connection={rpc}
      autoConnect={false}
    >
      <WalletButton />
    </HermisProvider>
  );
}

function WalletButton() {
  const { connect, disconnect, connected, publicKey } = useWallet();

  return (
    <button onClick={connected ? disconnect : connect}>
      {connected ? `Connected: ${publicKey?.toBase58()}` : 'Connect Wallet'}
    </button>
  );
}

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

// Create connection
const connection = new Connection(clusterApiUrl('devnet'));

// Auto-detect wallet-standard compatible wallets
const wallets = []; // Add custom wallet adapters here if needed
const adapters = await getStandardWalletAdapters(wallets, connection.rpcEndpoint, WalletAdapterNetwork.Devnet);

// Create wallet manager
const manager = new WalletAdapterManager(adapters);

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

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

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

import { WalletAdapterManager } from '@hermis/solana-headless-adapter-base';
import { getStandardWalletAdapters } from '@hermis/wallet-standard-base';
import { WalletAdapterNetwork } from '@hermis/solana-headless-core';
import { createSolanaRpc, devnet } from '@solana/kit';

// Create connection
const rpc = createSolanaRpc(devnet('https://api.devnet.solana.com'));

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

// Create wallet manager
const manager = new WalletAdapterManager(adapters);

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

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

// Connect to a wallet
manager.selectAdapter('Phantom');
await manager.connect();
Zero Breaking Changes: Notice how the Hermis integration code remains identical across @solana/web3.js and @solana/kit—only the Solana library imports and connection setup change.

​
Configuration Options

Configure Hermis to match your application’s needs:
​
network
string
default:"mainnet-beta"
The Solana network to connect to: mainnet-beta, devnet, or testnet
​
autoConnect
boolean
default:"false"
Automatically connect to a previously connected wallet on page load
​
commitment
string
default:"confirmed"
The commitment level for transactions: processed, confirmed, or finalized
​
wallets
WalletAdapter[]
Array of wallet adapters to support. If not provided, all available wallets are supported.

​
Understanding the Architecture

1

Choose Your Package

Select the package that fits your framework and use case
2

Initialize the Client

Create a connection to Solana and initialize the Hermis client
3

Connect Wallets

Let users connect their Solana wallets (Phantom, Backpack, etc.)
4

Perform Operations

Send transactions, sign messages, and interact with programs

​
What’s Next?

Core Concepts

Learn about Hermis’s architecture and design principles

Cookbook

Explore practical examples and common patterns

API Reference

Dive deep into the API documentation

Examples

View complete example projects

​
Need Help?

GitHub Issues

Report bugs or request features

Discussions

Ask questions and share ideas