Conflux DApp 開發(fā)教程

對(duì)本教程有任何疑問或建議可以在 GitHub 給我們留言。

簡介

Conflux DApp 開發(fā)教程將使用 Conflux Studio 在 Oceanus 網(wǎng)絡(luò)下開發(fā)一個(gè)簡單的代幣應(yīng)用 Coin。

通過這個(gè)開發(fā)教程，你將會(huì)學(xué)習(xí)到如何進(jìn)行 Conflux 智能合約的編寫、調(diào)用，配置智能合約的代付以及如何使用 Web 前端項(xiàng)目與智能合約進(jìn)行交互，從而實(shí)現(xiàn)一個(gè)包含前端和智能合約的完整的 DApp。

在閱讀教程中遇到任何問題，歡迎在 Issues 中向我們反饋。

準(zhǔn)備工作

安裝 IDE

請(qǐng)?jiān)?GitHub 下載頁面下載 Conflux Studio。目前 Conflux Studio 支持 macOS 和 Linux 系統(tǒng)，請(qǐng)根據(jù)系統(tǒng)下載對(duì)應(yīng)的版本。

正確安裝 Conflux Studio 并初次啟動(dòng)后，Conflux Studio 將顯示歡迎頁面，根據(jù)提示完成 Docker, Conflux Node 以及 Conflux Truffle 的下載、安裝及啟動(dòng)。

創(chuàng)建錢包

完成所有的安裝步驟后，首先需要?jiǎng)?chuàng)建鑰匙對(duì)來完成后續(xù)的合約部署以及調(diào)用。

在 Conflux Studio 的任意界面，點(diǎn)擊應(yīng)用左下?的鑰匙圖標(biāo)，打開密鑰管理器。點(diǎn)擊 Create 按鈕打開新鑰匙對(duì)彈窗，輸入鑰匙對(duì)的名字并點(diǎn)擊 Save 按鈕。完成后將在密鑰管理器中看到剛剛生成的鑰匙對(duì)的地址。鑰匙對(duì)由私鑰和公鑰組成，公鑰在智能合約中也常被稱作地址。

導(dǎo)出私鑰可以通過點(diǎn)擊每個(gè)地址后面的眼睛按鈕打開查看私鑰彈窗，彈窗顯示地址以及私鑰。后續(xù)教程中會(huì)需要通過管理器導(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)簽的倒三角打開下拉菜單，點(diǎn)擊選擇 Oceanus 網(wǎng)絡(luò)進(jìn)行切換。

切換完成后，可以在主頁面中看到當(dāng)前網(wǎng)絡(luò)為 oceanus。頁面左邊包括了當(dāng)前網(wǎng)絡(luò)的節(jié)點(diǎn) URL，Chain ID，TPS 信息，頁面右邊包含了當(dāng)前網(wǎng)絡(luò)區(qū)塊的信息。

申請(qǐng)測試 CFX

點(diǎn)擊頂部 Explorer 標(biāo)簽打開區(qū)塊瀏覽器，并在地址欄粘貼鑰匙對(duì)地址，可以在左邊看到當(dāng)前地址的 CFX 余額信息。

在區(qū)塊鏈的世界中，大家通常將申請(qǐng)測試 Token 的方式稱為 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} 來申請(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)目列表頁面，點(diǎn)擊頁面中的 New 按鈕打開項(xiàng)目創(chuàng)建窗口，輸入項(xiàng)目的名稱并選擇 coin 模版，點(diǎn)擊 Create Project 完成項(xiàng)目的創(chuàng)建。

合約代碼

Coin 合約是一個(gè)簡單的代幣合約，其中：

• 通過 mint 方法可以增發(fā)代幣數(shù)量
• 通過 send 方法可以將一定數(shù)量的代幣轉(zhuǎn)賬給別的用戶，同時(shí)會(huì)在事件中記錄下這筆轉(zhuǎn)賬的信息
• 通過 balanceOf 方法可以查詢到指定賬戶地址的代幣余額
• 通過 add_privilege 方法可以為合約添加代付白名單
• 通過 remove_privilege 方法可以為合約移除代付白名單
  

Conflux 智能合約使用 Solidity 語言進(jìn)行開發(fā)，打開目錄下的 contracts/Coin.sol 文件，這個(gè)是本項(xiàng)目的核心代碼：

