# 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>" %}


---

# Agent Instructions: 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:

```
GET https://ai-agent-sdk-docs.crypto.com/crypto.com-developer-platform/developer-platform-client-sdk-examples/token-example.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.