> For the complete documentation index, see [llms.txt](https://gmlayer.gitbook.io/english-1/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://gmlayer.gitbook.io/english-1/dapp/tool/cross-chain-bridge.md).

# Cross-chain bridge

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

After you have finished setting up the widget, use the WidgetsFactory to create a cross-link bridge widget. To mount the widget, call the `mount()` function with the `id` attribute you wish to mount on the target element.

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

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

Widget parameters

Parameters are treated as transient and reset after uninstalling the widget.

| Parameter            | Note                                                                                                             |
| -------------------- | ---------------------------------------------------------------------------------------------------------------- |
| `tokenAddress`       | The contract address of the token to the Cross-chain bridge. This will pre-populate the token field in the form. |
| `amount`             | The token amount for the Cross-chain bridge. This will pre-populate the Amount field of the form.                |
| `walletProviderName` | The name of the wallet provider used by the Cross-chain bridge 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' })
```

### Deploy

When you first create a widget, you can pass an optional configuration object to set it up. For example, passing a theme will create the widget with that theme. if no configuration object is passed, it will be set by default.

Widget parameters

You can do this by calling the `update()` method.

| Asset                       | Note                                                                 |
| --------------------------- | -------------------------------------------------------------------- |
| `BridgeWidgetConfiguration` | The type of configuration to use with the Cross-chain bridge 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 }});
```

For more information on all Checkout Widget configurations (such as themes), see the Configuration section of the Settings page.

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

Cross-chain bridge A widget event is triggered when a user performs a critical action or reaches a critical state. Events. The following is a table of events that may occur for the Cross-chain bridge widget.

| Type                               | Note                                                                                                                            | Activity Payload        |
| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ----------------------- |
| `BridgeEventType.TRANSACTION_SENT` | The user successfully sent the bridging transaction.                                                                            | `BridgeTransactionSent` |
| `BridgeEventType.FAILURE`          | There is a problem with bridging tokens.                                                                                        | `BridgeFailed`          |
| `BridgeEventType.CLOSE_WIDGET`     | The user clicks the close button on the widget. This should normally be connected by calling the widget's `unmount()` function. |                         |

You can use the `addListener()` function to access event and provider handlers. Use the`removeListener()` function to stop listening to the event.

```
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);
```

### Code Example[​](https://docs.immutable.com/docs/zkEVM/products/checkout/widgets/bridge#sample-code) <a href="#sample-code" id="sample-code"></a>

This sample code gives you a good starting point for integrating the Cross-chain bridge widget into your application and listening to its events.

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://gmlayer.gitbook.io/english-1/dapp/tool/cross-chain-bridge.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.