diff --git a/apps/canonical-bridge-server/src/main.ts b/apps/canonical-bridge-server/src/main.ts index 7968ee17..793c8338 100644 --- a/apps/canonical-bridge-server/src/main.ts +++ b/apps/canonical-bridge-server/src/main.ts @@ -38,8 +38,8 @@ async function bootstrap() { logger.log('Listening on port', SERVER_PORT); }); - server.keepAliveTimeout = 61 * 1000; - server.headersTimeout = 62 * 1000; + server.keepAliveTimeout = 121 * 1000; + server.headersTimeout = 122 * 1000; } bootstrap(); diff --git a/packages/canonical-bridge-sdk/package.json b/packages/canonical-bridge-sdk/package.json index 3f1c9370..cf4bb52a 100644 --- a/packages/canonical-bridge-sdk/package.json +++ b/packages/canonical-bridge-sdk/package.json @@ -1,6 +1,6 @@ { "name": "@bnb-chain/canonical-bridge-sdk", - "version": "0.3.2", + "version": "0.4.1", "description": "canonical bridge sdk", "author": "bnb-chain", "private": false, diff --git a/packages/canonical-bridge-sdk/src/adapters/layerZero/types.ts b/packages/canonical-bridge-sdk/src/adapters/layerZero/types.ts index 2cbed673..a61fda63 100644 --- a/packages/canonical-bridge-sdk/src/adapters/layerZero/types.ts +++ b/packages/canonical-bridge-sdk/src/adapters/layerZero/types.ts @@ -9,6 +9,8 @@ export interface ISendCakeTokenInput { version?: number; publicClient: PublicClient; walletClient: WalletClient; + dstAddress?: `0x${string}`; + airDropGas?: bigint; } export interface IGetEstimateFeeInput { @@ -19,6 +21,8 @@ export interface IGetEstimateFeeInput { gasAmount?: bigint; version?: number; publicClient: PublicClient; + dstAddress?: `0x${string}`; + airDropGas?: bigint; } export interface ILayerZeroToken { diff --git a/packages/canonical-bridge-widget/CHANGELOG.md b/packages/canonical-bridge-widget/CHANGELOG.md index 76cd5d69..f7ef9c59 100644 --- a/packages/canonical-bridge-widget/CHANGELOG.md +++ b/packages/canonical-bridge-widget/CHANGELOG.md @@ -1,5 +1,51 @@ # @bnb-chain/canonical-bridge-widget +## 0.5.1 + +### Patch Changes + +- 6a2623b: Solana requires wallet have at least 0.05SOL to enabled a tx. + +## 0.5.0-alpha.4 + +### Patch Changes + +- Solana requires wallet have at least 0.05SOL to enabled a tx. + +## 0.5.0-alpha.3 + +### Patch Changes + +- Fix phantom wallet deelink issue on mobile + +## 0.5.0 + +### Minor Changes + +- a6db440: Support solana + +### Patch Changes + +- e31ab8f: UI adjustment + +## 0.5.0-alpha.2 + +### Patch Changes + +- UI adjustment + +## 0.5.0-alpha.1 + +### Patch Changes + +- UI adjustment + +## 0.5.0-alpha.0 + +### Minor Changes + +- Support solana + ## 0.4.0 ### Minor Changes diff --git a/packages/canonical-bridge-widget/docs/Bridge Configuration (basic).md b/packages/canonical-bridge-widget/docs/Bridge Configuration (basic).md new file mode 100644 index 00000000..a1b3d132 --- /dev/null +++ b/packages/canonical-bridge-widget/docs/Bridge Configuration (basic).md @@ -0,0 +1,67 @@ +# Bridge configuration (basic) + +Bridge configuration allows user to config title, theme color, multi-language and server API. + +```javascript +const bridgeConfig: ICanonicalBridgeConfig = { + appName: 'Your-App-Name', + assetPrefix: '', + appearance: { + bridgeTitle: 'Bridge Title', + mode: 'dark', + theme: { + dark: { + input: { + background: '#1E2026', + title: '#8C8F9B', + }, + }, + light: {}, + }, + locale: 'en', + messages, + }, + wallet: { + walletConnectProjectId: env.WALLET_CONNECT_PROJECT_ID, + }, + http: { + refetchingInterval: 30 * 1000, // 30s + apiTimeOut: 60 * 1000, // 60s + deBridgeAccessToken: '', + serverEndpoint: env.WIDGET_SERVER_ENDPOINT, + }, +}; +``` + +## appName + +This is the prefix of images url. The default token and chain images can be found in +canonical-bridge-ui. Please copy these images to your /images folder. + +## appearance + +1. theme: Light and dark color configuration. For full list of available color settings + +2. mode: Dark/light mode. Default mode is dark + +3. locale: Language of your website. For example: 'fr' or 'zh-CN'. + +4. message: Multilingual message. You need to create individual language files, for example fr.ts . + Message format should look like this. Replace the message value with the language you want. Do + not change the value within curly bracket!. + +## wallet + +walletConnectProjectId: WalletConnect Cloud project identifier. You can find your projectId on your +WalletConnect dashboard. + +## http + +1. refetchingInterval: Optional. Time interval for fetching bridge fees. Default value is 30 + seconds. Please do not set this value to more than 30 seconds to avoid sending outdated orders, + which may result in transaction failure. + +2. apiTimeOut: Optional. Bridge API request timeout. Default value is 1 min. + +3. serverEndpoint: Server endpoint to fetch token price and token list. You need to deploy your + server API. Please check the docs. diff --git a/packages/canonical-bridge-widget/docs/Custom Route (advanced).md b/packages/canonical-bridge-widget/docs/Custom Route (advanced).md new file mode 100644 index 00000000..c14bd446 --- /dev/null +++ b/packages/canonical-bridge-widget/docs/Custom Route (advanced).md @@ -0,0 +1,133 @@ +This widget provides several bridges or routes; deBridge, cBridge, Stargate, LayerZero and Meson. To +enable routes you need to add route settings into transferConfig, which is prop +of component. The config structure for individual route is like + +```javascript +// ROUTE_NAME should be one of following name +// cBridge | deBridge | meson | stargate | layerZero +ROUTE_NAME: { + config: ROUTE_CONFIG, + exclude: { + chains: [], + tokens: {} + }, + bridgedTokenGroups: [] +} +``` + +ROUTE_CONFIG contains the list of token address and bridge address. The token list structure of +different bridge may vary, and you can check demo for more details. To enable deBridge or cBridge +routes, there are a few ways to configure token settings. + +1. Deploying Your Own API Server: Fetch the cBridge and deBridge token lists by following the + deployment instructions + (https://github.com/bnb-chain/canonical-bridge/tree/main/apps/canonical-bridge-server). This is + our recommended approach for flexibility and control over updates. +2. Using cBridge or deBridge APIs Directly: Obtain token and chain configurations directly from the + cBridge API or deBridge API and inject them into transferConfig. +3. Downloading JSON-formatted Settings: Download token settings in JSON format from the cBridge API + or deBridge API and save them within your application. Be aware that you may need to update these + files regularly to avoid missing newly supported tokens. + +The first option is ideal, but due to the cost of deploying your own API server, the second or third +options may be more feasible. + +## API server + +The instructions of API server deployment can be found +(https://github.com/bnb-chain/canonical-bridge/tree/main/apps/canonical-bridge-server). The server +provides endpoints /api/bridge/cbridge and /api/bridge/deBridge to retrieve token config, and it +also supported token prices. Deploy API your own API server is highly recommended to access full +widget functionality. + +After setting up the token configurations, you may wonder where this token list originates and how +to add more tokens. For this, please check the documentation of each bridge provider. Links to these +documentation are listed below. + +[deBridge](https://deswap.debridge.finance/v1.0/#/utils/AppControllerV10_getSupportedChainInfoResponse) + +[cBridge](https://cbridge-docs.celer.network/developer/api-reference/gateway-gettransferconfigsforall) + +[Stargate](https://stargateprotocol.gitbook.io/stargate/v2-developer-docs/technical-reference/mainnet-contracts) + +[Meson](https://meson.dev/api/endpoints/list-chains) + +[LayerZero V1 endpoints](https://docs.layerzero.network/v1/developers/evm/technical-reference/mainnet/mainnet-addresses) + +## Token Config format + +By adding tokens to each route please follow the below token list and network list format. + +Stargate: + +```javascript +{ +"tokens": { + // chain id. 1 represents Ethereum + "1": [ + { + "address": "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48", // token address + "bridgeAddress": "0xc026395860Db2d07ee33e05fE50ed7bD583189C7", // bridge contract address + "decimals": 6, + "symbol": "USDC", + "endpointID": 30101, // can be found in stargate link under api server section. + "name": "USD Coin" + }, + ] +}, +"chains": [ + { + "chainId": 1, + "chainName": "Ethereum" + } +] +} +``` + +LayerZero: + +```javascript +{ +"tokens": { + // chain id of networks. + "1": [ // 1 => Ethereum + { + "address": "0x152649eA73beAb28c5b49B26eb48f7EAD6d4c898", // token address + "bridgeAddress": "0x152649eA73beAb28c5b49B26eb48f7EAD6d4c898", // bridge contract address + "decimals": 18, + "symbol": "CAKE", + "name": "Cake", + "endpointID": 101, // This id can be found in layerzero V1 endpoint link above + "version": 1 // layerzero version + } + ], + "56": [ // 56 => BNB smart chain + { + "address": "0x0e09fabb73bd3ade0a17ecc321fd13a19e81ce82", + "bridgeAddress": "0xb274202daBA6AE180c665B4fbE59857b7c3a8091", + "decimals": 18, + "symbol": "CAKE", + "name": "Cake", + "endpointID": 102, + "version": 1 + } + ], +}, +"chains": [ + { + "chainId": 1, + "chainName": "Ethereum" + }, + { + "chainId": 56, + "chainName": "BSC" + } +] +} +``` + +cBridge and deBridge config format is as same as +[cBridge](https://cbridge-docs.celer.network/developer/api-reference/gateway-gettransferconfigsforall) +and +[deBridge](https://deswap.debridge.finance/v1.0/#/utils/AppControllerV10_getSupportedChainInfoResponse) +respectively. diff --git a/packages/canonical-bridge-widget/docs/Custom Themes.md b/packages/canonical-bridge-widget/docs/Custom Themes.md new file mode 100644 index 00000000..e0e65840 --- /dev/null +++ b/packages/canonical-bridge-widget/docs/Custom Themes.md @@ -0,0 +1,215 @@ +# Widget custom themes + +## Usage + +```javascript +import { ChakraProvider, ColorMode, createLocalStorageManager, theme } from '@bnb-chain/space'; + +import { env } from '@/core/env'; + +interface ThemeProviderProps { + children: React.ReactNode; +} + +const colorModeManager = createLocalStorageManager(`${env.APP_NAME}-color-mode`); + +export const ThemeProvider = ({ children }: ThemeProviderProps) => { + const customTheme = { + ...theme, + breakpoints: { + ...theme.breakpoints, + lg: '1080px', + }, + config: { + ...theme.config, + initialColorMode: 'dark', + useSystemColorMode: false, + }, + styles: { + global: ({ colorMode }: { colorMode: ColorMode }) => ({ + body: { + bg: theme.colors[colorMode].background[3], + '.bccb-widget-transfer-widget-title': { + borderRadius: '4px', // overwrite border radius + }, + }, + }), + }, + }; + + return ( + + {children} + + ); +}; +``` + +## This document lists all the available styling class name in the widget. Please overwrite stylings based on these class name. + +1. Widget Main + +- bccb-widget-transfer-widget +- bccb-widget-transfer-widget-wrapper +- bccb-widget-transfer-widget-title +- bccb-widget-exchange-chain-icon +- bccb-widget-copy-address +- bccb-widget-info-tooltip +- bccb-widget-switch-wallet-button + +2. Network selection section + +- bccb-widget-network +- bccb-widget-network-title +- bccb-widget-network-row +- bccb-widget-network-from +- bccb-widget-network-from-title +- bccb-widget-network-button +- bccb-widget-network-to +- bccb-widget-network-to-title +- bccb-widget-network-name + +3. Bridge Route Section + +- bccb-widget-route +- bccb-widget-route-bottom +- bccb-widget-route-wrapper +- bccb-widget-route-container +- bccb-widget-route-container-inner +- bccb-widget-route-name +- bccb-widget-route-name-text +- bccb-widget-route-name-tag-bestTime +- bccb-widget-route-name-tag-bestReturn +- bccb-widget-route-token +- bccb-widget-route-token-amount +- bccb-widget-route-token-tooltip +- bccb-widget-route-token-icon +- bccb-widget-route-estimated-time +- bccb-widget-route-info-text +- bccb-widget-route-info-label +- bccb-widget-route-info-tooltip-fee +- bccb-widget-allowed-send-amount +- bccb-widget-route-error +- bccb-widget-route-skeleton +- bccb-widget-route-header +- bccb-widget-route-body +- bccb-widget-route-list +- bccb-widget-refreshing-button + - mobile +- bccb-widget-modal-route-overlay +- bccb-widget-modal-route-content +- bccb-widget-modal-route-header +- bccb-widget-modal-route-wrapper + +4. Header + +- bccb-widget-header-wallet-connect-button +- bccb-widget-header-menu-button +- bccb-widget-header-menu-item +- bccb-widget-header-profile-balance +- bccb-widget-header-profile-list +- bccb-widget-header-profile-disconnect-link +- bccb-widget-header-profile-button +- bccb-widget-header-switching-tips-modal +- bccb-widget-header-preventing-modal +- bccb-widget-header-network-status +- bccb-widget-header-network-status-title +- bccb-widget-header-network-status-network + +5. Token Selection Modal + +- bccb-widget-token-modal +- bccb-widget-token-modal-content +- bccb-widget-token-virtual-list +- bccb-widget-token-list-address +- bccb-widget-token-list-symbol +- bccb-widget-token-address-link +- bccb-widget-token-list-item +- bccb-widget-token-list-item-disabled +- bccb-widget-token-list-token-balance + +6. From Network Selection + +- bccb-widget-from-network-list-item +- bccb-widget-from-network-virtual-list +- bccb-widget-from-network-modal +- bccb-widget-from-network-modal-content +- bccb-widget-to-network-modal-content + +7. To Network Selection + +- bccb-widget-to-network-virtual-list +- bccb-widget-to-network-list-item +- bccb-widget-to-network-modal +- bccb-widget-to-network-modal-content + +8. Base Modal + +- bccb-widget-modal-search +- bccb-widget-modal-search-right-element +- bccb-widget-modal-no-result-found +- bccb-widget-modal-no-result-found-title +- bccb-widget-modal-no-result-found-text +- bccb-widget-select-list-item-tag + +9. Send Amount Input + +- bccb-widget-transfer-input-container +- bccb-widget-transfer-input-wrapper +- bccb-widget-transfer-input +- bccb-widget-transfer-max +- bccb-widget-transfer-input-error +- bccb-widget-token-select-button + +10. To Account Input + +- bccb-widget-to-account-container +- bccb-widget-to-account-title +- bccb-widget-to-account-input-error +- bccb-widget-to-account-input +- bccb-widget-to-account-confirm +- bccb-widget-to-account-checkbox + +11. Received Amount Information + +- bccb-widget-received-info-container +- bccb-widget-received-info-route-open +- bccb-widget-received-info-route-content +- bccb-widget-received-info-route-loading +- bccb-widget-no-route-found-container +- bccb-widget-no-route-found-icon +- bccb-widget-no-route-found-title +- bccb-widget-no-route-found-desc +- bccb-widget-no-route-found-link + +12. Transfer Button + +- bccb-widget-transfer-button-container +- bccb-widget-wallet-connect-button +- bccb-widget-switch-network-button +- bccb-widget-transfer-button + +13. Transfer Modal + +- bccb-widget-modal-close-button +- bccb-widget-modal-main-button +- bccb-widget-modal-secondary-button +- bccb-widget-modal-second-button +- bccb-widget-modal-body +- bccb-widget-modal-body-icon +- bccb-widget-modal-body-title +- bccb-widget-modal-body-description +- bccb-widget-modal-footer +- bccb-widget-transaction-submitted-modal +- bccb-widget-transaction-failed-modal +- bccb-widget-transaction-confirming-modal +- bccb-widget-transaction-approve-modal +- bccb-widget-route-bottom diff --git a/packages/canonical-bridge-widget/docs/Getting Started.md b/packages/canonical-bridge-widget/docs/Getting Started.md new file mode 100644 index 00000000..bb94c388 --- /dev/null +++ b/packages/canonical-bridge-widget/docs/Getting Started.md @@ -0,0 +1,328 @@ +## Installation + +```bash +npm install @bnb-chain/canonical-bridge-widget viem@^2 +``` + +## Usage + +Before diving into the code, let's take a us quick look at the project structure of the +canonical-bridge-ui(https://github.com/bnb-chain/canonical-bridge/tree/main/apps/canonical-bridge-ui). +This overview will help you understand the project better and easily locate the relevant reference +files. + +- core: This folder contains localization files ( e.g. en.ts) for multi-language support and theme + files (dark.ts and light.ts) are located. +- pages: You can find usage example of widget provider within mainnet or testnet folders. +- public: The folder holds image assets for token and network . +- token-config: token-config contains token and network configuration for each route. Configuration + files like config.json for LayerZero, Stargate and Meson are located in this folder, along with + the setting file useTransferConfig.ts. + +The code below provides a simple example of setting up Stargate route. All token and chain settings +are passed as props to component. + +```javascript +// index.tsx +import { + CanonicalBridgeProvider, + ICanonicalBridgeConfig, + TransferWidget, +} from '@bnb-chain/canonical-bridge-widget'; +import { useTransferConfig } from '@/token-config/mainnet/useTransferConfig'; +import { en as messages } from '@/core/locales/en'; + +export const bridgeConfig: ICanonicalBridgeConfig = { + appName: 'YOUR-APP-NAME', + assetPrefix: '', + appearance: { + bridgeTitle: 'Widget Title', + locale: 'en', + messages, + mode: 'dark', + theme: { + dark: { + input: { + background: '#1E2026', + title: '#8C8F9B', + }, + }, + light: {}, + }, + }, + wallet: { + walletConnectProjectId: 'WALLET-CONNECT-PROJECT-ID', + }, + http: { + serverEndpoint: 'YOUR-SERVER-ENDPOINT', + }, +}; + +const chains = [ + { + id: 1, + name: 'Ethereum', + nativeCurrency: { + name: 'Ether', + symbol: 'ETH', + decimals: 18, + }, + rpcUrl: 'https://ethereum-rpc.publicnode.com/', + explorer: { + name: 'Etherscan', + url: 'https://etherscan.io', + }, + }, + { + id: 56, + name: 'BNB Smart Chain', + nativeCurrency: { + name: 'BNB Chain Native Token', + symbol: 'BNB', + decimals: 18, + }, + rpcUrl: 'https://bsc-dataseed.bnbchain.org', + explorer: { + name: 'bscscan', + url: 'https://bscscan.com', + }, + }, + { + id: 137, + name: 'Polygon', + nativeCurrency: { + name: 'MATIC', + symbol: 'MATIC', + decimals: 18, + }, + rpcUrl: 'https://polygon-rpc.com', + explorer: { + name: 'polygonscan', + url: 'https://polygonscan.com', + }, + }, + // other networks +]; + +export default function MainnetPage() { + const transferConfig = useTransferConfig(); + + return ( + + + + ); +} +``` + +```javascript +// useTransferConfig.ts +import { useEffect, useState } from 'react'; +import { ITransferConfig } from '@bnb-chain/canonical-bridge-widget'; +import stargateConfig from '@/token-config/mainnet/stargate/config.json'; + +export function useTransferConfig() { + const [transferConfig, setTransferConfig] = useState(); + + useEffect(() => { + const initConfig = async () => { + + const transferConfig: ITransferConfig = { + defaultSelectedInfo: { + fromChainId: 1, + toChainId: 56, + tokenSymbol: 'USDT', // USDT + amount: '20', // 20 USDT + }, + order: { + chains: [56, 1], // BNB smart chain then Ethereum + tokens: ['USDC', 'USDT', 'FDUSD'], + }, + displayTokenSymbols: { + 56: { + '0x2170Ed0880ac9A755fd29B2688956BD959F933F8': 'ETH', + }, + }, + stargate: { + config: stargateConfig, + exclude: { + chains: [137], // Polygon + tokens: { + 1: ['cUSDCv3'], + 56: [ + '0x67d66e8ec1fd25d98b3ccd3b19b7dc4b4b7fc493', + '0x0000000000000000000000000000000000000000', + ], + }, + }, + bridgedTokenGroups: [ + ['USDT', 'USDT.e'], + ['USDC', 'USDC.e'], + ], + }, + // other route settings go here... + }; + + setTransferConfig(transferConfig); + }; + + initConfig(); + }, []); + + return transferConfig; +} +``` + +```json +// This is an token list example for Stargate route only. +// for other routes, please refer to +// https://github.com/bnb-chain/canonical-bridge/tree/main/apps/canonical-bridge-ui +{ + "tokens": { + "1": [ + { + "address": "0x0000000000000000000000000000000000000000", + "bridgeAddress": "0x77b2043768d28E9C9aB44E1aBfC95944bcE57931", + "decimals": 18, + "symbol": "ETH", + "endpointID": 30101, + "name": "Ether" + }, + { + "address": "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48", + "bridgeAddress": "0xc026395860Db2d07ee33e05fE50ed7bD583189C7", + "decimals": 6, + "symbol": "USDC", + "endpointID": 30101, + "name": "USD Coin" + }, + { + "address": "0xdac17f958d2ee523a2206206994597c13d831ec7", + "bridgeAddress": "0x933597a323Eb81cAe705C5bC29985172fd5A3973", + "decimals": 6, + "symbol": "USDT", + "endpointID": 30101, + "name": "Tether USD" + }, + { + "address": "0x9e32b13ce7f2e80a01932b42553652e053d6ed8e", + "bridgeAddress": "0xcDafB1b2dB43f366E48e6F614b8DCCBFeeFEEcD3", + "decimals": 18, + "symbol": "METIS", + "endpointID": 30101, + "name": "Metis" + }, + { + "address": "0xd5f7838f5c461feff7fe49ea5ebaf7728bb0adfa", + "bridgeAddress": "0x268Ca24DAefF1FaC2ed883c598200CcbB79E931D", + "decimals": 18, + "symbol": "mETH", + "endpointID": 30101, + "name": "Mantle Staked Ether" + } + ], + "56": [ + { + "address": "0x55d398326f99059fF775485246999027B3197955", + "bridgeAddress": "0x138EB30f73BC423c6455C53df6D89CB01d9eBc63", + "decimals": 18, + "symbol": "USDT", + "endpointID": 30102, + "name": "Tether USD" + }, + { + "address": "0x8ac76a51cc950d9822d68b83fe1ad97b32cd580d", + "bridgeAddress": "0x962Bd449E630b0d928f308Ce63f1A21F02576057", + "decimals": 18, + "symbol": "USDC", + "endpointID": 30102, + "name": "USD Coin" + } + ], + "97": [ + { + "address": "0xe37bdc6f09dab6ce6e4ebc4d2e72792994ef3765", + "bridgeAddress": "0x0a0C1221f451Ac54Ef9F21940569E252161a2495", + "decimals": 6, + "symbol": "USDT", + "endpointID": 40102, + "network": "testnet", + "name": "Tether USD" + } + ], + "137": [ + { + "address": "0x3c499c542cef5e3811e1192ce70d8cc03d5c3359", + "bridgeAddress": "0x9Aa02D4Fae7F58b8E8f34c66E756cC734DAc7fe4", + "decimals": 6, + "symbol": "USDC", + "endpointID": 30109, + "name": "USD Coin" + }, + { + "address": "0xc2132d05d31c914a87c6611c10748aeb04b58e8f", + "bridgeAddress": "0xd47b03ee6d86Cf251ee7860FB2ACf9f91B9fD4d7", + "decimals": 6, + "symbol": "USDT", + "endpointID": 30109, + "name": "Tether USD" + } + ] + }, + "chains": [ + { + "chainId": 1, + "chainName": "Ethereum" + }, + { + "chainId": 56, + "chainName": "BSC" + }, + { + "chainId": 97, + "chainName": "BSC Testnet", + "network": "testnet" + }, + { + "chainId": 137, + "chainName": "Polygon" + } + ] +} +``` + +```javascript +export const en = { + 'select-modal.tag.incompatible': 'Incompatible', + 'select-modal.search.no-result.title': 'No result found', + 'select-modal.search.no-result.warning': + 'Try adjusting your search request to find what you’re looking for', +}; +``` + +## Initiation steps + +1. Create token and chains config file for route (config.json) which will be used in + useTransferConfig.ts to config tokens and transfer settings. +2. Config chains settings in index.ts. This setting is essential for wallet connections. rpcUrl and + id are available on ChainList. +3. Prepare token and network icon images. The default token and chain images can be found in public + folder. Please copy these images to public images folder of your application. If you skip this + step images and network icons will be blank. +4. Create a localization file en.ts , for multi-language support. +5. Import CanonicalBridgeProvider, ICanonicalBridgeConfig and TransferWidget components from + @bnb-chain/canonical-bridge-widget and Config bridgeConfig, transferConfig and chains props + within component accordingly. +6. Once setup is completed, you should be able to open widget UI and initiate token transfer. Ensure + you have sufficient tokens to activate the send button. + +The above demo is specific to Stargate route. Our widget also supports other routes, including +cBridge, deBridge, LayerZero and Meson. To enable additional routes, config route in transferConfig +is required. You can find more information in Custom Route (advanced). + +For available tokens and networks supported by each route, please refer to Network Configuration and +Token Configuration. Note that token and networks settings vary across different routes. For details +of configuration please refer to Bridge configuration (basic), Token configuration (advanced) and +Network Configuration + +P.S. to enable deBridge or cBridge routes, please check Custom Route (advanced) for further details. diff --git a/packages/canonical-bridge-widget/docs/Introduction.md b/packages/canonical-bridge-widget/docs/Introduction.md new file mode 100644 index 00000000..866bdf04 --- /dev/null +++ b/packages/canonical-bridge-widget/docs/Introduction.md @@ -0,0 +1,27 @@ +# Introduction + +## What is BNB Chain Canonical Bridge Widget? + +BNB Chain canonical bridge widget is a cross chain transfer frontend widget written in React.js. It +offers point-to-point transfers among major tokens on networks. Users can view detailed transfer +fees and compare transfer costs and times of various routes. + +The bridge widget supports multiple major tokens and chains transfer through various third party +bridge providers, allowing seamless embedding on websites without complex setup. + +The widget has basic settings, such as theme, supported chains, and multilingual options. It also +has advanced configurations to meet specific needs, such as default selected chain and tokens, +token, chain and token ordering, and hiding specific chain and tokens from network selection and +token selection. This makes it easier for users to find specific chains and tokens. + +## Main features + +- Token transfer across popular chains. +- Transfer fee and transfer waiting time information. +- Route comparison and the cheapest route pre-selection. +- Supported tokens and networks custom configuration. +- Automatically/ manually refetch the latest fee information. + +## Demo + +https://github.com/bnb-chain/canonical-bridge/tree/main/apps/canonical-bridge-ui diff --git a/packages/canonical-bridge-widget/docs/Network Configuration.md b/packages/canonical-bridge-widget/docs/Network Configuration.md new file mode 100644 index 00000000..47690162 --- /dev/null +++ b/packages/canonical-bridge-widget/docs/Network Configuration.md @@ -0,0 +1,4 @@ +Network configuration allows tokens to be transferred on certain networks. It also defines the +wallet connect setting for your dApp. Please refer to +(https://github.com/bnb-chain/canonical-bridge/blob/main/apps/canonical-bridge-ui/token-config/mainnet/chains.ts) +for network configuration. diff --git a/packages/canonical-bridge-widget/docs/Token Configuration (advanced).md b/packages/canonical-bridge-widget/docs/Token Configuration (advanced).md new file mode 100644 index 00000000..852ee3e6 --- /dev/null +++ b/packages/canonical-bridge-widget/docs/Token Configuration (advanced).md @@ -0,0 +1,83 @@ +Token configuration is the advanced setting to show tokens, network and routes. You can enable +particular routes, tokens and network in the following settings. + +## defaultSelectedInfo + +default selected token symbol, source and destination network and default send token amount. + +```javascript +defaultSelectedInfo: { + fromChainId: 1, + toChainId: 56, + tokenSymbol: 'USDT', + amount: '20', // 20 USDT + }, +``` + +1. fromChainId: Default source chain id. 1 represents Ethereum: + +2. toChainId:Default selected destination chain Id. 56 represents BNB Smart Chain + +3. tokenSymbol: Default selected token symbol + +4. amount: default transfer amount. 20 for 20 USDT. + +## Order + +token and network ordering + +```javascript +order: { + chains: [56, 204, 1], // network sorting list + tokens: ['USDC','USDT','FDUSD','USDC.e','ETH'], // token sorting list +} +``` + +## displayTokenSymbols + +Set token symbol for particular address on selected chain. The below example sets symbol of +0x2170Ed0880ac9A755fd29B2688956BD959F933F8 as ETH on BNB Smart Chain + +```javascript +displayTokenSymbols: { 56: { // Network id '0x2170Ed0880ac9A755fd29B2688956BD959F933F8': 'ETH', +} } +``` + +## Route configuration + +The route configuration is the place to setup supported tokens on route. It is able to hide +particular tokens and chains. For some cases, token may have different symbols in different network, +bridgedTokenGroups allows tokens with different symbols to be transferred. The following example is +for deBridge route. + +```javascript +// deBridge example +deBridge: { + config: deBridgeConfig, // config from API + exclude: { + chains: [204], // hide opBNB + tokens: { + 1: ['cUSDCv3'], // hide cUSDCv3 on Ethereum + 56: [ + '0x67d66e8ec1fd25d98b3ccd3b19b7dc4b4b7fc493', + '0x0000000000000000000000000000000000000000', + ], + 137: ['cUSDCv3'], + }, + }, + bridgedTokenGroups: [ + ['USDT', 'USDT.e'], + ['USDC', 'USDC.e'], + ['WETH', 'WETH.e'], + ], +}, +``` + +1. config :This is the place to setup supported token for particular route. Please check demo and + Custom Route (advanced) for more information. + +2. exclude : Hide networks or tokens on particular network. Token value could be token symbol or + token address. + +3. bridgedTokenGroups :By default, only tokens with the same symbol could be transferred across + different networks. Token groups setting allows tokens with different symbols to be transferred. diff --git a/packages/canonical-bridge-widget/package.json b/packages/canonical-bridge-widget/package.json index 34187212..3982eefb 100644 --- a/packages/canonical-bridge-widget/package.json +++ b/packages/canonical-bridge-widget/package.json @@ -1,6 +1,6 @@ { "name": "@bnb-chain/canonical-bridge-widget", - "version": "0.4.0", + "version": "0.5.1", "description": "canonical bridge widget", "author": "bnb-chain", "private": false, @@ -45,7 +45,7 @@ "@bnb-chain/space": "workspace:*", "@emotion/react": "~11.13.0", "@emotion/styled": "~11.13.0", - "@node-real/walletkit": "2.4.1-alpha.0", + "@node-real/walletkit": "2.4.1-alpha.2", "@tanstack/react-query": "~5.50.1", "@types/lodash": "~4.17.7", "@types/node": "^20", diff --git a/packages/canonical-bridge-widget/src/core/components/ConfirmCheckbox/index.tsx b/packages/canonical-bridge-widget/src/core/components/ConfirmCheckbox/index.tsx deleted file mode 100644 index 5e2ed4f9..00000000 --- a/packages/canonical-bridge-widget/src/core/components/ConfirmCheckbox/index.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import { Checkbox, CheckboxProps, theme, useColorMode } from '@bnb-chain/space'; - -export const ConfirmCheckbox: React.FC = (props: CheckboxProps) => { - const { colorMode } = useColorMode(); - - const { isChecked } = props; - - return ( - - ); -}; diff --git a/packages/canonical-bridge-widget/src/core/components/CopyAddress/index.tsx b/packages/canonical-bridge-widget/src/core/components/CopyAddress/index.tsx index 9bc3adee..4d30a6ff 100644 --- a/packages/canonical-bridge-widget/src/core/components/CopyAddress/index.tsx +++ b/packages/canonical-bridge-widget/src/core/components/CopyAddress/index.tsx @@ -27,7 +27,13 @@ export const CopyAddress = ({ return null; } return ( - + {isError ? ( { return ( { bodyProps?: ModalBodyProps; mainButtonIsDisabled?: boolean; closeButtonIsDisabled?: boolean; + className?: string; } export function StateModal(props: StateModalProps) { @@ -58,6 +59,7 @@ export function StateModal(props: StateModalProps) { mainButtonIsDisabled = false, closeButtonIsDisabled = false, onClose, + className, mainButtonProps, bodyProps, footerProps, @@ -76,8 +78,9 @@ export function StateModal(props: StateModalProps) { - + - {icon} + {icon} {description && ( {mainButtonText && (