Giter Club home page Giter Club logo

scatter-js's Introduction

Scatter JS

type version package
core npm version scatterjs-core
blockchain npm version scatterjs-plugin-eosjs
blockchain npm version scatterjs-plugin-eosjs2
blockchain npm version scatterjs-plugin-web3
blockchain npm version scatterjs-plugin-tron
wallet npm version scatterjs-plugin-lynx

Want some quick code?

Here's some boilerplates for you to just get starts quickly.

[email protected]

Installation: npm i -S scatterjs-core scatterjs-plugin-eosjs [email protected]

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

ScatterJS.plugins( new ScatterEOS() );

const network = ScatterJS.Network.fromJson({
    blockchain:'eos',
    chainId:'aca376f206b8fc25a6ed44dbdc66547c36c6c33e3a119ffbeaef943642f0e906',
    host:'nodes.get-scatter.com',
    port:443,
    protocol:'https'
});

ScatterJS.connect('YourAppName', {network}).then(connected => {
    if(!connected) return console.error('no scatter');

    const eos = ScatterJS.eos(network, Eos);

    ScatterJS.login().then(id => {
        if(!id) return console.error('no identity');
        const account = ScatterJS.account('eos');
        const options = {authorization:[`${account.name}@${account.authority}`]};
        eos.transfer(account.name, 'safetransfer', '0.0001 EOS', account.name, options).then(res => {
            console.log('sent: ', res);
        }).catch(err => {
            console.error('error: ', err);
        });
    });
});

[email protected]

Installation: npm i -S scatterjs-core scatterjs-plugin-eosjs2 [email protected]

import ScatterJS from 'scatterjs-core';
import ScatterEOS from 'scatterjs-plugin-eosjs2';
import {JsonRpc, Api} from 'eosjs';

ScatterJS.plugins( new ScatterEOS() );

const network = ScatterJS.Network.fromJson({
    blockchain:'eos',
    chainId:'aca376f206b8fc25a6ed44dbdc66547c36c6c33e3a119ffbeaef943642f0e906',
    host:'nodes.get-scatter.com',
    port:443,
    protocol:'https'
});
const rpc = new JsonRpc(network.fullhost());

ScatterJS.connect('YourAppName', {network}).then(connected => {
    if(!connected) return console.error('no scatter');

    const eos = ScatterJS.eos(network, Api, {rpc, beta3:true});

    ScatterJS.login().then(id => {
        if(!id) return console.error('no identity');
        const account = ScatterJS.account('eos');

        eos.transact({
            actions: [{
                account: 'eosio.token',
                name: 'transfer',
                authorization: [{
                    actor: account.name,
                    permission: account.authority,
                }],
                data: {
                    from: account.name,
                    to: 'safetransfer',
                    quantity: '0.0001 EOS',
                    memo: account.name,
                },
            }]
        }, {
            blocksBehind: 3,
            expireSeconds: 30,
        }).then(res => {
            console.log('sent: ', res);
        }).catch(err => {
            console.error('error: ', err);
        });
    });
});

tronweb

Installation: npm i -S scatterjs-core scatterjs-plugin-tron tronweb

import ScatterJS from 'scatterjs-core';
import ScatterTron from 'scatterjs-plugin-tron';
import TronWeb from 'tronweb';

ScatterJS.plugins( new ScatterTron() );

const network = ScatterJS.Network.fromJson({
    blockchain:'tron',
    chainId:'1',
    host:'api.trongrid.io',
    port:443,
    protocol:'https'
});

const httpProvider = new TronWeb.providers.HttpProvider(network.fullhost());
let tron = new TronWeb(httpProvider, httpProvider, network.fullhost());
tron.setDefaultBlock('latest');

ScatterJS.connect('YourAppName', {network}).then(connected => {
    if(!connected) return console.error('no scatter');

    tron = ScatterJS.trx(network, tron);

    ScatterJS.login().then(id => {
        if(!id) return console.error('no identity');
        const account = ScatterJS.account('trx');
        tron.trx.sendTransaction('TX...', 100).then(res => {
            console.log('sent: ', res);
        }).catch(err => {
            console.error('error: ', err);
        });
    });
});

web3

Installation: npm i -S scatterjs-core scatterjs-plugin-web3 web3

import ScatterJS from 'scatterjs-core';
import ScatterETH from 'scatterjs-plugin-web3';
import Web3 from 'web3';

ScatterJS.plugins( new ScatterETH() );

const network = ScatterJS.Network.fromJson({
    blockchain:'eth',
    chainId:'1',
    host:'YOUR ETHEREUM NODE',
    port:443,
    protocol:'https'
});

ScatterJS.connect('YourAppName', {network}).then(connected => {
    if(!connected) return console.error('no scatter');

    const web3 = ScatterJS.web3(network, Web3);

    ScatterJS.login().then(id => {
        if(!id) return console.error('no identity');
        const account = ScatterJS.account('trx');
        web3.eth.sendTransaction({
            from: account.address,
            to: '0x...',
            value: '1000000000000000'
        }).then(res => {
            console.log('sent: ', res);
        }).catch(err => {
            console.error('error: ', err);
        });
    });
});




Supported Wallets

Automatically Supported Wallets

These wallets do not require you include any plugins. They run Scatter Protocols inside of their wallet and mimic our existing APIs.

Does your wallet support Scatter Protocols? Issue a Pull Request on the README.md and add it here.

