diff --git a/apps/web/src/components/Basenames/RegistrationSearchInput/index.tsx b/apps/web/src/components/Basenames/RegistrationSearchInput/index.tsx index ab12bef..70bf484 100644 --- a/apps/web/src/components/Basenames/RegistrationSearchInput/index.tsx +++ b/apps/web/src/components/Basenames/RegistrationSearchInput/index.tsx @@ -9,7 +9,7 @@ import { useIsNameAvailable } from 'apps/web/src/hooks/useIsNameAvailable'; import { formatBaseEthDomain, validateEnsDomainName } from 'apps/web/src/utils/usernames'; import classNames from 'classnames'; import { ActionType } from 'libs/base-ui/utils/logEvent'; -import { useCallback, useEffect, useId, useRef, useState } from 'react'; +import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react'; import { useDebounceValue } from 'usehooks-ts'; import Tooltip from 'apps/web/src/components/Tooltip'; import { InformationCircleIcon } from '@heroicons/react/16/solid'; @@ -19,6 +19,7 @@ import { RegistrationSearchInputProps, RegistrationSearchInputVariant, } from './types'; +import Link from 'apps/web/src/components/Link'; function SuggestionEntry({ suggestion, @@ -166,6 +167,10 @@ export default function RegistrationSearchInput({ }, ); + const registeredContentClasses = classNames( + 'flex grow-0 w-full flex-row items-center justify-between', + ); + const inputIconClasses = classNames( 'absolute top-1/2 z-9 flex -translate-y-1/2 items-center scale-75 md:scale-100', { @@ -184,6 +189,11 @@ export default function RegistrationSearchInput({ 'px-3 py-2 text-sm': variant === RegistrationSearchInputVariant.Small, }); + const mutedStatus = classNames('text-gray-60', { + 'text-sm': variant === RegistrationSearchInputVariant.Large, + 'text-xs': variant === RegistrationSearchInputVariant.Small, + }); + const spinnerWrapperClasses = classNames('flex w-full items-center justify-center', { // Equivalent to the dropdown when one name is available 'h-[6.75rem]': variant === RegistrationSearchInputVariant.Large, @@ -257,6 +267,11 @@ export default function RegistrationSearchInput({ handleSelectName(debouncedSearch); }, [debouncedSearch, handleSelectName]); + const formattedBaseEthDomain = useMemo( + () => formatBaseEthDomain(debouncedSearch, basenameChain.id), + [basenameChain.id, debouncedSearch], + ); + return (