Kaikas DApp Integration

Table of Contents

1. UI Libraries
2. Utility Libraries
3. Providers

Introduction

Kaikas is a non-custodial wallet, similar to Metamask, with additional support for Klaytn-specific Transactions & Accounts. This article will guide you through integrating Kaikas 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 Kaikas 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 Kaikas 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 Kaikas is also easy since its API is built on Metamask's. Even if a library doesn't natively support Kaikas, extending it for Kaikas 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 web3klaytn & 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., KLAY/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. web3klaytn

web3klaytn 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 Klaytn-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 (Kaikas itself). You might prefer Utility Libraries, but knowledge of Provider APIs helps debug & understand how dependent libraries work. Referring to [Klaytn's JSON-RPC API][Klaytn-API] is necessary for using Klaytn-specific methods like klay_getAccount, klay_sendTransactionAsFeePayer, & more.