跳至主要內容
本頁面使用機器翻譯自英語,可能包含錯誤或不清楚的語言。如需最準確的信息,請參閱英文原文。由於更新頻繁,部分內容可能與英文原文有出入。請加入我們在 Crowdin 上的努力,幫助我們改進本頁面的翻譯。 (Crowdin translation page, Contributing guide)

Kaia 錢包 DApp 集成

目錄

  1. 用戶界面庫
  2. 實用圖書館
  3. 提供商

導言

Kaia 錢包 是一個非託管錢包,類似於Metamask,額外支持 Kaia 特有的交易賬戶。 本文將指導您將 Kaia Wallet與去中心化應用程序(dApp)集成,從高層(抽象)到低層(細粒度)實現。

在本指南中,我們將把 Kaia 錢包 dApp 整合分為三大類:

  • 用戶界面圖書館
  • 實用圖書館
  • 提供商
備註

上述庫在引擎蓋下使用 "提供者"。

1. 用戶界面圖書館

許多 dApp 利用前端框架進行狀態管理和提供反應式服務。 將 Kaia 錢包與此類應用程序集成的推薦方法是使用基於相同框架構建的用戶界面庫。

用戶界面庫為用戶交互提供組件,如 "ConnectWallet "組件。 它們還能為您省去管理多賬戶和多網絡等低級狀態的麻煩。 您可以查看底層的 Utility Library或 [Provider] (#3-providers),瞭解複雜或低級的交互。

雖然大多數用戶界面庫都內置了對 Metamask 的支持,但由於 Kaia Wallet 的API是基於Metamask's構建的,因此集成起來也很容易。 即使一個庫沒有原生支持 Kaia 錢包,擴展它以集成 Kaia 錢包也很簡單。 例如,這是 ReactNext.js 的 2 個流行庫:

1.1. Appkit 示例

Appkit Hero Banner

通過 ReownAppkit 提供以下功能:

考慮因素:

備註

示例代碼:kaikas-web3modal

1.2. Web3-Onboard 示例

Web3-Onboard Graphic

BlocknativeWeb3-Onboard提供以下功能:

  • 可配置的機載文本
  • 連接錢包、交換賬戶和交換網絡的模式
  • 通知組件
  • (可選)註冊 API 密鑰以獲取和呈現即時數據

考慮因素:

  • 您必須編寫您的按鈕
備註

2. 實用圖書館

kaia-sdk](#21-kaia-sdk) 和 ethers.js 等庫的抽象程度足以簡化區塊鏈交互,同時還能直接調用 Provider API。

使用實用程序庫連接賬戶或發送本地令牌(如 KAIA/ETH),在語法和代碼行數*方面與直接調用提供商沒有區別。 圖書館主要在以下方面有所改進:

  • 智能合約互動
    • 這些涉及 ABI、編碼輸入和解碼輸出。 如果沒有庫,這些代碼可能會冗長且容易出錯。
  • 錯誤處理
    • 字符串錯誤代碼/信息被映射到具有自定義屬性和方法的錯誤類。
  • 文件和類型安全

2.1. kaia-sdk

kaia-sdk是其他實用程序庫(如 ethers.jsweb3.js)的插入式擴展集。 它允許您使用自己喜歡的庫,同時為Kaia 特定方法提供第一方支持:

  • 交易、賬戶和賬戶密鑰類型
  • 收費代表團
備註

示例代碼:kaikas-web3klaytn

2.2. ethers.js 示例

etherthers.js最受歡迎的 JavaScript 工具庫,用於與區塊鏈進行交互。 它的目標是

  • 廣泛:支持多種錢包格式、語言和功能
  • 穩健:全面的測試、文檔和鍵入
備註

示例代碼:kaikas-ethersjs

3. 提供商

最底層是提供程序 window.klaytn(Kaia 錢包本身)。 您可能更喜歡實用庫,但瞭解提供程序接口有助於調試和理解依賴庫如何工作。 要使用 Kaia 特有的方法,如 kaia_getAccountkaia_sendTransactionAsFeePayer 等,必須參考 [Kaia 的 JSON-RPC API][Kaia-API]。

讓這個頁面變得更好