Conflux DApp 開(kāi)發(fā)教程
對(duì)本教程有任何疑問(wèn)或建議可以在 GitHub 給我們留言。
簡(jiǎn)介
Conflux DApp 開(kāi)發(fā)教程將使用 Conflux Studio 在 Oceanus 網(wǎng)絡(luò)下開(kāi)發(fā)一個(gè)簡(jiǎn)單的代幣應(yīng)用 Coin。
通過(guò)這個(gè)開(kāi)發(fā)教程,你將會(huì)學(xué)習(xí)到如何進(jìn)行 Conflux 智能合約的編寫(xiě)、調(diào)用,配置智能合約的代付以及如何使用 Web 前端項(xiàng)目與智能合約進(jìn)行交互,從而實(shí)現(xiàn)一個(gè)包含前端和智能合約的完整的 DApp。
在閱讀教程中遇到任何問(wèn)題,歡迎在 Issues 中向我們反饋。
準(zhǔn)備工作
安裝 IDE
請(qǐng)?jiān)?GitHub 下載頁(yè)面下載 Conflux Studio。目前 Conflux Studio 支持 macOS 和 Linux 系統(tǒng),請(qǐng)根據(jù)系統(tǒng)下載對(duì)應(yīng)的版本。
正確安裝 Conflux Studio 并初次啟動(dòng)后,Conflux Studio 將顯示歡迎頁(yè)面,根據(jù)提示完成 Docker, Conflux Node 以及 Conflux Truffle 的下載、安裝及啟動(dòng)。
創(chuàng)建錢(qián)包
完成所有的安裝步驟后,首先需要?jiǎng)?chuàng)建鑰匙對(duì)來(lái)完成后續(xù)的合約部署以及調(diào)用。
在 Conflux Studio 的任意界面,點(diǎn)擊應(yīng)用左下?的鑰匙圖標(biāo),打開(kāi)密鑰管理器。點(diǎn)擊 Create 按鈕打開(kāi)新鑰匙對(duì)彈窗,輸入鑰匙對(duì)的名字并點(diǎn)擊 Save 按鈕。完成后將在密鑰管理器中看到剛剛生成的鑰匙對(duì)的地址。鑰匙對(duì)由私鑰和公鑰組成,公鑰在智能合約中也常被稱(chēng)作地址。
導(dǎo)出私鑰可以通過(guò)點(diǎn)擊每個(gè)地址后面的眼睛按鈕打開(kāi)查看私鑰彈窗,彈窗顯示地址以及私鑰。后續(xù)教程中會(huì)需要通過(guò)管理器導(dǎo)出私鑰。
為了順利完成教程,首先需要?jiǎng)?chuàng)建三個(gè)鑰匙對(duì):
-
minter_key
用于 Coin 合約部署時(shí)的簽名,是這個(gè)教程中最常使用的鑰匙對(duì)
-
receiver_key
用于 Coin 合約接收轉(zhuǎn)賬,將在后文中介紹轉(zhuǎn)賬時(shí)用到
-
sponsor_key
用于 Coin 合約代付功能,將在后文中介紹代付功能時(shí)用到
連接 Conflux 網(wǎng)絡(luò)
教程將在 Oceanus 網(wǎng)絡(luò)進(jìn)行合約的部署以及合約的調(diào)用。點(diǎn)擊頂部 Network 標(biāo)簽的倒三角打開(kāi)下拉菜單,點(diǎn)擊選擇 Oceanus 網(wǎng)絡(luò)進(jìn)行切換。
切換完成后,可以在主頁(yè)面中看到當(dāng)前網(wǎng)絡(luò)為 oceanus。頁(yè)面左邊包括了當(dāng)前網(wǎng)絡(luò)的節(jié)點(diǎn) URL,Chain ID,TPS 信息,頁(yè)面右邊包含了當(dāng)前網(wǎng)絡(luò)區(qū)塊的信息。
申請(qǐng)測(cè)試 CFX
點(diǎn)擊頂部 Explorer 標(biāo)簽打開(kāi)區(qū)塊瀏覽器,并在地址欄粘貼鑰匙對(duì)地址,可以在左邊看到當(dāng)前地址的 CFX 余額信息。
在區(qū)塊鏈的世界中,大家通常將申請(qǐng)測(cè)試 Token 的方式稱(chēng)為 faucet,目前在 Oceanus 網(wǎng)絡(luò)下每次 faucet 申請(qǐng)到的 Token 為 100 CFX。
獲取 CFX 的方式有兩種方式:
-
輸入地址后點(diǎn)擊地址欄右邊的水龍頭按鈕,Conflux Studio 將為地址自動(dòng)申請(qǐng) CFX
-
你也可以直接在瀏覽器中輸入
https://wallet.confluxscan.io/faucet/dev/ask?address={address}
來(lái)申請(qǐng) CFX
使用上述方法在 Conflux Studio 中為 minter_key
和 sponsor_key
申請(qǐng) CFX Token。完成申請(qǐng)后,這兩個(gè)賬戶(hù)上的余額將會(huì)從 0 CFX 更新為 100 CFX。
目前余額信息為:
-
minter_key
余額 100 CFX
-
receiver_key
余額 0 CFX
-
sponsor_key
余額 100 CFX
智能合約
創(chuàng)建項(xiàng)目
點(diǎn)擊頂部左邊的 Project 標(biāo)簽切換至項(xiàng)目列表頁(yè)面,點(diǎn)擊頁(yè)面中的 New 按鈕打開(kāi)項(xiàng)目創(chuàng)建窗口,輸入項(xiàng)目的名稱(chēng)并選擇 coin 模版,點(diǎn)擊 Create Project 完成項(xiàng)目的創(chuàng)建。
合約代碼
Coin 合約是一個(gè)簡(jiǎn)單的代幣合約,其中:
-
通過(guò) mint 方法可以增發(fā)代幣數(shù)量
-
通過(guò) send 方法可以將一定數(shù)量的代幣轉(zhuǎn)賬給別的用戶(hù),同時(shí)會(huì)在事件中記錄下這筆轉(zhuǎn)賬的信息
-
通過(guò) balanceOf 方法可以查詢(xún)到指定賬戶(hù)地址的代幣余額
-
通過(guò) add_privilege 方法可以為合約添加代付白名單
-
通過(guò) remove_privilege 方法可以為合約移除代付白名單
Conflux 智能合約使用 Solidity 語(yǔ)言進(jìn)行開(kāi)發(fā),打開(kāi)目錄下的 contracts/Coin.sol
文件,這個(gè)是本項(xiàng)目的核心代碼:
// 指定了 Solidity 的版本,通過(guò) Pragmas(https://solidity.readthedocs.io/en/latest/layout-of-source-files.html#pragmas) 告訴編譯器本代碼可以兼容的版本為 0.5.0 到 0.7.0
pragma solidity >=0.5.0 <0.7.0;
// 導(dǎo)入 SponsorWhitelistControl 合約
import "./SponsorWhitelistControl.sol";
// 定義 Coin 的合約
contract Coin {
// 定義了兩個(gè) State Variables(https://solidity.readthedocs.io/en/latest/structure-of-a-contract.html#state-variables)
address public minter;
mapping (address => uint) private balances;
// 使用 SponsorWhitelistControl 合約連接系統(tǒng)合約
SponsorWhitelistControl constant private SPONSOR = SponsorWhitelistControl(address(0x0888000000000000000000000000000000000001));
// 定義了 `Sent` 的事件,定義了 from / to / amount 列
event Sent(address from, address to, uint amount);
// Coin 合約的 constructor ,在 constructor 中指定了 minter 的地址
constructor() public {
// msg.sender 為部署合約時(shí)簽名的賬戶(hù)地址,將這個(gè)地址賦值給 minter
minter = msg.sender;
}
// 定義 mint 方法,通過(guò)此方法來(lái)增發(fā)代幣
function mint(address receiver, uint amount) public {
require(msg.sender == minter);
require(amount < 1e60);
balances[receiver] += amount;
}
// 定義 send 方法,通過(guò)此方法可以給別的賬戶(hù)轉(zhuǎn)賬代幣
function send(address receiver, uint amount) public {
require(amount <= balances[msg.sender], "Insufficient balance.");
balances[msg.sender] -= amount;
balances[receiver] += amount;
// 通過(guò) emit 觸發(fā) Sent 事件,記錄這筆轉(zhuǎn)賬的信息
emit Sent(msg.sender, receiver, amount);
}
// 定義 balanceOf 方法,這是個(gè) view 類(lèi)型的方法,用于查詢(xún)賬戶(hù)余額
function balanceOf(address tokenOwner) public view returns(uint balance){
return balances[tokenOwner];
}
// 定義了 add_privilege 方法,調(diào)用系統(tǒng)合約 add_privilege 方法添加地址到代付白名單
function add_privilege(address account) public payable {
address[] memory a = new address[](1);
a[0] = account;
SPONSOR.add_privilege(a);
}
// 定義了 remove_privilege 方法,調(diào)用系統(tǒng)合約 remove_privilege 從合約代付白名單中移除地址
function remove_privilege(address account) public payable {
address[] memory a = new address[](1);
a[0] = account;
SPONSOR.remove_privilege(a);
}
}
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
-
22
-
23
-
24
-
25
-
26
-
27
-
28
-
29
-
30
-
31
-
32
-
33
-
34
-
35
-
36
-
37
-
38
-
39
-
40
-
41
-
42
-
43
-
44
-
45
-
46
-
47
-
48
-
49
-
50
-
51
-
52
-
53
-
54
-
55
-
56
-
57
-
58
-
59
編譯及部署合約
點(diǎn)擊工具欄的 Build 按鈕進(jìn)行合約的編譯,編譯的結(jié)果將會(huì)保存在 build/Coin.json
文件中。

