Kaia Wallet DApp Integration
Table of Contents
Introduction
Kaia Wallet is a non-custodial wallet, similar to Metamask, with additional support for Kaia-specific Transactions & Accounts. This article will guide you through integrating Kaia Wallet with a decentralized application (dApp), from High-level (abstract) to Low-level (fine-grained) implementations.
For the sake of this guide, we will be dividing Kaia Wallet dApp integration into three main categories:
- UI Libraries
- Utility libraries
- Providers
The aforementioned libraries use Providers
under the hood.
1. UI Libraries
Many dApps utilize frontend frameworks for state management & delivering reactive services. The recommended way to integrate Kaia Wallet with such dApps is to use a UI Library built on the same framework.
UI Libraries provide components for user interactions, like ConnectWallet
component. They also save you the hassle of managing low-level states, like Multiple Accounts & Multiple Networks. You can look at the underlying Utility Library or Provider for complex or low-level interactions.
While most UI libraries have built-in support for Metamask, integrating Kaia Wallet is also easy since its API is built on Metamask's. Even if a library doesn't natively support Kaia Wallet, extending it for Kaia Wallet integration is straightforward. For example, these are 2 popular libraries for React or Next.js:
1.1. Appkit example
By Reown, Appkit offers the following Features:
- Buttons + Modals for Connect Wallet, Account information, & Network information
- Support for Email Wallets, Coinbase accounts, & EIP-4361
Considerations:
- Using @reown/appkit, you have an option to commit to either the frontend stack of Wagmi & Tanstack Query or simply Ethers
- Requires a
projectId
signup w/ Reown
Example Code: kaikas-web3modal
1.2. Web3-Onboard example
By Blocknative, Web3-Onboard offers the following Features:
- Configurable Onboard text
- Modals for Connect Wallet, Switch Account, & Switch Network
- Notification Components
- (Optional) Register API Key(s) to fetch & render real-time data
Considerations:
- You'll have to write your Buttons
Example Code: kaikas-web3onboard-react