🚧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