Approve tokens, check allowances, and implement permit signatures on React Native
Manage ERC-20 token allowances to allow smart contracts to spend tokens on behalf of a user.Documentation Index
Fetch the complete documentation index at: https://docs.getpara.com/llms.txt
Use this file to discover all available pages before exploring further.
import { ethers } from "ethers";
const ERC20_ABI = [
"function allowance(address owner, address spender) view returns (uint256)",
"function approve(address spender, uint256 amount) returns (bool)",
];
async function checkAllowance(
provider: ethers.Provider,
tokenAddress: string,
owner: string,
spender: string
) {
const contract = new ethers.Contract(tokenAddress, ERC20_ABI, provider);
const allowance = await contract.allowance(owner, spender);
return allowance;
}
async function approveToken(
signer: ethers.Signer,
tokenAddress: string,
spender: string,
amount: string
) {
const contract = new ethers.Contract(tokenAddress, ERC20_ABI, signer);
const tx = await contract.approve(spender, ethers.parseEther(amount));
await tx.wait();
return tx;
}
import { useParaViemClient, useParaViemWriteContract } from "@getpara/react-native-wallet/evm/viem";
import { parseEther, http } from "viem";
import { sepolia } from "viem/chains";
import { View, Text, TouchableOpacity } from "react-native";
const ERC20_ABI = [
{
name: "approve",
type: "function",
stateMutability: "nonpayable",
inputs: [
{ name: "spender", type: "address" },
{ name: "amount", type: "uint256" },
],
outputs: [{ type: "bool" }],
},
] as const;
function TokenAllowance({
tokenAddress,
spender,
}: {
tokenAddress: `0x${string}`;
spender: `0x${string}`;
}) {
const { viemClient } = useParaViemClient({
walletClientConfig: { chain: sepolia, transport: http() },
});
const { writeContractAsync, isPending, data: hash } = useParaViemWriteContract(viemClient);
return (
<View>
<TouchableOpacity
disabled={isPending}
onPress={() =>
writeContractAsync({
address: tokenAddress,
abi: ERC20_ABI,
functionName: "approve",
args: [spender, parseEther("100")],
})
}
>
<Text>{isPending ? "Approving..." : "Approve 100 Tokens"}</Text>
</TouchableOpacity>
{hash && <Text>Transaction: {hash}</Text>}
</View>
);
}