feat: Add Pro badge to account details display (#5538)

apps/web/src/components/Account/Details.tsx

@@ -1,4 +1,5 @@
 import FollowUnfollowButton from "@components/Shared/Account/FollowUnfollowButton";
+import Pro from "@components/Shared/Account/Icons/Pro";
 import Verified from "@components/Shared/Account/Icons/Verified";
 import Markup from "@components/Shared/Markup";
 import Slug from "@components/Shared/Slug";
@@ -74,6 +75,7 @@ const Details: FC<DetailsProps> = ({ isSuspended = false, account }) => {
         <div className="flex items-center gap-1.5">
           <H3 className="truncate">{getAccount(account).name}</H3>
           <Verified address={account.address} showTooltip />
+          <Pro account={account} showTooltip />
           {isSuspended ? (
             <Tooltip content="Suspended">
               <EyeSlashIcon className="size-6 text-brand-500" />

apps/web/src/components/Shared/Account/Icons/Pro.tsx

@@ -0,0 +1,35 @@
+import { SparklesIcon } from "@heroicons/react/24/solid";
+import type { AccountFragment } from "@hey/indexer";
+import { Tooltip } from "@hey/ui";
+import cn from "@hey/ui/cn";
+import type { FC } from "react";
+
+interface ProProps {
+  account: AccountFragment;
+  showTooltip?: boolean;
+  iconClassName?: string;
+}
+
+const Pro: FC<ProProps> = ({
+  account,
+  showTooltip = false,
+  iconClassName = ""
+}) => {
+  if (!account.pro) {
+    return null;
+  }
+
+  if (!showTooltip) {
+    return (
+      <SparklesIcon className={cn("size-6 text-brand-500", iconClassName)} />
+    );
+  }
+
+  return (
+    <Tooltip content="Pro">
+      <SparklesIcon className={cn("size-6 text-brand-500", iconClassName)} />
+    </Tooltip>
+  );
+};
+
+export default Pro;