Skip to main content

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
note

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:

1.1. Web3Modal example​

Web3Modal Hero Banner

By WalletConnect, Web3Modal offers the following Features:

Considerations:

note

Example Code: kaikas-web3modal

1.2. Web3-Onboard example​

Web3-Onboard Graphic

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
note

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
note

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
note

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.

Make this page better