// 指定了 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 <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 方法，通過此方法來增發(fā)代幣
    function mint(address receiver, uint amount) public {
        require(msg.sender == minter);
        require(amount < 1e60);
        balances[receiver] += amount;
    }

    // 定義 send 方法，通過此方法可以給別的賬戶轉(zhuǎn)賬代幣
    function send(address receiver, uint amount) public {
        require(amount <= balances[msg.sender], "Insufficient balance.");
        balances[msg.sender] -= amount;
        balances[receiver] += amount;
        // 通過 emit 觸發(fā) Sent 事件，記錄這筆轉(zhuǎn)賬的信息
        emit Sent(msg.sender, receiver, amount);
    }

    // 定義 balanceOf 方法，這是個(gè) view 類型的方法，用于查詢賬戶余額
    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 來代表這個(gè)合約地址。

調(diào)用合約

點(diǎn)擊頂部的 Contract 標(biāo)簽切換至合約頁面，在地址欄輸入 contract_addr 地址并加載合約。

合約頁面由三個(gè)部分組成：

• 左邊為合約調(diào)用區(qū)域
• 中間為合約數(shù)據(jù)查詢區(qū)域
• 右邊為事件查詢區(qū)域

合約調(diào)用及查詢

增發(fā)代幣

點(diǎn)擊合約調(diào)用的下拉菜單中選擇 mint 方法，在下方的參數(shù)區(qū)域分別填入以下信息：

• receiver 接收代幣的地址。填入 minter_key 地址
• amount 發(fā)行的代幣總數(shù)。填入整數(shù) 1000
• Value 選填項(xiàng)，具體可查看 Value 詳解。填 0 或者不填
• Signer 這筆交易的簽名地址，如果沒有開通代付功能，交易手續(xù)費(fèi)將在這個(gè)賬戶地址中扣除，在合約代碼中通過 msg.sender 獲取到這個(gè)地址。填入 minter_key 地址

填寫完成后點(diǎn)擊執(zhí)行按鈕，Conflux Studio 將自動(dòng)構(gòu)造交易并推送到網(wǎng)絡(luò)中。成功執(zhí)行后可以在下方 Result 中看到這筆成功的交易。

查詢代幣余額

點(diǎn)擊查詢區(qū)域的下拉菜單并且選擇 balanceOf 方法，這是在代碼中定義的查詢方法。在下方的 tokenOwner 填入 minter_key 地址并點(diǎn)擊執(zhí)行，就可以在下方的 Result 中看到 minter_key 賬戶的 Coin 代幣的余額信息為 1000。使用同樣方法可以查詢到 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)賬，再次查詢代幣余額可以看到 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ù)。

查詢事件

在事件區(qū)域選擇 Sent 并點(diǎn)擊執(zhí)行，下方的 Event Logs 可以看到轉(zhuǎn)賬的記錄。Sent 事件的列都是由代碼中的 Sent 事件的參數(shù)來定義的（其中 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)合約提供的代付功能。

