WertWidget initializer

@wert-io/widget-initializer is a helper that assists you with integrating the Wert widget into your web app.

• WertWidget initializer
  • Installation
  • Usage
  • Options
    • General options
    • Smart contract options
    • Pre-filling user data
    • Appearance and restrictions
    • Extra object structure
      • Adding NFT information
      • Adding default wallets
    • Listeners
      • Initial event listeners
      • Events
  • Widget class methods
    • Showing the module
    • Closing the module
    • Switching themes without reload
    • Adding event listeners
    • Removing event listeners
  • Additional notes
    • Boolean usage

Installation

npm install @wert-io/widget-initializer

Usage

import WertWidget from '@wert-io/widget-initializer';

First of all, you need to create a widget class:

const wertWidget = new WertWidget(options);

Options

General options

Smart contract options

Pre-filling user data

Appearance and restrictions

Extra object structure

The extra object is an optional object that can contain some additional data.

extra: {
  item_info: Object,
  wallets: Array,
}

Adding NFT information

You can add the following parameters to the item_info to display your NFT's name, image, the author’s avatar, the author’s name and the seller’s name in the widget.

| Property | Type | Description | |---------------------|--------|----------------------------------------------------------------------------------------| | author_image_url | String | The URL of the author's avatar. Example: https://something.com/images/image.jpg | | author | String | The name of the author | | image_url | String | The URL of the NFT's image | | name | String | The name of the NFT | | category | String | The category of the NFT | | seller | String | The name of the NFT's seller | | header | String | The header to be shown instead of 'Buy token' |

Adding default wallets

You can define the array of default wallets that will be prefilled when the user changes cryptocurrency. Non-valid addresses will be ignored.

The wallet object structure:

| Property | Type | Description | |----------|--------|-------------------------------------------------------------------------------------------------------------------------| | name | String | Example: ETH. See the list of supported currencies. | | network | String | Example: ethereum. See the list of supported currencies. | | address | String | The wallet address. Non-valid addresses will be ignored. |

Listeners

Initial event listeners

Simply include the listeners object in the following format, where the key is the event type and the value is your callback.

const widget = new WertWidget({
  ...options,
  listeners: {
    position: data => console.log('step:', data.step),
  },
});

Events

{
  name: String
  message: String
}

{ 
  status: String
  payment_id: String 
  order_id: String
  tx_id: String // if available
}

{
  step: String
}

{ 
  ticker: String, 
  fee_percent: String,
  currency_amount: String,
  fee_amount: String,
  commodity_amount: String,
  purchase_amount: String,
  miner_fee: String,
  currency_miner_fee: String
}

Widget class methods

| Method | Description | |--------------------------|-------------------------------------------| | open | Mounts module in DOM and makes it visible | | updateTheme | Switches the theme without reload | | addEventListeners | Adds event listeners | | removeEventListeners | Removes event listeners | | close | Closes the widget |

Showing the module

After creating an instance of the widget class, you can call the open method to show the module to the user:

wertWidget.open();

Closing the module

You can call the close method to close and remove the widget modal at any time:

wertWidget.close();

Switching themes without reload

To switch to another theme without reloading the whole widget you can use the updateTheme method:

wertWidget.updateTheme({
  theme: 'dark', // undefined — for the default light theme 
  colors: {
    // supported colors listed in options table above 
    color_buttons: 'red',
  },
});

Please note that this method should be called only after the widget is fully loaded.

Adding event listeners

If you want to listen to the widget events, you can use the addEventListeners method. Pass an object of listeners to add listeners, potentially rewriting the existing listeners of the same type:

wertWidget.addEventListeners({
  position: data => console.log('step:', data.step),
});

Removing event listeners

If you want to stop listening to the widget events, you can use the removeEventListeners method. Pass an event type, array of the event types or nothing to remove a listener, multiple listeners or all listeners:

wertWidget.removeEventListeners('rate-update');

or

wertWidget.removeEventListeners([ 'rate-update', 'payment-status' ]);

or

wertWidget.removeEventListeners();

Additional notes

Additional information about the library usage

Boolean usage

Please note that any value passed to the property with the boolean type will be considered true. Example: is_crypto_hidden: "test" will be equal to is_crypto_hidden: true.