๐ฅณ 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 |