IoTeX Dapp Sample

Introduction 
The IoTeX dApp Sample is a comfortable environment for learning IoTeX development and is the best way to build a new dApp.
It sets up a basic working example that is cross-blockchain, multi-asset and supports the most popular wallet apps  (including Metamask) out of the box. The example utilizes the latest JavaScript features, provides a nice developer experience and optimizes your app for production. You’ll need to have Node>=10.17.0. 
IoTeX dApp Starter
This sample dApp supports Typescript as includes Vite as a fast build server, React as the frontend framework, Chakra as a components library, and Cypress as a testing suite.
Get Started
To start your IoTeX dApp, you can fork the dApp Sample repository: 
1.Open the repository on GitHub: https://github.com/iotexproject/iotex-dapp-sample-v2.
2.Click the "Use this template" button:
   3. Clone your new repository: 
1
git clone https://github.com/<your-github-username>/iotex-dapp-sample-v2.git
Copied!
Once the repository is cloned, you can start the demo app with:
1
cd iotex-dapp-sample-v2
2
yarn install
3
yarn start
Copied!
See the demo app running on your local machine at localhost:3000, and start building your great new idea!
Cheatsheet
Here's a cheat sheet as a reference:
1
import { rootStore, useStore } from '@/store/index';
2
​
3
const { god } = useStore()
4
// or const god = rootStore.god
5
​
6
god.isConnect   
7
​
8
god.currentChain 
9
god.currentChain.chainId  // for current connected chain id 
10
god.currentChain.Coin  // eth/bnb/iotx
11
god.currentChain.Coin.balance  // current balance
12
// ... see ChainState
13
​
14
god.currentNetwork     
15
god.currentNetwork.account   // for current connected account address
16
// ... see NetworkState
17
 
18
​
19
god.setShowConnecter()  // to show/close the Wallet Selector
20
​
21
god.currentNetwork.loadBalance() // to load chain coin balance
22
god.currentNetwork.multicall()  // main function to batch read state from contract
23
god.currentNetwork.execContract() // main function to execute contract 
24
​
25
​
26
// multicall/execContract example
27
import ERC20ABI from "..."
28
​
29
const newToken = {
30
    address: "0x810ee35443639348adbbc467b33310d2ab43c168",
31
    abi: ERC20ABI, 
32
    symbol: "",
33
    name: "",
34
    decimals: "",
35
    balance: new BignumberState({}),
36
}
37
​
38
const {address, abi} = newToken
39
​
40
await god.currentNetwork.multicall([
41
    { address, abi, method: 'symbol', handler: (v: any) => (newToken.symbol = v.toString()) },
42
    { address, abi, method: 'name', handler: (v: any) => (newToken.name = v.toString()) },
43
    { address, abi, method: 'decimals', handler: (v: any) => (newToken.decimals = Number(v.toString())) },
44
    { address, abi, method: 'balanceOf', params:[god.currentNetwork.account]  handler: newToken.balance},
45
);
46
​
47
await god.currenNetwork.execContract({adderss,abi,method:"transfer", params:["0x", "100000000000000000"]})
48
await god.currenNetwork.execContract({adderss,abi,method:"approve", params:["0x", "100000000000000000"]})
49
​
50
​
51
​
52
// to help share the bignumber between on function and UI
53
import BN from 'bignumber.js';
54
import { BigNumberState } from '@/store/standard/BigNumberState';
55
​
56
const tokenAmount = new BigNumberState({value: new BN(1000000000000000000), decimals: 18 })
57
console.log(tokenAmount.value.toFixed(0), tokenAmount.format)
58
// 1000000000000000000, 1
59
tokenAmount.setValue(new BN(2000000000000000000))
60
// 2000000000000000000, 2
61
​
Copied!

Mainnet Tokens

Next - dApp Development

Web3 Development

Last modified 6mo ago

Export as PDF

Copy link

Contents

Introduction

Get Started

Cheatsheet