fix: improve fuzzing (#449)

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],
       });
     }
   }

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<FuseResult<Address>[]>([]);
+  const [results, setResults] = useState<FuseResult<SearchItem>[]>([]);
   const [activeIndex, setActiveIndex] = useState(-1);
 
   const refs = useRef<(HTMLAnchorElement | null)[]>([]);

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<Address>;
+  result: FuseResult<SearchItem>;
   tabIndex: number;
 };
 

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;
-};
+  // always the root entry point
+  library: string;
+  // always the explicit key of the value
+  key: string;
+};