Shulou(Shulou.com)06/01 Report--

Today, I will talk to you about how to use Ether.js to build a simple DApp. Many people may not know much about it. In order to make you understand better, the editor has summarized the following content for you. I hope you can get something according to this article.

If you have developed DApp at Ethernet Fong, you may have used web3.js in the front-end JavaScript. Ethers.js is a lightweight alternative to web3.js, and we'll learn how to use Ether.js to build a simple DApp.

Ethers.js has many advantages over Web3.js, one of my favorite features is the state and key management provided by Ethers.js. The design scenario for Web3 is that DApp should be connected to a local node that is responsible for storing keys, signing transactions, and interacting with the ethernet block chain. This is not the case. The vast majority of users will not run a geth node locally. Metamask effectively simulates this node environment in browser applications, so most web3 applications need to use Metamask to save keys, sign transactions and complete interaction with Ethernet Square.

Ethers.js takes a different design approach, which provides developers with more flexibility. Ethers.js splits the Node into two different roles:

Wallet: responsible for key storage and transaction signature

Provider: responsible for anonymous connection, status check and transaction delivery of Ethernet Fong network

1. Compile and deploy smart contracts

In this tutorial we will interact with an ERC20 intelligent contract. You need to install nodejs and npm on the machine first.

1.1 create a project folder

First create a folder ethers-template, and then create another contracts folder in this folder:

~ $mkdir-p ethers-template/contracts1.2 initializes the npm configuration

Then go to the ethers-template directory to initialize the npm configuration:

~ $cd ethers-template~/ethers-template$ npm init-y1.3 create a project profile

Next, create a config.json file to save your project configuration:

{"private_key": "24C4FE6063E62710EAD956611B71825B778B041B18ED53118CE5DA5F02E494BA", "network": "kovan", "ERC20": "0x0DEd9F7D82a24099F09AF7831CaB61B31Df10487", "name": "Kanchan Coin", "symbol": "SNK", "total_supply": "10000000000000000000000000000", "decimals": 18}

The explanation is as follows:

Private_key: the private key of the account. The account corresponding to this private key will be used to deploy smart contracts on the specified network.

Network: the Ethernet Fong network to be accessed. Ethers.js supports the following networks:

Homestead: main network

Rinkeby

Ropsten

Kovan

Goerli

ERC20: declare the deployed contracts to interact with, optional

Parameters of name/symbol/decimals:ERC20 contract

1.4 install ethers.js

You can now install ethers.js:

~ / ethers-template$ npm install-- save ethers1.5 installs the npm package required by the compilation contract

To compile the contract, we also need to install solc and fs-extra:

~ / ethers-template$ npm install fs-extra@8.1.0 solc@0.5.11-- save1.6 creates ERC20 contract code

Create the file erc20.sol under the contracts directory:

~ / ethers-template$ touch contracts/erc20.sol

And modify it as follows:

