From 7af9d9c37c97bf2552e1837f6d5e0f00bbcbb9a1 Mon Sep 17 00:00:00 2001
From: Dima Rifai <dima.rifai@gmail.com>
Date: Thu, 28 Nov 2024 14:58:28 +0200
Subject: [PATCH] Issue #382 - Add rank, URL, and show if witness is
deactivated
---
components/account/AccountMainCard.tsx | 115 ++++++++++++++++++++-----
1 file changed, 93 insertions(+), 22 deletions(-)
diff --git a/components/account/AccountMainCard.tsx b/components/account/AccountMainCard.tsx
index 0dbd9b4f..60ca4e34 100644
--- a/components/account/AccountMainCard.tsx
+++ b/components/account/AccountMainCard.tsx
@@ -1,6 +1,7 @@
import { Loader2 } from "lucide-react";
import Image from "next/image";
-
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faLink, faStar } from "@fortawesome/free-solid-svg-icons";
import Explorer from "@/types/Explorer";
import { formatAndDelocalizeTime } from "@/utils/TimeUtils";
import { getHiveAvatarUrl } from "@/utils/HiveBlogUtils";
@@ -8,6 +9,15 @@ import useManabars from "@/hooks/api/accountPage/useManabars";
import { Card, CardContent, CardFooter, CardHeader } from "../ui/card";
import { Toggle } from "../ui/toggle";
import { Progress } from "@/components/ui/progress";
+import useWitnessDetails from "@/hooks/api/common/useWitnessDetails";
+import { config } from "@/Config";
+import { cn } from "@/lib/utils";
+import {
+ TooltipProvider,
+ Tooltip,
+ TooltipTrigger,
+ TooltipContent,
+} from "../ui/tooltip";
interface AccountMainCardProps {
accountDetails: Explorer.FormattedAccountDetails;
@@ -31,35 +41,96 @@ const AccountMainCard: React.FC<AccountMainCardProps> = ({
changeLiveRefresh,
}) => {
const { manabarsData } = useManabars(accountName, liveDataEnabled);
+ const { witnessDetails } = useWitnessDetails(
+ accountName,
+ accountDetails.is_witness
+ );
+ const isWitnessActive =
+ witnessDetails?.witness.signing_key !== config.inactiveWitnessKey;
return (
<Card data-testid="account-details">
<CardHeader>
- <div className="flex justify-between bg-theme dark:bg-theme text-explorer-orange text-2xl my-4">
- {accountDetails.is_witness ? (
- <div data-testid="account-name">
- {accountDetails.name} <span className="text-sm">(witness)</span>
- </div>
- ) : (
- <div>{accountDetails.name}</div>
- )}
- <span>
+ <div className="flex flex-wrap items-center justify-between gap-4 bg-theme dark:bg-theme">
+ {/* Avatar and Name */}
+ <div className="flex items-center gap-4">
<Image
className="rounded-full border-2 border-explorer-orange"
src={getHiveAvatarUrl(accountName)}
alt="avatar"
- width={50}
- height={50}
+ width={60}
+ height={60}
data-testid="user-avatar"
/>
- </span>
+ <div>
+ <h2 className="text-lg font-semibold text-gray-800 dark:text-white">
+ {accountDetails.name}
+ </h2>
+ {accountDetails.is_witness && (
+ <div className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
+ <span
+ className={cn({
+ "line-through text-red-500": !isWitnessActive,
+ })}
+ >
+ Witness
+ </span>
+ {witnessDetails?.witness.rank && isWitnessActive && (
+ <TooltipProvider>
+ <Tooltip>
+ <TooltipTrigger asChild>
+ <span className="flex items-center gap-1">
+ <FontAwesomeIcon
+ icon={faStar}
+ data-testid="witness-rank-icon"
+ />
+ <span>{witnessDetails.witness.rank}</span>
+ </span>
+ </TooltipTrigger>
+ <TooltipContent>
+ <span className="text-xs">
+ Witness Rank: {witnessDetails.witness.rank}
+ </span>
+ </TooltipContent>
+ </Tooltip>
+ </TooltipProvider>
+ )}
+ {witnessDetails?.witness.url && isWitnessActive && (
+ <TooltipProvider>
+ <Tooltip>
+ <TooltipTrigger asChild>
+ <a
+ href={witnessDetails.witness.url}
+ target="_blank"
+ rel="noopener noreferrer"
+ >
+ <FontAwesomeIcon
+ icon={faLink}
+ data-testid="witness-url-icon"
+ />
+ </a>
+ </TooltipTrigger>
+ <TooltipContent>
+ <span className="text-xs">Witness Link</span>
+ </TooltipContent>
+ </Tooltip>
+ </TooltipProvider>
+ )}
+ </div>
+ )}
+ </div>
+ </div>
+
+ {/* Live Data Toggle */}
+ <div className="w-full sm:w-auto mt-4 sm:mt-0 top-0">
+ <Toggle
+ checked={liveDataEnabled}
+ onClick={changeLiveRefresh}
+ className="text-base"
+ leftLabel="Live Data"
+ />
+ </div>
</div>
- <Toggle
- checked={liveDataEnabled}
- onClick={changeLiveRefresh}
- className="text-base"
- leftLabel="Live Data"
- />
</CardHeader>
<CardContent>
{!!manabarsData ? (
@@ -114,14 +185,14 @@ const AccountMainCard: React.FC<AccountMainCardProps> = ({
</>
) : (
<div className="flex justify-center text-center items-center">
- <Loader2 className="animate-spin mt-1h-12 w-12 ml-3 ..." />
+ <Loader2 className="animate-spin mt-1 h-12 w-12 ml-3 ..." />
</div>
)}
<div className="flex justify-between p-4">
<div className="text-center flex flex-col justify-space-between w-full gap-2">
<span className="text">Creation Date:</span>
<span
- className="text"
+ className="text"
data-testid="creation-date"
>
{formatAndDelocalizeTime(accountDetails.created)}
@@ -130,7 +201,7 @@ const AccountMainCard: React.FC<AccountMainCardProps> = ({
<div className="text-center flex flex-col justify-space-between w-full gap-2">
<span className="text">Reputation:</span>
<span
- className="text"
+ className="text"
data-testid="creation-date"
>
{accountDetails.reputation}
--
GitLab