Token Example

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

Installation

1. Clone the repository

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

2. Install dependencies

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:

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

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

For Crypto.com Developer Platform API Key, click here to learn how to obtain your Crypto.com Developer Platform API key.

Note: Never expose real or production API keys in a public or client-side app.

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:

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:

npm run build

To preview the build:

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