# 交换代币

### 开始[​](https://docs.immutable.com/docs/zkEVM/products/checkout/widgets/swap#getting-started) <a href="#getting-started" id="getting-started"></a>

您 完成部件设置后，使用 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" />);
}
```

### 参数[​](https://docs.immutable.com/docs/zkEVM/products/checkout/widgets/swap#parameters) <a href="#parameters" id="parameters"></a>

小工具参数

参数会被视为瞬时参数，并在卸载 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' })
```

### 配置[​](https://docs.immutable.com/docs/zkEVM/products/checkout/widgets/swap#configuration) <a href="#configuration" id="configuration"></a>

当您 首次创建 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}});
```

### 活动[​](https://docs.immutable.com/docs/zkEVM/products/checkout/widgets/swap#events) <a href="#events" id="events"></a>

当用户执行了关键操作或达到关键状态时，就会触发交换部件事件。 已达到。下面是 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);
```

### 代码示例[​](https://docs.immutable.com/docs/zkEVM/products/checkout/widgets/swap#sample-code) <a href="#sample-code" id="sample-code"></a>

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