⚔️Cross Chain Swap Mode - Integration Docs

Swap mode lets your users buy your token, right on your website.

Try Swap mode here.

Swap 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 url =
      'https://brydge.network/widget/' +
      encodeUrl({
        widgetMode: 'SWAP',
        darkMode: true,
        title: 'Buy ICE on Polygon',
        destinationChainId: 137,
        outputTokenAddress: '0xc6c855ad634dcdad23e64da71ba85b8c51e5ad7c',
        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();

    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}`,
            }}
            onConnectWallet={openConnectModal}
            title="Buy ICE on Polygon"
            destinationChainId={137}
            widgetMode={"SWAP"}
            outputTokenAddress={"0xc6c855ad634dcdad23e64da71ba85b8c51e5ad7c"}
            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