diff --git a/ui/src/app/page.tsx b/ui/src/app/page.tsx index 2fb46635..6b3d33a7 100644 --- a/ui/src/app/page.tsx +++ b/ui/src/app/page.tsx @@ -5,7 +5,7 @@ import Image from 'next/image'; import { Search } from '@/components/Search'; import { SearchSkeleton } from '@/components/SearchSkeleton'; import { Footer } from '@/components/Footer'; -import { type Address } from '@/types'; +import { type SearchItem } from '@/types'; import logo from '@/assets/logo.svg'; function isEthereumAddress(value: any): value is string { @@ -16,8 +16,8 @@ function flattenObject( obj: any, path: string[] = [], chainId: number | null = null, -): Address[] { - const result: Address[] = []; +): SearchItem[] { + const result: SearchItem[] = []; const entries = Object.entries(obj).sort(([keyA], [keyB]) => { if (keyA === 'CHAIN_ID') return -1; if (keyB === 'CHAIN_ID') return 1; @@ -42,6 +42,8 @@ function flattenObject( chainId, link, searchPath: newPath.join(''), + library: newPath[0], + key: newPath[newPath.length - 1], }); } } diff --git a/ui/src/components/Search.tsx b/ui/src/components/Search.tsx index e79d26a7..3fa955bd 100644 --- a/ui/src/components/Search.tsx +++ b/ui/src/components/Search.tsx @@ -3,30 +3,30 @@ import { useState, useEffect, useCallback, useMemo, useRef } from 'react'; import { usePathname, useSearchParams } from 'next/navigation'; import { cn } from '@/utils/cn'; -import { type Address } from '@/types'; +import { type SearchItem } from '@/types'; import Fuse, { FuseResult } from 'fuse.js'; import { Box } from './Box'; import { SearchResult } from './SearchResult'; const fuseOptions = { includeScore: true, - keys: ['searchPath', 'value'], + keys: ['searchPath', 'value', 'library', 'key'], threshold: 0.2, - ignoreLocation: true, + // ignoreLocation: false, useExtendedSearch: true, }; const SEARCH_LIMIT = 32; const DEBOUNCE_TIME = 150; -export const Search = ({ addresses }: { addresses: Address[] }) => { +export const Search = ({ addresses }: { addresses: SearchItem[] }) => { const pathname = usePathname(); const searchParams = useSearchParams(); const searchString = searchParams.get('q'); const [search, setSearch] = useState(searchString || ''); - const [results, setResults] = useState[]>([]); + const [results, setResults] = useState[]>([]); const [activeIndex, setActiveIndex] = useState(-1); const refs = useRef<(HTMLAnchorElement | null)[]>([]); diff --git a/ui/src/components/SearchResult.tsx b/ui/src/components/SearchResult.tsx index c76b0ed6..5ce56100 100644 --- a/ui/src/components/SearchResult.tsx +++ b/ui/src/components/SearchResult.tsx @@ -5,10 +5,10 @@ import { FuseResult } from 'fuse.js'; import { Box } from '@/components/Box'; import { ChainIcon } from '@/components/ChainIcon'; import { cn } from '@/utils/cn'; -import { type Address } from '@/types'; +import { type SearchItem } from '@/types'; type SearchResultProps = { - result: FuseResult
; + result: FuseResult; tabIndex: number; }; diff --git a/ui/src/types.ts b/ui/src/types.ts index b99a9d4e..1a81ff99 100644 --- a/ui/src/types.ts +++ b/ui/src/types.ts @@ -1,7 +1,11 @@ -export type Address = { +export type SearchItem = { path: string[]; value: string; chainId: number | null; link: string; searchPath: string; -}; \ No newline at end of file + // always the root entry point + library: string; + // always the explicit key of the value + key: string; +};