Refine Entire Platform To Support Uninspected Names in NameGuard (#350)

* Add support for Uninspected Names in NameGuard UI --------- Co-authored-by: lightwalker.eth <126201998+lightwalker-eth@users.noreply.github.com>
namehash · Aug 26, 2024 · 39ece2a · 39ece2a
1 parent cd3b936
commit 39ece2a
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 14 deletions.
diff --git a/.changeset/thin-eels-burn.md b/.changeset/thin-eels-burn.md
@@ -0,0 +1,5 @@
+---
+"@namehash/nameguard-react": patch
+---
+
+Add support for uninspected NameGuard reports.
diff --git a/packages/nameguard-react/src/components/Report/LabelList.tsx b/packages/nameguard-react/src/components/Report/LabelList.tsx
@@ -1,16 +1,16 @@
 import React from "react";
-import type { NameGuardReport } from "@namehash/nameguard";
+import type { LabelGuardReport } from "@namehash/nameguard";
 
 import { LabelListItem } from "./LabelListItem";
 
 type LabelListProps = {
-  items?: NameGuardReport["labels"];
+  items: LabelGuardReport[];
 };
 
 export function LabelList({ items = [] }: LabelListProps) {
-  const rawLabels = items.map((i) => i.label) ?? [];
+  const rawLabels = items.map((i) => i.label);
 
-  return items?.map((label, index) => (
+  return items.map((label, index) => (
     <LabelListItem
       key={index}
       index={index}

diff --git a/packages/nameguard-react/src/components/Report/Report.tsx b/packages/nameguard-react/src/components/Report/Report.tsx
@@ -121,14 +121,12 @@ export const Report = ({
             <ExternalLinks title="View name in" links={externalLinks} />
           </div>
         </div>
-
         {isLoading && !hadLoadingError && normalizationUnknown && (
           <LoadingSkeleton parsedName={parsedName} />
         )}
         {isLoading && !hadLoadingError && !normalizationUnknown && (
           <LoadingSkeleton parsedName={parsedName} />
         )}
-
         {hadLoadingError && <ReportError />}
 
         {data && (
@@ -145,14 +143,19 @@ export const Report = ({
                 ))}
               </div>
             </div>
-            <div className="space-y-4 md:space-y-5">
-              <p className="text-black font-semibold text-lg leading-6">
-                Name inspection
-              </p>
-
-              <LabelList items={data.labels} />
-            </div>
+          </Fragment>
+        )}
+        {data && data.inspected && (
+          <div className="space-y-4 md:space-y-5">
+            <p className="text-black font-semibold text-lg leading-6">
+              Name inspection
+            </p>
 
+            <LabelList items={data.labels} />
+          </div>
+        )}
+        {data && (
+          <Fragment>
             <FeedbackNotice onChatClick={openChatModal} />
             <ReportFooter />
           </Fragment>

diff --git a/packages/nameguard-react/src/components/Search/SearchEmptyState.tsx b/packages/nameguard-react/src/components/Search/SearchEmptyState.tsx
@@ -26,6 +26,7 @@ const examples = [
   "unknоwn.eth",
   "john🇺🇸",
   "7️⃣7️⃣7️⃣.eth",
+  "extremelylongnamethatgoesonandonandonandonandonandonandonandonandonandonandonandonandonandonandonandonandonandonandonandonandonandonandonandonandonandonandonandonandonandonandonandonandonandonandonandonandonandonandonandonandonandonandonandonandonandonandonandonandonandonandonandonandonandonandonandonandonandon.eth",
 ].map((name) => buildENSName(name));
 
 export const SearchEmptyState = () => {

diff --git a/packages/nameguard-react/src/components/Tooltip/Tooltip.tsx b/packages/nameguard-react/src/components/Tooltip/Tooltip.tsx
@@ -28,7 +28,7 @@ export function Tooltip({
   placement = "top",
 
   /*
-    Props are applied to the Float component, 
+    Props are applied to the Float component,
     which is a wrapper for the tooltip "children".
   */
   ...props