Improve search output

Author: lucemans

packages/app/src/discovery/engine.rs

@@ -97,10 +97,10 @@ impl Discovery for DiscoveryEngine {
     async fn query_search(&self, service: &ENSService, query: String) -> Result<Vec<Profile>, ()> {
         let index = self.client.index("profiles");
 
-        // Create search with query and limit to 5 results
+        // Create search with query and limit to 12 results
         let search = index.search()
             .with_query(&query)
-            .with_limit(5)
+            .with_limit(12)
             .build();
 
         // Execute the search

packages/app/src/routes/universal.rs

@@ -50,31 +50,33 @@ pub async fn get(
     Query(query): Query<FreshQuery>,
     State(state): State<Arc<crate::AppState>>,
 ) -> Result<Json<Profile>, RouteError> {
-    get_bulk(
+    let response = get_bulk(
         Qs(UniversalGetBulkQuery {
             fresh: query,
             queries: vec![name_or_address],
         }),
         State(state.clone()),
     )
-    .await
-    .map(|mut res| {
-
-        // TODO: +1 on cache hit popularity discover
-        for profile in &res.response {
-            if let BulkResponse::Ok(profile) = profile {
-                let profile = profile.clone();
-                let _ = state.service.cache.cache_hit(&profile.name);
-                if let Some(discovery) = &state.service.discovery {
-                    let _ = discovery.discover_name(&profile);
+    .await;
+
+    match response {
+        Ok(mut res) => {
+            for profile in &res.response {
+                if let BulkResponse::Ok(profile) = profile {
+                    let profile = profile.clone();
+                    let _ = state.service.cache.cache_hit(&profile.name).await;
+                    if let Some(discovery) = &state.service.discovery {
+                        let _ = discovery.discover_name(&profile).await;
+                    }
                 }
             }
-        }
 
-        Result::<_, _>::from(res.0.response.remove(0))
+            Result::<_, _>::from(res.response.remove(0))
             .map(Json)
             .map_err(RouteError::from)
-    })?
+        }
+        Err(e) => Err(e),
+    }
 }
 
 #[derive(Deserialize, IntoParams, ToSchema)]

packages/search/src/components/ChainIcon.tsx

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+import { LuWallet } from 'react-icons/lu';
+
+interface ChainIconProps {
+  chain: string;
+  iconUrl: string;
+  size?: 'sm' | 'md';
+  className?: string;
+}
+
+export function ChainIcon({ chain, iconUrl, size = 'sm', className = '' }: ChainIconProps) {
+  const [showFallback, setShowFallback] = useState(false);
+  
+  const iconSize = size === 'sm' ? 16 : 20;
+  const containerClasses = `text-gray-400 ${size === 'sm' ? 'h-4 w-4' : 'h-5 w-5'} ${className}`;
+
+  if (showFallback) {
+    return (
+      <span className={containerClasses}>
+        <LuWallet size={iconSize} />
+      </span>
+    );
+  }
+
+  return (
+    <img 
+      src={iconUrl}
+      alt={`${chain} icon`}
+      className={containerClasses}
+      onError={() => setShowFallback(true)}
+    />
+  );
+} 

packages/search/src/hooks/useSearch.ts

@@ -24,16 +24,7 @@ export interface SearchResult {
     pronouns?: string;
     [key: string]: string | undefined;
   };
-  chains?: {
-    eth?: string;
-    btc?: string;
-    sol?: string;
-    arbitrum?: string;
-    optimism?: string;
-    polygon?: string;
-    ltc?: string;
-    [key: string]: string | undefined;
-  };
+  chains?: Record<string, string>;
   fresh?: number;
   resolver?: string;
   ccip_urls?: string[];
@@ -56,6 +47,6 @@ export const useSearch = (searchTerm: string) => {
       return response.data;
     },
     enabled: Boolean(searchTerm.trim()),
-    staleTime: 1000 * 60 * 5, // 5 minutes
+    staleTime: 1000 * 10, // 10 seconds
   });
-}; 
+};

packages/search/src/routes/$profileId.lazy.tsx

@@ -10,9 +10,12 @@ import {
   LuSend,
   LuCopy,
   LuCalendar,
-  LuUser
+  LuUser,
+  LuWallet
 } from "react-icons/lu";
 import { useState } from 'react';
+import { getChainIconUrl } from '../utils/chainIcons';
+import { ChainIcon } from '../components/ChainIcon';
 
 export const Route = createLazyFileRoute('/$profileId')({
   component: Profile,
@@ -170,13 +173,15 @@ function Profile() {
                   <dt className="text-sm font-medium text-gray-500">Ethereum Address</dt>
                   <dd className="mt-1 text-sm text-gray-900 flex items-center">
                     <span className="truncate max-w-xs">{profile.address}</span>
-                    <button 
-                      onClick={() => copyToClipboard(profile.address, 'address')}
-                      className="ml-2 text-gray-400 hover:text-gray-600"
-                      title="Copy address"
-                    >
-                      <LuCopy className="h-4 w-4" />
-                    </button>
+                    {profile.address && (
+                      <button 
+                        onClick={() => copyToClipboard(profile.address!, 'address')}
+                        className="ml-2 text-gray-400 hover:text-gray-600"
+                        title="Copy address"
+                      >
+                        <LuCopy className="h-4 w-4" />
+                      </button>
+                    )}
                   </dd>
                 </div>
               </div>
@@ -360,14 +365,16 @@ function Profile() {
                 {Object.entries(profile.chains).map(([chain, address]) => (
                   <div key={chain} className="flex items-start">
                     <div className="mt-1 flex-shrink-0 text-gray-400">
-                      <svg className="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M3 15V9M8 5L16 5V19L8 19M21 15V9" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-                      </svg>
+                      <ChainIcon 
+                        chain={chain}
+                        iconUrl={getChainIconUrl(chain)}
+                        size="md"
+                      />
                     </div>
                     <div className="ml-3">
                       <dt className="text-sm font-medium text-gray-500">{chain.toUpperCase()}</dt>
-                      <dd className="mt-1 text-sm text-gray-900 flex items-center break-all">
-                        <span className="font-mono">{address as string}</span>
+                      <dd className="mt-1 text-sm text-gray-900 flex items-center">
+                        <span className="font-mono">{address}</span>
                         <button 
                           onClick={() => copyToClipboard(address as string, `${chain} address`)}
                           className="ml-2 text-gray-400 hover:text-gray-600"

packages/search/src/routes/index.lazy.tsx

@@ -3,8 +3,11 @@ import { useState, useEffect, useRef } from 'react';
 import { useSearch } from '../hooks/useSearch';
 import { useProfile } from '../hooks/useProfile';
 import { Link } from '@tanstack/react-router';
-import { LuSearch, LuMapPin, LuMail, LuGlobe, LuTwitter, LuGithub, LuMessageSquare, LuSend } from "react-icons/lu";
+import { LuSearch, LuMapPin, LuMail, LuGlobe, LuTwitter, LuGithub, LuMessageSquare, LuSend, LuWallet } from "react-icons/lu";
 import { useDebounce } from 'use-debounce';
+import { getChainIconUrl } from '../utils/chainIcons';
+import { shouldAttemptDirectLookup } from '../utils/validation';
+import { ChainIcon } from '../components/ChainIcon';
 
 export const Route = createLazyFileRoute('/')({
   component: Home,
@@ -172,7 +175,7 @@ function Home() {
 
                   {/* Profile information with avatar */}
                   <div className="p-2">
-                    <div className="flex items-start space-x-2">
+                    <div className="flex items-start space-x-2 pb-3">
                       {/* Avatar */}
                       <div className={`${profile.header || profile.records?.header ? '-mt-7' : ''} flex-shrink-0`}>
                         {getProfilePicture(profile) ? (
@@ -200,6 +203,22 @@ function Home() {
                           {getDescription(profile)}
                         </p>
 
+                        {/* Chain addresses */}
+                        {profile.chains && Object.keys(profile.chains).length > 0 && (
+                          <div className="mt-1.5 flex flex-wrap gap-x-2 gap-y-1">
+                            {Object.entries(profile.chains).map(([chain, address]) => (
+                              <div key={chain} className="flex items-center text-xs text-gray-500" title={`${chain.toUpperCase()}: ${address}`}>
+                                <ChainIcon 
+                                  chain={chain}
+                                  iconUrl={getChainIconUrl(chain)}
+                                  className="mr-1"
+                                />
+                                <span className="truncate max-w-[100px]">{address}</span>
+                              </div>
+                            ))}
+                          </div>
+                        )}
+                        
                         {/* Profile metadata - making it more compact */}
                         <div className="mt-1.5 flex flex-wrap gap-x-3 gap-y-1 text-xs text-gray-500">
                           {profile.records?.location && (
@@ -256,12 +275,21 @@ function Home() {
       );
     }
 
-    // Case 2: No results found for an active search - try direct profile lookup
-    if (debouncedSearchTerm && !isInitialLoading && !isLoading) {
+    // Case 2: No results found for an active search - try direct profile lookup only if it looks like an ENS name or address
+    if (debouncedSearchTerm && !isInitialLoading && !isLoading && shouldAttemptDirectLookup(debouncedSearchTerm)) {
       return <ProfileFallback searchTerm={debouncedSearchTerm} />;
     }
 
-    // Case 3: Initial loading with no previous data
+    // Case 3: No results found and not a valid ENS name/address format
+    if (debouncedSearchTerm && !isInitialLoading && !isLoading) {
+      return (
+        <div className="p-6 text-center">
+          <p className="text-gray-500">No results found for "{debouncedSearchTerm}"</p>
+        </div>
+      );
+    }
+    
+    // Case 4: Initial loading with no previous data
     if (isInitialLoading) {
       return (
         <div className="text-center p-6">
@@ -273,10 +301,13 @@ function Home() {
       );
     }
 
-    // Case 4: Default state - no search input yet
+    // Case 5: Default state - no search input yet
     return (
       <div className="p-6 text-center">
         <p className="text-gray-500">Enter a search term to find profiles</p>
+        <p className="text-sm text-gray-400 mt-2">
+          Try searching for an ENS name (e.g., "vitalik.eth") or an Ethereum address
+        </p>
       </div>
     );
   };

packages/search/src/utils/chainIcons.ts

@@ -0,0 +1,9 @@
+export const getChainIconUrl = (chain: string): string => {
+  // Convert chain name to lowercase for consistency
+  const chainName = chain.toLowerCase();
+  
+  // Map eth to ethereum for icon URL
+  const normalizedChain = chainName === 'eth' ? 'ethereum' : chainName;
+  
+  return `https://frame.nyc3.cdn.digitaloceanspaces.com/icons/${normalizedChain}.svg`;
+}; 

packages/search/src/utils/validation.ts

@@ -0,0 +1,26 @@
+/**
+ * Validates if a string could be an ENS name
+ * Basic check: must contain a dot and have characters on both sides
+ * More detailed spec: https://docs.ens.domains/contract-api-reference/name-processing
+ */
+export const isValidENSNameFormat = (name: string): boolean => {
+  // Basic check for dot and characters on both sides
+  // This regex allows for UTF-8 characters, numbers, and hyphens
+  // but requires at least one character on each side of a dot
+  return /^[^\s.]+\.[^\s.]+$/.test(name);
+};
+
+/**
+ * Validates if a string matches Ethereum address format
+ * Must be 0x followed by 40 hex characters
+ */
+export const isValidEthereumAddress = (address: string): boolean => {
+  return /^0x[a-fA-F0-9]{40}$/.test(address);
+};
+
+/**
+ * Determines if a search term should trigger a direct profile lookup
+ */
+export const shouldAttemptDirectLookup = (searchTerm: string): boolean => {
+  return isValidENSNameFormat(searchTerm) || isValidEthereumAddress(searchTerm);
+};