Cbridge-web-widget NPM

cBridge-Web-Widget

This project supports cBridge transfer functionality with customizable Front-End UI.

Widget Integration

The minimum node version requirement is 16.14.0

There are two approaches intergating cBridge widget.

npm

npm install cbridge-web-widget

source code

Copy and paste source code into developer's project.

Set up cBridge web widget environment

cBridge web widget uses .env file to configure environment. Project can switch between test and production by applying different configs into .env file.

Test: cp .env.test .env Production: cp .env.mainnet .env

cBridge Widget Components Injection

cBridge web widget supports two types of token transfer, including Fungible Token Transfer and NFT Transfer, by providing two components.

Import cBridge web widget's css file into developer's project through app.js. Here is an example.
```
import "cbridge-widget/build/cbridgeWebWidget.css";
```
Inject needed cBridge widget's components into developer's project. js import { CbridgeContextProvider, CBridgeTransfer, NFTBridgeTransfer } from "cbridge-web-widget"; <CbridgeContextProvider> <CBridgeTransfer // Component for fungible token transfer showHeader // display header info if true showHistory // display token transfer history if true provider // json-rpc request provider configuration // supported chains config walletAddress // wallet address /> <NFTBridgeTransfer // Component for NFT transfer showHeader showHistory configuration provider walletAddress /> </CbridgeContextProvider> You can find the whole example here.

Chain & Token config

By editing chain token config file, developer can determine which chain and token should be displayed in Front-End UI.

polygon: {
    name: "Polygon (Matic)", // chain name
    chainId: 137, // chain id
    rpcUrl: "https://rpc.ankr.com/polygon", // chain rpcUrl
    iconUrl: polygonIcon, //chain icon
    symbol: "MATIC", // chain gas token
    blockExplorerUrl: "https://polygonscan.com", // chain explorer
    tokenSymbolList: ["USDC", "USDT", "WETH", "IMX", "SWAY"], // supported tokens on this chain
},

Start Project

npm start

API Reference

You can find all cBridge web widget related APIs here.