Multi Chain Bridge UI Guide

This UI guide is a counterpart to the technical Bridge Integration Guide and is intended to offer UI and UX patterns developers can implement alongside their core application that has instances on multiple chains, for example on a separate "Bridge" tab.

Best Practices

• Provide a full bridge (or "onboarding") experience in your application, for example on a "Bridge" tab.

• Default the source chain selector to the currently connected network.

• Don't require users to go to wallet, switch network, then return to app to perform an action. For example, if the user selects a source chain that is not the network they are currently connected to:

  • 1: user clicks the button to perform the action ("confirm")

  • 2: wallet prompts user to switch network to the source chain

  • 3: wallet prompts user to execute the bridge

Example Flow

From chain defaults to Ethereum, the network the user' wallet is currently connected to.

User selects to use their funds on Arbitrum.

User inputs the amount and asset they wish to send.

Since the user is currently connected to Ethereum, they will need to switch to Arbitrum and then confirm the deposit.

After switching the wallet network to Arbitrum the user is immediately prompted to confirm the transaction, without needing to go back to the app.

Transfers in Across are executed extremely fast, typically under 5 seconds and providing the user with a timer to completion provides a magical UX and reduces the uncertainty they experience when bridging.