Manage Token Allowances - Para Docs

Manage ERC-20 token allowances to allow smart contracts to spend tokens on behalf of a user.

Wagmi is not available on React Native. Use Ethers.js or Viem for EVM operations.

Manage Token Allowances

Ethers.js
Viem

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>
  );
}

Next Steps

⌘I