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
//You need access to the private package to use the React version. Talk
//to the Brydge team here: https://4ztq5fmlxet.typeform.com/to/DoQHT7vV
//to get access or get started right now with the iFrame version
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}`,
}}
provider={provider as any}
lpInfo={lpInfo}
onConnectWallet={openConnectModal}
title='Add USDC-MATIC Liquidity'
destinationChainId={137}
darkMode={true}
widgetMode={"LP_DEPOSIT"}
onTxSubmit={(srcChainId, srcTxHash, isCrossChain) => console.log('tx submitted', srcChainId, srcTxHash, isCrossChain)}
/>
)
}
Step 2/2: Customize your props
​