# 链接钱包

### 开始[​](https://docs.immutable.com/docs/zkEVM/products/checkout/widgets/connect?frameworks=react#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 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" />);
}
```

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

小工具参数

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

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

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

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

当用户执行关键操作或按键状态时，将发出连接小组件 事件 已达到。下表列出了 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);
```

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

此示例代码给出 您 这是将 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" />);
}
```
