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