web3 dapp React项目引入 antd 对 balance 用户token信息组件进行样式改造

好 上文 web3 React dapp中编写balance组件从redux取出并展示用户资产
我们简单处理了用户资产的展示
那么 我们继续
先启动 ganache 环境
终端输入

ganache -d

在这里插入图片描述
然后 打开我们的项目 将合约发布到区块链上

truffle migrate --reset

在这里插入图片描述
然后 我们启动项目 确认一切正常 还原到上文结束时的样子即可
在这里插入图片描述
然后 我们前端项目开发 现在不用个UI框架 都会被别人看不起的
这里 react 我们当然还是选择大家比较熟悉的antd组件库
在这里插入图片描述
然后 我们终端输入

npm i antd --save

引入一下依赖
在这里插入图片描述
然后 我们来测试一下 看看有没有进来
这里 我们搞个按钮的代码来试一下
在这里插入图片描述
这里 我们直接随便找个组件 导入一个 button按钮 看看样式是否能进来就好了
在这里插入图片描述
运行代码
这里 我们的代码就成功进来了 说明 antd是导入成功的
在这里插入图片描述
然后 antd中 有一个统计数值的组件 还是做的比较好看的
我们可以直接整个先拿过来用
在这里插入图片描述
将 用户资产组件 代码直接更改如下

import React from 'react';
import { useSelector } from "react-redux";
import { ArrowDownOutlined, ArrowUpOutlined } from '@ant-design/icons';
import { Card, Col, Row, Statistic } from 'antd';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><Row gutter={16}><Col span={12}><Card bordered={false}><Statistictitle="Active"value={11.28}precision={2}valueStyle={{ color: '#3f8600' }}prefix={<ArrowUpOutlined />}suffix="%"/></Card></Col><Col span={12}><Card bordered={false}><Statistictitle="Idle"value={9.3}precision={2}valueStyle={{ color: '#cf1322' }}prefix={<ArrowDownOutlined />}suffix="%"/></Card></Col></Row><h3>个人grToken: {convert(TokenWallet)}</h3><h3>个人交易所grToken: {convert(TokenExchange)}</h3><h3>个人ETH: {convert(EtherWallet)}</h3><h3>个人交易所ETH: {convert(EtherExchange)}</h3></div>);
}

这里 我直接将他这个统计组件的代码都考了过来运行之后
在这里插入图片描述可以看到 上面统计数值的组件 看着和官方文档也差不多 那么 我们再来小改造一下

案例上 Row直接上会有一个gutter属性 是用来控制边距的 我们不要他
在这里插入图片描述
但这里 大家可能会发现 左侧这边 有点贴到边角了
在这里插入图片描述
这里的话 我们直接找到 src下的 view 下的 index.jsx 文件 在根组件位置 直接加一个 内边距
在这里插入图片描述
这样 我们上下左右 就都会有一定的距离了 就不存在这个贴到边上的问题了
在这里插入图片描述
然后呢 我们再次回到资产组件 这里 我们希望一行展示 四个 我们就将Col组件的 span 通通改成 6
在这里插入图片描述
这样我们再运行起来 他就是一行展示两个
在这里插入图片描述
然后 这个Card 也是 antd提供给我们的一个组件
在这里插入图片描述
这里 我们在文档中找到这个 Card
文档上上 它叫 卡片组件 然后上面有一个hoverable属性 用来控制 当鼠标经过它时可以浮起
在这里插入图片描述
然后 我们设置一下 将 Card 组件的hoverable都设为 true 开启这个鼠标经过浮起的效果
在这里插入图片描述
这样 我们鼠标经过就成立这样一个效果
在这里插入图片描述
然后 我们直接将 src下 components 下的 balance.jsx 代码编写如下

import React from 'react';
import { useSelector } from "react-redux";
import { Card, Col, Row, Statistic } from 'antd';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><Row><Col span={6}><Cardbordered={false}hoverable = {true}><Statistictitle="个人grToken"value={convert(TokenWallet)}precision={3}valueStyle={{ color: '#3f8600' }}/></Card></Col><Col span={6}><Cardbordered={false}hoverable = {true}><Statistictitle="个人交易所grToken"value={convert(TokenExchange)}precision={3}valueStyle={{ color: '#0000FF' }}/></Card></Col><Col span={6}><Cardbordered={false}hoverable = {true}><Statistictitle="个人ETH"value={convert(EtherWallet)}precision={3}valueStyle={{ color: '#FF8C00' }}/></Card></Col><Col span={6}><Cardbordered={false}hoverable = {true}><Statistictitle="个人交易所ETH"value={convert(EtherExchange)}precision={3}valueStyle={{ color: '#FF00FF' }}/></Card></Col></Row></div>);
}

