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
Setting up Scatter for Web Applications的更多相关文章
- Developing RIA Web Applications with Oracle ADF
Developing RIA Web Applications with Oracle ADF Purpose This tutorial shows you how to build a ric ...
- [Windows Azure] Developing Multi-Tenant Web Applications with Windows Azure AD
Developing Multi-Tenant Web Applications with Windows Azure AD 2 out of 3 rated this helpful - Rate ...
- Combining HTML5 Web Applications with OpenCV
The Web Dev Zone is brought to you by Stormpath—offering a pre-built Identity API for developers. Ea ...
- Create Advanced Web Applications With Object-Oriented Techniques
Create Advanced Web Applications With Object-Oriented Techniques Ray Djajadinata Recently I intervie ...
- Model-View-Controller(MVC) is an architectural pattern that frequently used in web applications. Which of the following statement(s) is(are) correct?
Model-View-Controller(MVC) is an architectural pattern that frequently used in web applications. Whi ...
- Progressive Web Applications
Progressive Web Applications take advantage of new technologies to bring the best of mobile sites an ...
- SpringBoot(五) Web Applications: MVC
统一异常处理 SpringBoot的默认映射 /error 码云: commit: 统一异常处理+返回JSON格式+favicon.ico 文档: 28.1.11 Error Handling 参考 ...
- 【bug】【yii】配置log时,报错 Setting read-only property: yii\web\Application::log
Setting read-only property: yii\web\Application::log 配置放在了 components 外面,应该放在里面
- a simple and universal interface between web servers and web applications or frameworks: the Python Web Server Gateway Interface (WSGI).
WSGI is the Web Server Gateway Interface. It is a specification that describes how a web server comm ...
随机推荐
- MySql之左连接,右连接
左连接,右连接查询的表 中 on后面的条件不会影响主表的数据,只会影响右表的数据. 例: 没加条件的时候 左表加条件: 右表加条件: 通过上面3处对比可以看出来,用LEFT JOIN 的时候不管对左表 ...
- 熟悉基本的Linux文件系统命令
修改配置是以后工作中必然经历的,要做好基础工作,两天的学习也说明了在Linux系统中修改配置的重要性,多看多学习. 每周总结学习和经验到网站上,坚持1w个小时,加油! Linux的安装环境 cen ...
- HDU 2062:Subset sequence(思维)
Subset sequence Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Tot ...
- 软件工程 week 03
一.效能分析 1.作业地址:https://edu.cnblogs.com/campus/nenu/2016CS/homework/2139 2.git地址:https://git.coding.ne ...
- 隔离级别简介 (mysql)
隔离级别:一个事务必须与由其他事务进行的资源或数据更改相隔离的程度.隔离级别从允许的并发副作用(例如,脏读或虚拟读取)的角度进行描述. 定义 编辑 事务指定一个隔离级别,该隔离级别定义一个事务必须与由 ...
- zombodb安装试用
pg 数据库安装 参考如下安装 yum install https://download.postgresql.org/pub/repos/yum/10/redhat/rhel-7-x86_64/pg ...
- 策略模式(Strategy )
为实现一个目的采用不同的方式都可实现,具体看要采取哪种方式. //接口 public interface Strategy { public void algorithmInterface(); ...
- PostgreSQL Oracle 兼容性之 - sys_guid()
Oracle 使用sys_guid()用来产生UUID值. 在PostgreSQL中有类似的函数,需要安装uuid-ossp插件. 如果用户不想修改代码,还是需要使用sys_guid()函数的话, ...
- 原生js创建模态框(摘自:东窗凝残月 链接:https://www.cnblogs.com/dcncy/p/9076937.html)
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Te ...
- sql server 作业收缩数据库
USE[master] GO ALTER DATABASE PayFlow2 SET RECOVERY SIMPLE WITH NO_WAIT GO ALTER DATABASE PayFlow2 S ...