Pragma solidity ^ 0.5.0 th contract ERC20 {using SafeMath for uint256; event Approval (address indexed tokenOwner, address indexed spender, uint tokens); event Transfer (address indexed from, address indexed to, uint tokens); mapping (address = > uint256) balances; mapping (address = > mapping (address = > uint256)) allowed; string public symbol; uint8 public decimals; string public name; uint256 private _ totalSupply Constructor (uint8 _ decimals, string memory _ symbol, string memory _ name, uint256 _ total_supply) public {decimals = _ decimals; symbol = _ symbol; name = _ name; _ totalSupply = _ total_supply; balances [msg.sender] = _ totalSupply;} function totalSupply () public view returns (uint256) {return _ totalSupply } function balanceOf (address tokenOwner) public view returns (uint) {return balances [tokenOwner];} function transfer (address receiver, uint numTokens) public returns (bool) {require (numTokens {console.log (`\ nDeploying ${process.argv [2]} in ${config ["network"]}`); let contract = new ethers.ContractFactory (compiled.abi, compiled.bytecode, wallet) Let instance = await contract.deploy (config ["decimals"], config ["symbol"], config ["name"], config ["total_supply"]); console.log (`deployed at ${instance.address} `) config [` ${process.argv [2]} `] = instance.address console.log ("Waiting for the contract to get mined...") Await instance.deployed () console.log ("Contract deployed") fs.outputJsonSync ('config.json', config, {spaces:2, EOL: "\ n"});}) ()

Note:

The default network in the above code is the kovan test network

In this test network, your account needs some etheric coins to pay for the deployment transaction.

Private_key in config.json will be used to deploy the contract

1.10 deployment contract

When you run the deploy.js script, you need to pass in the contract name ERC20 to be deployed on the command line:

~ / ethers-template$ node deploy.js ERC20

The output is as follows:

Loaded wallet 0xC8e1F3B9a0CdFceF9fFd2343B943989A22517b26Deploying ERC20 in kovan...deployed at 0x77Bb3546f5ee356E4026BaA96b7DDf22141bd77BWaiting for the contract to get mined...Contract deployed

The contract deployment address is required when interacting with the contract, and the above code automatically saves the contract deployment address to the config.json file.

2. Interact with smart contracts

In this tutorial, we use ES6 to write contract interaction code, and then use webpack and babel to convert ES6 code into ES5 code.

2.1 install the ES6 build tool

Install these dependencies first:

~ / ethers-template$ npm i webpack webpack-cli @ babel/core\ @ babel/plugin-proposal-object-rest-spread\ @ babel/preset-env babel-loader\ babel-polyfill-D2.2 write front-end scripts

Create a file app.js:

~ / ethers-template$ touch app.js

Then modify it as follows:

Const ethers = require ('ethers'); const config = require ('. / config.json'); / / Import the json file from build to get the abiconst erc_json = require ('. / build/ERC20.json'); / / import the json of the contract which you want to interact// You can use any standard network name//-"homestead" / /-"rinkeby" / /-"ropsten" / /-"kovan" / /-"goerli" const provider = ethers.getDefaultProvider (config ['network']) / Make a wallet instance using private key and providerconst wallet = new ethers.Wallet (config ['private_key'], provider); const address = config ["ERC20"]; const abi = erc_json.abi;erc20 = new ethers.Contract (address, abi, wallet); document.getElementById ("send"). Onsubmit = async function (e) {e.preventDefault (); let address = document.getElementById ("address"). Value; document.getElementById ("status"). InnerText = "Waiting for transaction to get published..." Let tx = await erc20.functions.transfer (address, "1000000000000000000000000"); let tx_hash = tx.hash; let node = document.createElement ("LI"); let link = document.createElement ("A"); link.target = "_ blank"; link.href = `https://${config["network"]}.etherscan.io/tx/` + tx_hash; let textnode = document.createTextNode (tx_hash) Link.appendChild (textnode); node.appendChild (link); document.getElementById ("transactions") .appendChild (node); document.getElementById ("status"). InnerText = "Waiting for transaction to be mined..."; await tx.wait (); document.getElementById ("status"). InnerText = "Transaction confirmed"; return false;}

First, we need to specify the network / provider to use:

Const provider = ethers.getDefaultProvider (config ['network'])

To interact with the contract, we need two things:

Contract deployment address

Contract ABI interface

In the above app.js, we introduced the contract address from the configuration file and the contract ABI from the contract compilation result directory:

/ / import the json of the contract which you want to interactconst erc_json = require ('. / build/ERC20.json'); const config = require ('. / config.json'); const address = config ["ERC20"]; const abi = erc_json.abi;2.3 create wallet instance

To create a contract instance, we need to create a wallet instance first, so that whenever the setter method is called, a private key is required to sign the transaction. In ethers.js, you just need to create a wallet and all setter methods will be signed by that wallet.

Const wallet = new ethers.Wallet (config ['private_key'], provider)

You can also use keystore and mnemonics to create a wallet. If you want to use this wallet to interact with smart contracts, you also need to pass in the provider. If you just want to sign the message with a private key, you don't need a provider.

Erc20 = new ethers.Contract (address, abi, wallet)

The above code creates a contract instance, and then you can call the contract function like this:

Erc20.functions.function_name_in_smart_contract (parameters)

Xiaobai Note: a function transfer is defined in ERC20, whose arguments are the transfer address and the number of tokens. The following code calls the transfer function of the contract, and the wallet will sign the transaction and publish it to the specified network:

Erc20.functions.transfer (address, "1000000000000000000")

Note: whenever you want to create a transaction, you need Taiyuan in your wallet to pay the transaction fee.

2.4 modify the startup script

Add the following to package.json:

"deploy": "node compile.js & & node deploy.js ERC20", "build": "webpack-mode production'

The modified package.json looks like this:

{"name": "ethers-template", "version": "1.0.0", "description": "," main ":" webpack.config.js "," scripts ": {" deploy ":" node compile.js & & node deploy.js ERC20 "," build ":" webpack-- mode production "," test ":" echo\ "Error: no test specified\" & exit 1 "}," keywords ": [] "author": "," license ":" ISC "," dependencies ": {" ethers ":" ^ 4.0.37 "," fs-extra ":" ^ 8.1.0 "," solc ":" ^ 0.5.11 "}," devDependencies ": {" @ babel/core ":" ^ 7.6.0 "," @ babel/plugin-proposal-object-rest-spread ":" ^ 7.5.5 " "@ babel/preset-env": "^ 7.6.0", "babel-loader": "^ 8.0.6", "babel-polyfill": "^ 6.26.0", "webpack": "^ 4.40.2", "webpack-cli": "^ 3.3.9", "webpack-dev-server": "^ 3.8.1"}}

If you later modify the smart contract, you will need to recompile and deploy. You can compile and deploy the contract with one command:

~ / ethers-template$ npm run deploy

This command automatically modifies the configuration file and contract widget file. In this way, you do not need to change the contract address or the ABI interface when interacting with the contract.

If you modify the app.js, you also need to rebuild the front-end code:

~ / ethers-template$ npm run build

This produces a new release: dist/bundle.js.

2.5 create a host html file

Create a new file index.html:

~ / ethers-template$ touch index.html

Modify as follows:

Ethers Template body {padding-top: 75px;} .search-container {width: 490px; display: block; margin: 0 auto;} input#address {margin: 0 auto; width: 100%; height: 45px; padding: 020px; font-size: 1rem Border: 1px solid # D0CFCE; outline: none;} .center {text-align: center;} ol {counter-reset: list; list-style: none;} li {counter-increment: list; margin-bottom: 10px } li::before {content: counter (list, decimal-leading-zero); background: # 2b4353; font-family: Arial, sans-serif; color: # fff; font-size: 13px; text-align: center; border-radius: 50%; width: 2.2em Height: 2.2em; line-height: 2.3em; display: inline-block; margin-right: 1em;} .button {background-color: # 4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none Display: inline-block; font-size: 16px; margin: 19px; cursor: pointer;} Ethers Template Send Status:

Transactions

Now your folder looks like this:

Where the build folder is automatically created after running compile.js, and the dist folder is automatically created after npm run build execution.

Browser access looks like this:

After reading the above, do you have any further understanding of how to build a simple DApp using Ether.js? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.