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

sagarkothari88(77)

Published in

HiveDevs

Words

427

Reading

2 min

Listen

Play

🥳 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