Connect Wallet

Start

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.

import { useEffect } from 'react';
import { checkout } from '@imtbl/sdk';

 // create Checkout SDK
 const checkoutSDK = new checkout.Checkout();

export function App() {
  // Initialise widgets, create connect widget and mount
  useEffect(() => {
    (async () => {
      const widgets = await checkoutSDK.widgets({
        config: { theme: checkout.WidgetTheme.DARK },
      });
      const connect = widgets.create(checkout.WidgetType.CONNECT)
      connect.mount("connect");
    })();
  }, []);

  return (<div id="connect" />);
}

Parameter​

Widget parameters

Parameters are treated as transient and are reset after uninstalling the widget.

Deploy​

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 Configuration

You can configure a widget by calling the update() method.

Asset	Note
ConnectWidgetConfiguration	The type of configuration to use with the Connect Widget.

import { checkout } from "@imtbl/sdk";

//@ts-ignore When creating the widget, pass in the configuration
const connect = widgets.create(checkout.WidgetType.CONNECT, { config: { theme: checkout.WidgetTheme.DARK }});

// Update the widget config by calling update()
connect.update({config: {theme: checkout.WidgetTheme.LIGHT}});

For more information on all Checkout Widget configurations (such as themes), see the Configuration section of the Settings page.

Activity

The Connect Widget event is raised when the user performs a critical action or key state. The following table lists the possible events for the Connect widget.

Type	Note	Activity Payload
ConnectEventType.SUCCESS	The user successfully connects their wallet.	ConnectionSuccess
ConnectEventType.FAILURE	Problems connecting to the user's wallet. This should not happen if the user simply refuses the connection request. The widget will allow them to retry.	ConnectionFailed
ConnectEventType.CLOSE_WIDGET	The user clicks the close button on the widget. This should normally be connected to call the widget's unmount() function.

You can use the addListener() function to access event and provider handlers. Use the removeListener() function to stop listening to the event.

import { checkout } from "@imtbl/sdk";

//@ts-ignore
const connect = widgets.create(checkout.WidgetType.WALLET, 
  { config: { theme: checkout.WidgetTheme.DARK }}
);

// add event listeners for the connect widget
connect.addListener(checkout.ConnectEventType.SUCCESS, (data: checkout.ConnectionSuccess) => {
  console.log("success", data);
});

connect.addListener(checkout.ConnectEventType.FAILURE, (data: checkout.ConnectionFailed) => {
  console.log("failure", data);
});

connect.addListener(checkout.ConnectEventType.CLOSE_WIDGET, () => {
  connect.unmount();
});

// remove event listeners for the connect widget
connect.removeListener(checkout.ConnectEventType.SUCCESS);

connect.removeListener(checkout.ConnectEventType.FAILURE);

connect.removeListener(checkout.ConnectEventType.CLOSE_WIDGET);

Code Example

This sample code gives you a good starting point for integrating the Connect widget into your application and listening to its events.

import { useEffect, useState } from 'react';
import { checkout } from '@imtbl/sdk';

 // create Checkout SDK
 const checkoutSDK = new checkout.Checkout();

export function App() {
 const [connect, setConnect] =
 useState<checkout.Widget<typeof checkout.WidgetType.CONNECT>>();
  
 // Initialise widgets, create connect widget
  useEffect(() => {
    (async () => {
      const widgets = await checkoutSDK.widgets({
        config: { theme: checkout.WidgetTheme.DARK },
      });
      const connect = widgets.create(checkout.WidgetType.CONNECT, { config: { theme: checkout.WidgetTheme.DARK }})
      setConnect(connect)     
    })();
  }, []);

  // mount connect widget and add event listeners
  useEffect(() => {
    if(!connect) return;

    connect.mount("connect");

    connect.addListener(checkout.ConnectEventType.SUCCESS, (data: checkout.ConnectionSuccess) => {
      console.log("success", data);
    });
    connect.addListener(checkout.ConnectEventType.FAILURE, (data: checkout.ConnectionFailed) => {
      console.log("failure", data);
    });
    connect.addListener(checkout.ConnectEventType.CLOSE_WIDGET, () => {
      connect.unmount();
    });
  }, [connect])


  return (<div id="connect" />);
}