diff --git a/apps/explorer/src/app/components/search/index.tsx b/apps/explorer/src/app/components/search/index.tsx index 43bcc06c8..3309cbc74 100644 --- a/apps/explorer/src/app/components/search/index.tsx +++ b/apps/explorer/src/app/components/search/index.tsx @@ -1,53 +1,90 @@ -import React from "react"; -import { useState } from "react"; +import { gql, useQuery } from '@apollo/client'; +import React from 'react'; +import { useState } from 'react'; +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore +import debounce from 'lodash.debounce'; -const PARTY_ID_LENGTH = 64; +const TX_LENGTH = 64; enum PossibleIdTypes { - Block = "Block", - Tx = "Tx", - Party = "Party", - Unknown = "Unknown", + Block = 'Block', + Tx = 'Tx', + Party = 'Party', + Market = 'Market', + Unknown = 'Unknown', } -const useGuess = () => { - const [search, setSearch] = useState(""); - const [possibleTypes, setPossibleTypes] = useState(); - - const getPossibleIds = React.useCallback((search: string) => { - if (!search.length) { - return []; - } else if ( - search.startsWith("0x") && - search.length === PARTY_ID_LENGTH + 2 - ) { - return [PossibleIdTypes.Tx, PossibleIdTypes.Party]; - } else if (!search.startsWith("0x") && search.length === PARTY_ID_LENGTH) { - return [PossibleIdTypes.Tx, PossibleIdTypes.Party]; - } else if (!isNaN(Number(search))) { - return [PossibleIdTypes.Block]; +const GUESS_QUERY = gql` + query Guess($guess: ID!) { + party(id: $guess) { + id } - return []; - }, []); + market(id: $guess) { + id + } + } +`; + +const usePossibleType = (search: string) => { + const [possibleType, setPossibleType] = useState(); + const { data, loading, error } = useQuery(GUESS_QUERY, { + variables: { + guess: search, + }, + skip: !search, + }); + + React.useEffect(() => { + if (!isNaN(Number(search))) { + setPossibleType(PossibleIdTypes.Block); + } else if (data?.party) { + setPossibleType(PossibleIdTypes.Party); + } else if (data?.market) { + setPossibleType(PossibleIdTypes.Market); + } else if (search.replace('0x', '').length === TX_LENGTH) { + setPossibleType(PossibleIdTypes.Tx); + } else { + setPossibleType(PossibleIdTypes.Unknown); + } + }, [data?.market, data?.party, search, setPossibleType]); + + return { + loading, + error, + possibleType, + }; +}; + +const useGuess = () => { + const [search, setSearch] = useState(''); + const [debouncedSearch, setDebouncedSearch] = useState(''); + const { loading, error, possibleType } = usePossibleType(debouncedSearch); + const debouncedSearchSet = React.useMemo( + () => debounce(setDebouncedSearch, 1000), + [setDebouncedSearch] + ); const onChange = React.useCallback( (event: React.ChangeEvent) => { const search = event.target.value; setSearch(search); - setPossibleTypes(getPossibleIds(search)); + debouncedSearchSet(search); }, - [getPossibleIds] + [debouncedSearchSet] ); return { onChange, - possibleTypes, search, + loading, + error, + possibleType, }; }; const Search = () => { - const { search, onChange, possibleTypes } = useGuess(); + const { search, onChange } = useGuess(); return (

Vega Block Explorer

@@ -59,8 +96,6 @@ const Search = () => { onChange={(e) => onChange(e)} > - {/* TODO implement links */} -
{JSON.stringify(possibleTypes)}
); }; diff --git a/package.json b/package.json index 9f6f36ae5..2dc5c8474 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "@nrwl/next": "13.8.1", "core-js": "^3.6.5", "graphql": "^16.3.0", + "lodash.debounce": "^4.0.8", "next": "12.0.7", "react": "17.0.2", "react-dom": "17.0.2",