@namehash/namehash-ui 1.5.0 → 1.5.1

package/dist/index.js

@@ -4275,9 +4275,6 @@ import { formatDistance, formatDistanceStrict as formatDistanceStrict2, fromUnix
 import { millisecondsInSecond } from "date-fns/constants";
 import { useEffect as useEffect3, useState as useState3 } from "react";
 
-// src/components/ui/tooltip.tsx
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-
 // src/utils/cn.ts
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
@@ -4286,8 +4283,8 @@ function cn(...inputs) {
 }
 
 // src/components/ui/tooltip.tsx
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
-var TooltipArrow = TooltipPrimitive.Arrow;
 function TooltipProvider({
   delayDuration = 0,
   ...props
@@ -4414,8 +4411,7 @@ function RelativeTime({
             }
           ),
           " ",
-          "(UTC)",
-          /* @__PURE__ */ jsx19(TooltipArrow, { width: 12, height: 8 })
+          "(UTC)"
         ]
       }
     )
@@ -5148,6 +5144,19 @@ function AddressDisplay({ address, className }) {
 import BoringAvatar from "boring-avatars";
 import * as React3 from "react";
 
+// src/utils/ensMetadata.ts
+import { ENSNamespaceIds } from "@ensnode/ensnode-sdk";
+function getEnsMetadataServiceAvatarUrl(name, namespaceId) {
+  switch (namespaceId) {
+    case ENSNamespaceIds.Mainnet:
+      return new URL(name, `https://metadata.ens.domains/mainnet/avatar/`);
+    case ENSNamespaceIds.Sepolia:
+      return new URL(name, `https://metadata.ens.domains/sepolia/avatar/`);
+    case ENSNamespaceIds.EnsTestEnv:
+      return null;
+  }
+}
+
 // src/components/ui/avatar.tsx
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import { jsx as jsx33 } from "react/jsx-runtime";
@@ -5175,19 +5184,6 @@ function AvatarImage({ className, ...props }) {
   );
 }
 
-// src/utils/ensMetadata.ts
-import { ENSNamespaceIds } from "@ensnode/ensnode-sdk";
-function getEnsMetadataServiceAvatarUrl(name, namespaceId) {
-  switch (namespaceId) {
-    case ENSNamespaceIds.Mainnet:
-      return new URL(name, `https://metadata.ens.domains/mainnet/avatar/`);
-    case ENSNamespaceIds.Sepolia:
-      return new URL(name, `https://metadata.ens.domains/sepolia/avatar/`);
-    case ENSNamespaceIds.EnsTestEnv:
-      return null;
-  }
-}
-
 // src/components/identity/EnsAvatar.tsx
 import { jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
 var EnsAvatar = ({ name, namespaceId, className, isSquare = false }) => {
@@ -5208,7 +5204,7 @@ var EnsAvatar = ({ name, namespaceId, className, isSquare = false }) => {
       }
     ),
     loadingStatus === "error" && /* @__PURE__ */ jsx34(EnsAvatarFallback, { name, isSquare }),
-    (loadingStatus === "idle" || loadingStatus === "loading") && /* @__PURE__ */ jsx34(AvatarLoading, { className })
+    (loadingStatus === "idle" || loadingStatus === "loading") && /* @__PURE__ */ jsx34(AvatarLoading, { isSquare })
   ] });
 };
 var avatarFallbackColors = ["#000000", "#bedbff", "#5191c1", "#1e6495", "#0a4b75"];
@@ -5222,17 +5218,18 @@ var EnsAvatarFallback = ({ name, isSquare }) => /* @__PURE__ */ jsx34(
     square: isSquare
   }
 );
