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

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

ganache -d

在这里插入图片描述
然后 我们启动自己的项目 顺手发布一下合约

truffle migrate --reset

在这里插入图片描述
然后 就要来搬搬砖了 我们已经在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
一种方便我们观看的单位
我们运行代码如下
在这里插入图片描述
也是没有任何问题

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/132168.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Spring底层原理学习笔记--第二讲--(BeanFactory实现与ApplicaitonContext实现)

BeanFactory实现 package com.lucifer.itheima.a02;import lombok.extern.slf4j.Slf4j; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.beans.factory.config.BeanFactoryPostProcessor; import org.springframework.beans.fac…

聚观早报 |小米CarWith启动兼容测试;「天工」大模型开放

【聚观365】11月6日消息 小米CarWith启动兼容测试 「天工」大模型开放 邮政快递揽收超20亿件 华为Mate 60 Pro开启预约申购 VERTU持续探索前沿科技 小米CarWith启动兼容测试 小米CarWith是打造“人车家生态”中不可或缺的一环&#xff0c;在最新升级的2.0版本中&#xff…

Jupyter notebook如何加载torch环境

默认你已经安装了anaconda 和 pytorch 环境。 1&#xff0c;必须要以管理员身份打开 Anaconda prompt终端&#xff0c; 2&#xff0c;进入pytorch环境中&#xff1a; conda activate pytorch_393&#xff0c;安装必要插件&#xff1a; &#xff08;1&#xff09;conda inst…

项目管理之如何识别并应对项目风险

项目风险管理是项目管理中不可忽视的环节&#xff0c;如何识别并应对项目的风险对于项目的成功实施至关重要。本文将介绍风险管理的流程、风险分解结构、定性及定量风险评估方法&#xff0c;以及消极和积极的风险应对策略&#xff0c;旨在帮助读者更好地理解和应对项目风险。 …

win10端口转发

1. 写在前面 核心命令 netsh&#xff0c; 此工具在win10下&#xff0c;支持大量网络相关配置&#xff0c;可参考&#xff1a;netsh官方文档 2. 命令行批模式 在CMD或PowerShell中&#xff0c;执行以下命令&#xff0c; 可能会提示需要管理员权限执行 # 添加转发规则&#x…

使用new_zeros和zeros_like分别返回与输入相同尺寸/类型/device的tensor和ndarray

torch.Tensor.new_zeros(size, dtypeNone, deviceNone) 返回尺寸为size的全为0的tensor&#xff0c;默认&#xff0c;返回的tensor与该tensor具有相同的dtype和device&#xff0c;可以用于在模型训练过程中创建新tensor&#xff0c;并保证该tensor在对应的device上 1&#xff0…

华为政企闪存存储产品集

产品类型产品型号产品说明 maintainProductOceanStor Dorado 2000 SAS 128GB华为OceanStor Dorado 2000是一款简单、可靠、绿色的全闪存存储系统&#xff0c;极简部署、智能运维、轻量便捷&#xff0c;功能齐全&#xff0c;广泛适用于虚拟化、数据库、办公自动化、分支机构等…

Gorm 中的迁移指南

探索使用 GORM 在 Go 中进行数据库迁移和模式更改的世界 在应用程序开发的不断变化的景观中&#xff0c;数据库模式更改是不可避免的。GORM&#xff0c;强大的 Go 对象关系映射库&#xff0c;通过迁移提供了一种无缝的解决方案来管理这些变化。本文将作为您全面的指南&#xf…

最新知识付费变现小程序源码/独立后台知识付费小程序源码/修复登录接口

最新知识付费变现小程序源码&#xff0c;独立后台知识付费小程序源码&#xff0c;最新版修复登录接口。 主要功能 会员系统&#xff0c;用户登录/注册购买记录 收藏记录 基本设置 后台控制导航颜色 字体颜色 标题等设置 流量主广告开关小程序广告显示隐藏 广告主审核过审核…

aardio使用任意版本Python的用法

