diff --git a/app/[locale]/token-approval-checker/[slug]/TokenApprovalCheckerSearchBox.tsx b/app/[locale]/token-approval-checker/[slug]/TokenApprovalCheckerSearchBox.tsx index a71984673..95ea0a5c6 100644 --- a/app/[locale]/token-approval-checker/[slug]/TokenApprovalCheckerSearchBox.tsx +++ b/app/[locale]/token-approval-checker/[slug]/TokenApprovalCheckerSearchBox.tsx @@ -1,9 +1,13 @@ 'use client'; import AddressSearchBox from 'components/common/AddressSearchBox'; +import Button from 'components/common/Button'; import { useCsrRouter } from 'lib/i18n/csr-navigation'; import { NextPage } from 'next'; -import { useState } from 'react'; +import { useTranslations } from 'next-intl'; +import { useRef, useState } from 'react'; +import { twMerge } from 'tailwind-merge'; +import { useAccount } from 'wagmi'; interface Props { chainId: number; @@ -11,18 +15,48 @@ interface Props { } const TokenApprovalCheckerSearchBox: NextPage = ({ chainId, placeholder }) => { + const t = useTranslations(); const router = useCsrRouter(); const [value, setValue] = useState(''); + const [isFocused, setIsFocused] = useState(false); + const { address } = useAccount(); + const timerRef = useRef(); + + const onFocus = () => { + clearTimeout(timerRef.current); + setIsFocused(true); + }; + + const onBlur = () => { + timerRef.current = setTimeout(() => setIsFocused(false), 200); + }; + + const onClick = () => { + if (address) { + setValue(address); + router.push(`/address/${address}`, { retainSearchParams: ['chainId'] }); + } + }; + return ( - router.push(`/address/${value}?chainId=${chainId}`)} - onChange={(ev) => setValue(ev.target.value.trim())} - value={value} - placeholder={placeholder} - className="w-full max-w-3xl text-base sm:text-lg" - /> +
+ router.push(`/address/${value}?chainId=${chainId}`)} + onChange={(ev) => setValue(ev.target.value.trim())} + value={value} + placeholder={placeholder} + className="w-full text-base sm:text-lg" + onFocus={onFocus} + onBlur={onBlur} + /> +
+ +
+
); }; diff --git a/components/header/SearchBar.tsx b/components/header/SearchBar.tsx index a83ab0eea..f57f89e5c 100644 --- a/components/header/SearchBar.tsx +++ b/components/header/SearchBar.tsx @@ -1,24 +1,55 @@ 'use client'; import AddressSearchBox from 'components/common/AddressSearchBox'; +import Button from 'components/common/Button'; import { useCsrRouter } from 'lib/i18n/csr-navigation'; import { useTranslations } from 'next-intl'; -import { useState } from 'react'; +import { useRef, useState } from 'react'; +import { twMerge } from 'tailwind-merge'; +import { useAccount } from 'wagmi'; const SearchBar = () => { const t = useTranslations(); const router = useCsrRouter(); const [value, setValue] = useState(''); + const [isFocused, setIsFocused] = useState(false); + const { address } = useAccount(); + const timerRef = useRef(); + + const onFocus = () => { + clearTimeout(timerRef.current); + setIsFocused(true); + }; + + const onBlur = () => { + timerRef.current = setTimeout(() => setIsFocused(false), 200); + }; + + const onClick = () => { + if (address) { + setValue(address); + router.push(`/address/${address}`, { retainSearchParams: ['chainId'] }); + } + }; return ( - router.push(`/address/${value}`, { retainSearchParams: ['chainId'] })} - onChange={(ev) => setValue(ev.target.value.trim())} - value={value} - placeholder={t('common.nav.search')} - className="w-full text-base sm:text-lg border-x-0 rounded-none border-zinc-400 dark:border-zinc-600 py-6 focus-within:ring-0 focus-within:border-black dark:focus-within:border-white" - /> +
+ router.push(`/address/${value}`, { retainSearchParams: ['chainId'] })} + onChange={(ev) => setValue(ev.target.value.trim())} + value={value} + placeholder={t('common.nav.search')} + className="w-full text-base sm:text-lg border-x-0 rounded-none border-zinc-400 dark:border-zinc-600 py-6 focus-within:ring-0 focus-within:border-black dark:focus-within:border-white" + onFocus={onFocus} + onBlur={onBlur} + /> +
+ +
+
); };