<EtherspotApprovalTransaction />

Introduction

The <EtherspotApprovalTransaction /> component authorizes the spending of an asset, owned by yourself, by another Smart Contract. This Smart Contract can serve any purpose, but is usually associated with decentralised finance app (also known as DeFi) such as Uniswap or Gamma.

In other words, it's like giving your friend permission to spend some of your money, up to a certain limit. In this scenario, the friend is the Smart Contract mentioned above.

The <EtherspotApprovalTransaction /> component assumes that a transfer function exists on the Smart Contract being called.

Component Properties

Property	Description
tokenAddress	The token's Smart Contract address that will be permitted to be moved to the recieverAddress.
receiverAddress	The destination blockchain address (on the same chain) permitted for the tokens located at tokenAddress to be moved to.
value	The maximum value that the token address is allowed to move to the receiverAddress.

How to use

Below is an example of how to use the <EtherspotApprovalTransaction /> component.

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

// Later in your render function...

<EtherspotBatches>
  <EtherspotBatch chainId={80001}>
    {/*
    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>

🎉 Congratulations!

And that is how we give permission for another Smart Contract, which is associated with a blockchain app, to spend your tokens using the <EtherspotApprovalTransaction /> component up to a certain limit.

A note on setting the spend limit...

Sometimes it may seem convenient to set the spending limit to a very high amount, more than what is actually needed. This will result in you not having to call the approval tag again for that Smart Contract.

Whilst no-one is going to stop you doing this, please consider that the Smart Contract you're giving permission to spend your funds may be compromised in the future and could possibly drain all the funds in your account that it has permission to.