Feat/search proposal val

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#878](https://github.com/alleslabs/celatone-frontend/pull/878) Support searching proposal id and validator address on the main search
 - [#875](https://github.com/alleslabs/celatone-frontend/pull/875) Add Amplitude tracking to validator details page
 - [#865](https://github.com/alleslabs/celatone-frontend/pull/865) Apply voted proposals filter and search input to table
 - [#860](https://github.com/alleslabs/celatone-frontend/pull/860) Add voted proposals in voted tab

src/lib/layout/Searchbar.tsx

@@ -82,6 +82,13 @@ const getRouteOptions = (
       };
     case "Block":
       return { pathname: "/blocks/[height]", query: ["height"] };
+    case "Proposal ID":
+      return { pathname: "/proposals/[proposalId]", query: ["proposalId"] };
+    case "Validator Address":
+      return {
+        pathname: "/validators/[validatorAddress]",
+        query: ["validatorAddress"],
+      };
     case "Pool ID":
       return { pathname: "/pools/[poolId]", query: ["poolId"] };
     case "Module Path":
@@ -188,8 +195,8 @@ const ResultRender = ({
     ) : (
       results.map((type, index) => (
         <ResultItem
-          index={index}
           key={type}
+          index={index}
           type={type}
           value={keyword}
           cursor={cursor}
@@ -224,44 +231,51 @@ const getPlaceholder = ({
   isWasm,
   isPool,
   isMove,
+  isGov,
 }: {
   isWasm: boolean;
   isPool: boolean;
   isMove: boolean;
+  isGov: boolean;
 }) => {
   const wasmText = isWasm ? " / Code ID / Contract Address" : "";
-  const poolText = isPool ? " / Pool ID" : "";
   const moveText = isMove ? " / Module Path" : "";
+  const govText = isGov ? " / Proposal ID / Validator Address" : "";
+  const poolText = isPool ? " / Pool ID" : "";
 
-  return `Search by Account Address / Tx Hash / Block${wasmText}${poolText}${moveText}`;
+  return `Search by Account Address / Tx Hash / Block${wasmText}${moveText}${govText}${poolText}`;
 };
 
 // eslint-disable-next-line sonarjs/cognitive-complexity
 const Searchbar = () => {
-  const [keyword, setKeyword] = useState("");
-  const [displayResults, setDisplayResults] = useState(false);
-  const [isTyping, setIsTyping] = useState(false);
-  const [cursor, setCursor] = useState<number>();
-
+  const isMobile = useMobile();
+  const navigate = useInternalNavigate();
   const {
+    currentChainId,
     chainConfig: {
       features: {
         wasm: { enabled: isWasm },
         pool: { enabled: isPool },
         move: { enabled: isMove },
+        gov: { enabled: isGov },
       },
     },
   } = useCelatoneApp();
-  const navigate = useInternalNavigate();
+
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const boxRef = useRef<HTMLDivElement>(null);
+
+  const [keyword, setKeyword] = useState("");
+  const [isTyping, setIsTyping] = useState(false);
+  const [cursor, setCursor] = useState<number>();
+
   const { results, isLoading, metadata } = useSearchHandler(keyword, () =>
     setIsTyping(false)
   );
-  const boxRef = useRef<HTMLDivElement>(null);
 
   const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
     const inputValue = e.target.value;
     setKeyword(inputValue);
-    setDisplayResults(inputValue.length > 0);
     setIsTyping(true);
     setCursor(0);
   };
@@ -279,15 +293,15 @@ const Searchbar = () => {
           pathname: routeOptions.pathname,
           query: generateQueryObject(routeOptions.query, queryValues),
         });
-        setDisplayResults(false);
         setKeyword("");
+        onClose();
       }
     },
-    [navigate, metadata.icns.address, keyword]
+    [keyword, metadata.icns.address, navigate, onClose]
   );
 
   const handleOnKeyEnter = useCallback(
-    (e: KeyboardEvent<HTMLInputElement>, onClose?: () => void) => {
+    (e: KeyboardEvent<HTMLInputElement>) => {
       if (!results.length) return;
       switch (e.key) {
         case "ArrowUp":
@@ -301,22 +315,21 @@ const Searchbar = () => {
           break;
         }
         case "Enter":
+          e.currentTarget.blur();
           handleSelectResult(results[cursor ?? 0]);
-          onClose?.();
           break;
         default:
           break;
       }
     },
-    [cursor, results, handleSelectResult]
+    [cursor, handleSelectResult, results]
   );
 
   useOutsideClick({
     ref: boxRef,
-    handler: () => setDisplayResults(false),
+    handler: onClose,
   });
-  const isMobile = useMobile();
-  const { isOpen, onOpen, onClose } = useDisclosure();
+
   return isMobile ? (
     <>
       <Button variant="outline-gray" size="sm" onClick={onOpen}>
@@ -326,13 +339,13 @@ const Searchbar = () => {
         <DrawerOverlay />
         <DrawerContent>
           <DrawerBody overflowY="scroll" p={2} m={2}>
-            <FormControl ref={boxRef}>
+            <FormControl>
               <Flex mb={4}>
                 <IconButton
                   fontSize="24px"
                   variant="gray"
                   aria-label="back"
-                  onClick={() => onClose()}
+                  onClick={onClose}
                   color="gray.600"
                   icon={<CustomIcon name="chevron-left" />}
                 />
@@ -341,12 +354,11 @@ const Searchbar = () => {
                   onChange={handleSearchChange}
                   placeholder="Type your keyword ..."
                   autoFocus
-                  onFocus={() => setDisplayResults(keyword.length > 0)}
-                  onKeyDown={(e) => handleOnKeyEnter(e, onClose)}
+                  onKeyDown={handleOnKeyEnter}
                   autoComplete="off"
                 />
               </Flex>
-              {displayResults ? (
+              {keyword.length > 0 ? (
                 <List borderRadius="8px" bg="gray.900" w="full">
                   {isLoading || isTyping ? (
                     <StyledListItem
@@ -390,7 +402,7 @@ const Searchbar = () => {
               )}
             </FormControl>
             <Text variant="body3" color="text.dark" textAlign="center" mt={2}>
-              {getPlaceholder({ isWasm, isPool, isMove })}
+              {getPlaceholder({ isWasm, isPool, isMove, isGov })}
             </Text>
           </DrawerBody>
         </DrawerContent>
@@ -401,41 +413,49 @@ const Searchbar = () => {
       <InputWithIcon
         value={keyword}
         onChange={handleSearchChange}
-        placeholder={getPlaceholder({ isWasm, isPool, isMove })}
-        onFocus={() => setDisplayResults(keyword.length > 0)}
+        placeholder={`Search on ${currentChainId}`}
+        onFocus={onOpen}
         onKeyDown={handleOnKeyEnter}
         autoComplete="off"
       />
-      {displayResults && (
-        <List
-          borderRadius="8px"
-          bg="gray.900"
-          position="absolute"
-          zIndex={2}
-          w="full"
-          top="50px"
-          overflowY="scroll"
-          shadow="dark-lg"
-        >
-          {isLoading || isTyping ? (
-            <StyledListItem display="flex" alignItems="center" gap={2} p={4}>
-              <Spinner color="gray.600" size="sm" />
-              <Text color="text.disabled" variant="body2" fontWeight={500}>
-                Looking for results ...
-              </Text>
-            </StyledListItem>
-          ) : (
-            <ResultRender
-              results={results}
-              keyword={keyword}
-              cursor={cursor}
-              metadata={metadata}
-              setCursor={setCursor}
-              handleSelectResult={handleSelectResult}
-            />
-          )}
-        </List>
-      )}
+      <List
+        borderRadius="8px"
+        bg="gray.900"
+        position="absolute"
+        w="full"
+        h={isOpen ? "fit-content" : 0}
+        top="50px"
+        overflowY="scroll"
+        shadow="dark-lg"
+      >
+        {keyword.length > 0 ? (
+          <>
+            {isLoading || isTyping ? (
+              <StyledListItem display="flex" alignItems="center" gap={2} p={4}>
+                <Spinner color="gray.600" size="sm" />
+                <Text color="text.disabled" variant="body2" fontWeight={500}>
+                  Looking for results ...
+                </Text>
+              </StyledListItem>
+            ) : (
+              <ResultRender
+                results={results}
+                keyword={keyword}
+                cursor={cursor}
+                metadata={metadata}
+                setCursor={setCursor}
+                handleSelectResult={handleSelectResult}
+              />
+            )}
+          </>
+        ) : (
+          <StyledListItem p={4}>
+            <Text color="text.disabled" variant="body2" fontWeight={500}>
+              {getPlaceholder({ isWasm, isPool, isMove, isGov })}
+            </Text>
+          </StyledListItem>
+        )}
+      </List>
     </FormControl>
   );
 };

src/lib/pages/proposal-details/components/proposal-overview/proposal-period-overview/DepositOverview.tsx

@@ -55,9 +55,9 @@ const DepositOverviewBody = ({
           rightIcon={<CustomIcon name="chevron-right" />}
           onClick={() =>
             navigate({
-              pathname: "/proposals/[id]/[tab]",
+              pathname: "/proposals/[proposalId]/[tab]",
               query: {
-                id: proposalData.id,
+                proposalId: proposalData.id,
                 tab: TabIndex.Vote,
               },
               options: {

src/lib/pages/proposal-details/components/proposal-overview/proposal-period-overview/VotingOverview.tsx

@@ -66,9 +66,9 @@ const VotingOverviewBody = ({
         rightIcon={<CustomIcon name="chevron-right" />}
         onClick={() =>
           navigate({
-            pathname: "/proposals/[id]/[tab]",
+            pathname: "/proposals/[proposalId]/[tab]",
             query: {
-              id: proposalData.id,
+              proposalId: proposalData.id,
               tab: TabIndex.Vote,
             },
             options: {

src/lib/pages/proposal-details/index.tsx

@@ -18,13 +18,16 @@ import { TabIndex, zProposalDetailsQueryParams } from "./types";
 
 const InvalidProposal = () => <InvalidState title="Proposal does not exist" />;
 
-const ProposalDetailsBody = ({ id, tab }: ProposalDetailsQueryParams) => {
+const ProposalDetailsBody = ({
+  proposalId,
+  tab,
+}: ProposalDetailsQueryParams) => {
   useGovConfig({ shouldRedirect: true });
 
   const navigate = useInternalNavigate();
-  const { data, isLoading } = useDerivedProposalData(id);
+  const { data, isLoading } = useDerivedProposalData(proposalId);
   const { data: votesInfo, isLoading: isVotesInfoLoading } =
-    useProposalVotesInfo(id);
+    useProposalVotesInfo(proposalId);
   const { data: params, isLoading: isParamsLoading } =
     useDerivedProposalParams();
 
@@ -33,17 +36,17 @@ const ProposalDetailsBody = ({ id, tab }: ProposalDetailsQueryParams) => {
       if (nextTab === tab) return;
       trackUseTab(nextTab);
       navigate({
-        pathname: "/proposals/[id]/[tab]",
+        pathname: "/proposals/[proposalId]/[tab]",
         query: {
-          id,
+          proposalId,
           tab: nextTab,
         },
         options: {
           shallow: true,
         },
       });
     },
-    [id, tab, navigate]
+    [navigate, proposalId, tab]
   );
 
   if (isLoading) return <Loading />;

src/lib/pages/proposal-details/types.ts

@@ -13,7 +13,7 @@ export enum TabIndex {
 }
 
 export const zProposalDetailsQueryParams = z.object({
-  id: z.coerce.number(),
+  proposalId: z.coerce.number(),
   tab: z.union([
     z.nativeEnum(TabIndex),
     z

src/lib/services/proposalService.ts

@@ -335,13 +335,13 @@ export const useUploadAccessParams = (): UseQueryResult<UploadAccess> => {
   );
 };
 
-export const useProposalData = (id: number) => {
+export const useProposalData = (id: number, enabled = true) => {
   const endpoint = useBaseApiRoute("proposals");
 
   return useQuery<ProposalDataResponse>(
     [CELATONE_QUERY_KEYS.PROPOSAL_DATA, endpoint, id],
     async () => getProposalData(endpoint, id),
-    { retry: 1, keepPreviousData: true }
+    { retry: 1, enabled }
   );
 };