web3 React dapp中编写balance组件从redux取出并展示用户资产-Toy模板网

这篇具有很好参考价值的文章主要介绍了web3 React dapp中编写balance组件从redux取出并展示用户资产。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

好啊上文WEB3 在 React搭建的Dapp中通过redux全局获取并存储用户ETH与自定义token与交易所存储数量中我们拿到了用户的一个本身和交易所token数量并放进了redux中做了一个全局管理
然后我们继续先起来ganache的一个模拟环境

ganache -d

web3 React dapp中编写balance组件从redux取出并展示用户资产,web3,react.js,前端
然后我们启动自己的项目顺手发布一下合约

truffle migrate --reset

web3 React dapp中编写balance组件从redux取出并展示用户资产,web3,react.js,前端
然后就要来搬搬砖了我们已经在redux中存起来了那么自然是要将它展示出来的
我们找到 src下的 components 下的 balance.jsx
直接编写代码如下

import React from 'react';
import { useSelector } from "react-redux";

function convert(unit) {
  return window.WebData ? window.WebData.web3.utils.fromWei(unit, "ether") : ""
}

export default function Balance() {
  const {
    TokenWallet,
    TokenExchange,
    EtherWallet,
    EtherExchange
  } = useSelector((state) => state.balance)
  return (
    <div>
      <h3>个人grToken: {convert(TokenWallet)}</h3>
      <h3>个人交易所grToken: {convert(TokenExchange)}</h3>
      <h3>个人ETH: {convert(EtherWallet)}</h3>
      <h3>个人交易所ETH: {convert(EtherExchange)}</h3>
    </div>
  );
}

这里我们直接用state.balance结构出我们存在redux中的用户token数量信息
然后用我们存在window中的web3对象中的fromWei将单位转换回ether
一种方便我们观看的单位
我们运行代码如下
web3 React dapp中编写balance组件从redux取出并展示用户资产,web3,react.js,前端
也是没有任何问题文章来源地址https://www.toymoban.com/news/detail-744904.html