# Approve Token

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

```javascript
import {
  approveToken,
  ApproveTypes,
  CHAIN,
  TokenInfo,
  RawTransaction
} from "@ramper-v2/multi";
 
import {
  convertBalanceToWei
} from "@ramper-v2/utils";
 
import Web3 from "web3";
import { CHAIN_DATA } from "@wallet/constants";
 
const rpcURL = CHAIN_DATA[chain].rpcURL;
 
const approveTokenData = {
approveContract: '0x0Fd0288AAAE91eaF935e2eC14b23486f86516c8C',
amount: '1',
spender: '0xCD2a3d9F938E13CD947Ec05AbC7FE734Df8DD826'
}
 
const handleApproveToken = async () => {
  try {
    const {
      approveContract,
      amount: approveAmount,
      spender,
    } = approveTokenData;
 
    if (!approveContract || !chain) return;
 
    const client = new Web3(
      new Web3.providers.HttpProvider(rpcURL)
    );
    const contract = new client.eth.Contract(
      ERC20ABI as any,
      approveContract
    );
 
    const decimal = ramper.config.coinInfo?.[chain]?.find((coinInfo) => {
      return (
        String(coinInfo.address).toLocaleLowerCase() ===
        approveContract.toLocaleLowerCase()
      );
    })?.decimals;
 
    const amount = convertBalanceToWei(approveAmount, decimal);
    const dataraw = contract.methods.approve(spender, amount);
    const rawTransaction: RawTransaction = {
      data: dataraw.encodeABI(),
      to: approveContract,
    };
 
    const result = await approveToken({
      transaction: rawTransaction,
      chain,
    });
 
  } catch (error) {
  // Error Handler
  }
};
 
```

{% endcode %}
{% endtab %}

{% tab title="Demo UI" %}

<figure><img src="https://2309458538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FA4lEcolAe1xxpS9iPO2F%2Fuploads%2FZOIxpXauvTbb3E7oCJHv%2Fimage.png?alt=media&#x26;token=ac28fbd1-d591-4d08-a307-fabfa59db920" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}