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?