@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:
-
IBC Swap: Users can swap multiple tokens cross-chain, making it convenient for them to exchange assets across different blockchain networks.
-
IBC Transfer: Users can transfer tokens across different chains using the Inter-Blockchain Communication (IBC) protocol, enabling cross-chain transactions securely.
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
To use @0xtfm/widget-ibc in your React application, follow the steps below:
- Import the widget:
import {IBCWidget} from "@0xtfm/widget-ibc";
- Import css styles
import "@0xtfm/widget-ibc/dist/styles.css";
- 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"]} />;
}
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 |
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 |
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 |
<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'}
/>
For multiple examples of how to integrate @0xtfm/widget-ibc into different projects, please visit the TFM Widget GitHub repository.
For more detailed information and usage guidelines, refer to the TFM Widget Documentation.
If you prefer using the iframe version of @0xtfm/widget-ibc, you can embed it in your application as follows:
- Add the iframe code to your HTML:
<iframe src="https://widget.tfm.com/" width="500" height="400" frameborder="0"></iframe>
- Adjust the `src`, `width`, and `height` attributes as needed to fit your application's requirements.
@0xtfm/widget-ibc is licensed under the MIT License.