Cross-chain Actions UI Guide

This UI guide is a counterpart to the technical Cross-chain Actions Integration Guide and is intended to offer UI and UX patterns developers can implement directly within their core application CTAs.

Best Practices

• Embed a source chain selector directly within the UI component where users perform an action.

• 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 cross-chain action (depositing into Across)

Example Flow

This example app is a borrow/lend protocol where the user selects the vault on Optimism they want to deposit into. The source chain selector is embedded directly within the deposit flow removing the need for a user to go to a separate page or bridge to use funds from their desired chain.

User selects to use their funds on Arbitrum.

User inputs the amount they wish to send.

Since the user is currently connected to Ethereum, but want to use funds on Arbitrum to deposit into the Optimism vault, 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. Once confirming the user's assets are transferred from Arbitrum to Optimism and deposited into the vault, atomically.

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.