Prerequisites
You need Web3 libraries configured with Para authentication.- Ethers.js
- Viem
- Wagmi
Send ETH
import { useParaEthersSigner, useParaEthersSendTransaction } from "@getpara/react-sdk";
import { ethers, JsonRpcProvider } from "ethers";
const provider = new JsonRpcProvider("https://ethereum-sepolia-rpc.publicnode.com");
function SendETH() {
const { ethersSigner } = useParaEthersSigner({ provider });
const {
sendTransactionAsync,
isPending,
data: receipt,
} = useParaEthersSendTransaction(ethersSigner);
return (
<div>
<button
onClick={() =>
sendTransaction({
to: "0x742d35Cc6634C0532925a3b844Bc9e7595f7BBB2",
value: ethers.parseEther("0.01"),
})
}
disabled={isPending}
>
{isPending ? "Sending..." : "Send 0.01 ETH"}
</button>
{receipt && <p>Transaction Hash: {receipt.hash}</p>}
</div>
);
}
Send ERC-20 Tokens
import { useParaEthersSigner, useParaEthersWriteContract } from "@getpara/react-sdk";
import { ethers, JsonRpcProvider } from "ethers";
const ERC20_ABI = [
"function transfer(address to, uint256 amount) returns (bool)"
];
const provider = new JsonRpcProvider("https://ethereum-sepolia-rpc.publicnode.com");
function SendToken({
tokenAddress,
decimals,
}: {
tokenAddress: string;
decimals: number;
}) {
const { ethersSigner } = useParaEthersSigner({ provider });
const {
writeContractAsync,
isPending,
data: receipt,
} = useParaEthersWriteContract(ethersSigner);
return (
<button
onClick={() =>
writeContract({
address: tokenAddress,
abi: ERC20_ABI,
functionName: "transfer",
args: [
"0x742d35Cc6634C0532925a3b844Bc9e7595f7BBB2",
ethers.parseUnits("10", decimals),
],
})
}
disabled={isPending}
>
{isPending ? "Sending..." : "Send 10 Tokens"}
</button>
);
}
Send ETH
import { useParaViemClient, useParaViemSendTransaction } from "@getpara/react-sdk";
import { parseEther, http } from "viem";
import { sepolia } from "viem/chains";
function SendETH() {
const { viemClient } = useParaViemClient({
walletClientConfig: { chain: sepolia, transport: http() },
});
const {
sendTransactionAsync,
isPending,
data: hash,
} = useParaViemSendTransaction(viemClient);
return (
<div>
<button
onClick={() =>
sendTransaction({
to: "0x742d35Cc6634C0532925a3b844Bc9e7595f7BBB2",
value: parseEther("0.01"),
})
}
disabled={isPending}
>
{isPending ? "Sending..." : "Send 0.01 ETH"}
</button>
{hash && <p>Transaction Hash: {hash}</p>}
</div>
);
}
Send ERC-20 Tokens
import { useParaViemClient, useParaViemWriteContract } from "@getpara/react-sdk";
import { parseUnits, http } from "viem";
import { sepolia } from "viem/chains";
const ERC20_ABI = [
{
name: "transfer",
type: "function",
stateMutability: "nonpayable",
inputs: [
{ name: "to", type: "address" },
{ name: "amount", type: "uint256" },
],
outputs: [{ type: "bool" }],
},
] as const;
function SendToken({
tokenAddress,
decimals,
}: {
tokenAddress: `0x${string}`;
decimals: number;
}) {
const { viemClient } = useParaViemClient({
walletClientConfig: { chain: sepolia, transport: http() },
});
const {
writeContractAsync,
isPending,
data: hash,
} = useParaViemWriteContract(viemClient);
return (
<button
onClick={() =>
writeContract({
address: tokenAddress,
abi: ERC20_ABI,
functionName: "transfer",
args: [
"0x742d35Cc6634C0532925a3b844Bc9e7595f7BBB2",
parseUnits("10", decimals),
],
})
}
disabled={isPending}
>
{isPending ? "Sending..." : "Send 10 Tokens"}
</button>
);
}
Send ETH
import { useSendTransaction, useWaitForTransactionReceipt } from "@getpara/react-sdk/wagmi";
import { parseEther } from "viem";
function SendETH() {
const { data: hash, isPending, sendTransaction } = useSendTransaction();
const { data: receipt, isPending: isConfirming } = useWaitForTransactionReceipt({
hash
});
return (
<div>
<button
onClick={() => sendTransaction({
to: "0x742d35Cc6634C0532925a3b844Bc9e7595f7BBB2",
value: parseEther("0.01")
})}
disabled={isPending || isConfirming}
>
{isPending ? "Sending..." : "Send 0.01 ETH"}
</button>
{hash && <p>Transaction Hash: {hash}</p>}
{receipt && <p>Confirmed in block: {receipt.blockNumber}</p>}
</div>
);
}
Send ERC-20 Tokens
import { useWriteContract, useWaitForTransactionReceipt } from "@getpara/react-sdk/wagmi";
import { parseUnits } from "viem";
const ERC20_ABI = [
{
name: "transfer",
type: "function",
stateMutability: "nonpayable",
inputs: [
{ name: "to", type: "address" },
{ name: "amount", type: "uint256" }
],
outputs: [{ type: "bool" }]
}
] as const;
function SendToken({
tokenAddress,
decimals
}: {
tokenAddress: `0x${string}`;
decimals: number;
}) {
const { data: hash, isPending, writeContract } = useWriteContract();
const { isPending: isConfirming } = useWaitForTransactionReceipt({ hash });
return (
<button
onClick={() => writeContract({
address: tokenAddress,
abi: ERC20_ABI,
functionName: "transfer",
args: [
"0x742d35Cc6634C0532925a3b844Bc9e7595f7BBB2",
parseUnits("10", decimals)
]
})}
disabled={isPending || isConfirming}
>
{isPending ? "Sending..." : "Send 10 Tokens"}
</button>
);
}