@eosdt/widget

v1.2.25

Published

3 years ago

- Install `@eosdt/widget` package ```bash npm i @eosdt/widget ``` - In your code: ```typescript import Equilibrium, { setStyles } from "@eosdt/widget";

Downloads

0High
0Medium
0Low

eosdtadmin

Equilibrium Framework Widgets

Getting started

VIA npm

Install @eosdt/widget package

npm i @eosdt/widget

In your code:

import Equilibrium, { setStyles } from "@eosdt/widget";

/**
 * or you can inject into window object by
 * import "@eosdt/widget/lib/inject";
 * or
 * import "@eosdt/widget/lib/inject-scatter";
 */

setStyles(); // Load styles (you need not call this function using window injector)

Equilibrium.init('youracntname', 'http://eos.node.url:port', (tx, opts) => {
  // sign and send your transactions here
});

Equilibrium.Widgets.Position(
  /* target HTMLElement */ document.querySelector("#widget")
); // insert widget in any dom node

VIA cdn

Include Equilibrium widget injector somewhere in your html, eg.

<!doctype html>
<html>
...
<body>
...
<script async src="https://cdn.eosdt.com/widget/inject.js"></script>
<!-- 
  or you can use scatter injector
  <script async src="https://cdn.eosdt.com/widget/injectScatter.js"></script>
-->
</body>
</html>

Initialization

// When widget code is injected 'equilibrium:loaded' event is fired
if (!window.Equilibrium) {
	window.addEventListener('equilibrium:loaded', () => {
		// Here we can inject EOS client into our widget (or use injector with bundled connector)
		window.Equilibrium.injectEOSClient(client);
	})
} else {
	window.Equilibrium.injectEOSClient(client);
}
...
// When client is injected 'equilibrium:ready' event is fired
window.addEventListener('equilibrium:ready'), () => {
	window.Equilibrium.Widgets.Position(
		/* target HTMLElement */ document.querySelector("#widget")
	);
});

Injectors

inject.js - contains widget injectors without EOS blockchain client
injectScatter.js - contains widget injectors with bundled connector to Scatter wallet

API

  import Equilibrium, { setStyles } from "@eosdt/widget";

setStyles()

Injects basic styles

Equilibrium

Interface


interface Injector {
  iframeMode: boolean;
  isReady: () => boolean;
  init: (accountName: string, endpoint: string, onTransaction: (txObj: TxObj, options: TxOpt) => Promise<void>) => void;
  injectEOSClient: (client: Client) => void;
  setLocale: (locale: { [key: string]: string[] }) => void;
  getContext: () => Context;
  Widgets: {
    Position: (el: HTMLElement) => Widget | null;
    Scatter?: (el: HTMLElement) => Widget | null;
  };
}

iframeMode - set this property to true to mount widget in iframe. NB This should be set befor calling init() method

Equilibrium.iframeMode = true;
Equilibrium.init(...);

isReady() - returns ready state of widgets(widgets are ready when the client is injected and initialized)
init(accountName: string, endpoint: string, onTransaction: (txObj, txOpt) => Promise) - initialize widgets with dummy client, you need to specify your account name, EOS node endpoint and transaction signer

window.addEventListener('equilibrium:ready'), () => {
	window.Equilibrium.Widgets.Position(
		/* target HTMLElement */ document.querySelector("#widget")
	);
});
  
window.Equilibrium.init('someeosaccnt', 'https://api.eosn.io:443', (txObj, txOpt) => {
  ...
  // here you can sign and sent your transactions
});

injectEOSClient(client: Client) - injects EOS Client and fires equilibrium:ready event, you can either have your own client implementation based on the interface below, or use bundle with built-in scatter connector
getContext() - returns widget context(interface is described below)
setLocale(locale) - sets locale messages for widget(NB you may update widget instance to see changes)

const widget = Equilibrium.Widgets.Position(...);
// when iframeMode === true -> widget === null

Equilibrium.setLocale({
  "Waiting for account": ["Wird geladen"],
  "Deposit": ["Deponieren"],
  "Withdraw": ["Zurückziehen"],
  "Generate": ["Generieren"],
  "Payback": ["Zurückzahlen"],
  "Total collateralized:": ["Total besichert:"],
  "Debt generated:": ["Schuld generiert:"],
  "Manage position of <i class=\"position-manage__username\">${...}</i>": [
    "Position verwalten von <i class=\"position-manage__username\">",
    "</i>"
  ],
  "Collateralization ratio:": ["Kollatarisierungsrate:"],
  "Liquidation price:": ["Liquidationspreis:"],
  "Max EOS to withdraw:": ["Max EOS zum zurückziehen:"],
  "Max EOSDT to generate:": ["Max EOSDT zum generieren:"],
  "OK": ["OK"],
  "Wrong data": ["Falshe Eingabe"]
});

widget.update({});

Widgets.Position(el: HTMLElement) - mount Position widget to DOM Node
Widgets.Scatter(el: HTMLElement) - mount Scatter login/logout widget to DOM Node. NB. Only available on injector with Scatter connector

Context

import { EventEmitter } from "events";

interface Context {
  client?: Client;
  events: EventEmitter;
}

Eos Client

Interface

import { JsonRPC, Api } from 'eosjs';

interface Account {
  name: string;
  authority: string;
  publicKey: string;
  blockchain: string;
  chainId: string;
}

export interface Client {
  api: Api;
  rpc: JsonRpc;
  getAccount: () => Account | false;
}

Events

Window events

Listen to events via window.addEventListener(name, callback)

'equilibrium:loaded' event is fired when window.Equilibrium becomes available
'equilibrium:ready' event is fired when EOS client is injected into widgets

Context events

Are available via window.Equilibrium.getContext().events

'account' event should be emitted on account change(this also applies to logout)

const { events } = window.Equilibrium.getContext();
...
events.emit('account'); // this should be fired in your code after login, logout or account change