npm package: @0xtfm/widget-ibc
Description: ## Overview
Latest version: 0.0.8-alpha.5

# @0xtfm/widget-ibc

## Overview

@0xtfm/widget-ibc is a customizable and feature-rich React widget that allows developers to seamlessly integrate IBC swap or IBC transfer or both functionalities into their applications. With the @0xtfm/widget-ibc, developers can enable their users to perform the following actions:

1. **IBC Swap**: Users can swap multiple tokens cross-chain, making it convenient for them to exchange assets across different blockchain networks.

2. **IBC Transfer**: Users can transfer tokens across different chains using the Inter-Blockchain Communication (IBC) protocol, enabling cross-chain transactions securely.

![TFM IBC Widget](assets/widget-ibc.png)

## Installation

**NOTE** Supported node versions: 16-18



You can install the widget using npm:

```
npm install @0xtfm/widget-ibc
```

or using yarn:

```
yarn add @0xtfm/widget-ibc
```

## Usage

To use @0xtfm/widget-ibc in your React application, follow the steps below:

1. Import the widget:

```jsx
import {IBCWidget} from "@0xtfm/widget-ibc";
```

2. Import css styles

```jsx
import "@0xtfm/widget-ibc/dist/styles.css";
```

3. Use the widget in your component:

```jsx
import React from "react";
import {IBCWidget} from "@0xtfm/widget-ibc";

export default function Widget() {
    return <IBCWidget enabledModes={["swap", "transfer"]} />;
}
```

## Customization

You can customize the appearance and behavior of @0xtfm/widget-ibc using the props:

| Property         | Description                                                                                                                                                       | Default Value   |
|------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------|
| fontFamily       | The font family of the text                                                                                                                                       | IBM Plex Sans   |
| borderRadius     | Specifies the border-radius                                                                                                                                       | 12px            |
| enabledModes     | The list option allows `swap` and/or `transfer`. <br><br>`swap`: This option allows for the IBC transfer mode - cross chain swaps by best possible rate or fastest execution time <br>`transfer`: This option lets the users transfer assets from one chain to another, making use of IBC transfers incorporating Packet Forward Middleware (PFM) and Axelar Asset Transfer | `[swap,transfer]` |
| theme            | Allows entering sub-properties for the theme. The following properties have to be entered with RGB color codes                                                   |                 |
| options          | Allows you to set default destination and source chains and tokens                                                                                               |                 |
| projectId        | Wallet connect id of your project                                                                                                                                | undefined       |
| toastTopPosition | A toast list starting point                                                                                                                                      | 16px            |

#### Theme settings
| Property          | Description                              |
|-------------------|------------------------------------------|
| neutralContent    | Tab Headings, Info Icons and Placeholders|
| baseContent       | Active Tabs, Menu Text and List items    |
| background        | General background color                 |
| secondaryContent  | Labels of the form items                 |
| base100           | Base color of page, used for blank backgrounds |
| base200           | Color of the element backgrounds         |
| base300           | Color of the background of token select dialogue |
| neutral           | Color for on hover effect                |
| primary           | Primary button text color                |
| error             | Color for the error texts                |
| warning           | Color for the warning texts              |
| success           | Color for the success message texts      |

#### Set chains and tokens that will be selected by default
| Property          | Description                              |
|-------------------|------------------------------------------|
| sourceChain       | Chain id of the outcoming chain          |
| sourceDenom       | Contract address of the outcoming token  |
| destinationChain  | Chain id of the incoming chain           |
| destinationDenom  | Contract address of the incoming token   |

#### Customisation example
```jsx
<IBCWidget
    enabledModes={["swap", "transfer"]}
    options={{
        sourceChain: "phoenix-1",
        sourceDenom: "uluna",
        destinationChain: "osmosis-1",
        destinationDenom: "uosmo"
    }}
    theme={{
        neutralContent: "30,21,127",
        baseContent: "238,238,238",
        background: "14,12,19",
        secondaryContent: "86,84,103",
        base100: "38,36,51",
        base200: "28,26,40",
        base300: "14,12,19",
        neutral: "48,45,63",
        primary: "27,116,51",
        error: "213,72,73",
        warning: "255,165,0",
        success: "96,179,127"
    }}
    fontFamily={"IBM Plex Sans"}
    borderRadius={"12px"}
    projectId={"**Wallet connect id of your project**"}
    toastTopPosition={'1rem'}
/>
```

## Examples

For multiple examples of how to integrate @0xtfm/widget-ibc into different projects, please visit the [TFM Widget GitHub repository](https://github.com/tfm-com/tfm-widget).

## Documentation

For more detailed information and usage guidelines, refer to the [TFM Widget Documentation](https://docs.tfm.com).

## Using the iframe version

If you prefer using the iframe version of @0xtfm/widget-ibc, you can embed it in your application as follows:

1. Add the iframe code to your HTML:

```html
<iframe src="https://widget.tfm.com/" width="500" height="400" frameborder="0"></iframe>
```

2. Adjust the \`src\`, \`width\`, and \`height\` attributes as needed to fit your application's requirements.

## License

@0xtfm/widget-ibc is licensed under the [MIT License](LICENSE).