web3简单整合react系列(四)-查看余额

app.js

import logo from './logo.svg';
import './App.css';
import Web3 from 'web3';
import React, {useEffect, useState} from 'react';
import {init, getOwnBalance} from './Web3Client'
function App() {

  const[balance, setBalance] = useState(0);

  const fetchBalance = () =>{
    getOwnBalance().then(balance =>{
      setBalance(balance);
    }).catch(err =>{
    })
  };

  return (<div className='App'>

   { 
     }
     <p>Your balance is {balance}</p>
     <button onClick={() => fetchBalance()}>Refresh balance</button>     
  
  </div>
  ); 
}

export default App;

web3Client.js

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57

import Web3 from 'web3'; import TestTokenContractBuild from 'contracts/TestToken.json';   let selectedAccount;   let isInitialized = false;   let erc20Contract;   export const init = async () => {     let provider = window.ethereum;       const web3 = new Web3(provider);     const networkId = await web3.eth.net.getId();       const erc20Abi = [       {                    "constant": true,           "inputs": [               {                   "name": "_owner",                   "type": "address"               }           ],           "name": "balanceOf",           "outputs": [               {                   "name": "balance",                   "type": "uint256"               }           ],           "payable": false,           "stateMutability": "view",           "type": "function"       },            ];       erc20Contract = new web3.eth.Contract(       erc20Abi, <br>      // 对应token 的地址       '0x5592ec0cfb4dbc12d3ab100b257153436a1f0fea'     );      isInitialized = true; };   export const getOwnBalance = async () => {   // 初始化   if(!isInitialized) {     await init();   }      return erc20Contract.methods   .balanceOf(selectedAccount)   .call().then(balance =>{     return Web3.utils.fromWei(balance);   }); };

3、运行