From e7c7b165e838b00c3be26e3ac1f10d462cb1e841 Mon Sep 17 00:00:00 2001 From: FrancoAguzzi Date: Thu, 18 Jul 2024 20:05:54 -0300 Subject: [PATCH 01/26] feat: [SC-24987] create LoadingReportIcon --- apps/examples.nameguard.io/package.json | 1 + .../app/components/ImpersonationReport.tsx | 17 +- apps/examples.nameguard.io/tsconfig.json | 2 +- .../nameguard.io/src/app/docs/report/page.tsx | 362 +++++++++++++++++- packages/ens-utils/tsconfig.json | 4 +- packages/nameguard-react/package.json | 5 +- .../LoadingReportIcon/LoadingReportIcon.tsx | 57 +++ .../src/components/Report/LoadingSkeleton.tsx | 11 +- .../src/components/Report/Report.tsx | 10 +- .../Report/ReportModalNameBadge.tsx | 6 +- .../src/components/ReportBadge/index.tsx | 115 ++++-- .../src/components/ReportIcon/index.tsx | 98 +++-- .../src/components/Share/Share.tsx | 23 +- .../UnknownReportIcon/UnknownReportIcon.tsx | 50 --- .../icons/RatingLoadingSmallIcon.tsx | 2 +- packages/nameguard-react/src/index.ts | 3 +- packages/nameguard-sdk/tsconfig.json | 2 +- pnpm-lock.yaml | 158 ++++---- 18 files changed, 679 insertions(+), 247 deletions(-) create mode 100644 packages/nameguard-react/src/components/LoadingReportIcon/LoadingReportIcon.tsx delete mode 100644 packages/nameguard-react/src/components/UnknownReportIcon/UnknownReportIcon.tsx diff --git a/apps/examples.nameguard.io/package.json b/apps/examples.nameguard.io/package.json index 262d05f9e..e82f83979 100644 --- a/apps/examples.nameguard.io/package.json +++ b/apps/examples.nameguard.io/package.json @@ -10,6 +10,7 @@ "dependencies": { "@headlessui-float/react": "0.11.4", "@headlessui/react": "1.7.17", + "@namehash/ens-utils": "1.12.1", "@namehash/nameguard": "workspace:*", "@namehash/nameguard-react": "workspace:*", "classcat": "5.0.4", diff --git a/apps/examples.nameguard.io/src/app/components/ImpersonationReport.tsx b/apps/examples.nameguard.io/src/app/components/ImpersonationReport.tsx index 6a1a947de..902848719 100644 --- a/apps/examples.nameguard.io/src/app/components/ImpersonationReport.tsx +++ b/apps/examples.nameguard.io/src/app/components/ImpersonationReport.tsx @@ -1,15 +1,17 @@ "use client"; -import { Rating, type SecurePrimaryNameResult } from "@namehash/nameguard"; +import { type SecurePrimaryNameResult } from "@namehash/nameguard"; import { RatingIcon, RatingIconSize, RatingLoadingIcon, + viewNameReportURL, ratingTextColor, } from "@namehash/nameguard-react"; import cc from "classcat"; import { Tooltip } from "./Tooltip"; +import { buildENSName } from "@namehash/ens-utils"; type ImpersonationReportProps = { data?: SecurePrimaryNameResult; @@ -26,7 +28,12 @@ export function ImpersonationReport({ data }: ImpersonationReportProps) { const { nameguard_result } = data; if (!nameguard_result) - return ; + return ( + + ); const textClass = cc([ "font-semibold", @@ -66,9 +73,9 @@ export function ImpersonationReport({ data }: ImpersonationReportProps) {
- 
{""}
+ 
{""}
alert(ensName.name)} + onIconClickOverride={(ensName: ENSName) => + alert(`${ensName.name} - icon click`) + } />
alert(ensName.name)} + onIconClickOverride={(ensName: ENSName) => + alert(`${ensName.name} - icon click`) + } />
alert(ensName.name)} + onIconClickOverride={(ensName: ENSName) => + alert(`${ensName.name} - icon click`) + } />
alert(ensName.name)} + onIconClickOverride={(ensName: ENSName) => + alert(`${ensName.name} - icon click`) + } />
alert(ensName.name)} + onIconClickOverride={(ensName: ENSName) => + alert(`${ensName.name} - icon click`) + } + /> +
+
+
+
+ 
{""}
+
+ +
+ + alert(`${ensName.name} - tooltip click`) + } + /> +
+
+ + alert(`${ensName.name} - tooltip click`) + } + /> +
+
+ + alert(`${ensName.name} - tooltip click`) + } + /> +
+
+ + alert(`${ensName.name} - tooltip click`) + } + /> +
+
+ + alert(`${ensName.name} - tooltip click`) + } + /> +
+
+
+
+ 
+                {
+                  ""
+                }
+
+
+ +
+ + alert(`${ensName.name} - tooltip click`) + } + onIconClickOverride={(ensName: ENSName) => + alert(`${ensName.name} - icon click`) + } + /> +
+
+ + alert(`${ensName.name} - tooltip click`) + } + onIconClickOverride={(ensName: ENSName) => + alert(`${ensName.name} - icon click`) + } + /> +
+
+ + alert(`${ensName.name} - tooltip click`) + } + onIconClickOverride={(ensName: ENSName) => + alert(`${ensName.name} - icon click`) + } + /> +
+
+ + alert(`${ensName.name} - tooltip click`) + } + onIconClickOverride={(ensName: ENSName) => + alert(`${ensName.name} - icon click`) + } + /> +
+
+ + alert(`${ensName.name} - tooltip click`) + } + onIconClickOverride={(ensName: ENSName) => + alert(`${ensName.name} - icon click`) + } />
@@ -286,7 +415,167 @@ export default function ReportDocsPage() {
- 
{""}
+ 
{""}
+
+
+ +
+ + alert(`${ensName.name} - badge click`) + } + /> +
+
+ + alert(`${ensName.name} - badge click`) + } + /> +
+
+ + alert(`${ensName.name} - badge click`) + } + /> +
+
+ + alert(`${ensName.name} - badge click`) + } + /> +
+
+ + alert(`${ensName.name} - badge click`) + } + /> +
+
+
+
+
+ 
{""}
+
+
+ +
+ + alert(`${ensName.name} - icon click`) + } + /> +
+
+ + alert(`${ensName.name} - icon click`) + } + /> +
+
+ + alert(`${ensName.name} - icon click`) + } + /> +
+
+ + alert(`${ensName.name} - icon click`) + } + /> +
+
+ + alert(`${ensName.name} - icon click`) + } + /> +
+
+
+
+
+ 
{""}
+
+
+ +
+ + alert(`${ensName.name} - tooltip click`) + } + /> +
+
+ + alert(`${ensName.name} - tooltip click`) + } + /> +
+
+ + alert(`${ensName.name} - tooltip click`) + } + /> +
+
+ + alert(`${ensName.name} - tooltip click`) + } + /> +
+
+ + alert(`${ensName.name} - tooltip click`) + } + /> +
+
+
+
+
+ 
+                {
+                  ""
+                }
+
@@ -294,34 +583,74 @@ export default function ReportDocsPage() { alert(ensName.name)} + onBadgeClickOverride={(ensName: ENSName) => + alert(`${ensName.name} - badge click`) + } + onIconClickOverride={(ensName: ENSName) => + alert(`${ensName.name} - icon click`) + } + onTooltipClickOverride={(ensName: ENSName) => + alert(`${ensName.name} - tooltip click`) + } />
alert(ensName.name)} + onBadgeClickOverride={(ensName: ENSName) => + alert(`${ensName.name} - badge click`) + } + onIconClickOverride={(ensName: ENSName) => + alert(`${ensName.name} - icon click`) + } + onTooltipClickOverride={(ensName: ENSName) => + alert(`${ensName.name} - tooltip click`) + } />
alert(ensName.name)} + onBadgeClickOverride={(ensName: ENSName) => + alert(`${ensName.name} - badge click`) + } + onIconClickOverride={(ensName: ENSName) => + alert(`${ensName.name} - icon click`) + } + onTooltipClickOverride={(ensName: ENSName) => + alert(`${ensName.name} - tooltip click`) + } />
alert(ensName.name)} + onBadgeClickOverride={(ensName: ENSName) => + alert(`${ensName.name} - badge click`) + } + onIconClickOverride={(ensName: ENSName) => + alert(`${ensName.name} - icon click`) + } + onTooltipClickOverride={(ensName: ENSName) => + alert(`${ensName.name} - tooltip click`) + } />
alert(ensName.name)} + onBadgeClickOverride={(ensName: ENSName) => + alert(`${ensName.name} - badge click`) + } + onIconClickOverride={(ensName: ENSName) => + alert(`${ensName.name} - icon click`) + } + onTooltipClickOverride={(ensName: ENSName) => + alert(`${ensName.name} - tooltip click`) + } />
@@ -336,14 +665,12 @@ export default function ReportDocsPage() { alert(ensName.name)} />
alert(ensName.name)} />
@@ -351,21 +678,16 @@ export default function ReportDocsPage() { displayUnnormalizedNames={true} data={getExampleReportData(Rating.alert)} ensName={getExampleReportName(Rating.alert)} - onClickOverride={(ensName: ENSName) => alert(ensName.name)} />
alert(ensName.name)} />
- alert(ensName.name)} - /> +
diff --git a/packages/ens-utils/tsconfig.json b/packages/ens-utils/tsconfig.json index 63e6ab7e2..e6f097149 100644 --- a/packages/ens-utils/tsconfig.json +++ b/packages/ens-utils/tsconfig.json @@ -2,8 +2,8 @@ "compilerOptions": { "target": "ES2020", "lib": ["ES2020", "dom"], - "module": "ES2020", - "moduleResolution": "node", + "module": "ES6", + "moduleResolution": "node10", "strict": true, "sourceMap": true, "esModuleInterop": true, diff --git a/packages/nameguard-react/package.json b/packages/nameguard-react/package.json index 11a742e7b..10fa3c79b 100644 --- a/packages/nameguard-react/package.json +++ b/packages/nameguard-react/package.json @@ -18,7 +18,7 @@ }, "main": "./dist/index.mjs", "module": "./dist/index.mjs", - "types": "./dist/index.d.ts", + "types": "./dist/index.d.mts", "styles": "./dist/index.css", "dependencies": { "@headlessui-float/react": "0.11.4", @@ -43,7 +43,8 @@ "postcss": "8.4.38", "tailwindcss": "3.4.3", "tsup": "^7.2.0", - "typescript": "^5.2.2" + "typescript": "^5.2.2", + "vitest": "1.4.0" }, "publishConfig": { "access": "public" diff --git a/packages/nameguard-react/src/components/LoadingReportIcon/LoadingReportIcon.tsx b/packages/nameguard-react/src/components/LoadingReportIcon/LoadingReportIcon.tsx new file mode 100644 index 000000000..9b3e1466e --- /dev/null +++ b/packages/nameguard-react/src/components/LoadingReportIcon/LoadingReportIcon.tsx @@ -0,0 +1,57 @@ +import React from "react"; + +import { Tooltip } from "../Tooltip/Tooltip"; +import { ENSName } from "@namehash/ens-utils"; +import { RatingIcon, RatingIconSize } from "../Report/RatingIcon"; +import { RatingLoadingIcon } from "../icons/RatingLoadingIcon"; + +type LoadingReportIconProps = { + onClickOverride?: (ensName: ENSName) => void; + size?: RatingIconSize; +} & React.ComponentProps; + +export const LoadingReportIcon = ({ + onClickHandler, + 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 +}: LoadingReportIconProps) => { + return ( + +
+
+ +
+ +
+
+ + Loading report... + +
+ +
+ +
+
+
+ + ); +}; diff --git a/packages/nameguard-react/src/components/Report/LoadingSkeleton.tsx b/packages/nameguard-react/src/components/Report/LoadingSkeleton.tsx index 1c37446b9..71e151d7f 100644 --- a/packages/nameguard-react/src/components/Report/LoadingSkeleton.tsx +++ b/packages/nameguard-react/src/components/Report/LoadingSkeleton.tsx @@ -1,11 +1,11 @@ import React from "react"; -import { RatingIcon, RatingIconSize } from "./RatingIcon"; -import { ReportFormattedDisplayName } from "./ReportFormattedDisplayName"; +import { RatingIconSize } from "./RatingIcon"; import { ReportChangesApplied } from "./ReportChangesApplied"; -import { ParsedName } from "@namehash/ens-utils"; import { RatingLoadingIcon } from "../icons/RatingLoadingIcon"; import { DisplayedName } from "../DisplayedName/DisplayedName"; +import { ReportFormattedDisplayName } from "./ReportFormattedDisplayName"; +import { ParsedName } from "@namehash/ens-utils"; type LoadingSkeletonProps = { parsedName: ParsedName; @@ -38,7 +38,10 @@ export const LoadingSkeleton = ({ parsedName }: LoadingSkeletonProps) => { )}
- +

Inspecting... diff --git a/packages/nameguard-react/src/components/Report/Report.tsx b/packages/nameguard-react/src/components/Report/Report.tsx index ac7aed0bb..5731c28c8 100644 --- a/packages/nameguard-react/src/components/Report/Report.tsx +++ b/packages/nameguard-react/src/components/Report/Report.tsx @@ -116,10 +116,12 @@ export const Report = ({

-
- - -
+ {data && externalLinks && ( +
+ + +
+ )}
{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..5e13ced10 100644 --- a/packages/nameguard-react/src/components/Report/ReportModalNameBadge.tsx +++ b/packages/nameguard-react/src/components/Report/ReportModalNameBadge.tsx @@ -2,7 +2,7 @@ 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 "../.."; interface ReportModalNameBadgeProps { data?: ConsolidatedNameGuardReport; @@ -24,7 +24,9 @@ export function ReportModalNameBadge({ ensName={ensName} displayUnnormalizedNames={true} hadLoadingError={hadLoadingError} - onClickOverride={(ensName: ENSName) => openModal(ensName.name)} + onIconClickOverride={(ensName: ENSName) => openModal(ensName.name)} + onBadgeClickOverride={(ensName: ENSName) => openModal(ensName.name)} + onTooltipClickOverride={(ensName: ENSName) => openModal(ensName.name)} /> ); } diff --git a/packages/nameguard-react/src/components/ReportBadge/index.tsx b/packages/nameguard-react/src/components/ReportBadge/index.tsx index 2ac20e008..eb3c32c00 100644 --- a/packages/nameguard-react/src/components/ReportBadge/index.tsx +++ b/packages/nameguard-react/src/components/ReportBadge/index.tsx @@ -1,17 +1,14 @@ "use client"; import { type ConsolidatedNameGuardReport } from "@namehash/nameguard"; +import { ENSName } from "@namehash/ens-utils"; import React, { useEffect } from "react"; import cc from "classcat"; import { ReportIcon } from "../ReportIcon/index"; -import { - RatingLoadingIcon, - RatingIconSize, - Tooltip, - DisplayedName, -} from "../.."; -import { UnknownReportIcon } from "../UnknownReportIcon/UnknownReportIcon"; -import { ENSName } from "@namehash/ens-utils"; +import { DisplayedName, RatingIconSize } from "../.."; +import { redirectToViewNameReportURL } from "../../utils/url"; +import { ReportUnknownIcon } from "../ReportUnknownIcon/ReportUnknownIcon"; +import { ReportLoadingIcon } from "../ReportLoadingIcon/ReportLoadingIcon"; interface ReportBadgeProps { /* @@ -27,7 +24,10 @@ interface ReportBadgeProps { hadLoadingError?: boolean; displayUnnormalizedNames?: boolean; - onClickOverride?: (ensName: ENSName) => void; + + onIconClickOverride?: (ensName: ENSName) => void; + onBadgeClickOverride?: (ensName: ENSName) => void; + onTooltipClickOverride?: (ensName: ENSName) => void; /* Below number is a measure of the maximum width that the ensName @@ -38,24 +38,51 @@ interface ReportBadgeProps { maxDisplayWidth?: number; } +const DEFAULT_MAX_ENSNAME_DISPLAY_WIDTH = 200; + +enum ClickHandlerFor { + badge, + icon, + tooltip, +} + export function ReportBadge({ data, ensName, - maxDisplayWidth, - onClickOverride, + onIconClickOverride, + onBadgeClickOverride, + onTooltipClickOverride, hadLoadingError = false, displayUnnormalizedNames = false, + maxDisplayWidth = 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 onClickHandler = (clickHandlerFor: ClickHandlerFor) => { + switch (clickHandlerFor) { + case ClickHandlerFor.badge: + if (onBadgeClickOverride) { + onBadgeClickOverride(ensName); + } else { + redirectToViewNameReportURL(ensName); + } + break; + case ClickHandlerFor.icon: + if (onIconClickOverride) { + onIconClickOverride(ensName); + } else { + redirectToViewNameReportURL(ensName); + } + break; + case ClickHandlerFor.tooltip: + if (onTooltipClickOverride) { + onTooltipClickOverride(ensName); + } else { + redirectToViewNameReportURL(ensName); + } + break; } }; @@ -70,7 +97,12 @@ export function ReportBadge({ }, [data]); return ( - -
- + size={RatingIconSize.micro} + onIconClickOverride={() => { + onClickHandler(ClickHandlerFor.icon); + }} + onTooltipClickOverride={() => { + onClickHandler(ClickHandlerFor.tooltip); + }} + /> ) : !data ? ( // Loading Rating - { + onClickHandler(ClickHandlerFor.icon); + }} + onTooltipClickOverride={() => { + onClickHandler(ClickHandlerFor.tooltip); + }} /> ) : ( // Known Rating {}} + className="cursor-pointer" size={RatingIconSize.micro} - className={"cursor-pointer"} hadLoadingError={hadLoadingError} + onIconClickOverride={() => { + onClickHandler(ClickHandlerFor.icon); + }} + onTooltipClickOverride={() => { + onClickHandler(ClickHandlerFor.tooltip); + }} /> )} diff --git a/packages/nameguard-react/src/components/ReportIcon/index.tsx b/packages/nameguard-react/src/components/ReportIcon/index.tsx index 2edf006b6..0b3edc00e 100644 --- a/packages/nameguard-react/src/components/ReportIcon/index.tsx +++ b/packages/nameguard-react/src/components/ReportIcon/index.tsx @@ -9,13 +9,15 @@ import cc from "classcat"; import { ENSName } from "@namehash/ens-utils"; import { Tooltip } from "../Tooltip/Tooltip"; -import { RatingLoadingIcon } from "../icons/RatingLoadingIcon"; import { RatingIcon, RatingIconSize } from "../Report/RatingIcon"; import { checkResultCodeTextColor, ratingTextColor } from "../../utils/text"; -import { UnknownReportIcon } from "../UnknownReportIcon/UnknownReportIcon"; +import { ReportUnknownIcon } from "../ReportUnknownIcon/ReportUnknownIcon"; +import { ReportLoadingIcon } from "../ReportLoadingIcon/ReportLoadingIcon"; +import { redirectToViewNameReportURL } from "../../utils/url"; -type ReportIconProps = { - onClickOverride?: (ensName: ENSName) => void; +type ReportShieldProps = { + onIconClickOverride?: (ensName: ENSName) => void; + onTooltipClickOverride?: (ensName: ENSName) => void; /* The data prop is the consolidated report for the ensName. @@ -38,57 +40,77 @@ declare global { } } +enum ClickHandlerFor { + icon, + tooltip, +} + export function ReportIcon({ - ensName, data, - onClickOverride, + ensName, hadLoadingError, + onIconClickOverride, + onTooltipClickOverride, size = RatingIconSize.small, /* - Props are applied to the shield icon which is the onHover trigger element + Props are applied to the Report Icon triggeer 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. + https://nameguard.io/docs/report and see the ReportIcon docs. Any + additional props received are passed to the Report Icon that when + hovered, displays the tooltip with the report information. */ ...props -}: ReportIconProps) { - const onClickHandler = () => { - if (onClickOverride) onClickOverride(ensName); - else { - window.location.href = `https://nameguard.io/inspect/${encodeURIComponent( - ensName.name, - )}`; +}: ReportShieldProps) { + const onClickHandler = (clickHandlerFor: ClickHandlerFor) => { + switch (clickHandlerFor) { + case ClickHandlerFor.icon: + if (onIconClickOverride) { + onIconClickOverride(ensName); + } else { + redirectToViewNameReportURL(ensName); + } + break; + case ClickHandlerFor.tooltip: + if (onTooltipClickOverride) { + onTooltipClickOverride(ensName); + } else { + redirectToViewNameReportURL(ensName); + } + break; } }; if (hadLoadingError) { return ( - -
- -
- + onIconClickOverride={(e?: React.MouseEvent) => { + if (e) e.stopPropagation(); + onClickHandler(ClickHandlerFor.icon); + }} + onTooltipClickOverride={(e?: React.MouseEvent) => { + if (e) e.stopPropagation(); + onClickHandler(ClickHandlerFor.tooltip); + }} + /> ); } if (!data) { return ( - { + if (e) e.stopPropagation(); + onClickHandler(ClickHandlerFor.icon); + }} + onTooltipClickOverride={(e?: React.MouseEvent) => { + if (e) e.stopPropagation(); + onClickHandler(ClickHandlerFor.tooltip); + }} /> ); } @@ -113,7 +135,10 @@ export function ReportIcon({ { + if (e) e.stopPropagation(); + onClickHandler(ClickHandlerFor.icon); + }} className="cursor-pointer" rating={rating} size={size} @@ -148,7 +173,10 @@ export function ReportIcon({
diff --git a/packages/nameguard-react/src/components/Share/Share.tsx b/packages/nameguard-react/src/components/Share/Share.tsx index a6308d389..cd7095332 100644 --- a/packages/nameguard-react/src/components/Share/Share.tsx +++ b/packages/nameguard-react/src/components/Share/Share.tsx @@ -12,16 +12,17 @@ import cc from "classcat"; import { Tooltip } from "../Tooltip/Tooltip"; import { CheckResultCode } from "@namehash/nameguard"; import { checkResultCodeTextColor } from "../../utils/text"; +import { viewNameReportURL } from "../../utils/url"; import { DisplayedName } from "../DisplayedName/DisplayedName"; import { buildENSName } from "@namehash/ens-utils"; type ShareProps = { - name?: string; + name: string; }; function createTwitterLink(name: string) { const tweetText = `Check out the NameGuard Report for ${name}\n`; - const url = `https://nameguard.io/inspect/${encodeURIComponent(name)}`; + const url = viewNameReportURL(buildENSName(name)).href; return `https://twitter.com/intent/tweet?text=${encodeURIComponent( tweetText, @@ -46,16 +47,14 @@ export function Share({ name }: ShareProps) { const twitterLink = createTwitterLink(name); const telegramLink = createTelegramLink( - `https://nameguard.io/inspect/${encodeURIComponent(name)}`, + viewNameReportURL(buildENSName(name)).href, ); const emailLink = createMailToLink( `NameGuard Report for ${name}`, - `Check this out!\nhttps://nameguard.io/inspect/${encodeURIComponent(name)}`, + `Check this out!\n${viewNameReportURL(buildENSName(name)).href}`, ); const copyLinkToClipboard = () => { - navigator.clipboard.writeText( - `https://nameguard.io/inspect/${encodeURIComponent(name)}`, - ); + navigator.clipboard.writeText(viewNameReportURL(buildENSName(name)).href); toast.success("Link copied to clipboard", { icon: ( {name && ( - <> - - + )}
diff --git a/packages/nameguard-react/src/components/UnknownReportIcon/UnknownReportIcon.tsx b/packages/nameguard-react/src/components/UnknownReportIcon/UnknownReportIcon.tsx deleted file mode 100644 index 09e307287..000000000 --- a/packages/nameguard-react/src/components/UnknownReportIcon/UnknownReportIcon.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import React from "react"; - -import { RatingIconSize } from "../Report/RatingIcon"; -import { Tooltip } from "../Tooltip/Tooltip"; -import { RatingUnknownIcon } from "../icons/RatingUnknownIcon"; - -type UnknownShieldProps = { - size?: RatingIconSize; -} & React.ComponentProps<"svg">; - -export const UnknownReportIcon = ({ - 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 -}: UnknownShieldProps) => { - return ( - -
-
- -
- -
-
- - Unable to analyze - -
- -
- Refresh the page to try again. -
-
-
- - ); -}; diff --git a/packages/nameguard-react/src/components/icons/RatingLoadingSmallIcon.tsx b/packages/nameguard-react/src/components/icons/RatingLoadingSmallIcon.tsx index 1810be571..774546bfe 100644 --- a/packages/nameguard-react/src/components/icons/RatingLoadingSmallIcon.tsx +++ b/packages/nameguard-react/src/components/icons/RatingLoadingSmallIcon.tsx @@ -15,8 +15,8 @@ export const RatingLoadingSmallIcon = ( =18.0.0} peerDependencies: @@ -5224,11 +5236,11 @@ packages: dependencies: '@typescript-eslint/scope-manager': 7.2.0 '@typescript-eslint/types': 7.2.0 - '@typescript-eslint/typescript-estree': 7.2.0(typescript@5.4.5) + '@typescript-eslint/typescript-estree': 7.2.0(typescript@5.5.3) '@typescript-eslint/visitor-keys': 7.2.0 debug: 4.3.4 eslint: 8.56.0 - typescript: 5.4.5 + typescript: 5.5.3 transitivePeerDependencies: - supports-color dev: true @@ -5311,6 +5323,28 @@ packages: - supports-color dev: true + /@typescript-eslint/typescript-estree@7.2.0(typescript@5.5.3): + resolution: {integrity: sha512-cyxS5WQQCoBwSakpMrvMXuMDEbhOo9bNHHrNcEWis6XHx6KF518tkF1wBvKIn/tpq5ZpUYK7Bdklu8qY0MsFIA==} + engines: {node: ^16.0.0 || >=18.0.0} + peerDependencies: + typescript: '*' + peerDependenciesMeta: + typescript: + optional: true + dependencies: + '@typescript-eslint/types': 7.2.0 + '@typescript-eslint/visitor-keys': 7.2.0 + debug: 4.3.4 + globby: 11.1.0 + is-glob: 4.0.3 + minimatch: 9.0.3 + semver: 7.6.2 + ts-api-utils: 1.3.0(typescript@5.5.3) + typescript: 5.5.3 + transitivePeerDependencies: + - supports-color + dev: true + /@typescript-eslint/visitor-keys@7.2.0: resolution: {integrity: sha512-c6EIQRHhcpl6+tO8EMR+kjkkV+ugUNXOmeASA1rlzkd8EPIriavpWoiEz1HR/VLhbVIdhqnV6E7JZm00cBDx2A==} engines: {node: ^16.0.0 || >=18.0.0} @@ -5838,6 +5872,22 @@ packages: postcss-value-parser: 4.2.0 dev: true + /autoprefixer@10.4.19(postcss@8.4.39): + resolution: {integrity: sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==} + engines: {node: ^10 || ^12 || >=14} + hasBin: true + peerDependencies: + postcss: ^8.1.0 + dependencies: + browserslist: 4.23.0 + caniuse-lite: 1.0.30001620 + fraction.js: 4.3.7 + normalize-range: 0.1.2 + picocolors: 1.0.1 + postcss: 8.4.39 + postcss-value-parser: 4.2.0 + dev: true + /available-typed-arrays@1.0.7: resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==} engines: {node: '>= 0.4'} @@ -7060,7 +7110,7 @@ packages: - supports-color dev: true - /eslint-config-next@14.2.3(eslint@8.56.0)(typescript@5.4.5): + /eslint-config-next@14.2.3(eslint@8.56.0)(typescript@5.5.3): resolution: {integrity: sha512-ZkNztm3Q7hjqvB1rRlOX8P9E/cXRL9ajRcs8jufEtwMfTVYRqnmtnaSu57QqHyBlovMuiB8LEzfLBkh5RYV6Fg==} peerDependencies: eslint: ^7.23.0 || ^8.0.0 @@ -7071,7 +7121,7 @@ packages: dependencies: '@next/eslint-plugin-next': 14.2.3 '@rushstack/eslint-patch': 1.10.2 - '@typescript-eslint/parser': 7.2.0(eslint@8.56.0)(typescript@5.4.5) + '@typescript-eslint/parser': 7.2.0(eslint@8.56.0)(typescript@5.5.3) eslint: 8.56.0 eslint-import-resolver-node: 0.3.9 eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.2.0)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.56.0) @@ -7079,7 +7129,7 @@ packages: eslint-plugin-jsx-a11y: 6.8.0(eslint@8.56.0) eslint-plugin-react: 7.34.1(eslint@8.56.0) eslint-plugin-react-hooks: 4.6.2(eslint@8.56.0) - typescript: 5.4.5 + typescript: 5.5.3 transitivePeerDependencies: - eslint-import-resolver-webpack - supports-color @@ -8040,6 +8090,7 @@ packages: /glob@7.2.3: resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==} + deprecated: Glob versions prior to v9 are no longer supported dependencies: fs.realpath: 1.0.0 inflight: 1.0.6 @@ -9834,17 +9885,6 @@ packages: engines: {node: '>= 0.4'} dev: true - /postcss-import@15.1.0(postcss@8.4.38): - resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==} - engines: {node: '>=14.0.0'} - peerDependencies: - postcss: ^8.0.0 - dependencies: - postcss: 8.4.38 - postcss-value-parser: 4.2.0 - read-cache: 1.0.0 - resolve: 1.22.8 - /postcss-import@15.1.0(postcss@8.4.39): resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==} engines: {node: '>=14.0.0'} @@ -9855,16 +9895,6 @@ packages: postcss-value-parser: 4.2.0 read-cache: 1.0.0 resolve: 1.22.8 - dev: true - - /postcss-js@4.0.1(postcss@8.4.38): - resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==} - engines: {node: ^12 || ^14 || >= 16} - peerDependencies: - postcss: ^8.4.21 - dependencies: - camelcase-css: 2.0.1 - postcss: 8.4.38 /postcss-js@4.0.1(postcss@8.4.39): resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==} @@ -9874,7 +9904,6 @@ packages: dependencies: camelcase-css: 2.0.1 postcss: 8.4.39 - dev: true /postcss-load-config@4.0.2(postcss@8.4.38): resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==} @@ -9891,6 +9920,7 @@ packages: lilconfig: 3.1.1 postcss: 8.4.38 yaml: 2.4.2 + dev: true /postcss-load-config@4.0.2(postcss@8.4.39): resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==} @@ -9907,16 +9937,6 @@ packages: lilconfig: 3.1.1 postcss: 8.4.39 yaml: 2.4.2 - dev: true - - /postcss-nested@6.0.1(postcss@8.4.38): - resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==} - engines: {node: '>=12.0'} - peerDependencies: - postcss: ^8.2.14 - dependencies: - postcss: 8.4.38 - postcss-selector-parser: 6.0.16 /postcss-nested@6.0.1(postcss@8.4.39): resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==} @@ -9926,7 +9946,6 @@ packages: dependencies: postcss: 8.4.39 postcss-selector-parser: 6.0.16 - dev: true /postcss-selector-parser@6.0.16: resolution: {integrity: sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==} @@ -9953,6 +9972,7 @@ packages: nanoid: 3.3.7 picocolors: 1.0.1 source-map-js: 1.2.0 + dev: true /postcss@8.4.39: resolution: {integrity: sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==} @@ -9961,7 +9981,6 @@ packages: nanoid: 3.3.7 picocolors: 1.0.1 source-map-js: 1.2.0 - dev: true /preferred-pm@3.1.3: resolution: {integrity: sha512-MkXsENfftWSRpzCzImcp4FRsCc3y1opwB73CfCNWyzMqArju2CrlMHlqB7VexKiPEOjGMbttv1r9fSCn5S610w==} @@ -11211,11 +11230,11 @@ packages: normalize-path: 3.0.0 object-hash: 3.0.0 picocolors: 1.0.1 - postcss: 8.4.38 - postcss-import: 15.1.0(postcss@8.4.38) - postcss-js: 4.0.1(postcss@8.4.38) - postcss-load-config: 4.0.2(postcss@8.4.38) - postcss-nested: 6.0.1(postcss@8.4.38) + postcss: 8.4.39 + postcss-import: 15.1.0(postcss@8.4.39) + postcss-js: 4.0.1(postcss@8.4.39) + postcss-load-config: 4.0.2(postcss@8.4.39) + postcss-nested: 6.0.1(postcss@8.4.39) postcss-selector-parser: 6.0.16 resolve: 1.22.8 sucrase: 3.35.0 @@ -11405,6 +11424,15 @@ packages: typescript: 5.4.5 dev: true + /ts-api-utils@1.3.0(typescript@5.5.3): + resolution: {integrity: sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==} + engines: {node: '>=16'} + peerDependencies: + typescript: '>=4.2.0' + dependencies: + typescript: 5.5.3 + dev: true + /ts-dedent@2.2.0: resolution: {integrity: sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==} engines: {node: '>=6.10'} From 83a63d5b757d506d195b7b05cd387d665fa79d68 Mon Sep 17 00:00:00 2001 From: FrancoAguzzi Date: Sat, 1 Jun 2024 16:39:30 -0300 Subject: [PATCH 02/26] feat: [SC-24987] create LoadingReportIcon --- .../LoadingReportIcon/LoadingReportIcon.tsx | 57 ------------------- 1 file changed, 57 deletions(-) delete mode 100644 packages/nameguard-react/src/components/LoadingReportIcon/LoadingReportIcon.tsx diff --git a/packages/nameguard-react/src/components/LoadingReportIcon/LoadingReportIcon.tsx b/packages/nameguard-react/src/components/LoadingReportIcon/LoadingReportIcon.tsx deleted file mode 100644 index 9b3e1466e..000000000 --- a/packages/nameguard-react/src/components/LoadingReportIcon/LoadingReportIcon.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import React from "react"; - -import { Tooltip } from "../Tooltip/Tooltip"; -import { ENSName } from "@namehash/ens-utils"; -import { RatingIcon, RatingIconSize } from "../Report/RatingIcon"; -import { RatingLoadingIcon } from "../icons/RatingLoadingIcon"; - -type LoadingReportIconProps = { - onClickOverride?: (ensName: ENSName) => void; - size?: RatingIconSize; -} & React.ComponentProps; - -export const LoadingReportIcon = ({ - onClickHandler, - 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 -}: LoadingReportIconProps) => { - return ( - -
-
- -
- -
-
- - Loading report... - -
- -
- -
-
-
- - ); -}; From cf7e28703fdf7e93dbe809f0551f6e4c0bfc1998 Mon Sep 17 00:00:00 2001 From: FrancoAguzzi Date: Wed, 5 Jun 2024 09:57:53 -0300 Subject: [PATCH 03/26] refactor: add getNameGuardURLForEnsName function to NameGuard SDK --- apps/examples.nameguard.io/index.d.ts | 1 + packages/ens-utils/.gitignore | 3 + packages/nameguard-react/.gitignore | 3 + .../LoadingReportIcon/ReportLoadingIcon.tsx | 57 ++++++++++++++++ .../ReportLoadingIcon/ReportLoadingIcon.tsx | 65 ++++++++++++++++++ .../ReportUnknownIcon/ReportUnknownIcon.tsx | 66 +++++++++++++++++++ .../nameguard-react/src/utils/url.test.ts | 18 +++++ packages/nameguard-react/src/utils/url.ts | 11 ++++ 8 files changed, 224 insertions(+) create mode 100644 apps/examples.nameguard.io/index.d.ts create mode 100644 packages/ens-utils/.gitignore create mode 100644 packages/nameguard-react/.gitignore create mode 100644 packages/nameguard-react/src/components/LoadingReportIcon/ReportLoadingIcon.tsx create mode 100644 packages/nameguard-react/src/components/ReportLoadingIcon/ReportLoadingIcon.tsx create mode 100644 packages/nameguard-react/src/components/ReportUnknownIcon/ReportUnknownIcon.tsx create mode 100644 packages/nameguard-react/src/utils/url.test.ts create mode 100644 packages/nameguard-react/src/utils/url.ts diff --git a/apps/examples.nameguard.io/index.d.ts b/apps/examples.nameguard.io/index.d.ts new file mode 100644 index 000000000..a08b613da --- /dev/null +++ b/apps/examples.nameguard.io/index.d.ts @@ -0,0 +1 @@ +declare module "@namehash/nameguard-react"; diff --git a/packages/ens-utils/.gitignore b/packages/ens-utils/.gitignore new file mode 100644 index 000000000..c20a41dca --- /dev/null +++ b/packages/ens-utils/.gitignore @@ -0,0 +1,3 @@ + +# dependencies +/node_modules diff --git a/packages/nameguard-react/.gitignore b/packages/nameguard-react/.gitignore new file mode 100644 index 000000000..c20a41dca --- /dev/null +++ b/packages/nameguard-react/.gitignore @@ -0,0 +1,3 @@ + +# dependencies +/node_modules diff --git a/packages/nameguard-react/src/components/LoadingReportIcon/ReportLoadingIcon.tsx b/packages/nameguard-react/src/components/LoadingReportIcon/ReportLoadingIcon.tsx new file mode 100644 index 000000000..6c32818a9 --- /dev/null +++ b/packages/nameguard-react/src/components/LoadingReportIcon/ReportLoadingIcon.tsx @@ -0,0 +1,57 @@ +import React from "react"; + +import { Tooltip } from "../Tooltip/Tooltip"; +import { ENSName } from "@namehash/ens-utils"; +import { RatingIconSize } from "../Report/RatingIcon"; +import { RatingLoadingIcon } from "../icons/RatingLoadingIcon"; + +type LoadingReportIconProps = { + onClickHandler?: (ensName: ENSName) => void; + size?: RatingIconSize; +} & React.ComponentProps<"svg">; + +export const LoadingReportIcon = ({ + onClickHandler, + 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 +}: LoadingReportIconProps) => { + return ( + +
+
+ +
+ +
+
+ + Loading report... + +
+ +
+ +
+
+
+ + ); +}; diff --git a/packages/nameguard-react/src/components/ReportLoadingIcon/ReportLoadingIcon.tsx b/packages/nameguard-react/src/components/ReportLoadingIcon/ReportLoadingIcon.tsx new file mode 100644 index 000000000..929ea4aef --- /dev/null +++ b/packages/nameguard-react/src/components/ReportLoadingIcon/ReportLoadingIcon.tsx @@ -0,0 +1,65 @@ +import React from "react"; + +import { Tooltip } from "../Tooltip/Tooltip"; +import { RatingIconSize } from "../Report/RatingIcon"; +import { RatingLoadingIcon } from "../icons/RatingLoadingIcon"; + +type ReportLoadingIconProps = { + onIconClickOverride?: (mouseEvent: React.MouseEvent) => void; + onTooltipClickOverride?: (mouseEvent: React.MouseEvent) => void; + size?: RatingIconSize; +} & React.ComponentProps<"svg">; + +export const ReportLoadingIcon = ({ + onIconClickOverride, + onTooltipClickOverride, + size = RatingIconSize.small, + + /* + Props are applied to the RatingLoadingIcon trigger 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 received are passed to the RatingLoadingIcon + that when hovered, displays the tooltip with the report information. + */ + ...props +}: ReportLoadingIconProps) => { + return ( + { + if (e) e.stopPropagation(); + onIconClickOverride(e); + }, + ...props, + })} + > +
+
+ +
+ +
+
+ + Loading report... + +
+ +
+ +
+
+
+ + ); +}; diff --git a/packages/nameguard-react/src/components/ReportUnknownIcon/ReportUnknownIcon.tsx b/packages/nameguard-react/src/components/ReportUnknownIcon/ReportUnknownIcon.tsx new file mode 100644 index 000000000..c902cf927 --- /dev/null +++ b/packages/nameguard-react/src/components/ReportUnknownIcon/ReportUnknownIcon.tsx @@ -0,0 +1,66 @@ +import React from "react"; + +import { Tooltip } from "../Tooltip/Tooltip"; +import { RatingIconSize } from "../Report/RatingIcon"; +import { RatingUnknownIcon } from "../icons/RatingUnknownIcon"; + +type ReportUnknownIconProps = { + onIconClickOverride?: (mouseEvent: React.MouseEvent) => void; + onTooltipClickOverride?: (mouseEvent: React.MouseEvent) => void; + size?: RatingIconSize; +} & React.ComponentProps<"svg">; + +export const ReportUnknownIcon = ({ + onIconClickOverride, + onTooltipClickOverride, + size = RatingIconSize.small, + + /* + Props are applied to the RatingUnknownIcon trigger 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 received are passed to the RatingUnknownIcon + that when hovered, displays the tooltip with the report information. + */ + ...props +}: ReportUnknownIconProps) => { + return ( + { + if (e) e.stopPropagation(); + onIconClickOverride(e); + }, + ...props, + })} + > +
+
+ +
+ +
+
+ + Error loading report + +
+ +
+ +
+
+
+ + ); +}; diff --git a/packages/nameguard-react/src/utils/url.test.ts b/packages/nameguard-react/src/utils/url.test.ts new file mode 100644 index 000000000..5fe724de1 --- /dev/null +++ b/packages/nameguard-react/src/utils/url.test.ts @@ -0,0 +1,18 @@ +import { buildENSName } from "@namehash/ens-utils"; +import { describe, it, expect } from "vitest"; +import { viewNameReportURL } from "./url"; + +describe("viewNameReportURL", () => { + it("should return correct NameGuard inspect name page URL for notrab.eth", () => { + const result = viewNameReportURL(buildENSName("notrab.eth")).href; + const expectedResult = "https://nameguard.io/inspect/notrab.eth"; + + expect(result).toBe(expectedResult); + }); + it("should return correct NameGuard inspect name page URL for 🐈‍⬛.eth", () => { + const result = viewNameReportURL(buildENSName("🐈‍⬛.eth")).href; + const expectedResult = `https://nameguard.io/inspect/%F0%9F%90%88%E2%80%8D%E2%AC%9B.eth`; + + expect(result).toBe(expectedResult); + }); +}); diff --git a/packages/nameguard-react/src/utils/url.ts b/packages/nameguard-react/src/utils/url.ts new file mode 100644 index 000000000..0e6e0d94b --- /dev/null +++ b/packages/nameguard-react/src/utils/url.ts @@ -0,0 +1,11 @@ +import { ENSName } from "@namehash/ens-utils"; + +export function viewNameReportURL(ensName: ENSName): URL { + return new URL( + `https://nameguard.io/inspect/${encodeURIComponent(ensName.name)}`, + ); +} + +export function redirectToViewNameReportURL(ensName: ENSName) { + window.location.href = viewNameReportURL(ensName).href; +} From 6c1d66e197d8c70f65222c616d8c11dfb757c0b6 Mon Sep 17 00:00:00 2001 From: FrancoAguzzi Date: Wed, 5 Jun 2024 09:57:53 -0300 Subject: [PATCH 04/26] refactor: add getNameGuardURLForEnsName function to NameGuard SDK --- .changeset/fair-pumas-chew.md | 6 ++++ apps/examples.nameguard.io/package.json | 1 + .../LoadingReportIcon/ReportLoadingIcon.tsx | 32 ++++++++++------- .../src/components/ReportBadge/index.tsx | 4 +-- packages/nameguard-sdk/package.json | 6 +++- packages/nameguard-sdk/src/index.test.ts | 2 +- packages/nameguard-sdk/src/index.ts | 36 ++++++++++--------- packages/nameguard-sdk/src/utils.test.ts | 19 +++++++++- packages/nameguard-sdk/src/utils.ts | 6 ++++ packages/nameguard-sdk/tsconfig.json | 2 +- pnpm-lock.yaml | 36 ++++++++----------- 11 files changed, 93 insertions(+), 57 deletions(-) create mode 100644 .changeset/fair-pumas-chew.md diff --git a/.changeset/fair-pumas-chew.md b/.changeset/fair-pumas-chew.md new file mode 100644 index 000000000..c69a852e5 --- /dev/null +++ b/.changeset/fair-pumas-chew.md @@ -0,0 +1,6 @@ +--- +"@namehash/nameguard-react": minor +"@namehash/nameguard": minor +--- + +Use new function getNameGuardURLForENSname from @namehash/nameguard where possible diff --git a/apps/examples.nameguard.io/package.json b/apps/examples.nameguard.io/package.json index e82f83979..5b6f6338b 100644 --- a/apps/examples.nameguard.io/package.json +++ b/apps/examples.nameguard.io/package.json @@ -13,6 +13,7 @@ "@namehash/ens-utils": "1.12.1", "@namehash/nameguard": "workspace:*", "@namehash/nameguard-react": "workspace:*", + "@namehash/ens-utils": "workspace:*", "classcat": "5.0.4", "next": "14.1.0", "react": "^18", diff --git a/packages/nameguard-react/src/components/LoadingReportIcon/ReportLoadingIcon.tsx b/packages/nameguard-react/src/components/LoadingReportIcon/ReportLoadingIcon.tsx index 6c32818a9..47142826b 100644 --- a/packages/nameguard-react/src/components/LoadingReportIcon/ReportLoadingIcon.tsx +++ b/packages/nameguard-react/src/components/LoadingReportIcon/ReportLoadingIcon.tsx @@ -1,38 +1,43 @@ import React from "react"; import { Tooltip } from "../Tooltip/Tooltip"; -import { ENSName } from "@namehash/ens-utils"; -import { RatingIconSize } from "../Report/RatingIcon"; +import { RatingIcon, RatingIconSize } from "../Report/RatingIcon"; import { RatingLoadingIcon } from "../icons/RatingLoadingIcon"; -type LoadingReportIconProps = { - onClickHandler?: (ensName: ENSName) => void; +type ReportLoadingIconProps = { + onIconClickOverride?: (mouseEvent: React.MouseEvent) => void; + onTooltipClickOverride?: (mouseEvent: React.MouseEvent) => void; size?: RatingIconSize; } & React.ComponentProps<"svg">; -export const LoadingReportIcon = ({ - onClickHandler, +export const ReportLoadingIcon = ({ + onIconClickOverride, + onTooltipClickOverride, size = RatingIconSize.small, /* - Props are applied to the shield icon which is the onHover trigger element + Props are applied to the RatingLoadingIcon trigger 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. + additional props received are passed to the RatingLoadingIcon + that when hovered, displays the tooltip with the report information. */ ...props -}: LoadingReportIconProps) => { +}: ReportLoadingIconProps) => { return ( { + if (e) e.stopPropagation(); + onIconClickOverride(e); + }, ...props, })} >
- +
@@ -45,7 +50,10 @@ export const LoadingReportIcon = ({
diff --git a/packages/nameguard-react/src/components/ReportBadge/index.tsx b/packages/nameguard-react/src/components/ReportBadge/index.tsx index eb3c32c00..aab5c6648 100644 --- a/packages/nameguard-react/src/components/ReportBadge/index.tsx +++ b/packages/nameguard-react/src/components/ReportBadge/index.tsx @@ -1,12 +1,12 @@ "use client"; +import { DisplayedName, RatingIconSize } from "../.."; +import { redirectToViewNameReportURL } from "../../utils/url"; import { type ConsolidatedNameGuardReport } from "@namehash/nameguard"; import { ENSName } from "@namehash/ens-utils"; import React, { useEffect } from "react"; import cc from "classcat"; import { ReportIcon } from "../ReportIcon/index"; -import { DisplayedName, RatingIconSize } from "../.."; -import { redirectToViewNameReportURL } from "../../utils/url"; import { ReportUnknownIcon } from "../ReportUnknownIcon/ReportUnknownIcon"; import { ReportLoadingIcon } from "../ReportLoadingIcon/ReportLoadingIcon"; diff --git a/packages/nameguard-sdk/package.json b/packages/nameguard-sdk/package.json index 4bbfa4266..4b3b8ab4c 100644 --- a/packages/nameguard-sdk/package.json +++ b/packages/nameguard-sdk/package.json @@ -12,7 +12,10 @@ "main": "./dist/index.js", "module": "./dist/index.js", "types": "./dist/index.d.ts", - "files": ["dist", "README.md"], + "files": [ + "dist", + "README.md" + ], "sideEffects": false, "scripts": { "build": "tsup", @@ -26,6 +29,7 @@ "vitest": "1.4.0" }, "dependencies": { + "@namehash/ens-utils": "workspace:*", "whatwg-fetch": "3.6.19" }, "publishConfig": { diff --git a/packages/nameguard-sdk/src/index.test.ts b/packages/nameguard-sdk/src/index.test.ts index fd3f6bebf..d400ca8f8 100644 --- a/packages/nameguard-sdk/src/index.test.ts +++ b/packages/nameguard-sdk/src/index.test.ts @@ -1,6 +1,6 @@ import { describe, it, expect } from "vitest"; -import { createClient } from "."; +import { createClient } from "./index.js"; const nameguard = createClient({ // undefined will default to the production endpoint diff --git a/packages/nameguard-sdk/src/index.ts b/packages/nameguard-sdk/src/index.ts index 76f44f93a..30e3ecd77 100644 --- a/packages/nameguard-sdk/src/index.ts +++ b/packages/nameguard-sdk/src/index.ts @@ -1,5 +1,7 @@ import "whatwg-fetch"; -import { isEthereumAddress, isTokenId, isKeccak256Hash } from "./utils"; +import { isEthereumAddress, isTokenId, isKeccak256Hash } from "./utils.js"; + +export { getNameGuardURLForENSname } from "./utils.js"; const ETH_TLD = "eth"; @@ -436,7 +438,7 @@ export interface SecurePrimaryNameResult { class NameGuardError extends Error { constructor( public status: number, - message?: string + message?: string, ) { super(message); } @@ -505,7 +507,7 @@ class NameGuard { */ public inspectName( name: string, - options?: InspectNameOptions + options?: InspectNameOptions, ): Promise { const network_name = options?.network || this.network; @@ -531,11 +533,11 @@ class NameGuard { */ public bulkInspectNames( names: string[], - options?: InspectNameOptions + options?: InspectNameOptions, ): Promise { if (names.length > MAX_BULK_INSPECTION_NAMES) { throw new Error( - `Bulk inspection of more than ${MAX_BULK_INSPECTION_NAMES} names at a time is not supported.` + `Bulk inspection of more than ${MAX_BULK_INSPECTION_NAMES} names at a time is not supported.`, ); } @@ -562,7 +564,7 @@ class NameGuard { */ public async inspectNamehash( namehash: string, - options?: InspectNamehashOptions + options?: InspectNamehashOptions, ): Promise { if (!isKeccak256Hash(namehash)) { throw new Error("Invalid Keccak256 hash format for namehash."); @@ -572,7 +574,7 @@ class NameGuard { const url = new URL( `inspect-namehash/${network}/${namehash}`, - this.endpoint + this.endpoint, ); const response = await fetch(url); @@ -580,7 +582,7 @@ class NameGuard { if (!response.ok) { throw new NameGuardError( response.status, - `Failed to inspect namehash ${namehash} using the network ${network}.` + `Failed to inspect namehash ${namehash} using the network ${network}.`, ); } @@ -617,7 +619,7 @@ class NameGuard { */ public async inspectLabelhash( labelhash: string, - options?: InspectLabelhashOptions + options?: InspectLabelhashOptions, ): Promise { if (!isKeccak256Hash(labelhash)) { throw new Error("Invalid Keccak256 hash format for labelhash."); @@ -659,11 +661,11 @@ class NameGuard { */ public getSecurePrimaryName( address: string, - options?: SecurePrimaryNameOptions + options?: SecurePrimaryNameOptions, ): Promise { if (!isEthereumAddress(address)) { throw new Error( - `The provided address: "${address}" is not in a valid Ethereum address format.` + `The provided address: "${address}" is not in a valid Ethereum address format.`, ); } @@ -687,23 +689,23 @@ class NameGuard { contract_address: string, token_id: string, fields: FieldsWithRequiredTitle, - options?: FakeEthNameOptions + options?: FakeEthNameOptions, ): Promise { if (!isEthereumAddress(contract_address)) { throw new Error( - `The provided address: "${contract_address}" is not in a valid Ethereum address format.` + `The provided address: "${contract_address}" is not in a valid Ethereum address format.`, ); } if (!isTokenId(token_id)) { throw new Error( - `The provided token_id: "${token_id}" is not in a valid token id format.` + `The provided token_id: "${token_id}" is not in a valid token id format.`, ); } if (!fields || !fields.title || typeof fields.title !== "string") { throw new Error( - "The 'fields' object must be provided and contain a 'title' key with a string value." + "The 'fields' object must be provided and contain a 'title' key with a string value.", ); } @@ -729,7 +731,7 @@ class NameGuard { path: string, method: string = "GET", body: object = {}, - headers: object = {} + headers: object = {}, ): Promise { const url = new URL(path, this.endpoint); @@ -751,7 +753,7 @@ class NameGuard { if (!response.ok) { throw new NameGuardError( response.status, - `Failed to perform request to ${path}.` + `Failed to perform request to ${path}.`, ); } diff --git a/packages/nameguard-sdk/src/utils.test.ts b/packages/nameguard-sdk/src/utils.test.ts index 3ce11d3f5..7432d8beb 100644 --- a/packages/nameguard-sdk/src/utils.test.ts +++ b/packages/nameguard-sdk/src/utils.test.ts @@ -1,5 +1,7 @@ import { describe, it, expect } from "vitest"; -import { isEthereumAddress } from "./utils"; +import { getNameGuardURLForENSname, isEthereumAddress } from "./utils.js"; +import { buildENSName } from "@namehash/ens-utils"; +import { toUnicode } from "punycode"; describe("isEthereumAddress", () => { it("valid EthereumAddress: with prefix all lowercase", () => { @@ -50,3 +52,18 @@ describe("isEthereumAddress", () => { expect(result).toBe(false); }); }); + +describe("getNameGuardURLForENSname", () => { + it("should return correct NameGuard inspect name page URL for notrab.eth", () => { + const result = getNameGuardURLForENSname(buildENSName("notrab.eth")); + const expectedResult = "https://nameguard.io/inspect/notrab.eth"; + + expect(result).toBe(expectedResult); + }); + it("should return correct NameGuard inspect name page URL for 🐈‍⬛.eth", () => { + const result = getNameGuardURLForENSname(buildENSName("🐈‍⬛.eth")); + const expectedResult = `https://nameguard.io/inspect/%F0%9F%90%88%E2%80%8D%E2%AC%9B.eth`; + + expect(result).toBe(expectedResult); + }); +}); diff --git a/packages/nameguard-sdk/src/utils.ts b/packages/nameguard-sdk/src/utils.ts index add86d988..8eb49fd8a 100644 --- a/packages/nameguard-sdk/src/utils.ts +++ b/packages/nameguard-sdk/src/utils.ts @@ -1,3 +1,5 @@ +import { ENSName } from "@namehash/ens-utils"; + // using our own regex for this instead of viem's implementation of `isAddress` // as we want "0X..." in uppercase to also be considered an address const ethereumAddressRegex = /^0x[0-9a-f]{40}$/i; @@ -25,3 +27,7 @@ const keccak256Regex = /^(?:0x)?[0-9a-f]{64}$/i; export function isKeccak256Hash(hash: string) { return keccak256Regex.test(hash); } + +export function getNameGuardURLForENSname(ensName: ENSName): string { + return `https://nameguard.io/inspect/${encodeURIComponent(ensName.name)}`; +} diff --git a/packages/nameguard-sdk/tsconfig.json b/packages/nameguard-sdk/tsconfig.json index 8df457ba1..47a10b385 100644 --- a/packages/nameguard-sdk/tsconfig.json +++ b/packages/nameguard-sdk/tsconfig.json @@ -25,7 +25,7 @@ // "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */ /* Modules */ - "module": "ES6", /* Specify what module code is generated. */ + "module": "node16", /* Specify what module code is generated. */ // "rootDir": "./", /* Specify the root folder within your source files. */ "moduleResolution": "node10", /* Specify how TypeScript looks up a file from a given module specifier. */ // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */ diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3970683d6..e2faa48c1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -37,8 +37,8 @@ importers: specifier: 1.7.17 version: 1.7.17(react-dom@18.2.0)(react@18.2.0) '@namehash/ens-utils': - specifier: 1.12.1 - version: 1.12.1(typescript@5.3.3) + specifier: workspace:* + version: link:../../packages/ens-utils '@namehash/nameguard': specifier: workspace:* version: link:../../packages/nameguard-sdk @@ -400,7 +400,7 @@ importers: version: 8.1.8(prettier@3.2.5)(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.3) '@storybook/test': specifier: ^8.1.8 - version: 8.1.8 + version: 8.1.8(vitest@1.4.0) '@types/react': specifier: 18.3.3 version: 18.3.3 @@ -422,9 +422,15 @@ importers: typescript: specifier: ^5.2.2 version: 5.3.3 + vitest: + specifier: 1.4.0 + version: 1.4.0(@types/node@20.12.12) packages/nameguard-sdk: dependencies: + '@namehash/ens-utils': + specifier: workspace:* + version: link:../ens-utils whatwg-fetch: specifier: 3.6.19 version: 3.6.19 @@ -3046,21 +3052,6 @@ packages: react: 18.3.1 dev: true - /@namehash/ens-utils@1.12.1(typescript@5.3.3): - resolution: {integrity: sha512-ajWMVxztbefkboKFZnkRGhosCb3BkuXN0UF2Vg+bCRCkufMTy9H1ZeXbOS6yNMpG9pnAiXYK2n84JnA18Zb2Dg==} - dependencies: - '@adraffy/ens-normalize': 1.10.1 - '@ethersproject/hash': 5.7.0 - date-fns: 3.3.1 - decimal.js: 10.4.3 - viem: 2.9.3(typescript@5.3.3) - transitivePeerDependencies: - - bufferutil - - typescript - - utf-8-validate - - zod - dev: false - /@namehash/ens-webfont@0.0.3: resolution: {integrity: sha512-2SNBgWkqd8Oe76EZ+b9pdIVTfwn3w0iNk8fI9ESQXYO1xyTPOvZL34avI64nrGmBZSZMsNyFdfc4xHXoVY1lIg==} dev: false @@ -4794,7 +4785,7 @@ packages: '@storybook/instrumenter': 8.1.10 '@storybook/preview-api': 8.1.10 '@testing-library/dom': 9.3.4 - '@testing-library/jest-dom': 6.4.5 + '@testing-library/jest-dom': 6.4.5(vitest@1.4.0) '@testing-library/user-event': 14.5.2(@testing-library/dom@9.3.4) '@vitest/expect': 1.3.1 '@vitest/spy': 1.6.0 @@ -4807,7 +4798,7 @@ packages: - vitest dev: true - /@storybook/test@8.1.8: + /@storybook/test@8.1.8(vitest@1.4.0): resolution: {integrity: sha512-SuKQZ2VPBLRK7zgkK+BAzau0HHdYjcsHFbVFa3E4r5n29KRXziW0hOcyBqMRh3jVi9tWKswTmDAOaPfPCxQjHA==} dependencies: '@storybook/client-logger': 8.1.8 @@ -4815,7 +4806,7 @@ packages: '@storybook/instrumenter': 8.1.8 '@storybook/preview-api': 8.1.8 '@testing-library/dom': 9.3.4 - '@testing-library/jest-dom': 6.4.5 + '@testing-library/jest-dom': 6.4.5(vitest@1.4.0) '@testing-library/user-event': 14.5.2(@testing-library/dom@9.3.4) '@vitest/expect': 1.3.1 '@vitest/spy': 1.4.0 @@ -4902,7 +4893,7 @@ packages: pretty-format: 27.5.1 dev: true - /@testing-library/jest-dom@6.4.5: + /@testing-library/jest-dom@6.4.5(vitest@1.4.0): resolution: {integrity: sha512-AguB9yvTXmCnySBP1lWjfNNUwpbElsaQ567lt2VdGqAdHtpieLgjmcVyv1q7PMIvLbgpDdkWV5Ydv3FEejyp2A==} engines: {node: '>=14', npm: '>=6', yarn: '>=1'} peerDependencies: @@ -4931,6 +4922,7 @@ packages: dom-accessibility-api: 0.6.3 lodash: 4.17.21 redent: 3.0.0 + vitest: 1.4.0(@types/node@20.12.12) dev: true /@testing-library/user-event@14.5.2(@testing-library/dom@9.3.4): From 8567c33d67b68303aa3f4807e1dec3907c3b6dc1 Mon Sep 17 00:00:00 2001 From: FrancoAguzzi Date: Wed, 5 Jun 2024 17:23:28 -0300 Subject: [PATCH 05/26] refactor: add onIcon, onTooltip and onBadge click override props for ReportBadge and ReportIcon --- .changeset/dry-spoons-invite.md | 5 +++++ .../src/app/components/ImpersonationReport.tsx | 7 +------ .../src/components/Report/LoadingSkeleton.tsx | 5 +---- .../nameguard-react/src/components/ReportIcon/index.tsx | 4 ++++ 4 files changed, 11 insertions(+), 10 deletions(-) create mode 100644 .changeset/dry-spoons-invite.md diff --git a/.changeset/dry-spoons-invite.md b/.changeset/dry-spoons-invite.md new file mode 100644 index 000000000..e1763d934 --- /dev/null +++ b/.changeset/dry-spoons-invite.md @@ -0,0 +1,5 @@ +--- +"@namehash/nameguard-react": minor +--- + +Add onIcon, onTooltip and onBadge click handlers for Report components diff --git a/apps/examples.nameguard.io/src/app/components/ImpersonationReport.tsx b/apps/examples.nameguard.io/src/app/components/ImpersonationReport.tsx index 902848719..b1e869658 100644 --- a/apps/examples.nameguard.io/src/app/components/ImpersonationReport.tsx +++ b/apps/examples.nameguard.io/src/app/components/ImpersonationReport.tsx @@ -28,12 +28,7 @@ export function ImpersonationReport({ data }: ImpersonationReportProps) { const { nameguard_result } = data; if (!nameguard_result) - return ( - - ); + return ; const textClass = cc([ "font-semibold", diff --git a/packages/nameguard-react/src/components/Report/LoadingSkeleton.tsx b/packages/nameguard-react/src/components/Report/LoadingSkeleton.tsx index 71e151d7f..fb80b26d1 100644 --- a/packages/nameguard-react/src/components/Report/LoadingSkeleton.tsx +++ b/packages/nameguard-react/src/components/Report/LoadingSkeleton.tsx @@ -38,10 +38,7 @@ export const LoadingSkeleton = ({ parsedName }: LoadingSkeletonProps) => { )}
- +

Inspecting... diff --git a/packages/nameguard-react/src/components/ReportIcon/index.tsx b/packages/nameguard-react/src/components/ReportIcon/index.tsx index 0b3edc00e..a96469af5 100644 --- a/packages/nameguard-react/src/components/ReportIcon/index.tsx +++ b/packages/nameguard-react/src/components/ReportIcon/index.tsx @@ -81,6 +81,10 @@ export function ReportIcon({ } }; + const redirectUserToNameGuardInspectPage = (ensName: ENSName) => { + window.location.href = getNameGuardURLForENSname(ensName); + }; + if (hadLoadingError) { return ( Date: Wed, 5 Jun 2024 17:51:11 -0300 Subject: [PATCH 06/26] chore: fix loading data lacking issue --- packages/ens-utils/src/ensname.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/ens-utils/src/ensname.ts b/packages/ens-utils/src/ensname.ts index 230d2037b..0b6661fd1 100644 --- a/packages/ens-utils/src/ensname.ts +++ b/packages/ens-utils/src/ensname.ts @@ -258,7 +258,7 @@ export function getNamespaceRoot(name: ENSName): NamespaceRoot { * `unknown` if the decentralization status of the name is unknown. */ export function getDecentralizationStatus( - name: ENSName + name: ENSName, ): DecentralizationStatus { switch (getNamespaceRoot(name)) { case "ens": @@ -320,11 +320,11 @@ export function getRegistrationPotential(name: ENSName): RegistrationPotential { /** * Calculates the number of characters in a label. - * + * * NOTE: This length will be the same as determined by the EthRegistrarController smart contracts. * These contracts calculate length using the following code that counts Unicode characters in UTF-8 encoding. * https://github.com/ensdomains/ens-contracts/blob/staging/contracts/ethregistrar/StringUtils.sol - * + * * This length may be different than the traditional ".length" property of a string in JavaScript. * In Javascript, the ".length" property of a string returns the number of UTF-16 code units in that string. * UTF-16 represents Unicode characters with codepoints higher can fit within a 16 bit value as a "surrogate pair" From ded3181c2da59dab1bdd5afba8c43b890c72a728 Mon Sep 17 00:00:00 2001 From: FrancoAguzzi Date: Thu, 6 Jun 2024 14:33:10 -0300 Subject: [PATCH 07/26] chore: move getNameGuardURLForENSname from NameGuard SDK to NameGuard React package --- .../app/components/ImpersonationReport.tsx | 2 +- packages/nameguard-react/package.json | 3 ++- .../src/components/ReportBadge/index.tsx | 2 +- packages/nameguard-react/src/index.ts | 7 +++++-- .../nameguard-react/src/utils/text.test.ts | 18 ++++++++++++++++++ packages/nameguard-react/src/utils/text.ts | 5 +++++ packages/nameguard-sdk/src/index.test.ts | 2 +- packages/nameguard-sdk/src/index.ts | 4 +--- packages/nameguard-sdk/src/utils.test.ts | 19 +------------------ packages/nameguard-sdk/src/utils.ts | 6 ------ packages/nameguard-sdk/tsconfig.json | 2 +- 11 files changed, 36 insertions(+), 34 deletions(-) create mode 100644 packages/nameguard-react/src/utils/text.test.ts diff --git a/apps/examples.nameguard.io/src/app/components/ImpersonationReport.tsx b/apps/examples.nameguard.io/src/app/components/ImpersonationReport.tsx index b1e869658..8850dd050 100644 --- a/apps/examples.nameguard.io/src/app/components/ImpersonationReport.tsx +++ b/apps/examples.nameguard.io/src/app/components/ImpersonationReport.tsx @@ -4,9 +4,9 @@ import { type SecurePrimaryNameResult } from "@namehash/nameguard"; import { RatingIcon, RatingIconSize, - RatingLoadingIcon, viewNameReportURL, ratingTextColor, + RatingLoadingIcon, } from "@namehash/nameguard-react"; import cc from "classcat"; diff --git a/packages/nameguard-react/package.json b/packages/nameguard-react/package.json index 10fa3c79b..77811427e 100644 --- a/packages/nameguard-react/package.json +++ b/packages/nameguard-react/package.json @@ -3,7 +3,8 @@ "version": "0.1.0", "scripts": { "build": "tsup", - "dev": "tsup --watch --clean=false" + "dev": "tsup --watch --clean=false", + "test": "vitest" }, "exports": { ".": { diff --git a/packages/nameguard-react/src/components/ReportBadge/index.tsx b/packages/nameguard-react/src/components/ReportBadge/index.tsx index aab5c6648..f1b903854 100644 --- a/packages/nameguard-react/src/components/ReportBadge/index.tsx +++ b/packages/nameguard-react/src/components/ReportBadge/index.tsx @@ -1,5 +1,4 @@ "use client"; -import { DisplayedName, RatingIconSize } from "../.."; import { redirectToViewNameReportURL } from "../../utils/url"; import { type ConsolidatedNameGuardReport } from "@namehash/nameguard"; import { ENSName } from "@namehash/ens-utils"; @@ -7,6 +6,7 @@ import React, { useEffect } from "react"; import cc from "classcat"; import { ReportIcon } from "../ReportIcon/index"; +import { RatingIconSize, DisplayedName } from "../.."; import { ReportUnknownIcon } from "../ReportUnknownIcon/ReportUnknownIcon"; import { ReportLoadingIcon } from "../ReportLoadingIcon/ReportLoadingIcon"; diff --git a/packages/nameguard-react/src/index.ts b/packages/nameguard-react/src/index.ts index 4d6894269..68cf81ab3 100644 --- a/packages/nameguard-react/src/index.ts +++ b/packages/nameguard-react/src/index.ts @@ -1,5 +1,8 @@ -export { ratingTextColor, checkResultCodeTextColor } from "./utils/text"; -export { viewNameReportURL, redirectToViewNameReportURL } from "./utils/url"; +export { + ratingTextColor, + checkResultCodeTextColor, + getNameGuardURLForENSname, +} from "./utils/text"; export { Tooltip } from "./components/Tooltip/Tooltip"; export { Search } from "./components/Search/Search"; export { Report } from "./components/Report/Report"; diff --git a/packages/nameguard-react/src/utils/text.test.ts b/packages/nameguard-react/src/utils/text.test.ts new file mode 100644 index 000000000..a3a7bf661 --- /dev/null +++ b/packages/nameguard-react/src/utils/text.test.ts @@ -0,0 +1,18 @@ +import { describe, it, expect } from "vitest"; +import { getNameGuardURLForENSname } from "./text"; +import { buildENSName } from "@namehash/ens-utils"; + +describe("getNameGuardURLForENSname", () => { + it("should return correct NameGuard inspect name page URL for notrab.eth", () => { + const result = getNameGuardURLForENSname(buildENSName("notrab.eth")); + const expectedResult = "https://nameguard.io/inspect/notrab.eth"; + + expect(result).toBe(expectedResult); + }); + it("should return correct NameGuard inspect name page URL for 🐈‍⬛.eth", () => { + const result = getNameGuardURLForENSname(buildENSName("🐈‍⬛.eth")); + const expectedResult = `https://nameguard.io/inspect/%F0%9F%90%88%E2%80%8D%E2%AC%9B.eth`; + + expect(result).toBe(expectedResult); + }); +}); diff --git a/packages/nameguard-react/src/utils/text.ts b/packages/nameguard-react/src/utils/text.ts index f76ed4941..b4396147a 100644 --- a/packages/nameguard-react/src/utils/text.ts +++ b/packages/nameguard-react/src/utils/text.ts @@ -1,3 +1,4 @@ +import { ENSName } from "@namehash/ens-utils"; import { CheckResultCode, Rating } from "@namehash/nameguard"; export function checkResultCodeTextColor( @@ -63,3 +64,7 @@ export function ratingTextColor(rating: Rating, isInteractive = false): string { return color; } + +export function getNameGuardURLForENSname(ensName: ENSName): string { + return `https://nameguard.io/inspect/${encodeURIComponent(ensName.name)}`; +} diff --git a/packages/nameguard-sdk/src/index.test.ts b/packages/nameguard-sdk/src/index.test.ts index d400ca8f8..825367de5 100644 --- a/packages/nameguard-sdk/src/index.test.ts +++ b/packages/nameguard-sdk/src/index.test.ts @@ -1,6 +1,6 @@ import { describe, it, expect } from "vitest"; -import { createClient } from "./index.js"; +import { createClient } from "./index"; const nameguard = createClient({ // undefined will default to the production endpoint diff --git a/packages/nameguard-sdk/src/index.ts b/packages/nameguard-sdk/src/index.ts index 30e3ecd77..e89e5580b 100644 --- a/packages/nameguard-sdk/src/index.ts +++ b/packages/nameguard-sdk/src/index.ts @@ -1,7 +1,5 @@ import "whatwg-fetch"; -import { isEthereumAddress, isTokenId, isKeccak256Hash } from "./utils.js"; - -export { getNameGuardURLForENSname } from "./utils.js"; +import { isEthereumAddress, isTokenId, isKeccak256Hash } from "./utils"; const ETH_TLD = "eth"; diff --git a/packages/nameguard-sdk/src/utils.test.ts b/packages/nameguard-sdk/src/utils.test.ts index 7432d8beb..3ce11d3f5 100644 --- a/packages/nameguard-sdk/src/utils.test.ts +++ b/packages/nameguard-sdk/src/utils.test.ts @@ -1,7 +1,5 @@ import { describe, it, expect } from "vitest"; -import { getNameGuardURLForENSname, isEthereumAddress } from "./utils.js"; -import { buildENSName } from "@namehash/ens-utils"; -import { toUnicode } from "punycode"; +import { isEthereumAddress } from "./utils"; describe("isEthereumAddress", () => { it("valid EthereumAddress: with prefix all lowercase", () => { @@ -52,18 +50,3 @@ describe("isEthereumAddress", () => { expect(result).toBe(false); }); }); - -describe("getNameGuardURLForENSname", () => { - it("should return correct NameGuard inspect name page URL for notrab.eth", () => { - const result = getNameGuardURLForENSname(buildENSName("notrab.eth")); - const expectedResult = "https://nameguard.io/inspect/notrab.eth"; - - expect(result).toBe(expectedResult); - }); - it("should return correct NameGuard inspect name page URL for 🐈‍⬛.eth", () => { - const result = getNameGuardURLForENSname(buildENSName("🐈‍⬛.eth")); - const expectedResult = `https://nameguard.io/inspect/%F0%9F%90%88%E2%80%8D%E2%AC%9B.eth`; - - expect(result).toBe(expectedResult); - }); -}); diff --git a/packages/nameguard-sdk/src/utils.ts b/packages/nameguard-sdk/src/utils.ts index 8eb49fd8a..add86d988 100644 --- a/packages/nameguard-sdk/src/utils.ts +++ b/packages/nameguard-sdk/src/utils.ts @@ -1,5 +1,3 @@ -import { ENSName } from "@namehash/ens-utils"; - // using our own regex for this instead of viem's implementation of `isAddress` // as we want "0X..." in uppercase to also be considered an address const ethereumAddressRegex = /^0x[0-9a-f]{40}$/i; @@ -27,7 +25,3 @@ const keccak256Regex = /^(?:0x)?[0-9a-f]{64}$/i; export function isKeccak256Hash(hash: string) { return keccak256Regex.test(hash); } - -export function getNameGuardURLForENSname(ensName: ENSName): string { - return `https://nameguard.io/inspect/${encodeURIComponent(ensName.name)}`; -} diff --git a/packages/nameguard-sdk/tsconfig.json b/packages/nameguard-sdk/tsconfig.json index 47a10b385..8df457ba1 100644 --- a/packages/nameguard-sdk/tsconfig.json +++ b/packages/nameguard-sdk/tsconfig.json @@ -25,7 +25,7 @@ // "moduleDetection": "auto", /* Control what method is used to detect module-format JS files. */ /* Modules */ - "module": "node16", /* Specify what module code is generated. */ + "module": "ES6", /* Specify what module code is generated. */ // "rootDir": "./", /* Specify the root folder within your source files. */ "moduleResolution": "node10", /* Specify how TypeScript looks up a file from a given module specifier. */ // "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */ From 1984de5c1f3a90bdcb325f2f9c4ebcfb27ccb1b2 Mon Sep 17 00:00:00 2001 From: FrancoAguzzi Date: Thu, 6 Jun 2024 20:13:30 -0300 Subject: [PATCH 08/26] feat: create url file in NameGuard React for utilities --- .../src/components/ReportIcon/index.tsx | 4 ---- .../src/components/Share/Share.tsx | 2 +- packages/nameguard-react/src/index.ts | 7 ++----- .../nameguard-react/src/utils/text.test.ts | 18 ------------------ packages/nameguard-react/src/utils/text.ts | 5 ----- 5 files changed, 3 insertions(+), 33 deletions(-) delete mode 100644 packages/nameguard-react/src/utils/text.test.ts diff --git a/packages/nameguard-react/src/components/ReportIcon/index.tsx b/packages/nameguard-react/src/components/ReportIcon/index.tsx index a96469af5..0b3edc00e 100644 --- a/packages/nameguard-react/src/components/ReportIcon/index.tsx +++ b/packages/nameguard-react/src/components/ReportIcon/index.tsx @@ -81,10 +81,6 @@ export function ReportIcon({ } }; - const redirectUserToNameGuardInspectPage = (ensName: ENSName) => { - window.location.href = getNameGuardURLForENSname(ensName); - }; - if (hadLoadingError) { return ( { - it("should return correct NameGuard inspect name page URL for notrab.eth", () => { - const result = getNameGuardURLForENSname(buildENSName("notrab.eth")); - const expectedResult = "https://nameguard.io/inspect/notrab.eth"; - - expect(result).toBe(expectedResult); - }); - it("should return correct NameGuard inspect name page URL for 🐈‍⬛.eth", () => { - const result = getNameGuardURLForENSname(buildENSName("🐈‍⬛.eth")); - const expectedResult = `https://nameguard.io/inspect/%F0%9F%90%88%E2%80%8D%E2%AC%9B.eth`; - - expect(result).toBe(expectedResult); - }); -}); diff --git a/packages/nameguard-react/src/utils/text.ts b/packages/nameguard-react/src/utils/text.ts index b4396147a..f76ed4941 100644 --- a/packages/nameguard-react/src/utils/text.ts +++ b/packages/nameguard-react/src/utils/text.ts @@ -1,4 +1,3 @@ -import { ENSName } from "@namehash/ens-utils"; import { CheckResultCode, Rating } from "@namehash/nameguard"; export function checkResultCodeTextColor( @@ -64,7 +63,3 @@ export function ratingTextColor(rating: Rating, isInteractive = false): string { return color; } - -export function getNameGuardURLForENSname(ensName: ENSName): string { - return `https://nameguard.io/inspect/${encodeURIComponent(ensName.name)}`; -} From 6dc768a896437a07c32218ab33b599b4d40c1dab Mon Sep 17 00:00:00 2001 From: FrancoAguzzi Date: Sat, 8 Jun 2024 09:45:05 -0300 Subject: [PATCH 09/26] refactor: move NameGuard URL related logic to NameGuard React url.ts --- .changeset/famous-jobs-wait.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/famous-jobs-wait.md diff --git a/.changeset/famous-jobs-wait.md b/.changeset/famous-jobs-wait.md new file mode 100644 index 000000000..68c60ce65 --- /dev/null +++ b/.changeset/famous-jobs-wait.md @@ -0,0 +1,6 @@ +--- +"@namehash/nameguard-react": minor +"@namehash/ens-utils": minor +--- + +Move NameGuard URL related logic to NameGuard React url.ts From d229db68dc8b5cb894cb0dce29f3c5cd87110115 Mon Sep 17 00:00:00 2001 From: FrancoAguzzi Date: Sat, 22 Jun 2024 13:39:06 -0300 Subject: [PATCH 10/26] chore: commented url file tests --- .../nameguard-react/src/utils/url.test.ts | 30 +++++++++---------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/packages/nameguard-react/src/utils/url.test.ts b/packages/nameguard-react/src/utils/url.test.ts index 5fe724de1..041eda30e 100644 --- a/packages/nameguard-react/src/utils/url.test.ts +++ b/packages/nameguard-react/src/utils/url.test.ts @@ -1,18 +1,18 @@ -import { buildENSName } from "@namehash/ens-utils"; -import { describe, it, expect } from "vitest"; -import { viewNameReportURL } from "./url"; +// import { buildENSName } from "@namehash/ens-utils"; +// import { describe, it, expect } from "vitest"; +// import { viewNameReportURL } from "./url"; -describe("viewNameReportURL", () => { - it("should return correct NameGuard inspect name page URL for notrab.eth", () => { - const result = viewNameReportURL(buildENSName("notrab.eth")).href; - const expectedResult = "https://nameguard.io/inspect/notrab.eth"; +// describe("viewNameReportURL", () => { +// it("should return correct NameGuard inspect name page URL for notrab.eth", () => { +// const result = viewNameReportURL(buildENSName("notrab.eth")).href; +// const expectedResult = "https://nameguard.io/inspect/notrab.eth"; - expect(result).toBe(expectedResult); - }); - it("should return correct NameGuard inspect name page URL for 🐈‍⬛.eth", () => { - const result = viewNameReportURL(buildENSName("🐈‍⬛.eth")).href; - const expectedResult = `https://nameguard.io/inspect/%F0%9F%90%88%E2%80%8D%E2%AC%9B.eth`; +// expect(result).toBe(expectedResult); +// }); +// it("should return correct NameGuard inspect name page URL for 🐈‍⬛.eth", () => { +// const result = viewNameReportURL(buildENSName("🐈‍⬛.eth")).href; +// const expectedResult = `https://nameguard.io/inspect/%F0%9F%90%88%E2%80%8D%E2%AC%9B.eth`; - expect(result).toBe(expectedResult); - }); -}); +// expect(result).toBe(expectedResult); +// }); +// }); From 9667053e7295fb89892b91915d339e1e21ac26ec Mon Sep 17 00:00:00 2001 From: FrancoAguzzi Date: Tue, 25 Jun 2024 16:55:18 -0300 Subject: [PATCH 11/26] feat: changed module resolution of ens-utils --- .../nameguard-react/src/utils/url.test.ts | 30 +++++++++---------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/packages/nameguard-react/src/utils/url.test.ts b/packages/nameguard-react/src/utils/url.test.ts index 041eda30e..5fe724de1 100644 --- a/packages/nameguard-react/src/utils/url.test.ts +++ b/packages/nameguard-react/src/utils/url.test.ts @@ -1,18 +1,18 @@ -// import { buildENSName } from "@namehash/ens-utils"; -// import { describe, it, expect } from "vitest"; -// import { viewNameReportURL } from "./url"; +import { buildENSName } from "@namehash/ens-utils"; +import { describe, it, expect } from "vitest"; +import { viewNameReportURL } from "./url"; -// describe("viewNameReportURL", () => { -// it("should return correct NameGuard inspect name page URL for notrab.eth", () => { -// const result = viewNameReportURL(buildENSName("notrab.eth")).href; -// const expectedResult = "https://nameguard.io/inspect/notrab.eth"; +describe("viewNameReportURL", () => { + it("should return correct NameGuard inspect name page URL for notrab.eth", () => { + const result = viewNameReportURL(buildENSName("notrab.eth")).href; + const expectedResult = "https://nameguard.io/inspect/notrab.eth"; -// expect(result).toBe(expectedResult); -// }); -// it("should return correct NameGuard inspect name page URL for 🐈‍⬛.eth", () => { -// const result = viewNameReportURL(buildENSName("🐈‍⬛.eth")).href; -// const expectedResult = `https://nameguard.io/inspect/%F0%9F%90%88%E2%80%8D%E2%AC%9B.eth`; + expect(result).toBe(expectedResult); + }); + it("should return correct NameGuard inspect name page URL for 🐈‍⬛.eth", () => { + const result = viewNameReportURL(buildENSName("🐈‍⬛.eth")).href; + const expectedResult = `https://nameguard.io/inspect/%F0%9F%90%88%E2%80%8D%E2%AC%9B.eth`; -// expect(result).toBe(expectedResult); -// }); -// }); + expect(result).toBe(expectedResult); + }); +}); From 13b08b19d6ab494ce6ba67122830fad88c884a49 Mon Sep 17 00:00:00 2001 From: FrancoAguzzi Date: Tue, 9 Jul 2024 18:26:27 -0300 Subject: [PATCH 12/26] fix: align build config in examples.nameguard.io --- apps/examples.nameguard.io/src/index.d.ts | 1 + 1 file changed, 1 insertion(+) create mode 100644 apps/examples.nameguard.io/src/index.d.ts diff --git a/apps/examples.nameguard.io/src/index.d.ts b/apps/examples.nameguard.io/src/index.d.ts new file mode 100644 index 000000000..a08b613da --- /dev/null +++ b/apps/examples.nameguard.io/src/index.d.ts @@ -0,0 +1 @@ +declare module "@namehash/nameguard-react"; From 1e785c0143fdabf4b770a35a710c0616d9db317a Mon Sep 17 00:00:00 2001 From: FrancoAguzzi Date: Tue, 9 Jul 2024 18:35:07 -0300 Subject: [PATCH 13/26] fix: update type file reference of nameguard-react --- packages/nameguard-react/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/nameguard-react/package.json b/packages/nameguard-react/package.json index 77811427e..30d023b0e 100644 --- a/packages/nameguard-react/package.json +++ b/packages/nameguard-react/package.json @@ -8,7 +8,7 @@ }, "exports": { ".": { - "types": "./dist/index.d.ts", + "types": "./dist/index.d.mts", "import": "./dist/index.mjs", "default": "./dist/index.mjs" }, From 0b8f598969f93b300f4d1a376401d5c5a27dda65 Mon Sep 17 00:00:00 2001 From: "frankind.eth" <49823133+FrancoAguzzi@users.noreply.github.com> Date: Tue, 9 Jul 2024 18:47:45 -0300 Subject: [PATCH 14/26] debug: update ci_sdk.yml to log node_modules content --- .github/workflows/ci_sdk.yml | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/.github/workflows/ci_sdk.yml b/.github/workflows/ci_sdk.yml index 7633ed6d0..58e5de569 100644 --- a/.github/workflows/ci_sdk.yml +++ b/.github/workflows/ci_sdk.yml @@ -33,7 +33,10 @@ jobs: - name: Install dependencies working-directory: ./api - run: poetry install --with dev + run: | + poetry install --with dev + npm ci --loglevel silly + ls -la node_modules # List the contents of node_modules - name: Setup local nameguard api working-directory: ./api From 06f17068361ee9cbe01d345e7809ce56c79762db Mon Sep 17 00:00:00 2001 From: "frankind.eth" <49823133+FrancoAguzzi@users.noreply.github.com> Date: Tue, 9 Jul 2024 18:52:42 -0300 Subject: [PATCH 15/26] debug: update back ci_sdk.yml after bug test --- .github/workflows/ci_sdk.yml | 2 -- 1 file changed, 2 deletions(-) diff --git a/.github/workflows/ci_sdk.yml b/.github/workflows/ci_sdk.yml index 58e5de569..89e5bf412 100644 --- a/.github/workflows/ci_sdk.yml +++ b/.github/workflows/ci_sdk.yml @@ -35,8 +35,6 @@ jobs: working-directory: ./api run: | poetry install --with dev - npm ci --loglevel silly - ls -la node_modules # List the contents of node_modules - name: Setup local nameguard api working-directory: ./api From b643ecff204a939ca76f485f440d265630827975 Mon Sep 17 00:00:00 2001 From: FrancoAguzzi Date: Tue, 9 Jul 2024 18:58:10 -0300 Subject: [PATCH 16/26] debug: finish undoing changes to ci_sdk.yml --- .github/workflows/ci_sdk.yml | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/.github/workflows/ci_sdk.yml b/.github/workflows/ci_sdk.yml index 89e5bf412..7633ed6d0 100644 --- a/.github/workflows/ci_sdk.yml +++ b/.github/workflows/ci_sdk.yml @@ -33,8 +33,7 @@ jobs: - name: Install dependencies working-directory: ./api - run: | - poetry install --with dev + run: poetry install --with dev - name: Setup local nameguard api working-directory: ./api From 9afae037290ab0c21a75d2550de90cc3ba387c0c Mon Sep 17 00:00:00 2001 From: FrancoAguzzi Date: Thu, 18 Jul 2024 23:04:23 -0300 Subject: [PATCH 17/26] fix: add vitest to nameguard-react --- packages/nameguard-react/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/nameguard-react/package.json b/packages/nameguard-react/package.json index 30d023b0e..4f726eb5f 100644 --- a/packages/nameguard-react/package.json +++ b/packages/nameguard-react/package.json @@ -45,7 +45,7 @@ "tailwindcss": "3.4.3", "tsup": "^7.2.0", "typescript": "^5.2.2", - "vitest": "1.4.0" + "vitest": "^1.6.0" }, "publishConfig": { "access": "public" From 63d4e557e5cd69a49bf037ab9606b5fa70d7131f Mon Sep 17 00:00:00 2001 From: FrancoAguzzi Date: Thu, 18 Jul 2024 23:16:21 -0300 Subject: [PATCH 18/26] fix: update pnpm-lock file --- pnpm-lock.yaml | 92 +++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 84 insertions(+), 8 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e2faa48c1..b07e26e37 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -400,7 +400,7 @@ importers: version: 8.1.8(prettier@3.2.5)(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.3) '@storybook/test': specifier: ^8.1.8 - version: 8.1.8(vitest@1.4.0) + version: 8.1.8(vitest@1.6.0) '@types/react': specifier: 18.3.3 version: 18.3.3 @@ -423,8 +423,8 @@ importers: specifier: ^5.2.2 version: 5.3.3 vitest: - specifier: 1.4.0 - version: 1.4.0(@types/node@20.12.12) + specifier: ^1.6.0 + version: 1.6.0 packages/nameguard-sdk: dependencies: @@ -4785,7 +4785,7 @@ packages: '@storybook/instrumenter': 8.1.10 '@storybook/preview-api': 8.1.10 '@testing-library/dom': 9.3.4 - '@testing-library/jest-dom': 6.4.5(vitest@1.4.0) + '@testing-library/jest-dom': 6.4.5(vitest@1.6.0) '@testing-library/user-event': 14.5.2(@testing-library/dom@9.3.4) '@vitest/expect': 1.3.1 '@vitest/spy': 1.6.0 @@ -4798,7 +4798,7 @@ packages: - vitest dev: true - /@storybook/test@8.1.8(vitest@1.4.0): + /@storybook/test@8.1.8(vitest@1.6.0): resolution: {integrity: sha512-SuKQZ2VPBLRK7zgkK+BAzau0HHdYjcsHFbVFa3E4r5n29KRXziW0hOcyBqMRh3jVi9tWKswTmDAOaPfPCxQjHA==} dependencies: '@storybook/client-logger': 8.1.8 @@ -4806,7 +4806,7 @@ packages: '@storybook/instrumenter': 8.1.8 '@storybook/preview-api': 8.1.8 '@testing-library/dom': 9.3.4 - '@testing-library/jest-dom': 6.4.5(vitest@1.4.0) + '@testing-library/jest-dom': 6.4.5(vitest@1.6.0) '@testing-library/user-event': 14.5.2(@testing-library/dom@9.3.4) '@vitest/expect': 1.3.1 '@vitest/spy': 1.4.0 @@ -4893,7 +4893,7 @@ packages: pretty-format: 27.5.1 dev: true - /@testing-library/jest-dom@6.4.5(vitest@1.4.0): + /@testing-library/jest-dom@6.4.5(vitest@1.6.0): resolution: {integrity: sha512-AguB9yvTXmCnySBP1lWjfNNUwpbElsaQ567lt2VdGqAdHtpieLgjmcVyv1q7PMIvLbgpDdkWV5Ydv3FEejyp2A==} engines: {node: '>=14', npm: '>=6', yarn: '>=1'} peerDependencies: @@ -4922,7 +4922,7 @@ packages: dom-accessibility-api: 0.6.3 lodash: 4.17.21 redent: 3.0.0 - vitest: 1.4.0(@types/node@20.12.12) + vitest: 1.6.0 dev: true /@testing-library/user-event@14.5.2(@testing-library/dom@9.3.4): @@ -12013,6 +12013,27 @@ packages: - terser dev: true + /vite-node@1.6.0: + resolution: {integrity: sha512-de6HJgzC+TFzOu0NTC4RAIsyf/DY/ibWDYQUcuEA84EMHhcefTUGkjFHKKEJhQN4A+6I0u++kr3l36ZF2d7XRw==} + engines: {node: ^18.0.0 || >=20.0.0} + hasBin: true + dependencies: + cac: 6.7.14 + debug: 4.3.4 + pathe: 1.1.2 + picocolors: 1.0.1 + vite: 5.1.7(@types/node@20.12.12) + transitivePeerDependencies: + - '@types/node' + - less + - lightningcss + - sass + - stylus + - sugarss + - supports-color + - terser + dev: true + /vite-node@1.6.0(@types/node@20.12.7): resolution: {integrity: sha512-de6HJgzC+TFzOu0NTC4RAIsyf/DY/ibWDYQUcuEA84EMHhcefTUGkjFHKKEJhQN4A+6I0u++kr3l36ZF2d7XRw==} engines: {node: ^18.0.0 || >=20.0.0} @@ -12162,6 +12183,61 @@ packages: - terser dev: true + /vitest@1.6.0: + resolution: {integrity: sha512-H5r/dN06swuFnzNFhq/dnz37bPXnq8xB2xB5JOVk8K09rUtoeNN+LHWkoQ0A/i3hvbUKKcCei9KpbxqHMLhLLA==} + engines: {node: ^18.0.0 || >=20.0.0} + hasBin: true + peerDependencies: + '@edge-runtime/vm': '*' + '@types/node': ^18.0.0 || >=20.0.0 + '@vitest/browser': 1.6.0 + '@vitest/ui': 1.6.0 + happy-dom: '*' + jsdom: '*' + peerDependenciesMeta: + '@edge-runtime/vm': + optional: true + '@types/node': + optional: true + '@vitest/browser': + optional: true + '@vitest/ui': + optional: true + happy-dom: + optional: true + jsdom: + optional: true + dependencies: + '@vitest/expect': 1.6.0 + '@vitest/runner': 1.6.0 + '@vitest/snapshot': 1.6.0 + '@vitest/spy': 1.6.0 + '@vitest/utils': 1.6.0 + acorn-walk: 8.3.2 + chai: 4.4.1 + debug: 4.3.4 + execa: 8.0.1 + local-pkg: 0.5.0 + magic-string: 0.30.10 + pathe: 1.1.2 + picocolors: 1.0.1 + std-env: 3.7.0 + strip-literal: 2.1.0 + tinybench: 2.8.0 + tinypool: 0.8.4 + vite: 5.1.7(@types/node@20.12.12) + vite-node: 1.6.0 + why-is-node-running: 2.2.2 + transitivePeerDependencies: + - less + - lightningcss + - sass + - stylus + - sugarss + - supports-color + - terser + dev: true + /vitest@1.6.0(@types/node@20.12.7): resolution: {integrity: sha512-H5r/dN06swuFnzNFhq/dnz37bPXnq8xB2xB5JOVk8K09rUtoeNN+LHWkoQ0A/i3hvbUKKcCei9KpbxqHMLhLLA==} engines: {node: ^18.0.0 || >=20.0.0} From ef0f7883f3e02dcb10130aa24e9bf1c76d6486d7 Mon Sep 17 00:00:00 2001 From: FrancoAguzzi Date: Fri, 19 Jul 2024 11:09:21 -0300 Subject: [PATCH 19/26] fix: update examples.nameguard.io ens-utils version --- apps/examples.nameguard.io/package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/examples.nameguard.io/package.json b/apps/examples.nameguard.io/package.json index 5b6f6338b..6026e0cb4 100644 --- a/apps/examples.nameguard.io/package.json +++ b/apps/examples.nameguard.io/package.json @@ -10,7 +10,6 @@ "dependencies": { "@headlessui-float/react": "0.11.4", "@headlessui/react": "1.7.17", - "@namehash/ens-utils": "1.12.1", "@namehash/nameguard": "workspace:*", "@namehash/nameguard-react": "workspace:*", "@namehash/ens-utils": "workspace:*", From f6a54b898fb1b89e5cd5cb7c9844fcece02bec75 Mon Sep 17 00:00:00 2001 From: FrancoAguzzi Date: Tue, 27 Aug 2024 15:50:42 -0300 Subject: [PATCH 20/26] chore: update packages dependencies --- apps/examples.nameguard.io/package.json | 1 + packages/nameguard-react/package.json | 1 + packages/namekit-react/package.json | 1 + pnpm-lock.yaml | 473 +++++++++++++++++++++++- 4 files changed, 461 insertions(+), 15 deletions(-) diff --git a/apps/examples.nameguard.io/package.json b/apps/examples.nameguard.io/package.json index e5e5acba3..331fda466 100644 --- a/apps/examples.nameguard.io/package.json +++ b/apps/examples.nameguard.io/package.json @@ -12,6 +12,7 @@ "@headlessui/react": "1.7.17", "@namehash/nameguard": "workspace:*", "@namehash/nameguard-react": "workspace:*", + "@namehash/ens-utils": "workspace:*", "@namehash/nameguard-js": "workspace:*", "viem": "^2.9.3", "classcat": "5.0.4", diff --git a/packages/nameguard-react/package.json b/packages/nameguard-react/package.json index 217f179cb..45bd8a247 100644 --- a/packages/nameguard-react/package.json +++ b/packages/nameguard-react/package.json @@ -42,6 +42,7 @@ "@namehash/ens-utils": "workspace:*", "@namehash/ens-webfont": "workspace:*", "@namehash/nameguard": "workspace:*", + "@namehash/namekit-react": "workspace:*", "classcat": "5.0.4", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/packages/namekit-react/package.json b/packages/namekit-react/package.json index 97d343165..f0558f86f 100644 --- a/packages/namekit-react/package.json +++ b/packages/namekit-react/package.json @@ -39,6 +39,7 @@ "@headlessui-float/react": "0.11.4", "@headlessui/react": "1.7.17", "@namehash/ens-webfont": "workspace:*", + "@namehash/ens-utils": "workspace:*", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index adab26c41..3081bb1f6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -36,6 +36,9 @@ importers: '@headlessui/react': specifier: 1.7.17 version: 1.7.17(react-dom@18.2.0)(react@18.2.0) + '@namehash/ens-utils': + specifier: workspace:* + version: link:../../packages/ens-utils '@namehash/nameguard': specifier: workspace:* version: link:../../packages/nameguard-sdk @@ -142,10 +145,10 @@ importers: devDependencies: '@types/node': specifier: latest - version: 22.3.0 + version: 22.5.0 '@types/react': specifier: latest - version: 18.3.3 + version: 18.3.4 '@types/react-dom': specifier: latest version: 18.3.0 @@ -413,6 +416,9 @@ importers: '@namehash/nameguard': specifier: workspace:* version: link:../nameguard-sdk + '@namehash/namekit-react': + specifier: workspace:* + version: link:../namekit-react classcat: specifier: 5.0.4 version: 5.0.4 @@ -493,6 +499,9 @@ importers: '@headlessui/react': specifier: 1.7.17 version: 1.7.17(react-dom@18.3.1)(react@18.3.1) + '@namehash/ens-utils': + specifier: workspace:* + version: link:../ens-utils '@namehash/ens-webfont': specifier: workspace:* version: link:../ens-webfont @@ -3135,14 +3144,14 @@ packages: read-yaml-file: 1.1.0 dev: true - /@mdx-js/react@3.0.1(@types/react@18.3.3)(react@18.3.1): + /@mdx-js/react@3.0.1(@types/react@18.3.4)(react@18.3.1): resolution: {integrity: sha512-9ZrPIU4MGf6et1m1ov3zKf+q9+deetI51zprKB1D/z3NOb+rUxxtEl3mCjW5wTGh6VhRdwPueh1oRzi6ezkA8A==} peerDependencies: '@types/react': '>=16' react: '>=16' dependencies: '@types/mdx': 2.0.13 - '@types/react': 18.3.3 + '@types/react': 18.3.4 react: 18.3.1 dev: true @@ -3464,6 +3473,20 @@ packages: react: 18.3.1 dev: true + /@radix-ui/react-compose-refs@1.0.1(@types/react@18.3.4)(react@18.3.1): + resolution: {integrity: sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.24.5 + '@types/react': 18.3.4 + react: 18.3.1 + dev: true + /@radix-ui/react-context@1.0.1(@types/react@18.3.3)(react@18.3.1): resolution: {integrity: sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==} peerDependencies: @@ -3478,6 +3501,20 @@ packages: react: 18.3.1 dev: true + /@radix-ui/react-context@1.0.1(@types/react@18.3.4)(react@18.3.1): + resolution: {integrity: sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.24.5 + '@types/react': 18.3.4 + react: 18.3.1 + dev: true + /@radix-ui/react-dialog@1.0.5(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1): resolution: {integrity: sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==} peerDependencies: @@ -3512,6 +3549,40 @@ packages: react-remove-scroll: 2.5.5(@types/react@18.3.3)(react@18.3.1) dev: true + /@radix-ui/react-dialog@1.0.5(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1): + resolution: {integrity: sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.24.5 + '@radix-ui/primitive': 1.0.1 + '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.4)(react@18.3.1) + '@radix-ui/react-context': 1.0.1(@types/react@18.3.4)(react@18.3.1) + '@radix-ui/react-dismissable-layer': 1.0.5(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.3.4)(react@18.3.1) + '@radix-ui/react-focus-scope': 1.0.4(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-id': 1.0.1(@types/react@18.3.4)(react@18.3.1) + '@radix-ui/react-portal': 1.0.4(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-slot': 1.0.2(@types/react@18.3.4)(react@18.3.1) + '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.3.4)(react@18.3.1) + '@types/react': 18.3.4 + '@types/react-dom': 18.3.0 + aria-hidden: 1.2.4 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + react-remove-scroll: 2.5.5(@types/react@18.3.4)(react@18.3.1) + dev: true + /@radix-ui/react-dismissable-layer@1.0.5(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1): resolution: {integrity: sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==} peerDependencies: @@ -3537,6 +3608,31 @@ packages: react-dom: 18.3.1(react@18.3.1) dev: true + /@radix-ui/react-dismissable-layer@1.0.5(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1): + resolution: {integrity: sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.24.5 + '@radix-ui/primitive': 1.0.1 + '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.4)(react@18.3.1) + '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.3.4)(react@18.3.1) + '@radix-ui/react-use-escape-keydown': 1.0.3(@types/react@18.3.4)(react@18.3.1) + '@types/react': 18.3.4 + '@types/react-dom': 18.3.0 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + dev: true + /@radix-ui/react-focus-guards@1.0.1(@types/react@18.3.3)(react@18.3.1): resolution: {integrity: sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==} peerDependencies: @@ -3551,6 +3647,20 @@ packages: react: 18.3.1 dev: true + /@radix-ui/react-focus-guards@1.0.1(@types/react@18.3.4)(react@18.3.1): + resolution: {integrity: sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.24.5 + '@types/react': 18.3.4 + react: 18.3.1 + dev: true + /@radix-ui/react-focus-scope@1.0.4(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1): resolution: {integrity: sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==} peerDependencies: @@ -3574,6 +3684,29 @@ packages: react-dom: 18.3.1(react@18.3.1) dev: true + /@radix-ui/react-focus-scope@1.0.4(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1): + resolution: {integrity: sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.24.5 + '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.4)(react@18.3.1) + '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.3.4)(react@18.3.1) + '@types/react': 18.3.4 + '@types/react-dom': 18.3.0 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + dev: true + /@radix-ui/react-id@1.0.1(@types/react@18.3.3)(react@18.3.1): resolution: {integrity: sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==} peerDependencies: @@ -3589,6 +3722,21 @@ packages: react: 18.3.1 dev: true + /@radix-ui/react-id@1.0.1(@types/react@18.3.4)(react@18.3.1): + resolution: {integrity: sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.24.5 + '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.3.4)(react@18.3.1) + '@types/react': 18.3.4 + react: 18.3.1 + dev: true + /@radix-ui/react-portal@1.0.4(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1): resolution: {integrity: sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==} peerDependencies: @@ -3610,6 +3758,27 @@ packages: react-dom: 18.3.1(react@18.3.1) dev: true + /@radix-ui/react-portal@1.0.4(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1): + resolution: {integrity: sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.24.5 + '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1) + '@types/react': 18.3.4 + '@types/react-dom': 18.3.0 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + dev: true + /@radix-ui/react-presence@1.0.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1): resolution: {integrity: sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==} peerDependencies: @@ -3632,6 +3801,28 @@ packages: react-dom: 18.3.1(react@18.3.1) dev: true + /@radix-ui/react-presence@1.0.1(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1): + resolution: {integrity: sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.24.5 + '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.4)(react@18.3.1) + '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.3.4)(react@18.3.1) + '@types/react': 18.3.4 + '@types/react-dom': 18.3.0 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + dev: true + /@radix-ui/react-primitive@1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1): resolution: {integrity: sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==} peerDependencies: @@ -3653,6 +3844,27 @@ packages: react-dom: 18.3.1(react@18.3.1) dev: true + /@radix-ui/react-primitive@1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1): + resolution: {integrity: sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.24.5 + '@radix-ui/react-slot': 1.0.2(@types/react@18.3.4)(react@18.3.1) + '@types/react': 18.3.4 + '@types/react-dom': 18.3.0 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + dev: true + /@radix-ui/react-slot@1.0.2(@types/react@18.3.3)(react@18.3.1): resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==} peerDependencies: @@ -3668,6 +3880,21 @@ packages: react: 18.3.1 dev: true + /@radix-ui/react-slot@1.0.2(@types/react@18.3.4)(react@18.3.1): + resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.24.5 + '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.4)(react@18.3.1) + '@types/react': 18.3.4 + react: 18.3.1 + dev: true + /@radix-ui/react-use-callback-ref@1.0.1(@types/react@18.3.3)(react@18.3.1): resolution: {integrity: sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==} peerDependencies: @@ -3682,6 +3909,20 @@ packages: react: 18.3.1 dev: true + /@radix-ui/react-use-callback-ref@1.0.1(@types/react@18.3.4)(react@18.3.1): + resolution: {integrity: sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.24.5 + '@types/react': 18.3.4 + react: 18.3.1 + dev: true + /@radix-ui/react-use-controllable-state@1.0.1(@types/react@18.3.3)(react@18.3.1): resolution: {integrity: sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==} peerDependencies: @@ -3697,6 +3938,21 @@ packages: react: 18.3.1 dev: true + /@radix-ui/react-use-controllable-state@1.0.1(@types/react@18.3.4)(react@18.3.1): + resolution: {integrity: sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.24.5 + '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.3.4)(react@18.3.1) + '@types/react': 18.3.4 + react: 18.3.1 + dev: true + /@radix-ui/react-use-escape-keydown@1.0.3(@types/react@18.3.3)(react@18.3.1): resolution: {integrity: sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==} peerDependencies: @@ -3712,6 +3968,21 @@ packages: react: 18.3.1 dev: true + /@radix-ui/react-use-escape-keydown@1.0.3(@types/react@18.3.4)(react@18.3.1): + resolution: {integrity: sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.24.5 + '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.3.4)(react@18.3.1) + '@types/react': 18.3.4 + react: 18.3.1 + dev: true + /@radix-ui/react-use-layout-effect@1.0.1(@types/react@18.3.3)(react@18.3.1): resolution: {integrity: sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==} peerDependencies: @@ -3726,6 +3997,20 @@ packages: react: 18.3.1 dev: true + /@radix-ui/react-use-layout-effect@1.0.1(@types/react@18.3.4)(react@18.3.1): + resolution: {integrity: sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@babel/runtime': 7.24.5 + '@types/react': 18.3.4 + react: 18.3.1 + dev: true + /@rollup/pluginutils@5.1.0: resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==} engines: {node: '>=14.0.0'} @@ -3940,10 +4225,10 @@ packages: resolution: {integrity: sha512-vMU26AYQBstOj73MX3egqJlY/VUjawfWVcTlDJjSa43GzWfp8wrbr1fNXRy2MoLe19UKZ9Kx+m4CfsrGsXHogg==} dependencies: '@babel/core': 7.24.5 - '@mdx-js/react': 3.0.1(@types/react@18.3.3)(react@18.3.1) - '@storybook/blocks': 8.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(prettier@3.2.5)(react-dom@18.3.1)(react@18.3.1) + '@mdx-js/react': 3.0.1(@types/react@18.3.4)(react@18.3.1) + '@storybook/blocks': 8.1.1(@types/react-dom@18.3.0)(@types/react@18.3.4)(prettier@3.2.5)(react-dom@18.3.1)(react@18.3.1) '@storybook/client-logger': 8.1.1 - '@storybook/components': 8.1.1(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1) + '@storybook/components': 8.1.1(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1) '@storybook/csf-plugin': 8.1.1 '@storybook/csf-tools': 8.1.1 '@storybook/global': 5.0.0 @@ -3952,7 +4237,7 @@ packages: '@storybook/react-dom-shim': 8.1.1(react-dom@18.3.1)(react@18.3.1) '@storybook/theming': 8.1.1(react-dom@18.3.1)(react@18.3.1) '@storybook/types': 8.1.1 - '@types/react': 18.3.3 + '@types/react': 18.3.4 fs-extra: 11.2.0 react: 18.3.1 react-dom: 18.3.1(react@18.3.1) @@ -4107,6 +4392,51 @@ packages: - supports-color dev: true + /@storybook/blocks@8.1.1(@types/react-dom@18.3.0)(@types/react@18.3.4)(prettier@3.2.5)(react-dom@18.3.1)(react@18.3.1): + resolution: {integrity: sha512-D+jUlkA2dxYPSY97+yM5sbLXPABKlsZAhmDy6gw05UoSpfBu1MnKd18Qj4fTbyqLYIJGH9z/whGd3tTcuZn8KQ==} + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta + peerDependenciesMeta: + react: + optional: true + react-dom: + optional: true + dependencies: + '@storybook/channels': 8.1.1 + '@storybook/client-logger': 8.1.1 + '@storybook/components': 8.1.1(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1) + '@storybook/core-events': 8.1.1 + '@storybook/csf': 0.1.7 + '@storybook/docs-tools': 8.1.1(prettier@3.2.5) + '@storybook/global': 5.0.0 + '@storybook/icons': 1.2.9(react-dom@18.3.1)(react@18.3.1) + '@storybook/manager-api': 8.1.1(react-dom@18.3.1)(react@18.3.1) + '@storybook/preview-api': 8.1.1 + '@storybook/theming': 8.1.1(react-dom@18.3.1)(react@18.3.1) + '@storybook/types': 8.1.1 + '@types/lodash': 4.17.4 + color-convert: 2.0.1 + dequal: 2.0.3 + lodash: 4.17.21 + markdown-to-jsx: 7.3.2(react@18.3.1) + memoizerific: 1.11.3 + polished: 4.3.1 + react: 18.3.1 + react-colorful: 5.6.1(react-dom@18.3.1)(react@18.3.1) + react-dom: 18.3.1(react@18.3.1) + telejson: 7.2.0 + tocbot: 4.27.20 + ts-dedent: 2.2.0 + util-deprecate: 1.0.2 + transitivePeerDependencies: + - '@types/react' + - '@types/react-dom' + - encoding + - prettier + - supports-color + dev: true + /@storybook/blocks@8.1.8(@types/react-dom@18.3.0)(@types/react@18.3.3)(prettier@3.2.5)(react-dom@18.3.1)(react@18.3.1): resolution: {integrity: sha512-nx18ism4YCuLFOmI6mQ+EJD1XABcbDdAyeheZPwkwB+fKkseNiOy7C/Mqio7ReYIncvlML6CCUyFm/OSEZkHkQ==} peerDependencies: @@ -4342,6 +4672,29 @@ packages: - '@types/react-dom' dev: true + /@storybook/components@8.1.1(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1): + resolution: {integrity: sha512-0JxYXMb9nlTBAJJXRdn3IjlgXx07gylnTOqa7t3UgOiVDEVPs+1x9LtHU408igcZ5gtcrZepg46O9gz0sdgSfQ==} + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta + dependencies: + '@radix-ui/react-dialog': 1.0.5(@types/react-dom@18.3.0)(@types/react@18.3.4)(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-slot': 1.0.2(@types/react@18.3.4)(react@18.3.1) + '@storybook/client-logger': 8.1.1 + '@storybook/csf': 0.1.7 + '@storybook/global': 5.0.0 + '@storybook/icons': 1.2.9(react-dom@18.3.1)(react@18.3.1) + '@storybook/theming': 8.1.1(react-dom@18.3.1)(react@18.3.1) + '@storybook/types': 8.1.1 + memoizerific: 1.11.3 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + util-deprecate: 1.0.2 + transitivePeerDependencies: + - '@types/react' + - '@types/react-dom' + dev: true + /@storybook/components@8.1.8(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1)(react@18.3.1): resolution: {integrity: sha512-DEfAtDEeISkic8jFm/rFQeVGdA0evVkbiOof+insJxzh6KnIfnZVmJysX02xoUhOCIMjo59c7x0nmUf7NlYsMw==} peerDependencies: @@ -5283,10 +5636,10 @@ packages: undici-types: 5.26.5 dev: true - /@types/node@22.3.0: - resolution: {integrity: sha512-nrWpWVaDZuaVc5X84xJ0vNrLvomM205oQyLsRt7OHNZbSHslcWsvgFR7O7hire2ZonjLrWBbedmotmIlJDVd6g==} + /@types/node@22.5.0: + resolution: {integrity: sha512-DkFrJOe+rfdHTqqMg0bSNlGlQ85hSoh2TPzZyhHsXnMtligRWpxUySiyw8FY14ITt24HVCiQPWxS3KO/QlGmWg==} dependencies: - undici-types: 6.18.2 + undici-types: 6.19.8 dev: true /@types/normalize-package-data@2.4.4: @@ -5311,13 +5664,13 @@ packages: /@types/react-dom@18.2.25: resolution: {integrity: sha512-o/V48vf4MQh7juIKZU2QGDfli6p1+OOi5oXx36Hffpc9adsHeXjVp8rHuPkjd8VT8sOJ2Zp05HR7CdpGTIUFUA==} dependencies: - '@types/react': 18.3.3 + '@types/react': 18.3.4 dev: true /@types/react-dom@18.3.0: resolution: {integrity: sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==} dependencies: - '@types/react': 18.3.3 + '@types/react': 18.3.4 dev: true /@types/react@18.2.79: @@ -5340,6 +5693,13 @@ packages: '@types/prop-types': 15.7.12 csstype: 3.1.3 + /@types/react@18.3.4: + resolution: {integrity: sha512-J7W30FTdfCxDDjmfRM+/JqLHBIyl7xUIp9kwK637FGmY7+mkSFSe6L4jpZzhj5QMfLssSDP4/i75AKkrdC7/Jw==} + dependencies: + '@types/prop-types': 15.7.12 + csstype: 3.1.3 + dev: true + /@types/resolve@1.20.6: resolution: {integrity: sha512-A4STmOXPhMUtHH+S6ymgE2GiBSMqf4oTvcQZMcHzokuTLVYzXTB8ttjcgxOVaAp2lGwEdzZ0J+cRbbeevQj1UQ==} dev: true @@ -10563,6 +10923,22 @@ packages: tslib: 2.6.2 dev: true + /react-remove-scroll-bar@2.3.6(@types/react@18.3.4)(react@18.3.1): + resolution: {integrity: sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==} + engines: {node: '>=10'} + peerDependencies: + '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@types/react': 18.3.4 + react: 18.3.1 + react-style-singleton: 2.2.1(@types/react@18.3.4)(react@18.3.1) + tslib: 2.6.2 + dev: true + /react-remove-scroll@2.5.5(@types/react@18.3.3)(react@18.3.1): resolution: {integrity: sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==} engines: {node: '>=10'} @@ -10582,6 +10958,25 @@ packages: use-sidecar: 1.1.2(@types/react@18.3.3)(react@18.3.1) dev: true + /react-remove-scroll@2.5.5(@types/react@18.3.4)(react@18.3.1): + resolution: {integrity: sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==} + engines: {node: '>=10'} + peerDependencies: + '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@types/react': 18.3.4 + react: 18.3.1 + react-remove-scroll-bar: 2.3.6(@types/react@18.3.4)(react@18.3.1) + react-style-singleton: 2.2.1(@types/react@18.3.4)(react@18.3.1) + tslib: 2.6.2 + use-callback-ref: 1.3.2(@types/react@18.3.4)(react@18.3.1) + use-sidecar: 1.1.2(@types/react@18.3.4)(react@18.3.1) + dev: true + /react-style-singleton@2.2.1(@types/react@18.3.3)(react@18.3.1): resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==} engines: {node: '>=10'} @@ -10599,6 +10994,23 @@ packages: tslib: 2.6.2 dev: true + /react-style-singleton@2.2.1(@types/react@18.3.4)(react@18.3.1): + resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==} + engines: {node: '>=10'} + peerDependencies: + '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@types/react': 18.3.4 + get-nonce: 1.0.1 + invariant: 2.2.4 + react: 18.3.1 + tslib: 2.6.2 + dev: true + /react-tooltip@5.26.3(react-dom@18.3.1)(react@18.3.1): resolution: {integrity: sha512-MpYAws8CEHUd/RC4GaDCdoceph/T4KHM5vS5Dbk8FOmLMvvIht2ymP2htWdrke7K6lqPO8rz8+bnwWUIXeDlzg==} peerDependencies: @@ -12117,8 +12529,8 @@ packages: resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==} dev: true - /undici-types@6.18.2: - resolution: {integrity: sha512-5ruQbENj95yDYJNS3TvcaxPMshV7aizdv/hWYjGIKoANWKjhWNBsr2YEuYZKodQulB1b8l7ILOuDQep3afowQQ==} + /undici-types@6.19.8: + resolution: {integrity: sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==} dev: true /unicode-canonical-property-names-ecmascript@2.0.0: @@ -12246,6 +12658,21 @@ packages: tslib: 2.6.2 dev: true + /use-callback-ref@1.3.2(@types/react@18.3.4)(react@18.3.1): + resolution: {integrity: sha512-elOQwe6Q8gqZgDA8mrh44qRTQqpIHDcZ3hXTLjBe1i4ph8XpNJnO+aQf3NaG+lriLopI4HMx9VjQLfPQ6vhnoA==} + engines: {node: '>=10'} + peerDependencies: + '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@types/react': 18.3.4 + react: 18.3.1 + tslib: 2.6.2 + dev: true + /use-sidecar@1.1.2(@types/react@18.3.3)(react@18.3.1): resolution: {integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==} engines: {node: '>=10'} @@ -12262,6 +12689,22 @@ packages: tslib: 2.6.2 dev: true + /use-sidecar@1.1.2(@types/react@18.3.4)(react@18.3.1): + resolution: {integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==} + engines: {node: '>=10'} + peerDependencies: + '@types/react': ^16.9.0 || ^17.0.0 || ^18.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + '@types/react': + optional: true + dependencies: + '@types/react': 18.3.4 + detect-node-es: 1.1.0 + react: 18.3.1 + tslib: 2.6.2 + dev: true + /use-sync-external-store@1.2.0(react@18.2.0): resolution: {integrity: sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==} peerDependencies: From 3b7a92ebda94413928239f14b1c06185beab95e8 Mon Sep 17 00:00:00 2001 From: FrancoAguzzi Date: Wed, 28 Aug 2024 21:13:52 -0300 Subject: [PATCH 21/26] feat: import Tooltip from namekit-react in nameguard-react comps --- packages/nameguard-react/package.json | 1 - .../src/components/ReportLoadingIcon/ReportLoadingIcon.tsx | 2 +- .../src/components/ReportUnknownIcon/ReportUnknownIcon.tsx | 2 +- 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/nameguard-react/package.json b/packages/nameguard-react/package.json index 000d69728..6e948a3ba 100644 --- a/packages/nameguard-react/package.json +++ b/packages/nameguard-react/package.json @@ -41,7 +41,6 @@ "@heroicons/react": "2.0.18", "@namehash/ens-utils": "workspace:*", "@namehash/ens-webfont": "workspace:*", - "@namehash/namekit-react": "workspace:*", "@namehash/nameguard": "workspace:*", "@namehash/namekit-react": "workspace:*", "classcat": "5.0.4", diff --git a/packages/nameguard-react/src/components/ReportLoadingIcon/ReportLoadingIcon.tsx b/packages/nameguard-react/src/components/ReportLoadingIcon/ReportLoadingIcon.tsx index 929ea4aef..a5fde1e31 100644 --- a/packages/nameguard-react/src/components/ReportLoadingIcon/ReportLoadingIcon.tsx +++ b/packages/nameguard-react/src/components/ReportLoadingIcon/ReportLoadingIcon.tsx @@ -1,6 +1,6 @@ import React from "react"; -import { Tooltip } from "../Tooltip/Tooltip"; +import { Tooltip } from "@namehash/namekit-react"; import { RatingIconSize } from "../Report/RatingIcon"; import { RatingLoadingIcon } from "../icons/RatingLoadingIcon"; diff --git a/packages/nameguard-react/src/components/ReportUnknownIcon/ReportUnknownIcon.tsx b/packages/nameguard-react/src/components/ReportUnknownIcon/ReportUnknownIcon.tsx index c902cf927..05c0927ef 100644 --- a/packages/nameguard-react/src/components/ReportUnknownIcon/ReportUnknownIcon.tsx +++ b/packages/nameguard-react/src/components/ReportUnknownIcon/ReportUnknownIcon.tsx @@ -1,6 +1,6 @@ import React from "react"; -import { Tooltip } from "../Tooltip/Tooltip"; +import { Tooltip } from "@namehash/namekit-react"; import { RatingIconSize } from "../Report/RatingIcon"; import { RatingUnknownIcon } from "../icons/RatingUnknownIcon"; From 15c15e869e838cd9d1da53cf0feaef5178b4364e Mon Sep 17 00:00:00 2001 From: FrancoAguzzi Date: Tue, 10 Sep 2024 11:46:23 -0300 Subject: [PATCH 22/26] feat: update Tooltip imports to be in alignment with new Tooltip export method --- .../src/components/Report/CheckResultCodeIcon.tsx | 2 +- .../src/components/ReportLoadingIcon/ReportLoadingIcon.tsx | 2 +- .../src/components/ReportUnknownIcon/ReportUnknownIcon.tsx | 2 +- packages/nameguard-react/src/components/Share/Share.tsx | 2 +- .../src/components/UnknownReportIcon/UnknownReportIcon.tsx | 2 +- packages/namekit-react/tsup.config.js | 1 - 6 files changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/nameguard-react/src/components/Report/CheckResultCodeIcon.tsx b/packages/nameguard-react/src/components/Report/CheckResultCodeIcon.tsx index 2f30e97c8..68339987d 100644 --- a/packages/nameguard-react/src/components/Report/CheckResultCodeIcon.tsx +++ b/packages/nameguard-react/src/components/Report/CheckResultCodeIcon.tsx @@ -1,6 +1,6 @@ import React from "react"; -import { Tooltip } from "@namehash/namekit-react/client"; import { CheckResultCode } from "@namehash/nameguard"; +import { Tooltip } from "@namehash/namekit-react/client"; import { CheckResultCodePassIcon } from "../icons/CheckResultCodePassIcon"; import { CheckResultCodeWarnIcon } from "../icons/CheckResultCodeWarnIcon"; import { CheckResultCodeAlertIcon } from "../icons/CheckResultCodeAlertIcon"; diff --git a/packages/nameguard-react/src/components/ReportLoadingIcon/ReportLoadingIcon.tsx b/packages/nameguard-react/src/components/ReportLoadingIcon/ReportLoadingIcon.tsx index a5fde1e31..cda97bf49 100644 --- a/packages/nameguard-react/src/components/ReportLoadingIcon/ReportLoadingIcon.tsx +++ b/packages/nameguard-react/src/components/ReportLoadingIcon/ReportLoadingIcon.tsx @@ -1,6 +1,6 @@ import React from "react"; -import { Tooltip } from "@namehash/namekit-react"; +import { Tooltip } from "@namehash/namekit-react/client"; import { RatingIconSize } from "../Report/RatingIcon"; import { RatingLoadingIcon } from "../icons/RatingLoadingIcon"; diff --git a/packages/nameguard-react/src/components/ReportUnknownIcon/ReportUnknownIcon.tsx b/packages/nameguard-react/src/components/ReportUnknownIcon/ReportUnknownIcon.tsx index 05c0927ef..46ad08b86 100644 --- a/packages/nameguard-react/src/components/ReportUnknownIcon/ReportUnknownIcon.tsx +++ b/packages/nameguard-react/src/components/ReportUnknownIcon/ReportUnknownIcon.tsx @@ -1,6 +1,6 @@ import React from "react"; -import { Tooltip } from "@namehash/namekit-react"; +import { Tooltip } from "@namehash/namekit-react/client"; import { RatingIconSize } from "../Report/RatingIcon"; import { RatingUnknownIcon } from "../icons/RatingUnknownIcon"; diff --git a/packages/nameguard-react/src/components/Share/Share.tsx b/packages/nameguard-react/src/components/Share/Share.tsx index 529b32d50..e8b1a3a83 100644 --- a/packages/nameguard-react/src/components/Share/Share.tsx +++ b/packages/nameguard-react/src/components/Share/Share.tsx @@ -11,8 +11,8 @@ import { toast } from "sonner"; import { IconButton } from "@namehash/namekit-react"; import cc from "classcat"; -import { CheckResultCode } from "@namehash/nameguard"; import { Tooltip } from "@namehash/namekit-react/client"; +import { CheckResultCode } from "@namehash/nameguard"; import { checkResultCodeTextColor } from "../../utils/text"; import { DisplayedName } from "../DisplayedName/DisplayedName"; import { buildENSName } from "@namehash/ens-utils"; diff --git a/packages/nameguard-react/src/components/UnknownReportIcon/UnknownReportIcon.tsx b/packages/nameguard-react/src/components/UnknownReportIcon/UnknownReportIcon.tsx index cfff3e664..1aa5419c4 100644 --- a/packages/nameguard-react/src/components/UnknownReportIcon/UnknownReportIcon.tsx +++ b/packages/nameguard-react/src/components/UnknownReportIcon/UnknownReportIcon.tsx @@ -1,6 +1,6 @@ import React from "react"; -import { Tooltip } from "@namehash/namekit-react/client"; +import { Tooltip } from "@namehash/namekit-react"; import { RatingIconSize } from "../Report/RatingIcon"; import { RatingUnknownIcon } from "../icons/RatingUnknownIcon"; diff --git a/packages/namekit-react/tsup.config.js b/packages/namekit-react/tsup.config.js index cc4e713ce..eb309e9b8 100644 --- a/packages/namekit-react/tsup.config.js +++ b/packages/namekit-react/tsup.config.js @@ -12,5 +12,4 @@ export default defineConfig({ minify: false, clean: true, skipNodeModulesBundle: true, - dts: true, }); From ea54703e42574c2e05908414a872c816fecc488b Mon Sep 17 00:00:00 2001 From: "lightwalker.eth" <126201998+lightwalker-eth@users.noreply.github.com> Date: Thu, 12 Sep 2024 18:39:55 +0200 Subject: [PATCH 23/26] Fix PR 282 (#395) * Fix PR 282 * Update sharing and report URL generation * Many additional enhancements * Misc small fixes * Apply suggested update --- .changeset/dry-spoons-invite.md | 2 +- .changeset/fair-pumas-chew.md | 2 +- .../app/components/ImpersonationReport.tsx | 4 +- .../nameguard.io/src/app/docs/report/page.tsx | 441 +++--------------- .../src/components/organisms/HeroCarousel.tsx | 6 +- .../LoadingReportIcon/ReportLoadingIcon.tsx | 65 --- .../src/components/Report/Report.tsx | 4 +- .../Report/ReportModalNameBadge.tsx | 30 +- .../src/components/ReportBadge/index.tsx | 205 ++++---- .../src/components/ReportIcon/index.tsx | 274 ++++++----- .../ReportLoadingIcon/ReportLoadingIcon.tsx | 65 --- .../ReportUnknownIcon/ReportUnknownIcon.tsx | 66 --- .../components/Search/SearchEmptyState.tsx | 10 +- .../src/components/Share/Share.tsx | 30 +- .../UnknownReportIcon/UnknownReportIcon.tsx | 50 -- packages/nameguard-react/src/index.ts | 3 +- .../nameguard-react/src/utils/openreport.ts | 16 + .../nameguard-react/src/utils/url.test.ts | 12 +- packages/nameguard-react/src/utils/url.ts | 16 +- 19 files changed, 355 insertions(+), 946 deletions(-) delete mode 100644 packages/nameguard-react/src/components/LoadingReportIcon/ReportLoadingIcon.tsx delete mode 100644 packages/nameguard-react/src/components/ReportLoadingIcon/ReportLoadingIcon.tsx delete mode 100644 packages/nameguard-react/src/components/ReportUnknownIcon/ReportUnknownIcon.tsx delete mode 100644 packages/nameguard-react/src/components/UnknownReportIcon/UnknownReportIcon.tsx create mode 100644 packages/nameguard-react/src/utils/openreport.ts diff --git a/.changeset/dry-spoons-invite.md b/.changeset/dry-spoons-invite.md index e1763d934..a4fe46a11 100644 --- a/.changeset/dry-spoons-invite.md +++ b/.changeset/dry-spoons-invite.md @@ -2,4 +2,4 @@ "@namehash/nameguard-react": minor --- -Add onIcon, onTooltip and onBadge click handlers for Report components +Add custom onOpenReport handlers for Report components diff --git a/.changeset/fair-pumas-chew.md b/.changeset/fair-pumas-chew.md index c69a852e5..63c8757a1 100644 --- a/.changeset/fair-pumas-chew.md +++ b/.changeset/fair-pumas-chew.md @@ -3,4 +3,4 @@ "@namehash/nameguard": minor --- -Use new function getNameGuardURLForENSname from @namehash/nameguard where possible +Add custom getReportURL handlers for Report components diff --git a/apps/examples.nameguard.io/src/app/components/ImpersonationReport.tsx b/apps/examples.nameguard.io/src/app/components/ImpersonationReport.tsx index 8850dd050..8b1af4297 100644 --- a/apps/examples.nameguard.io/src/app/components/ImpersonationReport.tsx +++ b/apps/examples.nameguard.io/src/app/components/ImpersonationReport.tsx @@ -4,7 +4,7 @@ import { type SecurePrimaryNameResult } from "@namehash/nameguard"; import { RatingIcon, RatingIconSize, - viewNameReportURL, + getReportURL, ratingTextColor, RatingLoadingIcon, } from "@namehash/nameguard-react"; @@ -69,7 +69,7 @@ export function ImpersonationReport({ data }: ImpersonationReportProps) {

{ + alert(`Example of custom logic to handle a request to open a NameGuard report for name "${name.displayName}".`); +}; + export default function ReportDocsPage() { return (
@@ -36,35 +40,35 @@ export default function ReportDocsPage() {
@@ -76,35 +80,35 @@ export default function ReportDocsPage() {
@@ -116,35 +120,35 @@ export default function ReportDocsPage() {
@@ -156,205 +160,76 @@ export default function ReportDocsPage() {
- 
{""}
-
- -
- - alert(`${ensName.name} - icon click`) - } - /> -
-
- - alert(`${ensName.name} - icon click`) - } - /> -
-
- - alert(`${ensName.name} - icon click`) - } - /> -
-
- - alert(`${ensName.name} - icon click`) - } - /> -
-
- - alert(`${ensName.name} - icon click`) - } - /> -
-
-
-
- 
{""}
-
- -
- - alert(`${ensName.name} - tooltip click`) - } - /> -
-
- - alert(`${ensName.name} - tooltip click`) - } - /> -
-
- - alert(`${ensName.name} - tooltip click`) - } - /> -
-
- - alert(`${ensName.name} - tooltip click`) - } - /> -
-
- - alert(`${ensName.name} - tooltip click`) - } - /> -
-
-
-
- 
-                {
-                  ""
-                }
-
+ 
{""}
- alert(`${ensName.name} - tooltip click`) - } - onIconClickOverride={(ensName: ENSName) => - alert(`${ensName.name} - icon click`) - } + onOpenReport={customOpenReportHandler} />
- alert(`${ensName.name} - tooltip click`) - } - onIconClickOverride={(ensName: ENSName) => - alert(`${ensName.name} - icon click`) - } + onOpenReport={customOpenReportHandler} />
- alert(`${ensName.name} - tooltip click`) - } - onIconClickOverride={(ensName: ENSName) => - alert(`${ensName.name} - icon click`) - } + onOpenReport={customOpenReportHandler} />
- alert(`${ensName.name} - tooltip click`) - } - onIconClickOverride={(ensName: ENSName) => - alert(`${ensName.name} - icon click`) - } + onOpenReport={customOpenReportHandler} />
- alert(`${ensName.name} - tooltip click`) - } - onIconClickOverride={(ensName: ENSName) => - alert(`${ensName.name} - icon click`) - } + name={getExampleReportName()} + onOpenReport={customOpenReportHandler} />
@@ -384,272 +259,72 @@ export default function ReportDocsPage() {
- +
- 
{""}
+ 
{""}
- alert(`${ensName.name} - badge click`) - } + onOpenReport={customOpenReportHandler} />
- alert(`${ensName.name} - badge click`) - } + onOpenReport={customOpenReportHandler} />
- alert(`${ensName.name} - badge click`) - } + onOpenReport={customOpenReportHandler} />
- alert(`${ensName.name} - badge click`) - } + onOpenReport={customOpenReportHandler} />
- alert(`${ensName.name} - badge click`) - } - /> -
-
-
-
-
- 
{""}
-
-
- -
- - alert(`${ensName.name} - icon click`) - } - /> -
-
- - alert(`${ensName.name} - icon click`) - } - /> -
-
- - alert(`${ensName.name} - icon click`) - } - /> -
-
- - alert(`${ensName.name} - icon click`) - } - /> -
-
- - alert(`${ensName.name} - icon click`) - } - /> -
-
-
-
-
- 
{""}
-
-
- -
- - alert(`${ensName.name} - tooltip click`) - } - /> -
-
- - alert(`${ensName.name} - tooltip click`) - } - /> -
-
- - alert(`${ensName.name} - tooltip click`) - } - /> -
-
- - alert(`${ensName.name} - tooltip click`) - } - /> -
-
- - alert(`${ensName.name} - tooltip click`) - } - /> -
-
-
-
-
- 
-                {
-                  ""
-                }
-
-
-
- -
- - alert(`${ensName.name} - badge click`) - } - onIconClickOverride={(ensName: ENSName) => - alert(`${ensName.name} - icon click`) - } - onTooltipClickOverride={(ensName: ENSName) => - alert(`${ensName.name} - tooltip click`) - } - /> -
-
- - alert(`${ensName.name} - badge click`) - } - onIconClickOverride={(ensName: ENSName) => - alert(`${ensName.name} - icon click`) - } - onTooltipClickOverride={(ensName: ENSName) => - alert(`${ensName.name} - tooltip click`) - } - /> -
-
- - alert(`${ensName.name} - badge click`) - } - onIconClickOverride={(ensName: ENSName) => - alert(`${ensName.name} - icon click`) - } - onTooltipClickOverride={(ensName: ENSName) => - alert(`${ensName.name} - tooltip click`) - } - /> -
-
- - alert(`${ensName.name} - badge click`) - } - onIconClickOverride={(ensName: ENSName) => - alert(`${ensName.name} - icon click`) - } - onTooltipClickOverride={(ensName: ENSName) => - alert(`${ensName.name} - tooltip click`) - } - /> -
-
- - alert(`${ensName.name} - badge click`) - } - onIconClickOverride={(ensName: ENSName) => - alert(`${ensName.name} - icon click`) - } - onTooltipClickOverride={(ensName: ENSName) => - alert(`${ensName.name} - tooltip click`) - } + name={getExampleReportName()} + onOpenReport={customOpenReportHandler} />
@@ -662,31 +337,31 @@ export default function ReportDocsPage() {
- +
diff --git a/apps/nameguard.io/src/components/organisms/HeroCarousel.tsx b/apps/nameguard.io/src/components/organisms/HeroCarousel.tsx index eeaff873f..58519a4f6 100644 --- a/apps/nameguard.io/src/components/organisms/HeroCarousel.tsx +++ b/apps/nameguard.io/src/components/organisms/HeroCarousel.tsx @@ -50,9 +50,10 @@ export async function HeroCarousel() { */} {data?.results?.map((report, index) => ( ))} {/* @@ -62,9 +63,10 @@ export async function HeroCarousel() { */} {data?.results?.map((report, index) => ( ))}
diff --git a/packages/nameguard-react/src/components/LoadingReportIcon/ReportLoadingIcon.tsx b/packages/nameguard-react/src/components/LoadingReportIcon/ReportLoadingIcon.tsx deleted file mode 100644 index 47142826b..000000000 --- a/packages/nameguard-react/src/components/LoadingReportIcon/ReportLoadingIcon.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import React from "react"; - -import { Tooltip } from "../Tooltip/Tooltip"; -import { RatingIcon, RatingIconSize } from "../Report/RatingIcon"; -import { RatingLoadingIcon } from "../icons/RatingLoadingIcon"; - -type ReportLoadingIconProps = { - onIconClickOverride?: (mouseEvent: React.MouseEvent) => void; - onTooltipClickOverride?: (mouseEvent: React.MouseEvent) => void; - size?: RatingIconSize; -} & React.ComponentProps<"svg">; - -export const ReportLoadingIcon = ({ - onIconClickOverride, - onTooltipClickOverride, - size = RatingIconSize.small, - - /* - Props are applied to the RatingLoadingIcon trigger 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 received are passed to the RatingLoadingIcon - that when hovered, displays the tooltip with the report information. - */ - ...props -}: ReportLoadingIconProps) => { - return ( - { - if (e) e.stopPropagation(); - onIconClickOverride(e); - }, - ...props, - })} - > -
-
- -
- -
-
- - Loading report... - -
- -
- -
-
-
- - ); -}; diff --git a/packages/nameguard-react/src/components/Report/Report.tsx b/packages/nameguard-react/src/components/Report/Report.tsx index cf7126103..39c76d11d 100644 --- a/packages/nameguard-react/src/components/Report/Report.tsx +++ b/packages/nameguard-react/src/components/Report/Report.tsx @@ -1,7 +1,7 @@ import React, { Fragment, useMemo } from "react"; import useSWR from "swr"; import { type NameGuardReport, nameguard, Rating } from "@namehash/nameguard"; -import { parseName, Normalization } from "@namehash/ens-utils"; +import { parseName, Normalization, buildENSName } from "@namehash/ens-utils"; import { Toaster } from "sonner"; import { type Settings } from "../../stores/settings"; @@ -118,7 +118,7 @@ export const Report = ({ {data && externalLinks && (
- +
)} diff --git a/packages/nameguard-react/src/components/Report/ReportModalNameBadge.tsx b/packages/nameguard-react/src/components/Report/ReportModalNameBadge.tsx index 5e13ced10..9a068bbb5 100644 --- a/packages/nameguard-react/src/components/Report/ReportModalNameBadge.tsx +++ b/packages/nameguard-react/src/components/Report/ReportModalNameBadge.tsx @@ -1,32 +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 "../.."; +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)} - onBadgeClickOverride={(ensName: ENSName) => openModal(ensName.name)} - onTooltipClickOverride={(ensName: ENSName) => 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 f1b903854..c5bda30dc 100644 --- a/packages/nameguard-react/src/components/ReportBadge/index.tsx +++ b/packages/nameguard-react/src/components/ReportBadge/index.tsx @@ -1,155 +1,114 @@ "use client"; -import { redirectToViewNameReportURL } from "../../utils/url"; + import { type ConsolidatedNameGuardReport } from "@namehash/nameguard"; import { ENSName } from "@namehash/ens-utils"; -import React, { useEffect } from "react"; -import cc from "classcat"; +import React from "react"; import { ReportIcon } from "../ReportIcon/index"; import { RatingIconSize, DisplayedName } from "../.."; -import { ReportUnknownIcon } from "../ReportUnknownIcon/ReportUnknownIcon"; -import { ReportLoadingIcon } from "../ReportLoadingIcon/ReportLoadingIcon"; +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; - onIconClickOverride?: (ensName: ENSName) => void; - onBadgeClickOverride?: (ensName: ENSName) => void; - onTooltipClickOverride?: (ensName: ENSName) => void; + /** + * 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; - /* - 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 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_ENSNAME_DISPLAY_WIDTH = 200; - -enum ClickHandlerFor { - badge, - icon, - tooltip, -} +const DEFAULT_MAX_NAME_DISPLAY_WIDTH = 200; export function ReportBadge({ + name, data, - ensName, - onIconClickOverride, - onBadgeClickOverride, - onTooltipClickOverride, hadLoadingError = false, displayUnnormalizedNames = false, - maxDisplayWidth = DEFAULT_MAX_ENSNAME_DISPLAY_WIDTH, + 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 = (clickHandlerFor: ClickHandlerFor) => { - switch (clickHandlerFor) { - case ClickHandlerFor.badge: - if (onBadgeClickOverride) { - onBadgeClickOverride(ensName); - } else { - redirectToViewNameReportURL(ensName); - } - break; - case ClickHandlerFor.icon: - if (onIconClickOverride) { - onIconClickOverride(ensName); - } else { - redirectToViewNameReportURL(ensName); - } - break; - case ClickHandlerFor.tooltip: - if (onTooltipClickOverride) { - onTooltipClickOverride(ensName); - } else { - redirectToViewNameReportURL(ensName); - } - break; - } - }; - - 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 ( ); } diff --git a/packages/nameguard-react/src/components/ReportIcon/index.tsx b/packages/nameguard-react/src/components/ReportIcon/index.tsx index f0c67503a..aa7525c0f 100644 --- a/packages/nameguard-react/src/components/ReportIcon/index.tsx +++ b/packages/nameguard-react/src/components/ReportIcon/index.tsx @@ -1,58 +1,73 @@ "use client"; import React, { useEffect } from "react"; -import { - CheckResultCode, - ConsolidatedNameGuardReport, -} from "@namehash/nameguard"; +import { ConsolidatedNameGuardReport } from "@namehash/nameguard"; import cc from "classcat"; import { ENSName } from "@namehash/ens-utils"; -import { Button } from "@namehash/namekit-react"; +import { Link } from "@namehash/namekit-react"; import { Tooltip } from "@namehash/namekit-react/client"; import { RatingIcon, RatingIconSize } from "../Report/RatingIcon"; -import { checkResultCodeTextColor, ratingTextColor } from "../../utils/text"; -import { ReportUnknownIcon } from "../ReportUnknownIcon/ReportUnknownIcon"; -import { ReportLoadingIcon } from "../ReportLoadingIcon/ReportLoadingIcon"; -import { redirectToViewNameReportURL } from "../../utils/url"; - -type ReportShieldProps = { - onIconClickOverride?: (ensName: ENSName) => void; - onTooltipClickOverride?: (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; +import { ratingTextColor } from "../../utils/text"; +import { OpenReportHandler, openReport } from "../../utils/openreport"; +import { RatingUnknownIcon } from "../icons/RatingUnknownIcon"; +import { RatingLoadingIcon } from "../icons/RatingLoadingIcon"; + +interface ReportShieldProps { + /** + * The `ENSName` that this `ReportIcon` is related to. + * + * Used to provide functionality even when the `data` prop is `undefined` + * (such as during data loading). + */ + name: 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; - size?: RatingIconSize; -} & React.ComponentProps<"svg">; -declare global { - interface Window { - location: Location; - } -} + /** + * The size of the `RatingIcon` to display. + * + * @default RatingIconSize.small + */ + size?: RatingIconSize; -enum ClickHandlerFor { - icon, - tooltip, + /** + * The custom `OpenReportHandler` to call when: + * - The report icon is clicked. + * - The link to inspect the name for details in the tooltip is clicked. + * + * If `undefined`, the default `OpenReportHandler` will be used. + * + * @default undefined + */ + onOpenReport?: OpenReportHandler; } export function ReportIcon({ + name, data, - ensName, - hadLoadingError, - onIconClickOverride, - onTooltipClickOverride, + hadLoadingError = false, size = RatingIconSize.small, + onOpenReport, /* Props are applied to the Report Icon triggeer which is the onHover trigger element @@ -63,127 +78,98 @@ export function ReportIcon({ */ ...props }: ReportShieldProps) { - const onClickHandler = (clickHandlerFor: ClickHandlerFor) => { - switch (clickHandlerFor) { - case ClickHandlerFor.icon: - if (onIconClickOverride) { - onIconClickOverride(ensName); - } else { - redirectToViewNameReportURL(ensName); - } - break; - case ClickHandlerFor.tooltip: - if (onTooltipClickOverride) { - onTooltipClickOverride(ensName); - } else { - redirectToViewNameReportURL(ensName); - } - break; + useEffect(() => { + if (data) { + if (data.name !== name.name) { + throw new Error( + `ReportIcon error: The name in the provided data: "${data.name}" does not match the expected name "${name.name}".`, + ); + } } - }; + }, [data]); + + let icon: React.ReactNode; + let tooltipIcon: React.ReactNode; + let tooltipTitleClass: string; + let tooltipTitle: string; + let tooltipSubtitle: string | undefined; + let tooltipMessage: string | undefined; if (hadLoadingError) { - return ( - { - if (e) e.stopPropagation(); - onClickHandler(ClickHandlerFor.icon); - }} - onTooltipClickOverride={(e?: React.MouseEvent) => { - if (e) e.stopPropagation(); - onClickHandler(ClickHandlerFor.tooltip); - }} + icon = ; + tooltipIcon = ; + tooltipTitleClass = "font-semibold mb-1 text-white"; + tooltipTitle = "Error loading report"; + } else if (!data) { + // TODO: an isInteractive prop is planned to be added to `RatingLoadingIcon` + // in https://app.shortcut.com/ps-web3/story/25745/refine-loading-state-of-ratingicon + icon = ; + // TODO: the need to pass this `fill` prop is planned to be removed in + // https://app.shortcut.com/ps-web3/story/25745/refine-loading-state-of-ratingicon + tooltipIcon = ( + ); - } + tooltipTitleClass = "font-semibold mb-1 text-white"; + tooltipTitle = "Loading report..."; + } else { + const { title, subtitle, rating, risk_count, highest_risk } = data; - if (!data) { - return ( - { - if (e) e.stopPropagation(); - onClickHandler(ClickHandlerFor.icon); - }} - onTooltipClickOverride={(e?: React.MouseEvent) => { - if (e) e.stopPropagation(); - onClickHandler(ClickHandlerFor.tooltip); - }} - /> + icon = ( + + ); + tooltipIcon = ( + ); + tooltipTitleClass = cc(["font-semibold mb-1", ratingTextColor(rating)]); + tooltipTitle = title; + if (risk_count >= 1) { + tooltipSubtitle = `${risk_count} risk${risk_count !== 1 ? "s" : ""} detected`; + } + tooltipMessage = highest_risk?.message || subtitle; } - 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 iconButton = ( +
openReport(name, onOpenReport)}> + {icon} +
+ ); - const { title, subtitle, rating, risk_count, highest_risk } = data; - - const textClass = cc(["font-semibold mb-1", ratingTextColor(rating)]); - - return ( - { - if (e) e.stopPropagation(); - onClickHandler(ClickHandlerFor.icon); - }} - className="cursor-pointer" - rating={rating} - size={size} - {...props} - /> - } - > -
-
- -
+ const minTooltipWidth = tooltipSubtitle ? 300 : 200; -
-
- {title} - {risk_count >= 1 && ( - - {risk_count} risk{risk_count !== 1 && "s"} detected - - )} -
+ const tooltip = ( +
+
{tooltipIcon}
-
- {highest_risk?.message || subtitle} -
+
+
+ {tooltipTitle} + {tooltipSubtitle && ( + + {tooltipSubtitle} + + )} +
-
- + {tooltipMessage && ( +
+ {tooltipMessage}
-
+ )} + + openReport(name, onOpenReport)} + variant="underline" + size="small" + > + Inspect name for details +
- +
); + + return {tooltip}; } diff --git a/packages/nameguard-react/src/components/ReportLoadingIcon/ReportLoadingIcon.tsx b/packages/nameguard-react/src/components/ReportLoadingIcon/ReportLoadingIcon.tsx deleted file mode 100644 index cda97bf49..000000000 --- a/packages/nameguard-react/src/components/ReportLoadingIcon/ReportLoadingIcon.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import React from "react"; - -import { Tooltip } from "@namehash/namekit-react/client"; -import { RatingIconSize } from "../Report/RatingIcon"; -import { RatingLoadingIcon } from "../icons/RatingLoadingIcon"; - -type ReportLoadingIconProps = { - onIconClickOverride?: (mouseEvent: React.MouseEvent) => void; - onTooltipClickOverride?: (mouseEvent: React.MouseEvent) => void; - size?: RatingIconSize; -} & React.ComponentProps<"svg">; - -export const ReportLoadingIcon = ({ - onIconClickOverride, - onTooltipClickOverride, - size = RatingIconSize.small, - - /* - Props are applied to the RatingLoadingIcon trigger 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 received are passed to the RatingLoadingIcon - that when hovered, displays the tooltip with the report information. - */ - ...props -}: ReportLoadingIconProps) => { - return ( - { - if (e) e.stopPropagation(); - onIconClickOverride(e); - }, - ...props, - })} - > -
-
- -
- -
-
- - Loading report... - -
- -
- -
-
-
- - ); -}; diff --git a/packages/nameguard-react/src/components/ReportUnknownIcon/ReportUnknownIcon.tsx b/packages/nameguard-react/src/components/ReportUnknownIcon/ReportUnknownIcon.tsx deleted file mode 100644 index 46ad08b86..000000000 --- a/packages/nameguard-react/src/components/ReportUnknownIcon/ReportUnknownIcon.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import React from "react"; - -import { Tooltip } from "@namehash/namekit-react/client"; -import { RatingIconSize } from "../Report/RatingIcon"; -import { RatingUnknownIcon } from "../icons/RatingUnknownIcon"; - -type ReportUnknownIconProps = { - onIconClickOverride?: (mouseEvent: React.MouseEvent) => void; - onTooltipClickOverride?: (mouseEvent: React.MouseEvent) => void; - size?: RatingIconSize; -} & React.ComponentProps<"svg">; - -export const ReportUnknownIcon = ({ - onIconClickOverride, - onTooltipClickOverride, - size = RatingIconSize.small, - - /* - Props are applied to the RatingUnknownIcon trigger 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 received are passed to the RatingUnknownIcon - that when hovered, displays the tooltip with the report information. - */ - ...props -}: ReportUnknownIconProps) => { - return ( - { - if (e) e.stopPropagation(); - onIconClickOverride(e); - }, - ...props, - })} - > -
-
- -
- -
-
- - Error loading report - -
- -
- -
-
-
- - ); -}; diff --git a/packages/nameguard-react/src/components/Search/SearchEmptyState.tsx b/packages/nameguard-react/src/components/Search/SearchEmptyState.tsx index a92c30a9f..a55a442d5 100644 --- a/packages/nameguard-react/src/components/Search/SearchEmptyState.tsx +++ b/packages/nameguard-react/src/components/Search/SearchEmptyState.tsx @@ -130,17 +130,19 @@ export const SearchEmptyState = () => { {(hadLoadingError || isLoading) && examples.map((_, index) => ( ))} {data?.results?.map((report, index) => ( ))}
diff --git a/packages/nameguard-react/src/components/Share/Share.tsx b/packages/nameguard-react/src/components/Share/Share.tsx index e8b1a3a83..c7e13002e 100644 --- a/packages/nameguard-react/src/components/Share/Share.tsx +++ b/packages/nameguard-react/src/components/Share/Share.tsx @@ -15,16 +15,16 @@ import { Tooltip } from "@namehash/namekit-react/client"; import { CheckResultCode } from "@namehash/nameguard"; import { checkResultCodeTextColor } from "../../utils/text"; import { DisplayedName } from "../DisplayedName/DisplayedName"; -import { buildENSName } from "@namehash/ens-utils"; -import { viewNameReportURL } from "../../utils/url"; +import { buildENSName, ENSName } from "@namehash/ens-utils"; +import { ReportURLGenerator, getReportURL } from "../../utils/url"; type ShareProps = { - name: string; + name: ENSName; + generator?: ReportURLGenerator; }; -function createTwitterLink(name: string) { - const tweetText = `Check out the NameGuard Report for ${name}\n`; - const url = viewNameReportURL(buildENSName(name)).href; +function createTwitterLink(name: ENSName, url: string) { + const tweetText = `Check out the NameGuard Report for ${name.displayName}\n`; return `https://twitter.com/intent/tweet?text=${encodeURIComponent( tweetText, @@ -44,19 +44,19 @@ function createMailToLink(subject, body) { return `mailto:?subject=${subjectEncoded}&body=${bodyEncoded}`; } -export function Share({ name }: ShareProps) { +export function Share({ name, generator }: ShareProps) { const [isOpen, setIsOpen] = useState(false); - const twitterLink = createTwitterLink(name); - const telegramLink = createTelegramLink( - viewNameReportURL(buildENSName(name)).href, - ); + const targetUrl = getReportURL(name, generator).href; + + const twitterLink = createTwitterLink(name, targetUrl); + const telegramLink = createTelegramLink(targetUrl); const emailLink = createMailToLink( - `NameGuard Report for ${name}`, - `Check this out!\n${viewNameReportURL(buildENSName(name)).href}`, + `NameGuard Report for ${name.displayName}`, + `Check this out!\n${targetUrl}`, ); const copyLinkToClipboard = () => { - navigator.clipboard.writeText(viewNameReportURL(buildENSName(name)).href); + navigator.clipboard.writeText(targetUrl); toast.success("Link copied to clipboard", { icon: ( {name && ( )} diff --git a/packages/nameguard-react/src/components/UnknownReportIcon/UnknownReportIcon.tsx b/packages/nameguard-react/src/components/UnknownReportIcon/UnknownReportIcon.tsx deleted file mode 100644 index 1aa5419c4..000000000 --- a/packages/nameguard-react/src/components/UnknownReportIcon/UnknownReportIcon.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import React from "react"; - -import { Tooltip } from "@namehash/namekit-react"; -import { RatingIconSize } from "../Report/RatingIcon"; -import { RatingUnknownIcon } from "../icons/RatingUnknownIcon"; - -type UnknownShieldProps = { - size?: RatingIconSize; -} & React.ComponentProps<"svg">; - -export const UnknownReportIcon = ({ - 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 -}: UnknownShieldProps) => { - return ( - -
-
- -
- -
-
- - Unable to analyze - -
- -
- Refresh the page to try again. -
-
-
- - ); -}; diff --git a/packages/nameguard-react/src/index.ts b/packages/nameguard-react/src/index.ts index 1d363fc16..03e63e237 100644 --- a/packages/nameguard-react/src/index.ts +++ b/packages/nameguard-react/src/index.ts @@ -1,5 +1,6 @@ export { ratingTextColor, checkResultCodeTextColor } from "./utils/text"; -export { viewNameReportURL, redirectToViewNameReportURL } from "./utils/url"; +export { ReportURLGenerator, defaultReportURLGenerator, getReportURL, redirectToReport } from "./utils/url"; +export { OpenReportHandler, defaultOpenReportHandler, openReport } from "./utils/openreport"; export { Search } from "./components/Search/Search"; export { Report } from "./components/Report/Report"; export { SearchModal } from "./components/Search/SearchModal"; diff --git a/packages/nameguard-react/src/utils/openreport.ts b/packages/nameguard-react/src/utils/openreport.ts new file mode 100644 index 000000000..aa425b746 --- /dev/null +++ b/packages/nameguard-react/src/utils/openreport.ts @@ -0,0 +1,16 @@ +import { ENSName } from "@namehash/ens-utils"; +import { redirectToReport, ReportURLGenerator } from "./url"; + +export type OpenReportHandler = (name: ENSName, generator?: ReportURLGenerator) => void; + +export function defaultOpenReportHandler(name: ENSName, generator?: ReportURLGenerator): void { + redirectToReport(name, generator); +} + +export function openReport(name: ENSName, handler?: OpenReportHandler, generator?: ReportURLGenerator): void { + if (handler) { + handler(name, generator); + } else { + defaultOpenReportHandler(name, generator); + } +} diff --git a/packages/nameguard-react/src/utils/url.test.ts b/packages/nameguard-react/src/utils/url.test.ts index 5fe724de1..3f0c5078b 100644 --- a/packages/nameguard-react/src/utils/url.test.ts +++ b/packages/nameguard-react/src/utils/url.test.ts @@ -1,16 +1,16 @@ import { buildENSName } from "@namehash/ens-utils"; import { describe, it, expect } from "vitest"; -import { viewNameReportURL } from "./url"; +import { defaultReportURLGenerator } from "./url"; -describe("viewNameReportURL", () => { - it("should return correct NameGuard inspect name page URL for notrab.eth", () => { - const result = viewNameReportURL(buildENSName("notrab.eth")).href; +describe("defaultNameGuardReportUrl", () => { + it("returns default NameGuard report URL for notrab.eth", () => { + const result = defaultReportURLGenerator(buildENSName("notrab.eth")).href; const expectedResult = "https://nameguard.io/inspect/notrab.eth"; expect(result).toBe(expectedResult); }); - it("should return correct NameGuard inspect name page URL for 🐈‍⬛.eth", () => { - const result = viewNameReportURL(buildENSName("🐈‍⬛.eth")).href; + it("returns default NameGuard report URL for 🐈‍⬛.eth", () => { + const result = defaultReportURLGenerator(buildENSName("🐈‍⬛.eth")).href; const expectedResult = `https://nameguard.io/inspect/%F0%9F%90%88%E2%80%8D%E2%AC%9B.eth`; expect(result).toBe(expectedResult); diff --git a/packages/nameguard-react/src/utils/url.ts b/packages/nameguard-react/src/utils/url.ts index 0e6e0d94b..ddcc1e414 100644 --- a/packages/nameguard-react/src/utils/url.ts +++ b/packages/nameguard-react/src/utils/url.ts @@ -1,11 +1,21 @@ import { ENSName } from "@namehash/ens-utils"; -export function viewNameReportURL(ensName: ENSName): URL { +export type ReportURLGenerator = (name: ENSName) => URL; + +export function defaultReportURLGenerator(ensName: ENSName): URL { return new URL( `https://nameguard.io/inspect/${encodeURIComponent(ensName.name)}`, ); } -export function redirectToViewNameReportURL(ensName: ENSName) { - window.location.href = viewNameReportURL(ensName).href; +export function getReportURL(name: ENSName, generator?: ReportURLGenerator): URL { + if (generator) { + return generator(name); + } else { + return defaultReportURLGenerator(name); + } +} + +export function redirectToReport(ensName: ENSName, generator?: ReportURLGenerator) { + window.location.href = getReportURL(ensName, generator).href; } From 766e4c626c9f215b7968b063f720c1daedf7f8ce Mon Sep 17 00:00:00 2001 From: "lightwalker.eth" <126201998+lightwalker-eth@users.noreply.github.com> Date: Thu, 12 Sep 2024 21:26:17 +0300 Subject: [PATCH 24/26] Undo any changes to price.ts in this branch --- packages/ens-utils/src/price.ts | 89 ++++++++++----------------------- 1 file changed, 27 insertions(+), 62 deletions(-) diff --git a/packages/ens-utils/src/price.ts b/packages/ens-utils/src/price.ts index 69fcfa165..ee4bf4a0b 100644 --- a/packages/ens-utils/src/price.ts +++ b/packages/ens-utils/src/price.ts @@ -1,11 +1,8 @@ -import { - Currency, - PriceCurrencyFormat, - parseStringToCurrency, -} from "./currency"; +import { Currency, PriceCurrencyFormat, parseStringToCurrency } from "./currency"; import { approxScaleBigInt, stringToBigInt } from "./number"; export interface Price { + // TODO: consider adding a constraint where value is never negative /** * The value of the price. This is a BigInt to avoid floating point math issues when working with prices. @@ -26,21 +23,19 @@ export interface ExchangeRates extends Partial> {} /** * Builds a Price object. * @param value the value of the price. This is a BigInt to avoid floating point math issues when working with prices. - * For example, a price of 1.23 USD would be represented as 123n with a currency of USD. - * Note that the value is always in the smallest unit of the currency (e.g. cents for USD, wei for ETH). - * See the CurrencyConfig for the related currency for the number of decimals to use when converting the value to a human-readable format. - * @param currency - * @returns + * For example, a price of 1.23 USD would be represented as 123n with a currency of USD. + * Note that the value is always in the smallest unit of the currency (e.g. cents for USD, wei for ETH). + * See the CurrencyConfig for the related currency for the number of decimals to use when converting the value to a human-readable format. + * @param currency + * @returns */ -export const buildPrice = ( - value: bigint | string, - currency: Currency | string, -): Price => { - let priceValue: bigint; - let priceCurrency: Currency; +export const buildPrice = (value: bigint | string, currency: Currency | string): Price => { + + let priceValue : bigint; + let priceCurrency : Currency; if (typeof value === "string") { - priceValue = stringToBigInt(value); + priceValue = stringToBigInt(value) } else { priceValue = value; } @@ -52,7 +47,7 @@ export const buildPrice = ( } return { value: priceValue, currency: priceCurrency }; -}; +} export const priceAsNumber = (price: Price): number => { return ( @@ -66,12 +61,12 @@ export const numberAsPrice = (number: number, currency: Currency): Price => { // Fix the number's displayed decimals (e.g. from 0.00001 to 0.00001) const numberWithCorrectCurrencyDecimals = Number( - number.toFixed(currencyDecimals), + number.toFixed(currencyDecimals) ); // Remove the decimals from the number (e.g. from 0.00001 to 1) const numberWithoutDecimals = Number( - numberWithCorrectCurrencyDecimals * 10 ** currencyDecimals, + numberWithCorrectCurrencyDecimals * 10 ** currencyDecimals ).toFixed(0); /* @@ -107,7 +102,7 @@ export const addPrices = (prices: Array): Price => { export const subtractPrices = (price1: Price, price2: Price): Price => { if (price1.currency !== price2.currency) { throw new Error( - `Cannot subtract price of currency ${price1.currency} to price of currency ${price2.currency}`, + `Cannot subtract price of currency ${price1.currency} to price of currency ${price2.currency}` ); } else { return { @@ -128,44 +123,14 @@ export const multiplyPriceByNumber = (price1: Price, price2: number): Price => { }; }; -export const CurrencySymbology = { - /** - * The price will be displayed with the currency's acronym (e.g. USD). - */ - Acronym: "Acronym", - /** - * The price will be displayed with the currency's symbol (e.g. $). - */ - Symbol: "Symbol", -} as const; -export type CurrencySymbology = - (typeof CurrencySymbology)[keyof typeof CurrencySymbology]; - -/** - * Returns a string containing the currency's symbol or acronym. - * @param currency: Currency. The currency to get the symbology for (e.g. Currency.Eth) - * @param symbology: CurrencySymbology. The symbology to use (e.g. CurrencySymbology.Symbol) - * @returns: string. The currency's symbol or acronym (e.g. "$" or "USD") - */ -export const getCurrencySymbology = ( - currency: Currency, - symbology: CurrencySymbology, -): string => { - return symbology === CurrencySymbology.Acronym - ? PriceCurrencyFormat[currency].Acronym - : PriceCurrencyFormat[currency].Symbol; -}; - export const formattedPrice = ({ price, - withSufix = false, withPrefix = false, - symbology = CurrencySymbology.Symbol, + withSufix = false, }: { price: Price; withPrefix?: boolean; withSufix?: boolean; - symbology?: CurrencySymbology; }): string => { let formattedAmount = ""; const valueConsideringDecimals = ( @@ -185,7 +150,7 @@ export const formattedPrice = ({ ) { // If formatted number is 0.0 but real 'value' is not 0, then we show the Underflow price formattedAmount = String( - PriceCurrencyFormat[price.currency].MinDisplayValue, + PriceCurrencyFormat[price.currency].MinDisplayValue ); } else if (wouldDisplayAsZero && price.value == 0n) { // But if the real 'value' is really 0, then we show 0.00 (in the correct number of Display Decimals) @@ -193,7 +158,7 @@ export const formattedPrice = ({ formattedAmount = prefix.padEnd( Number(PriceCurrencyFormat[price.currency].DisplayDecimals) + prefix.length, - "0", + "0" ); } @@ -203,10 +168,10 @@ export const formattedPrice = ({ formattedAmount = displayNumber.toLocaleString("en-US", { minimumFractionDigits: Number( - PriceCurrencyFormat[price.currency].DisplayDecimals, + PriceCurrencyFormat[price.currency].DisplayDecimals ), maximumFractionDigits: Number( - PriceCurrencyFormat[price.currency].DisplayDecimals, + PriceCurrencyFormat[price.currency].DisplayDecimals ), }); @@ -215,10 +180,10 @@ export const formattedPrice = ({ } const prefixUnit = withPrefix - ? getCurrencySymbology(price.currency, symbology) + ? PriceCurrencyFormat[price.currency].Symbol : ""; const postfixUnit = withSufix - ? getCurrencySymbology(price.currency, symbology) + ? PriceCurrencyFormat[price.currency].Acronym : ""; let priceDisplay = @@ -232,7 +197,7 @@ export const formattedPrice = ({ export const approxScalePrice = ( price: Price, scaleFactor: number, - digitsOfPrecision = 20n, + digitsOfPrecision = 20n ): Price => { return { value: approxScaleBigInt(price.value, scaleFactor, digitsOfPrecision), @@ -243,13 +208,13 @@ export const approxScalePrice = ( export const convertCurrencyWithRates = ( fromPrice: Price, toCurrency: Currency, - exchangeRates: ExchangeRates, + exchangeRates: ExchangeRates ): Price => { if (typeof exchangeRates[toCurrency] === "undefined") { throw new Error(`Exchange rate for currency ${toCurrency} not found`); } else if (typeof exchangeRates[fromPrice.currency] === "undefined") { throw new Error( - `Exchange rate for currency ${fromPrice.currency} not found`, + `Exchange rate for currency ${fromPrice.currency} not found` ); } @@ -259,4 +224,4 @@ export const convertCurrencyWithRates = ( const exchangedValuePrice = numberAsPrice(exchangedValue, toCurrency); return exchangedValuePrice; -}; +}; \ No newline at end of file From 1ceabfe79e69d1037306a8f2183d18b8883ab55c Mon Sep 17 00:00:00 2001 From: "lightwalker.eth" <126201998+lightwalker-eth@users.noreply.github.com> Date: Thu, 12 Sep 2024 21:32:04 +0300 Subject: [PATCH 25/26] Remove changes to ens-utils from this branch --- .changeset/famous-jobs-wait.md | 1 - packages/ens-utils/.gitignore | 3 --- packages/ens-utils/src/ensname.ts | 6 +++--- packages/ens-utils/src/price.ts | 2 +- 4 files changed, 4 insertions(+), 8 deletions(-) delete mode 100644 packages/ens-utils/.gitignore diff --git a/.changeset/famous-jobs-wait.md b/.changeset/famous-jobs-wait.md index 68c60ce65..f2d03e894 100644 --- a/.changeset/famous-jobs-wait.md +++ b/.changeset/famous-jobs-wait.md @@ -1,6 +1,5 @@ --- "@namehash/nameguard-react": minor -"@namehash/ens-utils": minor --- Move NameGuard URL related logic to NameGuard React url.ts diff --git a/packages/ens-utils/.gitignore b/packages/ens-utils/.gitignore deleted file mode 100644 index c20a41dca..000000000 --- a/packages/ens-utils/.gitignore +++ /dev/null @@ -1,3 +0,0 @@ - -# dependencies -/node_modules diff --git a/packages/ens-utils/src/ensname.ts b/packages/ens-utils/src/ensname.ts index fbe4ecde2..bf4b957c5 100644 --- a/packages/ens-utils/src/ensname.ts +++ b/packages/ens-utils/src/ensname.ts @@ -266,7 +266,7 @@ export function getNamespaceRoot(name: ENSName): NamespaceRoot { * `unknown` if the decentralization status of the name is unknown. */ export function getDecentralizationStatus( - name: ENSName, + name: ENSName ): DecentralizationStatus { switch (getNamespaceRoot(name)) { case "ens": @@ -328,11 +328,11 @@ export function getRegistrationPotential(name: ENSName): RegistrationPotential { /** * Calculates the number of characters in a label. - * + * * NOTE: This length will be the same as determined by the EthRegistrarController smart contracts. * These contracts calculate length using the following code that counts Unicode characters in UTF-8 encoding. * https://github.com/ensdomains/ens-contracts/blob/staging/contracts/ethregistrar/StringUtils.sol - * + * * This length may be different than the traditional ".length" property of a string in JavaScript. * In Javascript, the ".length" property of a string returns the number of UTF-16 code units in that string. * UTF-16 represents Unicode characters with codepoints higher can fit within a 16 bit value as a "surrogate pair" diff --git a/packages/ens-utils/src/price.ts b/packages/ens-utils/src/price.ts index ee4bf4a0b..75ac307d2 100644 --- a/packages/ens-utils/src/price.ts +++ b/packages/ens-utils/src/price.ts @@ -224,4 +224,4 @@ export const convertCurrencyWithRates = ( const exchangedValuePrice = numberAsPrice(exchangedValue, toCurrency); return exchangedValuePrice; -}; \ No newline at end of file +}; From bc4192da1d85206ca2e39441b6b4980f9e56b67c Mon Sep 17 00:00:00 2001 From: "lightwalker.eth" <126201998+lightwalker-eth@users.noreply.github.com> Date: Thu, 12 Sep 2024 21:35:14 +0300 Subject: [PATCH 26/26] Remove changes to nameguard-sdk from this branch --- packages/nameguard-sdk/src/index.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/nameguard-sdk/src/index.test.ts b/packages/nameguard-sdk/src/index.test.ts index 3b1d535e7..4cf30ef6f 100644 --- a/packages/nameguard-sdk/src/index.test.ts +++ b/packages/nameguard-sdk/src/index.test.ts @@ -19,7 +19,7 @@ describe("NameGuard", () => { }); it("should fetch the UninspectedNameGuard report for a name that is too long", async () => { - const name = "a".repeat(MAX_INSPECTED_NAME_CHARACTERS + 1); + const name = "a".repeat(MAX_INSPECTED_NAME_CHARACTERS+1); const data = await nameguard.inspectName(name); expect(data.name).toBe(name);