Hermis - Headless Solana Wallet Adapter

Package Manager

Hermis supports all major Node.js package managers. Choose the one you prefer:

npm
yarn
pnpm

npm install @hermis/solana-headless-react

yarn add @hermis/solana-headless-react

pnpm add @hermis/solana-headless-react

Available Packages

Adapter Base

Vanilla JavaScript implementation with TypeScript support. This is the foundation package that works with any JavaScript/TypeScript framework.

npm
yarn
pnpm

npm install @hermis/solana-headless-adapter-base

yarn add @hermis/solana-headless-adapter-base

pnpm add @hermis/solana-headless-adapter-base

Use when:

Building with vanilla JavaScript or TypeScript
Using Other frameworks (Vue, Svelte, Angular, etc.)
Creating custom wallet adapters
Extending existing adapters
Need maximum flexibility and framework independence

React Package

React hooks and providers for seamless integration with React applications.

npm
yarn
pnpm

npm install @hermis/solana-headless-react

yarn add @hermis/solana-headless-react

pnpm add @hermis/solana-headless-react

Use when:

Building React applications
Want React-specific hooks and context
Need automatic state management

Vue Package

Vue support is coming soon! Star our GitHub repo to get notified when it’s released.

TypeScript Support

All packages include TypeScript definitions out of the box. No additional @types packages are needed.

Framework-Specific Setup

Next.js

For Next.js 13+ with App Router:

npm install @hermis/solana-headless-react

Create a client component for the provider:

app/providers.tsx

'use client';

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

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <HermisProvider network="mainnet-beta">
      {children}
    </HermisProvider>
  );
}

Vite

For Vite projects, install the polyfills:

npm install --save-dev @esbuild-plugins/node-globals-polyfill

Update your vite.config.ts:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill';

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    esbuildOptions: {
      plugins: [NodeGlobalsPolyfillPlugin({ buffer: true })],
    },
  },
});

Verifying Installation

After installation, verify everything works: For Adapter Base:

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);
console.log('Hermis Adapter Base initialized successfully!');

For React:

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

function App() {
  return (
    <HermisProvider>
      <YourApp />
    </HermisProvider>
  );
}

console.log('Hermis React initialized successfully!');

Troubleshooting

Module not found errors

If you see module not found errors, ensure all required packages are installed. Check the package documentation for any peer dependencies that may be needed for your specific use case.

Buffer is not defined

This is common in browser environments. Add buffer polyfill:

npm install buffer

Then import at the top of your entry file:

import { Buffer } from 'buffer';
window.Buffer = Buffer;

TypeScript errors

All packages include TypeScript definitions. If you encounter errors, ensure you’re using a recent version of TypeScript.

Webpack 5 errors

Webpack 5 no longer includes Node.js polyfills by default. You’ll need to configure them manually in your webpack config.

Getting Started

Quick Starts

Core Concepts

Migration Guides

Installation

Package Manager

Available Packages

Adapter Base

React Package

Vue Package

TypeScript Support

Framework-Specific Setup

Next.js

Vite

Verifying Installation

Troubleshooting

Next Steps

Getting Started

Quick Start - React

​Package Manager

​Available Packages

​Adapter Base

​React Package

​Vue Package

​TypeScript Support

​Framework-Specific Setup

​Next.js

​Vite

​Verifying Installation

​Troubleshooting

​Next Steps

Getting Started

Quick Start - React

Package Manager

Available Packages

Adapter Base

React Package

Vue Package

TypeScript Support

Framework-Specific Setup

Next.js

Vite

Verifying Installation

Troubleshooting

Next Steps