Embed Rainbow Bridge to your site
Use this generator to create an embeddable Rainbow Bridge widget
The embedded Rainbow Bridge is in beta. Use at your own risk.
Dark mode
Custom accent color
Filter available tokens
Opening the widget
The widget attaches an openBridge function to the window object. You can use it to open the widget by calling window.openBridge().Alternatively, you can enter a selector that opens the widget when clicked below. For example, a class or id of a button.Code example
// Load Rainbow Embed
<script src="https://embed.rainbowbridge.app/bridge.js"></script>
const [connectedAccount, setConnectedAccount] = useState(null)
// Array of token addresses
const selectedAddresses = [...]
useEffect(() => {
// Reinitialize embed code when account changes
window.ethereum.on("accountsChanged", (accounts) => setConnectedAccount(accounts[0]))
// Remove event listener when component unmounts
return () => ethereum.removeListener("accountsChanged", (accounts) => setConnectedAccount(accounts[0]))
}, [])
useEffect(() => {
const web3Provider = new ethers.providers.Web3Provider(window.ethereum, "any")
;(async () => {
// Get list of tokens on Aurora
const tokenList = await fetch("https://aurora.dev/tokens.json", {
method: "GET",
})
const { tokens } = await tokenList.json()
// Filter token list based on selected tokens
const selectedTokens = tokens.filter((token) => selectedAddresses.includes(token.address))
// Initialize the Rainbow Bridge Widget
RainbowBridge.init({
provider: web3Provider,
account: connectedAccount,
darkMode: false,
themeColor: "#111827",
selectedTokens: selectedTokens,
includeETH: true,
})
})()
}, [connectedAccount])
Looking for the testnet version? Go here.