From 01c073e879e02d4a340837586c45ee68f69c2c54 Mon Sep 17 00:00:00 2001
From: Mathis <avnyr@yidhra.fr>
Date: Mon, 17 Jun 2024 09:50:06 +0200
Subject: [PATCH] feat(account-info): add disconnect handling and improve info
 display

The commit enhances the account information component with better data handling. It adds disconnect handling to account for cases when user session is terminated. It also improves information display by adding details like crypto availability and user identity, improving the overall user experience.
---
 src/components/account-info.tsx | 85 ++++++++++++++++++++++++++++++---
 1 file changed, 78 insertions(+), 7 deletions(-)

diff --git a/src/components/account-info.tsx b/src/components/account-info.tsx
index c314f1b..140abb1 100644
--- a/src/components/account-info.tsx
+++ b/src/components/account-info.tsx
@@ -13,16 +13,46 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import type { IUserData } from "@/interfaces/userdata.interface";
 
-import { Landmark, Unplug, User, Wallet } from "lucide-react";
+import { CopyButton } from "@/components/ui/copy-button";
+import { doDisconnect } 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";
 
 export function AccountInfo({
 	userData,
 	setUserData,
+	isDisconnected,
 }: {
 	userData: IUserData;
 	setUserData: React.Dispatch<React.SetStateAction<IUserData | undefined>>;
+	isDisconnected: boolean;
 }) {
+	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>
@@ -37,12 +67,49 @@ export function AccountInfo({
 					<DialogDescription>{userData.city}</DialogDescription>
 				</DialogHeader>
 				<div className={"flex flex-col items-center justify-center w-full"}>
-					<div className={"flex flex-row justify-evenly items-center"}>
-						<div className={"flex flex-row gap-1 justify-center items-center mx-auto"}>
-							<Landmark />
-							<p>{userData.dollarAvailables} $</p>
+					<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 dont have cryptos.
+								</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>
 					</div>
 				</div>
 				<DialogFooter>
@@ -50,7 +117,11 @@ export function AccountInfo({
 						<Wallet />
 						<p>My wallet</p>
 					</Button>
-					<Button variant={"destructive"} className={"gap-2 px-2"}>
+					<Button
+						variant={"destructive"}
+						className={"gap-2 px-2"}
+						onClick={() => doDisconnect()}
+					>
 						<Unplug />
 						<p>Disconnect</p>
 					</Button>