markup changes

ui/pages/SearchResults.tsx

@@ -1,68 +1,27 @@
-import { Box, chakra, Table, Tbody, Tr, Th, Skeleton } from '@chakra-ui/react';
+import { Box, chakra, Table, Tbody, Tr, Th, Skeleton, Show, Hide } from '@chakra-ui/react';
 import type { FormEvent } from 'react';
 import React from 'react';
 
+import useIsMobile from 'lib/hooks/useIsMobile';
 import link from 'lib/link/link';
+import SearchResultListItem from 'ui/searchResults/SearchResultListItem';
 import SearchResultTableItem from 'ui/searchResults/SearchResultTableItem';
 import ActionBar from 'ui/shared/ActionBar';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import Page from 'ui/shared/Page/Page';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import Pagination from 'ui/shared/Pagination';
+import SkeletonList from 'ui/shared/skeletons/SkeletonList';
 import SkeletonTable from 'ui/shared/skeletons/SkeletonTable';
 import { default as Thead } from 'ui/shared/TheadSticky';
 import Header from 'ui/snippets/header/Header';
 import SearchBarInput from 'ui/snippets/searchBar/SearchBarInput';
 import useSearchQuery from 'ui/snippets/searchBar/useSearchQuery';
 
-// const data = {
-//   items: [
-//     {
-//       address: '0x377c5F2B300B25a534d4639177873b7fEAA56d4B',
-//       address_url: '/address/0x377c5F2B300B25a534d4639177873b7fEAA56d4B',
-//       name: 'Toms NFT',
-//       symbol: 'TNT',
-//       token_url: '/token/0x377c5F2B300B25a534d4639177873b7fEAA56d4B',
-//       type: 'token' as const,
-//     },
-//     {
-//       address: '0xC35Cc7223B0175245E9964f2E3119c261E8e21F9',
-//       address_url: '/address/0xC35Cc7223B0175245E9964f2E3119c261E8e21F9',
-//       name: 'TomToken',
-//       symbol: 'pdE1B',
-//       token_url: '/token/0xC35Cc7223B0175245E9964f2E3119c261E8e21F9',
-//       type: 'token' as const,
-//     },
-//     {
-//       block_hash: '0x1af31d7535dded06bab9a88eb40ee2f8d0529a60ab3b8a7be2ba69b008cacbd1',
-//       block_number: 8198536,
-//       type: 'block' as const,
-//       url: '/block/0x1af31d7535dded06bab9a88eb40ee2f8d0529a60ab3b8a7be2ba69b008cacbd1',
-//     },
-//     {
-//       address: '0xb64a30399f7F6b0C154c2E7Af0a3ec7B0A5b131a',
-//       name: null,
-//       type: 'address' as const,
-//       url: '/address/0xb64a30399f7F6b0C154c2E7Af0a3ec7B0A5b131a',
-//     },
-//     {
-//       address: '0xb64a30399f7F6b0C154c2E7Af0a3ec7B0A5b131a',
-//       name: 'TomToken',
-//       type: 'contract' as const,
-//       url: '/address/0xb64a30399f7F6b0C154c2E7Af0a3ec7B0A5b131a',
-//     },
-//     {
-//       tx_hash: '0x349d4025d03c6faec117ee10ac0bce7c7a805dd2cbff7a9f101304d9a8a525dd',
-//       type: 'transaction' as const,
-//       url: '/tx/0x349d4025d03c6faec117ee10ac0bce7c7a805dd2cbff7a9f101304d9a8a525dd',
-//     },
-//   ],
-//   next_page_params: null,
-// };
-
 const SearchResultsPageContent = () => {
   const { query, searchTerm, handleSearchTermChange } = useSearchQuery(true);
   const { data, isError, isLoading, pagination, isPaginationVisible } = query;
+  const isMobile = useIsMobile();
 
   const handleSubmit = React.useCallback((event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
@@ -81,7 +40,12 @@ const SearchResultsPageContent = () => {
       return (
         <Box>
           <Skeleton h={ 6 } w="280px" borderRadius="full" mb={ 6 }/>
-          <SkeletonTable columns={ [ '33%', '34%', '33%' ] }/>
+          <Show below="lg" ssr={ false }>
+            <SkeletonList/>
+          </Show>
+          <Hide below="lg" ssr={ false }>
+            <SkeletonTable columns={ [ '33%', '34%', '33%' ] }/>
+          </Hide>
         </Box>
       );
     }
@@ -96,27 +60,53 @@ const SearchResultsPageContent = () => {
       </Box>
     );
 
+    const bar = (() => {
+      if (!isPaginationVisible) {
+        return text;
+      }
+
+      if (isMobile) {
+        return (
+          <>
+            { text }
+            <ActionBar>
+              <Pagination { ...pagination } ml="auto"/>
+            </ActionBar>
+          </>
+        );
+      }
+
+      return (
+        <ActionBar mt={ -6 }>
+          { text }
+          <Pagination { ...pagination }/>
+        </ActionBar>
+      );
+    })();
+
     return (
       <>
-        { isPaginationVisible ? (
-          <ActionBar mt={ -6 }>
-            { text }
-            <Pagination { ...pagination }/>
-          </ActionBar>
-        ) : text }
+        { bar }
         { data.items.length > 0 && (
-          <Table variant="simple" size="md" fontWeight={ 500 }>
-            <Thead top={ isPaginationVisible ? 80 : 0 }>
-              <Tr>
-                <Th width="33%">Search Result</Th>
-                <Th width="34%">Hash/address</Th>
-                <Th width="33%">Category</Th>
-              </Tr>
-            </Thead>
-            <Tbody>
-              { data.items.map((item, index) => <SearchResultTableItem key={ index } data={ item }/>) }
-            </Tbody>
-          </Table>
+          <>
+            <Show below="lg" ssr={ false }>
+              { data.items.map((item, index) => <SearchResultListItem key={ index } data={ item }/>) }
+            </Show>
+            <Hide below="lg" ssr={ false }>
+              <Table variant="simple" size="md" fontWeight={ 500 }>
+                <Thead top={ isPaginationVisible ? 80 : 0 }>
+                  <Tr>
+                    <Th width="50%">Search Result</Th>
+                    <Th width="50%"/>
+                    <Th width="150px">Category</Th>
+                  </Tr>
+                </Thead>
+                <Tbody>
+                  { data.items.map((item, index) => <SearchResultTableItem key={ index } data={ item }/>) }
+                </Tbody>
+              </Table>
+            </Hide>
+          </>
         ) }
       </>
     );

ui/searchResults/SearchResultListItem.tsx

@@ -0,0 +1,102 @@
+import { Text, Link, Flex, Icon } from '@chakra-ui/react';
+import React from 'react';
+
+import type { SearchResultItem } from 'types/api/search';
+
+import blockIcon from 'icons/block.svg';
+import txIcon from 'icons/transactions.svg';
+import link from 'lib/link/link';
+import Address from 'ui/shared/address/Address';
+import AddressIcon from 'ui/shared/address/AddressIcon';
+import AddressLink from 'ui/shared/address/AddressLink';
+import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
+import ListItemMobile from 'ui/shared/ListItemMobile';
+import TokenLogo from 'ui/shared/TokenLogo';
+
+interface Props {
+  data: SearchResultItem;
+}
+
+const SearchResultListItem = ({ data }: Props) => {
+
+  const firstRow = (() => {
+    switch (data.type) {
+      case 'token': {
+        return (
+          <Flex alignItems="center">
+            <TokenLogo boxSize={ 6 } hash={ data.address } name={ data.name }/>
+            <Link ml={ 2 } href={ link('token_index', { hash: data.address }) } fontWeight={ 700 }>
+              { data.name }{ data.symbol ? ` (${ data.symbol })` : '' }
+            </Link>
+          </Flex>
+        );
+      }
+
+      case 'contract':
+      case 'address': {
+        return (
+          <Address>
+            <AddressIcon hash={ data.address }/>
+            <AddressLink hash={ data.address } ml={ 2 } fontWeight={ 700 }/>
+          </Address>
+        );
+      }
+
+      case 'block': {
+        return (
+          <Flex alignItems="center">
+            <Icon as={ blockIcon } boxSize={ 6 } mr={ 2 } color="gray.500"/>
+            <Link fontWeight={ 700 } href={ link('block', { id: String(data.block_number) }) }>
+              { data.block_number }
+            </Link>
+          </Flex>
+        );
+      }
+
+      case 'transaction': {
+        return (
+          <Flex alignItems="center" overflow="hidden">
+            <Icon as={ txIcon } boxSize={ 6 } mr={ 2 } color="gray.500"/>
+            <Address>
+              <AddressLink hash={ data.tx_hash } type="transaction" fontWeight={ 700 }/>
+            </Address>
+          </Flex>
+        );
+      }
+    }
+  })();
+
+  const secondRow = (() => {
+    switch (data.type) {
+      case 'token': {
+        return (
+          <HashStringShortenDynamic hash={ data.address }/>
+        );
+      }
+      case 'block': {
+        return (
+          <HashStringShortenDynamic hash={ data.block_hash }/>
+        );
+      }
+      case 'contract':
+      case 'address': {
+        return data.name ? <Text>{ data.name }</Text> : null;
+      }
+
+      default:
+        return null;
+    }
+  })();
+
+  return (
+    <ListItemMobile py={ 3 } fontSize="sm" rowGap={ 2 }>
+      <Flex justifyContent="space-between" w="100%" overflow="hidden">
+        { firstRow }
+        <Text variant="secondary" ml={ 8 } textTransform="capitalize">{ data.type }</Text>
+      </Flex>
+      { secondRow }
+    </ListItemMobile>
+  );
+};
+
+export default SearchResultListItem;

ui/searchResults/SearchResultTableItem.tsx

@@ -1,4 +1,4 @@
-import { Tr, Td, Text, Link, Flex, Icon } from '@chakra-ui/react';
+import { Tr, Td, Text, Link, Flex, Icon, Box } from '@chakra-ui/react';
 import React from 'react';
 
 import type { SearchResultItem } from 'types/api/search';
@@ -26,16 +26,17 @@ const SearchResultTableItem = ({ data }: Props) => {
             <Td fontSize="sm">
               <Flex alignItems="center">
                 <TokenLogo boxSize={ 6 } hash={ data.address } name={ data.name }/>
-                <Text fontWeight={ 700 } ml={ 2 }>
-                  <span>{ data.name }</span>
-                  { data.symbol && <span> ({ data.symbol })</span> }
-                </Text>
+                <Link ml={ 2 } href={ link('token_index', { hash: data.address }) } fontWeight={ 700 }>
+                  <span>
+                    { data.name }{ data.symbol ? ` (${ data.symbol })` : '' }
+                  </span>
+                </Link>
               </Flex>
             </Td>
             <Td fontSize="sm" verticalAlign="middle">
-              <Address>
-                <AddressLink hash={ data.address } type="token"/>
-              </Address>
+              <Box whiteSpace="nowrap" overflow="hidden">
+                <HashStringShortenDynamic hash={ data.address }/>
+              </Box>
             </Td>
           </>
         );
@@ -49,13 +50,11 @@ const SearchResultTableItem = ({ data }: Props) => {
               <Td fontSize="sm">
                 <Address>
                   <AddressIcon hash={ data.address }/>
-                  <Text fontWeight={ 700 } ml={ 2 }>{ data.name }</Text>
+                  <AddressLink fontWeight={ 700 } ml={ 2 } hash={ data.address }/>
                 </Address>
               </Td>
               <Td fontSize="sm" verticalAlign="middle">
-                <Address>
-                  <AddressLink hash={ data.address } type="address"/>
-                </Address>
+                { data.name }
               </Td>
             </>
           );
@@ -65,7 +64,7 @@ const SearchResultTableItem = ({ data }: Props) => {
           <Td colSpan={ 2 } fontSize="sm">
             <Address>
               <AddressIcon hash={ data.address }/>
-              <AddressLink hash={ data.address } ml={ 2 } type="address"/>
+              <AddressLink hash={ data.address } ml={ 2 } type="address" fontWeight={ 700 }/>
             </Address>
           </Td>
         );
@@ -77,15 +76,15 @@ const SearchResultTableItem = ({ data }: Props) => {
             <Td fontSize="sm">
               <Flex alignItems="center">
                 <Icon as={ blockIcon } boxSize={ 6 } mr={ 2 } color="gray.500"/>
-                <Text fontWeight={ 700 }>
+                <Link fontWeight={ 700 } href={ link('block', { id: String(data.block_number) }) }>
                   { data.block_number }
-                </Text>
+                </Link>
               </Flex>
             </Td>
             <Td fontSize="sm" verticalAlign="middle">
-              <Link overflow="hidden" whiteSpace="nowrap" display="block" href={ link('block', { id: String(data.block_number) }) }>
+              <Box overflow="hidden" whiteSpace="nowrap">
                 <HashStringShortenDynamic hash={ data.block_hash }/>
-              </Link>
+              </Box>
             </Td>
           </>
         );
@@ -97,7 +96,7 @@ const SearchResultTableItem = ({ data }: Props) => {
             <Flex alignItems="center">
               <Icon as={ txIcon } boxSize={ 6 } mr={ 2 } color="gray.500"/>
               <Address>
-                <AddressLink hash={ data.tx_hash } type="transaction"/>
+                <AddressLink hash={ data.tx_hash } type="transaction" fontWeight={ 700 }/>
               </Address>
             </Flex>
           </Td>
@@ -109,7 +108,11 @@ const SearchResultTableItem = ({ data }: Props) => {
   return (
     <Tr>
       { content }
-      <Td fontSize="sm" textTransform="capitalize" verticalAlign="middle">{ data.type }</Td>
+      <Td fontSize="sm" textTransform="capitalize" verticalAlign="middle">
+        <Text variant="secondary">
+          { data.type }
+        </Text>
+      </Td>
     </Tr>
   );
 };

ui/shared/ContentLoader.tsx

@@ -9,9 +9,10 @@ const runnerAnimation = keyframes`
 
 interface Props {
   className?: string;
+  text?: string;
 }
 
-const ContentLoader = ({ className }: Props) => {
+const ContentLoader = ({ className, text }: Props) => {
   return (
     <Box display="inline-block" className={ className }>
       <Box
@@ -30,7 +31,9 @@ const ContentLoader = ({ className }: Props) => {
           borderRadius: 'full',
         }}
       />
-      <Text mt={ 6 } variant="secondary">Loading data, please wait... </Text>
+      <Text mt={ 6 } variant="secondary">
+        { text || 'Loading data, please wait...' }
+      </Text>
     </Box>
   );
 };

ui/snippets/searchBar/SearchBar.tsx

@@ -76,7 +76,7 @@ const SearchBar = ({ isHomepage, withShadow }: Props) => {
         />
       </PopoverTrigger>
       <PopoverContent w={ `${ menuWidth.current }px` } maxH={{ base: '300px', lg: '500px' }} overflowY="scroll" ref={ menuRef }>
-        <PopoverBody display="flex" flexDirection="column" rowGap="6">
+        <PopoverBody py={ 6 }>
           <SearchBarSuggest query={ query }/>
         </PopoverBody>
       </PopoverContent>

ui/snippets/searchBar/SearchBarSuggest.tsx

@@ -1,11 +1,11 @@
 import { Box, Text } from '@chakra-ui/react';
 import type { UseQueryResult } from '@tanstack/react-query';
-import _groupBy from 'lodash/groupBy';
 import React from 'react';
 
-import type { SearchResult, SearchResultType } from 'types/api/search';
+import type { SearchResult } from 'types/api/search';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
+import ContentLoader from 'ui/shared/ContentLoader';
 
 import SearchBarSuggestItem from './SearchBarSuggestItem';
 
@@ -13,25 +13,12 @@ interface Props {
   query: UseQueryResult<SearchResult>;
 }
 
-interface Group {
-  type: SearchResultType;
-  title: string;
-}
-
-const GROUPS: Array<Group> = [
-  { type: 'block', title: 'Blocks' },
-  { type: 'token', title: 'Tokens' },
-  { type: 'address', title: 'Address' },
-  { type: 'transaction', title: 'Transactions' },
-  { type: 'contract', title: 'Contracts' },
-];
-
 const SearchBarSuggest = ({ query }: Props) => {
   const isMobile = useIsMobile();
-  const groupedData = _groupBy(query.data?.items || [], 'type');
 
   const content = (() => {
     if (query.isLoading) {
+      return <ContentLoader text="We are searching, please wait... "/>;
       return <Box>loading...</Box>;
     }
 
@@ -39,26 +26,17 @@ const SearchBarSuggest = ({ query }: Props) => {
       return <Box>Something went wrong. Try refreshing the page or come back later.</Box>;
     }
 
-    if (query.data.items.length === 0) {
-      return <Box fontWeight={ 500 }>Found <Text fontWeight={ 700 } as="span">0</Text> matching results</Box>;
-    }
+    const num = query.data.next_page_params ? '50+' : query.data.items.length;
 
-    return Object.entries(groupedData).map(([ group, data ]) => {
-      const groupName = GROUPS.find(({ type }) => type === group)?.title;
-      return (
-        <Box key={ group }>
-          <Text variant="secondary" fontSize="sm" fontWeight={ 600 } mb={ 3 }>{ groupName } ({ data.length })</Text>
-          { data.map((item, index) => <SearchBarSuggestItem key={ index } data={ item } isMobile={ isMobile }/>) }
-        </Box>
-      );
-    });
+    return (
+      <>
+        <Box fontWeight={ 500 } fontSize="sm">Found <Text fontWeight={ 700 } as="span">{ num }</Text> matching results</Box>
+        { query.data.items.map((item, index) => <SearchBarSuggestItem key={ index } data={ item } isMobile={ isMobile }/>) }
+      </>
+    );
   })();
 
-  return (
-    <Box>
-      { content }
-    </Box>
-  );
+  return content;
 };
 
 export default SearchBarSuggest;

ui/snippets/searchBar/SearchBarSuggestItem.tsx

@@ -1,12 +1,13 @@
-import { chakra, Text, Flex, useColorModeValue } from '@chakra-ui/react';
+import { chakra, Text, Flex, useColorModeValue, Icon } from '@chakra-ui/react';
 import React from 'react';
 
 import type { SearchResultItem } from 'types/api/search';
 
+import blockIcon from 'icons/block.svg';
+import txIcon from 'icons/transactions.svg';
 import link from 'lib/link/link';
-import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
-import HashStringShorten from 'ui/shared/HashStringShorten';
+import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import TokenLogo from 'ui/shared/TokenLogo';
 
 interface Props {
@@ -34,47 +35,98 @@ const SearchBarSuggestItem = ({ data, isMobile }: Props) => {
     }
   })();
 
-  const content = (() => {
+  const firstRow = (() => {
     switch (data.type) {
       case 'token': {
         return (
           <>
-            <Flex>
-              <TokenLogo boxSize={ 6 } hash={ data.address } name={ data.name }/>
-              <Text fontWeight={ 700 } ml={ 2 }>
-                <span>{ data.name }</span>
-                { data.symbol && <span> ({ data.symbol })</span> }
-              </Text>
-            </Flex>
-            <Text variant="secondary" mt={ 2 } overflow="hidden" whiteSpace="nowrap">
-              { isMobile ? <HashStringShorten hash={ data.address } isTooltipDisabled/> : data.address }
+            <TokenLogo boxSize={ 6 } hash={ data.address } name={ data.name } flexShrink={ 0 }/>
+            <Text fontWeight={ 700 } ml={ 2 } w="200px" overflow="hidden" whiteSpace="nowrap" textOverflow="ellipsis" flexShrink={ 0 }>
+              <span>{ data.name }</span>
+              { data.symbol && <span> ({ data.symbol })</span> }
             </Text>
+            { !isMobile && (
+              <Text overflow="hidden" whiteSpace="nowrap" ml={ 2 } variant="secondary">
+                <HashStringShortenDynamic hash={ data.address } isTooltipDisabled/>
+              </Text>
+            ) }
           </>
         );
       }
       case 'contract':
       case 'address': {
         return (
-          <Address>
-            <AddressIcon hash={ data.address }/>
-            <Text fontWeight={ 700 } ml={ 2 }>{ data.name || data.address }</Text>
-          </Address>
+          <>
+            <AddressIcon hash={ data.address } mr={ 2 }/>
+            <chakra.span overflow="hidden" whiteSpace="nowrap" fontWeight={ 700 }>
+              <HashStringShortenDynamic hash={ data.address } isTooltipDisabled/>
+            </chakra.span>
+            { !isMobile && (
+              <Text variant="secondary" ml={ 2 }>
+                { data.name }
+              </Text>
+            ) }
+          </>
         );
       }
       case 'block': {
         return (
-          <Text>
-            { data.block_number }
-          </Text>
+          <>
+            <Icon as={ blockIcon } boxSize={ 6 } mr={ 2 } color="gray.500"/>
+            <chakra.span fontWeight={ 700 }>{ data.block_number }</chakra.span>
+            { !isMobile && (
+              <Text variant="secondary" overflow="hidden" whiteSpace="nowrap" ml={ 2 }>
+                <HashStringShortenDynamic hash={ data.block_hash } isTooltipDisabled/>
+              </Text>
+            ) }
+          </>
         );
       }
       case 'transaction': {
         return (
-          <Text>
-            { data.tx_hash }
+          < >
+            <Icon as={ txIcon } boxSize={ 6 } mr={ 2 } color="gray.500"/>
+            <chakra.span overflow="hidden" whiteSpace="nowrap" fontWeight={ 700 }>
+              <HashStringShortenDynamic hash={ data.tx_hash } isTooltipDisabled/>
+            </chakra.span>
+          </>
+        );
+      }
+    }
+  })();
+
+  const secondRow = (() => {
+    if (!isMobile) {
+      return null;
+    }
+
+    switch (data.type) {
+      case 'token': {
+        return (
+          <Text variant="secondary" whiteSpace="nowrap" overflow="hidden">
+            <HashStringShortenDynamic hash={ data.address } isTooltipDisabled/>
           </Text>
         );
       }
+      case 'block': {
+        return (
+          <Text variant="secondary" whiteSpace="nowrap" overflow="hidden">
+            <HashStringShortenDynamic hash={ data.block_hash } isTooltipDisabled/>
+          </Text>
+        );
+      }
+      case 'contract':
+      case 'address': {
+        return (
+          <Text variant="secondary" whiteSpace="nowrap" overflow="hidden">
+            { data.name }
+          </Text>
+        );
+      }
+
+      default: {
+        return null;
+      }
     }
   })();
 
@@ -82,7 +134,9 @@ const SearchBarSuggestItem = ({ data, isMobile }: Props) => {
     <chakra.a
       py={ 3 }
       px={ 1 }
-      display="block"
+      display="flex"
+      flexDir="column"
+      rowGap={ 2 }
       borderColor={ useColorModeValue('blackAlpha.200', 'whiteAlpha.200') }
       borderBottomWidth="1px"
       _last={{
@@ -93,8 +147,14 @@ const SearchBarSuggestItem = ({ data, isMobile }: Props) => {
       }}
       fontSize="sm"
       href={ url }
+      _first={{
+        mt: 2,
+      }}
     >
-      { content }
+      <Flex display="flex" alignItems="center">
+        { firstRow }
+      </Flex>
+      { secondRow }
     </chakra.a>
   );
 };

ui/snippets/searchBar/useSearchQuery.tsx

@@ -6,49 +6,49 @@ import useDebounce from 'lib/hooks/useDebounce';
 import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import useUpdateValueEffect from 'lib/hooks/useUpdateValueEffect';
 
-// const data = [
-//   {
-//     address: '0x377c5F2B300B25a534d4639177873b7fEAA56d4B',
-//     address_url: '/address/0x377c5F2B300B25a534d4639177873b7fEAA56d4B',
-//     name: 'Toms NFT',
-//     symbol: 'TNT',
-//     token_url: '/token/0x377c5F2B300B25a534d4639177873b7fEAA56d4B',
-//     type: 'token' as const,
-//   },
-//   {
-//     address: '0xC35Cc7223B0175245E9964f2E3119c261E8e21F9',
-//     address_url: '/address/0xC35Cc7223B0175245E9964f2E3119c261E8e21F9',
-//     name: 'TomToken',
-//     symbol: 'pdE1B',
-//     token_url: '/token/0xC35Cc7223B0175245E9964f2E3119c261E8e21F9',
-//     type: 'token' as const,
-//   },
-//   {
-//     address: '0xC35Cc7223B0175245E9964f2E3119c261E8e21F9',
-//     address_url: '/address/0xC35Cc7223B0175245E9964f2E3119c261E8e21F9',
-//     name: 'TomToken',
-//     symbol: 'pdE1B',
-//     token_url: '/token/0xC35Cc7223B0175245E9964f2E3119c261E8e21F9',
-//     type: 'token' as const,
-//   },
-//   {
-//     block_hash: '0x1af31d7535dded06bab9a88eb40ee2f8d0529a60ab3b8a7be2ba69b008cacbd1',
-//     block_number: 8198536,
-//     type: 'block' as const,
-//     url: '/block/0x1af31d7535dded06bab9a88eb40ee2f8d0529a60ab3b8a7be2ba69b008cacbd1',
-//   },
-//   {
-//     address: '0xb64a30399f7F6b0C154c2E7Af0a3ec7B0A5b131a',
-//     name: null,
-//     type: 'address' as const,
-//     url: '/address/0xb64a30399f7F6b0C154c2E7Af0a3ec7B0A5b131a',
-//   },
-//   {
-//     tx_hash: '0x349d4025d03c6faec117ee10ac0bce7c7a805dd2cbff7a9f101304d9a8a525dd',
-//     type: 'transaction' as const,
-//     url: '/tx/0x349d4025d03c6faec117ee10ac0bce7c7a805dd2cbff7a9f101304d9a8a525dd',
-//   },
-// ];
+// const data = {
+//   items: [
+//     {
+//       address: '0x377c5F2B300B25a534d4639177873b7fEAA56d4B',
+//       address_url: '/address/0x377c5F2B300B25a534d4639177873b7fEAA56d4B',
+//       name: 'Toms NFT',
+//       symbol: 'TNT',
+//       token_url: '/token/0x377c5F2B300B25a534d4639177873b7fEAA56d4B',
+//       type: 'token' as const,
+//     },
+//     {
+//       address: '0xC35Cc7223B0175245E9964f2E3119c261E8e21F9',
+//       address_url: '/address/0xC35Cc7223B0175245E9964f2E3119c261E8e21F9',
+//       name: 'TomToken',
+//       symbol: 'pdE1B',
+//       token_url: '/token/0xC35Cc7223B0175245E9964f2E3119c261E8e21F9',
+//       type: 'token' as const,
+//     },
+//     {
+//       block_hash: '0x1af31d7535dded06bab9a88eb40ee2f8d0529a60ab3b8a7be2ba69b008cacbd1',
+//       block_number: 8198536,
+//       type: 'block' as const,
+//       url: '/block/0x1af31d7535dded06bab9a88eb40ee2f8d0529a60ab3b8a7be2ba69b008cacbd1',
+//     },
+//     {
+//       address: '0xb64a30399f7F6b0C154c2E7Af0a3ec7B0A5b131a',
+//       name: null,
+//       type: 'address' as const,
+//       url: '/address/0xb64a30399f7F6b0C154c2E7Af0a3ec7B0A5b131a',
+//     },
+//     {
+//       address: '0xb64a30399f7F6b0C154c2E7Af0a3ec7B0A5b131a',
+//       name: 'Unkown',
+//       type: 'contract' as const,
+//       url: '/address/0xb64a30399f7F6b0C154c2E7Af0a3ec7B0A5b131a',
+//     },
+//     {
+//       tx_hash: '0x349d4025d03c6faec117ee10ac0bce7c7a805dd2cbff7a9f101304d9a8a525dd',
+//       type: 'transaction' as const,
+//       url: '/tx/0x349d4025d03c6faec117ee10ac0bce7c7a805dd2cbff7a9f101304d9a8a525dd',
+//     },
+//   ],
+// };
 
 export default function useSearchQuery(isSearchPage = false) {
   const router = useRouter();