交换代币

开始​

您 完成部件设置后，使用 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 swap widget and mount
  useEffect(() => {
    (async () => {
      const widgets = await checkoutSDK.widgets({
        config: { theme: checkout.WidgetTheme.DARK },
      });
      const swap = widgets.create(checkout.WidgetType.SWAP)
      swap.mount("swap");
    })();
  }, []);

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

参数​

小工具参数

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

财产	说明
fromTokenAddress	ERC20合约的交换地址。使用 NATIVE 将交换从令牌设置为 IMX.这将在表单中预填标记字段。
toTokenAddress	交换到的 ERC20 合约的地址。使用 NATIVE 将交换令牌设置为 IMX.这将在表单中预填标记字段。
amount	要交换的 ERC20 代币数量。
walletProviderName	交换部件要使用的钱包提供商名称。

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' })

配置​

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

小部件配置

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

财产	说明
SwapWidgetConfiguration	与 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 可能发生的事件列表。

活动类型	说明	事件有效载荷
SwapEventType.SUCCESS	用户成功连接了自己的钱包。	SwapSuccess
SwapEventType.FAILURE	交换令牌时出现了问题。	SwapFailed
SwapEventType.REJECTED	掉期交易被拒绝。	SwapRejected
SwapEventType.CLOSE_WIDGET	用户点击了部件上的关闭按钮。通常应将此连接起来，调用部件的 unmount() 功能。

所有部件事件的类型都是 IMTBL_SWAP_WIDGET_EVENT.

通过 密钥 例如 checkoutWidgets.SwapEventType.SUCCESS, checkoutWidgets.SwapEventType.CLOSE_WIDGET).

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

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

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

swap.addListener(checkout.SwapEventType.FAILURE, (data: checkout.SwapFailed) => {
  console.log("failure", data);
});

swap.addListener(checkout.SwapEventType.REJECTED, (data: checkout.SwapRejected) => {
  console.log("failure", data);
});

swap.addListener(checkout.SwapEventType.CLOSE_WIDGET, () => {
  swap.unmount();
});

// remove event listeners for the swap widget
swap.removeListener(checkout.SwapEventType.SUCCESS);

swap.removeListener(checkout.SwapEventType.FAILURE);

swap.removeListener(checkout.SwapEventType.REJECTED);

swap.removeListener(checkout.SwapEventType.CLOSE_WIDGET);

代码示例​

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

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

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

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

    swap.mount("swap");

    swap.addListener(checkout.SwapEventType.SUCCESS, (data: checkout.SwapSuccess) => {
      console.log("success", data);
    });
    swap.addListener(checkout.SwapEventType.FAILURE, (data: checkout.SwapFailed) => {
      console.log("failure", data);
    });
    swap.addListener(checkout.SwapEventType.REJECTED, (data: checkout.SwapRejected) => {
      console.log("rejected", data);
    });
    swap.addListener(checkout.SwapEventType.CLOSE_WIDGET, () => {
      swap.unmount();
    });
  }, [swap])


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