# cbridge-web-widget > This project supports [cBridge transfer](https://cbridge.celer.network/) functionality with customizable Front-End UI. Latest version **1.0.0** (published 2024-03-25) · MIT license · 0 weekly downloads ## Install ```sh npm install cbridge-web-widget pnpm add cbridge-web-widget yarn add cbridge-web-widget bun add cbridge-web-widget ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities; high quality score. Warnings: low downloads; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.0 | | Published | 2024-03-25 | | First published | 2024-03-25 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 43 | | Unpacked size | 7.8 MB | | Known vulnerabilities | 0 (+23 in 1 direct dependencies) | | Install scripts | no | | Maintainers | mhhard | ## Links - npm: https://www.npmjs.com/package/cbridge-web-widget - Homepage: http://. - npm.io page: https://npm.io/package/cbridge-web-widget ## Dependencies (43) - [ejs](https://npm.io/package/ejs.md) ^3.1.8 - [antd](https://npm.io/package/antd.md) ^4.16.13 - [axios](https://npm.io/package/axios.md) ^0.21.1 - [dayjs](https://npm.io/package/dayjs.md) ^1.11.7 - [immer](https://npm.io/package/immer.md) ^9.0.6 - [assert](https://npm.io/package/assert.md) ^2.0.0 - [buffer](https://npm.io/package/buffer.md) ^6.0.3 - [crypto](https://npm.io/package/crypto.md) ^1.0.1 - [dotenv](https://npm.io/package/dotenv.md) ^8.2.0 - [ethers](https://npm.io/package/ethers.md) ^5.6.8 - [lodash](https://npm.io/package/lodash.md) ^4.17.21 - [js-sha3](https://npm.io/package/js-sha3.md) ^0.8.0 - [grpc-web](https://npm.io/package/grpc-web.md) ^1.3.0 - [react-jss](https://npm.io/package/react-jss.md) ^10.6.0 - [react-use](https://npm.io/package/react-use.md) ^17.2.1 - [ts-loader](https://npm.io/package/ts-loader.md) ~8.2.0 - [bnc-notify](https://npm.io/package/bnc-notify.md) ^1.5.0 - [classnames](https://npm.io/package/classnames.md) ^2.3.1 - [craco-less](https://npm.io/package/craco-less.md) ^2.0.0 - [react-query](https://npm.io/package/react-query.md) ^3.13.4 - [react-redux](https://npm.io/package/react-redux.md) ^7.2.3 - [stream-http](https://npm.io/package/stream-http.md) ^3.2.0 - [@craco/craco](https://npm.io/package/@craco/craco.md) ^6.1.1 - [@squoosh/lib](https://npm.io/package/@squoosh/lib.md) ^0.5.3 - [os-browserify](https://npm.io/package/os-browserify.md) ^0.3.0 - [react-scripts](https://npm.io/package/react-scripts.md) ^5.0.1 - [redux-persist](https://npm.io/package/redux-persist.md) ^6.0.0 - [vm-browserify](https://npm.io/package/vm-browserify.md) ^1.1.2 - [celer-web-utils](https://npm.io/package/celer-web-utils.md) ^1.0.7 - [google-protobuf](https://npm.io/package/google-protobuf.md) ^3.19.1 - [path-browserify](https://npm.io/package/path-browserify.md) ^1.0.1 - [@reduxjs/toolkit](https://npm.io/package/@reduxjs/toolkit.md) ^1.5.1 - [https-browserify](https://npm.io/package/https-browserify.md) ^1.0.0 - [react-router-dom](https://npm.io/package/react-router-dom.md) ^5.2.0 - [@ant-design/icons](https://npm.io/package/@ant-design/icons.md) ^4.6.4 - [copy-to-clipboard](https://npm.io/package/copy-to-clipboard.md) ^3.3.1 - [crypto-browserify](https://npm.io/package/crypto-browserify.md) ^3.12.0 - [stream-browserify](https://npm.io/package/stream-browserify.md) ^3.0.0 - [ethereum-multicall](https://npm.io/package/ethereum-multicall.md) ^2.15.0 - [source-map-support](https://npm.io/package/source-map-support.md) ^0.5.21 - [@celer-network/web3modal](https://npm.io/package/@celer-network/web3modal.md) ^1.9.12 - [@improbable-eng/grpc-web](https://npm.io/package/@improbable-eng/grpc-web.md) ^0.14.1 - [@walletconnect/web3-provider](https://npm.io/package/@walletconnect/web3-provider.md) ^1.7.0 ## Recent versions - 1.0.0 (latest) — 2024-03-25 ## README # cBridge-Web-Widget This project supports [cBridge transfer](https://cbridge.celer.network/) 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. 1. Import cBridge web widget's css file into developer's project through app.js. Here is an [example](https://github.com/celer-network/cBridge-web-widget/blob/ac6cd447b3cafd59076f2820d01ebc4aa4ea7f4b/example/src/app/App.tsx#L4). ```js import "cbridge-widget/build/cbridgeWebWidget.css"; ``` 2. Inject needed cBridge widget's components into developer's project. `js import { CbridgeContextProvider, CBridgeTransfer, NFTBridgeTransfer } from "cbridge-web-widget"; ` You can find the whole example [here](https://github.com/celer-network/cBridge-web-widget/tree/main/example). ## Chain & Token config By editing [chain token config file](https://github.com/celer-network/cBridge-web-widget/blob/main/example/src/constants/chains_config.ts), developer can determine which chain and token should be displayed in Front-End UI. ```js 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](https://cbridge-docs.celer.network/developer/api-reference). --- _Source: https://npm.io/package/cbridge-web-widget · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._