Skip to main content

Overview

Version 2 of Hermis adds major new features while maintaining compatibility with existing code. This release introduces @solana/kit support, enhanced error handling, and standardizes provider interfaces.

What’s New

1. @solana/kit Architecture Support

V2 adds full support for @solana/kit alongside @solana/web3.js. Here’s how Hermis simplifies Kit transaction creation:
import {
  pipe,
  createTransactionMessage,
  setTransactionMessageFeePayerSigner,
  setTransactionMessageLifetimeUsingBlockhash,
  appendTransactionMessageInstruction
} from '@solana/kit';
import { getTransferSolInstruction } from '@solana-program/system';

const { value: latestBlockhash } = await rpc.getLatestBlockhash().send();

const message = pipe(
  createTransactionMessage({ version: 0 }),
  m => setTransactionMessageFeePayerSigner(transactionSigner, m),
  m => setTransactionMessageLifetimeUsingBlockhash(latestBlockhash, m),
  m => appendTransactionMessageInstruction(
    getTransferSolInstruction({
      source: fromAddress,
      destination: toAddress,
      amount: lamports(1000000n)
    }),
    m
  )
);

const signature = await signAndSendTransaction(message, rpc);
Why use createKitTransaction?
  • 70% less boilerplate - No pipe pattern or nested callbacks
  • Automatic blockhash fetching - One less async call to manage
  • Batch instruction handling - Pass multiple instructions as array
  • Dual architecture support - Works with web3.js Connection or Kit Rpc
  • Beginner-friendly - Imperative style, easier to understand
Key Features:
  • Dual architecture support - use web3.js OR Kit in the same app
  • Automatic transaction type detection
  • Kit-friendly wallet properties (transactionSigner, messageSigner, address)
  • Helper utilities for Kit development

2. Enhanced Error Handling

New @hermis/errors package with structured error codes:
import { HermisError, isHermisError } from '@hermis/errors';

try {
  await signTransaction(tx);
} catch (error) {
  if (isHermisError(error)) {
    console.log(error.code);        // Structured error code
    console.log(error.context);     // Rich context with wallet/transaction details
    console.log(error.getSolution()); // Actionable guidance
  }
}

3. New Utility Hooks

Additional hooks for common operations:
import {
  useSolanaBalance,
  useSolanaTokenAccounts,
  useSolanaNFTs,
  useSolanaTransaction,
  useWalletAdapters
} from '@hermis/solana-headless-react';

// Fetch balance with automatic updates
const { balance, loading } = useSolanaBalance(publicKey);

// Get token accounts
const { tokenAccounts } = useSolanaTokenAccounts(publicKey);

// Fetch NFTs
const { nfts } = useSolanaNFTs(publicKey);

4. Wallet Standard Compliance

Improved wallet detection with CAIP-2 compliant chain identifiers:
  • solana:mainnet
  • solana:devnet
  • solana:testnet

Breaking Changes (Pre-Release Users Only)

If you were using HermisProvider in early/pre-release versions, the following props were renamed for consistency:

HermisProvider Props Standardized

To match WalletProvider interface and follow web3.js conventions:
<HermisProvider
  rpcEndpoint="https://devnet.solana.com"
  additionalAdapters={wallets}
>
  {children}
</HermisProvider>
Changes:
  • rpcEndpointendpoint (matches web3.js Connection pattern)
  • additionalAdapterswallets (matches WalletProvider interface)

Migration Steps

1

Update HermisProvider Props (if using)

If you’re using HermisProvider, update prop names:
  • Change rpcEndpoint to endpoint
  • Change additionalAdapters to wallets
2

Optionally Adopt Kit Architecture

Start using Kit features where beneficial - access Kit-specific properties from useWallet()
3

Upgrade Error Handling

Implement enhanced error handling with the new @hermis/errors package
4

Test Your Application

Test all wallet operations to ensure everything works correctly

Example: Before and After

Using HermisProvider

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

function App() {
  // Auto-detect wallet-standard compatible wallets
  const wallets = []; // Add custom wallet adapters here if needed

  return (
    <HermisProvider
      rpcEndpoint="https://devnet.solana.com"
      additionalAdapters={wallets}
    >
      <WalletButton />
    </HermisProvider>
  );
}

Using WalletProvider

No changes needed - WalletProvider interface is unchanged:
import { WalletProvider, ConnectionProvider } from '@hermis/solana-headless-react';

function App() {
  return (
    <ConnectionProvider endpoint="https://devnet.solana.com">
      <WalletProvider wallets={wallets}>
        <YourApp />
      </WalletProvider>
    </ConnectionProvider>
  );
}

New Features Deep Dive

Dual Architecture Support

All transaction methods now support both architectures automatically:
import { useWallet } from '@hermis/solana-headless-react';
import { Transaction } from '@solana/web3.js';
import { createTransactionMessage } from '@solana/kit';

const { signTransaction } = useWallet();

// Works with web3.js
const web3Tx = new Transaction();
await signTransaction(web3Tx);

// Also works with Kit
const kitTx = createTransactionMessage({ version: 0 });
await signTransaction(kitTx);

// Same method, both architectures! ✨

Kit-Friendly Properties

New properties added to useWallet() hook for Kit development:
const {
  // Kit-specific properties (NEW in v2)
  address,              // Kit Address type
  addressString,        // Plain string address
  chain,                // Chain identifier (e.g., 'solana:devnet')
  messageSigner,        // Kit MessageModifyingSigner
  transactionSigner,    // Kit TransactionSendingSigner
  getChainId,           // Get chain ID for network

  // Existing web3.js properties (unchanged)
  publicKey,
  connected,
  connect,
  disconnect,
  signTransaction,
  // ... all other existing properties
} = useWallet();

Helper Utilities

New Kit helper functions:
import {
  createKitTransaction,
  generateKitKeypair,
  signTransactionWithSigner,
  createRPCConnection,
  isKitTransaction,
  supportsKitArchitecture
} from '@hermis/solana-headless-react';

Backwards Compatibility

All existing web3.js code continues to work without modification
// Your existing code - still works perfectly!
import { useWallet } from '@hermis/solana-headless-react';
import { Transaction, SystemProgram } from '@solana/web3.js';

const { signTransaction, sendTransaction } = useWallet();
const tx = new Transaction();
// ... add instructions
await signTransaction(tx);

Need Help?

GitHub Discussions

Ask questions and get help from the community

Report Issues

Report bugs or migration issues

API Reference

Explore the complete API documentation

Kit Guide

Learn about Kit architecture support