Blocknative Web3-Onboard
Learn how to integrate Capsule with Blocknative’s Web3-Onboard library for a seamless onboarding experience.
Introduction
Capsule works as an easy add-on to Blocknative’s Web3-Onboard library. If you’re already using Web3-Onboard, you can add Capsule as an option in just a few lines of code.
This guide provides a step-by-step process to integrate Capsule with Web3-Onboard, from installation to configuration and usage within a React project.
Prerequisites
Ensure you have the following installed:
- Node.js
- npm or yarn
Step 1: Installation
First, you need to install the required packages. You can choose your preferred package manager:
Step 2: Configuration
Next, set up the Web3-Onboard and Capsule modules in your React project.
Initializing Web3-Onboard
Create a new file onboard.ts
in your project root and add the following code:
Step 3: Usage in a React Component
Now, you can use the initialized onboard instance in your React components. For example, in App.js
:
Additional Features
Using Web3OnboardProvider
To manage global state more effectively, wrap your application in Web3OnboardProvider
:
Using Hooks
Leverage Web3-Onboard hooks such as useConnectWallet
, useSetChain
, useNotifications
, useWallets
, and
useAccountCenter
to interact with wallets and manage the user experience. These hooks provide a streamlined way to
handle wallet connections, chain settings, notifications, wallet state, and account center management.
For more details on these hooks and how to implement them, refer to the
Block Native Web3-Onboard documentation.
Final Steps
By following these steps, you have successfully integrated Capsule with Blocknative’s Web3-Onboard library. This setup allows you to provide a seamless onboarding experience for your users, leveraging the power of Capsule’s secure, portable, and user-friendly wallets.
For more detailed information on customizations, check out the following guides:
Customization Guide
Learn how to customize Capsule for your needs
Signing Transactions
Signing with ethers.js, wagmi, and viem
Troubleshooting and Support
If you encounter any issues or have questions, please refer to the documentation or reach out to our support team.
Was this page helpful?