diff --git a/src/components/OracleQueryList/ItemTitle.tsx b/src/components/OracleQueryList/ItemTitle.tsx index 5001e410..0563ae39 100644 --- a/src/components/OracleQueryList/ItemTitle.tsx +++ b/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 ( - diff --git a/src/components/OracleQueryTable/TitleCell.tsx b/src/components/OracleQueryTable/TitleCell.tsx index 105bca45..4a27a362 100644 --- a/src/components/OracleQueryTable/TitleCell.tsx +++ b/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 ( - diff --git a/src/components/Panel/InfoIcons/InfoIcons.tsx b/src/components/Panel/InfoIcons/InfoIcons.tsx index 57412ebb..dea9dc9c 100644 --- a/src/components/Panel/InfoIcons/InfoIcons.tsx +++ b/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 (
+ {expiryType && } diff --git a/src/components/Panel/InfoIcons/ProjectTag.tsx b/src/components/Panel/InfoIcons/ProjectTag.tsx new file mode 100644 index 00000000..fc540d02 --- /dev/null +++ b/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 ( + + + {project} + + ); +} diff --git a/src/components/Panel/Title.tsx b/src/components/Panel/Title.tsx index b128097d..28cbb0ce 100644 --- a/src/components/Panel/Title.tsx +++ b/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 ( -
- {isLoading ? ( -
- -
- ) : ( - - )} +