🚧

How to Customize Props for Your Use Case

If you run into issues at any point, reach out to our team on Discord. We're always here to help!
Props enable you to customize how the Brydge widget functions in your dApp. You can find a full list of props below:
Prop list:
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:
chainId: chainId of the network that the approval transaction was sent on
txHash: hash of the approval transaction
onTxSubmit
(srcChainId: Number, srcTxHash: String, isCrossChain: Boolean) => void
All
A function callback that exposes 3 parameters after the confirmation transaction is submitted:
srcChainId: chainId of the network the transaction initiated on
srcTxHash: hash of the confirmation transaction
isCrossChain: set to true if transaction cross-chain, false for same-chain
This is also most commonly used with the Brydge Transaction Status API​
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:
Uniswap (routerModel==0, also the default DEX)
Quickswap (routerModel==1)
An example on how to do this can be found here.
backgroundColor
String
iFrame only (All modes)
iFrame background color if widget set to have rounded corners. Match the parent component's color for consistency
​

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: `chainId`: `chainId` of the network that the approval transaction was sent on `txHash`: hash of the approval transaction
onTxSubmit	`(srcChainId: Number, srcTxHash: String, isCrossChain: Boolean) => void`	All	A function callback that exposes 3 parameters after the confirmation transaction is submitted: `srcChainId`: `chainId` of the network the transaction initiated on `srcTxHash`: hash of the confirmation transaction `isCrossChain`: set to `true` if transaction cross-chain, `false` for same-chain This is also most commonly used with the Brydge Transaction Status API
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: Uniswap (`routerModel==0`, also the default DEX) Quickswap (`routerModel==1`) An example on how to do this can be found here.
backgroundColor	String	iFrame only (All modes)	iFrame background color if widget set to have rounded corners. Match the parent component's color for consistency

Integration Docs - Previous

Cross Chain Swap Mode - Integration Docs

Theme Customization

Last modified 8mo ago