@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.

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:

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

2. Import css styles

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

3. Use the widget in your component:

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. swap: This option allows for the IBC transfer mode - cross chain swaps by best possible rate or fastest execution time 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

<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.

Documentation

For more detailed information and usage guidelines, refer to the TFM Widget Documentation.

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:

<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.