React Signing

Send SOL/SPL and sign transactions with cilantro-react

React Signing

Signers are created and managed via cilantro-sdk (e.g. createEmailSignerHelper from cilantro-sdk/helpers) or via cilantro-react hooks (useSigners, usePasskey). Auth is provided by CilantroProvider.

useSendTransaction

Send SOL and SPL tokens using a specific signer (email, phone, passkey, or external):

import { useSendTransaction } from 'cilantro-react';

function SendTransaction({ walletId, signerId }: { walletId: string; signerId: string }) {
  const { sendSOL, sendSPL, isPending, error } = useSendTransaction(walletId, signerId, 'email');

  const handleSendSOL = async () => {
    const result = await sendSOL({
      recipientAddress: '7xKXtg2CW87d97TXJSDpbD5jBkheTqA83TZRuJosgAsU',
      amountLamports: 100000000, // 0.1 SOL
    });
    console.log('Transaction signature:', result.data.signature);
  };

  const handleSendSPL = async () => {
    const result = await sendSPL({
      mintAddress: 'EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v', // USDC
      recipientAddress: '7xKXtg2CW87d97TXJSDpbD5jBkheTqA83TZRuJosgAsU',
      amount: 1000000,
    });
    console.log('Transaction signature:', result.data.signature);
  };

  return (
    <div>
      {error && <p className="text-red-500">{error}</p>}
      <button onClick={handleSendSOL} disabled={isPending}>Send SOL</button>
      <button onClick={handleSendSPL} disabled={isPending}>Send USDC</button>
    </div>
  );
}

Parameters: walletId, optional signerId, optional signerType ('email' | 'phone' | 'passkey' | 'external').

Low-level signer signing (cilantro-react)

For advanced use without hooks:

import {
  signMessageWithSigner,
  signTransactionWithSigner,
  signAndSendTransactionWithSigner,
  getWalletData,
  getSignerPublicKey,
} from 'cilantro-react';

// Sign a message
const result = await signMessageWithSigner(walletId, signer, 'Hello, Solana!');

// Sign and send a transaction
const txResult = await signAndSendTransactionWithSigner(walletId, signer, transaction, connection);

SDK helpers (cilantro-sdk)

When not using React hooks, use cilantro-sdk:

  • One-step (recommended): sendSOLWithSigner, sendSPLWithSigner from cilantro-sdk/helpers — pass walletId, signerId, signer type, recipient, amount, and options (e.g. emailSignerOptions: { deviceKeyManager: storage }).
  • Manual: prepareTransaction (wallet) → signTransactionWithEmailSigner (helpers) → submitTransaction (wallet). See Wallet Module and Helpers.

Auth for all SDK calls is still from CilantroProvider when used inside a React app.

Next steps

React Signing | Cilantro Smart Wallet Docs | Cilantro Smart Wallet