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

好上文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//收集起所有 已完成 或 已取消的数据idlet 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 然后我们完成的订单多了一条别人的订单少了一条还有就是在交易所的 grToken 减少了
这就说明我们操作成功了
在这里插入图片描述
最后我们订单组件的代码是这样

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//收集起所有 已完成 或 已取消的数据idlet 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);//记录当前正在操作的订单idconst [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><Modaltitle="操作提示"open={isModalOpen}okText="确定"cancelText="取消"onOk={handleOk}onCancel={handleCancel}><p>您确定要取消当前订单吗？</p></Modal><Modaltitle="操作提示"open={buy}okText="确定"cancelText="取消"onOk={buyleOk}onCancel={buyCancel}><p>您确认要买入当前订单吗？</p></Modal></div>);
}