This page uses machine translation from English, which may contain errors or unclear language. For the most accurate information, please see the original English version. Some content may be in the original English due to frequent updates. Help us improve this page's translation by joining our effort on Crowdin. (Crowdin translation page, Contributing guide)

Kaia Wallet DApp Integration

Table of Contents

1. UI Libraries
2. Utility Libraries
3. Providers

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:

• Web3Modal
• Web3-Onboard

1.1. Web3Modal example

By WalletConnect, Web3Modal offers the following Features:

• Buttons + Modals for Connect Wallet, Account information, & Network information
• Support for Email Wallets, Coinbase accounts, & EIP-4361

Considerations:

• Using @web3modal/wagmi, you have to commit to their frontend stack of Wagmi & Tanstack Query
• Requires a projectId signup w/ WalletConnect

노트

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.