-
-
-
+ {item.highest_risk ? (
+
+
+
+ ) : (
+
+
+
+ )}
{item.rating === "pass" ? item.title : item.highest_risk?.message}
diff --git a/packages/nameguard-react/src/components/GraphemeModal/GraphemeModal.tsx b/packages/nameguard-react/src/components/GraphemeModal/GraphemeModal.tsx
index 251b71987..f1c270fd4 100644
--- a/packages/nameguard-react/src/components/GraphemeModal/GraphemeModal.tsx
+++ b/packages/nameguard-react/src/components/GraphemeModal/GraphemeModal.tsx
@@ -5,7 +5,7 @@ import { type GraphemeGuardReport, nameguard } from "@namehash/nameguard";
import { useGraphemeModalStore } from "../../stores/grapheme";
import { Slideover } from "../Slideover/Slideover";
import { CheckResultCard } from "../Report/CheckResultCard";
-import { Shield, ShieldSize } from "../Report/Shield";
+import { RatingIcon, RatingIconSize } from "../Report/RatingIcon";
import { RatedBox } from "../RatedBox/RatedBox";
import { ConfusableList } from "./ConfusableList";
import { LoadingSkeleton } from "./LoadingSkeleton";
@@ -46,7 +46,10 @@ export const GraphemeModal = forwardRef((_, ref: Ref) => {
diff --git a/packages/nameguard-react/src/components/NameBadge/NameBadge.tsx b/packages/nameguard-react/src/components/NameBadge/NameBadge.tsx
deleted file mode 100644
index 63a3cb0af..000000000
--- a/packages/nameguard-react/src/components/NameBadge/NameBadge.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import React, { type MouseEventHandler } from "react";
-import {
- CheckResultCode,
- type ConsolidatedNameGuardReport,
-} from "@namehash/nameguard";
-import cc from "classcat";
-
-import { NameShield } from "../NameShield";
-import { Shield, ShieldSize } from "../Report/Shield";
-import { ShieldError } from "../Shield/Error";
-
-type NameBadgeProps = {
- name?: string;
- data?: ConsolidatedNameGuardReport;
- onClick?: MouseEventHandler
;
- error?: string;
-};
-
-export const NameBadge = ({ name, onClick, data, error }: NameBadgeProps) => {
- const buttonClass =
- "flex-shrink-0 appearance-none bg-white transition-colors hover:bg-gray-50 border border-gray-200 rounded-md px-2.5 py-1.5 space-x-1.5 inline-flex items-center";
- const cursorClass = cc([
- {
- "cursor-pointer": onClick,
- "cursor-default": !onClick,
- },
- ]);
- const buttonAndCursorClass = cc([buttonClass, cursorClass]);
-
- if (error)
- return (
-
- );
-
- if (!data)
- return (
-
- );
-
- return (
-
- );
-};
diff --git a/packages/nameguard-react/src/components/NameShield/index.tsx b/packages/nameguard-react/src/components/NameShield/index.tsx
deleted file mode 100644
index a4b0bbe72..000000000
--- a/packages/nameguard-react/src/components/NameShield/index.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import React, { type ReactNode } from "react";
-import { ConsolidatedNameGuardReport, Rating } from "@namehash/nameguard";
-import cc from "classcat";
-
-import { Tooltip } from "../Tooltip/Tooltip";
-import { Shield, ShieldSize } from "../Report/Shield";
-
-function textColor(rating?: Rating) {
- switch (rating) {
- case Rating.alert: {
- return "text-red-600";
- }
- case Rating.pass: {
- return "text-emerald-600";
- }
- case Rating.warn: {
- return "text-amber-500";
- }
- default: {
- return "text-gray-500";
- }
- }
-}
-
-type NameShieldProps = {
- data?: ConsolidatedNameGuardReport;
- children?: ReactNode;
- disableHover?: boolean;
- size?: ShieldSize;
-} & React.ComponentProps;
-
-export function NameShield({
- data,
- children,
- disableHover,
- size = ShieldSize.small,
- ...props
-}: NameShieldProps) {
- if (!data) return null;
-
- const { title, subtitle, rating, risk_count, highest_risk } = data;
-
- const textClass = cc(["font-semibold mb-1", textColor(rating)]);
-
- if (!rating) {
- return ;
- }
-
- if (disableHover) {
- return ;
- }
-
- return (
- }>
-
-
-
-
-
-
-
- {title}
- {risk_count >= 1 && (
-
- {risk_count} risk{risk_count !== 1 && "s"} detected
-
- )}
-
-
-
- {highest_risk?.message || subtitle}
-
- {children}
-
-
-
+
-
{title}
+
{title}
{subtitle}
diff --git a/packages/nameguard-react/src/components/Report/Check.tsx b/packages/nameguard-react/src/components/Report/Check.tsx
deleted file mode 100644
index f66a6e5fc..000000000
--- a/packages/nameguard-react/src/components/Report/Check.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import React from "react";
-import { CheckResultCode } from "@namehash/nameguard";
-import { Tooltip } from "../Tooltip/Tooltip";
-
-function text(code: CheckResultCode) {
- switch (code) {
- case CheckResultCode.pass:
- return "All Checks Passed";
- case CheckResultCode.warn:
- return "Warning";
- case CheckResultCode.alert:
- return "Alert";
- case CheckResultCode.info:
- return "Informational Notice";
- case CheckResultCode.skip:
- default:
- return "Check Not Applicable";
- }
-}
-
-function icon(code: CheckResultCode): React.ReactNode {
- switch (code) {
- case "pass":
- return (
-
- );
- case "warn":
- return (
-
- );
- case CheckResultCode.alert:
- return (
-
- );
- case "info":
- return (
-
- );
- case "skip":
- default:
- return (
-
- );
- }
-}
-
-export function Check({ code }: { code: CheckResultCode }) {
- const tooltipText = text(code);
- const Icon = icon(code);
-
- return
;
-}
diff --git a/packages/nameguard-react/src/components/Report/CheckResultCard.tsx b/packages/nameguard-react/src/components/Report/CheckResultCard.tsx
index 20261cb34..3f802b5c4 100644
--- a/packages/nameguard-react/src/components/Report/CheckResultCard.tsx
+++ b/packages/nameguard-react/src/components/Report/CheckResultCard.tsx
@@ -1,12 +1,12 @@
import React from "react";
-import { CheckResult } from "@namehash/nameguard";
-import { Check } from "./Check";
+import { CheckResult, CheckResultCode } from "@namehash/nameguard";
+import { CheckResultCodeIcon } from "./CheckResultCodeIcon";
export function CheckResultCard(props: CheckResult) {
return (
-
+
diff --git a/packages/nameguard-react/src/components/Report/CheckResultCodeIcon.tsx b/packages/nameguard-react/src/components/Report/CheckResultCodeIcon.tsx
new file mode 100644
index 000000000..600ef118a
--- /dev/null
+++ b/packages/nameguard-react/src/components/Report/CheckResultCodeIcon.tsx
@@ -0,0 +1,99 @@
+import React from "react";
+import { Tooltip } from "../Tooltip/Tooltip";
+import { CheckResultCode } from "@namehash/nameguard";
+import { CheckResultCodePassIcon } from "../icons/CheckResultCodePassIcon";
+import { CheckResultCodeWarnIcon } from "../icons/CheckResultCodeWarnIcon";
+import { CheckResultCodeAlertIcon } from "../icons/CheckResultCodeAlertIcon";
+import { CheckResultCodeInfoIcon } from "../icons/CheckResultCodeInfoIcon";
+import { CheckResultCodeSkipIcon } from "../icons/CheckResultCodeSkipIcon";
+
+function text(code: CheckResultCode) {
+ switch (code) {
+ case CheckResultCode.pass:
+ return "All Checks Passed";
+ case CheckResultCode.warn:
+ return "Warning";
+ case CheckResultCode.alert:
+ return "Alert";
+ case CheckResultCode.info:
+ return "Informational Notice";
+ case CheckResultCode.skip:
+ return "Check Not Applicable";
+ }
+}
+
+function icon(
+ code: CheckResultCode,
+ isInteractive = false,
+ onClick = () => {},
+ className = "",
+): React.ReactNode {
+ switch (code) {
+ case CheckResultCode.pass:
+ return (
+
+ );
+ case CheckResultCode.warn:
+ return (
+
+ );
+ case CheckResultCode.alert:
+ return (
+
+ );
+ case CheckResultCode.info:
+ return (
+
+ );
+ case CheckResultCode.skip:
+ return (
+
+ );
+ }
+}
+
+/**
+ * A component that displays a check result code as an icon with a tooltip.
+ * @param {CheckResultCode} code - The CheckResultCode status to display.
+ * @param {boolean} isInteractive - Wether to display a Tooltip and a color effect on icon hover or not.
+ */
+export function CheckResultCodeIcon({
+ code,
+ onClick = () => {},
+ isInteractive = false,
+ className = "",
+}: {
+ onClick?: () => void;
+ code: CheckResultCode;
+ isInteractive?: boolean;
+ className?: string;
+}) {
+ const tooltipText = text(code);
+ const Icon = icon(code, isInteractive, onClick, className);
+
+ if (isInteractive) {
+ return ;
+ } else {
+ return Icon;
+ }
+}
diff --git a/packages/nameguard-react/src/components/Report/GraphemeListItem.tsx b/packages/nameguard-react/src/components/Report/GraphemeListItem.tsx
index 241c8752f..f93507498 100644
--- a/packages/nameguard-react/src/components/Report/GraphemeListItem.tsx
+++ b/packages/nameguard-react/src/components/Report/GraphemeListItem.tsx
@@ -1,7 +1,10 @@
import React from "react";
-import { ConsolidatedGraphemeGuardReport } from "@namehash/nameguard";
+import {
+ CheckResultCode,
+ ConsolidatedGraphemeGuardReport,
+} from "@namehash/nameguard";
-import { Check } from "./Check";
+import { CheckResultCodeIcon } from "./CheckResultCodeIcon";
import { RiskCounter } from "./RiskCounter";
import { useGraphemeModalStore } from "../../stores/grapheme";
@@ -48,9 +51,23 @@ export function GraphemeListItem({ item }: GraphemeListItemProps) {
-
-
-
+ {item.highest_risk ? (
+
+
+
+ ) : (
+
+
+
+ )}
diff --git a/packages/nameguard-react/src/components/Report/LabelListItem.tsx b/packages/nameguard-react/src/components/Report/LabelListItem.tsx
index 1ca981b3a..633dd4730 100644
--- a/packages/nameguard-react/src/components/Report/LabelListItem.tsx
+++ b/packages/nameguard-react/src/components/Report/LabelListItem.tsx
@@ -1,9 +1,10 @@
+import cc from "classcat";
import React, { Fragment } from "react";
-import { ShieldExclamationIcon } from "@heroicons/react/20/solid";
-
-import { NoGraphemesWarning } from "./NoGraphemesWarning";
import { GraphemeList } from "./GraphemeList";
-import { NameGuardReport } from "@namehash/nameguard";
+import { NoGraphemesWarning } from "./NoGraphemesWarning";
+import { CheckResultCode, NameGuardReport, Rating } from "@namehash/nameguard";
+import { checkResultCodeTextColor } from "../../utils/text";
+import { RatingIcon } from "./RatingIcon";
type LabelListItemProps = {
item: NameGuardReport["labels"][0];
@@ -43,8 +44,13 @@ export const LabelListItem = ({
{(item.normalization === "unnormalized" ||
item.normalization === "unknown") && (
-
-
+
+
{item.normalization === "unnormalized"
? "Not ENS Normalized"
: "Not found"}
diff --git a/packages/nameguard-react/src/components/Report/LoadingSkeleton.tsx b/packages/nameguard-react/src/components/Report/LoadingSkeleton.tsx
index cbc4fdef4..3c7c9220e 100644
--- a/packages/nameguard-react/src/components/Report/LoadingSkeleton.tsx
+++ b/packages/nameguard-react/src/components/Report/LoadingSkeleton.tsx
@@ -1,9 +1,10 @@
import React from "react";
-import { Shield } from "./Shield";
+import { RatingIcon, RatingIconSize } from "./RatingIcon";
import { ReportFormattedDisplayName } from "./ReportFormattedName";
import { ReportChangesApplied } from "./ReportChangesApplied";
import { ParsedName } from "@namehash/ens-utils";
+import { RatingLoadingIcon } from "../icons/RatingLoadingIcon";
type LoadingSkeletonProps = {
parsedName: ParsedName;
@@ -36,7 +37,7 @@ export const LoadingSkeleton = ({ parsedName }: LoadingSkeletonProps) => {
)}
-
+
Inspecting...
diff --git a/packages/nameguard-react/src/components/Report/NoGraphemesWarning.tsx b/packages/nameguard-react/src/components/Report/NoGraphemesWarning.tsx
index db0c0706b..2c0d204b0 100644
--- a/packages/nameguard-react/src/components/Report/NoGraphemesWarning.tsx
+++ b/packages/nameguard-react/src/components/Report/NoGraphemesWarning.tsx
@@ -1,8 +1,9 @@
import React from "react";
-import { ShieldExclamationIcon } from "@heroicons/react/20/solid";
-
-import { Check } from "./Check";
+import cc from "classcat";
+import { CheckResultCodeIcon } from "./CheckResultCodeIcon";
import { CheckResultCode } from "@namehash/nameguard";
+import { checkResultCodeTextColor } from "../../utils/text";
+import { ShieldExclamationIcon } from "@heroicons/react/20/solid";
type Props = {
title: string;
@@ -14,7 +15,12 @@ export function NoGraphemesWarning({ title, description }: Props) {
@@ -26,8 +32,16 @@ export function NoGraphemesWarning({ title, description }: Props) {
diff --git a/packages/nameguard-react/src/components/Report/RatingIcon.tsx b/packages/nameguard-react/src/components/Report/RatingIcon.tsx
new file mode 100644
index 000000000..2f4db91a5
--- /dev/null
+++ b/packages/nameguard-react/src/components/Report/RatingIcon.tsx
@@ -0,0 +1,78 @@
+import React from "react";
+import { Rating } from "@namehash/nameguard";
+
+import { RatingPassLargeIcon } from "../icons/RatingPassLargeIcon";
+import { RatingWarnLargeIcon } from "../icons/RatingWarnLargeIcon";
+import { RatingAlertLargeIcon } from "../icons/RatingAlertLargeIcon";
+import { RatingPassMediumIcon } from "../icons/RatingPassMediumIcon";
+import { RatingWarnMediumIcon } from "../icons/RatingWarnMediumIcon";
+import { RatingAlertMediumIcon } from "../icons/RatingAlertMediumIcon";
+import { RatingPassSmallIcon } from "../icons/RatingPassSmallIcon";
+import { RatingWarnSmallIcon } from "../icons/RatingWarnSmallIcon";
+import { RatingAlertSmallIcon } from "../icons/RatingAlertSmallIcon";
+import { RatingAlertMicroIcon } from "../icons/RatingAlertMicroIcon";
+import { RatingWarnMicroIcon } from "../icons/RatingWarnMicroIcon";
+import { RatingPassMicroIcon } from "../icons/RatingPassMicroIcon";
+
+export enum RatingIconSize {
+ micro = "micro",
+ small = "small",
+ medium = "medium",
+ large = "large",
+}
+
+type Props = {
+ rating: Rating;
+ isInteractive?: boolean;
+ size?: RatingIconSize;
+ className?: string;
+};
+
+const STATUS_TO_BASE_NAME: { [key in Rating]: string } = {
+ [Rating.alert]: "RatingAlert",
+ [Rating.pass]: "RatingPass",
+ [Rating.warn]: "RatingWarn",
+};
+
+const getComponent = (rating: Rating, size: RatingIconSize): React.Node => {
+ const baseName = STATUS_TO_BASE_NAME[rating];
+ const componentName = `${baseName}${capitalizeFirstLetter(size)}Icon`;
+
+ const components: { [key: string]: React.ComponentType } = {
+ RatingPassLargeIcon,
+ RatingPassMediumIcon,
+ RatingPassSmallIcon,
+ RatingPassMicroIcon,
+ RatingWarnLargeIcon,
+ RatingWarnMediumIcon,
+ RatingWarnSmallIcon,
+ RatingWarnMicroIcon,
+ RatingAlertLargeIcon,
+ RatingAlertMediumIcon,
+ RatingAlertSmallIcon,
+ RatingAlertMicroIcon,
+ };
+
+ if (!components[componentName]) {
+ throw new Error(
+ `RatingIcon could not be built with params: \n\n rating: ${rating}\n size: ${size}`,
+ );
+ }
+
+ return components[componentName];
+};
+
+function capitalizeFirstLetter(string: string) {
+ return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+export const RatingIcon = ({
+ rating,
+ isInteractive = false,
+ size = RatingIconSize.small,
+ ...props
+}: Props) => {
+ const Component = getComponent(rating, size);
+
+ return Component(props, isInteractive);
+};
diff --git a/packages/nameguard-react/src/components/Report/Report.tsx b/packages/nameguard-react/src/components/Report/Report.tsx
index 111ccf458..ac7aed0bb 100644
--- a/packages/nameguard-react/src/components/Report/Report.tsx
+++ b/packages/nameguard-react/src/components/Report/Report.tsx
@@ -1,6 +1,6 @@
import React, { Fragment, useMemo } from "react";
import useSWR from "swr";
-import { type NameGuardReport, nameguard } from "@namehash/nameguard";
+import { type NameGuardReport, nameguard, Rating } from "@namehash/nameguard";
import { parseName } from "@namehash/ens-utils";
import { Toaster } from "sonner";
@@ -24,6 +24,7 @@ import { useGraphemeModalStore } from "../../stores/grapheme";
import { ReportError } from "./ReportError";
import { ExternalLinks } from "../ExternalLinks/ExternalLinks";
import { Share } from "../Share/Share";
+import { ratingTextColor } from "../../utils/text";
type ReportProps = {
data?: NameGuardReport;
@@ -64,7 +65,11 @@ export const Report = ({
const showEmptyState = parsedName.outputName.name.length === 0 ?? true;
- const { data, error, isLoading } = useSWR
(
+ const {
+ data,
+ error: hadLoadingError,
+ isLoading,
+ } = useSWR(
fallbackData ? null : parsedName.outputName.name,
(n: string) => nameguard.inspectName(n),
{
@@ -117,14 +122,14 @@ export const Report = ({
- {isLoading && !error && normalizationUnknown && (
+ {isLoading && !hadLoadingError && normalizationUnknown && (
)}
- {isLoading && !error && !normalizationUnknown && (
+ {isLoading && !hadLoadingError && !normalizationUnknown && (
)}
- {error &&
}
+ {hadLoadingError &&
}
{data && (
@@ -168,7 +173,7 @@ export const Report = ({
toast:
"!bg-black !border-black !relative !text-sm !leading-5 !font-medium !px-5",
title: "!text-white",
- success: "!fill-current !text-green-400",
+ success: `!fill-current !${ratingTextColor(Rating.pass)}`,
closeButton: "!hidden",
},
}}
diff --git a/packages/nameguard-react/src/components/Report/ReportError.tsx b/packages/nameguard-react/src/components/Report/ReportError.tsx
index c589439ee..6c83c85f1 100644
--- a/packages/nameguard-react/src/components/Report/ReportError.tsx
+++ b/packages/nameguard-react/src/components/Report/ReportError.tsx
@@ -3,6 +3,10 @@ import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
import { RatedBox } from "../RatedBox/RatedBox";
+import cc from "classcat";
+import { CheckResultCode } from "@namehash/nameguard";
+import { checkResultCodeTextColor } from "../../utils/text";
+
export const ReportError = () => {
const [isOnline, setIsOnline] = useState(navigator.onLine);
@@ -24,7 +28,12 @@ export const ReportError = () => {
diff --git a/packages/nameguard-react/src/components/Report/ReportModalNameBadge.tsx b/packages/nameguard-react/src/components/Report/ReportModalNameBadge.tsx
new file mode 100644
index 000000000..5d8880296
--- /dev/null
+++ b/packages/nameguard-react/src/components/Report/ReportModalNameBadge.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+import { ENSName } from "@namehash/ens-utils";
+import { ConsolidatedNameGuardReport } from "@namehash/nameguard";
+import { useSearchStore } from "../../stores/search";
+import { ReportBadge } from "../ReportBadge";
+
+interface ReportModalNameBadgeProps {
+ data?: ConsolidatedNameGuardReport;
+ hadLoadingError?: boolean;
+ ensName: ENSName;
+}
+
+export function ReportModalNameBadge({
+ data,
+ ensName,
+ hadLoadingError = false,
+ ...props
+}: ReportModalNameBadgeProps) {
+ const { openModal } = useSearchStore();
+ return (
+
openModal(ensName.name)}
+ />
+ );
+}
diff --git a/packages/nameguard-react/src/components/Report/RiskCounter.tsx b/packages/nameguard-react/src/components/Report/RiskCounter.tsx
index 6e93bbce6..df03e15e0 100644
--- a/packages/nameguard-react/src/components/Report/RiskCounter.tsx
+++ b/packages/nameguard-react/src/components/Report/RiskCounter.tsx
@@ -9,7 +9,7 @@ export function RiskCounter({
if (count === 0 || count === 1) return null;
return (
-
+
+ {count - 1} more risk{count - 1 >= 2 && "s"}
);
diff --git a/packages/nameguard-react/src/components/Report/Shield.tsx b/packages/nameguard-react/src/components/Report/Shield.tsx
deleted file mode 100644
index 43f0169b5..000000000
--- a/packages/nameguard-react/src/components/Report/Shield.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import React from "react";
-import { CheckResultCode } from "@namehash/nameguard";
-
-import { PassShieldLarge } from "../icons/PassShieldLarge";
-import { WarnShieldLarge } from "../icons/WarnShieldLarge";
-import { AlertShieldLarge } from "../icons/AlertShieldLarge";
-import { LoadingShieldLarge } from "../icons/LoadingShieldLarge";
-import { ErrorShieldLarge } from "../icons/ErrorShieldLarge";
-import { PassShieldMedium } from "../icons/PassShieldMedium";
-import { WarnShieldMedium } from "../icons/WarnShieldMedium";
-import { AlertShieldMedium } from "../icons/AlertShieldMedium";
-import { LoadingShieldMedium } from "../icons/LoadingShieldMedium";
-import { ErrorShieldMedium } from "../icons/ErrorShieldMedium";
-import { PassShieldSmall } from "../icons/PassShieldSmall";
-import { WarnShieldSmall } from "../icons/WarnShieldSmall";
-import { AlertShieldSmall } from "../icons/AlertShieldSmall";
-import { LoadingShieldSmall } from "../icons/LoadingShieldSmall";
-import { ErrorShieldSmall } from "../icons/ErrorShieldSmall";
-import { AlertIcon as AlertShieldMicro } from "../icons/Alert";
-import { WarnIcon as WarnShieldMicro } from "../icons/Warn";
-import { PassIcon as PassShieldMicro } from "../icons/Pass";
-import { LoadingIcon as LoadingShieldMicro } from "../icons/Loading";
-import { ErrorIcon as ErrorShieldMicro } from "../icons/Error";
-
-export enum ShieldSize {
- micro = "micro",
- small = "small",
- medium = "medium",
- large = "large",
-}
-
-type Props = {
- size?: ShieldSize;
- status: CheckResultCode;
- className?: string;
-};
-
-const STATUS_TO_BASE_NAME: { [key in CheckResultCode]: string } = {
- [CheckResultCode.alert]: "AlertShield",
- [CheckResultCode.pass]: "PassShield",
- [CheckResultCode.warn]: "WarnShield",
- [CheckResultCode.info]: "LoadingShield",
- [CheckResultCode.skip]: "ErrorShield",
-};
-
-const getComponent = (status: CheckResultCode, size: ShieldSize) => {
- const baseName = STATUS_TO_BASE_NAME[status];
- const componentName = `${baseName}${capitalizeFirstLetter(size)}`;
-
- const components: { [key: string]: React.ComponentType } = {
- PassShieldLarge,
- PassShieldMedium,
- PassShieldSmall,
- PassShieldMicro,
- WarnShieldLarge,
- WarnShieldMedium,
- WarnShieldSmall,
- WarnShieldMicro,
- AlertShieldLarge,
- AlertShieldMedium,
- AlertShieldSmall,
- AlertShieldMicro,
- LoadingShieldLarge,
- LoadingShieldMedium,
- LoadingShieldSmall,
- LoadingShieldMicro,
- ErrorShieldLarge,
- ErrorShieldMedium,
- ErrorShieldSmall,
- ErrorShieldMicro,
- };
-
- return components[componentName] || null;
-};
-
-function capitalizeFirstLetter(string: string) {
- return string.charAt(0).toUpperCase() + string.slice(1);
-}
-
-export const Shield = ({
- status,
- size = ShieldSize.small,
- ...props
-}: Props) => {
- const Component = getComponent(status, size);
-
- return Component ? : null;
-};
diff --git a/packages/nameguard-react/src/components/ReportBadge/index.tsx b/packages/nameguard-react/src/components/ReportBadge/index.tsx
new file mode 100644
index 000000000..efe1879fc
--- /dev/null
+++ b/packages/nameguard-react/src/components/ReportBadge/index.tsx
@@ -0,0 +1,185 @@
+"use client";
+import {
+ Normalization,
+ type ConsolidatedNameGuardReport,
+} from "@namehash/nameguard";
+import React, { useEffect, useState, useRef } from "react";
+import cc from "classcat";
+
+import { ReportIcon } from "../ReportIcon/index";
+import { RatingLoadingIcon, RatingIconSize, Tooltip } from "../..";
+import { UnknownReportIcon } from "../UnknownReportIcon/UnknownReportIcon";
+import { ENSName } from "@namehash/ens-utils";
+
+interface ReportBadgeProps {
+ /*
+ The data prop is the consolidated report for the ensName.
+ The ensName prop is the ENSName object.
+
+ The data prop should always be relative to the ensName prop.
+ This means that the data prop should always be the report for
+ the ensName provided in the ensName prop.
+ */
+ ensName: ENSName;
+ data?: ConsolidatedNameGuardReport;
+
+ hadLoadingError?: boolean;
+ displayUnnormalizedNames?: boolean;
+ onClickOverride?: (ensName: ENSName) => void;
+
+ /*
+ Below number is a measure of the maximum width that the ensName
+ should have inside ReportBadge. If the ensName displayed is longer
+ than this number, the badge will truncate the ensName and display a
+ tooltip on hover that shows the full ensName. This number is measured in pixels.
+ */
+ maxEnsNameDisplayWidth?: number;
+}
+
+const DEFAULT_MAX_ENSNAME_DISPLAY_WIDTH = 200;
+
+export function ReportBadge({
+ data,
+ ensName,
+ onClickOverride,
+ hadLoadingError = false,
+ displayUnnormalizedNames = false,
+ maxEnsNameDisplayWidth = DEFAULT_MAX_ENSNAME_DISPLAY_WIDTH,
+}: ReportBadgeProps) {
+ const buttonClass =
+ "flex-shrink-0 appearance-none bg-white transition-colors hover:bg-gray-50 border border-gray-200 rounded-md px-2.5 py-1.5 inline-flex items-center";
+ const buttonAndCursorClass = cc([buttonClass, "cursor-pointer"]);
+
+ const onClickHandler = () => {
+ if (onClickOverride) onClickOverride(ensName);
+ else {
+ window.location.href = `https://nameguard.io/inspect/${encodeURIComponent(
+ ensName.name,
+ )}`;
+ }
+ };
+
+ const invisibleNameWidthTester = useRef(null);
+
+ /*
+ Below state is only true if the ensName displayed is longer
+ than badge's ensName max-width (defined by MAX_ENSNAME_DISPLAY_WIDTH)
+ */
+ const [displayFullNameInTooltip, setDisplayFullNameInTooltip] =
+ useState(false);
+
+ useEffect(() => {
+ if (data) {
+ if (data.name !== ensName.name) {
+ throw new Error(
+ `The data received is from: ${data.name} and not for the provided ensName, which is ${ensName.name}`,
+ );
+ }
+ }
+ }, [data]);
+
+ useEffect(() => {
+ if (invisibleNameWidthTester && invisibleNameWidthTester.current) {
+ const nameIsBiggerThanBadgeMax =
+ Math.ceil(
+ invisibleNameWidthTester.current.getBoundingClientRect().width,
+ ) > maxEnsNameDisplayWidth;
+
+ setDisplayFullNameInTooltip(nameIsBiggerThanBadgeMax);
+ }
+ }, [invisibleNameWidthTester]);
+
+ const showUnnormalizedName =
+ displayUnnormalizedNames &&
+ ensName.normalization === Normalization.unnormalized;
+ const displayName = showUnnormalizedName ? ensName.name : ensName.displayName;
+
+ return (
+
+ }
+ >
+
+ {displayName}
+
+
+ ) : (
+
+ {displayName}
+
+ )}
+
+ {hadLoadingError ? (
+ // Unknown Rating
+
+
+
+
+
+ ) : !data ? (
+ // Loading Rating
+
+ ) : (
+ // Known Rating
+
{}}
+ size={RatingIconSize.micro}
+ className={"cursor-pointer"}
+ hadLoadingError={hadLoadingError}
+ />
+ )}
+
+ );
+}
diff --git a/packages/nameguard-react/src/components/ReportIcon/index.tsx b/packages/nameguard-react/src/components/ReportIcon/index.tsx
new file mode 100644
index 000000000..15ed1768f
--- /dev/null
+++ b/packages/nameguard-react/src/components/ReportIcon/index.tsx
@@ -0,0 +1,160 @@
+"use client";
+
+import React, { useEffect } from "react";
+import {
+ CheckResultCode,
+ ConsolidatedNameGuardReport,
+} from "@namehash/nameguard";
+import cc from "classcat";
+
+import { Tooltip } from "../Tooltip/Tooltip";
+import { RatingLoadingIcon } from "../icons/RatingLoadingIcon";
+import { RatingIcon, RatingIconSize } from "../Report/RatingIcon";
+import { checkResultCodeTextColor, ratingTextColor } from "../../utils/text";
+import { ENSName } from "@namehash/ens-utils";
+import { UnknownReportIcon } from "../UnknownReportIcon/UnknownReportIcon";
+
+type ReportShieldProps = {
+ onClickOverride?: (ensName: ENSName) => void;
+
+ /*
+ The data prop is the consolidated report for the ensName.
+ The ensName prop is the ENSName object.
+
+ The data prop should always be relative to the ensName prop.
+ This means that the data prop should always be the report for
+ the ensName provided in the ensName prop.
+ */
+ ensName: ENSName;
+ data?: ConsolidatedNameGuardReport;
+
+ hadLoadingError: boolean;
+ size?: RatingIconSize;
+} & React.ComponentProps;
+
+declare global {
+ interface Window {
+ location: Location;
+ }
+}
+
+export function ReportIcon({
+ ensName,
+ data,
+ onClickOverride,
+ hadLoadingError,
+ size = RatingIconSize.small,
+
+ /*
+ Props are applied to the shield icon which is the onHover trigger element
+ for the tooltip with Report information. For examples, please visit the
+ https://nameguard.io/docs/report and see the ReportIcon docs. Any
+ additional props are passed to the shield icon that when hovered,
+ displays the tooltip with the report information.
+ */
+ ...props
+}: ReportShieldProps) {
+ const onClickHandler = () => {
+ if (onClickOverride) onClickOverride(ensName);
+ else {
+ window.location.href = `https://nameguard.io/inspect/${encodeURIComponent(
+ ensName.name,
+ )}`;
+ }
+ };
+
+ if (hadLoadingError) {
+ return (
+
+
+
+
+
+ );
+ }
+
+ if (!data) {
+ return (
+
+ );
+ }
+
+ useEffect(() => {
+ if (data) {
+ if (data.name !== ensName.name) {
+ throw new Error(
+ `The data received is from: ${data.name} and not for the provided ensName, which is ${ensName.name}`,
+ );
+ }
+ }
+ }, [data]);
+
+ const { title, subtitle, rating, risk_count, highest_risk } = data;
+
+ const textClass = cc(["font-semibold mb-1", ratingTextColor(rating)]);
+
+ return (
+
+ }
+ >
+
+
+
+
+
+
+
+ {title}
+ {risk_count >= 1 && (
+
+ {risk_count} risk{risk_count !== 1 && "s"} detected
+
+ )}
+
+
+
+ {highest_risk?.message || subtitle}
+
+
+
+
+
+
+
)}
- {isLoading &&
- examples.map((e, index) => )}
+ {(hadLoadingError || isLoading) &&
+ examples.map((_, index) => (
+
+ ))}
{data?.results?.map((report, index) => (
- openModal(report.name)}
/>
))}
diff --git a/packages/nameguard-react/src/components/Share/Share.tsx b/packages/nameguard-react/src/components/Share/Share.tsx
index c9dd5cd59..55bc2c0d5 100644
--- a/packages/nameguard-react/src/components/Share/Share.tsx
+++ b/packages/nameguard-react/src/components/Share/Share.tsx
@@ -8,7 +8,10 @@ import {
import { toast } from "sonner";
+import cc from "classcat";
import { Tooltip } from "../Tooltip/Tooltip";
+import { CheckResultCode } from "@namehash/nameguard";
+import { checkResultCodeTextColor } from "../../utils/text";
type ShareProps = {
name?: string;
@@ -19,7 +22,7 @@ function createTwitterLink(name: string) {
const url = `https://nameguard.io/inspect/${encodeURIComponent(name)}`;
return `https://twitter.com/intent/tweet?text=${encodeURIComponent(
- tweetText,
+ tweetText
)}&url=${encodeURIComponent(url)}`;
}
@@ -41,18 +44,25 @@ export function Share({ name }: ShareProps) {
const twitterLink = createTwitterLink(name);
const telegramLink = createTelegramLink(
- `https://nameguard.io/inspect/${encodeURIComponent(name)}`,
+ `https://nameguard.io/inspect/${encodeURIComponent(name)}`
);
const emailLink = createMailToLink(
`NameGuard Report for ${name}`,
- `Check this out!\nhttps://nameguard.io/inspect/${encodeURIComponent(name)}`,
+ `Check this out!\nhttps://nameguard.io/inspect/${encodeURIComponent(name)}`
);
const copyLinkToClipboard = () => {
navigator.clipboard.writeText(
- `https://nameguard.io/inspect/${encodeURIComponent(name)}`,
+ `https://nameguard.io/inspect/${encodeURIComponent(name)}`
);
toast.success("Link copied to clipboard", {
- icon:
,
+ icon: (
+
+ ),
});
closeModal();
};
diff --git a/packages/nameguard-react/src/components/Shield/Error.tsx b/packages/nameguard-react/src/components/Shield/Error.tsx
deleted file mode 100644
index dc05fbcb5..000000000
--- a/packages/nameguard-react/src/components/Shield/Error.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React, { type ReactNode } from "react";
-
-import { Shield as ShieldIcon, ShieldSize } from "../Report/Shield";
-import { Tooltip } from "../Tooltip/Tooltip";
-import { CheckResultCode } from "@namehash/nameguard";
-
-type ShieldErrorProps = {
- children?: ReactNode;
- size?: ShieldSize;
-} & React.ComponentProps
;
-
-export const ShieldError = ({
- children,
- size = ShieldSize.small,
- ...props
-}: ShieldErrorProps) => {
- return (
-
- }
- >
-
-
-
-
-
-
-
-
- Unable to analyze
-
-
-
-
- Refresh the page to try again.
-
- {children}
-
-
-
-
-
-
- {result.title}
- {result.risk_count >= 1 && (
-
- {result.risk_count} risk{result.risk_count === 1 ? "" : "s"}{" "}
- detected
-
- )}
-
-
{result.subtitle}
- {children}
-
-
+
+
+
+
+
+
+
+ Unable to analyze
+
+
+
+
+ Refresh the page to try again.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+