🚀🧑‍💻 ReactJS, AIOHA & Hive Blockchain: Switch Accounts Like a Pro 🧑‍🏫

### 🥳 **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**](https://peakd.com/hive-139531/@sagarkothari88/integrate-aioha-with-your-react-app-from-scratch-vite--tailwind--daisyui): Fresh React app + AIOHA integration! - [🧭 **Day Two**](https://peakd.com/hive-139531/@sagarkothari88/integrating-react-router-my-routing-adventures-with-react): Routing drama & rebellious NavBar 😤 - [🛠️ **Day Three**](https://peakd.com/hive-139531/@sagarkothari88/from-navbar-mess-to-react-router-success-fixing-layouts-routing-and-aioha-in-one-go): Fixed Layouts, Routing & AIOHA 💥 - [🧠 **Day Four**](https://peakd.com/hive-139531/@sagarkothari88/day-4-reactjs-adventures--distriator-progress-usestate-useeffect-and-env-chaos): useState, useEffect, and .env headaches 😅 - [🧹 **Day Five**](https://peakd.com/hive-139531/@sagarkothari88/level-up-your-imports-using-path-aliases-for-cleaner-react--typescript-projects): Path Aliases to clean up relative path spaghetti 🍝 - [📡 **Day Six**](https://peakd.com/hive-139531/@sagarkothari88/day-6-learning-reactjs-calling-apis-and-creating-context-providers-or-distriator-feature-update): Create Context Provider & call API - [🍞 **Day Seven**](https://peakd.com/hive-139531/@sagarkothari88/learning-reactjs--vite--ts--aioha-day-7-show-a-toast-message): Show a toast message - [🔐 **Day Eight**](https://peakd.com/hive-139531/@sagarkothari88/day-8-secure-login-with-aioha-and-localstorage-magic): Login with AIOHA & Distriator & LocalStorage magic - [🔐 **Day Nine**](https://peakd.com/hive-139531/@sagarkothari88/day-9-toasts-laughs-and-custom-magic): 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.](https://peakd.com/hive-139531/@sagarkothari88/day-8-secure-login-with-aioha-and-localstorage-magic) ``` 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](https://distriator.com/) | | [CheckinWithXYZ](https://checkinwith.xyz/) | [Hive Inbox](https://hive-inbox.the-hive-mobile.app/) | [HiFind](https://hifind.the-hive-mobile.app/) | [Hive Donate App](https://donate.the-hive-mobile.app/) | | Contributed to HiveAuth Mobile App | Ecency ↔ 3Speak Integration | Ecency ↔ InLeo Integration | Ecency ↔ Actifit Integration | | [Hive Stats App](https://stats.the-hive-mobile.app/) | [Vote for Witness App](https://witness.the-hive-mobile.app/) | [HiveFlutterKit](https://hiveflutterkit.sagarkothari88.one/docs/intro) | [New 3Speak App](https://3speak.sagarkothari88.one/#/?tab=home) | --- ### 🙌 Support Back ❤️ **Appreciate my work? Consider supporting @threespeak & @sagarkothari88!** ❤️ | Vote | For | Witness | |------|-----|---------| | [](https://witness.the-hive-mobile.app/#/witnesses/@sagarkothari88) | [sagarkothari88](https://witness.the-hive-mobile.app/#/witnesses/@sagarkothari88) | @sagarkothari88 | | [](https://witness.the-hive-mobile.app/#/witnesses/@threespeak) | [threespeak](https://witness.the-hive-mobile.app/#/witnesses/@threespeak) | @threespeak | ---