链接钱包

开始​

您 完成部件设置后，使用 WidgetsFactory 创建一个连接部件。 为了挂载 Widget，请调用 mount() 函数，并将 id 属性，您 希望将其挂载到目标元素上。

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" />);
}

参数​

小工具参数

参数会被视为瞬时参数，并在卸载 widget 后重置。

配置​

当您 首次创建 widget 时，您 可以传递一个可选的配置对象来设置它。例如，传递主题将以该主题创建 widget。如果没有传递配置对象，则会默认设置。

小部件配置

您 可以通过调用 update() 方法。

财产	说明
ConnectWidgetConfiguration	要与 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}});

有关所有Checkout Widget 配置（如主题）的更多信息，请查看设置页面的配置部分。

活动​

当用户执行关键操作或按键状态时，将发出连接小组件 事件 已达到。下表列出了 Connect Widget 的可能事件。

活动类型	说明	事件有效载荷
ConnectEventType.SUCCESS	用户成功连接了自己的钱包。	ConnectionSuccess
ConnectEventType.FAILURE	连接用户的钱包时出现问题。如果用户只是拒绝连接请求，则不应发生这种情况。该小部件将允许他们重试。	ConnectionFailed
ConnectEventType.CLOSE_WIDGET	用户点击了部件上的关闭按钮。通常应将此连接起来，调用部件的 unmount() 功能。

您 可以使用 addListener() 函数来访问事件和提供者处理程序。使用 removeListener() 函数来停止监听该事件。

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);

代码示例​

此示例代码给出 您 这是将 Connect 小部件集成到应用程序并侦听其事件的良好起点。

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" />);
}