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
projectIdsignup 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
2. Utility Libraries
Libraries like kaia-sdk & ethers.js abstract just enough to streamline blockchain interactions while still being able to call Provider APIs directly.
Using Utility Libraries to connect an account or send native tokens (e.g., KAIA/ETH) will be no different, in terms of syntax & lines of code, from calling Providers directly. Where libraries mainly improve are in the following areas:
- Smart Contract interactions
- These involve ABIs, encoding inputs, & decoding outputs. Without a library, the code for these can be verbose & error-prone.
- Error-handling
- string error codes/messages are mapped to error Classes with custom properties & methods.
- Documentation & Type-safety
2.1. kaia-sdk
kaia-sdk is a set of drop-in extensions for other Utility Libraries, like ethers.js & web3.js. It allows you to use your preferred library while exposing first-party support for Kaia-specific methods:
- Transaction, Account, & Account Key types
- Fee Delegation
Example Code: kaikas-web3klaytn
2.2. ethers.js example
ethers.js is the most popular JavaScript Utility Library for interacting with the blockchain. It aims to be:
- Extensive: support for multiple wallet formats, languages, & functions
- Robust: comprehensive tests, documentation, & typing
Example Code: kaikas-ethersjs
3. Providers
At the lowest level is the Provider, window.klaytn (Kaia Wallet itself). You might prefer Utility Libraries, but knowledge of Provider APIs helps debug & understand how dependent libraries work. Referring to [Kaia's JSON-RPC API][Kaia-API] is necessary for using Kaia-specific methods like kaia_getAccount, kaia_sendTransactionAsFeePayer, & more.