在部署合約前,首先需要確認(rèn)在 Explorer 中選擇合約部署所使用的地址,Conflux Studio 會(huì)使用這個(gè)地址將部署合約這筆交易進(jìn)行簽名(選擇的方法為在 Explorer 的地址欄中輸入地址)。在合約代碼的 constructor
中,minter
被賦值為 msg.sender
,這個(gè) msg.sender
就是 Explorer 所選擇的地址。
在此我們選擇 minter_key
作為部署合約的簽名者。

點(diǎn)擊工具欄的部署按鈕進(jìn)行部署,部署完成后,部署結(jié)果會(huì)在 deploys
的 JSON 文件中,在這個(gè)文件中可以在 contractCreated
中找到當(dāng)前合約部署的地址,后文中使用 contract_addr
來(lái)代表這個(gè)合約地址。
調(diào)用合約
點(diǎn)擊頂部的 Contract 標(biāo)簽切換至合約頁(yè)面,在地址欄輸入 contract_addr
地址并加載合約。
合約頁(yè)面由三個(gè)部分組成:
-
左邊為合約調(diào)用區(qū)域
-
中間為合約數(shù)據(jù)查詢(xún)區(qū)域
-
右邊為事件查詢(xún)區(qū)域
合約調(diào)用及查詢(xún)
增發(fā)代幣
點(diǎn)擊合約調(diào)用的下拉菜單中選擇 mint 方法,在下方的參數(shù)區(qū)域分別填入以下信息:
-
receiver 接收代幣的地址。填入
minter_key
地址
-
amount 發(fā)行的代幣總數(shù)。填入整數(shù) 1000
-
Value 選填項(xiàng),具體可查看 Value 詳解。填 0 或者不填
-
Signer 這筆交易的簽名地址,如果沒(méi)有開(kāi)通代付功能,交易手續(xù)費(fèi)將在這個(gè)賬戶(hù)地址中扣除,在合約代碼中通過(guò)
msg.sender
獲取到這個(gè)地址。填入 minter_key
地址
填寫(xiě)完成后點(diǎn)擊執(zhí)行按鈕,Conflux Studio 將自動(dòng)構(gòu)造交易并推送到網(wǎng)絡(luò)中。成功執(zhí)行后可以在下方 Result 中看到這筆成功的交易。
查詢(xún)代幣余額
點(diǎn)擊查詢(xún)區(qū)域的下拉菜單并且選擇 balanceOf 方法,這是在代碼中定義的查詢(xún)方法。在下方的 tokenOwner 填入 minter_key
地址并點(diǎn)擊執(zhí)行,就可以在下方的 Result 中看到 minter_key
賬戶(hù)的 Coin 代幣的余額信息為 1000。使用同樣方法可以查詢(xún)到 receiver_key
賬戶(hù)的代幣余額為 0。
轉(zhuǎn)賬代幣
在合約調(diào)用區(qū)域選擇 send 方法,在 Parameters 中分別填入:
-
receiver 收款人地址。填入
receiver_key
地址
-
amount 轉(zhuǎn)賬的代幣數(shù)量。填入整數(shù) 200
-
Signer 這筆交易的簽名地址,代幣轉(zhuǎn)出的數(shù)量將會(huì)在這個(gè)賬戶(hù)中扣除。填入
minter_key
地址,
點(diǎn)擊執(zhí)行完成轉(zhuǎn)賬,再次查詢(xún)代幣余額可以看到 minter_key
賬戶(hù)只剩下 800 代幣,而 receiver_key
賬戶(hù)則從 0 變成了 200 代幣。
Value 參數(shù)
Conflux 智能合約的每個(gè)調(diào)用的方法都可以帶上 Value 參數(shù),這是一個(gè)可選的參數(shù)。如果帶上了這個(gè)值,智能合約出了在執(zhí)行這個(gè)方法的邏輯外,還會(huì)額外轉(zhuǎn) Value 中指定數(shù)量的 CFX token 到 receiver 賬戶(hù),轉(zhuǎn)賬金額為 Value 中所填的值。有些智能合約的方法需要這個(gè)參數(shù)才可以完成調(diào)用,但是在 Coin 合約不需要這個(gè)參數(shù)。
后文中的代付功能將會(huì)使用到 Value 參數(shù)。
查詢(xún)事件
在事件區(qū)域選擇 Sent 并點(diǎn)擊執(zhí)行,下方的 Event Logs 可以看到轉(zhuǎn)賬的記錄。Sent 事件的列都是由代碼中的 Sent 事件的參數(shù)來(lái)定義的(其中 epoch 為事件發(fā)生的時(shí)間,這個(gè)為系統(tǒng)默認(rèn)列)。在代碼中定義了 Sent
方法的參數(shù)為 from
, to
和 amount
,分別對(duì)應(yīng)了這筆轉(zhuǎn)賬的發(fā)起者地址,接受者地址以及轉(zhuǎn)賬的數(shù)量。
代付功能
Conflux Studio 支持 Conflux 系統(tǒng)合約提供的代付功能。
通過(guò)系統(tǒng)合約可以為別的合約設(shè)置代付功能,系統(tǒng)合約提供給了四個(gè)方法:
-
add_privilege
添加合約代付白名單,在代付白名單中的地址調(diào)用該合約的方法時(shí)不需要付手續(xù)費(fèi),費(fèi)用由代付賬戶(hù)支付。其中添加特殊地址 0x0000000000000000000000000000000000000000
代表為所有調(diào)用該合約的地址代付費(fèi)用
-
remove_privilege
移除合約代付白名單
-
set_sponsor_for_collateral
設(shè)置合約儲(chǔ)存費(fèi) (collateral for storage) 的代付賬戶(hù)及代付金額
-
set_sponsor_for_gas
設(shè)置合約手續(xù)費(fèi) (gas fee) 的代付賬戶(hù)、代付金額及每筆交易代付金額上限
啟用一個(gè)合約的代付需要設(shè)置代付的賬戶(hù)、代付金額的及代付白名單。教程將會(huì)使用 Conflux Studio 通過(guò)系統(tǒng)合約設(shè)置代付賬戶(hù)及代付金額,通過(guò) Coin 合約添加代付白名單。設(shè)置完成后,minter_key
賬戶(hù)調(diào)用 Coin 合約的方法時(shí)將不會(huì)被扣除手續(xù)費(fèi),手續(xù)費(fèi)由 sponsor_key
賬戶(hù)代付。
設(shè)置代付賬戶(hù)及代付金額
在 Conflux Studio 中訪(fǎng)問(wèn)系統(tǒng)合約地址 0x0888000000000000000000000000000000000001
,在合約調(diào)用區(qū)域能看到前文中提及的四個(gè)設(shè)置代付的方法。
選擇 set_sponsor_for_collateral
方法,該方法有三個(gè)參數(shù):
-
contract_addr 設(shè)置代付的合約地址。填入
contract_addr
-
Value 設(shè)置代付金額。填入整數(shù) 40
-
Signer 代付賬戶(hù)地址。填入
sponsor_key
地址

