🚰
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.
.gif?alt=media&token=2af223be-d0e2-498b-a51b-5d746b2978c2)
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