Skip to main content

useSendEth Hook

The useSendEth hook allows you to send native ETH on any supported chain through the Crefy Connect API.

Usage

import { useSendEth } from "crefy-connect";
import { useState } from "react";

export default function SendEthExample() {
  const { sendEth, loading, error, data } = useSendEth();
  const [address, setAddress] = useState("");
  const [amount, setAmount] = useState("");

  const handleSend = async () => {
    try {
      await sendEth({
        to: address,
        value: amount,
        chain: "sepolia",
        mode: "fast",
      });
    } catch (err) {
      console.error("Send ETH failed:", err);
    }
  };

  return (
    <div>
      <h2>Send ETH</h2>
      <input
        type="text"
        placeholder="Recipient address"
        value={address}
        onChange={(e) => setAddress(e.target.value)}
      />
      <input
        type="text"
        placeholder="Amount in ETH"
        value={amount}
        onChange={(e) => setAmount(e.target.value)}
      />
      <button onClick={handleSend} disabled={loading}>
        {loading ? "Sending..." : "Send ETH"}
      </button>

      {error && <p style={{ color: "red" }}>Error: {error}</p>}
      {data && <p>Transaction sent! Hash: {data.txHash}</p>}
    </div>
  );
}

Hook Returns

PropertyTypeDescription
sendEth(params: SendEthParams) => Promise<void>Function to send ETH transaction
loadingbooleanWhether a transaction is currently in progress
errorstring | nullError message if transaction failed
dataSendEthResponse | nullTransaction response data

SendEthParams

ParameterTypeRequiredDescription
tostringRecipient wallet address
valuestringAmount to send in ETH (as string, e.g., “0.1”)
chainstringBlockchain network (“sepolia” or “mainnet”)
mode”slow” | “standard” | “fast”Transaction speed mode (default: “standard”)

SendEthResponse

interface SendEthResponse {
  txHash: string;
  // ... other response fields
}

Examples

Basic Send Transaction

import { useSendEth } from "crefy-connect";

export default function SendButton() {
  const { sendEth, loading } = useSendEth();

  const handleSend = async () => {
    await sendEth({
      to: "0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb",
      value: "0.1",
      chain: "sepolia",
    });
  };

  return (
    <button onClick={handleSend} disabled={loading}>
      {loading ? "Sending..." : "Send 0.1 ETH"}
    </button>
  );
}

With Error Handling

import { useSendEth } from "crefy-connect";
import { useState } from "react";

export default function SendForm() {
  const { sendEth, loading, error } = useSendEth();
  const [recipient, setRecipient] = useState("");
  const [amount, setAmount] = useState("");

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    try {
      await sendEth({
        to: recipient,
        value: amount,
        chain: "sepolia",
        mode: "fast",
      });
      // Reset form on success
      setRecipient("");
      setAmount("");
    } catch (err) {
      console.error("Transaction failed:", err);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Recipient address"
        value={recipient}
        onChange={(e) => setRecipient(e.target.value)}
        required
      />
      <input
        type="text"
        placeholder="Amount (ETH)"
        value={amount}
        onChange={(e) => setAmount(e.target.value)}
        required
      />
      <button type="submit" disabled={loading}>
        {loading ? "Sending..." : "Send ETH"}
      </button>
      {error && <p style={{ color: "red" }}>{error}</p>}
    </form>
  );
}

Display Transaction Hash

import { useSendEth } from "crefy-connect";

export default function TransactionTracker() {
  const { sendEth, loading, data } = useSendEth();

  const handleSend = async () => {
    await sendEth({
      to: "0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb",
      value: "0.1",
      chain: "sepolia",
    });
  };

  return (
    <div>
      <button onClick={handleSend} disabled={loading}>
        Send Transaction
      </button>
      {data && (
        <div>
          <p>Transaction successful!</p>
          <p>
            Hash: <a href={`https://sepolia.etherscan.io/tx/${data.txHash}`}>
              {data.txHash}
            </a>
          </p>
        </div>
      )}
    </div>
  );
}

Transaction Speed Modes

import { useSendEth } from "crefy-connect";

export default function SpeedSelector() {
  const { sendEth, loading } = useSendEth();
  const [mode, setMode] = useState<"slow" | "standard" | "fast">("standard");

  const handleSend = async () => {
    await sendEth({
      to: "0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb",
      value: "0.1",
      chain: "sepolia",
      mode: mode,
    });
  };

  return (
    <div>
      <select value={mode} onChange={(e) => setMode(e.target.value as any)}>
        <option value="slow">Slow (Lower fee)</option>
        <option value="standard">Standard</option>
        <option value="fast">Fast (Higher fee)</option>
      </select>
      <button onClick={handleSend} disabled={loading}>
        Send with {mode} mode
      </button>
    </div>
  );
}

Important Notes

Authentication Required: The user must be authenticated via CrefyConnectProvider before sending transactions. The hook will use the authenticated user’s wallet.
Value Format: The value parameter should be a string representing the amount in ETH (e.g., “0.1” for 0.1 ETH, not “100000000000000000”).
Chain Support: Currently supports “sepolia” and “mainnet”. More chains coming soon!