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