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.
This site uses cookies.
Read more