Bridge Assets Between Base and Your Appchain Using OnchainKit
Appchains are for mature projects who are seeking scale through dedicated blockspace, full control over their infrastructure, or may be looking to utilize custom gas tokens.
After you’ve deployed an Appchain, offering your users a hassle-free way to move funds is key to a great user experience. If you are looking to launch an Appchain or learn more about Appchains broadly, refer to the Appchains FAQs page.
In this guide, you’ll walk you through integrating the [Bridge component] from OnchainKit into your app to facilitate easy fund transfers.
Make sure you’re running OnchainKit version >= 0.37.0 and have a basic understanding of Viem, JavaScript/TypeScript, and Tanstack before you begin.
For your application to work, there are a few required environment variables that need to be set. To find them, navigate to the [Coinbase Developer Platform] site, select the API Keys tab, then click the Client API Key button.
With your client API key copied to your clipboard, create a .env file in your project root with the following content. Replace the placeholder for your API key as needed:
Create a new file named Chain.ts in the app/ directory. In this new file, define your appchain using Viem’s defineChain function. In this example, you will configure the Blocklords Appchain:
To enable the OnchainKit Provider to communicate with both your Base chain and your Appchain, update your Wagmi configuration. Create a wagmi.ts file or modify your configuration file as shown below:
After creating your custom Wagmi configuration, be sure to import it into your OnchainKitProvider component (typically within your main provider file e.g. Providers.tsx).
This is a crucial step in enabling our OnchainKit Provider to communicate with both our Base chain and our Appchain.
Now, create a dedicated page to display the bridge component. For example, create a new folder named Bridge in your app/ directory and add a page.tsx file with the following content: