Setting up Scatter for Web Applications

【Setting up Scatter for Web Applications】

　　If you are still using scatter-js please move over to scatterjs-core.

1、ScatterJS 分为以下5个部分：

2、浏览器中可以通过 <script> 标签引入。

<script src="https://cdn.scattercdn.com/file/scatter-cdn/js/latest/scatterjs-core.min.js"></script>
<script src="https://cdn.scattercdn.com/file/scatter-cdn/js/latest/scatterjs-plugin-eosjs.min.js"></script>
<script src="https://cdn.scattercdn.com/file/scatter-cdn/js/latest/scatterjs-plugin-eosjs2.min.js"></script>
<script src="https://cdn.scattercdn.com/file/scatter-cdn/js/latest/scatterjs-plugin-web3.min.js"></script>
<script src="https://cdn.scattercdn.com/file/scatter-cdn/js/latest/scatterjs-plugin-tron.min.js"></script>

3、React项目可心通过 npm 安装。

npm i -S scatterjs-core

　　React项目引入区块链相关库。scatter 支持3种不同的区块链。

　　1）EOS

npm i -S scatterjs-plugin-eosjs
// OR
npm i -S scatterjs-plugin-eosjs2

　　2）Ethereum

npm i -S scatterjs-plugin-web3

　　3）TRON

npm i -S scatterjs-plugin-tron

4、导入 ScatterJS，为EOS交互做准备。

import ScatterJS from 'scatterjs-core';
import ScatterEOS from 'scatterjs-plugin-eosjs'

ScatterJS.plugins( new ScatterEOS() );

5、用 DAPP 去连接，并且获取 identity。

// Optional!
const connectionOptions = {initTimeout:10000}

ScatterJS.scatter.connect("Put_Your_App_Name_Here", connectionOptions).then(connected => {
    if(!connected) {
        // User does not have Scatter installed/unlocked.
        return false;
    }
    
    // Use `scatter` normally now.
    ScatterJS.scatter.getIdentity(...);
});

6、创建 eosjs 的 proxy

// Using a proxy wrapper
const eos = ScatterJS.scatter.eos(network, Eos, eosjsOptions);

7、Interaction Flow

8、完整流程Demo。

　　1）scatterjs-core、scatterjs-plugin-eosjs。

import ScatterJS from 'scatterjs-core';
import ScatterEOS from 'scatterjs-plugin-eosjs';
import Eos from 'eosjs';

// Don't forget to tell ScatterJS which plugins you are using.
ScatterJS.plugins( new ScatterEOS() );

　　2）设置要连接的区块链。

// Networks are used to reference certain blockchains.
// They let you get accounts and help you build signature providers.
const network = {
    blockchain:'eos',
    protocol:'https',
    host:'nodes.get-scatter.com',
    port:443,
    chainId:'aca376f206b8fc25a6ed44dbdc66547c36c6c33e3a119ffbeaef943642f0e906'
}

　　3）设置 AppName 连接本地Scatter。

// First we need to connect to the user's Scatter.
ScatterJS.scatter.connect('My-App').then(connected => {

    // If the user does not have Scatter or it is Locked or Closed this will return false;
    if(!connected) return false;

);

　　4）获取 identity，并获取其中一个eos账户(account)。

　　const scatter = ScatterJS.scatter;

   // Now we need to get an identity from the user.
   // We're also going to require an account that is connected to the network we're using.
   const requiredFields = { accounts:[network] };
   scatter.getIdentity(requiredFields).then(() => {

       // 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');

　　}).catch(error => { // The user rejected this request, or doesn't have the appropriate requirements.  console.error(error); }); });

　　5）获取 eos 代理

　　　　 // You can pass in any additional options you want into the eosjs reference.
        const eosOptions = { expireInSeconds:60 };

        // Get a proxy reference to eosjs which you can use to sign transactions with a user's Scatter.
        const eos = scatter.eos(network, Eos, eosOptions);

        // ----------------------------
        // Now that we have an identity,
        // an EOSIO account, and a reference
        // to an eosjs object

　　6）此时，可以进行交易了。

　　　　 // Never assume the account's permission/authority. Always take it from the returned account.
        const transactionOptions = { authorization:[`${account.name}@${account.authority}`] };

        eos.transfer(account.name, 'helloworld', '1.0000 EOS', 'memo', transactionOptions).then(trx => {
            // That's it!
            console.log(`Transaction ID: ${trx.transaction_id}`);
        }).catch(error => {
            console.error(error);
        });

参考：

1、https://get-scatter.com/docs/setting-up-for-web-apps

2、https://github.com/GetScatter/scatter-js