通過系統(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 通過系統(tǒng)合約設(shè)置代付賬戶及代付金額，通過 Coin 合約添加代付白名單。設(shè)置完成后，minter_key 賬戶調(diào)用 Coin 合約的方法時(shí)將不會(huì)被扣除手續(xù)費(fèi)，手續(xù)費(fèi)由 sponsor_key 賬戶代付。

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

在 Conflux Studio 中訪問系統(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ù)。由于目前代付白名單中并沒有賬戶地址，因此還需要添加白名單地址才能完成代付設(shè)置。

添加代付白名單

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

在 Conflux Studio 中訪問 contract_addr 合約，選擇 add_privilege 方法：

• account 添加白名單的地址。填入 minter_key 地址
• Value 不填
• Signer 這筆交易的簽名地址。填入 minter_key 地址

運(yùn)行后就成功設(shè)置了代付白名單了，至此 Coin 合約的代付功能設(shè)置好了。

代付測試

在進(jìn)行代付測試前，先查詢并記錄下 minter_key 賬戶的 CFX 余額。例如本教程中，minter_key 的初始余額為 97.6210937497093952 CFX。

回到 Coin 合約調(diào)用頁面，再次調(diào)用 mint 方法并使用 minter_key 地址增發(fā)代幣 1000，完成代幣增發(fā)后再次查詢 minter_key 的余額，仍然為 97.6210937497093952 CFX。

可以看到增發(fā)代幣的這筆交易，原本應(yīng)該由 minter_key 賬戶支付的手續(xù)費(fèi)，變成了由 sponsor_key 賬戶支付。

前端項(xiàng)目

前端項(xiàng)目源碼可以前往 Conflux 前端。

預(yù)備

下載項(xiàng)目并安裝依賴

• 下載前端項(xiàng)目：git clone https://github.com/ObsidianLabs/conflux-frontend-react
• 使用 npm install 或者 yarn 進(jìn)行項(xiàng)目依賴安裝

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 的頁面中選擇 Import，將 Conflux Studio 中的 minter_key 的私鑰（在創(chuàng)建錢包章節(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ò)中智能合約的地址。打開項(xiàng)目根目錄并找到 .env 文件，這個(gè)文件提供了項(xiàng)目的環(huán)境變量，將 REACT_APP_CONFLUX_COIN_ADDRESS 的值修改為 contract_addr。

使用 yarn start 啟動(dòng)前端項(xiàng)目，開發(fā)服務(wù)器運(yùn)行起來后會(huì)在瀏覽器中打開前端頁面（如果沒有打開，請(qǐng)?jiān)跒g覽器中訪問 http://localhost:3000）。

項(xiàng)目運(yùn)行起來后，頁面將顯示四個(gè)卡片信息，分別為

• 左上角 Conflux 網(wǎng)絡(luò)信息模塊
• 右上角 Conflux Portal 模塊
• 左下角 Coin 合約模塊
• 右下角 SponsorWhitelistControl 合約模塊
  

連接 Conflux Portal

點(diǎn)擊右上角組件中的 Connect to Conflux Portal 按鈕，Conflux Portal 頁面將被打開，輸入密碼和選擇賬戶后完成連接。連接成功后，將會(huì)在按鈕下看到當(dāng)前連接的賬戶地址以及賬戶中的 CFX 余額。

運(yùn)行 Coin 合約代幣增發(fā)和代幣轉(zhuǎn)賬操作

