1931 Part 2: 1710 Cross network favorites

src/components/ui/icons/FavoriteIcon.tsx

@@ -4,16 +4,19 @@ import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { getAddress } from 'viem';
 import { useAccountFavorites } from '../../../hooks/DAO/loaders/useFavorites';
+import { useNetworkConfig } from '../../../providers/NetworkConfig/NetworkConfigProvider';
 
 interface Props extends BoxProps {
   safeAddress: string;
 }
 
 export function FavoriteIcon({ safeAddress, ...rest }: Props) {
   const { favoritesList, toggleFavorite } = useAccountFavorites();
+  const { addressPrefix } = useNetworkConfig();
   const isFavorite = useMemo(
-    () => (!!safeAddress ? favoritesList.includes(getAddress(safeAddress)) : false),
-    [favoritesList, safeAddress],
+    () =>
+      !!safeAddress ? favoritesList.includes(`${addressPrefix}:${getAddress(safeAddress)}`) : false,
+    [favoritesList, safeAddress, addressPrefix],
   );
   const { t } = useTranslation();
   return (

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

@@ -5,6 +5,8 @@ import { useTranslation } from 'react-i18next';
 import { SafeDisplayRow } from '../../../../pages/home/SafeDisplayRow';
 import { useFractal } from '../../../../providers/App/AppProvider';
 import { useNetworkConfig } from '../../../../providers/NetworkConfig/NetworkConfigProvider';
+import { ErrorBoundary } from '../../utils/ErrorBoundary';
+import { MySafesErrorFallback } from '../../utils/MySafesErrorFallback';
 
 interface ISearchDisplay {
   loading: boolean;
@@ -77,24 +79,25 @@ export function SearchDisplay({
         flexDir="column"
         px="0.5rem"
       >
-        <Text
-          textStyle="button-small"
-          color="neutral-7"
-          py="1rem"
-          px="0.5rem"
-        >
-          {t(isCurrentSafe ? 'labelCurrentDAO' : 'labelDAOFound')}
-        </Text>
-
-        <SafeDisplayRow
-          address={address}
-          network={addressPrefix}
-          onClick={() => {
-            onClickView();
-            if (closeDrawer) closeDrawer();
-          }}
-          showAddress={true}
-        />
+        <ErrorBoundary fallback={MySafesErrorFallback}>
+          <Text
+            textStyle="button-small"
+            color="neutral-7"
+            py="1rem"
+            px="0.5rem"
+          >
+            {t(isCurrentSafe ? 'labelCurrentDAO' : 'labelDAOFound')}
+          </Text>
+          <SafeDisplayRow
+            address={address}
+            network={addressPrefix}
+            onClick={() => {
+              onClickView();
+              if (closeDrawer) closeDrawer();
+            }}
+            showAddress={true}
+          />
+        </ErrorBoundary>
       </Flex>
     );
   }

src/components/ui/menus/SafesMenu/SafeMenuItem.tsx

@@ -1,26 +1,53 @@
-import { Box, Button, MenuItem, Text } from '@chakra-ui/react';
-import { Star } from '@phosphor-icons/react';
+import { Box, Button, Flex, Image, MenuItem, Spacer, Text } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { getAddress } from 'viem';
+import { useSwitchChain } from 'wagmi';
 import { DAO_ROUTES } from '../../../../constants/routes';
 import { useGetDAOName } from '../../../../hooks/DAO/useGetDAOName';
+import useAvatar from '../../../../hooks/utils/useAvatar';
+import useDisplayName from '../../../../hooks/utils/useDisplayName';
+import { useNetworkConfig } from '../../../../providers/NetworkConfig/NetworkConfigProvider';
+import { getChainIdFromPrefix, getNetworkIcon } from '../../../../utils/url';
+import Avatar from '../../page/Header/Avatar';
 
 export interface SafeMenuItemProps {
-  network: string;
   address: string;
+  network: string;
   showAddress?: boolean;
   onClick?: () => void;
 }
 
-export function SafeMenuItem({ network, address }: SafeMenuItemProps) {
-  const { daoName } = useGetDAOName({ address: getAddress(address) });
+export function SafeMenuItem({ address, network }: SafeMenuItemProps) {
+  const { addressPrefix } = useNetworkConfig();
+  const { switchChain } = useSwitchChain();
+
+  const { daoName } = useGetDAOName({
+    address: getAddress(address),
+    chainId: getChainIdFromPrefix(network),
+  });
   const navigate = useNavigate();
 
+  const { displayName: accountDisplayName } = useDisplayName(
+    address,
+    false,
+    getChainIdFromPrefix(network),
+  );
+  const avatarURL = useAvatar(accountDisplayName);
+
   const { t } = useTranslation('dashboard');
 
   const onClickNav = () => {
-    navigate(DAO_ROUTES.dao.relative(network, address));
+    if (addressPrefix !== network) {
+      switchChain(
+        { chainId: getChainIdFromPrefix(network) },
+        {
+          onSuccess: () => navigate(DAO_ROUTES.dao.relative(network, address)),
+        },
+      );
+    } else {
+      navigate(DAO_ROUTES.dao.relative(network, address));
+    }
   };
 
   return (
@@ -37,12 +64,23 @@ export function SafeMenuItem({ network, address }: SafeMenuItemProps) {
         justifyContent="flex-start"
         gap={2}
       >
-        <Star
-          size="1.5rem"
-          weight="fill"
+        <Avatar
+          address={address}
+          url={avatarURL}
         />
+        <Flex flexDir="column">
+          <Text
+            color="white-0"
+            textStyle="button-base"
+          >
+            {daoName ?? t('loadingFavorite')}
+          </Text>
+        </Flex>
+
+        <Spacer />
 
-        <Text color={daoName ? 'white-0' : 'neutral-6'}>{daoName ?? t('loadingFavorite')}</Text>
+        {/* Network Icon */}
+        <Image src={getNetworkIcon(network)} />
       </MenuItem>
     </Box>
   );

src/components/ui/menus/SafesMenu/SafesList.tsx

@@ -2,12 +2,13 @@ import { Box, MenuList } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 import { NEUTRAL_2_82_TRANSPARENT } from '../../../../constants/common';
 import { useAccountFavorites } from '../../../../hooks/DAO/loaders/useFavorites';
-import { useNetworkConfig } from '../../../../providers/NetworkConfig/NetworkConfigProvider';
+import { decodePrefixedAddress } from '../../../../utils/address';
+import { ErrorBoundary } from '../../utils/ErrorBoundary';
+import { MySafesErrorFallback } from '../../utils/MySafesErrorFallback';
 import { SafeMenuItem } from './SafeMenuItem';
 
 export function SafesList() {
   const { favoritesList } = useAccountFavorites();
-  const { addressPrefix } = useNetworkConfig();
 
   const { t } = useTranslation('dashboard');
   return (
@@ -19,25 +20,25 @@ export function SafesList() {
       border="1px solid"
       borderColor="neutral-3"
     >
-      <Box>
-        {favoritesList.length === 0 ? (
-          <Box p="1rem 1rem">{t('emptyFavorites')}</Box>
-        ) : (
-          <Box
-            maxHeight="20rem"
-            overflowY="scroll"
-            className="scroll-dark"
-          >
-            {favoritesList.map(favorite => (
-              <SafeMenuItem
-                key={favorite}
-                network={addressPrefix}
-                address={favorite}
-              />
-            ))}
-          </Box>
-        )}
-      </Box>
+      <ErrorBoundary fallback={MySafesErrorFallback}>
+        <Box>
+          {favoritesList.length === 0 ? (
+            <Box p="1rem 1rem">{t('emptyFavorites')}</Box>
+          ) : (
+            <Box
+              maxHeight="20rem"
+              className="scroll-dark"
+            >
+              {favoritesList.map(favorite => (
+                <SafeMenuItem
+                  key={favorite}
+                  {...decodePrefixedAddress(favorite)}
+                />
+              ))}
+            </Box>
+          )}
+        </Box>
+      </ErrorBoundary>
     </MenuList>
   );
 }

src/components/ui/utils/MySafesErrorFallback.tsx

@@ -0,0 +1,20 @@
+import { Box, Text } from '@chakra-ui/react';
+import { t } from 'i18next';
+
+export function MySafesErrorFallback() {
+  return (
+    <Box
+      p="1rem"
+      maxW="100%"
+      bg="neutral-2"
+      borderRadius="0.5rem"
+    >
+      <Text
+        color="white-alpha-16"
+        align="center"
+      >
+        {t('errorMySafesNotLoaded', { ns: 'common' })}
+      </Text>
+    </Box>
+  );
+}

src/hooks/DAO/loaders/useFavorites.ts

@@ -1,22 +1,25 @@
 import { useState } from 'react';
 import { getAddress } from 'viem';
+import { useNetworkConfig } from '../../../providers/NetworkConfig/NetworkConfigProvider';
+import { encodePrefixedAddress } from '../../../utils/address';
 import { CacheKeys, CacheExpiry } from '../../utils/cache/cacheDefaults';
 import { getValue, setValue } from '../../utils/cache/useLocalStorage';
 
 export const useAccountFavorites = () => {
+  // @dev favorites are strings of the form networkPrefix:address
   const [favoritesList, setFavoritesList] = useState<string[]>(
     getValue({ cacheName: CacheKeys.FAVORITES }) || [],
   );
+  const { addressPrefix } = useNetworkConfig();
 
   const toggleFavorite = (address: string) => {
-    const normalizedAddress = getAddress(address);
-    const favorites: string[] = getValue({ cacheName: CacheKeys.FAVORITES }) || [];
+    const addressWithPrefix = encodePrefixedAddress(getAddress(address), addressPrefix);
+    const favorites = getValue({ cacheName: CacheKeys.FAVORITES }) || [];
     let updatedFavorites: string[] = [];
-
-    if (favorites.includes(normalizedAddress)) {
-      updatedFavorites = favorites.filter(favorite => favorite !== normalizedAddress);
+    if (favorites.includes(addressWithPrefix)) {
+      updatedFavorites = favorites.filter(favorite => favorite !== addressWithPrefix);
     } else {
-      updatedFavorites = favorites.concat([normalizedAddress]);
+      updatedFavorites = favorites.concat([addressWithPrefix]);
     }
 
     setValue({ cacheName: CacheKeys.FAVORITES }, updatedFavorites, CacheExpiry.NEVER);

src/hooks/DAO/useGetDAOName.ts

@@ -64,11 +64,15 @@ const getDAOName = async ({
 const useGetDAOName = ({
   address,
   registryName,
+  chainId,
 }: {
   address: Address;
   registryName?: string | null;
+  chainId?: number;
 }) => {
-  const publicClient = usePublicClient();
+  const publicClient = usePublicClient({
+    chainId,
+  });
   const { baseContracts } = useFractal();
 
   const [daoName, setDaoName] = useState<string>();

src/hooks/utils/useDisplayName.ts

@@ -14,13 +14,14 @@ export const createAccountSubstring = (account: string) => {
  *
  * This is intended to be used for NON DAO display names.  If you would like to get the
  * display name for a DAO, use the useDAOName hook instead.
+ * @todo Should switch to object for props
  */
-const useDisplayName = (account?: string | null, truncate?: boolean) => {
+const useDisplayName = (account?: string | null, truncate?: boolean, chainId?: number) => {
   if (truncate === undefined) truncate = true;
   const { chain } = useNetworkConfig();
   const { data: ensName } = useEnsName({
     address: !!account ? getAddress(account) : undefined,
-    chainId: chain.id,
+    chainId: chainId || chain.id,
   });
 
   const [accountSubstring, setAccountSubstring] = useState<string>();

src/i18n/locales/en/common.json

@@ -49,6 +49,7 @@
   "errorNotProposer": "You do not have the necessary permissions to create a proposal for this Safe.",
   "errorSentryFallbackTitle": "Oops! Something went wrong",
   "errorSentryFallbackMessage": "We apologize for the inconvenience. Please try again later.",
+  "errorMySafesNotLoaded": "Safe(s) could not be loaded. Please try again later.",
   "errorGeneral": "An unexpected error occurred. Please try again later.",
   "errorCopyToClipboard": "Unable to copy text to clipboard!",
   "labelNowishAgo": "just now",

src/pages/home/AllSafesDrawer.tsx

@@ -9,10 +9,12 @@ import {
 } from '@chakra-ui/react';
 import { useState, useRef, useEffect, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
+import { ErrorBoundary } from '../../components/ui/utils/ErrorBoundary';
+import { MySafesErrorFallback } from '../../components/ui/utils/MySafesErrorFallback';
 import { BACKGROUND_SEMI_TRANSPARENT } from '../../constants/common';
 import { CacheKeys } from '../../hooks/utils/cache/cacheDefaults';
 import { getValue } from '../../hooks/utils/cache/useLocalStorage';
-import { useNetworkConfig } from '../../providers/NetworkConfig/NetworkConfigProvider';
+import { decodePrefixedAddress } from '../../utils/address';
 import { SafeDisplayRow } from './SafeDisplayRow';
 
 interface AllSafesDrawerProps {
@@ -22,8 +24,6 @@ interface AllSafesDrawerProps {
 }
 
 export function AllSafesDrawer({ isOpen, onClose }: AllSafesDrawerProps) {
-  const { addressPrefix } = useNetworkConfig();
-
   const { t } = useTranslation('home');
   const [drawerHeight, setDrawerHeight] = useState('50%');
   const [isDragging, setIsDragging] = useState(false);
@@ -135,13 +135,14 @@ export function AllSafesDrawer({ isOpen, onClose }: AllSafesDrawerProps) {
           </Box>
         </DrawerHeader>
         <DrawerBody padding="0">
-          {(getValue({ cacheName: CacheKeys.FAVORITES }) || []).map((favorite: string) => (
-            <SafeDisplayRow
-              key={favorite}
-              network={addressPrefix}
-              address={favorite}
-            />
-          ))}
+          <ErrorBoundary fallback={MySafesErrorFallback}>
+            {(getValue({ cacheName: CacheKeys.FAVORITES }) || []).map((favorite: string) => (
+              <SafeDisplayRow
+                key={favorite}
+                {...decodePrefixedAddress(favorite)}
+              />
+            ))}
+          </ErrorBoundary>
         </DrawerBody>
       </DrawerContent>
     </Drawer>