这里 我们设置了Statistic 组件 title 就是 要统计的文本 然后 value 数值 precision 设置 后面保留几位小数 这里 我们选择3 然后 颜色 通过valueStyle中的color设置

最终运行结果如下
在这里插入图片描述
那么 下一文 我们开始处理 订单组件

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

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

相关文章

k8s中实现mysql主备

文章目录 一、k8s中实现mysql主备1.1 环境信息1.2 部署nfs-provisioner1.2.1 安装nfs1.2.2 部署nfs-provisioner 1.3 安装mysql1.4 备库上查看是否同步 一、k8s中实现mysql主备 1.1 环境信息 机器操作系统ipmysql版本k8s版本storageClassmaster1CentOS7.8192.168.0.20mysql5.…

C++ 代码实例:多项式除法简单计算工具

文章目录 前言代码仓库代码说明核心片段 结果总结参考资料作者的话 前言 C 代码实例&#xff1a;多项式除法简单计算工具。 代码仓库 yezhening/Programming-examples: 编程实例 (github.com)Programming-examples: 编程实例 (gitee.com) 代码 说明 由于代码篇幅较多&#…

【蓝桥杯省赛真题41】Scratch电脑开关机 蓝桥杯少儿编程scratch图形化编程 蓝桥杯省赛真题讲解

目录 scratch电脑开关机 一、题目要求 编程实现 二、案例分析 1、角色分析

基于STM32的设计智慧超市管理系统(带收银系统+物联网环境监测)

一、前言 基于STM32+OneNet设计的智慧超市管理系统(2023升级版) 1.1 项目背景 随着IoT技术的不断发展,智能无人超市也越来越受到人们的关注。智能无人超市是指在无人值守的情况下,通过物联网、大数据等技术手段实现自助选购、结算和配送的新型商场。当前设计了一种基于STM32…

【数据开发】大数据平台架构,Hive / THive介绍

1、大数据引擎 大数据引擎是用于处理大规模数据的软件系统&#xff0c; 常用的大数据引擎包括Hadoop、Spark、Hive、Pig、Flink、Storm等。 其中&#xff0c;Hive是一种基于Hadoop的数据仓库工具&#xff0c;可以将结构化的数据映射到Hadoop的分布式文件系统上&#xff0c;并提…

家用电脑做服务器,本地服务器搭建,公网IP申请,路由器改桥接模式,拨号上网

先浇一盆冷水&#xff01; 我不知道其他运营商是什么情况。联通的运营商公网IP端口 80、8080、443 都会被屏蔽掉&#xff0c;想要开放必须企业备案&#xff08;个人不行&#xff09;才可以。也就是说&#xff0c;只能通过其他端口进行showtime了。 需要哪些东西&#xff1f; 申…

邦芒攻略:面试迟到该如何补救

面试迟到该如何补救 &#xff0c;人际交往能力强的人在职场上也非常吃得开&#xff0c;职场少不了竞争&#xff0c;职场上的很多东西都是值得学习的&#xff0c;要学会职场的规则才能够如鱼得水&#xff0c;了解面试迟到该如何补救 。 ​ ​1、路上突发情况事先提前告知的 在…

leetcode做题笔记216. 组合总和 III

找出所有相加之和为 n 的 k 个数的组合&#xff0c;且满足下列条件&#xff1a; 只使用数字1到9每个数字 最多使用一次 返回 所有可能的有效组合的列表 。该列表不能包含相同的组合两次&#xff0c;组合可以以任何顺序返回。 示例 1: 输入: k 3, n 7 输出: [[1,2,4]] 解释…

HTML表单标签

## HTML标签&#xff1a;表单标签 * 表单&#xff1a; * 概念&#xff1a;用于采集用户输入的数据的。用于和服务器进行交互。 * form&#xff1a;用于定义表单的。可以定义一个范围&#xff0c;范围代表采集用户数据的范围 * 属性&#xff1…

