From 8ba3ec9dc9c99ea156e9e82e5c0f2342df66db0e Mon Sep 17 00:00:00 2001
From: Steven <steven@straatemans.nl>
Date: Fri, 14 Jun 2024 15:27:20 +0200
Subject: [PATCH] feat(explorer): search page (#2258)

---
 .../compact-table-desktop.tsx                 |   2 +-
 .../compact-table-desktop/field-cell.tsx      |   2 +-
 .../search-component/search-component.tsx     | 111 ++++++-----
 .../search/search-results/search-results.tsx  | 178 ++++++++++++++++++
 .../statistics-stack/statistics-stack.tsx     |   1 +
 .../apps/explorer/src/constants/search.ts     |  17 --
 .../src/graphql/fragments/account.graph.ts    |   1 +
 .../src/graphql/queries/block-height.graph.ts |  15 ++
 .../queries/blocks-from-height.graph.ts       |  33 ++++
 .../apps/explorer/src/hooks/search/index.ts   | 153 +++++++++++++++
 .../src/hooks/search/utils/account.ts         |  71 +++++++
 .../src/hooks/search/utils/block-hash.ts      |  32 ++++
 .../src/hooks/search/utils/block-height.ts    |  43 +++++
 .../explorer/src/hooks/search/utils/event.ts  |  31 +++
 .../explorer/src/hooks/search/utils/utils.ts  |  27 +++
 packages/apps/explorer/src/pages/index.tsx    |  80 ++++++--
 packages/apps/explorer/src/services/format.ts |   3 +-
 17 files changed, 718 insertions(+), 82 deletions(-)
 create mode 100644 packages/apps/explorer/src/components/search/search-results/search-results.tsx
 delete mode 100644 packages/apps/explorer/src/constants/search.ts
 create mode 100644 packages/apps/explorer/src/graphql/queries/block-height.graph.ts
 create mode 100644 packages/apps/explorer/src/graphql/queries/blocks-from-height.graph.ts
 create mode 100644 packages/apps/explorer/src/hooks/search/index.ts
 create mode 100644 packages/apps/explorer/src/hooks/search/utils/account.ts
 create mode 100644 packages/apps/explorer/src/hooks/search/utils/block-hash.ts
 create mode 100644 packages/apps/explorer/src/hooks/search/utils/block-height.ts
 create mode 100644 packages/apps/explorer/src/hooks/search/utils/event.ts
 create mode 100644 packages/apps/explorer/src/hooks/search/utils/utils.ts

diff --git a/packages/apps/explorer/src/components/compact-table/compact-table-desktop/compact-table-desktop.tsx b/packages/apps/explorer/src/components/compact-table/compact-table-desktop/compact-table-desktop.tsx
index 566e17fffd..558bc10ba7 100644
--- a/packages/apps/explorer/src/components/compact-table/compact-table-desktop/compact-table-desktop.tsx
+++ b/packages/apps/explorer/src/components/compact-table/compact-table-desktop/compact-table-desktop.tsx
@@ -16,7 +16,7 @@ import { tableClass } from './styles.css';
 const CompactTableDesktop: FC<ICompactTableProps> = ({
   data,
   fields,
-  label,
+  label = 'Table',
 }) => {
   return (
     <Table aria-label={label} isStriped className={tableClass}>
diff --git a/packages/apps/explorer/src/components/compact-table/compact-table-desktop/field-cell.tsx b/packages/apps/explorer/src/components/compact-table/compact-table-desktop/field-cell.tsx
index 7efb767a9e..b28033ff36 100644
--- a/packages/apps/explorer/src/components/compact-table/compact-table-desktop/field-cell.tsx
+++ b/packages/apps/explorer/src/components/compact-table/compact-table-desktop/field-cell.tsx
@@ -15,7 +15,7 @@ const getItem = (item: IProps['item'], key: ITableField['key']) => {
   const value = keyArr.reduce((acc, val) => {
     if (!acc) return;
     const newItem = acc[val];
-    if (!newItem) return;
+    if (newItem === undefined || newItem === null) return;
 
     return newItem;
   }, item);
diff --git a/packages/apps/explorer/src/components/search/search-component/search-component.tsx b/packages/apps/explorer/src/components/search/search-component/search-component.tsx
index 3276672186..c5cb3b0e04 100644
--- a/packages/apps/explorer/src/components/search/search-component/search-component.tsx
+++ b/packages/apps/explorer/src/components/search/search-component/search-component.tsx
@@ -1,8 +1,11 @@
+import { SearchOptionEnum } from '@/hooks/search/utils/utils';
 import { truncateValues } from '@/services/format';
+import type { ApolloError } from '@apollo/client';
 import { MonoSearch } from '@kadena/react-icons/system';
 import { Badge, Box } from '@kadena/react-ui';
 import { atoms } from '@kadena/react-ui/styles';
-import React, { useState } from 'react';
+import type { Dispatch, SetStateAction } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import {
   searchBadgeBoxClass,
   searchBoxClass,
@@ -18,29 +21,48 @@ export type SearchItemTitle =
 
 export interface ISearchItem {
   title: SearchItemTitle;
-  disabled?: boolean;
+  data?: any;
 }
-interface ISearchComponentProps {
-  placeholder: string;
-  searchItems: ISearchItem[];
+export interface ISearchComponentProps {
+  searchData: ISearchItem[];
+  setSearchQuery?: Dispatch<SetStateAction<string>>;
+  searchQuery?: string;
+  searchOption: SearchOptionEnum | null;
+  setSearchOption: Dispatch<SetStateAction<SearchOptionEnum | null>>;
+  loading: boolean;
+  errors: ApolloError[];
 }
 
 const SearchComponent: React.FC<ISearchComponentProps> = ({
-  placeholder,
-  searchItems,
+  searchData,
+  setSearchQuery,
+  searchQuery,
+  searchOption,
+  setSearchOption,
 }) => {
   const [isEditing, setIsEditing] = useState(false);
-  const [searchOption, setSearchOption] = useState<number | null>(null);
   const [searchValue, setSearchValue] = useState<string>('');
   const [optionClicked, setOptionClicked] = useState(false);
   const [escapePressed, setEscapePressed] = useState(false);
+  const ref = useRef<HTMLInputElement>(null);
 
-  const setOptionsDisabledExcept = (exceptIndex: number): void => {
-    searchItems.forEach((item, index) => {
-      if (index !== exceptIndex) {
-        item.disabled = true;
-      }
-    });
+  const handleSearchOption = (
+    inferedOption: SearchItemTitle | undefined,
+  ): void => {
+    if (inferedOption === 'Account') {
+      setSearchOption(SearchOptionEnum.ACCOUNT);
+    }
+    if (inferedOption === 'Request Key') {
+      setSearchOption(SearchOptionEnum.REQUESTKEY);
+    }
+
+    if (inferedOption === 'Block Height') {
+      setSearchOption(SearchOptionEnum.BLOCKHEIGHT);
+    }
+
+    if (!inferedOption || inferedOption === undefined) {
+      setSearchOption(null);
+    }
   };
 
   const inferOption = (value: string): SearchItemTitle | undefined => {
@@ -60,14 +82,11 @@ const SearchComponent: React.FC<ISearchComponentProps> = ({
     return undefined;
   };
 
-  const enableAllOptions = (): void => {
-    searchItems.forEach((item) => {
-      item.disabled = false;
-    });
+  const handleSearch = (): void => {
+    const value = ref.current?.value ?? '';
+    if (setSearchQuery) setSearchQuery(value);
   };
 
-  const handleSearch = (value: string, option: number | null): void => {};
-
   const handleSearchValueChange = (
     e: React.ChangeEvent<HTMLInputElement>,
   ): void => {
@@ -76,24 +95,7 @@ const SearchComponent: React.FC<ISearchComponentProps> = ({
     if (escapePressed || optionClicked) return;
 
     const inferedOption = inferOption(e.target.value);
-    if (inferedOption === 'Account') {
-      setSearchOption(0);
-      setOptionsDisabledExcept(0);
-    }
-    if (inferedOption === 'Request Key') {
-      setSearchOption(1);
-      setOptionsDisabledExcept(1);
-    }
-
-    if (inferedOption === 'Block Height') {
-      setSearchOption(2);
-      setOptionsDisabledExcept(2);
-    }
-
-    if (!inferedOption || inferedOption === undefined) {
-      setSearchOption(null);
-      enableAllOptions();
-    }
+    handleSearchOption(inferedOption);
   };
 
   const handleSearchValueKeyDown = (
@@ -102,7 +104,7 @@ const SearchComponent: React.FC<ISearchComponentProps> = ({
     if (e.key === 'ArrowDown') {
       e.preventDefault();
       setSearchOption((prev) =>
-        prev === null ? 0 : Math.min(prev + 1, searchItems.length - 1),
+        prev === null ? 0 : Math.min(prev + 1, searchData.length - 1),
       );
     } else if (e.key === 'ArrowUp') {
       e.preventDefault();
@@ -112,15 +114,22 @@ const SearchComponent: React.FC<ISearchComponentProps> = ({
       setIsEditing(false);
       setEscapePressed(false);
       setOptionClicked(false);
-      handleSearch(searchValue, searchOption);
+      handleSearch();
     } else if (e.key === 'Escape') {
       setOptionClicked(false);
       setSearchOption(null);
       setEscapePressed(true);
-      enableAllOptions();
+      setIsEditing(false);
+    } else {
+      setEscapePressed(false);
+      setOptionClicked(false);
     }
   };
 
+  useEffect(() => {
+    setSearchValue(searchQuery ?? '');
+  }, [searchQuery]);
+
   return (
     <>
       <Box
@@ -149,11 +158,12 @@ const SearchComponent: React.FC<ISearchComponentProps> = ({
           <MonoSearch />
 
           <input
+            ref={ref}
             type="text"
-            placeholder={placeholder}
+            placeholder="Search the Kadena Blockchain on"
             value={searchValue}
             onChange={(e) => handleSearchValueChange(e)}
-            onFocus={() => setIsEditing(true)}
+            onClick={() => setIsEditing((v) => !v)}
             className={searchInputClass}
           />
 
@@ -163,7 +173,9 @@ const SearchComponent: React.FC<ISearchComponentProps> = ({
               justifyContent={'flex-end'}
               className={searchBadgeBoxClass}
             >
-              <Badge size="lg">{searchItems[searchOption].title}</Badge>
+              {searchData[searchOption] && (
+                <Badge size="lg">{searchData[searchOption].title}</Badge>
+              )}
             </Box>
           )}
         </Box>
@@ -179,15 +191,14 @@ const SearchComponent: React.FC<ISearchComponentProps> = ({
               fontFamily: 'primaryFont',
             })}
           >
-            {searchItems.map((item, index) => (
+            {searchData?.map((item, index) => (
               <Box
                 key={index}
                 onMouseDown={() => setOptionClicked(true)}
                 onClick={() => {
-                  if (!item.disabled) {
-                    setSearchOption(index);
-                    setIsEditing(false);
-                  }
+                  handleSearch();
+                  setSearchOption(index);
+                  setIsEditing(false);
                 }}
                 style={{
                   gridTemplateColumns: '1fr 3fr',
@@ -197,7 +208,7 @@ const SearchComponent: React.FC<ISearchComponentProps> = ({
                   display: 'grid',
                   alignItems: 'flex-start',
                   paddingInlineStart: 'md',
-                  cursor: item.disabled ? 'not-allowed' : 'pointer',
+                  cursor: 'pointer',
                   backgroundColor:
                     index === searchOption ? 'base.@active' : 'base.default',
                   width: '100%',
diff --git a/packages/apps/explorer/src/components/search/search-results/search-results.tsx b/packages/apps/explorer/src/components/search/search-results/search-results.tsx
new file mode 100644
index 0000000000..7dacefc111
--- /dev/null
+++ b/packages/apps/explorer/src/components/search/search-results/search-results.tsx
@@ -0,0 +1,178 @@
+import CompactTable from '@/components/compact-table/compact-table';
+import { FormatAmount } from '@/components/compact-table/utils/format-amount';
+import { FormatLink } from '@/components/compact-table/utils/format-link';
+import { FormatStatus } from '@/components/compact-table/utils/format-status';
+import { SearchOptionEnum } from '@/hooks/search/utils/utils';
+import type { ApolloError } from '@apollo/client';
+import type { FC } from 'react';
+import React from 'react';
+import type { ISearchItem } from '../search-component/search-component';
+
+export interface ISearchResultsProps {
+  searchData: ISearchItem[];
+  loading: boolean;
+  errors: ApolloError[];
+}
+
+const SearchResults: FC<ISearchResultsProps> = ({
+  searchData,
+  loading,
+  errors,
+}) => {
+  console.log(searchData[SearchOptionEnum.REQUESTKEY]);
+  return (
+    <>
+      {loading && <div>Loading...</div>}
+      {errors?.length > 0 && (
+        <pre>Error: {JSON.stringify(errors, null, 2)}</pre>
+      )}
+
+      <section style={{ width: '100%' }}>
+        {searchData[SearchOptionEnum.ACCOUNT].data.length > 0 && (
+          <CompactTable
+            fields={[
+              {
+                label: 'Key',
+                key: 'key',
+                width: '20%',
+              },
+              {
+                label: 'Predicate',
+                key: 'predicate',
+                width: '20%',
+              },
+              {
+                label: 'Chains',
+                key: 'chains',
+                width: '20%',
+              },
+
+              {
+                label: 'Balance',
+                key: 'balance',
+                width: '20%',
+                render: FormatAmount(),
+              },
+            ]}
+            data={Object.values(searchData[SearchOptionEnum.ACCOUNT].data)}
+          />
+        )}
+
+        {searchData[SearchOptionEnum.BLOCKHEIGHT].data?.blocksFromHeight && (
+          <CompactTable
+            fields={[
+              {
+                label: 'ChainId',
+                key: 'node.chainId',
+                width: '20%',
+              },
+              {
+                label: 'Block Height',
+                key: 'node.height',
+                width: '20%',
+              },
+              {
+                label: 'Hash',
+                key: 'node.hash',
+                width: '60%',
+                render: FormatLink({ appendUrl: '/block' }),
+              },
+            ]}
+            data={
+              searchData[SearchOptionEnum.BLOCKHEIGHT].data?.blocksFromHeight
+                .edges
+            }
+          />
+        )}
+        {searchData[SearchOptionEnum.BLOCKHASH].data?.block && (
+          <CompactTable
+            fields={[
+              {
+                label: 'ChainId',
+                key: 'chainId',
+                width: '20%',
+              },
+              {
+                label: 'Block Height',
+                key: 'height',
+                width: '20%',
+              },
+              {
+                label: 'Hash',
+                key: 'hash',
+                width: '60%',
+                render: FormatLink({ appendUrl: '/block' }),
+              },
+            ]}
+            data={[searchData[SearchOptionEnum.BLOCKHASH].data?.block]}
+          />
+        )}
+
+        {searchData[SearchOptionEnum.REQUESTKEY].data?.transaction && (
+          <CompactTable
+            fields={[
+              {
+                label: 'Status',
+                key: 'result.goodResult',
+                variant: 'code',
+                width: '10%',
+                render: FormatStatus(),
+              },
+              {
+                label: 'Sender',
+                key: 'cmd.meta.sender',
+                variant: 'code',
+                width: '25%',
+                render: FormatLink({ appendUrl: '/account' }),
+              },
+              {
+                label: 'RequestKey',
+                key: 'hash',
+                variant: 'code',
+                width: '25%',
+                render: FormatLink({ appendUrl: '/transaction' }),
+              },
+              {
+                label: 'Code Preview',
+                key: 'cmd.payload.code',
+                variant: 'code',
+                width: '40%',
+              },
+            ]}
+            data={[searchData[SearchOptionEnum.REQUESTKEY].data?.transaction]}
+          />
+        )}
+
+        {searchData[SearchOptionEnum.EVENT].data?.events.edges?.length > 0 && (
+          <CompactTable
+            fields={[
+              {
+                label: 'ChainId',
+                key: 'node.chainId',
+                width: '20%',
+              },
+              {
+                label: 'Block Height',
+                key: 'node.block.height',
+                width: '20%',
+              },
+              {
+                label: 'RequestKey',
+                key: 'node.requestKey',
+                width: '20%',
+              },
+              {
+                label: 'Parameters',
+                key: 'node.parameters',
+                width: '40%',
+              },
+            ]}
+            data={searchData[SearchOptionEnum.EVENT].data?.events.edges}
+          />
+        )}
+      </section>
+    </>
+  );
+};
+
+export default SearchResults;
diff --git a/packages/apps/explorer/src/components/statistics-component/statistics-stack/statistics-stack.tsx b/packages/apps/explorer/src/components/statistics-component/statistics-stack/statistics-stack.tsx
index 77e0772347..d3cbf641e8 100644
--- a/packages/apps/explorer/src/components/statistics-component/statistics-stack/statistics-stack.tsx
+++ b/packages/apps/explorer/src/components/statistics-component/statistics-stack/statistics-stack.tsx
@@ -46,6 +46,7 @@ const StatisticsStack: React.FC<IStatisticsComponentProps> = ({ data }) => {
 
           <div className={borderStyleClass}>
             <Select
+              aria-label="Select network"
               defaultSelectedKey={selectedNetwork}
               fontType="code"
               size="lg"
diff --git a/packages/apps/explorer/src/constants/search.ts b/packages/apps/explorer/src/constants/search.ts
deleted file mode 100644
index ea61bc7522..0000000000
--- a/packages/apps/explorer/src/constants/search.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import type { ISearchItem } from '@/components/search/search-component/search-component';
-
-export const getSearchData = (): {
-  searchItems: ISearchItem[];
-  placeholder: string;
-} => {
-  const searchItems: ISearchItem[] = [
-    { title: 'Account' },
-    { title: 'Request Key' },
-    { title: 'Block Height' },
-    { title: 'Block Hash' },
-    { title: 'Events' },
-  ];
-  const placeholder = 'Search the Kadena Blockchain on';
-
-  return { searchItems, placeholder };
-};
diff --git a/packages/apps/explorer/src/graphql/fragments/account.graph.ts b/packages/apps/explorer/src/graphql/fragments/account.graph.ts
index 1aa63a0c00..0d32ced023 100644
--- a/packages/apps/explorer/src/graphql/fragments/account.graph.ts
+++ b/packages/apps/explorer/src/graphql/fragments/account.graph.ts
@@ -7,6 +7,7 @@ export const CORE_ACCOUNT_FIELDS: DocumentNode = gql`
     totalBalance
     chainAccounts {
       chainId
+      balance
       guard {
         keys
         predicate
diff --git a/packages/apps/explorer/src/graphql/queries/block-height.graph.ts b/packages/apps/explorer/src/graphql/queries/block-height.graph.ts
new file mode 100644
index 0000000000..b89fa276b7
--- /dev/null
+++ b/packages/apps/explorer/src/graphql/queries/block-height.graph.ts
@@ -0,0 +1,15 @@
+import { gql } from '@apollo/client';
+import type { DocumentNode } from 'graphql';
+
+export const blockHeight: DocumentNode = gql`
+  query blocksFromHeight($startHeight: Int!, $endHeight: Int!) {
+    block(startHeight: $startHeight, endHeight: $endHeight) {
+      edges {
+        node {
+          hash
+          chainId
+        }
+      }
+
+  }
+`;
diff --git a/packages/apps/explorer/src/graphql/queries/blocks-from-height.graph.ts b/packages/apps/explorer/src/graphql/queries/blocks-from-height.graph.ts
new file mode 100644
index 0000000000..3ec609297b
--- /dev/null
+++ b/packages/apps/explorer/src/graphql/queries/blocks-from-height.graph.ts
@@ -0,0 +1,33 @@
+import { gql } from '@apollo/client';
+import type { DocumentNode } from 'graphql';
+
+export const coreBlocksFromHeights: DocumentNode = gql`
+  query blocksFromHeights(
+    $startHeight: Int!
+    $endHeight: Int
+    $chainIds: [String!]
+    $first: Int
+    $last: Int
+    $before: String
+    $after: String
+  ) {
+    blocksFromHeight(
+      startHeight: $startHeight
+      endHeight: $endHeight
+      chainIds: $chainIds
+      first: $first
+      last: $last
+      before: $before
+      after: $after
+    ) {
+      edges {
+        node {
+          ...CoreBlockFields
+          transactions {
+            totalCount
+          }
+        }
+      }
+    }
+  }
+`;
diff --git a/packages/apps/explorer/src/hooks/search/index.ts b/packages/apps/explorer/src/hooks/search/index.ts
new file mode 100644
index 0000000000..6a7ed9d7fe
--- /dev/null
+++ b/packages/apps/explorer/src/hooks/search/index.ts
@@ -0,0 +1,153 @@
+import { useTransactionRequestKeyQuery } from '@/__generated__/sdk';
+import type { ISearchItem } from '@/components/search/search-component/search-component';
+import type { ApolloError } from '@apollo/client';
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+import { useAccount } from './utils/account';
+import { useBlockHash } from './utils/block-hash';
+import { useBlockHeight } from './utils/block-height';
+import { useEvent } from './utils/event';
+import {
+  SearchOptionEnum,
+  checkLoading,
+  isSearchRequested,
+  returnSearchQuery,
+} from './utils/utils';
+
+export interface IHookReturnValue<T> {
+  loading: boolean;
+  error?: ApolloError;
+  data?: T;
+}
+
+export const useSearch = () => {
+  const router = useRouter();
+  const [searchQuery, setSearchQuery] = useState<string>('');
+  const [isMounted, setIsMounted] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [errors, setErrors] = useState<ApolloError[]>([]);
+  const [searchOption, setSearchOption] = useState<SearchOptionEnum | null>(
+    null,
+  );
+
+  const {
+    loading: accountLoading,
+    data: accountData,
+    error: accountError,
+  } = useAccount(searchQuery, searchOption);
+
+  const {
+    loading: blockLoading,
+    data: blockData,
+    error: blockError,
+  } = useBlockHash(searchQuery, searchOption);
+
+  const {
+    loading: blockHeightLoading,
+    data: blockHeightData,
+    error: blockHeightError,
+  } = useBlockHeight(searchQuery, searchOption);
+
+  const {
+    loading: eventLoading,
+    data: eventData,
+    error: eventError,
+  } = useEvent(searchQuery, searchOption);
+  const {
+    loading: requestKeyLoading,
+    data: requestKeyData,
+    error: requestKeyError,
+  } = useTransactionRequestKeyQuery({
+    variables: {
+      requestKey: returnSearchQuery(
+        searchQuery,
+        searchOption,
+        SearchOptionEnum.REQUESTKEY,
+      ),
+    },
+    skip:
+      !searchQuery ||
+      !isSearchRequested(searchOption, SearchOptionEnum.REQUESTKEY),
+  });
+
+  useEffect(() => {
+    if (!isMounted) return;
+
+    if (!searchQuery) {
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      router.replace(`${router.route}`);
+      return;
+    }
+
+    const { q, so } = router.query;
+    const soInt: SearchOptionEnum = parseInt(so as any);
+
+    if (q === searchQuery && soInt === searchOption) return;
+
+    if (searchOption === SearchOptionEnum.ACCOUNT) {
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      router.push(
+        `${router.route}?q=${searchQuery}&so=${searchOption}&fungible=coin`,
+      );
+    } else {
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      router.push(`${router.route}?q=${searchQuery}&so=${searchOption}`);
+    }
+  }, [searchQuery, searchOption, isMounted]);
+
+  useEffect(() => {
+    if (!router.isReady) return;
+
+    const { q, so } = router.query;
+    const soInt: SearchOptionEnum = parseInt(so as any);
+    setSearchQuery(q as string);
+    setSearchOption(soInt);
+    setIsMounted(true);
+  }, [router.isReady]);
+
+  useEffect(() => {
+    setLoading(
+      checkLoading(
+        accountLoading,
+        blockLoading,
+        blockHeightLoading,
+        eventLoading,
+        requestKeyLoading,
+      ),
+    );
+  }, [
+    accountLoading,
+    blockLoading,
+    blockHeightLoading,
+    eventLoading,
+    requestKeyLoading,
+  ]);
+
+  useEffect(() => {
+    const errors: ApolloError[] = [];
+    if (accountError) errors.push(accountError);
+    if (blockError) errors.push(blockError);
+    if (eventError) errors.push(eventError);
+    if (blockHeightError) errors.push(blockHeightError);
+    if (requestKeyError) errors.push(requestKeyError);
+
+    setErrors(errors);
+  }, [accountError, blockError, blockHeightError, eventError, requestKeyError]);
+
+  const searchData: ISearchItem[] = [
+    { title: 'Account', data: accountData },
+    { title: 'Request Key', data: requestKeyData },
+    { title: 'Block Hash', data: blockData },
+    { title: 'Block Height', data: blockHeightData },
+    { title: 'Events', data: eventData },
+  ];
+  return {
+    searchOption,
+    setSearchOption,
+    setSearchQuery,
+    data: searchData,
+    searchQuery,
+    loading,
+    errors,
+  };
+};
diff --git a/packages/apps/explorer/src/hooks/search/utils/account.ts b/packages/apps/explorer/src/hooks/search/utils/account.ts
new file mode 100644
index 0000000000..69124c462a
--- /dev/null
+++ b/packages/apps/explorer/src/hooks/search/utils/account.ts
@@ -0,0 +1,71 @@
+import { useAccountQuery } from '@/__generated__/sdk';
+import { useEffect, useState } from 'react';
+import type { IHookReturnValue } from '..';
+import {
+  SearchOptionEnum,
+  isSearchRequested,
+  returnSearchQuery,
+} from './utils';
+
+export interface IAccountData {
+  predicate: string;
+  key: string;
+  chains: number;
+  balance: number;
+}
+
+export const useAccount = (
+  searchQuery: string,
+  searchOption: SearchOptionEnum | null,
+): IHookReturnValue<IAccountData[]> => {
+  const [cleanedData, setCleanedData] = useState<IAccountData[]>([]);
+  const { loading, data, error } = useAccountQuery({
+    variables: {
+      accountName: returnSearchQuery(
+        searchQuery,
+        searchOption,
+        SearchOptionEnum.ACCOUNT,
+      ),
+    },
+    skip:
+      !searchQuery ||
+      !isSearchRequested(searchOption, SearchOptionEnum.ACCOUNT),
+  });
+
+  useEffect(() => {
+    const newData =
+      data?.fungibleAccount?.chainAccounts?.reduce<IAccountData[]>(
+        (acc, val) => {
+          const key = val.guard.keys[0];
+          const predicate = val.guard.predicate;
+
+          const item = acc.find(
+            (item) => item.key === key && item.predicate === predicate,
+          );
+
+          if (item) {
+            item.chains = item.chains + 1;
+            item.balance = item.chains + val.balance;
+          } else {
+            acc.push({
+              predicate,
+              key,
+              chains: 1,
+              balance: val.balance,
+            });
+          }
+
+          return acc;
+        },
+        [],
+      ) ?? [];
+
+    setCleanedData(newData);
+  }, [data]);
+
+  return {
+    loading,
+    error,
+    data: cleanedData,
+  };
+};
diff --git a/packages/apps/explorer/src/hooks/search/utils/block-hash.ts b/packages/apps/explorer/src/hooks/search/utils/block-hash.ts
new file mode 100644
index 0000000000..b858a1e167
--- /dev/null
+++ b/packages/apps/explorer/src/hooks/search/utils/block-hash.ts
@@ -0,0 +1,32 @@
+import type { BlockQuery } from '@/__generated__/sdk';
+import { useBlockQuery } from '@/__generated__/sdk';
+import type { IHookReturnValue } from '..';
+import {
+  SearchOptionEnum,
+  isSearchRequested,
+  returnSearchQuery,
+} from './utils';
+
+export const useBlockHash = (
+  searchQuery: string,
+  searchOption: SearchOptionEnum | null,
+): IHookReturnValue<BlockQuery> => {
+  const { loading, data, error } = useBlockQuery({
+    variables: {
+      hash: returnSearchQuery(
+        searchQuery,
+        searchOption,
+        SearchOptionEnum.BLOCKHASH,
+      ),
+    },
+    skip:
+      !searchQuery ||
+      !isSearchRequested(searchOption, SearchOptionEnum.BLOCKHASH),
+  });
+
+  return {
+    loading,
+    data,
+    error,
+  };
+};
diff --git a/packages/apps/explorer/src/hooks/search/utils/block-height.ts b/packages/apps/explorer/src/hooks/search/utils/block-height.ts
new file mode 100644
index 0000000000..d9336d3fa6
--- /dev/null
+++ b/packages/apps/explorer/src/hooks/search/utils/block-height.ts
@@ -0,0 +1,43 @@
+import type { BlocksFromHeightsQuery } from '@/__generated__/sdk';
+import { useBlocksFromHeightsQuery } from '@/__generated__/sdk';
+import type { IHookReturnValue } from '..';
+import {
+  SearchOptionEnum,
+  isSearchRequested,
+  returnSearchQuery,
+} from './utils';
+
+export const useBlockHeight = (
+  searchQuery: string,
+  searchOption: SearchOptionEnum | null,
+): IHookReturnValue<BlocksFromHeightsQuery> => {
+  const { loading, data, error } = useBlocksFromHeightsQuery({
+    variables: {
+      first: 200,
+      startHeight: parseInt(
+        returnSearchQuery(
+          searchQuery,
+          searchOption,
+          SearchOptionEnum.BLOCKHEIGHT,
+        ),
+      ),
+      endHeight: parseInt(
+        returnSearchQuery(
+          searchQuery,
+          searchOption,
+          SearchOptionEnum.BLOCKHEIGHT,
+        ),
+      ),
+    },
+    skip:
+      !searchQuery ||
+      isNaN(parseInt(searchQuery)) ||
+      !isSearchRequested(searchOption, SearchOptionEnum.BLOCKHEIGHT),
+  });
+
+  return {
+    loading,
+    data,
+    error,
+  };
+};
diff --git a/packages/apps/explorer/src/hooks/search/utils/event.ts b/packages/apps/explorer/src/hooks/search/utils/event.ts
new file mode 100644
index 0000000000..5554c879f2
--- /dev/null
+++ b/packages/apps/explorer/src/hooks/search/utils/event.ts
@@ -0,0 +1,31 @@
+import type { EventsQuery } from '@/__generated__/sdk';
+import { useEventsQuery } from '@/__generated__/sdk';
+import type { IHookReturnValue } from '..';
+import {
+  SearchOptionEnum,
+  isSearchRequested,
+  returnSearchQuery,
+} from './utils';
+
+export const useEvent = (
+  searchQuery: string,
+  searchOption: SearchOptionEnum | null,
+): IHookReturnValue<EventsQuery> => {
+  const { loading, data, error } = useEventsQuery({
+    variables: {
+      qualifiedName: returnSearchQuery(
+        searchQuery,
+        searchOption,
+        SearchOptionEnum.EVENT,
+      ),
+    },
+    skip:
+      !searchQuery || !isSearchRequested(searchOption, SearchOptionEnum.EVENT),
+  });
+
+  return {
+    loading,
+    data,
+    error,
+  };
+};
diff --git a/packages/apps/explorer/src/hooks/search/utils/utils.ts b/packages/apps/explorer/src/hooks/search/utils/utils.ts
new file mode 100644
index 0000000000..d005b7c492
--- /dev/null
+++ b/packages/apps/explorer/src/hooks/search/utils/utils.ts
@@ -0,0 +1,27 @@
+export enum SearchOptionEnum {
+  ACCOUNT,
+  REQUESTKEY,
+  BLOCKHASH,
+  BLOCKHEIGHT,
+  EVENT,
+}
+
+export const checkLoading = (...attrs: boolean[]): boolean => {
+  return attrs.find((v: boolean) => v === false) ?? false;
+};
+
+export const isSearchRequested = (
+  searchOption: SearchOptionEnum | null,
+  requestedSearchOption: SearchOptionEnum,
+): boolean => requestedSearchOption === searchOption || searchOption === null;
+
+export const returnSearchQuery = (
+  searchQuery: string,
+  searchOption: SearchOptionEnum | null,
+  requestedSearchOption: SearchOptionEnum,
+): string => {
+  if (isSearchRequested(searchOption, requestedSearchOption))
+    return searchQuery ?? '';
+
+  return '';
+};
diff --git a/packages/apps/explorer/src/pages/index.tsx b/packages/apps/explorer/src/pages/index.tsx
index aca2472c33..db71fff9ab 100644
--- a/packages/apps/explorer/src/pages/index.tsx
+++ b/packages/apps/explorer/src/pages/index.tsx
@@ -1,26 +1,82 @@
 import BlockTable from '@/components/block-table/block-table';
+import { Media } from '@/components/layout/media';
 import SearchLayout from '@/components/layout/search-layout/search-layout';
 import SearchComponent from '@/components/search/search-component/search-component';
-import { getSearchData } from '@/constants/search';
+import SearchResults from '@/components/search/search-results/search-results';
+import { useSearch } from '@/hooks/search';
 import { LogoKdacolorLight } from '@kadena/react-icons/brand';
 import { Stack } from '@kadena/react-ui';
-import { atoms } from '@kadena/react-ui/styles';
 import React from 'react';
 
 const Home: React.FC = () => {
-  const searchData = getSearchData();
+  const {
+    setSearchQuery,
+    searchQuery,
+    searchOption,
+    setSearchOption,
+    data: searchData,
+    loading,
+    errors,
+  } = useSearch();
 
   return (
     <SearchLayout>
-      <Stack
-        className={atoms({ flexDirection: 'column' })}
-        gap={'xxl'}
-        alignItems={'center'}
-      >
-        <LogoKdacolorLight />
-        <SearchComponent {...searchData} />
-        <BlockTable />
-      </Stack>
+      <Media greaterThanOrEqual="sm">
+        <Stack flexDirection="column" gap={'xxl'} alignItems={'center'}>
+          <LogoKdacolorLight />
+          <SearchComponent
+            searchOption={searchOption}
+            setSearchOption={setSearchOption}
+            searchData={searchData}
+            setSearchQuery={setSearchQuery}
+            searchQuery={searchQuery}
+            loading={loading}
+            errors={errors}
+          />
+          {searchQuery ? (
+            searchData && (
+              <SearchResults
+                searchData={searchData}
+                loading={loading}
+                errors={errors}
+              />
+            )
+          ) : (
+            <BlockTable />
+          )}
+        </Stack>
+      </Media>
+
+      <Media lessThan="sm">
+        <Stack
+          flexDirection="column"
+          gap={'xxl'}
+          alignItems={'center'}
+          paddingBlockStart={'xxl'}
+        >
+          <LogoKdacolorLight />
+          <SearchComponent
+            searchOption={searchOption}
+            setSearchOption={setSearchOption}
+            searchData={searchData}
+            setSearchQuery={setSearchQuery}
+            searchQuery={searchQuery}
+            loading={loading}
+            errors={errors}
+          />
+          {searchQuery ? (
+            searchData && (
+              <SearchResults
+                searchData={searchData}
+                loading={loading}
+                errors={errors}
+              />
+            )
+          ) : (
+            <BlockTable />
+          )}
+        </Stack>
+      </Media>
     </SearchLayout>
   );
 };
diff --git a/packages/apps/explorer/src/services/format.ts b/packages/apps/explorer/src/services/format.ts
index 80a0e26de6..42dd5ef098 100644
--- a/packages/apps/explorer/src/services/format.ts
+++ b/packages/apps/explorer/src/services/format.ts
@@ -50,11 +50,12 @@ export function formatStatisticsData(
   ];
 }
 export function truncateValues(
-  value: string,
+  value?: string,
   minLength: number = 15,
   startChars: number = 5,
   endChars: number = 4,
 ): string {
+  if (!value) return '';
   if (value.length > minLength) {
     return `${value.slice(0, startChars)}...${value.slice(-endChars)}`;
   }