✨ Add check connected address button to searchbar (#247)

RevokeCash · Dec 6, 2024 · ce35481 · ce35481
1 parent 6fb5793
commit ce35481
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 18 deletions.
diff --git a/app/[locale]/token-approval-checker/[slug]/TokenApprovalCheckerSearchBox.tsx b/app/[locale]/token-approval-checker/[slug]/TokenApprovalCheckerSearchBox.tsx
@@ -1,28 +1,62 @@
 '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;
   placeholder: string;
 }
 
 const TokenApprovalCheckerSearchBox: NextPage<Props> = ({ chainId, placeholder }) => {
+  const t = useTranslations();
   const router = useCsrRouter();
   const [value, setValue] = useState<string>('');
 
+  const [isFocused, setIsFocused] = useState<boolean>(false);
+  const { address } = useAccount();
+  const timerRef = useRef<NodeJS.Timeout>();
+
+  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 (
-    <AddressSearchBox
-      id="tac-search"
-      onSubmit={() => 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"
-    />
+    <div className="relative w-full max-w-3xl">
+      <AddressSearchBox
+        id="tac-search"
+        onSubmit={() => 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}
+      />
+      <div className={twMerge('absolute mt-2', (!isFocused || !address) && 'hidden')}>
+        <Button style="secondary" size="md" onClick={onClick}>
+          {t('common.buttons.check_connected_address')}
+        </Button>
+      </div>
+    </div>
   );
 };
 

diff --git 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<string>('');
+  const [isFocused, setIsFocused] = useState<boolean>(false);
+  const { address } = useAccount();
+  const timerRef = useRef<NodeJS.Timeout>();
+
+  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 (
-    <AddressSearchBox
-      id="global-search"
-      onSubmit={() => 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"
-    />
+    <div className="relative w-full">
+      <AddressSearchBox
+        id="global-search"
+        onSubmit={() => 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}
+      />
+      <div className={twMerge('absolute mt-2', (!isFocused || !address) && 'hidden')}>
+        <Button style="secondary" size="md" onClick={onClick}>
+          {t('common.buttons.check_connected_address')}
+        </Button>
+      </div>
+    </div>
   );
 };