MySQL中的刷脏机制详解

名词解释 脏页&#xff1a;当内存数据页跟磁盘数据页内容不一致的时候&#xff0c;我们称这个内存页为“脏页”。 干净页&#xff1a;内存数据写入到磁盘后&#xff0c;内存和磁盘上的数据页的内容就一致了&#xff0c;称为“干净页”。 LSN&#xff1a;称为日志的逻辑序列号(l…

HTB——introduction to active directory

文章目录 一、Active directory structure二、Active Directory Terminology 一、Active directory structure Active Directory &#xff08;AD&#xff09; 是用于 Windows 网络环境的目录服务。它是一种分布式分层结构&#xff0c;允许集中管理组织的资源&#xff0c;包括用…

MIPI-CSI-2 RAW10笔记

好文&#xff1a; 【精选】摄像头的MIPI接口、DVP接口和CSI接口-CSDN博客【精选】摄像头的MIPI接口、DVP接口和CSI接口-CSDN博客 (56 封私信 / 24 条消息) 显示器的 VGA、HDMI、DVI 和 DisplayPort 接口有什么区别&#xff1f; - 知乎 (zhihu.com) 嵌入式工程师必备&#x…

基于白鲸算法的无人机航迹规划-附代码

基于白鲸算法的无人机航迹规划 文章目录 基于白鲸算法的无人机航迹规划1.白鲸搜索算法2.无人机飞行环境建模3.无人机航迹规划建模4.实验结果4.1地图创建4.2 航迹规划 5.参考文献6.Matlab代码 摘要&#xff1a;本文主要介绍利用白鲸算法来优化无人机航迹规划。 1.白鲸搜索算法 …

内核态内存映射

内核态的内存映射机制&#xff0c;主要包含以下几个部分&#xff1a; 内核态内存映射函数 vmalloc、kmap_atomic 是如何工作的&#xff1b;内核态页表是放在哪里的&#xff0c;如何工作的&#xff1f;swapper_pg_dir 是怎么回事&#xff1b;出现了内核态缺页异常应该怎么办&am…

什么是智慧工地?

智慧工地将更多人工智能、传感技术、虚拟现实等高科技技术植入到建筑、机械、人员穿戴设施、场地进出关口等各类物体中&#xff0c;并且被普遍互联&#xff0c;形成“物联网”&#xff0c;再与“互联网”整合在一起&#xff0c;实现工程管理干系人与工程施工现场的整合。智慧工…

OpenSSH

SSH&#xff08;Secure SHell protocol&#xff09;是一种在不安全网络上提供安全远程登录及其它安全网络服务的协议。SSH协议使用的是TCP 22号端口&#xff0c;telnet 使用的是TCP的23号端口&#xff0c;SSH协议是C/S架构&#xff0c;分为服务器端与客户端。 OpenSSH是对SSH协…

Vue使用epubjs电子书

npmjs: https://www.npmjs.com/package/epubjs 在线电子书转换器 安装&#xff1a; npm i epubjs 简单封装&#xff1a; src/hooks/ import Epub from "epubjs"; import type { Book, Rendition } from epubjs import type { BookOptions } from epubjs/types…

火山引擎云原生存储加速实践

在火山引擎相关的业务中绝大部分的机器学习和数据湖的算力都运行在云原生 K8s 平台上。云原生架构下存算分离和弹性伸缩的计算场景&#xff0c;极大的推动了存储加速这个领域的发展&#xff0c;目前业界也衍生出了多种存储加速服务。但是面对计算和客户场景的多样性&#xff0c…

CSS 滚动捕获 Scroll Snap

CSS 滚动捕获 Scroll Snap CSS 滚动捕获允许开发者通过声明一些位置(或叫作捕获位置)来创建精准控制的滚动体验. 通常来说轮播图就是这种体验的例子, 在轮播图中, 用户只能停在图 A 或者图 B, 而不能停在 A 和 B 的中间. 比如平时用淘宝或小红书, 当你上滑到下一个推荐内容时…

wpf Grid布局详解 `Auto` 和 `*` 是两种常见的设置方式 行或列占多个单元格,有点像excel里的合并单元格。使其余的列平均分配剩余的空间

比如只有行的界面 <Window x:Class"GenerateTokenApp.MainWindow"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d"http://schemas.microsoft.com/exp…