Equilibrium Framework Widgets
Getting started
VIA npm
- Install
@eosdt/widgetpackage
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 nodeVIA 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:readyevent, 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
Positionwidget to DOM Node -
Widgets.Scatter(el: HTMLElement) - mount
Scatterlogin/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