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


---

# Agent Instructions: 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/token-exchange.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.