Hi 游客

更多精彩,请登录!

比特池塘 区块链技术 正文
一、简介
$ |7 j. o0 A1 V( {3 ^Conflux Studio 是一个帮助开发者快速开发 Conflux 智能合约的集成化开发环境。Conflux DApp 开发教程将使用 Conflux Studio 在 Oceanus 网络下开发一个简单的代币应用 Coin。. H: P8 h/ O! j0 {& [
通过这个开发教程,你将会学习到如何进行 Conflux 智能合约的编写、调用,配置智能合约的代付以及如何使用 Web 前端项目与智能合约进行交互,从而实现一个包含前端和智能合约的完整的 DApp。, e1 u8 J) e1 ?$ x4 Q; k7 p& U4 Y
二、准备工作
6 [5 c: W! i, X4 _8 l" [2.1 安装 IDE6 g  M6 K  Q. P/ T+ R
请在 GitHub 的下载页面
* t: v; P2 l, C2 K9 p3 a( n7 ~(github.com/ObsidianLabs/ConfluxStudio/releases) 下载 Conflux Studio。目前 Conflux Studio 支持 macOS 和 Linux 系统,请根据系统下载对应的版本。7 o+ _3 y9 Z7 Q/ Y3 w: ?
正确安装 Conflux Studio 并初次启动后,Conflux Studio 将显示欢迎页面,根据提示完成 Docker, Conflux Node 以及 Conflux Truffle 的下载、安装及启动。
% x$ z8 r/ D" d; J/ a2.2 创建钱包
( W5 @/ S* R3 r! B6 a2 Y完成所有的安装步骤后,首先需要创建钥匙对来完成后续的合约部署以及调用。* e6 {9 Q3 q) t0 b
在 Conflux Studio 的任意界面,点击应用左下?的钥匙图标,打开密钥管理器。点击 Create 按钮打开新钥匙对弹窗,输入钥匙对的名字并点击 Save 按钮。完成后将在密钥管理器中看到刚刚生成的钥匙对的地址。钥匙对由私钥和公钥组成,公钥在智能合约中也常被称作地址。
' t6 _2 c" `) S) {, g7 l: \/ D导出私钥可以通过点击每个地址后面的眼睛按钮打开查看私钥弹窗,弹窗显示地址以及私钥。后续教程中会需要通过管理器导出私钥。
  t$ w" M1 ^0 ]) U$ O为了顺利完成教程,首先需要创建三个钥匙对:6 h9 A7 M# [# E( q
**· **minter_key 用于 Coin 合约部署时的签名,是这个教程中最常使用的钥匙对
# t, ^& F* c" ^7 _0 i**· **receiver_key 用于 Coin 合约接收转账,将在后文中介绍转账时用到0 k1 \  B! X4 A: @+ u, n+ Q& c: V0 P
**· **sponsor_key 用于 Coin 合约代付功能,将在后文中介绍代付功能时用到+ C: O7 d. v" z9 E
2.3 连接 Conflux 网络4 _6 c+ U$ ^; H; d5 o/ p3 u
教程将在 Oceanus 网络进行合约的部署以及合约的调用。点击顶部 Network 标签的倒三角打开下拉菜单,点击选择 Oceanus 网络进行切换。9 d5 ?+ s) j2 M  |- b
切换完成后,可以在主页面中看到当前网络为 oceanus。页面左边包括了当前网络的节点 URL,Chain ID,TPS 信息,页面右边包含了当前网络区块的信息。
9 x+ p! l# P/ T% ^# M2 }: L2.4 申请测试 CFX
* p" m/ U- C0 [( w# T0 l: |点击顶部 Explorer 标签打开区块浏览器,并在地址栏粘贴钥匙对地址,可以在左边看到当前地址的 CFX 余额信息。# {9 R& g$ `4 h; k
在区块链的世界中,大家通常将申请测试 Token 的方式称为 faucet,目前在 Oceanus 网络下每次 faucet 申请到的 Token 为 100 CFX。
4 p4 b2 H1 f  K% X  {获取 CFX 的方式有两种方式:
, W, h2 k  C6 N· 输入地址后点击地址栏右边的水龙头按钮,Conflux Studio 将为地址自动申请 CFX;
7 G: o2 E8 B7 t" s& O) D8 `· 你也可以直接在浏览器中输入 wallet.confluxscan.io/faucet/dev/ask?address={address} 来申请 CFX;
2 U: I; q% _/ c" e! k9 r使用上述方法在 Conflux Studio 中为 minter_key 和 sponsor_key 申请 CFX Token。完成申请后,这两个账户上的余额将会从 0 CFX 更新为 100 CFX。# ?: {& B# M2 u. a7 e! `8 }
目前余额信息为:
* v( @/ A( W* M! b- ]4 ]# M5 f( J**· **minter_key 余额 100 CFX
" o! z7 G  r- f3 r% x; A**· **receiver_key 余额 0 CFX* _/ e! V/ {; ~' |$ t
**· **sponsor_key 余额 100 CFX
5 Z* i5 C6 N; \0 y' V# `' |+ I. @**三、智能合约创建项目 **9 j1 K3 o2 l7 B$ n" L% ]
3.1 创建项目7 n# p; t, G* d/ J9 N
点击顶部左边的 Project 标签切换至项目列表页面,点击页面中的 New 按钮打开项目创建窗口,输入项目的名称并选择 coin 模版,点击 Create Project 完成项目的创建。
' W( F& E& n0 k6 [" p! V: ?8 h) R. K3.2 合约代码9 I. v  C5 n! h& V
Coin 合约是一个简单的代币合约,其中:
2 V5 }4 f: ~% |, a6 A) T**· **通过 mint 方法可以增发代币数量" t  C4 v4 Q: V; f8 r' @+ L6 @; I
**· **通过 send 方法可以将一定数量的代币转账给别的用户,同时会在事件中记录下这笔转账的信息: Z8 G6 O) D2 c( q
**· **通过 balanceOf 方法可以查询到指定账户地址的代币余额
8 W9 o. W% k1 H8 F+ D6 G5 m**· **通过 add_privilege 方法可以为合约添加代付白名单
3 a/ d  b* J' P& e) L' Z**· **通过 remove_privilege 方法可以为合约移除代付白名单( W/ d8 S1 b7 D+ R1 O7 Y
Conflux 智能合约使用 Solidity 语言进行开发,打开目录下的 contracts/Coin.sol 文件,这个是本项目的核心代码:" w+ Y: m: G5 N& s
// 指定了 Solidity 的版本,通过 Pragmas(https://solidity.readthedocs.io/en/latest/layout-of-source-files.html#pragmas) 告诉编译器本代码可以兼容的版本为 0.5.0 到 0.7.0
0 }$ h; \! C/ Z. @( q( Jpragma solidity >=0.5.0 ' V, L% D: r  j$ G$ a
// 导入 SponsorWhitelistControl 合约
# E* P2 p* H' M# C: Z2 Pimport "./SponsorWhitelistControl.sol";! ]+ J; R' _1 X  u8 |
// 定义 Coin 的合约
& z3 r( S  A! B# ucontract Coin {+ ]! U( g; m- A# c8 t/ u
// 定义了两个 State Variables(https://solidity.readthedocs.io/en/latest/structure-of-a-contract.html#state-variables)5 q4 K+ v/ A: ~: [- E) E0 @8 P) R
address public minter;
! v% v2 y- i( @4 Kmapping (address => uint) private balances;
3 D; d5 Q& R) c: X// 使用 SponsorWhitelistControl 合约连接系统合约
# D( f4 o' ]7 M# X4 aSponsorWhitelistControl constant private SPONSOR = SponsorWhitelistControl(address(0x0888000000000000000000000000000000000001));. F; s, a0 Y2 G/ E. Q0 V; v
// 定义了 `Sent` 的事件,定义了 from / to / amount 列6 Z. M7 ?& g8 ]! W" \
event Sent(address from, address to, uint amount);
+ F* }0 N4 G0 \! g// Coin 合约的 constructor ,在 constructor 中指定了 minter 的地址* e; b# S. |5 V7 J. x
constructor() public {  E: S5 ~5 I% M; H. \/ v
    // msg.sender 为部署合约时签名的账户地址,将这个地址赋值给 minter7 [  a4 l  @! \. k: P; F0 [
    minter = msg.sender;
& z5 `: H' P2 }9 i, R/ b* B/ ^}- f) h" u5 C& f) I; ^- K
// 定义 mint 方法,通过此方法来增发代币" b/ o+ r6 w% Y. M
function mint(address receiver, uint amount) public {
, T3 ?8 l! l' u* P8 a5 P    require(msg.sender == minter);
: ~# o; r* ?+ d9 v# p4 u" U; s    require(amount }
4 y. G  o( o% R7 d/ k; E: d3.3 编译及部署合约1 B# A" Z6 q! |& Q: ], y; y  S
点击工具栏的 Build 按钮进行合约的编译,编译的结果将会保存在 build/Coin.json 文件中。
1 J, i& F1 C2 E9 L% q在部署合约前,首先需要确认在 Explorer 中选择合约部署所使用的地址,Conflux Studio 会使用这个地址将部署合约这笔交易进行签名(选择的方法为在 Explorer 的地址栏中输入地址)。在合约代码的 constructor 中,minter 被赋值为 msg.sender,这个 msg.sender 就是 Explorer 所选择的地址。1 C/ Y2 s( j7 h
在此我们选择 minter_key 作为部署合约的签名者。# O' g" Z" a5 v* x" r
点击工具栏的部署按钮进行部署,部署完成后,部署结果会在 deploys 的 JSON 文件中,在这个文件中可以在 contractCreated 中找到当前合约部署的地址,后文中使用 contract_addr 来代表这个合约地址。
4 |& O+ z, y$ x6 V0 u2 h四、调用合约% O; ^4 |; b9 U9 _
点击顶部的 Contract 标签切换至合约页面,在地址栏输入 contract_addr 地址并加载合约。
5 F; g: a* j4 X: Z* w合约页面由三个部分组成:
6 _' G# j, r5 V. o# m**· **左边为合约调用区域
& }' ?8 Y  |0 h  x' y+ q, c**· **中间为合约数据查询区域
3 J* s- Q% A; ]1 L  G' N· 右边为事件查询区域
0 a4 \, l# X+ \2 ^; w4.1 合约调用及查询
' @( f. t9 e1 s2 F+ I5 c* \7 l4.1.1 增发代币
" d5 v2 \+ s' j5 S点击合约调用的下拉菜单中选择 mint 方法,在下方的参数区域分别填入以下信息:3 u. N5 U- c" \8 j: F* A
· receiver 接收代币的地址。填入 minter_key 地址
7 h, U! F4 R$ J; s, L! l· amount 发行的代币总数。填入整数 1000, F  m, f! s% j. J2 |5 p
· Value 选填项,具体可查看 Value 详解。填 0 或者不填) L9 |8 }9 Y9 p; }7 n8 e) Y
· Signer 这笔交易的签名地址,如果没有开通代付功能,交易手续费将在这个账户地址中扣除,在合约代码中通过 msg.sender 获取到这个地址。填入 minter_key 地址
" s- a$ L, H3 o4 ]填写完成后点击执行按钮,Conflux Studio 将自动构造交易并推送到网络中。成功执行后可以在下方 Result 中看到这笔成功的交易。( U! d( w' U; o/ i, L
4.1.2 查询代币余额6 z7 @2 n8 ]! Z* w9 c
点击查询区域的下拉菜单并且选择 balanceOf 方法,这是在代码中定义的查询方法。在下方的 tokenOwner 填入 minter_key 地址并点击执行,就可以在下方的 Result 中看到 minter_key 账户的 Coin 代币的余额信息为 1000。使用同样方法可以查询到 receiver_key 账户的代币余额为 0。  ^6 M9 I' ]2 F) ?* Y1 y
4.1.3 转账代币$ L/ ?2 K5 ?! T
在合约调用区域选择 send 方法,在 Parameters 中分别填入:; a' f1 \, H; N5 X1 |
· receiver 收款人地址。填入 receiver_key 地址
2 q9 g6 O" s0 s9 D2 n- z6 I/ \· amount 转账的代币数量。填入整数 200
3 m% P% F: H  M/ l· Signer 这笔交易的签名地址,代币转出的数量将会在这个账户中扣除。填入 minter_key 地址,( L$ S/ i9 g  \' O3 B% A
点击执行完成转账,再次查询代币余额可以看到 minter_key 账户只剩下 800 代币,而 receiver_key 账户则从 0 变成了 200 代币。0 g1 W; x3 T" P' C) K$ O
4.1.4 Value 参数7 r2 i6 D+ p! z) Q
Conflux 智能合约的每个调用的方法都可以带上 Value 参数,这是一个可选的参数。如果带上了这个值,智能合约除了在执行这个方法的逻辑外,还会额外转 Value 中指定数量的 CFX token 到 receiver 账户,转账金额为 Value 中所填的值。有些智能合约的方法需要这个参数才可以完成调用,但是在 Coin 合约不需要这个参数。
. q% S1 {8 G9 ^后文中的代付功能将会使用到 Value 参数。
/ ]( s0 R+ N8 \; v4.2 查询事件% r5 E+ x; ^+ {0 s4 e& X; W
在事件区域选择 Sent 并点击执行,下方的 Event Logs 可以看到转账的记录。Sent 事件的列都是由代码中的 Sent 事件的参数来定义的(其中 epoch 为事件发生的时间,这个为系统默认列)。在代码中定义了 Sent 方法的参数为 from, to 和 amount,分别对应了这笔转账的发起者地址,接受者地址以及转账的数量。
3 Z6 Q! P( E" g: m) H6 N五、代付功能
+ @0 ~( u; g. |- D8 VConflux Studio 支持 Conflux 系统合约提供的代付功能。
/ Y* _) a& V1 P, e; o+ @通过系统合约可以为别的合约设置代付功能,系统合约提供给了四个方法:
1 s4 [9 }' a9 R0 ?* r* o& [· add_privilege 添加合约代付白名单,在代付白名单中的地址调用该合约的方法时不需要付手续费,费用由代付账户支付。其中添加特殊地址 0x0000000000000000000000000000000000000000 代表为所有调用该合约的地址代付费用4 b, X# N6 K: g
· remove_privilege 移除合约代付白名单
, \% J) k% `+ h4 s) j8 k4 i, Y( o8 H· set_sponsor_for_collateral 设置合约储存费 (collateral for storage) 的代付账户及代付金额" h9 n) b: ]# Z: i) b8 I+ y" D
· set_sponsor_for_gas 设置合约手续费 (gas fee) 的代付账户、代付金额及每笔交易代付金额上限9 f3 [. y% t' A; h, `
启用一个合约的代付需要设置代付的账户、代付金额及代付白名单。教程将会使用 Conflux Studio 通过系统合约设置代付账户及代付金额,通过 Coin 合约添加代付白名单。设置完成后,minter_key 账户调用 Coin 合约的方法时将不会被扣除手续费,手续费由 sponsor_key 账户代付。
0 m! [0 \) }, D1 d, }) y7 _5.1 设置代付账户及代付金额7 }3 H! `. m: I4 P; N
在 Conflux Studio 中访问系统合约地址* F, _0 b) t1 A  |
0x0888000000000000000000000000000000000001,在合约调用区域能看到前文中提及的四个设置代付的方法。0 D7 l5 R' [9 l4 C, A2 u
image选择 set_sponsor_for_collateral 方法,该方法有三个参数:- F& B: y2 S1 U7 z' M
· contract_addr 设置代付的合约地址。填入 contract_addr
2 V6 }! y& x! n8 B+ t0 @- c· Value 设置代付金额。填入整数 403 ~# H5 Y( z+ G& J7 E$ l9 b) d
· Signer 代付账户地址。填入 sponsor_key 地址
( i6 A8 x) H' ^$ j$ \( S填好以上参数并执行运行,系统合约将为 Coin 合约设置好储存费代付账户,此时 sponsor_key 账户将会被扣除 40 CFX。
( C5 X: L0 T# _6 ~选择 set_sponsor_for_gas 方法,该方法有四个参数:
, S% D% o" i5 t$ T' Y· contract_addr 设置代付的合约地址。填入 contract_addr
! \1 A9 g$ R" F2 h7 G* c- u* ]1 t, A; B· upper_bound 设置每笔交易代付的上限。填入 1000000000000
8 Z/ \9 O% L' T# Y; l6 J· Value 设置代付金额。填入整数 40
* P- d( R" ?$ v: k$ ]4 K* G6 z· Signer 代付账户地址。填入 sponsor_key 地址
/ r$ n. Q9 Q& E( R填好以上参数并再次执行运行,系统合约将为 Coin 合约设置好手续费代付账户,此时 sponsor_key 账户将会再次被扣除 40 CFX。6 `" k& q6 b! z$ \8 w' ], V& v. G) t8 c
完成这两个方法的调用后 Coin 合约代付账户便设置好了,sponsor_key 账户将为 Coin 合约的手续费和储存费各提供为 40 CFX Token 的代付服务。由于目前代付白名单中并没有账户地址,因此还需要添加白名单地址才能完成代付设置。
7 s: R  H, B3 c# l5.2 添加代付白名单( e- g% c! o$ P* ]2 }, K9 P+ g
在 Coin 合约中集成了设置代付白名单的方法,通过调用此方法可以添加或删除代付白名单。. J0 S8 t' ]7 J0 v
在 Conflux Studio 中访问 contract_addr 合约,选择 add_privilege 方法:
$ i9 P$ p6 b# W' Y, g! M* q0 L0 i' Q· account 添加白名单的地址。填入 minter_key 地址' y' R: p+ A: [  T
· Value 不填
+ y( I2 b: i1 \/ H  h· Signer 这笔交易的签名地址。填入 minter_key 地址
1 r! l- m0 D! k运行后就成功设置了代付白名单了,至此 Coin 合约的代付功能设置好了。
3 P2 _6 g: a# s. B* y" k5.3 代付测试" n  k3 @! c( B
在进行代付测试前,先查询并记录下 minter_key 账户的 CFX 余额。例如本教程中,minter_key 的初始余额为 97.6210937497093952 CFX。
% q( n7 u, r7 f回到 Coin 合约调用页面,再次调用 mint 方法并使用 minter_key 地址增发代币 1000,完成代币增发后再次查询 minter_key 的余额,仍然为 97.6210937497093952 CFX。
9 U; p- w- o0 [& p; |  U( ^可以看到增发代币的这笔交易,原本应该由 minter_key 账户支付的手续费,变成了由 sponsor_key 账户支付。* H# o3 c, R+ B+ S- z$ q
六、前端项目
* k' k; ]# x! p# c9 @0 z/ p前端项目源码可以前往 Conflux 前端。
2 h5 }+ l2 a8 [7 O: v. J8 S( M- @6.1 预备8 H" F% F! [* q! R4 z5 R
6.1.1 下载项目并安装依赖
; E$ b! d) E: P& ~  r: F· 下载前端项目:git clone github.com/ObsidianLabs/conflux-frontend-react1 m. a8 y8 z2 y2 q, l1 v! d0 j
****·** **使用 npm install 或者 yarn 进行项目依赖安装
# X# `( }9 _5 k) G. x& b, `6.1.2 Conflux Portal 的安装及配置
: A$ E; |6 N- I6 C1 _' [6 }Conflux Portal 是由 Conflux 提供的浏览器插件,目前提供了 Chrome 及 Firefox 的支持,用户可以使用 Conflux Portal 进行私钥的管理以及交易签名。
9 Z" ^* V0 Q6 R( `  \5 l8 G前往 Conflux Portal GitHub 下载安装。项目的源代码在 GitHub 中可以找到。
; [- x9 z: p& B# v2 ?在这里需要将 Conflux Studio 中生成的地址导入到 Conflux Portal 中。完成插件安装后,在 Conflux Portal 的页面中选择 Import,将 Conflux Studio 中的 minter_key 的私钥(在创建钱包章节中介绍了如何将私钥导出)粘贴到输入框中,点击 Import 按钮完成私钥导入。* M8 k3 U# ^" p0 ~
6.2 运行前端项目
, R8 B  I' o% A# i- b在运行项目之前,需要修改一些默认的环境变量。
3 H' P# X  N. W5 L8 E; Y5 J7 p在前面的教程中部署合约后会生成一个 contractCreated,这个值便是部署在网络中智能合约的地址。打开项目根目录并找到 .env 文件,这个文件提供了项目的环境变量,将 REACT_APP_CONFLUX_COIN_ADDRESS 的值修改为 contract_addr。% S4 X" }4 o# A0 ?- m
使用 yarn start 启动前端项目,开发服务器运行起来后会在浏览器中打开前端页面(如果没有打开,请在浏览器中访问 localhost:3000)。& l, g; y0 S  N7 X2 U" z
项目运行起来后,页面将显示四个卡片信息,分别为:
. n# ~. z0 z/ S: T- v****·** **左上角 Conflux 网络信息模块- l1 T/ R' [# N- ?) N. B7 V" @  v
****·** **右上角 Conflux Portal 模块
' T' G, {" x( w$ K; P8 V4 l0 A( q* \****·** **左下角 Coin 合约模块+ z4 ]5 l; @. P- Q
****·** **右下角 SponsorWhitelistControl 合约模块
; s" C' ]  x5 N: i  r7 Q6.2.1 连接 Conflux Portal
% |% O+ B) z" E  D4 {/ F0 T点击右上角组件中的 Connect to Conflux Portal 按钮,Conflux Portal 页面将被打开,输入密码和选择账户后完成连接。连接成功后,将会在按钮下看到当前连接的账户地址以及账户中的 CFX 余额。, |( w" V/ Y, p. d- d, a% M6 L
6.2.2 运行 Coin 合约代币增发和代币转账操作- Q% a) W9 u, l2 C
左下角的组件为 Coin 合约组件,可以通过这个组件调用代币增发和代币转账功能。9 O$ H) o' w9 D% T( n/ U6 E* w8 z) e
****·** **代币增发:选择 mint 方法并在 receiver 中填入增发地址 minter_key 地址和在 amount 中填入增发代币的数量 100,点击 Push Transaction,在弹出的 ConfluxPortal Notification 窗口中点击 Confirm 按钮来确认交易。- |. s( x- l6 @( F8 d, x
****·** **代币转账:选择 send 方法并在 receiver 中填入收款人地址 receiver_key 地址和在 amount 中转账代币的数量 20,点击 Push Transaction,在弹出的 ConfluxPortal Notification 窗口中点击 Confirm 按钮来确认交易。- k  C+ C/ V  p& {5 l
6.2.3 查看 Coin 合约中的余额- _0 F9 G5 S1 j$ W  G1 u; c
选择 balanceOf 方法并在 tokenOwner 输入框中填入查询的地址,点击 Query Data 按钮可以查询到账户的余额。$ a: z, A) T- z8 F+ |
6.2.4 查看 Sent 事件. o0 x4 N/ W! W- Z  L* A" N/ w
选择 Sent 事件并点击 Query Data 可以查询到转账操作所触发的转账事件的记录。. Z8 [3 W6 x+ O4 j
6.3 前端项目解析
0 h* g$ E. [& K8 J+ S, y项目使用 React 进行开发。主要由三大部分组成:视图组件、js-conflux-sdk 以及 Conflux Portal。4 Z0 E- ~1 H6 D/ I) z( G
项目根目录下的 .env 环境变量,在这里定义了两个环境变量,分别为:/ G/ G+ N3 Q4 X" }8 ^% d
****·** **REACT_APP_CONFLUX_NODE_RPC:Conflux 的网络节点地址,目前默认为 Oceanus 网络的地址" ~  b* r" l% j" T
****·** **REACT_APP_CONFLUX_COIN_ADDRESS:已部署的 Coin 智能合约地址
0 o) ~: w+ S9 q5 u& [: y7 Q2 [. z% n6.3.1 视图组件
! H! T5 E) ~& R7 q4 _8 b  A视图组件在项目的 src/components 中,其中 App.js 为页面的主入口,负责页面的排列及合约信息的读取。
, N6 b. q- v( }  u, @* EConfluxNetwork.js2 |* e  |& g, E  e4 y2 X) _4 o0 {
负责渲染 Conflux 网络信息,Node URL 的值为 .env 环境变量文件下的 REACT_APP_CONFLUX_NODE_RPC 设置的值(默认为 Oceanus 网络)。& R2 |) y4 H; q$ a! B
ConfluxPortal.js7 J! x1 i* D2 k( I; F
负责渲染 Conflux Portal 的连接信息,并提供了连接 Conflux Portal 的交互按钮。
" }/ D5 R/ q/ l4 P7 O* `" k****·** **connectConfluxPortal 调用 Conflux Portal 的 enable 方法启用 conflux (conflux portal 实例由浏览器插件注入到 windows.portal 中),完成 enable 后调用 getAccount 方法获取到 Portal 中的账户。- r: V1 m: w  W/ @
****·** **refreshBalance 调用 Conflux SDK 的 getBalance 方法来更新账户余额信息
2 B0 y" K2 k" F7 M****·** **renderPortalButton 根据当前不同的状态,渲染连接 Portal 的按钮- ?. ?  A/ @8 R, B" x$ h
ConfluxContract.js# x! ?: \: g/ Q. `- J4 @$ y
负责渲染 Conflux 合约信息,本项目中提供了 Coin 和 SponsorWhitelistControl 两个合约。
' m+ W4 f  d$ ]& hConfluxContract.js 由三个组件组成,分别为:
5 K0 l$ ^3 d% M0 H) d, i****·** **ConfluxContract 负责根据传入的合约 abi 来渲染合约的信息,包括合约地址、合约方法和事件,合约提交的交互逻辑及显示执行后的结果& \8 H9 `' l( O
****·** **ContractMethods 负责渲染合约 abi 中的方法和事件的表单及相对应的按钮
% v+ D' F9 ~& |7 L****·** **ConfluxForm 负责根据方法或事件的 abi 来渲染输入表单3 d$ D6 z6 G  D  w
lib( M" D9 S4 Y0 X9 i6 r
lib 在项目的 src/lib 中,这里的文件主要是为视图提供包括连接网络、构造交易、获取账户、读取合约等服务。
BitMere.com 比特池塘系信息发布平台,比特池塘仅提供信息存储空间服务。
声明:该文观点仅代表作者本人,本文不代表比特池塘立场,且不构成建议,请谨慎对待。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

成为第一个吐槽的人

华胥 初中生
  • 粉丝

    0

  • 关注

    0

  • 主题

    13