DAPP getting started 1 – react program calls metamask wallet and transfers money

Time:2021-7-25

DAPP getting started 1 - react program calls metamask wallet and transfers money

Smart contract is equivalent to a small program deployed and running on the blockchain node. In order to access the functions of the contract, the front-end web page can be accessed directly through ether JS or Web3 JS class library through RPC Protocol. The figure above shows the basic process of web call contract.

React program association metamask

In order to call the contract on the blockchain for transaction, such as transfer transaction, the user’s private key is required to sign the transaction to prove who initiated the transaction. However, if the private key is placed in the program, it is easy to cause security problems. Metamask was born to help users manage private keys and wallets of encrypted assets. For the introduction of metamask, we will expand in detail in other articles.

For web applications, let’s take the mainstream react page as an example. First, the web page needs to be associated with metamask to access the blockchain. As a plug-in of Chrome browser, metamask will intercept RPC requests sent to the blockchain and then forward them to the contract on the chain.

DAPP getting started 1 - react program calls metamask wallet and transfers money

The function of the following code is: when the user clicks the connect button, the page will be associated with metamask to intercept the request sent to the blockchain. Activate this process with the following method.

DAPP getting started 1 - react program calls metamask wallet and transfers money

Get user’s encrypted assets

The hook useweb3react of react will call the provider in ethersjs column library and get the chainid and account information in it. The demo uses HPB network. The download of metamask and the configuration of HPB network will be expanded in other articles.

DAPP getting started 1 - react program calls metamask wallet and transfers money

The page is displayed as follows:

DAPP getting started 1 - react program calls metamask wallet and transfers money

Asset transaction

In this example, I deployed an erc20 contract on the HPB network through Remix (which will be described in detail in other articles). We can understand that erc20 contract is the most commonly used specification of virtual currency, which defines the common attributes and methods of this virtual currency. In order to transfer assets, we need to call the transfer () method of changing the contract.

In order to call this method, we need to obtain the following key information in advance:

  • The address of the contract;
  • Abi (Application Binary Interface) is the interface specification of the contract, which is equivalent to telling us JS what method functions the contract provides;
  • Obtain the network provider so that we can know which blockchain network we are accessing;
  • Sign to sign the transaction.

The following code shows the operation process of these steps.

DAPP getting started 1 - react program calls metamask wallet and transfers money

What is easy to ignore is the following step. The contract object needs to be associated with a signature.

const withSigner = contract.connect(signer); 

reference material:

  • Contract issuing token resources
  • Call little fox reference
  • Remix call contract
  • Ethers.js official document
  • Complete case code reference

Small partners with similar interests in the blockchain industry are welcome to add Xiaoji wechat and join blockgeek blockchain technology exchange group to jointly promote the popularization and development of blockchain technology~

DAPP getting started 1 - react program calls metamask wallet and transfers money