> 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/token-exchange.md).

# Token Exchange

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

After you have finished setting up the widget, use the WidgetsFactory to create a connected widget. To mount the widget, call the `mount()` function with the `id` attribute that 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() {
  // 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" />);
}
```

### Parameter <a href="#parameters" id="parameters"></a>

Widget parameters

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

| Asset                | Note                                                                                                                                                      |
| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `fromTokenAddress`   | The exchange address for the ERC20 contract. Use `NATIVE` to set the exchange slave token to `IMX`. This will pre-populate the token field in the form.   |
| `toTokenAddress`     | The address of the ERC20 contract being exchanged to. Use `NATIVE` to set the exchange token to `IMX`.This will pre-populate the token field on the form. |
| `amount`             | The number of ERC20 tokens to be exchanged.                                                                                                               |
| `walletProviderName` | The name of the wallet provider to use for the exchange widget.                                                                                           |

```
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' })
```

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

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                                                   |
| ------------------------- | ------------------------------------------------------ |
| `SwapWidgetConfiguration` | The type of configuration to use with the 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}});
```

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

Swap widget events are triggered when the user performs a critical action or reaches a critical state. Reached. The following is a list of events that can occur in the Swap Widget.

| Type                         | Note                                                                                                                         | Activity Payload |
| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | ---------------- |
| `SwapEventType.SUCCESS`      | The user successfully connects their wallet.                                                                                 | `SwapSuccess`    |
| `SwapEventType.FAILURE`      | There was a failure when exchanging tokens.                                                                                  | `SwapFailed`     |
| `SwapEventType.REJECTED`     | Swaps were rejected.                                                                                                         | `SwapRejected`   |
| `SwapEventType.CLOSE_WIDGET` | The user clicks the close button on the widget. This should normally be connected to call the widget's `unmount()` function. |                  |

All widget events are of type `IMTBL_SWAP_WIDGET_EVENT`.

Pass key For example `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);
```

### Code Example[​](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" />);
}
```