Initialization
After Installation, the next step to use XRPL Embed is to Initialize the SDK and
that is achieved by init()
function.
Please note that these are the most critical steps where you need to pass on different parameters according to the preference of your project. Additionally, Whitelabeling and Custom Authentication have to be configured within this step, if you wish to customise your XRPL Instance.
Instantiating XRPL Embed
Import the Torus
class from @toruslabs/xrpl-embed
.
- ES6
- CommonJS
import { Torus } from "@toruslabs/xrpl-embed";
const Torus = require("@toruslabs/xrpl-embed");
Assign the Torus
class to a variable
const torus = new Torus(Options);
The Torus constructor takes an object with TorusCtorArgs
as input.
Arguments
Options
- Table
- Interface
Parameter | Type | Description | Mandatory | Default |
---|---|---|---|---|
options object | TorusCtorArgs | modalZIndex : Z-index of the modal and iframe. | No | 99999 |
export interface TorusCtorArgs {
modalZIndex?: number;
}
Initializing XRPL Embed
init()
function is used to initialize the XRPL Embed SDK. It takes an object
with TorusParams
as input.
Arguments
TorusParams
- Table
- Interface
Parameter | Type | Options | Description | Mandatory |
---|---|---|---|---|
buttonPosition | BUTTON_POSITION_TYPE | bottom-left , top-left , bottom-right , top-right | Determines where the torus widget is visible on the page. | No |
network | NetworkInterface | XRPL Network Object | No | |
buildEnv | TORUS_BUILD_ENV_TYPE | production , development , testing | Build Environment of Torus. | No |
enableLogging | boolean | Enables or disables logging. | No | |
showTorusButton | boolean | whether to show/hide torus widget. | No | |
useLocalStorage | boolean | Prefers to use localStorage instead of sessionStorage for torus iframe. Allows longer lived sessions. | No |
export interface TorusParams {
/**
* Determines where the torus widget is visible on the page.
* @defaultValue bottom-left
*/
buttonPosition?: BUTTON_POSITION_TYPE;
/**
* Torus Network Object
*/
network?: NetworkInterface;
/**
* Build Environment of Torus.
*
* production uses https://xrpl.tor.us,
*
* development uses http://localhost:4050 (expects torus-website to be run locally),
*
* testing uses https://xrpl-testing.tor.us (latest internal build)
* @defaultValue production
*/
buildEnv?: TORUS_BUILD_ENV_TYPE;
/**
* Enables or disables logging.
*
* Defaults to false in prod and true in other environments
*/
enableLogging?: boolean;
/**
* whether to show/hide torus widget.
*
* Defaults to true
* @defaultValue true
*/
showTorusButton?: boolean;
/**
* Prefers to use localStorage instead of sessionStorage for torus iframe. Allows longer lived sessions
*
* Defaults to false
* @defaultValue false
*/
useLocalStorage?: boolean;
}
export const BUTTON_POSITION = {
BOTTOM_LEFT: "bottom-left",
TOP_LEFT: "top-left",
BOTTOM_RIGHT: "bottom-right",
TOP_RIGHT: "top-right",
} as const;
export interface NetworkInterface {
/**
* Block explorer url for the chain
* @example https://ropsten.etherscan.io
*/
blockExplorerUrl: string;
/**
* Logo url for the base token
*/
logo: string;
/**
* Name for ticker
* @example 'Binance Token', 'Ethereum', 'Matic Network Token'
*/
tickerName: string;
/**
* Symbol for ticker
* @example BNB, ETH
*/
ticker: string;
/**
* RPC target Url for the chain
* @example https://ropsten.infura.io/v3/YOUR_API_KEY
*/
rpcTarget: string;
/**
* Chain Id parameter(hex with 0x prefix) for the network. Mandatory for all networks. (assign one with a map to network identifier for platforms)
* @example 0x1 for mainnet, 'loading' if not connected to anything yet or connection fails
* @defaultValue 'loading'
*/
chainId: string;
/**
* Display name for the network
*/
displayName: string;
/**
* xrpl Network Key
* "mainnet", "testnet", "devnet"
*/
networkKey: string;
}
export const TORUS_BUILD_ENV = {
PRODUCTION: "production",
DEVELOPMENT: "development",
TESTING: "testing",
} as const;
network
- Table
- Interface
Parameter | Type | Description | Mandatory |
---|---|---|---|
blockExplorerUrl | string | Block explorer url for the chain | Yes |
logo | string | Logo url for the base token | Yes |
tickerName | string | Name for ticker | Yes |
ticker | string | Symbol for ticker | Yes |
rpcTarget | string | RPC target Url for the chain | Yes |
chainId | string | Use 0x1 as chainId for xrpl mainnet, 0x2 for testnet and 0x3 for devnet. | Yes |
displayName | string | Display name for the network | Yes |
networkKey | string | xrpl Network Key | Yes |
export interface NetworkInterface {
/**
* Block explorer url for the chain
* @example https://ropsten.etherscan.io
*/
blockExplorerUrl: string;
/**
* Logo url for the base token
*/
logo: string;
/**
* Name for ticker
* @example 'Binance Token', 'Ethereum', 'Matic Network Token'
*/
tickerName: string;
/**
* Symbol for ticker
* @example BNB, ETH
*/
ticker: string;
/**
* RPC target Url for the chain
* @example https://ropsten.infura.io/v3/YOUR_API_KEY
*/
rpcTarget: string;
/**
* Chain Id parameter(hex with 0x prefix) for the network. Mandatory for all networks. (assign one with a map to network identifier for platforms)
* @example 0x1 for mainnet, 'loading' if not connected to anything yet or connection fails
* @defaultValue 'loading'
*/
chainId: string;
/**
* Display name for the network
*/
displayName: string;
/**
* xrpl Network Key
*/
networkKey: string;
}
Example
await torus.init({
buildEnv: "developement", // "production", or "developement" are also the option
enableLogging: true, // default: false
network: {
chainId: "0x1",
logo: "", // TODO
rpcTarget: "https://ripple-node.tor.us",
wsTarget: "wss://s2.ripple.com",
ticker: "XRP",
tickerName: "XRPL",
displayName: "xrpl mainnet",
blockExplorerUrl: "https://livenet.xrpl.org",
networkKey: "mainnet",
},
showTorusButton: false, // default: true
useLocalStorage: true, // default: false to use sessionStorage
buttonPosition: "top-left", // default: bottom-left
});