🚀🧑‍💻 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: 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

🙌 Support Back

❤️ Appreciate my work? Consider supporting @threespeak & @sagarkothari88! ❤️

Vote	For	Witness
	sagarkothari88	@sagarkothari88
	threespeak	@threespeak