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个部分:

  Setting up Scatter for Web Applications

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

  Setting up Scatter for Web Applications

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

上一篇:安装Ubuntu双系统系列——为Firefox安装Adobe Flash Player


下一篇:VM Depot 镜像新增系列III – 社交媒体,内容管理 与 项目协同系统