跨链桥

开始​

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

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

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

export function App() {
  // create Checkout SDK

  // Initialise widgets, create bridge widget and mount
  useEffect(() => {
    (async () => {
      const widgets = await checkoutSDK.widgets({
        config: { theme: checkout.WidgetTheme.DARK },
      });
      const bridge = widgets.create(checkout.WidgetType.BRIDGE);
      bridge.mount('bridge');
    })();
  }, []);

  return <div id="bridge" />;
}

参数​

小工具参数

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

参数	说明
tokenAddress	要跨链桥 的令牌的合同地址。这将预填表单中的令牌字段。
amount	令牌金额跨链桥 。这将预填表单中的金额字段。
walletProviderName	跨链桥 widget 使用的钱包提供商名称。

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

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

// When calling the mount function, pass in the parameters to use
bridge.mount('bridge', { fromTokenAddress: '0x123', amount: '10' })

配置​

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

小部件配置

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

财产	说明
BridgeWidgetConfiguration	与跨链桥 widget 一起使用的配置类型。

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

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

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

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

活动​

跨链桥 当用户执行关键操作或达到关键状态时，就会触发部件事件。 事件。下面是跨链桥 widget 可能发生的事件表。

活动类型	说明	事件有效载荷
BridgeEventType.TRANSACTION_SENT	用户成功发送了桥接交易。	BridgeTransactionSent
BridgeEventType.FAILURE	在桥接令牌时出现了问题。	BridgeFailed
BridgeEventType.CLOSE_WIDGET	用户点击了部件上的关闭按钮。通常应将此连接起来，调用部件的 unmount() 功能。

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

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

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

// add event listeners for the bridge widget
bridge.addListener(checkout.BridgeEventType.TRANSACTION_SENT, (data: checkout.BridgeTransactionSent) => {
  console.log("success", data);
});

bridge.addListener(checkout.BridgeEventType.FAILURE, (data: checkout.BridgeFailed) => {
  console.log("failure", data);
});

bridge.addListener(checkout.BridgeEventType.CLOSE_WIDGET, () => {
  bridge.unmount();
});

// remove event listeners for the bridge widget
bridge.removeListener(checkout.BridgeEventType.TRANSACTION_SENT);

bridge.removeListener(checkout.BridgeEventType.FAILURE);

bridge.removeListener(checkout.BridgeEventType.CLOSE_WIDGET);

代码示例​

本示例代码为您 提供了将跨链桥 部件集成到应用程序并监听其事件的良好起点。

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

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

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

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

    bridge.mount("bridge");

    bridge.addListener(checkout.BridgeEventType.TRANSACTION_SENT, (data: checkout.BridgeTransactionSent) => {
      console.log("success", data);
    });
    bridge.addListener(checkout.BridgeEventType.FAILURE, (data: checkout.BridgeFailed) => {
      console.log("failure", data);
    });
    bridge.addListener(checkout.BridgeEventType.CLOSE_WIDGET, () => {
      bridge.unmount();
    });
  }, [bridge])


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