Documentation

Setting up for Web Applications

The easiest way to use Scatter from web and JavaScript applications is to use the official Scatter JavaScript SDK.

If you are still using scatter-js please move over to scatterjs-core so that you can take advantage of the new features, speed fixes, new blockchains, and support for SSL socket connections which allow Scatter Desktop to be used on Safari, Firefox, Edge, Opera, and all other browsers.




Installation using NPM

First you'll need to get the scatterjs-core package from NPM. This package provides the base API for using Scatter. It doesn't come with any way to interact with blockchains so we'll be adding in plugins as well.
npm i -S scatterjs-core

Now that you have the core package you need to select the type of plugins/blockchains you want to interact with and import them.
// eosjs
npm i -S scatterjs-plugin-eosjs     // For using [email protected] and below
npm i -S scatterjs-plugin-eosjs2    // For using [email protected] and up

// ethereum
npm i -S scatterjs-plugin-web3

// tron
npm i -S scatterjs-plugin-tron


Babel/Webpack issues
You might run into babel/webpack issues in some NodeJS frameworks. If you do you can simply run the following command and it will fix them.
npm i -D @babel/runtime

Installation for HTML/JS Projects

Chose the plugins you want to import and simply leave out the rest, but remember that you must have the core package.
// Add these to your <head></head>
<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>

Package Names

You can set these yourself in NodeJS but in HTML/JS you will have to use them.
Note that eosjs and eosjs2 have conflicting names, you can not use them both.

Package Name Import Name
scatterjs-plugin-eosjs ScatterEOS
scatterjs-plugin-eosjs2 ScatterEOS
scatterjs-plugin-web3 ScatterETH
scatterjs-plugin-tron ScatterTron




Using ScatterJS

Now that you have all the required packages import the core package and the plugins you need for your application.
import ScatterJS from 'scatterjs-core';
import ScatterEOS from 'scatterjs-plugin-eosjs';

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

For HTML/JS these will be bound to the `window`, so you don't have to import them.
You can simply use them from the import name.




Connecting to Scatter
This method connects to all types of Scatter ( classic, desktop, and mobile ) using one simple call.
//
ScatterJS.scatter.connect("Put_Your_App_Name_Here").then(connected => {
    // User does not have Scatter Desktop, Mobile or Classic installed.
    if(!connected) return false;

    const scatter = ScatterJS.scatter;
    -----------------------
    ^^^ See the section below about storing this in state.
    -----------------------

    window.ScatterJS = null;
    -----------------------
    ^^^ See the section below about nulling out the window reference
    -----------------------
});


Please remember that in vanilla javascript you can not use the => operator for lambda functions. You will need to write out full functions using .then(function(connected){ ... });



Keeping a connected reference to Scatter in state
The initial connection with Scatter has a little bit of overhead, so you really only want one persistent reference to the ScatterJS object through-out your application's lifecycle. The best practice is to keep a reference to ScatterJS within your state controller, like MobX, Redux, Vuex, or whatever you might be using.
// This isn't great.
const scatter = ScatterJS.scatter;

-----------------------
Here are some options for various frameworks.
-----------------------

// Redux
dispatch(setScatter(ScatterJS.scatter));

// Vuex ( when using a setScatter action on your store )
store.dispatch('setScatter', ScatterJS.scatter);

// Angular Services
ScatterService.setScatter(ScatterJS.scatter);

// I think you get the point.

Remove the window reference!

Always remember to null out the window.ScatterJS reference, if you don't extensions will be able to catch that reference and make requests to the user's Scatter on behalf of your domain, and you will have to take responsibility.

window.ScatterJS = null;

What now?

Continue to the Signature Providers documentation to learn how to use various plugins to get signatures for transactions from a user's Scatter.