MrToph / scatter-js

Importable Scatter JavaScript Connection Module

Scatter JS

scatterjs-core

scatterjs-plugin-eosjs

scatterjs-plugin-eosjs2

scatterjs-plugin-web3

scatterjs-plugin-tron

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>

Installation

To use ScatterJS you must have at least the core. You can also use Scatter without any blockchain support by simply importing only the core without any blockchain specific plugins.

This is great for sites that want to authenticate with users in a decentralized way, but don't need any blockchain functionality.

npm i -S scatterjs-core

---

Plugins

To keep this library small and focused only on the blockchains you want to use you can import each blockchain separately. The blockchains you don't import can't be used.

EOSIO

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

Ethereum

npm i -S scatterjs-plugin-web3

Tron

npm i -S scatterjs-plugin-tron

---

NodeJS and babel/webpack.

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.

---

Importing ScatterJS into your project.

Now that you have scatterjs-core and a plugin of your choosing you can go ahead and import it into your project.

You should be doing this early in your application, somewhere like your main.js or app.js, and not inside sub-pages.

Let's take eosjs as an example.

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

ScatterJS.plugins( new ScatterEOS() );

ScatterJS Usage

This library catches Scatter Desktop, Scatter Mobile and Scatter Classic ( extension ). You only need to write code once, and you will instantly support any Scatter the user has.

Making a connection

// 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(...);
});

---

Using a signature provider ( plugin )

You can instantiate most plugins in two ways.

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

// Or using a hook provider.
const eos = Eos({httpEndpoint:'', signatureProvider:ScatterJS.scatter.eosHook(network)});

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.

---

Looking for the old scatter-js package?

Click Here to go to scatter-js@2.5.1