🚰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

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;

React Component

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

🚧pageHow to Customize Props for Your Use Case