填好以上參數(shù)并執(zhí)行運(yùn)行,系統(tǒng)合約將為 Coin 合約設(shè)置好儲(chǔ)存費(fèi)代付賬戶(hù),此時(shí) sponsor_key
賬戶(hù)將會(huì)被扣除 40 CFX。
選擇 set_sponsor_for_gas
方法,該方法有四個(gè)參數(shù):
-
contract_addr 設(shè)置代付的合約地址。填入
contract_addr
-
upper_bound 設(shè)置每筆交易代付的上限。填入 1000000000000
-
Value 設(shè)置代付金額。填入整數(shù) 40
-
Signer 代付賬戶(hù)地址。填入
sponsor_key
地址

填好以上參數(shù)并再次執(zhí)行運(yùn)行,系統(tǒng)合約將為 Coin 合約設(shè)置好手續(xù)費(fèi)代付賬戶(hù),此時(shí) sponsor_key
賬戶(hù)將會(huì)再次被扣除 40 CFX。
完成這兩個(gè)方法的調(diào)用后 Coin 合約代付賬戶(hù)便設(shè)置好了,sponsor_key
賬戶(hù)將為 Coin 合約的手續(xù)費(fèi)和儲(chǔ)存費(fèi)各提供為 40 CFX Token 的代付服務(wù)。由于目前代付白名單中并沒(méi)有賬戶(hù)地址,因此還需要添加白名單地址才能完成代付設(shè)置。
添加代付白名單
在 Coin 合約中集成了設(shè)置代付白名單的方法,通過(guò)調(diào)用此方法可以添加或刪除代付白名單。
在 Conflux Studio 中訪(fǎng)問(wèn) contract_addr
合約,選擇 add_privilege 方法:
-
account 添加白名單的地址。填入
minter_key
地址
-
Value 不填
-
Signer 這筆交易的簽名地址。填入
minter_key
地址
運(yùn)行后就成功設(shè)置了代付白名單了,至此 Coin 合約的代付功能設(shè)置好了。
代付測(cè)試
在進(jìn)行代付測(cè)試前,先查詢(xún)并記錄下 minter_key
賬戶(hù)的 CFX 余額。例如本教程中,minter_key
的初始余額為 97.6210937497093952 CFX。
回到 Coin 合約調(diào)用頁(yè)面,再次調(diào)用 mint 方法并使用 minter_key
地址增發(fā)代幣 1000,完成代幣增發(fā)后再次查詢(xún) minter_key
的余額,仍然為 97.6210937497093952 CFX。
可以看到增發(fā)代幣的這筆交易,原本應(yīng)該由 minter_key
賬戶(hù)支付的手續(xù)費(fèi),變成了由 sponsor_key
賬戶(hù)支付。
前端項(xiàng)目
前端項(xiàng)目源碼可以前往 Conflux 前端。
預(yù)備
下載項(xiàng)目并安裝依賴(lài)
-
下載前端項(xiàng)目:
git clone https://github.com/ObsidianLabs/conflux-frontend-react
-
使用
npm install
或者 yarn
進(jìn)行項(xiàng)目依賴(lài)安裝
Conflux Portal 的安裝及配置
Conflux Portal 是由 Conflux 提供的瀏覽器插件,目前提供了 Chrome 及 Firefox 的支持,用戶(hù)可以使用 Conflux Portal 進(jìn)行私鑰的管理以及交易簽名。
前往 Conflux Portal GitHub 下載安裝。項(xiàng)目的源代碼在 GitHub 中可以找到。
在這里需要將 Conflux Studio 中生成的地址導(dǎo)入到 Conflux Portal 中。完成插件安裝后,在 Conflux Portal 的頁(yè)面中選擇 Import,將 Conflux Studio 中的 minter_key
的私鑰(在創(chuàng)建錢(qián)包章節(jié)中介紹了如何將私鑰導(dǎo)出)粘貼到輸入框中,點(diǎn)擊 Import 按鈕完成私鑰導(dǎo)入。
運(yùn)行前端項(xiàng)目
在運(yùn)行項(xiàng)目之前,需要修改一些默認(rèn)的環(huán)境變量。
在前面的教程中部署合約后會(huì)生成一個(gè) contractCreated
,這個(gè)值便是部署在網(wǎng)絡(luò)中智能合約的地址。打開(kāi)項(xiàng)目根目錄并找到 .env
文件,這個(gè)文件提供了項(xiàng)目的環(huán)境變量,將 REACT_APP_CONFLUX_COIN_ADDRESS
的值修改為 contract_addr
。
使用 yarn start
啟動(dòng)前端項(xiàng)目,開(kāi)發(fā)服務(wù)器運(yùn)行起來(lái)后會(huì)在瀏覽器中打開(kāi)前端頁(yè)面(如果沒(méi)有打開(kāi),請(qǐng)?jiān)跒g覽器中訪(fǎng)問(wèn) http://localhost:3000)。
項(xiàng)目運(yùn)行起來(lái)后,頁(yè)面將顯示四個(gè)卡片信息,分別為
-
左上角 Conflux 網(wǎng)絡(luò)信息模塊
-
右上角 Conflux Portal 模塊
-
左下角 Coin 合約模塊
-
右下角 SponsorWhitelistControl 合約模塊
連接 Conflux Portal
點(diǎn)擊右上角組件中的 Connect to Conflux Portal 按鈕,Conflux Portal 頁(yè)面將被打開(kāi),輸入密碼和選擇賬戶(hù)后完成連接。連接成功后,將會(huì)在按鈕下看到當(dāng)前連接的賬戶(hù)地址以及賬戶(hù)中的 CFX 余額。
運(yùn)行 Coin 合約代幣增發(fā)和代幣轉(zhuǎn)賬操作
左下角的組件為 Coin 合約組件,可以通過(guò)這個(gè)組件調(diào)用代幣增發(fā)和代幣轉(zhuǎn)賬功能。
-
代幣增發(fā):選擇 mint 方法并在 receiver 中填入增發(fā)地址 minter_key
地址和在 amount 中填入增發(fā)代幣的數(shù)量 100,點(diǎn)擊 Push Transaction,在彈出的 ConfluxPortal Notification 窗口中點(diǎn)擊 Confirm 按鈕來(lái)確認(rèn)交易。
-
代幣轉(zhuǎn)賬:選擇 send 方法并在 receiver 中填入收款人地址 receiver_key
地址和在 amount 中轉(zhuǎn)賬代幣的數(shù)量 20,點(diǎn)擊 Push Transaction,在彈出的 ConfluxPortal Notification 窗口中點(diǎn)擊 Confirm 按鈕來(lái)確認(rèn)交易。
查看 Coin 合約中的余額
選擇 balanceOf 方法并在 tokenOwner 輸入框中填入查詢(xún)的地址,點(diǎn)擊 Query Data 按鈕可以查詢(xún)到賬戶(hù)的余額。
查看 Sent 事件
選擇 Sent 事件并點(diǎn)擊 Query Data 可以查詢(xún)到轉(zhuǎn)賬操作所觸發(fā)的轉(zhuǎn)賬事件的記錄。
前端項(xiàng)目解析
項(xiàng)目使用 React 進(jìn)行開(kāi)發(fā)。主要由三大部分組成:視圖組件、js-conflux-sdk 以及 Conflux Portal。
項(xiàng)目根目錄下的 .env
環(huán)境變量,在這里定義了兩個(gè)環(huán)境變量,分別為
-
REACT_APP_CONFLUX_NODE_RPC
:Conflux 的網(wǎng)絡(luò)節(jié)點(diǎn)地址,目前默認(rèn)為 Oceanus 網(wǎng)絡(luò)的地址
-
REACT_APP_CONFLUX_COIN_ADDRESS
:已部署的 Coin 智能合約地址
視圖組件
視圖組件在項(xiàng)目的 src/components
中,其中 App.js
為頁(yè)面的主入口,負(fù)責(zé)頁(yè)面的排列及合約信息的讀取。
ConfluxNetwork.js
負(fù)責(zé)渲染 Conflux 網(wǎng)絡(luò)信息,Node URL
的值為 .env
環(huán)境變量文件下的 REACT_APP_CONFLUX_NODE_RPC
設(shè)置的值(默認(rèn)為 Oceanus 網(wǎng)絡(luò))。
ConfluxPortal.js
負(fù)責(zé)渲染 Conflux Portal 的連接信息,并提供了連接 Conflux Portal 的交互按鈕。
-
connectConfluxPortal
調(diào)用 Conflux Portal 的 enable
方法啟用 conflux (conflux portal 實(shí)例由瀏覽器插件注入到 windows.portal 中),完成 enable
后調(diào)用 getAccount
方法獲取到 Portal 中的賬戶(hù)。
-
refreshBalance
調(diào)用 Conflux SDK 的 getBalance
方法來(lái)更新賬戶(hù)余額信息
-
renderPortalButton
根據(jù)當(dāng)前不同的狀態(tài),渲染連接 Portal 的按鈕
ConfluxContract.js
負(fù)責(zé)渲染 Conflux 合約信息,本項(xiàng)目中提供了 Coin 和 SponsorWhitelistControl 兩個(gè)合約。
ConfluxContract.js
由三個(gè)組件組成,分別為:
-
ConfluxContract
負(fù)責(zé)根據(jù)傳入的合約 abi 來(lái)渲染合約的信息,包括合約地址、合約方法和事件,合約提交的交互邏輯及顯示執(zhí)行后的結(jié)果
-
ContractMethods
負(fù)責(zé)渲染合約 abi 中的方法和事件的表單及相對(duì)應(yīng)的按鈕
-
ConfluxForm
負(fù)責(zé)根據(jù)方法或事件的 abi 來(lái)渲染輸入表單
lib
lib 在項(xiàng)目的 src/lib
中,這里的文件主要是為視圖提供包括連接網(wǎng)絡(luò)、構(gòu)造交易、獲取賬戶(hù)、讀取合約等服務(wù)。
conflux.js
conflux.js
是 js-conflux-sdk
的封裝。js-conflux-sdk
是由 Conflux 提供的 JavaScript SDK,本前端項(xiàng)目使用 SDK 來(lái)連接 Conflux 網(wǎng)絡(luò),和合約進(jìn)行交互以及構(gòu)造合約中的實(shí)例。
conflux-portal.js
conflux-portal.js
是 Conflux Portal 的封裝,本前端項(xiàng)目通過(guò)調(diào)用瀏覽器插件來(lái)完成交易的簽名。調(diào)用 Conflux Portal 提供的 enable
方法可以啟動(dòng)項(xiàng)目和 Conflux Portal 的連接(需要提前檢查瀏覽器是否正確安裝插件,在 constructor 中通過(guò)檢查 window.conflux
是否為空來(lái)判斷)。conflux-portal.js
提供了獲取賬戶(hù) getAccount
和發(fā)送交易 sendTransaction
兩個(gè)主要的方法。
abi
lib/abi
文件夾下提供了兩個(gè) json 文件,分別為 Coin.json
和 SponsorWhitelistControl.json
,這兩個(gè)文件是構(gòu)造合約所需要使用的 abi 文件。
總結(jié)
在本開(kāi)發(fā)教程中,我們學(xué)習(xí)了如何使用 Conflux Studio 來(lái)完成一個(gè)完整的 Coin DApp 開(kāi)發(fā),其中包括了:
-
使用鑰匙對(duì)管理器創(chuàng)建賬戶(hù)及導(dǎo)出賬戶(hù)私鑰
-
切換 Oceanus 網(wǎng)絡(luò),查看網(wǎng)絡(luò)信息
-
賬戶(hù)申請(qǐng) CFX Token
-
創(chuàng)建、編譯并部署項(xiàng)目
-
解析 Coin 合約代碼,學(xué)習(xí)如何編寫(xiě)合約的讀寫(xiě)方法及事件
-
使用合約瀏覽器調(diào)用 Coin 合約的代幣增發(fā)、轉(zhuǎn)賬、查詢(xún)余額及查詢(xún)事件
-
設(shè)置并使用智能合約的代付功能
-
將私鑰導(dǎo)入 Conflux Portal 并連接前端項(xiàng)目
-
在前端項(xiàng)目中調(diào)用 Coin 合約的代幣增發(fā)、轉(zhuǎn)賬、查詢(xún)余額及查詢(xún)事件
-
解析前端項(xiàng)目代碼,學(xué)習(xí)如何通過(guò) Conflux Portal 和 Conflux JavaScript SDK 連接網(wǎng)絡(luò)并實(shí)現(xiàn)交易
關(guān)于 Conflux Bounty
Conflux 基金會(huì)為了鼓勵(lì)用戶(hù)參與生態(tài)建設(shè),提供了 Conflux Bounty 賞金平臺(tái)。通過(guò)完成 Bounty 賞金平臺(tái)發(fā)布的各項(xiàng)任務(wù),參與者可以獲得 FC (Fans Token) 作為獎(jiǎng)勵(lì)。
FC 的價(jià)值
FC,全稱(chēng) Fans Coin,是由 Conflux 基金會(huì)與社區(qū)成員共同研發(fā)的生態(tài)代幣,用于記錄和感謝對(duì) Conflux 生態(tài)建設(shè)做出貢獻(xiàn)的社區(qū)成員。FC 目前在 Oceanus 上運(yùn)行,Conflux 基金會(huì)承諾,在主網(wǎng)上線(xiàn)后,鎖定和未鎖定的 FC 都可以與主網(wǎng) CFX 進(jìn)行 1:1 承兌,以此保障所有社區(qū)成員的勞動(dòng)成果都可以獲得獎(jiǎng)勵(lì)。
FC 賞金分配方案會(huì)展示在賞金任務(wù)詳情頁(yè)中,包括最高獎(jiǎng)金數(shù)量、獎(jiǎng)金分配人數(shù)、獎(jiǎng)金數(shù)量分布、排行名次確定方式等信息。賬號(hào)余額中的賞金獎(jiǎng)勵(lì)可以隨時(shí)申請(qǐng)?zhí)岈F(xiàn)至 Conflux 錢(qián)包。Conflux 團(tuán)隊(duì)會(huì)對(duì)所有的提現(xiàn)申請(qǐng)進(jìn)行審核。
對(duì)于已經(jīng)通過(guò)的提現(xiàn)申請(qǐng),Conflux 團(tuán)隊(duì)會(huì)在每周二中午 12 點(diǎn)(如遇節(jié)假日,往后順延至下一個(gè)工作日)進(jìn)行提幣操作。完成提幣操作后,您的 Conflux 錢(qián)包將會(huì)收到您提現(xiàn)的賞金獎(jiǎng)勵(lì)。
Bounty 的價(jià)值
Conflux Bounty (https://bounty.conflux-chain.org) 的宗旨是為每一個(gè)通證找到價(jià)值。Bounty 分為幾個(gè)板塊:技術(shù)、品牌、社群、資源、其他等。
-
技術(shù)板塊:分為產(chǎn)品、SDK、教程、開(kāi)發(fā)、測(cè)試等;主要是獎(jiǎng)勵(lì)社區(qū)的一些技術(shù)資源貢獻(xiàn)者。
-
品牌板塊:分為文案、設(shè)計(jì)、視頻、媒體、推廣等;主要是獎(jiǎng)勵(lì)在各大網(wǎng)絡(luò)平臺(tái)分享 Conflux 的各種最新動(dòng)態(tài),擴(kuò)大 Conflux 的生態(tài)影響力的活躍貢獻(xiàn)者;
-
社群板塊:分為活動(dòng)、推廣等;主要是獎(jiǎng)勵(lì)舉辦各種 Conflux 相關(guān)線(xiàn)上線(xiàn)下活動(dòng),幫助解答社群?jiǎn)栴},活躍日常氣氛等。
-
資源板塊:分為政務(wù)、商務(wù)、人力等;主要是獎(jiǎng)勵(lì)為生態(tài)中引進(jìn)企業(yè)資源,擴(kuò)建Conflux 生態(tài)等。
-
其他板塊:分為周邊、采購(gòu)等;主要是獎(jiǎng)勵(lì)一些其他的零散任務(wù)。
關(guān)于 Obsidian Labs
黑曜石實(shí)驗(yàn)室(Obsidian Labs) 是全球最大的區(qū)塊鏈開(kāi)發(fā)工具(IDE)提供商,也是 Conflux Studio 的開(kāi)發(fā)團(tuán)隊(duì),致力于為區(qū)塊鏈開(kāi)發(fā)者提供必備的工具及服務(wù),幫助鏈上應(yīng)用生態(tài)快速發(fā)展。目前,除了 Conflux Studio 外,Obsidian Labs 還為 EOS、Nervos、Substrate、Alogorand 等明星項(xiàng)目提供了專(zhuān)屬的 IDE 和框架工具。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話(huà),可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢(xún)、商務(wù)合作,也請(qǐng)與我們聯(lián)系。
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
轉(zhuǎn)自:csdn
原文鏈接:https://blog.csdn.net/weixin_45029854/article/details/107638406
作者:Sam @黑曜石實(shí)驗(yàn)室
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.liangyajiaju.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)