[Issue #2565] Cross-chain Safe search

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

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

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

@@ -21,7 +21,8 @@ export function DAOSearch() {
   const { t } = useTranslation(['dashboard']);
   const [localInput, setLocalInput] = useState<string>('');
   const [typing, setTyping] = useState<boolean>(false);
-  const { errorMessage, isLoading, address, setSearchString } = useSearchDao();
+  const { errorMessage, isLoading, address, setSearchString, safeFoundNetworkPrefixes } =
+    useSearchDao();
 
   const { isOpen, onOpen, onClose } = useDisclosure();
   const ref = useRef<HTMLInputElement>(null);
@@ -149,12 +150,16 @@ export function DAOSearch() {
             w="full"
             position="absolute"
           >
-            <SearchDisplay
-              loading={isLoading}
-              errorMessage={errorMessage}
-              address={address}
-              onClickView={resetSearch}
-            />
+            {safeFoundNetworkPrefixes.map(networkPrefix => (
+              <SearchDisplay
+                key={networkPrefix}
+                loading={isLoading}
+                errorMessage={errorMessage}
+                address={address}
+                networkPrefix={networkPrefix}
+                onClickView={resetSearch}
+              />
+            ))}
           </Box>
         </Popover>
       </Box>

src/hooks/DAO/useSearchDao.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNetworkConfigStore } from '../../providers/NetworkConfig/useNetworkConfigStore';
 import { useIsSafe } from '../safe/useIsSafe';
@@ -7,9 +7,10 @@ import useAddress from '../utils/useAddress';
 export const useSearchDao = () => {
   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 } = useIsSafe(address);
+  const { isSafe, isSafeLoading, safeFoundNetworkPrefixes } = useIsSafe(address);
   const { t } = useTranslation('dashboard');
   const { chain } = useNetworkConfigStore();
 
@@ -21,15 +22,15 @@ export const useSearchDao = () => {
     if (searchString === '' || isLoading || isSafe || isValid === undefined) {
       return;
     }
-
     if (isValid === true) {
-      setErrorMessage(t('errorFailedSearch', { chain: chain.name }));
+      setErrorMessage(t('errorFailedSearch'));
     } else {
       setErrorMessage(t('errorInvalidSearch'));
     }
   }, [chain.name, isLoading, isSafe, isValid, searchString, t]);
 
   return {
+    safeFoundNetworkPrefixes,
     errorMessage,
     isLoading,
     address,

src/hooks/safe/useIsSafe.ts

@@ -1,6 +1,7 @@
-import { useEffect, useState } from 'react';
+import SafeApiKit from '@safe-global/api-kit';
+import { useCallback, useEffect, useState } from 'react';
 import { isAddress } from 'viem';
-import { useSafeAPI } from '../../providers/App/hooks/useSafeAPI';
+import { supportedNetworks } from '../../providers/NetworkConfig/useNetworkConfigStore';
 
 /**
  * A hook which determines whether the provided Ethereum address is a Safe
@@ -15,25 +16,43 @@ import { useSafeAPI } from '../../providers/App/hooks/useSafeAPI';
  */
 export const useIsSafe = (address: string | undefined) => {
   const [isSafeLoading, setSafeLoading] = useState<boolean>(false);
-  const [isSafe, setIsSafe] = useState<boolean | undefined>();
-  const safeAPI = useSafeAPI();
+  const [isSafe, setIsSafe] = useState<boolean | undefined>(undefined);
+  const [safeFoundNetworkPrefixes, setNetworkPrefixes] = useState<string[]>([]);
+
+  const findSafes = useCallback(async (_address: string) => {
+    const networkPrefixes = []; // address prefixes
+    for await (const network of supportedNetworks) {
+      const safeAPI = new SafeApiKit({ chainId: BigInt(network.chain.id) });
+      safeAPI.getSafeCreationInfo(_address);
+      try {
+        await safeAPI.getSafeCreationInfo(_address);
+        networkPrefixes.push(network.addressPrefix);
+      } catch (e) {
+        // Safe not found
+        continue;
+      }
+    }
+    return [networkPrefixes, networkPrefixes.length > 0] as const; // [networks, isSafe]
+  }, []);
 
   useEffect(() => {
     setSafeLoading(true);
     setIsSafe(undefined);
 
-    if (!address || !isAddress(address) || !safeAPI) {
+    if (!address || !isAddress(address)) {
       setIsSafe(false);
       setSafeLoading(false);
       return;
     }
 
-    safeAPI
-      .getSafeCreationInfo(address)
-      .then(() => setIsSafe(true))
+    findSafes(address)
+      .then(([_safeFoundNetworkPrefixes, _isSafe]) => {
+        setNetworkPrefixes(_safeFoundNetworkPrefixes);
+        setIsSafe(_isSafe);
+      })
       .catch(() => setIsSafe(false))
       .finally(() => setSafeLoading(false));
-  }, [address, safeAPI]);
+  }, [address, findSafes]);
 
-  return { isSafe, isSafeLoading };
+  return { isSafe, isSafeLoading, safeFoundNetworkPrefixes };
 };

src/i18n/locales/en/dashboard.json

@@ -2,7 +2,7 @@
   "emptyFavorites": "You haven't added any DAOs yet.",
   "loadingFavorite": "Loading DAO Name",
   "errorInvalidSearch": "Oops! This Ethereum address is invalid.",
-  "errorFailedSearch": "Sorry, this address is not a DAO on {{chain}}.",
+  "errorFailedSearch": "Sorry, this address is not a DAO on any supported chain.",
   "searchDAOPlaceholder": "Enter Address or ENS Name",
   "titleGovernance": "Governance",
   "titleType": "Type",