👋 Hello, Hive Community!
Welcome fellow #Hivers! As I dove into the magical world of Hive Keychain SDK integration, I hit a few snags (and had some laughs along the way). So here's my entertaining, step-by-step breakdown for getting it working smoothly in your own React project (using React + Vite + Typescript + Tailwind CSS + DaisyUI). Grab a chai, let's go! ☕
📚 Step 1: Getting the Tools
First, head to the mystical land of:
- 🔗 hive-keychain.com
- Find the Resources menu
- Summon the "Keychain SDK"
🛠️ Step 2: Install Stuff Because RTFM Is Life
- In terminal, cast this spell:
npm install keychain-sdk - Import the SDK like a proper developer:
import { KeychainSDK } from "keychain-sdk"; - Create your wizard:
const keychain = new KeychainSDK(window);
💥 Step 3: Reality Hits - Error Galore!
Ran npm run dev to behold my genius at localhost:5173… but NOPE. Got smacked by a mysterious browser error.
🤖 Step 4: Summon the AI Overlords
- AI said: "Install buffer, foolish mortal!"
- So, I blindly did:
npm install buffer - Result? Still borked.
🧙♂️ Step 5: The Sorcerer’s Config
Next, AI bestowed arcane knowledge. I bent the knee to update my vite.config.ts:
npm i @esbuild-plugins/node-globals-polyfill @esbuild-plugins/node-modules-polyfill
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";
import { NodeGlobalsPolyfillPlugin } from "@esbuild-plugins/node-globals-polyfill";
import { NodeModulesPolyfillPlugin } from "@esbuild-plugins/node-modules-polyfill";
export default defineConfig({
plugins: [react(), tailwindcss()],
optimizeDeps: {
esbuildOptions: {
define: {
global: "globalThis",
},
plugins: [
NodeGlobalsPolyfillPlugin({
buffer: true,
process: true,
}),
NodeModulesPolyfillPlugin(),
],
},
},
resolve: {
alias: {
buffer: "buffer",
},
},
});
⚡ Step 6: (Re)Try Everything!
With the config in place, I bravely ran npm run dev. 🧘 No errors. Hope returns!
Time for the next spell: Check if Hive Keychain is present:
import { KeychainSDK } from "keychain-sdk";
import { useEffect, useState } from "react";
const HiveLoginModal = () => {
const keychain = new KeychainSDK(window);
const [keychainAvailable, setKeychainAvailable] = useState(false);
useEffect(() => {
const check = async () => {
const isKeychainInstalled = await keychain.isKeychainInstalled();
console.log(`Do we have keychain now? ${isKeychainInstalled ? 'yes': 'no'}`);
setKeychainAvailable(isKeychainInstalled);
};
check();
}, []);
BUT... it logged 'no' even with Hive Keychain installed! 🤔 What dark magic is this?
🤯 Step 7: Ask AI Again (Yep, Again)
AI says: “Delay just a bit - Keychain needs time to show up!”
So here's the new check:
useEffect(() => {
const check = async () => {
console.log("We don't have keychain yet");
await new Promise((res) => setTimeout(res, 500));
const keychain = new KeychainSDK(window);
const isKeychainInstalled = await keychain.isKeychainInstalled();
console.log(`Do we have keychain now? ${isKeychainInstalled ? 'yes': 'no'}`);
setKeychainAvailable(isKeychainInstalled);
};
if (document.readyState === "complete") {
check();
} else {
window.addEventListener("load", check);
return () => window.removeEventListener("load", check);
}
}, []);
BOOM! After this, it finally worked. Friends, I am just getting started. More guides on the way. Hive-Keychain SDK team should totally add a React-focused page—imagine the memes! 😂
🙏 Final Words and Power-Ups
- More power to Hive-keychain dev team! 👨💻🚀
- More power to Hive community members! 🤝
- More power to Hive blockchain! 🔗
- More power to Hive! 💥
- Hive to the moon and beyond! 🌕
📝 Final Note
- I asked perplexity to help optimize this post to make it more readable and viewer-friendly.
- Here is the link where you can find both original content & improvements made by AI
- https://www.perplexity.ai/search/3d96d12b-d8ca-419f-92a6-093569aa96b1
🚀 My Contributions to ♦️ Hive Ecosystem
| Contribution | To | Hive | Ecosystem |
|---|---|---|---|
| Hive Witness Node | Hive API Node (in progress) | 3Speak Video Encoder Node Operator (highest number of nodes) | 3Speak Mobile App Developer |
| 3Speak Podcast App Developer | 3Speak Shorts App Developer | 3Speak Support & Maintenance Team | Distriator Developer |
| CheckinWithXYZ | Hive Inbox | HiFind | Hive Donate App |
| Contributed to HiveAuth Mobile App | Ecency ↔ 3Speak Integration | Ecency ↔ InLeo Integration | Ecency ↔ Actifit Integration |
| Hive Stats App | Vote for Witness App | HiveFlutterKit | New 3Speak App |
🙌 Support Back
❤️ Appreciate my work? Consider supporting 
| Vote | For | Witness |
|---|---|---|
 | sagarkothari88 | |
 | threespeak | |