前端react+scatter錢包+EOS的對接及賬戶余額查詢。

前言

Scatter的開發檔案寫的就…很多細節它都沒說，導致我踩了很多坑，你敢信我是從報錯->google報錯->git上面的一個issue->vue版本的連接代碼這樣子搞出來的嗎，我人傻了.

前置準備

1. eos鏈 比如下面的

let jungle2 = {
   protocol: "http",
   blockchain: "eos",
   host: "jungle2.cryptolions.io",
   port: 80,
   chainId: "e70aaab8997e1dfce58fbfac80cbbb8fecec7b99cf982a9444273cbc64c41473"
};

2. 在該鏈上有賬戶

Scatter中的一些設定地方

• 添加自定義網路鏈（chainid點擊畫圈處會自動生成）
  
• 通過私鑰添加或創建賬戶
  

下載依賴

npm i -S scatterjs-core  //核心
npm i -S eosjs  //eos開發所依賴的eosjs，
npm i -S scatterjs-plugin-eosjs  //eosjs版本小于等于16.0.9時候下載這個
npm i -S scatterjs-plugin-eosjs2    // eosjs最新版本的下載這個(npm i -S eosjs這下載的必定是最新版本，所以肯定下載這個啦)

頭部引入

下面所有代碼全在一個index,js的檔案中

import ScatterJS,{Network} from 'scatterjs-core';
import {Api, JsonRpc}  from "eosjs";
import ScatterEOS from 'scatterjs-plugin-eosjs2'
// Don't forget to tell ScatterJS which plugins you are using.
ScatterJS.plugins( new ScatterEOS() );

相關配置(就是個物件和常量啦)

//網路配置
const network = Network.fromJson({
    blockchain:'eos',
    host:'寫你自己的',
    port:8888,
    protocol:'http',
    chainId:'寫你自己的'
});
//rpc是eosjs中的東西，有很多方法可以查詢余額之類的
const rpc = new JsonRpc(network.fullhost());

組件的基本樣子

export default function ScatterTest () {
    const [scatter,setScatter]=useState(null)//等會會獲取的scatter
    const [state,setState]=useState({//等會會獲取資料，先占個茅坑
        identity:null,
        account:null,
        eos:null,
    })
    //簡單的列印下state的值
    useEffect(()=>{
        console.log('state',state);
    },[state])
    //連接Scatter
    function connectToScatter() {...}
    //獲取用戶身份,用戶登錄
    function getIdentity(scatter){...}
    //斷開連接,用戶登出
    function forgetIdentity(scatter){...}
    //獲取余額資訊
    function getCurrencyBalance(account){}
	return(
        <>
            <button onClick={connectToScatter}>連接scatter</button>
            <button onClick={()=>{forgetIdentity(scatter)}}>斷開連接scatter</button>
            <button onClick={()=>{getCurrencyBalance(state.account)}}>獲取余額資訊</button>
        </>
    )
}

連接scatter和登錄

	//連接scatter
    function connectToScatter() {
        ScatterJS.scatter.connect("這里是隨便起的名字").then(connected => {
            // 用戶沒有下載Scatter或者下載了但是沒有打開運行
            if(!connected) {
                alert('User does not have Scatter Desktop, Mobile or Classic installed.')
                return false;
            }
            //獲取到了scatter
            const scatter = ScatterJS.scatter;
            setScatter(scatter)
            //用戶登錄
            getIdentity(scatter)
            /*
            * Always remember to null out the window.ScatterJS reference, if you don't extensions
            * will be able to catch that reference and make requests to the user's Scatter on behalf of
            * your domain, and you will have to take responsibility.
            * （我概況下：必寫，不然會被截取偽造操作，你要負責的哦）
            * */
            window.ScatterJS = null;

        });
    }
  //獲取用戶身份
    function getIdentity(scatter) {
        scatter.getIdentity({
            personal:['firstname', 'lastname','email','birthdate'],
            location:['country','address','city','state','country'],
            accounts:[network]
        }).then(identity => {
            // Always use the accounts you got back from Scatter. Never hardcode them even if you are prompting
            // the user for their account name beforehand. They could still give you a different account.
            //概況：就這么寫對了，
            const account = scatter.identity.accounts.find(x => x.blockchain === 'eos');//EOSIO account
            // Get a proxy reference to eosjs which you can use to sign transactions with a user's Scatter.
            //在這拿到eos
            const eos = scatter.eos(network, Api);//a reference to an eosjs object
			//把值保存下來
            setState({
                ...state,
                identity,
                account,
                eos
            })

        }).catch(error => {
            console.log('error',error);
        })
    }   

如果沒下載或運行Scatter情況

如果下載且Scatter在運行的情況

獲取到的資料

退出登錄

 //斷開連接,用戶登出
    function forgetIdentity(scatter) {
    	//主要就是呼叫scatter的這個方法
        scatter.forgetIdentity()
        //都清空掉
        setScatter(null)
        setState({
            identity:null,
            account:null,
            eos:null,
        })
    }

查詢余額

 //查詢賬戶余額
    function getCurrencyBalance(account) {
        (async () => {
            console.log('EOS',await rpc.get_currency_balance('eosio.token', account.name, 'EOS'));
        })();
        (async () => {
            console.log('HODLC',await rpc.get_currency_balance('eosio.token', account.name, 'HODLC'));
        })();
        (async () => {
            console.log('HODLT',await rpc.get_currency_balance('eosio.token', account.name, 'HODLT'));
        })();
    }

獲取到的資料

Faq

1. 怎么沒用到eos這個值呢？,查詢你用的是rpc啊

const eos = scatter.eos(network, Api);//a reference to an eosjs object

const rpc = new JsonRpc(network.fullhost());

這就涉及到這兩個東西的介紹了.

• JsonRpc 主要是用來查詢資料，與交易無關，就比如余額，塊資訊，交易資訊啥的,你甚至都不用登錄的，只要知道賬戶名字就能查到相關資訊
• Api 主要是和交易相關的操作，肯定要用戶授權的就是登錄，

上面我就是簡單的查了下余額所以也用不到eos呀

相關地址

Scatter開發檔案（大概看看，寫的是真的一言難盡）
eosjs開發檔案(提供了各種api和rpc方法)