# Approve

## Approve params

| Param | Type                      | Description                          |
| ----- | ------------------------- | ------------------------------------ |
| data  | string                    | the approve data                     |
| to    | string                    | the spender address                  |
| type  | token, nft, nftCollection | the supported type of approve action |

## Approve Token

{% tabs %}
{% tab title="Code Example" %}
{% code title="container.tsx" %}

```jsx
import Web3 from 'web3';
import { useRamperService } from '@ramper-v2/native-core';
 
const { approve, network } = useRamperService();
function onApproveToken() {
  const client = new Web3(
    new Web3.providers.HttpProvider(network?.rpcURL),
  );
    const contract = new client.eth.Contract(
      ERC20ABI as any,
      approveTokenContactAddress,
    );
 
    // Main Token decimal
    const decimal = 18;
 
    // Please convert amount to wei unit
    const amount = '100000000';
    const rawData = contract.methods.approve(approveTokenSpender, amount);
    const value = {
      data: rawData.encodeABI(),
      to: approveTokenContactAddress,
      type: 'token',
    };
    try {
      const result = await approve(value);
    } catch (error) {
      // Error Handler
    }
  };
```

{% endcode %}
{% endtab %}

{% tab title="Demo UI" %}
![Approve Token](https://ramper-v2-docs-test.teleport.coin98.dev/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fapprove-token.e4e2d3df.png\&w=828\&q=75)
{% endtab %}
{% endtabs %}

## Approve NFT

{% tabs %}
{% tab title="Code Example" %}
{% code title="approve-nft.tsx" %}

```jsx
import { useRamperService } from '@ramper-v2/native-core';
import Web3 from "web3";
 
const { approve, network } = useRamperService();
 
const handleApproveNFT = async () => {
  try {
    const client = new Web3(
      new Web3.providers.HttpProvider(network?.rpcURL),
    );
  const contract = new client.eth.Contract(
    ERC721FullABI,
    approveNFTContactAddress,
  );
 
  const rawData = contract.methods.approve(
    approveNFTSpender,
    approveNFTTokenId,
  );
    const value = {
      data: rawData.encodeABI(),
      to: approveNFTContactAddress,
      type: 'nft',
    };
    const result = await approve(value);
  } catch (error) {
    // Error Handler
  }
};
```

{% endcode %}
{% endtab %}

{% tab title="Demo UI" %}
![Approve Single NFT](https://ramper-v2-docs-test.teleport.coin98.dev/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fapprove-nft.5656d1b3.png\&w=828\&q=75)
{% endtab %}
{% endtabs %}

## Approve NFT Collection

{% tabs %}
{% tab title="Code Example" %}
{% code title="approve-nft-collection.tsx" %}

```jsx
import { useRamperService } from '@ramper-v2/native-core';
import Web3 from "web3";
 
const { approve, network } = useRamperService();
 
const handleApproveNFTCollection = async () => {
  try {
    const client = new Web3(
      new Web3.providers.HttpProvider(network?.rpcURL),
    );
    const contract = new client.eth.Contract(
      ERC721FullABI,
      approveNFTContactAddress,
    );
 
    const rawData = contract.methods.setApprovalForAll(approveNFTSpender, true);
    const value = {
      data: rawData.encodeABI(),
      to: approveNFTContactAddress,
      type: 'nftCollection',
    };
    const result = await approve(value);
  } catch (error) {
    // Error Handler
  }
};
```

{% endcode %}
{% endtab %}

{% tab title="Demo UI" %}
![Approve NFT Collection](https://ramper-v2-docs-test.teleport.coin98.dev/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fapprove-nft-collection.3f1df157.png\&w=828\&q=75)
{% endtab %}
{% endtabs %}