Links
🚰

Liquidity Pool Deposit Mode - Integration Docs

Liquidity Pool Deposit mode lets your users add liquidity to your pools with any token from multiple chains, right from your website.
Try Liquidity Pool Deposit mode here.

LP Deposit Mode Quickstart

Step 1/2: Install the package and paste the below component into your app
iFrame
React Component
yarn add @brydge-network/utils
import { encodeUrl } from '@brydge-network/utils';
​
const lpInfo = {
lpChainId: 137
routerAddress: '0xa5E0829CaCEd8fFDD4De3c43696c57F7D7A678ff'
currencyAAddress: '0x2791Bca1f2de4661ED88A30C99A7a9449Aa84174'
currencyBAddress: 'NATIVE'
tokenPairName: 'USDC-MATIC LP'
}
​
const url =
'https://brydge.network/widget/' +
encodeUrl({
widgetMode: 'LP_DEPOSIT',
darkMode: true,
title: 'Add USDC-MATIC Liquidity',
lpInfo: lpInfo,
backgroundColor: '#000000',
})
function App() {
return (
<div>
<iframe src={url} width={360} height={470} />
</div>
);
}
​
export default App;
yarn add @brydge-network/widget
import { BrydgeWidget } from "@brydge-network/widget";
​
​
export function yourPage() {
const provider = yourEthereumProvider();
const lpInfo: LpInfo = {
lpChainId: 137
routerAddress: '0xa5E0829CaCEd8fFDD4De3c43696c57F7D7A678ff'
currencyAAddress: '0x2791Bca1f2de4661ED88A30C99A7a9449Aa84174'
currencyBAddress: 'NATIVE'
tokenPairName: 'USDC-MATIC LP'
}
​
return(
<BrydgeWidget
jsonRpcEndpoints={{
1: `https://mainnet.infura.io/v3/${process.env.NEXT_PUBLIC_INFURA_KEY}`,
10: `https://optimism-mainnet.infura.io/v3/${process.env.NEXT_PUBLIC_INFURA_KEY}`,
137: `https://polygon-mainnet.infura.io/v3/${process.env.NEXT_PUBLIC_INFURA_KEY}`,
42161: `https://arbitrum-mainnet.infura.io/v3/${process.env.NEXT_PUBLIC_INFURA_KEY}`,
43114: `https://avalanche-mainnet.infura.io/v3/${process.env.NEXT_PUBLIC_INFURA_KEY}`,
}}
provider={provider as any}
lpInfo={lpInfo}
onConnectWallet={openConnectModal}
title='Add USDC-MATIC Liquidity'
destinationChainId={137}
widgetMode={"LP_DEPOSIT"}
onTxSubmit={(srcChainId, srcTxHash, isCrossChain) => console.log('tx submitted', srcChainId, srcTxHash, isCrossChain)}
/>
)
}
Step 2/2: Customize your props
​