> For the complete documentation index, see [llms.txt](https://ai-agent-sdk-docs.crypto.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ai-agent-sdk-docs.crypto.com/crypto.com-developer-platform/developer-platform-client-sdk-examples/token-example.md).

# Token Example

This example demonstrates how to use the `@crypto.com/developer-platform-client`  **Token** **module** to interact with blockchain tokens.

<figure><img src="/files/wJ0AboGojSpe21NMzaAS" alt=""><figcaption></figcaption></figure>

### Installation

#### 1. Clone the repository

```sh
git clone https://github.com/crypto-com/developer-platform-sdk-examples.git
```

#### 2. Install dependencies

```sh
cd developer-platform-sdk-examples/sdk-examples/categories/token
npm install
```

### Environment Variables

This example uses a client-side SDK and may require an API key. You can initialize the SDK inside your app (`src/app/Token/index.tsx`) code like so:

```typescript
import { Client } from "@crypto.com/developer-platform-client";

Client.init({
  apiKey: "your-crypto.com-developer-platform-api-key",
});
```

{% hint style="info" %}
For Crypto.com Developer Platform API Key, [click here to learn how to obtain your Crypto.com Developer Platform API key](/crypto.com-developer-platform/developer-platform-dashboard.md).
{% endhint %}

{% hint style="info" %}
**Note:** Never expose real or production API keys in a public or client-side app.
{% endhint %}

### Features

This example showcases the following **Token module** functions:

* **getNativeTokenBalance**: Retrieve the native token balance for a given wallet address (supports `.cro` addresses)
* **getERC20TokenBalance**: Retrieve the ERC20 token balance for a wallet and contract address
* **getERC721TokenBalance**: Retrieve the ERC721 token balance for a wallet and contract address
* **getTokenOwner**: Get the owner of a specific ERC721 token ID
* **getTokenUri**: Get the token URI for a specific ERC721 token ID
* **getERC20Metadata**: Fetch metadata (name, symbol, decimals) for an ERC20 token
* **getERC721Metadata**: Fetch metadata for an ERC721 token contract

*Other functions provided by the `@crypto.com/developer-platform-client`*  ***Token*** ***module** can also be integrated into the app:*

* **transferToken**: Initiate a native or ERC20 token transfer transaction
* **wrapToken**: Wrap native tokens into wrapped tokens
* **swapToken**: Swap tokens between ERC20 contracts

### Usage

To run the app in development mode:

```sh
npm run dev
```

Open your browser and navigate to the provided local URL (typically `http://localhost:5173`).

The application provides a user interface to test Token module functions. You can:

* Enter a wallet address to fetch native, ERC20, or ERC721 token balances
* View token metadata (name, symbol, decimals) for ERC20 and ERC721 contracts
* Fetch ERC721 token owner and token URI information
* View formatted JSON responses with token data

### Build

To generate a production-ready build:

```sh
npm run build
```

To preview the build:

```sh
npm run preview
```

### Development

* `npm run dev` - Start development server
* `npm run build` - Build for production
* `npm run lint` - Run ESLint
* `npm run preview` - Preview production build

### API Key Requirements

Some functions may require valid API credentials. Make sure to provide valid credentials when testing blockchain transaction features.

### Demo Video

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FktUMyU5bBece2vVjrTg7%2Fuploads%2F5oa20vWVAU2YFHl9y9IO%2FTokenExampleDemo.mp4?alt=media&token=34b8f4af-2d1d-4e6e-b56f-0775bca4a41a>" %}