# 跨链桥

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

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

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

小工具参数

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

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

当您 首次创建 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 配置（如主题）的更多信息，请查看设置页面的配置部分。

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

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

### 代码示例[​](https://docs.immutable.com/docs/zkEVM/products/checkout/widgets/bridge#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 [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" />);
}
```
