BNB Chain Canonical Bridge Widget

A React.js widget that facilitates seamless token transfers across different blockchain networks using various bridge protocols.

Overview

A React.js widget enables users to transfer assets across multiple blockchains directly. It supports a variety of blockchains, leveraging modern bridge protocols (e.g., LayerZero, cBridge, deBridge...) to perform cross-chain transactions in a secure and efficient manner.

Features

• Multiple blockchains support: Transfer tokens between multiple networks.
• Bridge Integration: Built on LayerZero or similar bridging protocols.
• Customizable theme: Configure colors to match your application's look and feel.
• Configurable tokens and networks: Easily configure support network and tokens.
• Multi-language support: Easily configure multiple languages to match the user's local language.

Quick Start

npm install @bnb-chain/canonical-bridge-widget viem@^2

Usage

Import the widget providers into your React application and start using it by providing the necessary configs.

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import {
  CanonicalBridgeProvider,
  ICanonicalBridgeConfig,
  TransferWidget,
} from '@bnb-chain/canonical-bridge-widget';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnReconnect: true,
      refetchOnWindowFocus: false,
      retry: 2,
    },
  },
});

const config: ICanonicalBridgeConfig = {
  appName: env.APP_NAME,
  assetPrefix: env.ASSET_PREFIX,
  appearance: {
    bridgeTitle: 'Widget Title',
    mode: 'dark',
    theme: {
      dark: dark,
      light: light,
    },
    locale: 'en',
    messages,
  },
  wallet: {
    walletConnectProjectId: env.WALLET_CONNECT_PROJECT_ID,
  },
  http: {
    refetchingInterval: 30 * 1000, // 30s
    apiTimeOut: 60 * 1000, // 60s
    deBridgeAccessToken: '', // optional deBridge referral code https://app.debridge.finance/refer
    serverEndpoint: env.SERVER_ENDPOINT,
  },
};

export default function App() {
  const transferConfig = useTransferConfig();

  return (
    <ThemeProvider>
      <QueryClientProvider client={queryClient}>
        <CanonicalBridgeProvider config={config} transferConfig={transferConfig} chains={chains}>
          <Layout>
            <TransferWidget />
          </Layout>
        </CanonicalBridgeProvider>
      </QueryClientProvider>
    </ThemeProvider>
  );
}

For more details, please see the example here. here

License

The contents of this repo are made available under the MIT License.