feat(ui): demote project logos to metadata tags (#263)

Co-authored-by: Claude <noreply@anthropic.com>

Author: pumpedlunch

src/components/OracleQueryList/ItemTitle.tsx

@@ -1,5 +1,4 @@
 import { ChainNameAndIcon, TruncatedTitle } from "@/components";
-import { getProjectIcon } from "@/constants";
 import type { OracleQueryUI } from "@/types";
 import { HeaderWrapper, TitleHeader, TitleText, TitleWrapper } from "./style";
 
@@ -11,13 +10,11 @@ export function ItemTitle({
   timeFormatted,
   expiryType,
 }: OracleQueryUI) {
-  const ProjectIcon = getProjectIcon(project);
   const isKnownProject = project !== "Unknown";
 
   return (
     <TitleWrapper>
       <HeaderWrapper>
-        <ProjectIcon className="w-[18px] h-[18px] mt-[2px]" />
         <TitleHeader>
           <TruncatedTitle title={title} />
         </TitleHeader>

src/components/OracleQueryTable/TitleCell.tsx

@@ -1,4 +1,3 @@
-import { getProjectIcon } from "@/constants";
 import type { OracleQueryUI } from "@/types";
 import { ChainNameAndIcon } from "../ChainNameAndIcon";
 import { TruncatedTitle } from "../TruncatedTitle";
@@ -28,13 +27,11 @@ export function TitleCell({
   timeFormatted,
   expiryType,
 }: OracleQueryUI) {
-  const ProjectIcon = getProjectIcon(project);
   const isKnownProject = project !== "Unknown";
 
   return (
     <TitleTD>
       <TitleWrapper>
-        <ProjectIcon className="w-[clamp(24px,3vw,40px)] h-[clamp(24px,3vw,40px)] min-w-[24px]" />
         <TextWrapper>
           <TitleHeader>
             <TruncatedTitle title={title} />

src/components/Panel/InfoIcons/InfoIcons.tsx

@@ -2,10 +2,17 @@ import type { OracleQueryUI } from "@/types";
 import { ChainIcon } from "./ChainIcon";
 import { ExpiryTypeIcon } from "./ExpiryTypeIcon";
 import { OoTypeIcon } from "./OoTypeIcon";
+import { ProjectTag } from "./ProjectTag";
 
-export function InfoIcons({ chainId, oracleType, expiryType }: OracleQueryUI) {
+export function InfoIcons({
+  chainId,
+  oracleType,
+  expiryType,
+  project,
+}: OracleQueryUI) {
   return (
     <div className="flex flex-wrap gap-3 mt-5 px-page-padding lg:px-7 mb-11">
+      <ProjectTag project={project} />
       <ChainIcon chainId={chainId} />
       <OoTypeIcon ooType={oracleType} />
       {expiryType && <ExpiryTypeIcon expiryType={expiryType} />}

src/components/Panel/InfoIcons/ProjectTag.tsx

@@ -0,0 +1,21 @@
+import { PanelInfoIconText, PanelInfoIconWrapper } from "@/components/style";
+import { getProjectIcon } from "@/constants";
+import type { ProjectName } from "@/projects";
+
+/**
+ * Displays a tag for the given project name.
+ * @param project The project name to display a tag for.
+ * @returns The tag for the given project, or null if the project is unknown or undefined.
+ */
+export function ProjectTag({ project }: { project: ProjectName | undefined }) {
+  if (!project || project === "Unknown") return null;
+
+  const Icon = getProjectIcon(project);
+
+  return (
+    <PanelInfoIconWrapper>
+      <Icon className="w-6 h-6" />
+      <PanelInfoIconText>{project}</PanelInfoIconText>
+    </PanelInfoIconWrapper>
+  );
+}

src/components/Panel/Title.tsx

@@ -1,4 +1,3 @@
-import { getProjectIcon } from "@/constants";
 import { CloseButton } from "../CloseButton";
 import { LoadingSkeleton } from "../LoadingSkeleton";
 import { TruncatedTitle } from "../TruncatedTitle";
@@ -10,9 +9,7 @@ type Props = {
   isLoading: boolean;
   close: () => void;
 };
-export function Title({ project, title, isLoading, close }: Props) {
-  const ProjectIcon = getProjectIcon(project);
-
+export function Title({ title, isLoading, close }: Props) {
   const buttonMinWidth = "1rem";
   const buttonMaxWidth = "1.25rem";
   const buttonPreferredWidth = "calc(0.9rem + 0.4vw)";
@@ -21,14 +18,7 @@ export function Title({ project, title, isLoading, close }: Props) {
   const iconStyles =
     "min-w-[1.25rem] flex items-center justify-center w-[clamp(1.25rem,0.8rem+2vw,2.5rem)] h-[clamp(1.25rem,0.8rem+2vw,2.5rem)] rounded-full";
   return (
-    <div className="grid grid-cols-[auto,1fr,auto] content-center gap-page-padding min-h-[84px] px-page-padding lg:px-7 py-5 bg-blue-grey-700">
-      {isLoading ? (
-        <div className={iconStyles}>
-          <LoadingSkeleton width="100%" height="100%" borderRadius="50%" />
-        </div>
-      ) : (
-        <ProjectIcon className={iconStyles} />
-      )}
+    <div className="grid grid-cols-[1fr,auto] content-center gap-page-padding min-h-[84px] px-page-padding lg:px-7 py-5 bg-blue-grey-700">
       <h1
         className="inline-flex items-center max-w-[400px] text-lg text-light"
         id="panel-title"