Manage Token Allowances - Para Docs

You’re viewing the 2.0 (LTS) docs. View the current 3.0 version of this page.

Manage ERC-20 token allowances to allow smart contracts to spend tokens on behalf of a user. This guide covers checking and setting allowances using , , and .

Prerequisites

You need Web3 libraries configured with Para authentication.

Manage Token Allowances

Ethers.js
Viem
Wagmi

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-sdk";
import { parseEther, http } from "viem";
import { sepolia } from "viem/chains";

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 (
    <div>
      <button
        disabled={isPending}
        onClick={() =>
          writeContract({
            address: tokenAddress,
            abi: ERC20_ABI,
            functionName: "approve",
            args: [spender, parseEther("100")],
          })
        }
      >
        {isPending ? "Approving..." : "Approve 100 Tokens"}
      </button>
      {hash && <p>Transaction: {hash}</p>}
    </div>
  );
}

import { useReadContract, useWriteContract } from "@getpara/react-sdk/wagmi";
import { parseEther } from "viem";

const ERC20_ABI = [
  {
    name: "allowance",
    type: "function",
    stateMutability: "view",
    inputs: [
      { name: "owner", type: "address" },
      { name: "spender", type: "address" },
    ],
    outputs: [{ type: "uint256" }],
  },
  {
    name: "approve",
    type: "function",
    stateMutability: "nonpayable",
    inputs: [
      { name: "spender", type: "address" },
      { name: "amount", type: "uint256" },
    ],
    outputs: [{ type: "bool" }],
  },
] as const;

function TokenAllowance(
  tokenAddress: `0x${string}`,
  owner: `0x${string}`,
  spender: `0x${string}`
) {
  const { data: allowance } = useReadContract({
    address: tokenAddress,
    abi: ERC20_ABI,
    functionName: "allowance",
    args: [owner, spender],
  });

  const { writeContract } = useWriteContract();

  return (
    <div>
      <p>Allowance: {allowance?.toString()}</p>
      <button
        onClick={() =>
          writeContract({
            address: tokenAddress,
            abi: ERC20_ABI,
            functionName: "approve",
            args: [spender, parseEther("100")],
          })
        }
      >
        Approve 100 Tokens
      </button>
    </div>
  );
}