Skip to content

Commit 393ae23

Browse files
rarcifararcifa
authored
Merge pull request #111 from crypto-com/BLCKCHN-373-token-module-example-react-app
[BLCKCHN-373] - Add Token module example react app
2 parents b6ec31e + b6cd048 commit 393ae23

22 files changed

Lines changed: 3809 additions & 185 deletions

‎sdk-examples/categories/token/.gitignore‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
# Runtime data
11+
pids
12+
*.pid
13+
*.seed
14+
*.pid.lock
15+
16+
# Coverage directory used by tools like istanbul
17+
coverage
18+
*.lcov
19+
20+
# nyc test coverage
21+
.nyc_output
22+
23+
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
24+
.grunt
25+
26+
# Bower dependency directory (https://bower.io/)
27+
bower_components
28+
29+
# node-waf configuration
30+
.lock-wscript
31+
32+
# Compiled binary addons (https://nodejs.org/api/addons.html)
33+
build/Release
34+
35+
# Dependency directories
36+
node_modules/
37+
jspm_packages/
38+
39+
# TypeScript v1 declaration files
40+
typings/
41+
42+
# TypeScript cache
43+
*.tsbuildinfo
44+
45+
# Optional npm cache directory
46+
.npm
47+
48+
# Optional eslint cache
49+
.eslintcache
50+
51+
# Microbundle cache
52+
.rpt2_cache/
53+
.rts2_cache_cjs/
54+
.rts2_cache_es/
55+
.rts2_cache_umd/
56+
57+
# Optional REPL history
58+
.node_repl_history
59+
60+
# Output of 'npm pack'
61+
*.tgz
62+
63+
# Yarn Integrity file
64+
.yarn-integrity
65+
66+
# dotenv environment variables file
67+
.env
68+
.env.test
69+
.env.local
70+
.env.development.local
71+
.env.test.local
72+
.env.production.local
73+
74+
# parcel-bundler cache (https://parceljs.org/)
75+
.cache
76+
.parcel-cache
77+
78+
# Next.js build output
79+
.next
80+
81+
# Nuxt.js build / generate output
82+
.nuxt
83+
dist
84+
85+
# Gatsby files
86+
.cache/
87+
# Comment in the public line in if your project uses Gatsby and *not* Next.js
88+
# https://nextjs.org/blog/next-9-1#public-directory-support
89+
# public
90+
91+
# vuepress build output
92+
.vuepress/dist
93+
94+
# Serverless directories
95+
.serverless/
96+
97+
# FuseBox cache
98+
.fusebox/
99+
100+
# DynamoDB Local files
101+
.dynamodb/
102+
103+
# TernJS port file
104+
.tern-port
105+
106+
# Stores VSCode versions used for testing VSCode extensions
107+
.vscode-test
108+
109+
# yarn v2
110+
.yarn/cache
111+
.yarn/unplugged
112+
.yarn/build-state.yml
113+
.yarn/install-state.gz
114+
.pnp.*
115+
116+
# Build outputs
117+
dist/
118+
dist-ssr/
119+
build/
120+
out/
121+
122+
# Editor directories and files
123+
.vscode/*
124+
!.vscode/extensions.json
125+
.idea
126+
.DS_Store
127+
*.suo
128+
*.ntvs*
129+
*.njsproj
130+
*.sln
131+
*.sw?
132+
133+
# OS generated files
134+
Thumbs.db
135+
ehthumbs.db
136+
Desktop.ini
137+
138+
# Temporary files
139+
*.tmp
140+
*.temp
141+
.tmp/
142+
.temp/
143+
144+
# Package manager lock files (uncomment if you want to ignore them)
145+
# package-lock.json
146+
# yarn.lock
147+
# pnpm-lock.yaml
148+
149+
# Local environment files
150+
*.local

‎sdk-examples/categories/token/.prettierignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+

‎sdk-examples/categories/token/.prettierrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+

‎sdk-examples/categories/token/README.md‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
# Token Example
2+
3+
This example demonstrates how to use the `@crypto.com/developer-platform-client` Token module to interact with blockchain tokens.
4+
5+
## Table of Contents
6+
7+
- [Installation](#installation)
8+
- [Environment Variables](#environment-variables)
9+
- [Features](#features)
10+
- [Usage](#usage)
11+
- [Build](#build)
12+
- [Development](#development)
13+
- [License](#license)
14+
15+
## Installation
16+
17+
Navigate to the app folder and install dependencies:
18+
19+
```sh
20+
cd developer-platform-sdk-examples/sdk-examples/categories/token
21+
npm install
22+
```
23+
24+
## Environment Variables
25+
26+
This example uses a client-side SDK and may require an API key. You can initialize the SDK inside your app code like so:
27+
28+
```ts
29+
import { Client } from "@crypto.com/developer-platform-client";
30+
31+
Client.init({
32+
apiKey: "sk-proj-...",
33+
});
34+
```
35+
36+
> **Note:** Never expose real or production API keys in a public or client-side app.
37+
38+
## Features
39+
40+
## Features
41+
42+
This example showcases the following **Token module** functions:
43+
44+
- **getNativeTokenBalance**: Retrieve the native token balance for a given wallet address (supports `.cro` addresses)
45+
- **getERC20TokenBalance**: Retrieve the ERC20 token balance for a wallet and contract address
46+
- **getERC721TokenBalance**: Retrieve the ERC721 token balance for a wallet and contract address
47+
- **getTokenOwner**: Get the owner of a specific ERC721 token ID
48+
- **getTokenUri**: Get the token URI for a specific ERC721 token ID
49+
- **getERC20Metadata**: Fetch metadata (name, symbol, decimals) for an ERC20 token
50+
- **getERC721Metadata**: Fetch metadata for an ERC721 token contract
51+
- **transferToken**: Initiate a native or ERC20 token transfer transaction
52+
- **wrapToken**: Wrap native tokens into wrapped tokens
53+
- **swapToken**: Swap tokens between ERC20 contracts
54+
55+
## Usage
56+
57+
To run the app in development mode:
58+
59+
```sh
60+
npm run dev
61+
```
62+
63+
Open your browser and navigate to the provided local URL (typically `http://localhost:5173`).
64+
65+
The application provides a user interface to test Token module functions. You can:
66+
67+
- Enter a wallet address to fetch native, ERC20, or ERC721 token balances
68+
- View token metadata (name, symbol, decimals) for ERC20 and ERC721 contracts
69+
- Initiate token transfers, swaps, and wraps
70+
- Fetch ERC721 token owner and token URI information
71+
- View formatted JSON responses with token data
72+
73+
## Build
74+
75+
To generate a production-ready build:
76+
77+
```sh
78+
npm run build
79+
```
80+
81+
To preview the build:
82+
83+
```sh
84+
npm run preview
85+
```
86+
87+
## Development
88+
89+
- `npm run dev` - Start development server
90+
- `npm run build` - Build for production
91+
- `npm run lint` - Run ESLint
92+
- `npm run preview` - Preview production build
93+
94+
## API Key Requirements
95+
96+
Some functions may require valid API credentials. Make sure to provide valid credentials when testing blockchain transaction features.
97+
98+
## License
99+
100+
This project is licensed under the MIT License. See the LICENSE file for details.

‎sdk-examples/categories/token/eslint.config.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import js from '@eslint/js'
2+
import reactHooks from 'eslint-plugin-react-hooks'
3+
import reactRefresh from 'eslint-plugin-react-refresh'
4+
import globals from 'globals'
5+
import tseslint from 'typescript-eslint'
6+
7+
export default tseslint.config(
8+
{ ignores: ['dist'] },
9+
{
10+
extends: [js.configs.recommended, ...tseslint.configs.recommended],
11+
files: ['**/*.{ts,tsx}'],
12+
languageOptions: {
13+
ecmaVersion: 2020,
14+
globals: globals.browser,
15+
},
16+
plugins: {
17+
'react-hooks': reactHooks,
18+
'react-refresh': reactRefresh,
19+
},
20+
rules: {
21+
...reactHooks.configs.recommended.rules,
22+
'react-refresh/only-export-components': [
23+
'warn',
24+
{ allowConstantExport: true },
25+
],
26+
},
27+
},
28+
)

‎sdk-examples/categories/token/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>SDK Token Example</title>
8+
</head>
9+
10+
<body>
11+
<div id="root"></div>
12+
<script type="module" src="/src/main.tsx"></script>
13+
</body>
14+
</html>

0 commit comments

Comments
 (0)