Bridge to appchains with OnchainKit
AppchainBridge
component is alpha release software and is provided AS-IS. Use at your own risk.AppchainBridge
component provides a simple interface for implementing bridging to appchains with OnchainKit.
AppchainBridge
component, ensure you’ve completed the Getting Started steps.
create onchain
to scaffold your project.
AppchainBridge
to an existing project, simply install OnchainKit.
<OnchainKitProvider />
around your app, following the steps in Getting Started.
AppchainBridge
, you’ll need to create a custom chain for your network using Viem’s defineChain.
You can retrieve the chain ID and your RPC URL from your appchain’s dashboard in Coinbase Developer Platform.
Once successfully created, add the custom chain to your Wagmi configuration, and provide it as a child component to OnchainKitProvider
.
Appchain
object. You can also render an icon in the UI using the icon
prop.
AppchainBridge
component with the chain
and appchain
props.
bridgeableTokens
prop to the AppchainBridge
component.
Let’s add a custom “Appchain Token” to the bridgeable tokens array.
remoteToken
field represents the token address on the appchain you’re bridging to.ERC-20 tokens on the appchain must comply to the IOptimismMintableERC20
interface to be bridgeable.Follow the Optimism documentation to retrieve the remoteToken
address for your ERC-20 token.customBridgeableTokens
into the AppchainBridge
component with the bridgeableTokens
prop.
isCustomGasToken
field to true
on the custom gas token for your bridgeable token.
handleFetchPrice
function in the AppchainBridge
component. This callback is run everytime the user changes the input amount.
The function must match the following signature:
AppchainBridge
component includes the following subcomponents:
<AppchainBridge />
- A fully built bridge component that handles deposits and withdrawals. Also includes a children
prop to render custom components.<AppchainBridgeProvider />
- A headless provider that provides the bridge context to child components.<AppchainBridgeInput />
- A component that handles the amount input for bridging tokens.<AppchainBridgeNetwork />
- A component that displays network information and allows network selection.<AppchainBridgeTransactionButton />
- A component that triggers bridge transactions.<AppchainBridgeWithdraw />
- A component that handles the withdrawal interface.<AppchainNetworkToggleButton />
- A button component for toggling between networks.<AppchainBridgeSuccess />
- A component that displays transaction success states.<AppchainBridgeResumeTransaction />
- A component that handles resuming interrupted bridge transactions.