Kaia Online Toolkit provides code examples and a web application to help developers utilize the Kaia blockchain and its SDK easily. The toolkit serves as both a reference implementation and a practical set of tools for blockchain developers building applications on the Kaia network.
You can access the live toolkit at: https://toolkit.kaia.io/
- Web3Modal Integration with multiple wallet providers:
- KaiaWallet
- Metamask
- RainbowKit
- OKX Wallet
- Create and manage different account types:
- Basic accounts
- Mnemonic-based accounts
- Keystore (v3) management
- Kaia-specific account key types:
- AccountKeyPublic
- AccountKeyWeightedMultiSig
- AccountKeyRoleBased
- Deploy and interact with various token standards:
- ERC-20 / KIP-7 (Fungible Tokens)
- ERC-721 / KIP-17 (Non-Fungible Tokens)
- ERC-1155 / KIP-37 (Multi Tokens)
- ERC-2612 (Permit)
- Block & Transaction Tools:
- Block information retrieval
- RLP encoding and decoding
- Utility Tools:
- Unit converter (kei, Gkei, KAIA)
- Address checksum verification
- Signature verification
- Clone the repository
git clone https://github.com/kaiachain/kaia-online-toolkit.git
cd kaia-online-toolkit- Install dependencies
yarn- Run the development server
yarn devThe application will be available at http://localhost:5173/
The toolkit also demonstrates integration with RainbowKit for a more customizable wallet connection experience:
import { getDefaultConfig, RainbowKitProvider } from '@rainbow-me/rainbowkit';
import { kaiaWallet, okxWallet } from '@rainbow-me/rainbowkit/wallets';
import { WagmiProvider } from 'wagmi';
import { mainnet, sepolia, kaia, kairos } from 'wagmi/chains';
const config = getDefaultConfig({
appName: 'Kaia Toolkit',
projectId: 'YOUR_PROJECT_ID',
chains: [mainnet, sepolia, kaia, kairos],
wallets: [
{
groupName: 'Recommended',
wallets: [kaiaWallet, okxWallet],
},
],
});
// In your App component
return (
<WagmiProvider config={config}>
<RainbowKitProvider>
<YourApp />
</RainbowKitProvider>
</WagmiProvider>
);Convert between different Kaia token units (kei, Gkei, KAIA):
// Using viem
import { formatUnits } from 'viem'
const kei = 1000000000000000000n
const Gkei = formatUnits(kei, 9)
const KAIA = formatUnits(kei, 18)
// Using ethers
import { ethers } from 'ethers'
const kei = 1000000000000000000n
const Gkei = ethers.formatUnits(kei, 9)
const KAIA = ethers.formatUnits(kei, 18)
// Using web3
import { utils } from 'web3'
const kei = 1000000000000000000n
const Gkei = utils.fromWei(kei, 'gwei')
const KAIA = utils.fromWei(kei, 'ether')Encode and decode data using Recursive Length Prefix (RLP):
// Using viem
import { encodeAbiParameters, parseAbiParameters } from 'viem'
// Encode
const encoded = encodeAbiParameters(
parseAbiParameters('address, uint256'),
['0x...', 123n]
)
// Using ethers
import { ethers } from 'ethers'
// Encode
const abiCoder = new ethers.AbiCoder()
const encoded = abiCoder.encode(
['address', 'uint256'],
['0x...', 123]
)Create an account from a mnemonic:
// Using viem
import { mnemonicToAccount } from 'viem/accounts'
import { english } from 'viem/accounts'
const account = mnemonicToAccount('your mnemonic phrase')
// Generate a random mnemonic
const randomMnemonic = english.generateMnemonic()
const newAccount = mnemonicToAccount(randomMnemonic)-
/src/pages/: Contains the main UI components organized by functionality/src/pages/Account/: Account management tools/src/pages/EIP/: EIP implementation examples/src/pages/Wallet/: Wallet integration components/src/pages/BlockTx/: Block and transaction tools/src/pages/Utility/: Various utility tools
-
/src/components/: Reusable UI components -
/src/hooks/: Custom React hooks -
/src/types/: TypeScript type definitions -
/src/consts/: Configuration constants
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.