From 3841198058901478e3c02ca2321849edb05ab1b8 Mon Sep 17 00:00:00 2001 From: Pedro Camboim <72642597+pedrxlz@users.noreply.github.com> Date: Sun, 4 Feb 2024 12:11:21 -0300 Subject: [PATCH 1/2] Update README.md --- README.md | 89 ++++++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 69 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index 0d6babe..3de24a1 100644 --- a/README.md +++ b/README.md @@ -1,30 +1,79 @@ -# React + TypeScript + Vite +# KleverHub Integration Guide -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. +## Introduction -Currently, two official plugins are available: +This documentation offers a straightforward guide on utilizing the methods exposed by KleverHub when seamlessly injected into your browser. Ideal for integration with various chains supported by the Klever Extension, this guide is your go-to resource. If you're not dealing with multiple chains, you can stick to using `kleverWeb` for a simplified experience. Let's dive in! -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh +## Getting Started -## Expanding the ESLint configuration +### Installation -If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: +Ensure that the Klever Extension is installed in your browser. -- Configure the top-level `parserOptions` property like this: +### Initialization -```js -export default { - // other rules... - parserOptions: { - ecmaVersion: 'latest', - sourceType: 'module', - project: ['./tsconfig.json', './tsconfig.node.json'], - tsconfigRootDir: __dirname, - }, +In your React application, initialize the `KleverHub` by calling the `initialize` method. This method takes an optional parameter, `chain`, representing the blockchain to connect to. If not provided, it defaults to the Klever Chain (`KLV`). + +```javascript +async function connectWallet() { + if (window && window.kleverHub) { + try { + await window.kleverHub.initialize(Chain.KLEVER); + + if (window.kleverHub.connected) { + console.log("Connected to wallet"); + } + } catch (error) { + console.error("Failed to connect to wallet:", error); + } + } else { + console.error("No wallet provider found"); + } +} +``` + +### Switching Blockchain +You can switch between supported blockchains using the switchBlockchain method. + +```javascript +async function switchBlockchain(chain: keyof typeof Chain) { + await window.kleverHub.switchBlockchain(chain); } ``` -- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked` -- Optionally add `plugin:@typescript-eslint/stylistic-type-checked` -- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list +### Handling Account Changes +To react to changes in the connected account, use the `onAccountChanged` and `offAccountChanged` methods. + +```javascript +useEffect(() => { + if (window && window.kleverHub) { + const handleAccountChanged = (account: HubAccount) => { + setAccount(account); + }; + + window.kleverHub.onAccountChanged(handleAccountChanged); + + return () => { + window.kleverHub.offAccountChanged(handleAccountChanged); + }; + } +}, []); +``` + +### Handling Blockchain Changes +Similarly, you can handle changes in the selected blockchain using onBlockchainChanged and offBlockchainChanged. + +```javascript +useEffect(() => { + if (window && window.kleverHub) { + const handleBlockchainChanged = (chain: Chain) => + setCurrentChain(chains[chain]); + + window.kleverHub.onBlockchainChanged(handleBlockchainChanged); + + return () => { + window.kleverHub.offBlockchainChanged(handleBlockchainChanged); + }; + } +}, []); +``` From e0cc9bb2d1fa8f5bf127cce827f890edba2fe561 Mon Sep 17 00:00:00 2001 From: Pedro Camboim <72642597+pedrxlz@users.noreply.github.com> Date: Sun, 4 Feb 2024 12:16:52 -0300 Subject: [PATCH 2/2] Update README.md --- README.md | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 3de24a1..d7568e1 100644 --- a/README.md +++ b/README.md @@ -12,13 +12,13 @@ Ensure that the Klever Extension is installed in your browser. ### Initialization -In your React application, initialize the `KleverHub` by calling the `initialize` method. This method takes an optional parameter, `chain`, representing the blockchain to connect to. If not provided, it defaults to the Klever Chain (`KLV`). +In your React application, initialize the `KleverHub` by calling the `initialize` method. This method takes an optional parameter, chain, representing the blockchain to connect to. If not provided, it defaults to the Klever Chain (KLV), but you can also use `"TRX"` for Tron or `"ETH"` for Ethereum. ```javascript async function connectWallet() { if (window && window.kleverHub) { try { - await window.kleverHub.initialize(Chain.KLEVER); + await window.kleverHub.initialize("KLV"); if (window.kleverHub.connected) { console.log("Connected to wallet"); @@ -36,9 +36,7 @@ async function connectWallet() { You can switch between supported blockchains using the switchBlockchain method. ```javascript -async function switchBlockchain(chain: keyof typeof Chain) { - await window.kleverHub.switchBlockchain(chain); -} +await window.kleverHub.switchBlockchain("TRX"); ``` ### Handling Account Changes @@ -47,7 +45,7 @@ To react to changes in the connected account, use the `onAccountChanged` and `of ```javascript useEffect(() => { if (window && window.kleverHub) { - const handleAccountChanged = (account: HubAccount) => { + const handleAccountChanged = (account) => { setAccount(account); }; @@ -61,12 +59,12 @@ useEffect(() => { ``` ### Handling Blockchain Changes -Similarly, you can handle changes in the selected blockchain using onBlockchainChanged and offBlockchainChanged. +Similarly, you can handle changes in the selected blockchain using `onBlockchainChanged` and `offBlockchainChanged`. ```javascript useEffect(() => { if (window && window.kleverHub) { - const handleBlockchainChanged = (chain: Chain) => + const handleBlockchainChanged = (chain) => setCurrentChain(chains[chain]); window.kleverHub.onBlockchainChanged(handleBlockchainChanged);