五、基於conflux 插件錢包的應用

第一講 conflux-portal 的安裝與使用

區塊鏈應用的形式主要以網頁端、DAPP端爲大部分場景，以及少量服務端場景。本節課程將教會大家如何Google Chrome 瀏覽器上創建一個在conflux公鏈上的錢包。需要大家進行下載插件、安裝插件、通過助記詞創建錢包，然後得到屬於你個人的錢包的過程。

一、 下載插件

1、 conflux-portal 下載地址：https://github.com/Conflux-Chain/conflux-portal/releases

2、 大家打開地址後進入到下載地址頁面是下圖的樣子，如圖：

大家不難發現本教程中最高的可以使用的版本是 0.2.2 那麼我將會爲大家演示如何安裝並使用 conflux-portal-chrome-0.2.2.zip 版本的插件錢包。

3、 點擊 conflux-portal-chrome-0.2.2.zip 將會下載谷歌的chrome的插件版本。

4、 下載好以後放在電腦的任何一個地方都可以，不建議放在系統盤，本教程放在D盤目錄下了。

二、安裝插件

1、 我們將壓縮包進行解壓（友情提示：大家不要直接解壓本目錄下面，需要指定一個目錄解壓，因爲這個壓縮包裏面沒有包裹一層，希望不要被坑，我是解壓到conflux-portal-chrome-0.2.2目錄下面了），下面打開大家的Google Chrome ，按照下圖的三部打開擴展程序面板，如圖：

2、 大家的擴展程序面板可能不是開發者模式，因此需要打開開發者模式，點擊開發這模式旁邊的按鈕即可。

3、 打開以後的面板裏面將會有‘加載已解壓擴展程序’等欄目，我們繼續點擊這個欄目

4、 找到我們解壓的目錄，點擊確定。安裝步驟完成。

5、 上面的步驟完成後會自動跳轉到如圖的頁面說明我們安裝插件成功可以使用了，如圖：

三、創建錢包

1、 接着上面步驟中的開始，我們點擊‘開始使用’進入到conflux-portal使用頁面，如圖：

2、上圖中有兩個選擇，我們可以導入之前已經創建的錢包，也可以創建一個新的錢包。相信閱讀本教程的小夥伴大部分都沒有自己的錢包呢，我將會先創建錢包，在進行導入錢包，方式進行講解，有錢包的小夥伴可以直接跳到導入錢包教程。創建錢包會跳入下面頁面，沒啥好猶豫的直接 ‘I agree’ 同意就好了。如圖：

4、 點擊同意後會進入到下面頁面，這裏我們要輸入密碼兩次，並且勾選同意協議按鈕，一定要記住你的密碼，不然丟失後，可是找不回來的。如圖：

5、點擊‘創建’後跳轉到助記詞頁面，這個助記詞一定要記住，記不住哪個小本本記起來。如圖：

6、 點擊顯示密語，記下來就好了，本教程使用的是隨便創建的一個錢包因此公佈出來助記詞也沒關係，大家的助記詞千萬別泄露了，不然你的錢包要小心了。

able peanut rate myself menu funny logic focus hedgehog arrest real box

7、 下面還有一步就是將助記詞完整的填入確認頁面，這一步真的是多餘的，我本人很不喜歡，但是沒辦法，誰叫我們是使用者呢，填寫吧。如圖：

8、輸入正確的順序後，也就創建成功了，如圖：

9、 點擊‘全部完成’進入錢包頁面。如圖：

10、 擁有一個自己的錢包是不是很簡單，小夥伴們可以動起手來搞一個自己的錢包玩玩了。這個是本教程的公鑰地址 “0x12Ea0fa7d2aCaA4ef52Ee7650bd16f56d60B51dC” 公鑰地址是可以給任何人看的。密鑰地址一定要本人收好。

四、導入錢包

我們創建完了錢包以後，助記詞以及密碼一定要記住，這樣我們就可以在任何一個可以使用助記詞登錄的應用上登錄賬戶了。下面我們將使用本教程中創建的錢包演示如何導入錢包。

1、插件錢包導入入口有兩個一個是剛剛安裝後出現的導入入口，還有可以通過插件的程序角標的入口，我們先以角標方式導入，下面頁面是我將插件關閉後在打開後出現的，有一個“使用賬戶助記詞導入”，如圖：

2、點擊這個“使用賬戶助記詞導入”，進入下面頁面，如圖：

3、我們使用上面的助記詞，填入，密碼重新輸入也可以，也可以使用我們之前的密碼，都可以的。填寫完成後我們進行點擊恢復，就發現進入到上面創建成功後進入的頁面了。

4、是不是很神奇，“0x12Ea0fa7d2aCaA4ef52Ee7650bd16f56d60B51dC” 得到的公鑰地址是一樣的。

五、 密碼解鎖

相信很多小夥伴有個疑惑上面我們設置的密碼是幹什麼用的，對吧！實際上這個密碼是你在你本次使用的瀏覽器上使用的，比如你將瀏覽器關閉了，在打開那麼將會讓你輸入密碼解鎖，如圖：

我們可以將上面輸入的密碼輸入進去然後解鎖。如果密碼忘記，那麼將使用助記詞找回你的錢包，在重新設置密碼。也就是重複上面第四步。

第二講 js-conflux-sdk 調用

1、檢測conflux-portal插件

        async function checkConflux() {
            if (window.conflux === 'undefined') {
                if(confirm('檢測到您的瀏覽器中並未安裝conflux錢包插件，點擊確定前往下載。\n\n 注：如果沒有跳轉看下是不是被瀏覽器攔截了')){
                    window.open("https://github.com/Conflux-Chain/conflux-portal/releases")
                }


                var body = document.getElementById("body");
                body.innerHTML = "本網址需要安裝conflux錢包插件， 請 <a href='https://github.com/Conflux-Chain/conflux-portal/releases'>前往下載</a> conflux錢包插件";
                return false;
            }


            accounts = await conflux.enable();
            return true;
        }

2、獲取contract合約

        var contract;
        function buildContract() {
            contract = confluxJS.Contract({
                abi: abiJson,
                address: "0x8067244e0b629610eb24cc9da4fe8b023fc02fd9",
            });
        }

3、call 調用

            let result = await contract.likeSupply();
            console.log(result.toString());

4、send調用

            await contract.startUp()
                .sendTransaction({ from: accounts[0] })
                .confirmed();

項目下載地址

https://attachments-cdn.shimo.im/dTPwqnNhF10EzVVh.zip?attname=test-portal.zip