From 69484cc90f5db15ca636510cd74581a243ad92c4 Mon Sep 17 00:00:00 2001
From: Mathis <avnyr@yidhra.fr>
Date: Thu, 20 Jun 2024 14:45:12 +0200
Subject: [PATCH] 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 | 56 +++++++++++++++++++++++++++------
 1 file changed, 46 insertions(+), 10 deletions(-)

diff --git a/src/components/account-info.tsx b/src/components/account-info.tsx
index 17bf88b..b7e6ca0 100644
--- a/src/components/account-info.tsx
+++ b/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"}>
-						<Wallet />
-						<p>My wallet</p>
+					<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 />