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

In this issue, the editor will bring you about how to use Web3.js API to transfer money on the page. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

How to use Web3.js API to transfer money on a page

The editor introduces how to use Web3.js API to transfer money in the page, which is my translated document Web3.js 0.2x Chinese version and block chain full stack-Ethernet Fang DApp development actual article description of Demo.

Write at the front

Before reading this article, you should know something about the concepts of ethernet place, smart contract and wallet. if you don't know it, I suggest you read what ethernet square is. Besides, you'd better know some knowledge of HTML and JavaScript.

The compilation of transfer UI page

It's easy to implement this interface, so there's no code here. You can open Demo, right-click to view the page source code.

User environment check

Since you need to use Web3.js API to transfer money on the page, you should first check that the wallet is installed in the browser environment and that the wallet should be unlocked.

First check to see if the MetaMask wallet is installed:

Window.addEventListener ('load', function () {if (typeof web3! = =' undefined') {web3 = new Web3 (web3.currentProvider) If (web3.currentProvider.isMetaMask = = true) {/ / "MetaMask available"} else {/ / "non-MetaMask environment"}} else {$("# env") .html ("No web3? Need to install MetaMask! ");}}

MetaMask recommends checking MetaMask when window is loaded. Of course, when MetaMask is not installed, you can also specify a node Provider to create web3. You can refer to Web3.js documentation to introduce web3.

Check whether the wallet is unlocked: before sending the transaction, we should first check the status of the current wallet and check whether the wallet is unlocked (whether a password has been entered into MetaMask). Usually use the getAccounts under eth to check. GetAccounts is a list of accounts that will be returned. If there is data in the current account list, it means that the wallet has been unlocked and you can get the account number. If the list obtained by the account is empty, then the wallet is not unlocked.

You can add the following code to the listener function above:

Web3.eth.getAccounts (function (err, accounts) {if (accounts.length = = 0) {$("# account") .html ("Please check if the wallet is unlocked");}}); send the transaction

If the MetaMask wallet is unlocked, we can send the transaction using the sendtransaction method.

Web3.eth.sendTransaction (transactionObject [, callback])

The second parameter is the callback function that is used to obtain the hash value of the sent transaction.

The first parameter is a transaction object, which has several fields:

From: the account from which the amount is sent

To: which account to launch to

Value is the amount sent

Gas: setting gas limit

GasPrice: setting gas price

If from does not have it, he will use the current default account. If it is a transfer, to and value are required fields. When sending a transaction, a MetaMask authorization window pops up. If our gas and gasPrice are not set, we can set them in MetaMask. If both gas and gas Price are set, MetaMask will use the gas we set.

Therefore, when sending a transaction, the key is to construct such a transaction object, with the JavaScrpt code as follows:

/ / the price of gas Limit and gas given by Metamask is var fromAccount = $('# fromAccount'). Val (); var toAccount = $('# toAccount'). Val (); var amount = $('# amount'). Val () / / A check if (web3.isAddress (fromAccount) & & web3.isAddress (toAccount) & & amount! = null & & amount.length > 0) {var message = {from: fromAccount, to:toAccount, value: web3.toWei (amount, 'ether')}; web3.eth.sendTransaction (message, (err, res) = > {var output = "") If (! err) {output + = res;} else {output = "Error";}

Additional note: $('# fromAccount'). Val () is used to get user input using JQuery. Secondly, you should make a judgment on the input parameters before actually constructing the send transaction, and web3.isAddress is used to check whether the string is an address. In addition, for a transfer to a normal external address account, the consumption of gas is fixed at 21000.

Run the test

It should be noted that for security reasons, MetaMask only supports pages accessed by site, that is, pages are accessed through http://, but not through file:// + file address in the browser. Therefore, you need to put the written code in the directory of the web server and try it yourself.

The above is the editor for you to share how to use Web3.js API to transfer money on the page, if you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

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.