<EtherspotApprovalTransaction />
Intro
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.## Component Properties
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
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>
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.