Client-Side Signing

"use client";
import { createSolanaRpc, signTransactionMessageWithSigners } from "@solana/kit";

"use client";
import { useCallback } from "react";
import { useWallet } from "@solana/wallet-adapter-react";
import {
  createSolanaRpc,
  createTransactionMessage,
  setTransactionMessageLifetimeUsingBlockhash,
  appendTransactionMessageInstruction,
  signTransactionMessageWithSigners,
  sendAndConfirmTransactionFactory,
  createSolanaRpcSubscriptions,
} from "@solana/kit";
import { getTransferSolInstruction } from "@solana-program/system";
 
export function SendButton({ to, lamports }: { to: string; lamports: bigint }) {
  const wallet = useWallet();
  const rpc = createSolanaRpc(process.env.NEXT_PUBLIC_RPC_URL!);
  const rpcSubscriptions = createSolanaRpcSubscriptions(process.env.NEXT_PUBLIC_RPC_WSS_URL!);
 
  const onSend = useCallback(async () => {
    if (!wallet.publicKey) return;
    const { value: bh } = await rpc.getLatestBlockhash().send();
    // Bridge wallet to kit signer (use your template's helper)
    let msg = createTransactionMessage({ version: 0 });
    // set fee payer signer, lifetime, transfer ix...
    const signed = await signTransactionMessageWithSigners(msg);
    const sendAndConfirm = sendAndConfirmTransactionFactory({ rpc, rpcSubscriptions });
    await sendAndConfirm(signed, { commitment: "confirmed" });
  }, [wallet, rpc, rpcSubscriptions, to, lamports]);
 
  return <button onClick={onSend}>Send</button>;
}