diff --git a/packages/nameguard-react/package.json b/packages/nameguard-react/package.json index 1fabdda77..6c1ceeb57 100644 --- a/packages/nameguard-react/package.json +++ b/packages/nameguard-react/package.json @@ -1,6 +1,6 @@ { "name": "@namehash/nameguard-react", - "version": "0.0.11", + "version": "0.0.13", "scripts": { "build": "tsup", "dev": "tsup --watch --clean=false", diff --git a/packages/nameguard-react/src/components/NameBadge/NameBadge.tsx b/packages/nameguard-react/src/components/NameBadge/NameBadge.tsx index 60535e992..edc36033c 100644 --- a/packages/nameguard-react/src/components/NameBadge/NameBadge.tsx +++ b/packages/nameguard-react/src/components/NameBadge/NameBadge.tsx @@ -31,7 +31,13 @@ export const NameBadge = ({ placeholder, onClick, data }: NameBadgeProps) => { {data.beautiful_name || data.name} - + + + + Inspect name for details + + + ); }; diff --git a/packages/nameguard-react/src/components/NameShield/index.tsx b/packages/nameguard-react/src/components/NameShield/index.tsx index c76af414e..7cd2ba796 100644 --- a/packages/nameguard-react/src/components/NameShield/index.tsx +++ b/packages/nameguard-react/src/components/NameShield/index.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { type ReactNode } from "react"; import type { ConsolidatedNameGuardReport, Rating } from "@namehash/nameguard"; import cc from "classcat"; @@ -24,15 +24,21 @@ function textColor(rating?: Rating) { type NameShieldProps = { data?: ConsolidatedNameGuardReport; + children?: ReactNode; + disableHover?: boolean; }; -export function NameShield({ data }: NameShieldProps) { +export function NameShield({ data, children, disableHover }: NameShieldProps) { if (!data) return null; - const { title, name, rating, risk_count, highest_risk } = data; + const { title, subtitle, rating, risk_count, highest_risk } = data; const textClass = cc(["font-semibold", textColor(rating)]); + if (disableHover) { + return ; + } + return ( {title} - {risk_count} risk - {(risk_count || 0) > 1 && "s"} detected + {risk_count} risk{risk_count !== 1 && "s"} detected - - {highest_risk?.message} - {/* - - Inspect name for details - - */} + + + {highest_risk?.message || subtitle} + + {children} diff --git a/packages/nameguard-react/src/components/Search/SearchModal.tsx b/packages/nameguard-react/src/components/Search/SearchModal.tsx index 45df99682..d712e2e46 100644 --- a/packages/nameguard-react/src/components/Search/SearchModal.tsx +++ b/packages/nameguard-react/src/components/Search/SearchModal.tsx @@ -21,7 +21,7 @@ export const SearchModal = () => { return ( - + { {result.title} - {result.risk_count} risk{result.risk_count >= 0 && "s"} detected + {result.risk_count} risk{result.risk_count === 1 ? "" : "s"}{" "} + detected {result.subtitle}