After you have finished setting up the widget, use the WidgetsFactory to create a connected widget. To mount the widget, call the mount() function with the id attribute that you wish to mount on the target element.
Parameters are treated as transient and reset after uninstalling the widget.
Asset
Note
fromTokenAddress
The exchange address for the ERC20 contract. Use NATIVE to set the exchange slave token to IMX. This will pre-populate the token field in the form.
toTokenAddress
The address of the ERC20 contract being exchanged to. Use NATIVE to set the exchange token to IMX.This will pre-populate the token field on the form.
amount
The number of ERC20 tokens to be exchanged.
walletProviderName
The name of the wallet provider to use for the exchange widget.
import { checkout } from "@imtbl/sdk";
// @ts-ignore
const swap = widgets.create(checkout.WidgetType.SWAP,
{ config: { theme: checkout.WidgetTheme.DARK }}
);
// When calling the mount function, pass in the parameters to use
swap.mount('swap', { fromTokenAddress: '0x123', toTokenAddress: '0x999', amount: '10' })
When you first create a widget, you can pass an optional configuration object to set it up. For example, passing a theme will create the widget with that theme. if no configuration object is passed, it will be set by default.
Widget parameters
You can do this by calling the update() method.
Asset
Note
SwapWidgetConfiguration
The type of configuration to use with the Swap Widget.
import { checkout } from "@imtbl/sdk";
//@ts-ignore When creating the widget, pass in the configuration
const swap = widgets.create(checkout.WidgetType.SWAP,
{ config: { theme: checkout.WidgetTheme.DARK }}
);
// Update the widget config by calling update()
swap.update({config: {theme: checkout.WidgetTheme.LIGHT}});
Swap widget events are triggered when the user performs a critical action or reaches a critical state. Reached. The following is a list of events that can occur in the Swap Widget.
Type
Note
Activity Payload
SwapEventType.SUCCESS
The user successfully connects their wallet.
SwapSuccess
SwapEventType.FAILURE
There was a failure when exchanging tokens.
SwapFailed
SwapEventType.REJECTED
Swaps were rejected.
SwapRejected
SwapEventType.CLOSE_WIDGET
The user clicks the close button on the widget. This should normally be connected to call the widget's unmount() function.
All widget events are of type IMTBL_SWAP_WIDGET_EVENT.
Pass key For example checkoutWidgets.SwapEventType.SUCCESS, checkoutWidgets.SwapEventType.CLOSE_WIDGET).