🥳 Hello Awesome Hive People!
Hey everyone! 👋 I’m back to sprinkle some fun & code magic on your Hive dev journey. Grab your popcorn 🍿, hold onto your avatars, because today we tackle the mighty account switcheroo!
🏆 Epic Learning Journey Recap
Follow along my caffeine-fueled development progress:
- 📚 Day One: Fresh React app + AIOHA integration!
- 🧭 Day Two: Routing drama & rebellious NavBar 😤
- 🛠️ Day Three: Fixed Layouts, Routing & AIOHA 💥
- 🧠 Day Four: useState, useEffect, and .env headaches 😅
- 🧹 Day Five: Path Aliases to clean up relative path spaghetti 🍝
- 📡 Day Six: Create Context Provider & call API
- 🍞 Day Seven: Show a toast message
- 🔐 Day Eight: Login with AIOHA & Distriator & LocalStorage magic
- 🔐 Day Nine: Toasts, Laughs & Custom Magic!
🤹 Today's Mission: Account Switching!
Ever wished you could toggle Hive accounts in your app like flipping TV channels? 📺✨ With AIOHA’s React UI, account switching is as easy as meme-making!
Scenario
You’re chilling with your-account-x dashboard, then suddenly the urge to switch hits. Boom! Now you’re your-account-y. 🕺 The dashboard should instantly reload!
1️⃣ Add necessary imports
import { useAioha } from “@aioha/react-ui”;
import { KeyTypes } from “@aioha/aioha”;
import { useEffect, useState } from “react”;
import { useNavigate } from “react-router-dom”;
2️⃣ Declare your variables
const DashboardPage = () => {
const { aioha } = useAioha();
const navigate = useNavigate();
3️⃣ Define handler functions
const disconnectHandler = () => {
console.log(`User Logged out`);
navigate(”/”);
};
const accountChangedHandler = async () => {
console.log(`User switched`);
}
4️⃣ Spice up accountChangedHandler with ninja logic
const accountChangedHandler = async () => {
console.log(`User changed`);
const date = new Date();
const proof = date.toISOString();
const result = await aioha.signMessage(proof, KeyTypes.Posting);
if (result.success) {
await performLogin(
proof,
result.result,
aioha.getCurrentUser() || "",
result.publicKey || ""
);
console.log(`We have logged in with switched user`);
console.log(`now reload data using other apis`);
}
}
5️⃣ Add the legendary performLogin function
Reference how loginApi works in this post.
async function performLogin(
proof: string,
challenge: string,
username: string,
pubkey: string
) {
const loginResult = await loginApi(challenge, proof, pubkey, username);
if (loginResult == null) {
console.log("Logged in");
} else {
console.log(`Login failed: ${loginResult}`);
}
}
6️⃣ Hook handlers using useEffect. Like a boss! 😎
useEffect(() => {
aioha.on("disconnect", disconnectHandler);
aioha.on("account_changed", accountChangedHandler);
return () => {
aioha.off("disconnect", disconnectHandler);
aioha.off("account_changed", accountChangedHandler);
};
}, []);
🌈 Final Thoughts
That’s it! With just six steps, your Hive dApp’s dashboard becomes a seamless, magic-filled switching experience. ✨ If only real life worked this smoothly... 🥲
More power to developers on Hive! More power to Hive community! More power to Hive blockchain!
Hive to the moon, and beyond! 🚀🌕
Yay! Thanks for reading, sharing code joy, and laughing with me. If this post made you chuckle (or facepalm 🤦), let me know below!
📝 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/d631f732-c260-4a0e-b4be-6e20707434ff
🚀 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 | |