From 900b1b6a766c416fe67a7cbb8cda9ca3c4332753 Mon Sep 17 00:00:00 2001
From: Dima Rifai <dima.rifai@gmail.com>
Date: Thu, 28 Nov 2024 14:59:01 +0200
Subject: [PATCH] Issue #382 - Add rank, URL, and show if witness is
deactivated
---
components/account/MobileAccountNameCard.tsx | 68 ++++++++++++++++----
1 file changed, 55 insertions(+), 13 deletions(-)
diff --git a/components/account/MobileAccountNameCard.tsx b/components/account/MobileAccountNameCard.tsx
index 6b7bcfd9..1652a32f 100644
--- a/components/account/MobileAccountNameCard.tsx
+++ b/components/account/MobileAccountNameCard.tsx
@@ -1,8 +1,12 @@
import Image from "next/image";
-
import { getHiveAvatarUrl } from "@/utils/HiveBlogUtils";
import { Card, CardHeader } from "../ui/card";
import Explorer from "@/types/Explorer";
+import { config } from "@/Config";
+import { cn } from "@/lib/utils";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faLink, faStar } from "@fortawesome/free-solid-svg-icons";
+import useWitnessDetails from "@/hooks/api/common/useWitnessDetails";
interface MobileAccountNameCardProps {
accountName: string;
@@ -15,29 +19,67 @@ const MobileAccountNameCard: React.FC<MobileAccountNameCardProps> = ({
liveDataEnabled,
accountDetails,
}) => {
+ const { witnessDetails } = useWitnessDetails(
+ accountName,
+ accountDetails.is_witness
+ );
+ const isWitnessActive =
+ witnessDetails?.witness.signing_key !== config.inactiveWitnessKey;
+
if (!accountDetails) return;
return (
<Card>
<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 && (
+ <span className="flex items-center gap-1">
+ <FontAwesomeIcon
+ icon={faStar}
+ data-testid="witness-rank-icon"
+ />
+ <span>{witnessDetails.witness.rank}</span>
+ </span>
+ )}
+ {witnessDetails?.witness.url && isWitnessActive && (
+ <a
+ href={witnessDetails.witness.url}
+ target="_blank"
+ rel="noopener noreferrer"
+ >
+ <FontAwesomeIcon
+ icon={faLink}
+ data-testid="witness-url-icon"
+ />
+ </a>
+ )}
+ </div>
+ )}
+ </div>
+ </div>
</div>
</CardHeader>
</Card>
--
GitLab