Send Transaction

You can send a transaction to the network by calling the sendTransaction method. This method takes a TransactionRequest as a parameter.

Note that rpcURL field must be set in the initConfig method, if your connected network is not Ethereum or Polygon.

SignMessage.tsx

import { Address, parseEther } from 'viem'
import { sendTransaction } from '@joyid/evm';
 
interface Props {
  address: Address | null;
}
 
const SendTransaction = ({ address }: Props) => {
  const [toAddress, setToAddress] = React.useState(
    "0xA6eBeCE9938C3e1757bE3024D2296666d6F8Fc49",
  );
  const [amount, setAmount] = React.useState("0.01");
  const onSign = async () => {
    const value = parseEther(amount);
    const txhash = await sendTransaction(
      {
        to: toAddress,
        value: value.toString(),
      },
      address!,
    );
    alert(`tx hash: ${txhash}`);
  };
  return address ? (
    <div className="w-full">
      <h2 className="mb-4 text-lg text-center">Send Transaction</h2>
      <label className="label">To Address:</label>
      <input
        className="input input-bordered w-full mb-4"
        value={toAddress}
        onChange={(e) => setToAddress(e.target.value)}
      />
      <label className="label">Amount:</label>
      <input
        className="input input-bordered w-full mb-4"
        value={amount}
        onChange={(e) => setAmount(e.target.value)}
      />
      <button className="btn btn-primary" onClick={onSign}>
        Send
      </button>
      <div className="divider"></div>
    </div>
  ) : null;
};

Sign Transaction

If you prefer to sign a transaction but not send it to the network, you can use the signTransaction method. signTransaction method takes a TransactionRequest as a parameter and returns a signed serialized transaction.

SignTransaction.tsx

import { signTransaction } from '@joyid/evm'
 
function signTx(address) {
  const tx = await signTransaction(
    {
      to: '0xA6eBeCE9938C3e1757bE3024D2296666d6F8Fc49',
      value: '10000000000000000',
    },
    address,
  )
  // you can call rpc method `eth_sendRawTransaction` to send the transaction to the network:
  // await walletClient.sendRawTransaction(tx)
}

API Reference

Try it out

Sign Typed Data Wagmi