{isLoading && !hadLoadingError && normalizationUnknown && (
diff --git a/packages/nameguard-react/src/components/Report/ReportModalNameBadge.tsx b/packages/nameguard-react/src/components/Report/ReportModalNameBadge.tsx
index 5d8880296..9a068bbb5 100644
--- a/packages/nameguard-react/src/components/Report/ReportModalNameBadge.tsx
+++ b/packages/nameguard-react/src/components/Report/ReportModalNameBadge.tsx
@@ -1,30 +1,36 @@
import React from "react";
import { ENSName } from "@namehash/ens-utils";
-import { ConsolidatedNameGuardReport } from "@namehash/nameguard";
import { useSearchStore } from "../../stores/search";
-import { ReportBadge } from "../ReportBadge";
+import { ReportBadge } from "../..";
+import { ReportBadgeProps } from "../ReportBadge";
-interface ReportModalNameBadgeProps {
- data?: ConsolidatedNameGuardReport;
- hadLoadingError?: boolean;
- ensName: ENSName;
-}
+/**
+ * Same as `ReportBadgeProps` but without `onOpenReport`
+ * since `ReportModalNameBadge` provides its own implementation of
+ * `onOpenReport`.
+ */
+type ReportModalNameBadgeProps = Omit;
export function ReportModalNameBadge({
+ name,
data,
- ensName,
- hadLoadingError = false,
+ hadLoadingError,
+ displayUnnormalizedNames,
+ maxNameDisplayWidth,
...props
}: ReportModalNameBadgeProps) {
const { openModal } = useSearchStore();
return (
openModal(ensName.name)}
+ displayUnnormalizedNames={displayUnnormalizedNames}
+ maxNameDisplayWidth={maxNameDisplayWidth}
+ onOpenReport={(name: ENSName) => {
+ openModal(name.name);
+ }}
/>
);
}
diff --git a/packages/nameguard-react/src/components/ReportBadge/index.tsx b/packages/nameguard-react/src/components/ReportBadge/index.tsx
index 394d773d6..c5bda30dc 100644
--- a/packages/nameguard-react/src/components/ReportBadge/index.tsx
+++ b/packages/nameguard-react/src/components/ReportBadge/index.tsx
@@ -1,114 +1,114 @@
"use client";
-import { type ConsolidatedNameGuardReport } from "@namehash/nameguard";
-import React, { useEffect } from "react";
-import cc from "classcat";
-
-import { Link } from "@namehash/namekit-react";
+import { type ConsolidatedNameGuardReport } from "@namehash/nameguard";
import { ENSName } from "@namehash/ens-utils";
+import React from "react";
+
import { ReportIcon } from "../ReportIcon/index";
-import { RatingLoadingIcon, RatingIconSize, DisplayedName } from "../..";
-import { UnknownReportIcon } from "../UnknownReportIcon/UnknownReportIcon";
+import { RatingIconSize, DisplayedName } from "../..";
+import { OpenReportHandler, openReport } from "../../utils/openreport";
-interface ReportBadgeProps {
- /*
- The data prop is the consolidated report for the ensName.
- The ensName prop is the ENSName object.
+export interface ReportBadgeProps {
+ /**
+ * The `ENSName` that this `ReportBadge` is related to.
+ *
+ * Used to provide functionality even when the `data` prop is `undefined`.
+ * (such as during data loading).
+ */
+ name: ENSName;
- 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;
+ /**
+ * - If `undefined` and `hasLoadingError` is `false`:
+ * - The component will display a loading state.
+ * - If `undefined` and `hasLoadingError` is `true`:
+ * - The component will display an unknown state.
+ * - If `defined`:
+ * - The component will display a summary of the report contained within `data`.
+ * - The value of `data.name` must be equal to the value of `name.name`.
+ *
+ * @default undefined
+ */
data?: ConsolidatedNameGuardReport;
+ /**
+ * - If `true`, the component will display an error state.
+ * - The value of this field is only considered if `data` is `undefined`.
+ *
+ * @default false
+ */
hadLoadingError?: boolean;
+
+ /**
+ * - If `true`, the component will display the literal value of `name` even
+ * if it is unnormalized. WARNING: NOT RECOMMENDED. This may display names
+ * that are not "safe".
+ * - Otherwise, the component will display "display names" (i.e. normalized
+ * names or a "safe" version of unnormalized names).
+ *
+ * @default false
+ */
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.
- */
- maxDisplayWidth?: number;
+ /**
+ * The maximum width that the display of `name` should have inside the
+ * `ReportBadge`. If the display of `name` is longer than this number, the
+ * badge will truncate the display of `name` and display a tooltip when the
+ * name is hovered that displays the full value of `name`. This number is
+ * measured in pixels.
+ *
+ * @default 200
+ */
+ maxNameDisplayWidth?: number;
+
+ /**
+ * The custom `OpenReportHandler` to call when:
+ * - The report icon is clicked.
+ * - The link to inspect the name for details in the tooltip is clicked.
+ * - The badge is clicked.
+ *
+ * If `undefined`, the default `OpenReportHandler` will be used.
+ *
+ * @default undefined
+ */
+ onOpenReport?: OpenReportHandler;
}
+const DEFAULT_MAX_NAME_DISPLAY_WIDTH = 200;
+
export function ReportBadge({
+ name,
data,
- ensName,
- maxDisplayWidth,
- onClickOverride,
hadLoadingError = false,
displayUnnormalizedNames = false,
+ maxNameDisplayWidth = DEFAULT_MAX_NAME_DISPLAY_WIDTH,
+ onOpenReport,
}: 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,
- )}`;
- }
- };
-
- 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]);
-
return (
-