Code Monkey home page Code Monkey logo

iotex-dapp1's Introduction

IoTeX dApp Sample V2

7121622212283_ pic

This is a boilerplate template for making your awesome dApp on IoTeX and ETH, BSC, and other possible chains (request here)

Technology used in this template are

Intro

A starter for React with Typescript with the fast Vite and the beautiful Chakra, tested with the powerful Cypress.

Cheat Sheet

Here's a cheat sheet list to help you get started quickly

import { rootStore, useStore } from '@/store/index';

const {god} = useStore()
// or const god = rootStore.god

god.isConnect

god.currentChain
god.currentChain.chainId  // for current connected chain id
god.currentChain.Coin  // eth/bnb/iotx
god.currentChain.Coin.balance  // current balance
// ... see ChainState

god.currentNetwork
god.currentNetwork.account   // for current connected account address
// ... see NetworkState


god.setShowConnecter()  // to show/close the Wallet Selector

god.currentNetwork.loadBalance() // to load chain coin balance
god.currentNetwork.multicall()  // main function to batch read state from contract
god.currentNetwork.execContract() // main function to execute contract




// multicall/execContract example
import ERC20ABI from "..."

const newToken = {
    address: "0x810ee35443639348adbbc467b33310d2ab43c168",
    abi: ERC20ABI,
    symbol: "",
    name: "",
    decimals: "",
    balance: new BignumberState({}),
}

const {address, abi} = newToken

await god.currentNetwork.multicall([
    { address, abi, method: 'symbol', handler: (v: any) => (newToken.symbol = v.toString()) },
    { address, abi, method: 'name', handler: (v: any) => (newToken.name = v.toString()) },
    { address, abi, method: 'decimals', handler: (v: any) => (newToken.decimals = Number(v.toString())) },
    { address, abi, method: 'balanceOf', params:[god.currentNetwork.account]  handler: newToken.balance},
);

await god.currenNetwork.execContract({adderss,abi,method:"transfer", params:["0x", "100000000000000000"]})
await god.currenNetwork.execContract({adderss,abi,method:"approve", params:["0x", "100000000000000000"]})



// to help share the bignumber between on function and UI
import BN from 'bignumber.js';
import { BigNumberState } from '@/store/standard/BigNumberState';

const tokenAmount = new BigNumberState({value: new BN(1000000000000000000), decimals: 18 })
console.log(tokenAmount.value.toFixed(0), tokenAmount.format)
// 1000000000000000000, 1
tokenAmount.setValue(new BN(2000000000000000000))
// 2000000000000000000, 2

Installation

Clone the repo and run yarn install

Start

After the successfull installation of the packages: yarn start

Tests

You can build tests with Cypress. I wrote a small test to see if it's enabled. You can run it with yarn test

iotex-dapp1's People

Contributors

nazt avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.