aardio中调用python的方法有两种,py3 和 process.python模块 py3模块:如果经常要拿到python返回的值或从aardio中传数据给python去处理,aardio和python的交互比较多的话,可以考虑使用py3模块,缺点是:py3模块使用起来比较麻烦些,尤其是在异步多线程操作的话,中间需要学习…

Openssl生成证书-nginx使用ssl

Openssl生成证书并用nginx使用 安装openssl yum install openssl -y创库目录存放证书 mkdir /etc/nginx/cert cd /etc/nginx/cert配置本地解析 cat >>/etc/hosts << EOF 10.10.10.21 kubernetes-master.com EOF10.10.10.21 主机ip、 kubernetes-master.com 本…

使用 Python 进行自然语言处理第 4 部分:文本表示

一、说明 本文是在 2023 年 3 月为 WomenWhoCode 数据科学跟踪活动发表的系列文章中。早期的文章位于&#xff1a;第 1 部分&#xff08;涵盖 NLP 简介&#xff09;、第 2 部分&#xff08;涵盖 NLTK 和 SpaCy 库&#xff09;、第 2 部分&#xff08;涵盖NLTK和SpaCy库&#xf…

什么是数据库迁移

在企业应用程序的上下文中&#xff0c;数据库迁移意味着将数据从一个平台移动到另一个平台。您可能想要迁移到不同平台的原因有很多。例如&#xff0c;一家公司可能决定通过迁移到基于云的数据库来节省资金。或者公司可能会发现某些特定的数据库软件具有对其业务需求至关重要的…

spring-boot中实现分片上传文件

一、上传文件基本实现 1、前端效果图展示&#xff0c;这里使用element-ui plus来展示样式效果 2、基础代码如下 <template><div><el-uploadref"uploadRef"class"upload-demo":limit"1":on-change"handleExceed":auto-…

JavaEE-博客系统3(功能设计)

本部分内容为&#xff1a;实现登录功能&#xff1b;强制要求用户登录&#xff1b;实现显示用户信息&#xff1b;退出登录&#xff1b;发布博客 该部分的后端代码如下&#xff1a; Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws Ser…

mysql 中!= 到底走不走索引?

mysql 中! 到底走不走索引&#xff1f; 很多人疑惑! 到底走不走索引&#xff0c; 这里可以肯定的说该操作是可以走索引的&#xff0c;但实际情况中都为啥都不走索引呢&#xff1f; 首先我们要知道走索引与数据量和数据趋势&#xff08;cardinality&#xff09;有很大的关系&…

异构融合计算技术白皮书(2023年)研读3

读到工业和信息化部电子第五研究所所做的《异构融合计算技术白皮书&#xff08;2023年&#xff09;》&#xff0c;我关注的重点是FPGA与异构计算。续前篇&#xff0c;前篇为第1至4点。 5 运行一致性 P23 运行一致性计算资源分解&#xff0c;裸金属、虚拟机、容器、函数等更小…

bug: https://aip.baidubce.com/oauth/2.0/token报错blocked by CORS policy

还是跟以前一样&#xff0c;我们先看报错点&#xff1a;&#xff08;注意小编这里是H5解决跨域的&#xff0c;不过解决跨域的原理都差不多&#xff09; Access to XMLHttpRequest at https://aip.baidubce.com/oauth/2.0/token from origin http://localhost:8000 has been blo…

设计模式之装饰模式

一、概念 装饰模式是一种结构型设计模式&#xff0c;允许你通过将对象放入包含行为的特殊封装对象中来为原对象绑定新的行为。 二、构造 部件&#xff08;Component&#xff09;声明封装器和被封装对象的公用接口。 具体部件&#xff08;Concrete Component&#xff09;类是…

随机森林在生物信息中的应用

今天与大家分享一项强大的机器学习算法随机森林。这个算法不仅在数据科学领域广泛应用&#xff0c;还在生物信息学中发挥了巨大的作用。 让我们一起探索随机森林的原理、优缺点以及它在生物信息领域的实际应用场景&#xff0c;本文将给出R语言进行应用的实际方法&#xff0c;利…