Conflux 开发教程 | 使用 IDE 开发 DApp 的实战操作
华胥
发表于 2022-12-8 13:10:00
118
0
0
Conflux Studio 是一个帮助开发者快速开发 Conflux 智能合约的集成化开发环境。Conflux DApp 开发教程将使用 Conflux Studio 在 Oceanus 网络下开发一个简单的代币应用 Coin。
通过这个开发教程,你将会学习到如何进行 Conflux 智能合约的编写、调用,配置智能合约的代付以及如何使用 Web 前端项目与智能合约进行交互,从而实现一个包含前端和智能合约的完整的 DApp。! K7 F* ]8 T. e
二、准备工作: I1 w" k2 K0 Z& D2 ?
2.1 安装 IDE
请在 GitHub 的下载页面/ f4 s7 C0 x8 W/ O
(github.com/ObsidianLabs/ConfluxStudio/releases) 下载 Conflux Studio。目前 Conflux Studio 支持 macOS 和 Linux 系统,请根据系统下载对应的版本。2 w6 c* |# c2 v' Q! K0 U* D$ |
正确安装 Conflux Studio 并初次启动后,Conflux Studio 将显示欢迎页面,根据提示完成 Docker, Conflux Node 以及 Conflux Truffle 的下载、安装及启动。
2.2 创建钱包
完成所有的安装步骤后,首先需要创建钥匙对来完成后续的合约部署以及调用。) J. l6 A/ B2 B% w* m
在 Conflux Studio 的任意界面,点击应用左下?的钥匙图标,打开密钥管理器。点击 Create 按钮打开新钥匙对弹窗,输入钥匙对的名字并点击 Save 按钮。完成后将在密钥管理器中看到刚刚生成的钥匙对的地址。钥匙对由私钥和公钥组成,公钥在智能合约中也常被称作地址。
导出私钥可以通过点击每个地址后面的眼睛按钮打开查看私钥弹窗,弹窗显示地址以及私钥。后续教程中会需要通过管理器导出私钥。2 p, [2 w: ~2 h0 i' b* l& ], Z. \ ]
为了顺利完成教程,首先需要创建三个钥匙对:
**· **minter_key 用于 Coin 合约部署时的签名,是这个教程中最常使用的钥匙对, Y0 }4 R6 C1 h4 L5 p& B6 ~
**· **receiver_key 用于 Coin 合约接收转账,将在后文中介绍转账时用到
**· **sponsor_key 用于 Coin 合约代付功能,将在后文中介绍代付功能时用到
2.3 连接 Conflux 网络8 P" z9 n6 f- }1 d* M4 t+ ?
教程将在 Oceanus 网络进行合约的部署以及合约的调用。点击顶部 Network 标签的倒三角打开下拉菜单,点击选择 Oceanus 网络进行切换。5 J/ N; h/ Q# I
切换完成后,可以在主页面中看到当前网络为 oceanus。页面左边包括了当前网络的节点 URL,Chain ID,TPS 信息,页面右边包含了当前网络区块的信息。2 M; f% }& v* P$ x( Z5 Q- L
2.4 申请测试 CFX
点击顶部 Explorer 标签打开区块浏览器,并在地址栏粘贴钥匙对地址,可以在左边看到当前地址的 CFX 余额信息。
在区块链的世界中,大家通常将申请测试 Token 的方式称为 faucet,目前在 Oceanus 网络下每次 faucet 申请到的 Token 为 100 CFX。
获取 CFX 的方式有两种方式:% v6 P; K( K& ~$ U& I9 U1 l' m* i
· 输入地址后点击地址栏右边的水龙头按钮,Conflux Studio 将为地址自动申请 CFX;
· 你也可以直接在浏览器中输入 wallet.confluxscan.io/faucet/dev/ask?address={address} 来申请 CFX;2 J. l! i* q D: D8 x/ y* g
使用上述方法在 Conflux Studio 中为 minter_key 和 sponsor_key 申请 CFX Token。完成申请后,这两个账户上的余额将会从 0 CFX 更新为 100 CFX。0 m9 S. e, p- \
目前余额信息为:
**· **minter_key 余额 100 CFX( {$ K$ H+ W9 R0 J
**· **receiver_key 余额 0 CFX
**· **sponsor_key 余额 100 CFX0 E" [9 N$ y6 G' S% S# Y r
**三、智能合约创建项目 **2 h7 a) {+ P1 V
3.1 创建项目
点击顶部左边的 Project 标签切换至项目列表页面,点击页面中的 New 按钮打开项目创建窗口,输入项目的名称并选择 coin 模版,点击 Create Project 完成项目的创建。
3.2 合约代码1 @" X2 H( x' K. {
Coin 合约是一个简单的代币合约,其中:
**· **通过 mint 方法可以增发代币数量 y$ k, a K, R$ D* V& U
**· **通过 send 方法可以将一定数量的代币转账给别的用户,同时会在事件中记录下这笔转账的信息
**· **通过 balanceOf 方法可以查询到指定账户地址的代币余额# v- O+ n* o+ ]3 ^/ d+ r3 }
**· **通过 add_privilege 方法可以为合约添加代付白名单
**· **通过 remove_privilege 方法可以为合约移除代付白名单3 o# Q: v( R; e
Conflux 智能合约使用 Solidity 语言进行开发,打开目录下的 contracts/Coin.sol 文件,这个是本项目的核心代码:
// 指定了 Solidity 的版本,通过 Pragmas(https://solidity.readthedocs.io/en/latest/layout-of-source-files.html#pragmas) 告诉编译器本代码可以兼容的版本为 0.5.0 到 0.7.0
pragma solidity >=0.5.0 1 u* S0 m$ n! w; t. |% U+ j
// 导入 SponsorWhitelistControl 合约
import "./SponsorWhitelistControl.sol";
// 定义 Coin 的合约
contract Coin {8 q. G- B$ w' R7 [, J1 k3 \
// 定义了两个 State Variables(https://solidity.readthedocs.io/en/latest/structure-of-a-contract.html#state-variables)
address public minter;
mapping (address => uint) private balances;- C; |- o+ `: V3 M X
// 使用 SponsorWhitelistControl 合约连接系统合约9 W1 V1 K4 R) Z
SponsorWhitelistControl constant private SPONSOR = SponsorWhitelistControl(address(0x0888000000000000000000000000000000000001));
// 定义了 `Sent` 的事件,定义了 from / to / amount 列& [8 K5 u' y' O" C1 Z! H3 f1 d
event Sent(address from, address to, uint amount);- }# C* m+ X5 `7 \, m# \8 Q
// Coin 合约的 constructor ,在 constructor 中指定了 minter 的地址5 c6 C# A! N: ^6 R
constructor() public {% x J4 b4 c ?$ k+ Z( ~
// msg.sender 为部署合约时签名的账户地址,将这个地址赋值给 minter
minter = msg.sender;: ?) F# T- }# ^: \: O' \
}; k( H' S% p' R2 X4 u8 U$ [! o" Z
// 定义 mint 方法,通过此方法来增发代币
function mint(address receiver, uint amount) public {
require(msg.sender == minter);& S* W, H2 y( ^" \
require(amount }, L) B( N3 {. Z, t' D/ q8 T
3.3 编译及部署合约
点击工具栏的 Build 按钮进行合约的编译,编译的结果将会保存在 build/Coin.json 文件中。
在部署合约前,首先需要确认在 Explorer 中选择合约部署所使用的地址,Conflux Studio 会使用这个地址将部署合约这笔交易进行签名(选择的方法为在 Explorer 的地址栏中输入地址)。在合约代码的 constructor 中,minter 被赋值为 msg.sender,这个 msg.sender 就是 Explorer 所选择的地址。
在此我们选择 minter_key 作为部署合约的签名者。% C% u: d3 U7 Q/ G1 g6 _9 _ I
点击工具栏的部署按钮进行部署,部署完成后,部署结果会在 deploys 的 JSON 文件中,在这个文件中可以在 contractCreated 中找到当前合约部署的地址,后文中使用 contract_addr 来代表这个合约地址。
四、调用合约 x* O/ s6 Y7 p. D6 m5 F& }
点击顶部的 Contract 标签切换至合约页面,在地址栏输入 contract_addr 地址并加载合约。" g. Z" K" V3 B% m' B6 J3 D
合约页面由三个部分组成:
**· **左边为合约调用区域8 c9 O6 c K* D7 X% x
**· **中间为合约数据查询区域
· 右边为事件查询区域' [+ m# S2 B" Z+ O4 L
4.1 合约调用及查询
4.1.1 增发代币
点击合约调用的下拉菜单中选择 mint 方法,在下方的参数区域分别填入以下信息:. z7 _7 p- `& }, }) ]
· receiver 接收代币的地址。填入 minter_key 地址0 x$ R5 y; B3 V# X% q' k8 G
· amount 发行的代币总数。填入整数 10008 p$ k3 y J" D) c
· Value 选填项,具体可查看 Value 详解。填 0 或者不填. ]% e9 R; G( M
· Signer 这笔交易的签名地址,如果没有开通代付功能,交易手续费将在这个账户地址中扣除,在合约代码中通过 msg.sender 获取到这个地址。填入 minter_key 地址0 q% n4 e* h, Q/ V2 @( }- ?
填写完成后点击执行按钮,Conflux Studio 将自动构造交易并推送到网络中。成功执行后可以在下方 Result 中看到这笔成功的交易。
4.1.2 查询代币余额7 j, `4 a- d6 M( P: F1 @$ K
点击查询区域的下拉菜单并且选择 balanceOf 方法,这是在代码中定义的查询方法。在下方的 tokenOwner 填入 minter_key 地址并点击执行,就可以在下方的 Result 中看到 minter_key 账户的 Coin 代币的余额信息为 1000。使用同样方法可以查询到 receiver_key 账户的代币余额为 0。, M% q2 i. |9 S0 M2 J
4.1.3 转账代币3 @- g4 c; d; M$ a6 O7 w
在合约调用区域选择 send 方法,在 Parameters 中分别填入:
· receiver 收款人地址。填入 receiver_key 地址0 e% q. h z0 G: _
· amount 转账的代币数量。填入整数 200
· Signer 这笔交易的签名地址,代币转出的数量将会在这个账户中扣除。填入 minter_key 地址,
点击执行完成转账,再次查询代币余额可以看到 minter_key 账户只剩下 800 代币,而 receiver_key 账户则从 0 变成了 200 代币。
4.1.4 Value 参数
Conflux 智能合约的每个调用的方法都可以带上 Value 参数,这是一个可选的参数。如果带上了这个值,智能合约除了在执行这个方法的逻辑外,还会额外转 Value 中指定数量的 CFX token 到 receiver 账户,转账金额为 Value 中所填的值。有些智能合约的方法需要这个参数才可以完成调用,但是在 Coin 合约不需要这个参数。6 y" @* D" D1 r2 C
后文中的代付功能将会使用到 Value 参数。
4.2 查询事件9 J, `6 O, t4 I
在事件区域选择 Sent 并点击执行,下方的 Event Logs 可以看到转账的记录。Sent 事件的列都是由代码中的 Sent 事件的参数来定义的(其中 epoch 为事件发生的时间,这个为系统默认列)。在代码中定义了 Sent 方法的参数为 from, to 和 amount,分别对应了这笔转账的发起者地址,接受者地址以及转账的数量。. i" u3 |$ U. D8 b3 _) t
五、代付功能/ S# m+ B. n' [
Conflux Studio 支持 Conflux 系统合约提供的代付功能。
通过系统合约可以为别的合约设置代付功能,系统合约提供给了四个方法:1 G$ u9 X- v. d1 @1 V
· add_privilege 添加合约代付白名单,在代付白名单中的地址调用该合约的方法时不需要付手续费,费用由代付账户支付。其中添加特殊地址 0x0000000000000000000000000000000000000000 代表为所有调用该合约的地址代付费用9 j2 T; l+ M1 |6 x/ f
· remove_privilege 移除合约代付白名单
· set_sponsor_for_collateral 设置合约储存费 (collateral for storage) 的代付账户及代付金额
· set_sponsor_for_gas 设置合约手续费 (gas fee) 的代付账户、代付金额及每笔交易代付金额上限
启用一个合约的代付需要设置代付的账户、代付金额及代付白名单。教程将会使用 Conflux Studio 通过系统合约设置代付账户及代付金额,通过 Coin 合约添加代付白名单。设置完成后,minter_key 账户调用 Coin 合约的方法时将不会被扣除手续费,手续费由 sponsor_key 账户代付。
5.1 设置代付账户及代付金额* ~2 n- z1 r4 h9 t8 o
在 Conflux Studio 中访问系统合约地址3 M8 G9 l' c5 R, R! ] X
0x0888000000000000000000000000000000000001,在合约调用区域能看到前文中提及的四个设置代付的方法。
image选择 set_sponsor_for_collateral 方法,该方法有三个参数:+ V! J9 n* {2 I# z. Q. [% E2 p* N0 E
· contract_addr 设置代付的合约地址。填入 contract_addr. u g- U6 g) M
· Value 设置代付金额。填入整数 40
· Signer 代付账户地址。填入 sponsor_key 地址% f& ^, U2 e' F7 j! c
填好以上参数并执行运行,系统合约将为 Coin 合约设置好储存费代付账户,此时 sponsor_key 账户将会被扣除 40 CFX。9 N4 \) T& e$ J- A5 K4 V- l* H) R
选择 set_sponsor_for_gas 方法,该方法有四个参数:8 |' `* G! B1 m. _5 [# y: ]
· contract_addr 设置代付的合约地址。填入 contract_addr6 v' J. t8 k& N2 H& p* f/ f
· upper_bound 设置每笔交易代付的上限。填入 1000000000000) @& P$ T3 L- _) q: O
· Value 设置代付金额。填入整数 40
· Signer 代付账户地址。填入 sponsor_key 地址8 X; K! p, y+ E" [' H6 R4 x C- }3 m
填好以上参数并再次执行运行,系统合约将为 Coin 合约设置好手续费代付账户,此时 sponsor_key 账户将会再次被扣除 40 CFX。$ M% H' B$ _! }
完成这两个方法的调用后 Coin 合约代付账户便设置好了,sponsor_key 账户将为 Coin 合约的手续费和储存费各提供为 40 CFX Token 的代付服务。由于目前代付白名单中并没有账户地址,因此还需要添加白名单地址才能完成代付设置。- l, J* n# D5 j+ |9 a9 a5 g6 @
5.2 添加代付白名单
在 Coin 合约中集成了设置代付白名单的方法,通过调用此方法可以添加或删除代付白名单。: G; s: |' T4 J* ]: l
在 Conflux Studio 中访问 contract_addr 合约,选择 add_privilege 方法:" L5 ^- c. f Q0 B
· account 添加白名单的地址。填入 minter_key 地址5 M/ M! N# e9 d$ E* P
· Value 不填# N* c! e! D1 `! A5 N; S6 T
· Signer 这笔交易的签名地址。填入 minter_key 地址* X( x+ o# f$ e9 K1 ~8 R( {. y
运行后就成功设置了代付白名单了,至此 Coin 合约的代付功能设置好了。
5.3 代付测试
在进行代付测试前,先查询并记录下 minter_key 账户的 CFX 余额。例如本教程中,minter_key 的初始余额为 97.6210937497093952 CFX。/ b5 s2 G3 Z, y
回到 Coin 合约调用页面,再次调用 mint 方法并使用 minter_key 地址增发代币 1000,完成代币增发后再次查询 minter_key 的余额,仍然为 97.6210937497093952 CFX。
可以看到增发代币的这笔交易,原本应该由 minter_key 账户支付的手续费,变成了由 sponsor_key 账户支付。
六、前端项目" }$ l0 [ g/ r' q, s; n
前端项目源码可以前往 Conflux 前端。
6.1 预备
6.1.1 下载项目并安装依赖; f0 [! `( G; ]
· 下载前端项目:git clone github.com/ObsidianLabs/conflux-frontend-react1 a9 w4 Z3 O* ~
****·** **使用 npm install 或者 yarn 进行项目依赖安装! ?! Q. K" b& s+ K# }
6.1.2 Conflux Portal 的安装及配置5 f3 V! p5 A$ I1 _
Conflux Portal 是由 Conflux 提供的浏览器插件,目前提供了 Chrome 及 Firefox 的支持,用户可以使用 Conflux Portal 进行私钥的管理以及交易签名。
前往 Conflux Portal GitHub 下载安装。项目的源代码在 GitHub 中可以找到。4 K3 w4 {9 y; q2 g0 u
在这里需要将 Conflux Studio 中生成的地址导入到 Conflux Portal 中。完成插件安装后,在 Conflux Portal 的页面中选择 Import,将 Conflux Studio 中的 minter_key 的私钥(在创建钱包章节中介绍了如何将私钥导出)粘贴到输入框中,点击 Import 按钮完成私钥导入。: ?6 {. f' i9 d9 i5 d
6.2 运行前端项目
在运行项目之前,需要修改一些默认的环境变量。" l0 m4 W9 w( B8 |) X% {
在前面的教程中部署合约后会生成一个 contractCreated,这个值便是部署在网络中智能合约的地址。打开项目根目录并找到 .env 文件,这个文件提供了项目的环境变量,将 REACT_APP_CONFLUX_COIN_ADDRESS 的值修改为 contract_addr。7 ? |) `5 ^9 y# `+ H
使用 yarn start 启动前端项目,开发服务器运行起来后会在浏览器中打开前端页面(如果没有打开,请在浏览器中访问 localhost:3000)。- U& O; |2 W. j B6 _0 y
项目运行起来后,页面将显示四个卡片信息,分别为:& @7 ?- G0 S2 P" O6 J, t
****·** **左上角 Conflux 网络信息模块
****·** **右上角 Conflux Portal 模块
****·** **左下角 Coin 合约模块- l: `7 }) r" ^) P, O/ r
****·** **右下角 SponsorWhitelistControl 合约模块
6.2.1 连接 Conflux Portal, D5 {- {6 A. z5 z$ h7 N# R
点击右上角组件中的 Connect to Conflux Portal 按钮,Conflux Portal 页面将被打开,输入密码和选择账户后完成连接。连接成功后,将会在按钮下看到当前连接的账户地址以及账户中的 CFX 余额。) J2 T( v+ z x4 `
6.2.2 运行 Coin 合约代币增发和代币转账操作/ k5 Z9 }) |# p# j5 |
左下角的组件为 Coin 合约组件,可以通过这个组件调用代币增发和代币转账功能。" d. l+ U& z4 P+ U8 h
****·** **代币增发:选择 mint 方法并在 receiver 中填入增发地址 minter_key 地址和在 amount 中填入增发代币的数量 100,点击 Push Transaction,在弹出的 ConfluxPortal Notification 窗口中点击 Confirm 按钮来确认交易。, U, C$ v8 g. b8 w! y
****·** **代币转账:选择 send 方法并在 receiver 中填入收款人地址 receiver_key 地址和在 amount 中转账代币的数量 20,点击 Push Transaction,在弹出的 ConfluxPortal Notification 窗口中点击 Confirm 按钮来确认交易。) r3 `4 q; r8 x$ w1 t& X7 x
6.2.3 查看 Coin 合约中的余额
选择 balanceOf 方法并在 tokenOwner 输入框中填入查询的地址,点击 Query Data 按钮可以查询到账户的余额。6 U! f$ Z5 I, S8 C
6.2.4 查看 Sent 事件
选择 Sent 事件并点击 Query Data 可以查询到转账操作所触发的转账事件的记录。
6.3 前端项目解析$ A. \- ~0 f# X4 P- b( C3 G- m
项目使用 React 进行开发。主要由三大部分组成:视图组件、js-conflux-sdk 以及 Conflux Portal。
项目根目录下的 .env 环境变量,在这里定义了两个环境变量,分别为:
****·** **REACT_APP_CONFLUX_NODE_RPC:Conflux 的网络节点地址,目前默认为 Oceanus 网络的地址
****·** **REACT_APP_CONFLUX_COIN_ADDRESS:已部署的 Coin 智能合约地址. m" q& H1 A! v4 ^) ]
6.3.1 视图组件
视图组件在项目的 src/components 中,其中 App.js 为页面的主入口,负责页面的排列及合约信息的读取。
ConfluxNetwork.js
负责渲染 Conflux 网络信息,Node URL 的值为 .env 环境变量文件下的 REACT_APP_CONFLUX_NODE_RPC 设置的值(默认为 Oceanus 网络)。$ V. l5 d, ^' F; p0 b! R
ConfluxPortal.js
负责渲染 Conflux Portal 的连接信息,并提供了连接 Conflux Portal 的交互按钮。
****·** **connectConfluxPortal 调用 Conflux Portal 的 enable 方法启用 conflux (conflux portal 实例由浏览器插件注入到 windows.portal 中),完成 enable 后调用 getAccount 方法获取到 Portal 中的账户。7 R8 B; h! G) E$ _% b6 d
****·** **refreshBalance 调用 Conflux SDK 的 getBalance 方法来更新账户余额信息
****·** **renderPortalButton 根据当前不同的状态,渲染连接 Portal 的按钮
ConfluxContract.js
负责渲染 Conflux 合约信息,本项目中提供了 Coin 和 SponsorWhitelistControl 两个合约。8 c n9 w, ]1 k% q2 `
ConfluxContract.js 由三个组件组成,分别为:
****·** **ConfluxContract 负责根据传入的合约 abi 来渲染合约的信息,包括合约地址、合约方法和事件,合约提交的交互逻辑及显示执行后的结果
****·** **ContractMethods 负责渲染合约 abi 中的方法和事件的表单及相对应的按钮 V* D8 g- ]$ a) g/ R
****·** **ConfluxForm 负责根据方法或事件的 abi 来渲染输入表单
lib; y1 J/ H1 Z$ D
lib 在项目的 src/lib 中,这里的文件主要是为视图提供包括连接网络、构造交易、获取账户、读取合约等服务。
成为第一个吐槽的人