neptune-front/src/components/account-info.tsx

"use client";
import { Button } from "@/components/ui/button";
import {
	Dialog,
	DialogContent,
	DialogDescription,
	DialogFooter,
	DialogHeader,
	DialogTitle,
	DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import type { IUserData, IUserWallet } from "@/interfaces/userdata.interface";

import { CopyButton } from "@/components/ui/copy-button";
import {
	type ICryptoInUserWalletInfo,
	ICryptoInWalletInfo,
} from "@/interfaces/crypto.interface";
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";

export function AccountInfo({
	userData,
	setUserData,
	isDisconnected,
}: {
	userData: IUserData;
	setUserData: React.Dispatch<React.SetStateAction<IUserData | undefined>>;
	isDisconnected: boolean;
}) {
	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, userData, setUserData]);
	if (isDisconnected) {
		return (
			<div className={"flex flex-col justify-center items-center h-10 p-2 text-xs mt-2"}>
				<div
					className={
						"flex flex-row justify-center items-center gap-1 text-destructive to-red-900 animate-pulse"
					}
				>
					<Unplug className={"w-4"} />
					<p>Disconnected</p>
				</div>
				<div>
					<Link
						href={"/auth"}
						className={
							"hover:text-primary flex justify-evenly items-center gap-1 p-1 text-nowrap"
						}
					>
						<Key className={"w-3"} /> Link account
					</Link>
				</div>
			</div>
		);
	}

	return (
		<Dialog>
			<DialogTrigger asChild>
				<Button variant="outline" className={"gap-2 px-2"}>
					<p>{userData.firstName}</p>
					<User />
				</Button>
			</DialogTrigger>
			<DialogContent className="sm:max-w-[425px] md:max-w-[720px]">
				<DialogHeader>
					<DialogTitle>{`Your account - ${userData.firstName} ${userData.lastName}`}</DialogTitle>
					<DialogDescription>{userData.pseudo}</DialogDescription>
				</DialogHeader>
				<div className={"flex flex-col items-center justify-center w-full"}>
					<div className={"flex flex-col justify-evenly items-center gap-2"}>
						<div
							className={
								"flex flex-col md:flex-row gap-2 justify-center md:justify-evenly items-start md:items-center w-full"
							}
						>
							<div
								className={
									"flex gap-1 justify-start md:justify-center items-center mx-auto w-full md:w-fit"
								}
							>
								<Landmark />
								<p className={"rounded bg-accent text-accent-foreground p-1"}>
									{userData.dollarAvailables} $
								</p>
							</div>
							<div
								className={
									"flex gap-1 justify-start md:justify-center items-center mx-auto w-full md:w-fit"
								}
							>
								<Bitcoin />
								<p className={"rounded bg-accent text-accent-foreground p-1"}>
									{`You currently have ${userData.wallet.owned_cryptos.length} crypto(s)`}
								</p>
							</div>
						</div>
						<div
							className={"flex flex-col gap-3 justify-center items-start mx-auto mt-4"}
						>
							<div className={"flex flex-row text-nowrap flex-nowrap gap-1 text-primary"}>
								<Fingerprint />
								<h2>Your identity</h2>
							</div>
							<div
								className={
									"font-light text-xs md:text-sm flex flex-row items-center justify-start gap-1 bg-accent p-2 rounded"
								}
							>
								<p>{userData.id}</p>
								<CopyButton value={userData.id} />
							</div>
						</div>
					</div>
				</div>
				<DialogFooter>
					<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 mb-2"}
						onClick={() => doDisconnect()}
					>
						<Unplug />
						<p>Disconnect</p>
					</Button>
				</DialogFooter>
			</DialogContent>
		</Dialog>
	);
}