Appearance
Send a Transaction
Sending transactions is a fundamental operation in blockchain applications. This guide demonstrates how to send token transactions (e.g. USDC, USDm) using the wagmi library. Most MiniPay users hold stablecoins rather than native CELO, so the examples focus on ERC20 transfers.
Basic Transaction Example
Below are examples for sending tokens. Use encodeFunctionData with the ERC20 transfer function and call sendTransaction with the token contract as to and the encoded data.
tsx
import { useSendTransaction, useConnection } from "wagmi";
import { encodeFunctionData, erc20Abi, parseUnits } from "viem";
const Example = () => {
const { address: connectedAddress } = useConnection();
const { data: hash, isPending, sendTransaction } = useSendTransaction();
const recipientAddress = "0xA0Cf…251e"; // Replace with the recipient address
const amount = 0.05; // Amount in USDC
const USDC_CONTRACT_ADDRESS = "0xcebA9300f2b948710d2653dD7B07f33A8B32118C"; // mainnet
const USDC_ADAPTER = "0x2F25deB3848C207fc8E0c34035B3Ba7fC157602B"; // mainnet; MiniPay may ignore feeCurrency and choose the token the user has the most of
const onPress = async (e) => {
e.preventDefault();
const data = encodeFunctionData({
abi: erc20Abi,
functionName: "transfer",
args: [
recipientAddress,
// Different tokens can have different decimals, USDm (18), USDC (6)
parseUnits(amount.toString(), 6),
],
});
await sendTransaction({
to: USDC_CONTRACT_ADDRESS,
feeCurrency: USDC_ADAPTER,
data,
});
};
return (
<button type="submit" onClick={onPress}>
Send transaction
</button>
);
};tsx
import { useSendTransaction } from "wagmi";
import { encodeFunctionData, erc20Abi, parseUnits } from "viem";
const Example = () => {
const { data: hash, isPending, sendTransaction } = useSendTransaction();
const address = "0xA0Cf…251e"; // Replace with the recipient address
const amount = 0.05; // Amount in USDm
const USDM_CONTRACT_ADDRESS = "0x765DE816845861e75A25fCA122bb6898B8B1282a"; //mainnet
const onPress = async (e) => {
e.preventDefault();
const data = encodeFunctionData({
abi: erc20Abi,
functionName: "transfer",
args: [
address,
// Different tokens can have different decimals, USDm (18), USDC (6)
parseUnits(amount, 18),
],
});
await sendTransaction({
to: USDM_CONTRACT_ADDRESS,
feeCurrency: USDM_CONTRACT_ADDRESS, // MiniPay may ignore and use the token the user has the most of
data,
});
};
return (
<button type="submit" onClick={onPress}>
Send transaction
</button>
);
};NOTE
With Wagmi v3, the connected account is used automatically by sendTransaction. To read the current address in your component, use useConnection() and destructure address.
Mainnet
Name Symbol Token Address Adapter Decimals Uses Adapter?
───────────────────── ────── ────────────────────────────────────────── ────────────────────────────────────────── ──────── ─────────────
Tether USD USD₮ 0x48065fbBE25f71C9282ddf5e1cD6D6A887483D5e 0x0E2A3e05bc9A16F5292A6170456A710cb89C6f72 6 true
PUSO PUSO 0x105d4A9306D2E55a71d2Eb95B81553AE1dC20d7B - 18 false
USDC USDC 0xcebA9300f2b948710d2653dD7B07f33A8B32118C 0x2F25deB3848C207fc8E0c34035B3Ba7fC157602B 6 true
Mento Kenyan Shilling KESm 0x456a3D042C0DbD3db53D5489e98dFb038553B0d0 - 18 false
ECO CFA eXOF 0x73F93dcc49cB8A239e2032663e9475dd5ef29A08 - 18 false
Mento Dollar USDm 0x765DE816845861e75A25fCA122bb6898B8B1282a - 18 false
Mento Colombian Peso COPm 0x8A567e2aE79CA692Bd748aB832081C45de4041eA - 18 false
Mento Euro EURm 0xD8763CBa276a3738E6DE85b4b3bF5FDed6D6cA73 - 18 false
Mento Brazilian Real REALm 0xe8537a3d056DA446677B9E9d6c5dB704EaAb4787 - 18 false
Mento Ghanian Cedi GHSm 0xfAeA5F3404bbA20D3cc2f8C4B0A888F55a3c7313 - 18 false
Celo Sepolia Testnet
Name Symbol Token Address Adapter Decimals Uses Adapter?
───────────────────── ──────── ────────────────────────────────────────── ────────────────────────────────────────── ──────── ─────────────
Mento Euro EURm 0x10c892A6EC43a53E45D0B916B4b7D383B1b78C0F - 18 false
Mento Kenyan Shilling KESm 0x1E0433C1769271ECcF4CFF9FDdD515eefE6CdF92 - 18 false
USDC USDC 0x2F25deB3848C207fc8E0c34035B3Ba7fC157602B 0x4822e58de6f5e485eF90df51C41CE01721331dC0 6 true
Mento Dollar USDm 0x874069Fa1Eb16D44d622F2e0Ca25eeA172369bC1 - 18 false
ECO CFA eXOF 0xB0FA15e002516d0301884059c0aaC0F0C72b019D - 18 false
TetherToken USD₮ 0xC4f86E9B4A588D501c1c3e25628dFd50Bc8D615e - 18 false
Mento Brazilian Real REALm 0xE4D517785D091D3c54818832dB6094bcc2744545 - 18 falseFor a full example, visit the Wagmi documentation.
Wait for Transaction Receipt (Optional)
To enhance user experience, you can wait for the transaction receipt to confirm the transaction's success. For full lifecycle tracking and status UI, see Transaction status.
The following example shows the receipt pattern with a native CELO send; for token transfers use the same useWaitForTransactionReceipt with the hash from a sendTransaction call that uses encoded ERC20 transfer data as in the tabs above.
tsx
import {
useSendTransaction,
useWaitForTransactionReceipt,
} from "wagmi";
import { parseEther } from "viem";
const Example = () => {
const { data: hash, isPending, sendTransaction } = useSendTransaction();
const address = "0xA0Cf…251e";
const amount = "0.05";
const onPress = async (e) => {
e.preventDefault();
await sendTransaction({
to: address,
value: parseEther(amount.toString()),
});
};
const {
isLoading: isConfirming,
isSuccess: isConfirmed,
} =
useWaitForTransactionReceipt({
hash,
});
return (
<>
<button type="submit" onClick={onPress}>
Send transaction
</button>
{isConfirming && <div>Waiting for confirmation...</div>}
{isConfirmed && <div>Transaction confirmed.</div>}
</>
);
};Explanation
useSendTransaction: This hook is used to initiate a transaction. It provides the
sendTransactionfunction, which is called with the transaction details, such as the recipient address and the amount.useWaitForTransactionReceipt: This optional hook is used to wait for the transaction receipt, providing feedback on the transaction's confirmation status. It helps in tracking whether the transaction has been successfully mined.
Transaction Details: The transaction details include the recipient address and the amount to be sent. The
parseEtherfunction is used to convert the Ether amount into the appropriate format for the transaction.UI Feedback: The component provides feedback to the user about the transaction status, such as when the transaction is pending or confirmed. This enhances user interaction and transparency.
Error handling
Handle transaction errors with user-friendly messages: prefer error codes (e.g. -32604) or standard names (e.g. UserRejectedRequestError) over message text, since provider messages can change. See Best practices — Error handling.
User feedback and status
Provide clear feedback during the transaction lifecycle (sending, confirming, success, error). For status tracking and reusable UI patterns, see Transaction status.
Notes
- Ensure
wagmiis correctly configured. Follow our Quick Start guide to know how. - Address Validation: Always validate recipient addresses before sending transactions.
- Error Handling: Implement comprehensive error handling for network errors, insufficient funds, and user rejections. See Best practices — Error handling.
- Security Considerations: Always validate and sanitize user inputs to prevent potential security vulnerabilities.
- Transaction Status: Use
useWaitForTransactionReceiptto track transaction confirmation and provide user feedback. See Transaction status. - User Experience: Provide clear feedback at each stage of the transaction lifecycle (sending, confirming, success, error).
For more information, refer to the Wagmi documentation and see our transaction status guide.