Refactor DAOSearch to use resolved addresses with chain IDs and updat…

…e SearchDisplay component

src/components/ui/menus/DAOSearch/SearchDisplay.tsx

@@ -4,6 +4,7 @@ import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Address } from 'viem';
 import { SafeDisplayRow } from '../../../../pages/home/SafeDisplayRow';
+import { getNetworkConfig } from '../../../../providers/NetworkConfig/useNetworkConfigStore';
 import { useDaoInfoStore } from '../../../../store/daoInfo/useDaoInfoStore';
 import { ErrorBoundary } from '../../utils/ErrorBoundary';
 import { MySafesErrorFallback } from '../../utils/MySafesErrorFallback';
@@ -13,15 +14,15 @@ interface ISearchDisplay {
   errorMessage: string | undefined;
   address: Address | undefined;
   onClickView: Function;
-  networkPrefix: string;
+  chainId: number;
 }
 
 export function SearchDisplay({
   loading,
   errorMessage,
   address,
   onClickView,
-  networkPrefix,
+  chainId,
 }: ISearchDisplay) {
   const { t } = useTranslation(['common', 'dashboard']);
   const node = useDaoInfoStore();
@@ -90,7 +91,7 @@ export function SearchDisplay({
           <SafeDisplayRow
             name={undefined}
             address={address}
-            network={networkPrefix}
+            network={getNetworkConfig(chainId).addressPrefix}
             onClick={() => {
               onClickView();
             }}

src/components/ui/menus/DAOSearch/index.tsx

@@ -21,8 +21,7 @@ export function DAOSearch() {
   const { t } = useTranslation(['dashboard']);
   const [localInput, setLocalInput] = useState<string>('');
   const [typing, setTyping] = useState<boolean>(false);
-  const { errorMessage, isLoading, address, setSearchString, safeFoundNetworkPrefixes } =
-    useSearchDao();
+  const { errorMessage, isLoading, setSearchString, resolvedAddressesWithPrefix } = useSearchDao();
 
   const { isOpen, onOpen, onClose } = useDisclosure();
   const ref = useRef<HTMLInputElement>(null);
@@ -65,9 +64,8 @@ export function DAOSearch() {
   const showResults = useMemo(() => {
     if (typing) return false;
     if (isLoading) return true;
-    const hasMessage = errorMessage !== undefined || address !== undefined;
-    return hasMessage;
-  }, [address, errorMessage, typing, isLoading]);
+    return errorMessage === undefined;
+  }, [errorMessage, typing, isLoading]);
 
   useEffect(() => {
     if (localInput) {
@@ -150,13 +148,13 @@ export function DAOSearch() {
             w="full"
             position="absolute"
           >
-            {safeFoundNetworkPrefixes.map(networkPrefix => (
+            {resolvedAddressesWithPrefix.map(resolved => (
               <SearchDisplay
-                key={networkPrefix}
+                key={resolved.address}
                 loading={isLoading}
                 errorMessage={errorMessage}
-                address={address}
-                networkPrefix={networkPrefix}
+                address={resolved.address}
+                chainId={resolved.chainId}
                 onClickView={resetSearch}
               />
             ))}

src/hooks/DAO/useSearchDao.ts

@@ -1,39 +1,70 @@
-import { useState, useEffect } from 'react';
+import SafeApiKit from '@safe-global/api-kit';
+import { useState, useEffect, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useNetworkConfigStore } from '../../providers/NetworkConfig/useNetworkConfigStore';
-import { useIsSafe } from '../safe/useIsSafe';
-import useAddress from '../utils/useAddress';
+import { Address } from 'viem';
+import { useResolveAddressMultiChain } from '../utils/useResolveAddressMultiChain';
 
+type ResolvedAddressWithPrefix = {
+  address: Address;
+  chainId: number;
+};
 export const useSearchDao = () => {
+  const { resolveAddressMultiChain, isLoading: isAddressLoading } = useResolveAddressMultiChain();
   const [searchString, setSearchString] = useState<string>('');
   const [errorMessage, setErrorMessage] = useState<string>();
-  // This hook needs to search all supoorted chains for the address
 
-  const { address, isValid, isLoading: isAddressLoading } = useAddress(searchString);
-  const { isSafe, isSafeLoading, safeFoundNetworkPrefixes } = useIsSafe(address);
-  const { t } = useTranslation('dashboard');
-  const { chain } = useNetworkConfigStore();
+  const [isSafeLookupLoading, setIsSafeLookupLoading] = useState<boolean>(false);
+  const [resolvedAddressesWithPrefix, setSafeResolvedAddressesWithPrefix] = useState<
+    ResolvedAddressWithPrefix[]
+  >([]);
+
+  const findSafes = useCallback(
+    async (resolvedAddressesWithChainId: { address: Address; chainId: number }[]) => {
+      setIsSafeLookupLoading(true);
+      for await (const resolved of resolvedAddressesWithChainId) {
+        const safeAPI = new SafeApiKit({ chainId: BigInt(resolved.chainId) });
+        safeAPI.getSafeCreationInfo(resolved.address);
+        try {
+          await safeAPI.getSafeCreationInfo(resolved.address);
+
+          setSafeResolvedAddressesWithPrefix(prevState => [...prevState, resolved]);
+        } catch (e) {
+          // Safe not found
+          continue;
+        }
+      }
+      setIsSafeLookupLoading(false);
+    },
+    [],
+  );
 
-  const isLoading = isAddressLoading === true || isSafeLoading === true;
+  const resolveInput = useCallback(
+    async (input: string) => {
+      const { resolved, isValid } = await resolveAddressMultiChain(input);
+      if (isValid) {
+        await findSafes(resolved);
+      } else {
+        setErrorMessage('Invalid search');
+      }
+    },
+    [findSafes, resolveAddressMultiChain],
+  );
+
+  const { t } = useTranslation('dashboard');
 
   useEffect(() => {
     setErrorMessage(undefined);
-
-    if (searchString === '' || isLoading || isSafe || isValid === undefined) {
+    setSafeResolvedAddressesWithPrefix([]);
+    if (searchString === '') {
       return;
     }
-    if (isValid === true) {
-      setErrorMessage(t('errorFailedSearch'));
-    } else {
-      setErrorMessage(t('errorInvalidSearch'));
-    }
-  }, [chain.name, isLoading, isSafe, isValid, searchString, t]);
+    resolveInput(searchString).catch(() => setErrorMessage(t('errorInvalidSearch')));
+  }, [resolveInput, searchString, t]);
 
   return {
-    safeFoundNetworkPrefixes,
+    resolvedAddressesWithPrefix,
     errorMessage,
-    isLoading,
-    address,
+    isLoading: isAddressLoading || isSafeLookupLoading,
     setSearchString,
     searchString,
   };