Single 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 on a single chain, 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 balance where the user has the most funds of the input asset. The destination chain is the network where the user is interacting with your protocol.

• 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

For apps that are only deployed on a single chain, the destination chain can be defaulted to your chain, reducing the steps for users.

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 Polygon, 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.