feat(component): add wallet loading state and user wallet information

The account-info component has been updated to include a loading state for user wallets, a feature that significantly improves the performance of the component by preventing unnecessary re-renders. The IUserWallet type now includes new fields to store wallet data such as cryptocurrencies' details and owned amount. These changes also include display adjustments and improved routing for 'My Wallet' button.

src/components/account-info.tsx

@@ -11,13 +11,15 @@ import {
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import type { IUserData } from "@/interfaces/userdata.interface";
+import type {IUserData, IUserWallet} from "@/interfaces/userdata.interface";
 
 import { CopyButton } from "@/components/ui/copy-button";
 import { doDisconnect, getWallet } from "@/services/account.handler";
 import { Bitcoin, Fingerprint, Key, Landmark, Unplug, User, Wallet } from "lucide-react";
 import Link from "next/link";
 import type React from "react";
+import {useEffect, useState} from "react";
+import {type ICryptoInUserWalletInfo, ICryptoInWalletInfo} from "@/interfaces/crypto.interface";
 
 export function AccountInfo({
 	userData,
@@ -28,9 +30,41 @@ export function AccountInfo({
 	setUserData: React.Dispatch<React.SetStateAction<IUserData | undefined>>;
 	isDisconnected: boolean;
 }) {
-	getWallet().then(() => {
-		console.log("pong !");
+	const [isLoaded,setIsLoaded] = useState(false)
+
+	useEffect(() => {
+		if (!isLoaded) {
+			getWallet().then((res) => {
+
+				const wallet: IUserWallet = {
+					uat: Date.now(),
+					update_interval: 30_000,
+					owned_cryptos: res.resolved?.UserHasCrypto?.map((el): ICryptoInUserWalletInfo => {
+						return {
+							id: el.Crypto.id,
+							name: el.Crypto.name,
+							value: el.Crypto.value,
+							image: el.Crypto.image,
+							quantity: el.Crypto.quantity,
+							owned_amount: el.amount,
+							created_at: el.Crypto.created_at,
+							updated_at: el.Crypto.updated_at
+						}
+					}) || []
+				}
+
+				delete res.resolved?.UserHasCrypto
+				//@ts-ignore
+				setUserData({
+					...userData,
+					...res.resolved,
+					wallet: wallet
+				})
+				console.log(userData)
+				setIsLoaded(true)
 			});
+		}
+	}, [isLoaded]);
 	if (isDisconnected) {
 		return (
 			<div className={"flex flex-col justify-center items-center h-10 p-2 text-xs mt-2"}>
@@ -64,7 +98,7 @@ export function AccountInfo({
 					<User />
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="sm:max-w-[425px]">
+			<DialogContent className="sm:max-w-[425px] md:max-w-[720px]">
 				<DialogHeader>
 					<DialogTitle>{`Your account - ${userData.firstName} ${userData.lastName}`}</DialogTitle>
 					<DialogDescription>{userData.city}</DialogDescription>
@@ -93,7 +127,7 @@ export function AccountInfo({
 							>
 								<Bitcoin />
 								<p className={"rounded bg-accent text-accent-foreground p-1"}>
-									You dont have cryptos.
+									{`You currently have ${userData.wallet.owned_cryptos.length} crypto(s)`}
 								</p>
 							</div>
 						</div>
@@ -116,13 +150,15 @@ export function AccountInfo({
 					</div>
 				</div>
 				<DialogFooter>
-					<Button variant={"secondary"} className={"gap-2 px-2"}>
+					<Button variant={"secondary"} className={"gap-2 px-2"} asChild>
+						<Link href={'/wallet'}>
 							<Wallet />
 							<p>My wallet</p>
+						</Link>
 					</Button>
 					<Button
 						variant={"destructive"}
-						className={"gap-2 px-2"}
+						className={"gap-2 px-2 mb-2"}
 						onClick={() => doDisconnect()}
 					>
 						<Unplug />