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

好上文 web3 React dapp中编写balance组件从redux取出并展示用户资产我们简单处理了用户资产的展示

那么我们继续

先启动 ganache 环境

终端输入

javascript 复制代码

ganache -d

然后打开我们的项目将合约发布到区块链上

javascript 复制代码

truffle migrate --reset

然后我们启动项目确认一切正常还原到上文结束时的样子即可

然后我们前端项目开发现在不用个UI框架都会被别人看不起的

这里 react 我们当然还是选择大家比较熟悉的antd组件库

然后我们终端输入

javascript 复制代码

npm i antd --save

引入一下依赖

然后我们来测试一下看看有没有进来

这里我们搞个按钮的代码来试一下

这里我们直接随便找个组件导入一个 button按钮看看样式是否能进来就好了

运行代码

这里我们的代码就成功进来了说明 antd是导入成功的

然后 antd中有一个统计数值的组件还是做的比较好看的

我们可以直接整个先拿过来用

将用户资产组件代码直接更改如下

javascript 复制代码

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}>
            <Statistic
              title="Active"
              value={11.28}
              precision={2}
              valueStyle={{ color: '#3f8600' }}
              prefix={<ArrowUpOutlined />}
              suffix="%"
            />
          </Card>
        </Col>
        <Col span={12}>
          <Card bordered={false}>
            <Statistic
              title="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 代码编写如下

typescript 复制代码

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

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

最终运行结果如下

那么下一文我们开始处理订单组件