@namehash/namehash-ui 1.4.0 → 1.5.1

package/dist/index.d.ts

@@ -1,5 +1,357 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ChainId, UnixTimestamp, Duration, Name, Identity, ENSNamespaceId as ENSNamespaceId$1, UnresolvedIdentity, NamedRegistrarAction } from '@ensnode/ensnode-sdk';
+import * as React from 'react';
+import React__default, { SVGProps, PropsWithChildren, ReactNode } from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { LucideIcon } from 'lucide-react';
+import { Address, Hash } from 'viem';
+import { ENSNamespaceId } from '@ensnode/datasources';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
 
-declare const Placeholder: () => react_jsx_runtime.JSX.Element;
+interface ChainIconProps {
+    chainId: ChainId;
+    width?: number;
+    height?: number;
+}
+/**
+ * Renders an icon for the provided chain ID.
+ */
+declare function ChainIcon({ chainId, width, height }: ChainIconProps): react_jsx_runtime.JSX.Element;
 
-export { Placeholder };
+interface ChainNameProps {
+    chainId: ChainId;
+    className: string;
+}
+/**
+ * Renders a prettified chain name for the provided {@link ChainId}.
+ */
+declare const ChainName: ({ chainId, className }: ChainNameProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * Client-only absolute time component
+ */
+declare function AbsoluteTime({ timestamp, options, }: {
+    timestamp: UnixTimestamp;
+    options: Intl.DateTimeFormatOptions;
+}): react_jsx_runtime.JSX.Element;
+
+/**
+ * Display Duration component
+ */
+declare function DisplayDuration({ duration }: {
+    duration: Duration;
+}): string;
+
+declare function TooltipContent({ className, sideOffset, children, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content>): react_jsx_runtime.JSX.Element;
+
+/**
+ * Formats a Unix timestamp as its relative distance with now
+ *
+ * @param timestamp - the timestamp to format as a relative time
+ * @param enforcePast - if true, enforces that the return value won't relate to the future.
+ * Helpful for UI contexts where it's nonsensical for a value to relate to the future. Ex: how long ago an event happened.
+ * Note how different systems may have misaligned clocks. `enforcePast` aims to protect from UI confusion when
+ * the client's clock is set incorrectly in the past, such that events happening "now" might otherwise appear to
+ * be coming from the future.
+ * @param includeSeconds - if true includes seconds in the result
+ * @param conciseFormatting - if true removes special prefixes / suffixes such as "about ..." or "in almost ..."
+ * @param relativeTo - if defined represents the timestamp to compare with. Otherwise, the timestamp param is compared with the present.
+ */
+declare function formatRelativeTime(timestamp: UnixTimestamp, enforcePast?: boolean, includeSeconds?: boolean, conciseFormatting?: boolean, relativeTo?: UnixTimestamp): string;
+/**
+ * Client-only relative time component
+ */
+declare function RelativeTime({ timestamp, enforcePast, includeSeconds, conciseFormatting, tooltipPosition, tooltipStyles, relativeTo, prefix, contentWrapper, }: {
+    timestamp: UnixTimestamp;
+    enforcePast?: boolean;
+    includeSeconds?: boolean;
+    conciseFormatting?: boolean;
+    tooltipPosition?: React.ComponentProps<typeof TooltipContent>["side"];
+    tooltipStyles?: string;
+    relativeTo?: UnixTimestamp;
+    prefix?: string;
+    /**
+     * A component to be rendered as a wrapper for the Relative Time component content.
+     */
+    contentWrapper?: ({ children }: React.PropsWithChildren) => React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+
+declare function Footer(): react_jsx_runtime.JSX.Element;
+
+declare const ChainExplorerIcon: LucideIcon;
+
+declare const EnsIcon: LucideIcon;
+
+declare const EnsServiceProviderIcon: (props: React__default.SVGAttributes<SVGElement>) => react_jsx_runtime.JSX.Element;
+
+declare const InfoIcon: (props: SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+
+declare const EfpIcon: (props: React__default.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+
+declare const EmailIcon: (props: React__default.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+
+declare const FarcasterIcon: (props: React__default.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+
+declare const GitHubIcon: (props: React__default.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+
+declare const TelegramIcon: (props: React__default.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+
+declare const TwitterIcon: (props: React__default.SVGProps<SVGSVGElement>) => react_jsx_runtime.JSX.Element;
+
+interface AddressDisplayProps {
+    address: Address;
+    className?: string;
+}
+/**
+ * Displays a truncated checksummed address without any navigation.
+ * Pure display component for showing addresses.
+ */
+declare function AddressDisplay({ address, className }: AddressDisplayProps): react_jsx_runtime.JSX.Element;
+
+interface EnsAvatarProps {
+    name: Name;
+    namespaceId: ENSNamespaceId;
+    className?: string;
+    isSquare?: boolean;
+}
+declare const EnsAvatar: ({ name, namespaceId, className, isSquare }: EnsAvatarProps) => react_jsx_runtime.JSX.Element;
+
+interface IdentityLinkDetails {
+    isExternal: boolean;
+    link: URL | null;
+}
+interface IdentityLinkProps {
+    linkDetails: IdentityLinkDetails;
+    className?: string;
+}
+/**
+ * Displays an identifier (address or name) with a link to the identity details URL.
+ * If the ENS namespace has a known ENS Manager App,
+ * includes a link to the view details of the address within that ENS namespace.
+ *
+ * Can take other components (ex.ChainIcon) as children
+ * and display them alongside the link as one common interaction area.
+ */
+declare function IdentityLink({ linkDetails, className, children, }: PropsWithChildren<IdentityLinkProps>): react_jsx_runtime.JSX.Element;
+interface IdentityTooltipProps {
+    identity: Identity;
+    namespaceId: ENSNamespaceId$1;
+}
+/**
+ * On hover displays details on how the primary name for
+ * the address of the identity was resolved.
+ */
+declare const IdentityTooltip: ({ identity, namespaceId, children, }: PropsWithChildren<IdentityTooltipProps>) => string | number | bigint | boolean | react_jsx_runtime.JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
+
+interface NameDisplayProps {
+    name: Name;
+    className?: string;
+}
+/**
+ * Displays an ENS name in beautified form.
+ *
+ * @param name - The name to display in beautified form.
+ *
+ */
+declare function NameDisplay({ name, className }: NameDisplayProps): react_jsx_runtime.JSX.Element;
+
+interface ResolveAndDisplayIdentityProps {
+    identity: UnresolvedIdentity;
+    namespaceId: ENSNamespaceId$1;
+    accelerate?: boolean;
+    withLink?: boolean;
+    identityLinkDetails?: IdentityLinkDetails;
+    withTooltip?: boolean;
+    withAvatar?: boolean;
+    withIdentifier?: boolean;
+    className?: string;
+}
+/**
+ * Resolves the provided `UnresolvedIdentity` through ENSNode and displays the result.
+ *
+ * @param identity - The `UnresolvedIdentity` to resolve and display.
+ * @param namespaceId - The ENSNamespace identifier (e.g. 'mainnet', 'sepolia', 'ens-test-env')
+ * @param accelerate - Whether to attempt Protocol Acceleration (default: false)
+ *                      when resolving the primary name.
+ * @param withLink - Whether to wrap the displayed identity in an `IdentityLink` component.
+ * @param identityLinkDetails - If the `withLink` is true, provides info on where should it lead and should it be an external link.
+ * @param withTooltip - Whether to wrap the displayed identity in an `IdentityInfoTooltip` component.
+ * @param withAvatar - Whether to display an avatar image.
+ * @param withIdentifier - Whether to display identity's textual identifier (address or name).
+ * @param className - The class name to apply to the displayed identity.
+ */
+declare function ResolveAndDisplayIdentity({ identity, namespaceId, accelerate, withLink, identityLinkDetails, withTooltip, withAvatar, withIdentifier, className, }: ResolveAndDisplayIdentityProps): react_jsx_runtime.JSX.Element;
+interface DisplayIdentityProps {
+    identity: Identity;
+    namespaceId: ENSNamespaceId$1;
+    withLink?: boolean;
+    identityLinkDetails?: IdentityLinkDetails;
+    withTooltip?: boolean;
+    withAvatar?: boolean;
+    withIdentifier?: boolean;
+    className?: string;
+}
+/**
+ * Displays the provided `Identity`.
+ *
+ * Performs _NO_ resolution if the provided `identity` is not already a `ResolvedIdentity`.
+ *
+ * @param identity - The identity to display. May be a `ResolvedIdentity` or an `UnresolvedIdentity`.
+ *                      If not a `ResolvedIdentity` (and therefore just an `UnresolvedIdentity`) then displays a loading state.
+ * @param namespaceId - The ENSNamespace identifier (e.g. 'mainnet', 'sepolia', 'ens-test-env')
+ * @param withLink - Whether to wrap the displayed identity in an `IdentityLink` component.
+ * @param identityLinkDetails - If the `withLink` is true, provides info on where should it lead and should it be an external link.
+ * @param withTooltip - Whether to wrap the displayed identity in an `IdentityInfoTooltip` component.
+ * @param withAvatar - Whether to display an avatar image.
+ * @param withIdentifier - Whether to display identity's textual identifier (address or name).
+ * @param className - The class name to apply to the displayed identity.
+ *
+ * @throws Error - if `withLink` is true, but no `identityLinkDetails` are provided.
+ */
+declare function DisplayIdentity({ identity, namespaceId, withLink, identityLinkDetails, withTooltip, withAvatar, withIdentifier, className, }: DisplayIdentityProps): react_jsx_runtime.JSX.Element;
+
+interface RegistrarActionCardLoadingProps {
+    showReferrer?: boolean;
+    showReferralProgramField?: boolean;
+}
+/**
+ * Display Registrar Action Card loading state
+ */
+declare function RegistrarActionCardLoading({ showReferrer, showReferralProgramField, }: RegistrarActionCardLoadingProps): react_jsx_runtime.JSX.Element;
+interface RegistrarActionCardProps {
+    namespaceId: ENSNamespaceId$1;
+    namedRegistrarAction: NamedRegistrarAction;
+    now: UnixTimestamp;
+    links: {
+        name: IdentityLinkDetails;
+        registrant: IdentityLinkDetails;
+    };
+    showReferrer?: boolean;
+    referralProgramField?: ReactNode;
+}
+/**
+ * Display a single Registrar Action
+ */
+declare function RegistrarActionCard({ namespaceId, namedRegistrarAction, now, links, showReferrer, referralProgramField, }: RegistrarActionCardProps): react_jsx_runtime.JSX.Element;
+declare const RegistrarActionCardMemo: React.MemoExoticComponent<typeof RegistrarActionCard>;
+
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "link" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends React.ComponentProps<"button">, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+
+interface CopyButtonProps extends Omit<ButtonProps, "onClick"> {
+    value: string;
+    message?: string;
+    showToast?: boolean;
+    icon?: React.ReactNode;
+    successIcon?: React.ReactNode;
+}
+declare function CopyButton({ value, message, variant, size, showToast, icon, successIcon, className, children, ...props }: CopyButtonProps): react_jsx_runtime.JSX.Element;
+
+interface UseNowProps {
+    /**
+     * Duration after which time value will be refreshed.
+     *
+     * Defaults to {@link DEFAULT_TIME_TO_REFRESH}.
+     */
+    timeToRefresh?: Duration;
+}
+/**
+ * Use now
+ *
+ * This hook returns the current system time while following `timeToRefresh` param.
+ *
+ * @param timeToRefresh Duration after which time value will be refreshed.
+ *
+ * @example
+ * ```ts
+ * // `now` will be updated each second (by default)
+ * const now = useNow();
+ * ```
+ * @example
+ * ```ts
+ * // `now` will be updated each 5 seconds
+ * const now = useNow({ timeToRefresh: 5 });
+ * ```
+ */
+declare function useNow(props?: UseNowProps): UnixTimestamp;
+
+/**
+ * Gets the "base" block explorer URL for a given {@link ChainId}
+ *
+ * @returns default block explorer URL for the chain with the provided id,
+ * or null if the referenced chain doesn't have a known block explorer
+ */
+declare const getBlockExplorerUrl: (chainId: ChainId) => URL | null;
+/**
+ * Gets the block explorer URL for a specific address on a specific chainId
+ *
+ * @returns complete block explorer URL for a specific address on a specific chainId,
+ * or null if the referenced chain doesn't have a known block explorer
+ */
+declare const getBlockExplorerAddressDetailsUrl: (chainId: ChainId, address: Address) => URL | null;
+/**
+ * Gets the block explorer URL for a specific transaction hash on a specific chainId
+ *
+ * @returns complete block explorer URL for a specific transaction hash on a specific chainId,
+ * or null if the referenced chain doesn't have a known block explorer
+ */
+declare const getBlockExplorerTransactionDetailsUrl: (chainId: ChainId, transactionHash: Hash) => URL | null;
+/**
+ * Gets the block explorer URL for a specific block on a specific chainId
+ *
+ * @returns complete block explorer URL for a specific block on a specific chainId,
+ * or null if the referenced chain doesn't have a known block explorer
+ */
+declare const getBlockExplorerBlockUrl: (chainId: ChainId, blockNumber: number) => URL | null;
+
+/**
+ * Returns a prettified chain name for the provided chain id.
+ */
+declare function getChainName(chainId: ChainId): string;
+
+/**
+ * Get the ENS Manager App URL for the provided namespace.
+ *
+ * @param {ENSNamespaceId} namespaceId - ENS Namespace identifier
+ * @returns ENS Manager App URL for the provided namespace, or null if the provided namespace
+ * doesn't have a known ENS Manager App
+ */
+declare function getEnsManagerUrl(namespaceId: ENSNamespaceId): URL | null;
+/**
+ * Builds the URL of the external ENS Manager App Profile page for a given name and ENS Namespace.
+ *
+ * @returns URL to the Profile page in the external ENS Manager App for a given name and ENS Namespace,
+ * or null if this URL is not known
+ */
+declare function getEnsManagerNameDetailsUrl(name: Name, namespaceId: ENSNamespaceId): URL | null;
+/**
+ * Get the URL of the address details page in ENS Manager App for a given address and ENS Namespace.
+ *
+ * @returns URL to the address details page in the ENS Manager App for a given address and ENS
+ * Namespace, or null if this URL is not known
+ */
+declare function getEnsManagerAddressDetailsUrl(address: Address, namespaceId: ENSNamespaceId): URL | null;
+
+/**
+ * Build the avatar image URL for a name on the given ENS Namespace that (once fetched) would
+ * load the avatar image for the given name from the ENS Metadata Service
+ * (https://metadata.ens.domains/docs).
+ *
+ * The returned URL is dynamically built based on the provided ENS namespace. Not all ENS
+ * namespaces are supported by the ENS Metadata Service. Therefore, the returned URL may
+ * be null.
+ *
+ * @param {Name} name - ENS name to build the avatar image URL for
+ * @param {ENSNamespaceId} namespaceId - ENS Namespace identifier
+ * @returns avatar image URL for the name on the given ENS Namespace, or null if the given
+ *          ENS namespace is not supported by the ENS Metadata Service
+ */
+declare function getEnsMetadataServiceAvatarUrl(name: Name, namespaceId: ENSNamespaceId): URL | null;
+
+export { AbsoluteTime, AddressDisplay, ChainExplorerIcon, ChainIcon, type ChainIconProps, ChainName, type ChainNameProps, CopyButton, type CopyButtonProps, DisplayDuration, DisplayIdentity, EfpIcon, EmailIcon, EnsAvatar, EnsIcon, EnsServiceProviderIcon, FarcasterIcon, Footer, GitHubIcon, IdentityLink, type IdentityLinkDetails, IdentityTooltip, type IdentityTooltipProps, InfoIcon, NameDisplay, RegistrarActionCard, RegistrarActionCardLoading, type RegistrarActionCardLoadingProps, RegistrarActionCardMemo, type RegistrarActionCardProps, RelativeTime, ResolveAndDisplayIdentity, type ResolveAndDisplayIdentityProps, TelegramIcon, TwitterIcon, formatRelativeTime, getBlockExplorerAddressDetailsUrl, getBlockExplorerBlockUrl, getBlockExplorerTransactionDetailsUrl, getBlockExplorerUrl, getChainName, getEnsManagerAddressDetailsUrl, getEnsManagerNameDetailsUrl, getEnsManagerUrl, getEnsMetadataServiceAvatarUrl, useNow };