> For the complete documentation index, see [llms.txt](https://v1.etherspot.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://v1.etherspot.io/transaction-kit/react-components/less-than-etherspotapprovaltransaction-greater-than.md).

# \<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.

{% hint style="warning" %}
The `<EtherspotApprovalTransaction />` component assumes that a `transfer` function exists on the Smart Contract being called.
{% endhint %}

## 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.

```jsx
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>
```

## :tada: 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.

{% hint style="warning" %}
**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.
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://v1.etherspot.io/transaction-kit/react-components/less-than-etherspotapprovaltransaction-greater-than.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.