@susy-js/light.js

A high-level reactive JS library optimized for light clients.

Full Documentation

Getting Started

yarn add @susy-js/light.js rxjs # RxJS is a needed peer-dependency

Usage

Reactively observe JSONRPC methods:

import light, { defaultAccount$ } from '@susy-js/light.js';

light.setProvider(/* put your sophon provider here */);

defaultAccount$().subscribe(publicAddress => console.log(publicAddress));
// Outputs your public address 0x...
// Everytime you change your default account (e.g. via MetaMask), it will output your new public address

All RxJS tools are available for manipulating Observables:

import { balanceOf$, blockNumber$, defaultAccount$ } from '@susy-js/light.js';
import { filter, map, switchMap } from 'rxjs/operators';

// Only log pair blocks
blockNumber$()
  .pipe(filter(n => n % 2 === 0))
  .subscribe(console.log);

// Get the balance of the default account
// Will update when balance or default account changes
defaultAccount$()
  .pipe(
    switchMap(balanceOf$),
    map(value => +value) // Return number instead of BigNumber
  )
  .subscribe(console.log);

// There's actually an alias for the above Observable:
import { myBalance$ } from '@susy-js/light.js';
myBalance$().subscribe(console.log);

Contract support:

import { defaultAccount$, makeContract } from '@susy-js/light.js';
import { map, switchMap } from 'rxjs/operators';

defaultAccount$()
  .pipe(
    switchMap(defaultAccount =>
      makeContract(/* contract address */, /* abi */)
        .myMethod$(defaultAccount) // Calling method of contract with arguments
    )  )
  .subscribe(console.log); // Will log the result, and everytime the result changes

All available methods are documented in the docs.

Usage with React

We provide another library, @susy-js/light.js-react, with a higher-order component to use these Observables easily with React apps.

import light from 'susy/ligth.js-react';
import { syncStatus$ } from '@susy-js/light.js';

@light({
  mySyncVariable: syncStatus$
})
class MyClass extends React.Component {
  render() {
    return <div>{JSON.stringify(this.props.mySyncVariable)}</div>;
  }
}

The UI will automatically update when the syncing state changes.