🚧
How to Customize Props for Your Use Case
Props enable you to customize how the Brydge widget functions in your dApp. You can find a full list of props below:
Prop | Type | Modes | Description |
---|---|---|---|
widgetMode | String | All (required) | Set to "PURCHASE" to execute calldata that calls a smart contract. Set to "SWAP" to offer a swap to a desired token. Set to "LP_DEPOSIT" to deposit to a liquidity pool. |
jsonRpcEndpoints | String | Required for All modes in React version. Unnecessary in iFrame version | A jsonRpcEndpoint is required for each chain. If your dApp already has an RPC endpoint, you can pass that in the jsonRpcEndpoint prop. If you don’t yet have a JSON RPC endpoint, you can easily create a free one with services like Infura, Alchemy, Ankr, and Infura. |
destinationChainId | Number | undefined | PURCHASE (required), SWAP | Your dApp's chain ID |
theme | Any | All | Custom theme that lets you edit the widget to match your site's native theming. See all theming options here. |
provider | Any | All (required) | A Web3 provider is required to connect to your user’s wallet. Both the Ethers.js and web3.js provider objects are compatible with the widget, as is any EIP-1193 provider. This should be the provider that you use to connect your user’s wallet. |
outputTokenAddress | String | PURCHASE (required), SWAP | If PURCHASE Mode, the ERC20 token your contract expects to receive. If SWAP, the default output ERC20 token to display |
price | Number | PURCHASE (required) | If PURCHASE, the price of output token your contract expects to receive |
calls | ICall[] | PURCHASE (required) | This represents the encoded calldata that is executed on the destination chain in order to complete your desired action (purchase NFT, stake ERC20, etc). Each element in the array represents a function call that will be executed on the destination chain in order. You can find a walkthrough of how to set up calls here. |
lpInfo | type LpInfo = { lpChainId: string routerAddress: string currencyAAddress: string currencyBAddress: string tokenPairName: string } | LP_DEPOSIT (Required) | This parameter represents the LP Pool that you would like the widget to deposit to. currencyA and currencyB represent the two tokens comprising the LP Pool.
If you want to input into a NATIVE token pool, set currencyAAddress or currencyBAddress to "NATIVE" |
title | String | All | Title displayed at top of widget |
onConnectWallet | () => void | All | “Connect your wallet” button will be clickable, and clicking it will trigger this handler function. This can be used to trigger your own wallet connection flow from the widget |
locale | String | All | Specifies an explicit locale to use for the widget interface. This can be set to one of the values exported by the library in SUPPORTED_LOCALES. |
width | Number | String | All | Specifies the width of the widget. If specified as a number, this is in pixels; otherwise, it is interpreted as a CSS data type. Recommended width is 360px. Minimum width is 300px |
onApproval | (chainId: Number, txHash: String) => void | All | A function callback that exposes 3 parameters after the approval transaction is submitted:
|
onTxSubmit | (srcChainId: Number, srcTxHash: String, isCrossChain: Boolean) => void | All | A function callback that exposes 3 parameters after the confirmation transaction is submitted:
|
tokenListAddendum | type TokenInfoExternal[] = {
chainId: number address: string decimals: number symbol: string name: string routerModel?: number }[] | All | Enables you to add additional tokens to the widget. The type is TokenInfoExternal containing standard token info (chainId , address , etc.) and an additional parameter routerModel to dictate what DEX to use for trades with this token. Currently, there are two supported DEX options:
|
backgroundColor | String | iFrame only (All modes) | iFrame background color if widget set to have rounded corners. Match the parent component's color for consistency |