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.
133 lines
3.6 KiB
TypeScript
133 lines
3.6 KiB
TypeScript
"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 } from "@/interfaces/userdata.interface";
|
|
|
|
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>
|
|
<Button variant="outline" className={"gap-2 px-2"}>
|
|
<p>{userData.firstName}</p>
|
|
<User />
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent className="sm:max-w-[425px]">
|
|
<DialogHeader>
|
|
<DialogTitle>{`Your account - ${userData.firstName} ${userData.lastName}`}</DialogTitle>
|
|
<DialogDescription>{userData.city}</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 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>
|
|
<DialogFooter>
|
|
<Button variant={"secondary"} className={"gap-2 px-2"}>
|
|
<Wallet />
|
|
<p>My wallet</p>
|
|
</Button>
|
|
<Button
|
|
variant={"destructive"}
|
|
className={"gap-2 px-2"}
|
|
onClick={() => doDisconnect()}
|
|
>
|
|
<Unplug />
|
|
<p>Disconnect</p>
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|