dapp supported blockchains platform wallet libs
EOSIO, Tron, Ethereum Scatter Desktop Desktop [email protected], eosjs@20+, tronweb, web3
EOSIO, Ethereum Scatter Extension Desktop [email protected], web3
EOSIO TokenPocket Mobile [email protected], eosjs@20+
EOSIO MEET.ONE Mobile [email protected]
EOSIO imToken Mobile [email protected]
EOSIO PocketEOS Mobile [email protected]
EOSIO MoreWallet Mobile [email protected]
EOSIO NOVAWallet Mobile [email protected]
EOSIO Chaince Wallet Mobile [email protected]
EOSIO EOS LIVE Mobile [email protected]
EOSIO Starteos Mobile [email protected], eosjs@20+
EOSIO ET Wallet Mobile [email protected], eosjs@20+

Plugin Supported Wallets

These wallets require a plugin to support. ScatterJS will mutate standardized blockchain library requests for you into their required formats.

dapp supported blockchains wallet platform plugin libs
EOSIO Lynx Mobile scatterjs-plugin-lynx eosjs@20+



Installation

To use ScatterJS you must have at least the core. From that point forward you can mix-match the plugins you require.

blockchain library installation command
eosjs npm i -S scatterjs-core scatterjs-plugin-eosjs [email protected]
eosjs2 (@20+) npm i -S scatterjs-core scatterjs-plugin-eosjs2 [email protected]
tronweb npm i -S scatterjs-core scatterjs-plugin-tron tronweb
web3 npm i -S scatterjs-core scatterjs-plugin-web3 web3

CDN

<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>
<script src="https://cdn.scattercdn.com/file/scatter-cdn/js/latest/scatterjs-plugin-lynx.min.js"></script>



Instantiation

As early as you can in your project, instantiate both ScatterJS and your selected plugins.

Nodejs

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

ScatterJS.plugins( new ScatterEOS() );

Vanilla

<script src="scatterjs-core.min.js"></script>
<script src="scatterjs-plugin-eosjs.min.js"></script>

<script>
    ScatterJS.plugins( new ScatterEOS() );
</script>

Multiple Plugins

import ScatterJS from 'scatterjs-core';
import ScatterEOS from 'scatterjs-plugin-eosjs'
import ScatterTron from 'scatterjs-plugin-tron'
import ScatterLynx from 'scatterjs-plugin-lynx'

ScatterJS.plugins( new ScatterEOS(), new ScatterTron(), new ScatterLynx(Eos || {Api, JsonRpc}) );



Build the network object

Networks tell Scatter which blockchain nodes you're going to be working with.

const network = ScatterJS.Network.fromJson({
    blockchain:'eos',
    chainId:'aca376f206b8fc25a6ed44dbdc66547c36c6c33e3a119ffbeaef943642f0e906',
    host:'nodes.get-scatter.com',
    port:443,
    protocol:'https'
});



Connect to an available wallet

Once you are connected you can then call API methods on ScatterJS

ScatterJS.connect('MyAppName', {network}).then(connected => {
    if(!connected) return false;
    // ScatterJS.someMethod();
});

You can see full scatterjs-core API docs here



Getting Blockchain Accounts

Login with the network passed into ScatterJS.connect

ScatterJS.login().then(...);

Login with multiple networks

ScatterJS.login({accounts:[network1, network2]).then(...);

Logout

ScatterJS.logout().then(...);

After a successful login, the "Identity" will be available at ScatterJS.identity. If a user refreshes the page and has already logged in, the ScatterJS.identity property will be auto-filled.



Get blockchain accounts from the identity

Because accounts are nested within the Identity there is an easy method for fetching them.

Using the helper

const account = ScatterJS.account('eos')
// Result: {name:'...', authority:'active', publicKey:'...', blockchain:'eos', chainId:'...'}

const account = ScatterJS.account('eth')
// Result: {address:'...', blockchain:'eth', chainId:'1'}

const account = ScatterJS.account('trx')
// Result: {address:'...', blockchain:'trx', chainId:'1'}

From the Identity

const account = ScatterJS.identity.accounts.find(x => {
    return x.blockchain === 'eos';
});



Using Blockchain Wrappers

Blockchain wrappers wrap the actual blockchain libraries (eosjs, tronweb, web3, etc) that you pass in. That way you don't have to relearn any APIs or be forced to use any specific version.

You can click on the libraries here below to go directly to their respective githubs.

[email protected] ( scatterjs-plugin-eosjs )

import Eos from 'eosjs';
const eos = ScatterJS.eos(network, Eos, eosjsOptions);

const result = await eos.transfer(...);

[email protected] ( scatterjs-plugin-eosjs2 )

import {JsonRpc, Api} from 'eosjs'
const rpc = new JsonRpc(network.fullhost());
const eos = ScatterJS.eos(network, Api, {rpc, beta3:true}));

const result = await eos.transact({...});

tronweb

import TronWeb from 'tronweb';
const httpProvider = new TronWeb.providers.HttpProvider(network.fullhost());
let tron = new TronWeb(httpProvider, httpProvider, network.fullhost());
tron.setDefaultBlock('latest');
tron = ScatterJS.trx(network, tron);

const result = await tron.trx.sendTransaction(...)

web3

import Web3 from 'web3';
const web3 = ScatterJS.web3(network, Web3);

const result = await web3.eth.sendTransaction(...)



NodeJS and babel/webpack issues.

If you're having trouble packaging or compiling your project you probably need to add a babel transpiler.

  • npm i -D @babel/runtime <-- run this command and it should compile.

If you're using eosjs beta3

const eos = scatter.eos(network, Api, { rpc, beta3:true })



What now?

Head over to the Scatter Developer Documentation to learn about all the amazing things you can do with Scatter.

There's also a lot more information about proper setup in the Setting up for Web Applications section which will help you get the most out of ScatterJS, and make sure you aren't exposing your users to malicious non-Scatter plugins.


Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.