在这个教程中,我们将学习如何开发一个支持聊天的去中心化自治组织 (DAO),教程内容 涵盖使用的工具链、智能合约开发部署和前端应用开发。
用熟悉的语言学习 Web3.0 开发 : Java | Php | Python | .Net / C# | Golang | Node.JS | Flutter / Dart
1、使用的工具链
我们需要安装以下工具来完成此教程:
- Node.js
- Ganache-Cli
- Truffle
- React
- Infura
- Tailwind CSS
- CometChat SDK
- Metamask
- Yarn
2、安装开发依赖
2.1 NodeJs安装
确保你的机器上已经安装了 NodeJs。接下来,在终端上运行代码以确认它已安装。
2.2 Yarn、Ganache-cli 和 Truffle 安装
在终端上运行以下代码以全局安装这些基本软件包。
1 | npm i -g yarn |
2.3 克隆 Web3 入门项目
使用下面的命令,克隆下面的 web 3.0 入门项目。这将确保我们都在同一个页面上并使用相同的包。
1 | git clone https://github.com/Daltonic/dominionDAO |
太棒了,让我们用下面的文件替换package.json文件:
1 | { |
太好了,用上面的代码替换你的package.json文件,然后在你的终端上运行yarn install
。
安装完毕后,让我们开始编写 Dominion DAO 智能合约。
3、配置 CometChat SDK
要配置CometChat SDK,请按照以下步骤操作,最后,我们需要将这些密钥存储为环境变量。
第 1 步: 前往CometChat仪表板并创建一个帐户。
第 2步:在注册后登录 CometChat 仪表 板。
第 3 步: 在仪表板中,添加一个名为dominionDAO 的新应用程序。
第 4 步: 从列表中选择刚刚创建的应用程序。
第 5 步: 从快速入门中将APP_ID、REGION和AUTH_KEY, 复制到你的.env文件中。请参阅图像和代码片段。
将REACT_COMET_CHAT
占位符键替换为相应的值:
1 | REACT_APP_COMET_CHAT_REGION=** |
4、配置 Infura
第 1 步: 前往Infura创建一个帐户。
第 2 步: 从Infura仪表板创建一个新项目。
第 3 步: 将Rinkeby测试网络 WebSocket 端点 URL 复制到你的.env
文件中。
接下来,添加你的 Metamask 密码短语和首选帐户私钥。如果正确地完成了这些操作,你的环境变量现在应该如下所示。
1 | ENDPOINT_URL=*************************** |
如果不知道如何访问你的私钥,请参阅下面的部分。
5、访问 Metamask 私钥
第 1 步: 单击Metamask浏览器扩展程序,并确保Rinkeby已选择作为测试网络。
接下来,在首选帐户上,单击垂直虚线并选择帐户详细信息。见下图。
第 2 步: 在提供的字段中输入你的密码,然后单击确认按钮,这将使你能够访问你的帐户私钥。
第 3 步: 单击“导出私钥”以查看你的私钥。确保永远不会在公共页面上公开你的密钥,例如Github. 这就是为什么我们将其附加为环境变量。
第 4 步: 将你的私钥复制到 .env
文件中。请参阅下面的图像和代码片段:
1 | ENDPOINT_URL=*************************** |
至于SECRET_KEY
,你需要将你的Metamask密码短语粘贴到环境文件中提供的空间中。
6、Dominion DAO 智能合约
这是智能合约的完整代码,我将逐个解释所有函数和变量。
1 | // SPDX-License-Identifier: MIT |
在刚刚克隆的项目中,前往src >> contract
目录并创建一个名为 DominionDAO.sol
的文件,然后将上述
代码粘贴到其中。
6.1 pragma语句
1 | // SPDX-License-Identifier: MIT |
Solidity 需要一个许可证标识符来编译你的代码,否则它会产生一个警告,要求你指定一个。此外,Solidity 要求
你为智能合约指定编译器的版本。这就是pragma
这个词所代表的。
6.2 import语句
1 | import "@openzeppelin/contracts/access/AccessControl.sol"; |
在上面的代码块中,我们使用import
导入两个openzeppelin’s智能合约来指定角色并保护我们的智能合约免受重入攻击。
6.3 DAO角色相关的状态变量
1 | bytes32 private immutable CONTRIBUTOR_ROLE = keccak256("CONTRIBUTOR"); |
我们为利益相关者和贡献者角色设置了一些状态变量,并将最短投票持续时间指定为一周。我们还初始化了总提案计数器和 一个变量来记录我们的可用余额。
6.4 DAO提案和投票相关的状态变量
1 | mapping(uint256 => ProposalStruct) private raisedProposals; |
raisedProposals
跟踪提交给我们智能合约的所有提案。stakeholderVotes
顾名思义,跟踪利益相关者的投票。votedOn
跟踪与
提案相关的所有投票。贡献者跟踪向我们平台捐款的任何人,而1 ether
以上的贡献者被视为利益相关者进行跟踪。
6.5 DAO提案和投票的数据结构
1 | struct ProposalStruct { |
proposalStruct
描述每个提案的内容,而votedStruct
描述每个投票的内容。
6.6 Action事件
1 | event Action( |
这是一个名为 Action 的动态事件。这将帮助我们丰富每笔交易注销的信息。
6.7 DAO角色相关的修饰符
1 | modifier stakeholderOnly(string memory message) { |
上述修饰符帮助我们按角色识别用户,也可以防止他们访问一些未经授权的资源。
6.8 DAO提案创建方法
1 | function createProposal( |
上述函数获取提案的标题、描述、金额和受益人的钱包地址并创建提案。该功能仅允许利益相关者创建提案。利益相关者是至少
做出了1 ether
贡献的用户。
6.9 DAO投票方法
1 | function performVote(uint256 proposalId, bool choosen) |
此函数接受两个参数,一个提案 ID 和一个由布尔值表示的首选选项。True 表示接受投票,False 表示拒绝。
6.10 DAO投票执行方法
1 | function handleVoting(ProposalStruct storage proposal) private { |
此函数执行实际投票,包括检查用户是否是利益相关者并有资格投票。
6.11 DAO受益人支付方法
1 | function payBeneficiary(uint256 proposalId) |
此功能负责根据特定标准向提案所附的受益人付款:
- 受益人不得已经支付。
- 案期限必须已过期。
- 可用余额必须能够支付给受益人。
- 票数不得平分。
6.12 DAO捐款方法
1 | function contribute() payable external { |
该函数负责从捐助者和有兴趣成为利益相关者的人那里收集捐款。
6.13 DAO提案查询方法
1 | function getProposals() |
上面函数检索记录在此智能合约上的一组提案。
6.14 DAO提案详情读取方法
1 | function getProposal(uint256 proposalId) |
上面函数按 Id 检索特定提案。
6.15 DAO投票查询方法
1 | function getVotesOf(uint256 proposalId) |
这将返回与特定提案相关的投票列表。
6.16 DAO利益相关者投票查询方法
1 | function getStakeholderVotes() |
这将返回智能合约上的利益相关者列表,并且只有利益相关者才能调用此函数。
6.17 DAO利益相关者余额查询方法
1 | function getStakeholderBalance() |
这将返回利益相关者贡献的金额。
6.18 DAO利益相关者判别方法
1 | function isStakeholder() external view returns (bool) { |
判断用户是否为利益相关者,返回 True 或 False。
6.19 DAO一般贡献者余额查询方法
1 | function getContributorBalance() |
这将返回贡献者的余额,并且只有贡献者可以访问。
6.20 DAO一般贡献者判别方法
1 | function isContributor() external view returns (bool) { |
这会检查用户是否是贡献者,并用 True 或 False 表示。
6.21 DAO普通用户余额查询方法
1 | function getBalance() external view returns (uint256) { |
返回调用用户的余额,无论其角色如何。
6.22 DAO支付方法
1 | function payTo( |
此函数执行指定金额和帐户的付款。
7、配置DAO合约部署脚本
与智能合约有关的另一件事是配置部署脚本。
前往项目的迁移文件夹中的 2_deploy_contracts.js
文件,并使用下面的代码片段对其进行更新。
1 | const DominionDAO = artifacts.require('DominionDAO') |
太棒了,我们刚刚完成了应用程序的智能合约,是时候开始构建 Dapp 界面了。
8、开发DAO应用前端
前端包括许多组件和部件。我们将创建所有组件、视图和其余外围设备。
8.1 DAO应用标题栏组件
该组件捕获有关当前用户的信息,并带有一个用于明暗模式的主题切换按钮。这是通过 Tailwind CSS 实现的,具体 请参阅下面的代码。
1 | import { useState, useEffect } from 'react' |
8.2 DAO应用横幅组件
该组件包含有关 DAO 当前状态的信息,例如总余额和未决提案的数量。
该组件还包括使用贡献函数生成新提案的能力。看看下面的代码。
1 | import { useState } from 'react' |
8.3 DAO应用提案组件
该组件包含我们智能合约中的提案列表。此外,使您能够在关闭和打开的提案之间进行过滤。在提案到期时,支付按钮变为可用, 该按钮使利益相关者可以选择支付与提案相关的金额。请参阅下面的代码。
1 | import Identicon from 'react-identicons' |
8.4 DAO应用提案详情组件
此组件显示有关当前提案的信息,包括成本。该组件允许利益相关者接受或拒绝提案。
提议者可以组群,其他平台用户可以进行 web3.0 风格的匿名聊天。
该组件还包括一个条形图,可让你查看接受者与拒绝者的比率。看看下面的代码。
1 | import moment from 'moment' |
8.5 DAO应用选民组件
该组件仅列出对提案进行投票的利益相关者。该组件还为用户提供了在拒绝者和接受者之间进行过滤的机会。 请参阅下面的代码。
1 | import Identicon from 'react-identicons' |
8.6 DAO应用消息组件
借助 CometChat SDK 结合该组件的强大功能,用户可以匿名进行一对多聊天。 贡献者和利益相关者可以在此处在其决策过程中进一步讨论提案。所有用户都保持匿名,并由他们的身份代表。
1 | import Identicon from 'react-identicons' |
8.7 创建DAO提案组件
该组件只是让你通过提供上图所示字段的信息来提出建议。请参阅下面的代码。
1 | import { useState } from 'react' |
8.8 DAO应用认证组件
该组件可帮助你参与聊天功能。如果你已经注册,则需要创建一个帐户或登录。通过登录,可以参与群聊,并在 web3.0 风格的提案中 与其他参与者进行匿名交谈。请参阅下面的代码。
1 | import { FaTimes } from 'react-icons/fa' |
太棒了,让我们确保观点得到很好的体现……
8.9 DAO应用主页视图
此视图包括用于提供卓越 DAO 用户体验的header、banner和组件。proposals我们还使用 Tailwind CSS 的强大功能来实现这种外观。 看看下面的代码。
1 | import Banner from '../components/Banner' |
8.10 DAO应用提案视图
此视图将标头、提案详细信息和选民组件耦合在一起,以呈现单个组件的平滑呈现。请参阅下面的代码。
1 | import Header from '../components/Header' |
8.11 DAO应用聊天视图
最后,聊天视图包含标题和消息组件,用于呈现高质量的聊天界面。请参阅下面的代码。
1 | import { useParams, useNavigate } from 'react-router-dom' |
太棒了,别忘了更新App.jsx文件。
8.12 DAO应用App组件
App 组件:用下面的代码替换 App 组件。
1 | import { useEffect, useState } from 'react' |
8.13 DAO应用入口脚本
在src目录中将以下代码粘贴到各自的文件中。
index.jsx 文件:
1 | import React from 'react' |
index.css 文件
1 | @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap'); |
CometChat.jsx
1 | import Web3 from 'web3' |
9、启动DAO应用开发环境
第 1 步:使用下面的命令启动ganache-cli:
1 | ganache-cli -a |
这将创建一些测试账户,每个账户都加载了 100 个以太币,当然,这些仅用于测试目的。见下图:
第 2 步:使用 Metamask 添加本地测试网络,如下图所示。
第 3 步: 单击帐户图标并选择导入帐户。
复制大约五个私钥并将它们一个接一个地添加到本地测试网络。见下图。
观察添加到本地测试网络的新帐户,预加载了 100 ETH。确保添加大约五个帐户,以便进行最大测试。见下图。
10、DAO智能合约部署
现在打开一个新终端并运行以下命令。
1 | truffle migrate |
上述命令会将智能合约部署到你的本地或 Infuria rinkeby 测试网络。
接下来,打开另一个终端并使用yarn start
启动项目。
完成!!!
原文链接:How to Build a Glorious Web3.0 DAO with React, Solidity, and CometChat
汇智网翻译整理,转载请标明出处