web3 React Dapp书写订单 买入/取消操作

news2025/3/15 18:50:18

好 上文web3 前端dapp从redux过滤出 (我创建与别人创建）正在执行的订单 并展示在Table上中 我们过滤出了 我创建的 与 别人创建的 且 未完成 未取消的订单数据
这边 我们起一下 ganache 环境

ganache -d

在这里插入图片描述
然后 我们项目 发布一下智能合约

truffle migrate --reset

在这里插入图片描述
然后 登录一下 MetaMask
在这里插入图片描述
在 运行一下测试脚本

truffle exec .\scripts\test.js

然后 打开我们的项目 在根目录下的 scripts 目录中 创建一个文件 我这里叫 createOrder.js
编写代码如下

//指定以token grtoken合约
const GrToken = artifacts.require("grToken.sol")
//交易所合约
const Exchange = artifacts.require("Exchange.sol")
//定义E代理地址
const ETHER_ADDRESS = '0x0000000000000000000000000000000000000000';

const toWei = (bn) => {
    return web3.utils.toWei(bn.toString(), "ether");
}

module.exports = async function(callback) {
    const grTokenDai = await GrToken.deployed();
    const exchage = await Exchange.deployed();
    //获取用户列表
    const accounts = await web3.eth.getAccounts();
    //循环用 accounts 用户列表中第一个用户创建 五个订单
    for (let i = 1; i <= 5; i++) {
        await exchage.makeOrder(grTokenDai.address,toWei(101), ETHER_ADDRESS ,toWei(0.01),{
            from: accounts[0]
        });
    }
    //循环用 accounts 用户列表中第二个用户创建 五个订单
    for (let i = 1; i <= 5; i++) {
        await exchage.makeOrder(grTokenDai.address,toWei(101), ETHER_ADDRESS ,toWei(0.01),{
            from: accounts[1]
        });
    }
    callback()
}

这里 我们直接脚本执行 第一和第二个用户 分别创建出 五个订单 方便 我们后期操作
然后 我们终端运行

truffle exec .\scripts\createOrder.js

在这里插入图片描述
然后 启动我们的dapp
这里 我们第一个用户 已经可用看到非常多订单信息了
在这里插入图片描述
然后 我们 MetaMask 切换一下当前账户
在这里插入图片描述
我们切换成第二个用户
然后刷新dapp
在这里插入图片描述
也是能看到自己的订单和第一个用户创建的订单

然后 我们将 src目录下的 components 下的 Order.jsx 组件代码更改如下

import React from 'react';
import { Card, Col, Row ,Table,Button } from 'antd';
import {useSelector} from "react-redux"
import moment from "moment"

function converTime(t){
  return moment(t*1000).format("YYYY/MM/DD")
}

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

function getRenderOrder(order,type) {
  if(!window.WebData) {
    return []
  }
  const account = window.WebData.account
  //收集起所有 已完成 或 已取消的数据id
  let filterIds = [...order.Cancelorders,...order.Fillorders].map(item=>item.id)
  let makeorders = order.Allorders.filter(item=> !filterIds.includes(item.id))
  if (type === 1) {
    return makeorders.filter(item=>item.user === account)
  } else {
    return makeorders.filter(item=>item.user !== account)
  }
}

export default function Order() {
  const order = useSelector(state => state.order)
  
  const columns = [
    {
      title: 'ETH',
      dataIndex: 'amountGive',
      render:(amountGive)=><b>{ convert(amountGive) }</b>,
      key: 'amountGive'
    },
    {
      title: 'GrToken',
      dataIndex: 'amountGet',
      render:(amountGet)=><b>{ convert(amountGet) }</b>,
      key: 'amountGet'
    },
    {
      title: '创建时间',
      dataIndex: 'timestamp',
      render:(timestamp)=><div>{ converTime(timestamp) }</div>,
      key: 'timestamp'
    },
  ];

  const columns1 = [
    ...columns,
    {
      title: '操作',
      render:(item)=><Button type = "text">取消</Button>
    }
  ]

  const columns2 = [
    ...columns,
    {
      title: '操作',
      render:(item)=><Button type = "text">买入</Button>
    }
  ]
  
  return (
    <div style = {{marginTop:'10px'}}>
      <Row>
         <Col span={8}>
          <Card title="已完成" bordered={false} style = {{ margin: '10px' }}>
            <Table dataSource={order.Fillorders} columns={columns} rowKey={item=> item.id}/>
          </Card>
         </Col>
         <Col span={8}>
          <Card title="我创建的" bordered={false} style = {{ margin: '10px' }}>
            <Table dataSource={getRenderOrder(order,1)} columns={columns1} rowKey={item=> item.id}/>
          </Card>
         </Col>
         <Col span={8}>
          <Card title="其他交易中订单" bordered={false} style = {{ margin: '10px' }}>
            <Table dataSource={getRenderOrder(order,2)} columns={columns2} rowKey={item=> item.id}/>
          </Card>
         </Col>
      </Row>
    </div>
  );
}

这里 我们引入了 Button 按钮
然后 重新加了 两个 表头数据 columns1 和 columns2
他们都合并了 columns 原本的数据结果 然后多加了一列 叫操作 对应一个Button按钮
我创建的 叫取消
另一个叫 买入 买入别人创建的订单

然后 这里 我们先找到 antd 文档中的 对话框
在这里插入图片描述
首先 这里 我们需要 从react中引入 useState 然后从antd中 引入 Modal对话框组件
在这里插入图片描述
然后 定义一下 对话框开关 和当前操作的订单id 以及逻辑函数

//控制对话框的 布尔值
const [isModalOpen, setIsModalOpen] = useState(false);
//记录当前正在操作的订单id
const [currentId, setCurrentId] = useState(null);

//点击取消订单时触发
const triggerCancellation = (id) => {
  setIsModalOpen(true);
  setCurrentId(id);
}
//对话框点击 确定 时触发
const handleOk = () => {
  setIsModalOpen(false);
};
//取消 或 关闭 对话框时触发
const handleCancel = () => {
  setIsModalOpen(false);
};

在这里插入图片描述
然后 在元素中写出这个Modal对话框组件
在这里插入图片描述
最后 在取消订单的按钮 绑定上 onClick 开启对话框函数
在这里插入图片描述
item.id 表示 我们调用函数时 将当前订单的id 传进来
然后 我们运行项目 点击取消订单
对话框 就弹出来了
在这里插入图片描述
至于取消订单的具体逻辑 我们直接来看交易所代码 我们之前写了个cancelorder函数 用来取消订单 它只需要一个参数 订单的id 然后其他的具体逻辑 我们会自己调事件的
在这里插入图片描述
这里 我们先换回第一个账号吧
在这里插入图片描述
然后 我们将刚才在 src下 components 下的 Order.jsx中 的 handleOk编写代码如下

//对话框点击 确定 时触发
 const handleOk = () => {
   const {
     account,
     Exchange
   } = window.WebData;
   Exchange.methods.cancelorder(currentId).send({from: account})
   setIsModalOpen(false);
 };

这里 我们函数也写了注释了 他是只有用户点击确认之后才触发的 就表示 用户已经确定 要取消这个订单了
然后 我们通过我们存在window上的 WebData对象 拿到 交易所智能合约Exchange对象 和 account当前登录用户
然后通过Exchange 调用我们自己写的 取消订单 cancelorder函数 传入 我们之前存起来的 当前订单id currentId 然后 指定 send 因为 我们这个操作是要上链的
然后 我们传入当前用户为from 字段
然后 我们运行代码 点击取消订单
在这里插入图片描述
然后点击确定
在这里插入图片描述
然后 页面右侧 就会弹出这个操作提示按钮 因为这设计到了 燃料操作
在这里插入图片描述
我们直接点击确认
在这里插入图片描述
一路确认 最后完成之后 我们的数据并不会自动更新 因为我们没有订阅 但是 当你手动刷新界面 会发现 我们取消的那条 3ETH 的订单就没有了 因为已经被取消掉了
在这里插入图片描述
然后 我们也可以看MetaMask下面这个活动 会将你取消订单的动作记录下来
在这里插入图片描述
这样 就确认了 我们取消订单的功能 确实是好用的 然后 我们来看买入
我们先加上 逻辑层的一些控制对话框代码

//控制买入弹出开启
const [buy, setBuy] = useState(false);
//取消 或 关闭 对话框时触发
const buyCancel = () => {
  setBuy(false);
};
//对话框点击 确定 时触发
const buyleOk = () => {
  setIsModalOpen(false);
};
//点击买入订单时触发
const startBuying = (id) => {
  setBuy(true);
  setCurrentId(id);
}

在这里插入图片描述
然后 我们在元素层 加上 买入确定的对话框
在这里插入图片描述
这样 我们点击买入 提示弹窗就出来了
在这里插入图片描述
然后 我们交易所中 也写了一个 fillorder 函数 他也是 只需要一个参数id
通过id完成订单买入
在这里插入图片描述
这样 我们直接将 刚才写的 buyleOk 函数 改成这样就好了

//对话框点击 确定 时触发
const buyleOk = () => {
  const {
    account,
    Exchange
  } = window.WebData;
  Exchange.methods.fillorder(currentId).send({from: account})
  setBuy(false);
};

逻辑还是跟取消订单差不多 用户确定之后 从我们挂在 window上的WebData 对象中 结构出 当前用户和交易所合约对象
然后 我们通过交易所对象 调用fillorder函数 传入当前操作订单的id
他也会改变链上结构 要用send
当前用户为from字段

然后 我们运行代码
然后 我们记好 自己 ETH的数量 因为我们的grtoken存在燃料的概念 所以 可能有点额外扣除 我们就看ETH
然后 我们点击买入
在这里插入图片描述
然后我们选择确定
在这里插入图片描述
然后 界面右侧 会弹出操作提示 这里 我们点击确定
在这里插入图片描述
因为没有订阅 所以 我们界面并不会自动更新 但我们刷新界面 我们看三个点
ETH 加了 0.01 然后 我们完成的订单多了一条 别人的订单 少了一条
在这里插入图片描述
这就说明 我们操作成功了

最后 我们订单组件的代码是这样

import React, { useState } from 'react';

import { Card, Col, Row ,Table,Button, Modal } from 'antd';
import {useSelector} from "react-redux"
import moment from "moment"

function converTime(t){
  return moment(t*1000).format("YYYY/MM/DD")
}

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

function getRenderOrder(order,type) {
  if(!window.WebData) {
    return []
  }
  const account = window.WebData.account
  //收集起所有 已完成 或 已取消的数据id
  let filterIds = [...order.Cancelorders,...order.Fillorders].map(item=>item.id)
  let makeorders = order.Allorders.filter(item=> !filterIds.includes(item.id))
  if (type === 1) {
    return makeorders.filter(item=>item.user === account)
  } else {
    return makeorders.filter(item=>item.user !== account)
  }
}

export default function Order() {
  //控制对话框的 布尔值
  const [isModalOpen, setIsModalOpen] = useState(false);
  //记录当前正在操作的订单id
  const [currentId, setCurrentId] = useState(null);

  //点击取消订单时触发
  const triggerCancellation = (id) => {
    setIsModalOpen(true);
    setCurrentId(id);
  }
  //对话框点击 确定 时触发
  const handleOk = () => {
    const {
      account,
      Exchange
    } = window.WebData;
    Exchange.methods.cancelorder(currentId).send({from: account})
    setIsModalOpen(false);
  };
  //取消 或 关闭 对话框时触发
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  
  //控制买入弹出开启
  const [buy, setBuy] = useState(false);
  //取消 或 关闭 对话框时触发
  const buyCancel = () => {
    setBuy(false);
  };
  //对话框点击 确定 时触发
  const buyleOk = () => {
    const {
      account,
      Exchange
    } = window.WebData;
    Exchange.methods.fillorder(currentId).send({from: account})
    setBuy(false);
  };
  //点击买入订单时触发
  const startBuying = (id) => {
    setBuy(true);
    setCurrentId(id);
  }


  const order = useSelector(state => state.order)
  
  const columns = [
    {
      title: 'ETH',
      dataIndex: 'amountGive',
      render:(amountGive)=><b>{ convert(amountGive) }</b>,
      key: 'amountGive'
    },
    {
      title: 'GrToken',
      dataIndex: 'amountGet',
      render:(amountGet)=><b>{ convert(amountGet) }</b>,
      key: 'amountGet'
    },
    {
      title: '创建时间',
      dataIndex: 'timestamp',
      render:(timestamp)=><div>{ converTime(timestamp) }</div>,
      key: 'timestamp'
    },
  ];

  const columns1 = [
    ...columns,
    {
      title: '操作',
      render:(item)=><Button type = "text" onClick={()=>{triggerCancellation(item.id)}}>取消</Button>
    }
  ]

  const columns2 = [
    ...columns,
    {
      title: '操作',
      render:(item)=><Button type = "text" onClick={()=>{startBuying(item.id)}}>买入</Button>
    }
  ]
  
  return (
    <div style = {{marginTop:'10px'}}>
      <Row>
         <Col span={8}>
          <Card title="已完成" bordered={false} style = {{ margin: '10px' }}>
            <Table dataSource={order.Fillorders} columns={columns} rowKey={item=> item.id}/>
          </Card>
         </Col>
         <Col span={8}>
          <Card title="我创建的" bordered={false} style = {{ margin: '10px' }}>
            <Table dataSource={getRenderOrder(order,1)} columns={columns1} rowKey={item=> item.id}/>
          </Card>
         </Col>
         <Col span={8}>
          <Card title="其他交易中订单" bordered={false} style = {{ margin: '10px' }}>
            <Table dataSource={getRenderOrder(order,2)} columns={columns2} rowKey={item=> item.id}/>
          </Card>
         </Col>
      </Row>
      <Modal
        title="操作提示"
        open={isModalOpen}
        okText="确定"
        cancelText="取消"
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <p>您确定要取消当前订单吗？</p>
      </Modal>
      <Modal
        title="操作提示"
        open={buy}
        okText="确定"
        cancelText="取消"
        onOk={buyleOk}
        onCancel={buyCancel}
      >
        <p>您确认要买入当前订单吗？</p>
      </Modal>
    </div>
  );
}

但是 目前体验比较差 因为我们操作完成 不会自动更新 需要手动刷新界面数据才会更新
因为 我们需要对这些事件进行订阅
那么 我们下文继续

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

数据的属性与数据集，相似度，数据的质量，OLAP

数据的属性与数据集，相似度，数据的质量，OLAP

数据的属性与数据集&#xff1a; 2022找工作是学历、能力和运气的超强结合体&#xff0c;遇到寒冬&#xff0c;大厂不招人&#xff0c;可能很多算法学生都得去找开发&#xff0c;测开 测开的话&#xff0c;你就得学数据库&#xff0c;sql&#xff0c;oracle&#xff0c;尤其sq…
阅读更多...
[LeetCode] 5.最长回文子串

[LeetCode] 5.最长回文子串

一、题目描述 给你一个字符串 s&#xff0c;找到 s 中最长的回文子串。 如果字符串的反序与原始字符串相同&#xff0c;则该字符串称为回文字符串。 示例 1&#xff1a; 输入&#xff1a;s "babad" 输出&#xff1a;"bab" 解释&#xff1a;"aba&…
阅读更多...
【api_fox】ApiFox简单操作

【api_fox】ApiFox简单操作

1、get和post请求的区别&#xff1f;2、接口定义时的传参格式&#xff1f;3、保存接口文档 apifox当中接口文档的设计和接口用例的执行是分开的。 1、get和post请求的区别&#xff1f; 2、接口定义时的传参格式&#xff1f; 3、保存接口文档 就生成如下的接口文档。
阅读更多...
木板上的蚂蚁(c++题解)

木板上的蚂蚁(c++题解)

题目描述 有一块木板&#xff0c;长度为 n 个 单位 。一些蚂蚁在木板上移动&#xff0c;每只蚂蚁都以 每秒一个单位 的速度移动。其中&#xff0c;一部分蚂蚁向 左 移动&#xff0c;其他蚂蚁向 右 移动。 当两只向 不同 方向移动的蚂蚁在某个点相遇时&#xff0c;它们会同时改…
阅读更多...
移植LVGL到单片机的一个demo简单介绍

移植LVGL到单片机的一个demo简单介绍

简介 背景&#xff1a; 本文使用的是主控IC为stm32f103zet6, 显示IC为ST7735s&#xff0c;它是128*160的像素&#xff0c;色深为RGB565颜色。 官方虽然说LVGL移植平台只需 64kB 闪存和 8kB RAM 就足以满足简单的用户界面。但我移植到stm32f103c8t6&#xff0c;不管怎么修改配…
阅读更多...
Kubernetes基础(七)-Pod资源Limits与Requests

Kubernetes基础(七)-Pod资源Limits与Requests

在k8s的集群环境中&#xff0c;资源的合理分配和使用非常重要。毕竟容器化要解决的问题之一就是资源的充分利用。在集群中分配资源的时候就不得不提到Limits和Requests。 1 Namespace配额 Kubernetes 是允许管理员在命名空间中指定资源 Requests 和 Limits 的&#xff0c;这一…
阅读更多...
半小时拥有自己的ChatGPT4，高效低成本，无脑跟即可

半小时拥有自己的ChatGPT4，高效低成本，无脑跟即可

文章目录 一、获取Key二、获取服务器三、设置端口三、安装Docker环境 一、获取Key 最简单的获取方法&#xff0c;去某宝搜 “open账号ai” 购入一个key&#xff0c;几块钱&#xff0c;有3.5、4.0&#xff0c;买3.5就行了&#xff0c;4.0太贵了。注意是购入key&#xff0c;不是…
阅读更多...
ArcGIS10.8 连接 PostgreSQL 及遇到的两个问题

ArcGIS10.8 连接 PostgreSQL 及遇到的两个问题

前提 以前同事用过我的电脑连PostgreSQL&#xff0c;失败了。当时不知道原因&#xff0c;只能使用GeoServer来发布数据了。现在终于搞明白了&#xff0c;原因是ArcGIS10.2版本太老&#xff0c;无法连接PostgreSQL9.4。参考这里 为了适应时代的发展&#xff0c;那我就用新的Ar…
阅读更多...
测量直线模组时如何降低误差？

测量直线模组时如何降低误差？

直线模组属于高精度传动零部件&#xff0c;是机械行业中不可或缺的零部件之一&#xff0c;其具有高精度、速度快、使用寿命长等特点&#xff1b;如果直线模组的精度受损&#xff0c;则不能达到预期的使用效果&#xff0c;那么我们测量时应该如何减少误差&#xff0c;确保直线模…
阅读更多...
ENVI IDL：如何解析XML文件（以Landsat9-MTL.xml文件为例）

ENVI IDL：如何解析XML文件（以Landsat9-MTL.xml文件为例）

01 前言 我们原本是打算对Landsat9文件进行辐射定标&#xff0c;但是辐射定标的参数在MTL文件中&#xff0c;从文件中查看参数直接复制到IDL中固然可行&#xff0c;但是当我们对Landsat9文件进行批量辐射定标时&#xff0c;这种方法就将失效了。因此我们需要自动从MTL文件中读…
阅读更多...
SSM框架Demo: 简朴博客系统

SSM框架Demo: 简朴博客系统

文章目录 1. 前端页面效果2. 项目创建3. 前期配置3.1. 创建数据库数据表3.2. 配置文件 4. 创建实体类5. 统一处理5.1. 统一返回格式处理5.2. 统一异常处理 6. 全局变量7. Session工具类8. 登录拦截器9. 密码加盐加密10. 线程池组件11. dao层11.1. UserMapper11.2. ArticleMappe…
阅读更多...
jenkins分步式构建环境（agent）

jenkins分步式构建环境（agent）

rootjenkins:~# netstat -antp|grep 50000 tcp6 0 0 :::50000 ::&#x1f617; LISTEN 5139/java 1.52 安装Jenkins rootubuntu20:~# dpkg -i jenkins_2.414.3_all.deb 配置各种类型的Agent的关键之处在于启动Agent的方式 ◼ JNLP Agent对应着“通过Java Web启动代理”这种方…
阅读更多...
人工智能基础——Python：Pillow与图像处理

人工智能基础——Python：Pillow与图像处理

人工智能的学习之路非常漫长&#xff0c;不少人因为学习路线不对或者学习内容不够专业而举步难行。不过别担心&#xff0c;我为大家整理了一份600多G的学习资源&#xff0c;基本上涵盖了人工智能学习的所有内容。点击下方链接,0元进群领取学习资源,让你的学习之路更加顺畅!记得…
阅读更多...
SPSS：卡方检验（交叉表）

SPSS：卡方检验（交叉表）

第一步 打开SPSS软件&#xff0c;在工具栏中选中【打开-文件-数据】&#xff0c;然后选择一份要打开的数据表(如图所示)。 第二步 在工具栏中找到【分析-描述统计-交叉表】打开交叉表对话框(如图所示)。 第三步 接着将【行-列】相关变量放在对应对话框中(如图所示)。 第四步 在…
阅读更多...
2023年03月 Python（四级）真题解析#中国电子学会#全国青少年软件编程等级考试

2023年03月 Python（四级）真题解析#中国电子学会#全国青少年软件编程等级考试

Python等级考试（1~6级）全部真题・点这里 一、单选题（共25题，每题2分，共50分） 第1题 运行下列程序，输出的结果是？（　） def wenhao(name = zhejiang): print(hello + name) wenhao
阅读更多...
《软件工程与计算》期末考试真题范例及答案

《软件工程与计算》期末考试真题范例及答案

今天分享一套针对《软件工程与计算》这本书的真题案例&#xff0c;有关《软件工程与计算》23章内容的重点知识整理&#xff0c;已经总结在了博客专栏中&#xff0c;有需要的自行阅读&#xff1a; 《软件工程与计算》啃书总结https://blog.csdn.net/jsl123x/category_12468792.…
阅读更多...
git基础知识

git基础知识

1.git的必要配置 所有的配置文件&#xff0c;其实都保存在本地&#xff01; 查看所有配置 git config -l 即把 系统配置(system)和当前用户&#xff08;global&#xff09;配置都 列出来 以直接编辑配置文件&#xff0c;通过命令设置后会响应到这里。 注意&#xff1a; 如果…
阅读更多...
男科医院服务预约小程序的作用是什么

男科医院服务预约小程序的作用是什么

医院的需求度从来都很高&#xff0c;随着技术发展&#xff0c;不少科目随之衍生出新的医院的&#xff0c;比如男科医院、妇科医院等&#xff0c;这使得目标群体更加精准&#xff0c;同时也赋能用户可以快速享受到服务。 当然相应的男科医院在实际经营中也面临痛点&#xff1a;…
阅读更多...
【图像分类】【深度学习】【Pytorch版本】GoogLeNet(InceptionV1)模型算法详解

【图像分类】【深度学习】【Pytorch版本】GoogLeNet(InceptionV1)模型算法详解

【图像分类】【深度学习】【Pytorch版本】GoogLeNet(InceptionV1)模型算法详解 文章目录 【图像分类】【深度学习】【Pytorch版本】GoogLeNet(InceptionV1)模型算法详解前言GoogLeNet(InceptionV1)讲解Inception结构InceptionV1结构1x1卷积的作用辅助分类器 GoogLeNet(Inceptio…
阅读更多...
（论文阅读23/100）Hierarchical Convolutional Features for Visual Tracking

（论文阅读23/100）Hierarchical Convolutional Features for Visual Tracking

文献阅读笔记&#xff08;分层卷积特征&#xff09; 简介 题目 Hierarchical Convolutional Features for Visual Tracking 作者 Chao Ma, Jia-Bin Huang, Xiaokang Yang and Ming-Hsuan Yang 原文链接 arxiv.org/pdf/1707.03816.pdf 关键词 Hierarchical convolution…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023