React Quick Start

npm install @hermis/solana-headless-react @solana/wallet-adapter-phantom @solana/wallet-adapter-solflare

yarn add @hermis/solana-headless-react @solana/wallet-adapter-phantom @solana/wallet-adapter-solflare

pnpm add @hermis/solana-headless-react @solana/wallet-adapter-phantom @solana/wallet-adapter-solflare

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

function SendTransaction() {
  const { publicKey, sendTransaction } = useWallet();
  const { connection } = useConnection();
  const [recipient, setRecipient] = useState('');
  const [amount, setAmount] = useState('0.1');
  const [sending, setSending] = useState(false);
  const [signature, setSignature] = useState('');

  const handleSend = async () => {
    if (!publicKey || !recipient) return;

    setSending(true);
    setSignature('');

    try {
      const transaction = new Transaction();
      const recipientPubKey = new PublicKey(recipient);

      transaction.add(
        SystemProgram.transfer({
          fromPubkey: publicKey,
          toPubkey: recipientPubKey,
          lamports: parseFloat(amount) * LAMPORTS_PER_SOL
        })
      );

      // Get recent blockhash
      const { blockhash } = await connection.getLatestBlockhash();
      transaction.recentBlockhash = blockhash;
      transaction.feePayer = publicKey;

      // Send transaction
      const sig = await sendTransaction(transaction, connection);
      setSignature(sig);
      console.log('Transaction sent:', sig);
    } catch (error) {
      console.error('Error sending transaction:', error);
      alert('Failed to send transaction');
    } finally {
      setSending(false);
    }
  };

  return (
    <div className="send-transaction">
      <h2>Send SOL</h2>
      <div className="form">
        <input
          type="text"
          placeholder="Recipient address"
          value={recipient}
          onChange={(e) => setRecipient(e.target.value)}
          className="input"
        />
        <input
          type="number"
          placeholder="Amount (SOL)"
          value={amount}
          onChange={(e) => setAmount(e.target.value)}
          step="0.01"
          min="0"
          className="input"
        />
        <button
          onClick={handleSend}
          disabled={!publicKey || !recipient || sending}
          className="send-button"
        >
          {sending ? 'Sending...' : 'Send SOL'}
        </button>
      </div>
      {signature && (
        <div className="success">
          <p>Transaction successful!</p>
          <a
            href={`https://explorer.solana.com/tx/${signature}?cluster=devnet`}
            target="_blank"
            rel="noopener noreferrer"
          >
            View on Explorer
          </a>
        </div>
      )}
    </div>
  );
}

export default SendTransaction;

import React, { useState } from 'react';
import { useWallet } from '@hermis/solana-headless-react';
import {
  address,
  appendTransactionMessageInstruction,
  createSolanaRpc,
  createTransactionMessage,
  devnet,
  lamports,
  pipe,
  setTransactionMessageFeePayerSigner,
  setTransactionMessageLifetimeUsingBlockhash,
  type TransactionSigner
} from '@solana/kit';

// System Program Address
const SYSTEM_PROGRAM_ADDRESS = address('11111111111111111111111111111111');

// Create a transfer SOL instruction using Kit
function getTransferSolInstruction({
  source,
  destination,
  amount,
}: {
  source: TransactionSigner<string>
  destination: address<string>
  amount: ReturnType<typeof lamports>
}) {
  const instructionData = new Uint8Array(12);
  const view = new DataView(instructionData.buffer);
  view.setUint32(0, 2, true); // instruction discriminator: 2 = Transfer
  view.setBigUint64(4, BigInt(amount), true); // amount in lamports

  return {
    programAddress: SYSTEM_PROGRAM_ADDRESS,
    accounts: [
      { address: source.address, role: 3 }, // from account (writable + signer)
      { address: destination, role: 1 },     // to account (writable)
    ],
    data: instructionData,
  };
}

function SendTransaction() {
  const { transactionSigner, signAndSendTransaction } = useWallet();
  const [recipient, setRecipient] = useState('');
  const [amount, setAmount] = useState('0.1');
  const [sending, setSending] = useState(false);
  const [signature, setSignature] = useState('');

  // Create Kit RPC (can be created once and reused, or stored in a context)
  const rpc = createSolanaRpc(devnet('https://api.devnet.solana.com'));

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

    setSending(true);
    setSignature('');

    try {
      const recipientAddr = address(recipient.trim());

      // Convert SOL to lamports
      const numDecimals = BigInt(amount.split('.')[1]?.length ?? 0);
      const amountLamports = lamports(
        BigInt(amount.replace('.', '')) * 10n ** (9n - numDecimals)
      );

      // Get latest blockhash from Kit RPC
      const { value: latestBlockhash } = await rpc
        .getLatestBlockhash({ commitment: 'confirmed' })
        .send();

      // Build transaction using Kit's pattern
      const message = pipe(
        createTransactionMessage({ version: 0 }),
        m => setTransactionMessageFeePayerSigner(transactionSigner, m),
        m => setTransactionMessageLifetimeUsingBlockhash(latestBlockhash, m),
        m => appendTransactionMessageInstruction(
          getTransferSolInstruction({
            amount: amountLamports,
            destination: recipientAddr,
            source: transactionSigner,
          }),
          m,
        ),
      );

      // Pass Kit RPC as the connection parameter
      const sig = await signAndSendTransaction(message, rpc);
      setSignature(sig);
      console.log('Transaction sent:', sig);
    } catch (error) {
      console.error('Error sending transaction:', error);
      alert('Failed to send transaction');
    } finally {
      setSending(false);
    }
  };

  return (
    <div className="send-transaction">
      <h2>Send SOL</h2>
      <div className="form">
        <input
          type="text"
          placeholder="Recipient address"
          value={recipient}
          onChange={(e) => setRecipient(e.target.value)}
          className="input"
        />
        <input
          type="number"
          placeholder="Amount (SOL)"
          value={amount}
          onChange={(e) => setAmount(e.target.value)}
          step="0.01"
          min="0"
          className="input"
        />
        <button
          onClick={handleSend}
          disabled={!transactionSigner || !recipient || sending}
          className="send-button"
        >
          {sending ? 'Sending...' : 'Send SOL'}
        </button>
      </div>
      {signature && (
        <div className="success">
          <p>Transaction successful!</p>
          <a
            href={`https://explorer.solana.com/tx/${signature}?cluster=devnet`}
            target="_blank"
            rel="noopener noreferrer"
          >
            View on Explorer
          </a>
        </div>
      )}
    </div>
  );
}

export default SendTransaction;