🌉
Celer cBridge
  • 👋Welcome to cBridge
  • Introduction
    • Architectural Benefits
    • State Guardian Network
    • SGN and cBridge
      • The SGN as a cBridge node gateway and Service Level Agreement (SLA) arbitrator
      • The SGN as a Shared Liquidity Pool Manager
    • Fungible Token Bridging Models
    • cBridge Security
  • Tutorial
    • Cross-chain Transfer
    • LP Guide
    • SGN V2 Staking Guide
    • SGN V1 Unbonding Guide
    • Smart Contract as LP
    • Aptos Bridging Guide
    • Ape Chain Bridging Guide
    • Flow Cadence Bridging Guide
    • Flow EVM Bridging Guide
  • Developer
    • Circle Cross-chain USDC Transfer Protocol(CCTP)
    • cBridge SDK
    • cBridge Pool-Based Transfer (xLiquidity)
      • Transfer
      • Transfer Refund
    • cBridge Canonical Mapping Transfer (xAsset)
      • Mint
      • Mint Refund
      • Burn
      • Burn Refund
    • cBridge Transfer Web Widget
    • cBridge Aptos Transfer (xAsset Only)
    • Custom Transfer URL Schemes
    • cBridge APIs for Sui
    • Referral Specific Transfer
    • cBridge Limit Parameters
    • API Reference
      • Gateway: GetTransferConfigsForAll
      • Gateway: EstimateAmt
      • Contract: Pool-Based Transfer
      • Gateway: GetTransferStatus
      • Contract: Pool-Based Transfer Refund
      • Gateway: TransferHistory
      • Contract: Mint Canonical Token(OriginalTokenVault)
      • Contract: Mint Canonical Token(OriginalTokenVaultV2)
      • Contract: Mint Canonical Token Transfer Refund
      • Contract: Burn Canonical Token(PeggedTokenBridge)
      • Contract: Burn Canonical Token (PeggedTokenBridgeV2)
      • Contract: Burn Canonical Token Transfer Refund
      • Gateway: MarkRefRelation
      • Contract: TransferAgent Mint Token Submission
      • Contract: TransferAgent Burn Token Submission
      • Contract: Aptos Vault Mint Token Submission
      • Contract: Aptos PegBridge Burn Token Submission
  • NFT Bridge
    • Introduction
    • NFT Bridge Fee
  • List Your Tokens
    • Simple Listing Process
  • Reference
    • FAQ
    • Audit Reports
    • Contract Addresses
Powered by GitBook
On this page
  • Run Sample
  • Import cBridgeTransferWidget
  • Launch Production Environment
  1. Developer

cBridge Transfer Web Widget

PreviousBurn RefundNextcBridge Aptos Transfer (xAsset Only)

Last updated 3 years ago

To make widget integration simple, we provide complete source files which support cBridge transfer.

  1. Download source files from

  2. Compare package.json with your own package.json and inject all needed dependencies

  3. Put files from public, scripts and src folder inside your project where is easy to manage.

  4. Inside the src folder, there is a cBridgeTransferWidget.tsx file. You may import it wherever you want to put and use CBridgeTransferWidget as an element inside your web project.

  5. Copy .env.test to .env. cBridge transfer widget uses values inside .env. If .env is missing or mis-configured, interface error alert will appear.

Run Sample

To give a quick experience about cBridge transfer widget, we create a sample index.js and App.js inside the src file folder.

  1. run npm install or yarn install inside cBridget transfer widget root folder on console

  2. run cp .env.test .env on console (Don't skip, otherwise you will see interface error)

  3. run npm start or yarn start

Import cBridgeTransferWidget

/// Adjust import path according to your project
import { Provider } from "react-redux";
import store from "./redux/store";
import CBridgeTransferWidget from './cBridgeTransferWidget';

/// Put following code where you need
<div>
   <Provider store={store}>
      <CBridgeTransferWidget />
   </Provider> 
</div>

Launch Production Environment

Once your project with transfer widget is ready for production launch, you need to contact us for production chain and token white list which is pre-defined . According to your project requirement, you will have a specific white list. Once you replace existing chains_mainnet.ts with this special white list and copy .env.mainnet to .env, you can do some test on production environment and prepare for production launch.

cBridgeTransferWidgetRepo
here