-var AvatarLoading = ({ className }) => /* @__PURE__ */ jsx34(
+var AvatarLoading = ({ isSquare }) => /* @__PURE__ */ jsx34(
   "div",
   {
     className: cn(
-      "nhui:h-full nhui:w-full nhui:rounded-full nhui:animate-pulse nhui:bg-gray-200",
-      className
+      "nhui:h-full nhui:w-full nhui:animate-pulse nhui:bg-gray-200",
+      !isSquare && "nhui:rounded-full"
     )
   }
 );
 
 // src/components/identity/Identity.tsx
+import { CheckIcon, CopyIcon } from "lucide-react";
 import {
   DEFAULT_EVM_CHAIN_ID,
   isResolvedIdentity,
@@ -5240,6 +5237,52 @@ import {
   translateDefaultableChainIdToChainId
 } from "@ensnode/ensnode-sdk";
 
+// src/utils/blockExplorers.ts
+var getBlockExplorerUrl = (chainId) => {
+  const chain = SUPPORTED_CHAINS.find((chain2) => chain2.id === chainId);
+  if (!chain) return null;
+  if (!chain.blockExplorers) return null;
+  return new URL(chain.blockExplorers.default.url);
+};
+var getBlockExplorerAddressDetailsUrl = (chainId, address) => {
+  const chainBlockExplorer = getBlockExplorerUrl(chainId);
+  if (!chainBlockExplorer) return null;
+  return new URL(`address/${address}`, chainBlockExplorer.toString());
+};
+var getBlockExplorerTransactionDetailsUrl = (chainId, transactionHash) => {
+  const chainBlockExplorer = getBlockExplorerUrl(chainId);
+  if (!chainBlockExplorer) return null;
+  return new URL(`tx/${transactionHash}`, chainBlockExplorer.toString());
+};
+var getBlockExplorerBlockUrl = (chainId, blockNumber) => {
+  const chainBlockExplorer = getBlockExplorerUrl(chainId);
+  if (!chainBlockExplorer) return null;
+  return new URL(`block/${blockNumber}`, chainBlockExplorer.toString());
+};
+
+// src/utils/ensManager.ts
+import { ENSNamespaceIds as ENSNamespaceIds2 } from "@ensnode/ensnode-sdk";
+function getEnsManagerUrl(namespaceId) {
+  switch (namespaceId) {
+    case ENSNamespaceIds2.Mainnet:
+      return new URL(`https://app.ens.domains/`);
+    case ENSNamespaceIds2.Sepolia:
+      return new URL(`https://sepolia.app.ens.domains/`);
+    case ENSNamespaceIds2.EnsTestEnv:
+      return null;
+  }
+}
+function getEnsManagerNameDetailsUrl(name, namespaceId) {
+  const baseUrl = getEnsManagerUrl(namespaceId);
+  if (!baseUrl) return null;
+  return new URL(name, baseUrl);
+}
+function getEnsManagerAddressDetailsUrl(address, namespaceId) {
+  const baseUrl = getEnsManagerUrl(namespaceId);
+  if (!baseUrl) return null;
+  return new URL(address, baseUrl);
+}
+
 // src/components/special-buttons/CopyButton.tsx
 import * as React4 from "react";
 import { toast } from "sonner";
@@ -5343,7 +5386,7 @@ function CopyButton({
       type: "button",
       onClick: copyToClipboard,
       disabled: isCopying,
-      className: cn(className),
+      className: cn("nhui:cursor-pointer", className),
       ...props,
       children: [
         hasCopied ? successIcon ? successIcon : "Copied" : icon ? icon : "Copy",
@@ -5353,49 +5396,16 @@ function CopyButton({
   );
 }
 
-// src/utils/blockExplorers.ts
-var getBlockExplorerUrl = (chainId) => {
-  const chain = SUPPORTED_CHAINS.find((chain2) => chain2.id === chainId);
-  if (!chain) return null;
-  if (!chain.blockExplorers) return null;
-  return new URL(chain.blockExplorers.default.url);
-};
-var getBlockExplorerAddressDetailsUrl = (chainId, address) => {
-  const chainBlockExplorer = getBlockExplorerUrl(chainId);
-  if (!chainBlockExplorer) return null;
-  return new URL(`address/${address}`, chainBlockExplorer.toString());
-};
-var getBlockExplorerTransactionDetailsUrl = (chainId, transactionHash) => {
-  const chainBlockExplorer = getBlockExplorerUrl(chainId);
-  if (!chainBlockExplorer) return null;
-  return new URL(`tx/${transactionHash}`, chainBlockExplorer.toString());
-};
-
-// src/utils/ensManager.ts
-import { ENSNamespaceIds as ENSNamespaceIds2 } from "@ensnode/ensnode-sdk";
-function getEnsManagerUrl(namespaceId) {
-  switch (namespaceId) {
-    case ENSNamespaceIds2.Mainnet:
-      return new URL(`https://app.ens.domains/`);
-    case ENSNamespaceIds2.Sepolia:
-      return new URL(`https://sepolia.app.ens.domains/`);
-    case ENSNamespaceIds2.EnsTestEnv:
-      return null;
-  }
-}
-function getEnsManagerAddressDetailsUrl(address, namespaceId) {
-  const baseUrl = getEnsManagerUrl(namespaceId);
-  if (!baseUrl) return null;
-  return new URL(address, baseUrl);
-}
-
 // src/components/identity/Identity.tsx
-import { jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx37, jsxs as jsxs26 } from "react/jsx-runtime";
 function IdentityLink({
   linkDetails,
   className,
   children
 }) {
+  if (linkDetails.link === null) {
+    return /* @__PURE__ */ jsx37(Fragment3, { children });
+  }
   return /* @__PURE__ */ jsx37(
     "a",
     {
@@ -5440,7 +5450,7 @@ var IdentityTooltip = ({
       TooltipContent,
       {
         side: "top",
-        className: "nhui:bg-gray-50 nhui:text-sm nhui:text-black nhui:text-left nhui:shadow-md nhui:outline-hidden nhui:w-fit",
+        className: "nhui:bg-gray-50 nhui:text-sm nhui:text-black nhui:text-left nhui:shadow-md nhui:outline-hidden nhui:w-fit [&_svg]:fill-gray-50 [&_svg]:bg-gray-50",
         children: /* @__PURE__ */ jsxs26("div", { className: "nhui:flex nhui:gap-4", children: [
           /* @__PURE__ */ jsx37("div", { className: "nhui:flex nhui:items-center", children: /* @__PURE__ */ jsx37(
             ChainIcon,
@@ -5460,7 +5470,10 @@ var IdentityTooltip = ({
               CopyButton,
               {
                 value: identity.address,
-                className: "nhui:text-gray-500 nhui:hover:text-gray-700 nhui:transition-colors"
+                className: "nhui:text-gray-500 nhui:hover:text-gray-700 nhui:transition-colors",
+                successIcon: /* @__PURE__ */ jsx37(CheckIcon, { className: "nhui:h-4 nhui:w-4" }),
+                icon: /* @__PURE__ */ jsx37(CopyIcon, { className: "nhui:h-4 nhui:w-4" }),
+                showToast: true
               }
             ),
             chainExplorerUrl && /* @__PURE__ */ jsx37("a", { target: "_blank", href: chainExplorerUrl.toString(), children: /* @__PURE__ */ jsx37(
@@ -5502,19 +5515,6 @@ import {
   translateDefaultableChainIdToChainId as translateDefaultableChainIdToChainId2
 } from "@ensnode/ensnode-sdk";
 
-// src/components/ui/skeleton.tsx
-import { jsx as jsx39 } from "react/jsx-runtime";
-function Skeleton({ className, ...props }) {
-  return /* @__PURE__ */ jsx39(
-    "div",
-    {
-      "data-slot": "skeleton",
-      className: cn("nhui:bg-accent nhui:animate-pulse nhui:rounded-md", className),
-      ...props
-    }
-  );
-}
-
 // src/hooks/useIsMobile.tsx
 import * as React5 from "react";
 var MOBILE_BREAKPOINT = 640;
@@ -5532,6 +5532,19 @@ function useIsMobile() {
   return !!isMobile;
 }
 
+// src/components/ui/skeleton.tsx
+import { jsx as jsx39 } from "react/jsx-runtime";
+function Skeleton({ className, ...props }) {
+  return /* @__PURE__ */ jsx39(
+    "div",
+    {
+      "data-slot": "skeleton",
+      className: cn("nhui:bg-accent nhui:animate-pulse nhui:rounded-md", className),
+      ...props
+    }
+  );
+}
+
 // src/components/identity/ResolveAndDisplayIdentity.tsx
 import { jsx as jsx40, jsxs as jsxs27 } from "react/jsx-runtime";
 function ResolveAndDisplayIdentity({
@@ -5697,7 +5710,6 @@ function ResolveAndDisplayReferrerIdentity({
   referral,
   accelerate = true,
   withLink = true,
-  identityLinkDetails,
   withTooltip = true,
   withAvatar = false,
   withIdentifier = true,
@@ -5750,12 +5762,16 @@ function ResolveAndDisplayReferrerIdentity({
       withIdentifier,
       className,
       withLink,
-      identityLinkDetails
+      identityLinkDetails: {
+        isExternal: true,
+        link: getEnsManagerAddressDetailsUrl(referrerIdentity.address, namespaceId)
+      }
     }
   );
 }
 function RegistrarActionCardLoading({
-  showReferrer = true
+  showReferrer = true,
+  showReferralProgramField = true
 }) {
   const isMobile = useIsMobile();
   return /* @__PURE__ */ jsxs28(
@@ -5780,7 +5796,7 @@ function RegistrarActionCardLoading({
             /* @__PURE__ */ jsx41("div", { className: "nhui:animate-pulse nhui:h-[14px] nhui:mt-[4px] nhui:mb-[3px] nhui:bg-gray-200 nhui:rounded-sm nhui:w-1/4 nhui:sm:w-3/5" })
           ] }) })
         ] }),
-        /* @__PURE__ */ jsx41(LabeledField, { fieldLabel: "Incentive program", className: "nhui:w-[15%] nhui:min-w-[162px]", children: /* @__PURE__ */ jsx41("div", { className: "nhui:animate-pulse nhui:h-[14px] nhui:mt-[4px] nhui:mb-[3px] nhui:bg-gray-200 nhui:rounded-sm nhui:w-1/4 nhui:sm:w-4/5" }) })
+        showReferralProgramField && /* @__PURE__ */ jsx41(LabeledField, { fieldLabel: "Incentive program", className: "nhui:w-[15%] nhui:min-w-[162px]", children: /* @__PURE__ */ jsx41("div", { className: "nhui:animate-pulse nhui:h-[14px] nhui:mt-[4px] nhui:mb-[3px] nhui:bg-gray-200 nhui:rounded-sm nhui:w-1/4 nhui:sm:w-4/5" }) })
       ]
     }
   );
@@ -5815,15 +5831,15 @@ function RegistrarActionCard({
     {
       className: "nhui:w-full nhui:min-h-[80px] nhui:box-border nhui:flex nhui:flex-col nhui:sm:flex-row nhui:flex-wrap nhui:justify-start nhui:sm:justify-between\n    nhui:items-start nhui:gap-2 nhui:p-4 nhui:sm:p-6 nhui:sm:gap-y-5 nhui:rounded-2xl nhui:border nhui:border-gray-200 nhui:text-sm nhui:bg-white",
       children: [
-        /* @__PURE__ */ jsx41(LabeledField, { fieldLabel: "Name", className: "nhui:w-[15%] nhui:min-w-[162px]", children: /* @__PURE__ */ jsx41(
+        /* @__PURE__ */ jsx41(LabeledField, { fieldLabel: "Name", className: "nhui:w-[15%] nhui:min-w-[162px]", children: links.name.link !== null ? /* @__PURE__ */ jsx41(
           "a",
           {
-            target: "_blank",
+            target: links.name.isExternal ? "_blank" : "_self",
             href: links.name.link.href,
             className: "nhui:max-sm:max-w-3/4 nhui:sm:w-full nhui:box-border nhui:overflow-x-auto nhui:text-blue-600 nhui:font-medium nhui:hover:underline nhui:hover:underline-offset-[25%] nhui:whitespace-nowrap",
             children: /* @__PURE__ */ jsx41(NameDisplay, { name: namedRegistrarAction.name, className: "nhui:h-[21px]" })
           }
-        ) }),
+        ) : /* @__PURE__ */ jsx41("p", { className: "nhui:max-sm:max-w-3/4 nhui:sm:w-full nhui:box-border nhui:overflow-x-auto nhui:font-medium nhui:whitespace-nowrap", children: /* @__PURE__ */ jsx41(NameDisplay, { name: namedRegistrarAction.name, className: "nhui:h-[21px]" }) }) }),
         /* @__PURE__ */ jsx41(
           LabeledField,
           {
@@ -5875,8 +5891,7 @@ function RegistrarActionCard({
               referral,
               withAvatar: true,
               withIdentifier: false,
-              withTooltip: false,
-              identityLinkDetails: links.referrer
+              withTooltip: false
             }
           ),
           /* @__PURE__ */ jsx41(LabeledField, { fieldLabel: "Referrer", className: "nhui:w-[15%] nhui:min-w-[110px]", children: /* @__PURE__ */ jsx41(
@@ -5887,8 +5902,7 @@ function RegistrarActionCard({
               referral,
               withAvatar: isMobile,
               withIdentifier: true,
-              withTooltip: false,
-              identityLinkDetails: links.referrer
+              withTooltip: false
             }
           ) })
         ] }),
@@ -5898,12 +5912,125 @@ function RegistrarActionCard({
   );
 }
 var RegistrarActionCardMemo = memo(RegistrarActionCard);
+
+// src/hooks/useNow.ts
+import { useEffect as useEffect6, useState as useState7 } from "react";
+
+// src/hooks/useSystemClock.ts
+import { getUnixTime } from "date-fns";
+import { useSyncExternalStore } from "react";
+
+// src/utils/syncedClock.ts
+var DEFAULT_TICK_RATE = 16;
+var HighResolutionSyncedClock = class {
+  #listeners = /* @__PURE__ */ new Set();
+  #currentTime = Date.now();
+  #timerId = null;
+  /**
+   * Tick rate frequency in milliseconds.
+   */
+  #tickRate;
+  /**
+   * Clock's tick handler.
+   *
+   * Runs at `tickRate` frequency, and notifies all listeners about
+   * the current time updates.
+   */
+  #tick = () => {
+    this.#currentTime = Date.now();
+    this.#listeners.forEach((listener) => listener());
+    this.#timerId = setTimeout(this.#tick, this.#tickRate);
+  };
+  /**
+   * Starts the clock.
+   */
+  start = () => {
+    if (this.#timerId === null) {
+      this.#currentTime = Date.now();
+      this.#timerId = setTimeout(this.#tick, this.#tickRate);
+    }
+  };
+  /**
+   * Stops the clock.
+   */
+  stop = () => {
+    if (this.#timerId !== null) {
+      clearTimeout(this.#timerId);
+      this.#timerId = null;
+    }
+  };
+  constructor(tickRate = DEFAULT_TICK_RATE) {
+    this.#tickRate = tickRate;
+  }
+  /**
+   * Adds a new listener to all listeners tracking the synced clock.
+   *
+   * Starts the clock (or restarts it, which is a noop) if there's at
+   * least one listener.
+   *
+   * @param callback to notify the listener about clock updates.
+   */
+  addListener(callback) {
+    this.#listeners.add(callback);
+    if (this.#listeners.size > 0) {
+      this.start();
+    }
+  }
+  /**
+   * Removes a listener from all listeners tracking the synced clock.
+   *
+   * Stops the clock if there's no listener.
+   *
+   * @param callback to notify the listener about clock updates.
+   */
+  removeListener(callback) {
+    this.#listeners.delete(callback);
+    if (this.#listeners.size === 0) {
+      this.stop();
+    }
+  }
+  get currentTime() {
+    return this.#currentTime;
+  }
+};
+
+// src/utils/systemClock.ts
+var systemClock = new HighResolutionSyncedClock();
+
+// src/hooks/useSystemClock.ts
+function useSystemClock() {
+  const subscribe = (callback) => {
+    systemClock.addListener(callback);
+    return () => {
+      systemClock.removeListener(callback);
+    };
+  };
+  const getSnapshot = () => getUnixTime(new Date(systemClock.currentTime));
+  const getServerSnapshot = () => getUnixTime(/* @__PURE__ */ new Date());
+  const syncedSystemClock = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  return syncedSystemClock ?? getSnapshot();
+}
+
+// src/hooks/useNow.ts
+var DEFAULT_TIME_TO_REFRESH = 1;
+function useNow(props) {
+  const clock = useSystemClock();
+  const [throttledClock, setThrottledClock] = useState7(clock);
+  const { timeToRefresh = DEFAULT_TIME_TO_REFRESH } = props || {};
+  useEffect6(() => {
+    if (clock - throttledClock >= timeToRefresh) {
+      setThrottledClock(clock);
+    }
+  }, [timeToRefresh, clock, throttledClock]);
+  return throttledClock;
+}
 export {
   AbsoluteTime,
   AddressDisplay,
   ChainExplorerIcon,
   ChainIcon,
   ChainName,
+  CopyButton,
   DisplayDuration,
   DisplayIdentity,
   EfpIcon,
@@ -5925,7 +6052,17 @@ export {
   ResolveAndDisplayIdentity,
   TelegramIcon,
   TwitterIcon,
-  formatRelativeTime
+  formatRelativeTime,
+  getBlockExplorerAddressDetailsUrl,
+  getBlockExplorerBlockUrl,
+  getBlockExplorerTransactionDetailsUrl,
+  getBlockExplorerUrl,
+  getChainName,
+  getEnsManagerAddressDetailsUrl,
+  getEnsManagerNameDetailsUrl,
+  getEnsManagerUrl,
+  getEnsMetadataServiceAvatarUrl,
+  useNow
 };
 /*! Bundled license information: