Comment on page
⚔
Cross Chain Swap Mode - Integration Docs
Swap mode lets your users buy your token, right on your website.
.gif?alt=media&token=d724db08-97c7-40b2-84e9-91f9f360a6ee)
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 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;
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