@0xtfm/widget-ibc v0.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.

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:

Theme settings

Set chains and tokens that will be selected by default

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.