Links
🚧

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