左下角的組件為 Coin 合約組件，可以通過這個(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 按鈕來確認(rèn)交易。

• 代幣轉(zhuǎn)賬：選擇 send 方法并在 receiver 中填入收款人地址 receiver_key 地址和在 amount 中轉(zhuǎn)賬代幣的數(shù)量 20，點(diǎn)擊 Push Transaction，在彈出的 ConfluxPortal Notification 窗口中點(diǎn)擊 Confirm 按鈕來確認(rèn)交易。
  

查看 Coin 合約中的余額

選擇 balanceOf 方法并在 tokenOwner 輸入框中填入查詢的地址，點(diǎn)擊 Query Data 按鈕可以查詢到賬戶的余額。

查看 Sent 事件

選擇 Sent 事件并點(diǎn)擊 Query Data 可以查詢到轉(zhuǎn)賬操作所觸發(fā)的轉(zhuǎn)賬事件的記錄。

前端項(xiàng)目解析

項(xiàng)目使用 React 進(jìn)行開發(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 為頁面的主入口，負(fù)責(zé)頁面的排列及合約信息的讀取。

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 方法來更新賬戶余額信息
• 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 來渲染合約的信息，包括合約地址、合約方法和事件，合約提交的交互邏輯及顯示執(zhí)行后的結(jié)果
• ContractMethods 負(fù)責(zé)渲染合約 abi 中的方法和事件的表單及相對(duì)應(yīng)的按鈕
• ConfluxForm 負(fù)責(zé)根據(jù)方法或事件的 abi 來渲染輸入表單

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 來連接 Conflux 網(wǎng)絡(luò)，和合約進(jìn)行交互以及構(gòu)造合約中的實(shí)例。

conflux-portal.js

conflux-portal.js 是 Conflux Portal 的封裝，本前端項(xiàng)目通過調(diào)用瀏覽器插件來完成交易的簽名。調(diào)用 Conflux Portal 提供的 enable 方法可以啟動(dòng)項(xiàng)目和 Conflux Portal 的連接（需要提前檢查瀏覽器是否正確安裝插件，在 constructor 中通過檢查 window.conflux 是否為空來判斷）。conflux-portal.js 提供了獲取賬戶 getAccount 和發(fā)送交易 sendTransaction 兩個(gè)主要的方法。

abi

lib/abi 文件夾下提供了兩個(gè) json 文件，分別為 Coin.json 和 SponsorWhitelistControl.json，這兩個(gè)文件是構(gòu)造合約所需要使用的 abi 文件。

總結(jié)

在本開發(fā)教程中，我們學(xué)習(xí)了如何使用 Conflux Studio 來完成一個(gè)完整的 Coin DApp 開發(fā)，其中包括了：

• 使用鑰匙對(duì)管理器創(chuàng)建賬戶及導(dǎo)出賬戶私鑰
• 切換 Oceanus 網(wǎng)絡(luò)，查看網(wǎng)絡(luò)信息
• 賬戶申請(qǐng) CFX Token
• 創(chuàng)建、編譯并部署項(xiàng)目
• 解析 Coin 合約代碼，學(xué)習(xí)如何編寫合約的讀寫方法及事件
• 使用合約瀏覽器調(diào)用 Coin 合約的代幣增發(fā)、轉(zhuǎn)賬、查詢余額及查詢事件
• 設(shè)置并使用智能合約的代付功能
• 將私鑰導(dǎo)入 Conflux Portal 并連接前端項(xiàng)目
• 在前端項(xiàng)目中調(diào)用 Coin 合約的代幣增發(fā)、轉(zhuǎn)賬、查詢余額及查詢事件
• 解析前端項(xiàng)目代碼，學(xué)習(xí)如何通過 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)。通過完成 Bounty 賞金平臺(tái)發(fā)布的各項(xiàng)任務(wù)，參與者可以獲得 FC (Fans Token) 作為獎(jiǎng)勵(lì)。

FC 的價(jià)值

FC，全稱 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ù)詳情頁中，包括最高獎(jiǎng)金數(shù)量、獎(jiǎng)金分配人數(shù)、獎(jiǎng)金數(shù)量分布、排行名次確定方式等信息。賬號(hào)余額中的賞金獎(jiǎng)勵(lì)可以隨時(shí)申請(qǐng)?zhí)岈F(xiàn)至 Conflux 錢包。Conflux 團(tuán)隊(duì)會(huì)對(duì)所有的提現(xiàn)申請(qǐng)進(jìn)行審核。

對(duì)于已經(jīng)通過的提現(xiàn)申請(qǐng)，Conflux 團(tuán)隊(duì)會(huì)在每周二中午 12 點(diǎn)（如遇節(jié)假日，往后順延至下一個(gè)工作日）進(jìn)行提幣操作。完成提幣操作后，您的 Conflux 錢包將會(huì)收到您提現(xiàn)的賞金獎(jiǎng)勵(lì)。

Bounty 的價(jià)值

Conflux Bounty (https://bounty.conflux-chain.org) 的宗旨是為每一個(gè)通證找到價(jià)值。Bounty 分為幾個(gè)板塊：技術(shù)、品牌、社群、資源、其他等。

• 技術(shù)板塊：分為產(chǎn)品、SDK、教程、開發(fā)、測試等；主要是獎(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)，幫助解答社群問題，活躍日常氣氛等。
• 資源板塊：分為政務(wù)、商務(wù)、人力等；主要是獎(jiǎng)勵(lì)為生態(tài)中引進(jìn)企業(yè)資源，擴(kuò)建Conflux 生態(tài)等。
• 其他板塊：分為周邊、采購等；主要是獎(jiǎng)勵(lì)一些其他的零散任務(wù)。

關(guān)于 Obsidian Labs

黑曜石實(shí)驗(yàn)室（Obsidian Labs) 是全球最大的區(qū)塊鏈開發(fā)工具（IDE）提供商，也是 Conflux Studio 的開發(fā)團(tuán)隊(duì)，致力于為區(qū)塊鏈開發(fā)者提供必備的工具及服務(wù)，幫助鏈上應(yīng)用生態(tài)快速發(fā)展。目前，除了 Conflux Studio 外，Obsidian Labs 還為 EOS、Nervos、Substrate、Alogorand 等明星項(xiàng)目提供了專屬的 IDE 和框架工具。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(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)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)