<EtherspotApprovalTransaction />

import {
  EtherspotContractTransaction,
  EtherspotApprovalTransaction,
  EtherspotBatches,
  EtherspotBatch,
} from "@etherspot/transaction-kit";
import { utils } from "ethers";

// Later in your render function...

<EtherspotBatches>
  <EtherspotBatch chainId={11155111}>
    {/*
    The following block is the first transaction in this batch
    of transactions, and instructs Etherspot to set a spending
    limit for the Smart Contract located at `receiverAddress`
    to be allowed to spend the token located at `tokenAddress`
    up to the amount specified in `value`.
    
    So in summary, using the example below:
    
    Smart Contract: 0x0493b9a21dE42546B2E3687Da683D0B7B6ec2180
    is allowed to spend up to and including 10 of the token
    located at: 0x2A9bb3fB4FBF8e536b9a6cBEbA33C4CD18369EaF.
    */}
    <EtherspotApprovalTransaction
      tokenAddress={"0x2A9bb3fB4FBF8e536b9a6cBEbA33C4CD18369EaF"}
      receiverAddress={"0x0493b9a21dE42546B2E3687Da683D0B7B6ec2180"}
      value={"10"}  
    />
    {/*
    The following block is the second transaction in this batch
    of transactions, and instructs Etherspot to call and execute
    the "stake" function on the Smart Contract located at the
    `contractAddress`. The "stake" function in the Smart Contract
    address located at the `contractAddress` takes 1 parameter
    which is the numbber of tokens to stake.
    
    In the <EtherspotApprovalTransaction /> component above, we
    gave permission for the Smart Contract below to spend 10 tokens
    of the token located at `tokenAddress` above from the Etherspot
    Smart Wallet account.
    */}
    <EtherspotContractTransaction
      contractAddress={"0x0493b9a21dE42546B2E3687Da683D0B7B6ec2180"}
      abi={["function stake(uint)"]}
      methodName={"stake"}
      params={[utils.parseEther("10")]}
    />
  </EtherspotBatch>
</EtherspotBatches>