Conflux 開(kāi)發(fā)教程 | 使用 IDE 在 Conflux 開(kāi)發(fā) DApp 的實(shí)戰(zhàn)操作指南

2021-9-26    前端達(dá)人

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è)賬戶上的余額將會(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)賬給別的用戶,同時(shí)會(huì)在事件中記錄下這筆轉(zhuǎn)賬的信息
  • 通過(guò) balanceOf 方法可以查詢(xún)到指定賬戶地址的代幣余額
  • 通過(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í)簽名的賬戶地址,將這個(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ò)此方法可以給別的賬戶轉(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)賬戶余額
    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è)賬戶地址中扣除,在合約代碼中通過(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 賬戶的 Coin 代幣的余額信息為 1000。使用同樣方法可以查詢(xún)到 receiver_key 賬戶的代幣余額為 0。
在這里插入圖片描述

轉(zhuǎn)賬代幣

在合約調(diào)用區(qū)域選擇 send 方法,在 Parameters 中分別填入:

  • receiver 收款人地址。填入 receiver_key 地址
  • amount 轉(zhuǎn)賬的代幣數(shù)量。填入整數(shù) 200
  • Signer 這筆交易的簽名地址,代幣轉(zhuǎn)出的數(shù)量將會(huì)在這個(gè)賬戶中扣除。填入 minter_key 地址,

點(diǎn)擊執(zhí)行完成轉(zhuǎn)賬,再次查詢(xún)代幣余額可以看到 minter_key 賬戶只剩下 800 代幣,而 receiver_key 賬戶則從 0 變成了 200 代幣。在這里插入圖片描述

Value 參數(shù)

Conflux 智能合約的每個(gè)調(diào)用的方法都可以帶上 Value 參數(shù),這是一個(gè)可選的參數(shù)。如果帶上了這個(gè)值,智能合約出了在執(zhí)行這個(gè)方法的邏輯外,還會(huì)額外轉(zhuǎn) Value 中指定數(shù)量的 CFX token 到 receiver 賬戶,轉(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)用由代付賬戶支付。其中添加特殊地址 0x0000000000000000000000000000000000000000 代表為所有調(diào)用該合約的地址代付費(fèi)用
  • remove_privilege 移除合約代付白名單
  • set_sponsor_for_collateral 設(shè)置合約儲(chǔ)存費(fèi) (collateral for storage) 的代付賬戶及代付金額
  • set_sponsor_for_gas 設(shè)置合約手續(xù)費(fèi) (gas fee) 的代付賬戶、代付金額及每筆交易代付金額上限

啟用一個(gè)合約的代付需要設(shè)置代付的賬戶、代付金額的及代付白名單。教程將會(huì)使用 Conflux Studio 通過(guò)系統(tǒng)合約設(shè)置代付賬戶及代付金額,通過(guò) Coin 合約添加代付白名單。設(shè)置完成后,minter_key 賬戶調(diào)用 Coin 合約的方法時(shí)將不會(huì)被扣除手續(xù)費(fèi),手續(xù)費(fèi)由 sponsor_key 賬戶代付。

設(shè)置代付賬戶及代付金額

在 Conflux Studio 中訪問(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 代付賬戶地址。填入 sponsor_key 地址
    在這里插入圖片描述
    填好以上參數(shù)并執(zhí)行運(yùn)行,系統(tǒng)合約將為 Coin 合約設(shè)置好儲(chǔ)存費(fèi)代付賬戶,此時(shí) sponsor_key 賬戶將會(huì)被扣除 40 CFX。

選擇 set_sponsor_for_gas 方法,該方法有四個(gè)參數(shù):

  • contract_addr 設(shè)置代付的合約地址。填入 contract_addr
  • upper_bound 設(shè)置每筆交易代付的上限。填入 1000000000000
  • Value 設(shè)置代付金額。填入整數(shù) 40
  • Signer 代付賬戶地址。填入 sponsor_key 地址
    在這里插入圖片描述
    填好以上參數(shù)并再次執(zhí)行運(yùn)行,系統(tǒng)合約將為 Coin 合約設(shè)置好手續(xù)費(fèi)代付賬戶,此時(shí) sponsor_key 賬戶將會(huì)再次被扣除 40 CFX。

完成這兩個(gè)方法的調(diào)用后 Coin 合約代付賬戶便設(shè)置好了,sponsor_key 賬戶將為 Coin 合約的手續(xù)費(fèi)和儲(chǔ)存費(fèi)各提供為 40 CFX Token 的代付服務(wù)。由于目前代付白名單中并沒(méi)有賬戶地址,因此還需要添加白名單地址才能完成代付設(shè)置。

添加代付白名單

在 Coin 合約中集成了設(shè)置代付白名單的方法,通過(guò)調(diào)用此方法可以添加或刪除代付白名單。

在 Conflux Studio 中訪問(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 賬戶的 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 賬戶支付的手續(xù)費(fèi),變成了由 sponsor_key 賬戶支付。

前端項(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 的支持,用戶可以使用 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覽器中訪問(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),輸入密碼和選擇賬戶后完成連接。連接成功后,將會(huì)在按鈕下看到當(dāng)前連接的賬戶地址以及賬戶中的 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)到賬戶的余額。
在這里插入圖片描述

查看 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 中的賬戶。
  • refreshBalance 調(diào)用 Conflux SDK 的 getBalance 方法來(lái)更新賬戶余額信息
  • 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)造交易、獲取賬戶、讀取合約等服務(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 提供了獲取賬戶 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)建賬戶及導(dǎo)出賬戶私鑰
  • 切換 Oceanus 網(wǎng)絡(luò),查看網(wǎng)絡(luò)信息
  • 賬戶申請(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ì)用戶參與生態(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)上線后,鎖定和未鎖定的 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)線上線下活動(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ì),如果有興趣的話,可以進(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.bouu.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)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

分享本文至:

日歷

鏈接

個(gè)人資料

存檔