From dc63cc9ff9d65f23fd7bd943943a34afaf32fed7 Mon Sep 17 00:00:00 2001 From: ayo-klaytn Date: Fri, 3 May 2024 08:07:00 +0100 Subject: [PATCH] updated --- .../tutorials/kaikas-dapp-integration.md | 69 ++++++++----------- 1 file changed, 27 insertions(+), 42 deletions(-) diff --git a/docs/build/tutorials/kaikas-dapp-integration.md b/docs/build/tutorials/kaikas-dapp-integration.md index 5256e6014b..1ac7e50999 100644 --- a/docs/build/tutorials/kaikas-dapp-integration.md +++ b/docs/build/tutorials/kaikas-dapp-integration.md @@ -8,7 +8,7 @@ ## Introduction -[Kaikas][Kaikas] is a blockchain wallet, similar to [Metamask][Metamask], with additional support for Klaytn-specific [Transactions][Klaytn-Transactions] & [Accounts][Klaytn-Accounts]. This article will guide you through integrating [Kaikas][Kaikas] with a decentralized application (dApp), from High-level (abstract) to Low-level (fine-grained) implementations. +[Kaikas](https://docs.kaikas.io) is a blockchain wallet, similar to [Metamask](https://metamask.io), with additional support for Klaytn-specific [Transactions](https://docs.klaytn.foundation/docs/learn/transactions) & [Accounts](https://docs.klaytn.foundation/docs/learn/accounts). This article will guide you through integrating [Kaikas](https://docs.kaikas.io) 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: @@ -18,7 +18,9 @@ For the sake of this guide, we will be dividing Kaikas dApp integration into thr :::note + The aforementioned libraries use `Providers` under the hood.  + ::: @@ -28,38 +30,40 @@ Many dApps utilize frontend frameworks for state management & delivering reactiv 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](#2-utility-libraries) or [Provider](#3-providers) for complex or low-level interactions. -While most UI libraries have built-in support for [Metamask][Metamask], integrating Kaikas is also easy since its [API][Klaytn-API] is built on [Metamask's][Metamask-API]. 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][React] or [Next.js][Next.js]: +While most UI libraries have built-in support for Metamask, integrating Kaikas is also easy since its [API](https://docs.klaytn.foundation/docs/references/json-rpc) is built on [Metamask's](https://docs.metamask.io/wallet/reference/json-rpc-api). 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](https://react.dev) or [Next.js](https://nextjs.org): -- [Web3Modal](#1i-web3modal-example) -- [Web3-Onboard](#1ii-web3-onboard-example) +- [Web3Modal](#1.1-web3modal-example) +- [Web3-Onboard](#1.2-web3-onboard-example) -### 1i. Web3Modal example +### 1.1 Web3Modal example ![Web3Modal Hero Banner](https://web3modal.com/images/hero-banner.png) -By [WalletConnect][WalletConnect], [Web3Modal][Web3Modal] offers the following **Features:** +By [WalletConnect](https://walletconnect.com), [Web3Modal](https://web3modal.com) offers the following **Features:** - Buttons + Modals for Connect Wallet, Account information, & Network information -- Support for [Email Wallets][Email Wallets], [Coinbase][Coinbase] accounts, & [EIP-4361][EIP-4361] +- Support for [Email Wallets](https://walletconnect.com/blog/web3modal-web3-email-login-wallets), [Coinbase](https://www.coinbase.com) accounts, & [EIP-4361](https://docs.login.xyz/general-information/siwe-overview/eip-4361) **Considerations:** -- Using [@web3modal/wagmi][web3modal-wagmi], you have to commit to their frontend stack of [Wagmi][Wagmi] & [Tanstack Query][Tanstack-Query] +- Using [@web3modal/wagmi](https://www.npmjs.com/package/@web3modal/wagmi), you have to commit to their frontend stack of [Wagmi](https://wagmi.sh) & [Tanstack Query](https://tanstack.com/query) - Requires a `projectId` [signup w/ WalletConnect](https://cloud.walletconnect.com/sign-in) :::note + Example Code: [kaikas-web3modal](https://github.com/klaytn/examples/tree/main/tools/wallet-libraries/kaikas-web3modal) + ::: -### 1ii. Web3-Onboard example +### 1.2 Web3-Onboard example ![Web3-Onboard Graphic](https://onboard.blocknative.com/_app/immutable/assets/connect-modal.b7439c5e.svg) -By [Blocknative][Blocknative], [Web3-Onboard][Web3-Onboard] offers the following **Features:** +By [Blocknative](https://www.blocknative.com), [Web3-Onboard](https://onboard.blocknative.com) offers the following **Features:** - Configurable Onboard text - Modals for Connect Wallet, Switch Account, & Switch Network -- [Notification Components][Web3-Onboard-customNotifications] +- [Notification Components](https://onboard.blocknative.com/docs/modules/core#customnotification) - (Optional) Register API Key(s) to fetch & render real-time data **Considerations:** @@ -67,12 +71,14 @@ By [Blocknative][Blocknative], [Web3-Onboard][Web3-Onboard] offers the following - You'll have to write your Buttons :::note + Example Code: [kaikas-web3onboard-react](https://github.com/klaytn/examples/tree/main/tools/wallet-libraries/kaikas-web3onboard-react) + ::: ## 2. Utility Libraries -Libraries like [caver-js](#2i-caver-js) & [ethers.js](#2ii-ethersjs-example) abstract just enough to streamline blockchain interactions while still being able to call [Provider](#3-providers) APIs directly. +Libraries like [caver-js](#2.1-caver-js) & [ethers.js](#2.2-ethersjs-example) abstract just enough to streamline blockchain interactions while still being able to call [Provider](#3-providers) 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: @@ -82,53 +88,32 @@ Using Utility Libraries to connect an account or send native tokens (e.g., KLAY/ - string error codes/messages are mapped to error Classes with custom properties & methods. - Documentation & Type-safety -### 2i. caver-js +### 2.1 caver-js -[caver-js][caver-js] provides first-party support for [Klaytn-specific methods][Klaytn-API]: +[caver-js](https://github.com/klaytn/caver-js) provides first-party support for [Klaytn-specific methods](https://docs.klaytn.foundation/docs/references/json-rpc): - Transaction, Account, & Account Key types - Fee Delegation :::note + Example Code: [kaikas-caverjs](https://github.com/klaytn/examples/tree/main/tools/wallet-libraries/kaikas-caverjs) + ::: -### 2ii. ethers.js example +### 2.2 ethers.js example -[ethers.js][ethers.js] is the [most popular](https://npmtrends.com/caver-js-vs-ethers-vs-viem-vs-web3) JavaScript Utility Library for interacting with the blockchain. It aims to be: +[ethers.js](https://docs.ethers.io/v6) is the [most popular](https://npmtrends.com/caver-js-vs-ethers-vs-viem-vs-web3) 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](https://github.com/klaytn/examples/tree/main/tools/wallet-libraries/kaikas-ethersjs) + ::: ## 3. Providers -At the lowest level is the Provider, [`window.klaytn`][Klaytn-Provider] (Kaikas itself). You might prefer [Utility Libraries](#2-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`][Klaytn-API-getAccount], [`klay_sendTransactionAsFeePayer`][Klaytn-API-sendTransactionAsFeePayer], & more. - -[Blocknative]: https://www.blocknative.com -[Coinbase]: https://www.coinbase.com -[EIP-4361]: https://docs.login.xyz/general-information/siwe-overview/eip-4361 -[Email Wallets]: https://walletconnect.com/blog/web3modal-web3-email-login-wallets -[Klaytn-Accounts]: https://docs.klaytn.foundation/docs/learn/accounts -[Klaytn-Provider]: https://docs.kaikas.io/02_api_reference/01_klaytn_provider -[Klaytn-Transactions]: https://docs.klaytn.foundation/docs/learn/transactions -[Kaikas]: https://docs.kaikas.io -[Klaytn-API]: https://docs.klaytn.foundation/docs/references/json-rpc -[Klaytn-API-getAccount]: https://docs.klaytn.foundation/docs/references/json-rpc/klay/get-account -[Klaytn-API-sendTransactionAsFeePayer]: https://docs.klaytn.foundation/docs/references/json-rpc/klay/send-transaction-as-fee-payer -[Metamask]: https://metamask.io -[Metamask-API]: https://docs.metamask.io/wallet/reference/json-rpc-api -[Next.js]: https://nextjs.org -[React]: https://react.dev -[Tanstack-Query]: https://tanstack.com/query -[Wagmi]: https://wagmi.sh -[WalletConnect]: https://walletconnect.com -[Web3Modal]: https://web3modal.com -[Web3-Onboard]: https://onboard.blocknative.com -[Web3-Onboard-customNotifications]: https://onboard.blocknative.com/docs/modules/core#customnotification -[caver-js]: https://github.com/klaytn/caver-js -[ethers.js]: https://docs.ethers.io/v6 -[web3modal-wagmi]: https://www.npmjs.com/package/@web3modal/wagmi \ No newline at end of file +At the lowest level is the Provider, [`window.klaytn`](https://docs.kaikas.io/02_api_reference/01_klaytn_provider) (Kaikas itself). You might prefer [Utility Libraries](#2-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`](https://docs.klaytn.foundation/docs/references/json-rpc/klay/get-account), [`klay_sendTransactionAsFeePayer`](https://docs.klaytn.foundation/docs/references/json-rpc/klay/send-transaction-as-fee-payer), & more.