feat(nameguard-react): canonical badge

packages/nameguard-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@namehash/nameguard-react",
-  "version": "0.0.7",
+  "version": "0.0.10",
   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch --clean=false",

packages/nameguard-react/src/components/GraphemeModal/ConfusableList.tsx

@@ -5,15 +5,23 @@ import { ConfusableListItem } from "./ConfusableListItem";
 
 type ConfusableListProps = {
   items: GraphemeGuardReport["confusables"];
+  canonicalGrapheme?: GraphemeGuardReport["canonical_grapheme"];
 };
 
-export const ConfusableList = ({ items }: ConfusableListProps) => {
+export const ConfusableList = ({
+  items,
+  canonicalGrapheme,
+}: ConfusableListProps) => {
   if (!items || items?.length === 0) return null;
 
   return (
     <div className="rounded-md border border-gray-200 divide-y divide-gray-200">
       {items?.map((confusable, index) => (
-        <ConfusableListItem key={index} item={confusable} />
+        <ConfusableListItem
+          key={index}
+          item={confusable}
+          isCanonical={canonicalGrapheme === confusable.grapheme}
+        />
       ))}
     </div>
   );

packages/nameguard-react/src/components/GraphemeModal/ConfusableListItem.tsx

@@ -6,9 +6,13 @@ import { useGraphemeModalStore } from "../../stores/grapheme";
 
 type ConfusableListItemProps = {
   item: GraphemeGuardReport["confusables"][0];
+  isCanonical: boolean;
 };
 
-export const ConfusableListItem = ({ item }: ConfusableListItemProps) => {
+export const ConfusableListItem = ({
+  item,
+  isCanonical,
+}: ConfusableListItemProps) => {
   const { openGraphemeModal } = useGraphemeModalStore();
 
   const handleClick = () => {
@@ -25,6 +29,11 @@ export const ConfusableListItem = ({ item }: ConfusableListItemProps) => {
       </div>
       <div className="md:grid md:grid-cols-7 md:gap-4 col-span-7 md:col-span-11">
         <div className="md:col-span-3">
+          {isCanonical && (
+            <div className="mb-1.5 -mt-4 relative text-green-800 text-xs font-medium rounded-full px-2 py-0.5 bg-green-100 inline-block">
+              Canonical
+            </div>
+          )}
           <p className="text-black text-sm font-medium">{item.grapheme_name}</p>
           <p className="hidden md:inline-block text-gray-500 text-sm font-normal">
             {item.grapheme_description}

packages/nameguard-react/src/components/GraphemeModal/GraphemeModal.tsx

@@ -97,7 +97,10 @@ export const GraphemeModal = forwardRef((_, ref: Ref<HTMLDivElement>) => {
                 </p>
               </div>
 
-              <ConfusableList items={data?.confusables} />
+              <ConfusableList
+                items={data?.confusables}
+                canonicalGrapheme={data?.canonical_grapheme}
+              />
             </div>
           )}
         </div>

packages/nameguard-react/src/components/Shield/Shield.tsx

@@ -40,8 +40,6 @@ export const Shield = ({ name }: ShieldProps) => {
     (n: string) => nameguard.bulkInspectNames([parseName(n).outputName.name])
   );
 
-  console.log({ data });
-
   // const [result] = data.results;
   const result = data.results[0];
 

packages/nameguard-react/src/index.ts

@@ -7,4 +7,5 @@ export { useChatModalStore } from "./stores/chat";
 export { useSearchStore } from "./stores/search";
 
 export { NameBadge } from "./components/NameBadge/NameBadge";
+export { NameShield } from "./components/NameShield";
 export { Shield } from "./components/Shield/Shield";