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/SafesMenu/SafeMenuItem.tsx

@@ -1,26 +1,45 @@
-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) {
+export function SafeMenuItem({ address, network }: SafeMenuItemProps) {
+  const { addressPrefix } = useNetworkConfig();
+  const { switchChain } = useSwitchChain();
+
   const { daoName } = useGetDAOName({ address: getAddress(address) });
   const navigate = useNavigate();
+  const { displayName: accountDisplayName } = useDisplayName(address);
+  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 +56,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,10 @@ 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 { SafeMenuItem } from './SafeMenuItem';
 
 export function SafesList() {
   const { favoritesList } = useAccountFavorites();
-  const { addressPrefix } = useNetworkConfig();
 
   const { t } = useTranslation('dashboard');
   return (
@@ -25,14 +23,13 @@ export function SafesList() {
         ) : (
           <Box
             maxHeight="20rem"
-            overflowY="scroll"
             className="scroll-dark"
           >
             {favoritesList.map(favorite => (
               <SafeMenuItem
                 key={favorite}
-                network={addressPrefix}
-                address={favorite}
+                network={favorite.split(':')[0]}
+                address={favorite.split(':')[1]}
               />
             ))}
           </Box>

src/hooks/DAO/loaders/useFavorites.ts

@@ -1,22 +1,26 @@
 import { useState } from 'react';
 import { getAddress } from 'viem';
+import { useNetworkConfig } from '../../../providers/NetworkConfig/NetworkConfigProvider';
 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 }),
+    getValue({ cacheName: CacheKeys.FAVORITES }) || [],
   );
+  const { addressPrefix } = useNetworkConfig();
 
   const toggleFavorite = (address: string) => {
     const normalizedAddress = getAddress(address);
-    const favorites: string[] = getValue({ cacheName: CacheKeys.FAVORITES });
-    let updatedFavorites: string[] = [];
+    const addressWithPrefix = addressPrefix + ':' + normalizedAddress;
 
-    if (favorites.includes(normalizedAddress)) {
-      updatedFavorites = favorites.filter(favorite => favorite !== normalizedAddress);
+    const favorites: string[] = getValue({ cacheName: CacheKeys.FAVORITES }) || [];
+    let updatedFavorites: string[] = [];
+    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/pages/home/AllSafesDrawer.tsx

@@ -12,7 +12,6 @@ import { useTranslation } from 'react-i18next';
 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 { SafeDisplayRow } from './SafeDisplayRow';
 
 interface AllSafesDrawerProps {
@@ -22,8 +21,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 +132,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}
-            />
-          ))}
+          {(getValue({ cacheName: CacheKeys.FAVORITES }) ||
+            []).map((favorite: string) => (
+              <SafeDisplayRow
+                key={favorite}
+                address={favorite.split(':')[1]}
+                network={favorite.split(':')[0]}
+              />
+            ))}
         </DrawerBody>
       </DrawerContent>
     </Drawer>

src/pages/home/MySafes.tsx

@@ -2,14 +2,12 @@ import { Box, Button, Flex, Show, Text, useBreakpointValue, useDisclosure } from
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useAccountFavorites } from '../../hooks/DAO/loaders/useFavorites';
-import { useNetworkConfig } from '../../providers/NetworkConfig/NetworkConfigProvider';
 import { AllSafesDrawer } from './AllSafesDrawer';
 import { SafeDisplayRow } from './SafeDisplayRow';
 
 export function MySafes() {
   const { t } = useTranslation('home');
   const { favoritesList } = useAccountFavorites();
-  const { addressPrefix } = useNetworkConfig();
   const [showAll, setShowAll] = useState(false);
   const { isOpen, onOpen, onClose } = useDisclosure();
 
@@ -52,8 +50,8 @@ export function MySafes() {
             {favoritesToShow.map(favorite => (
               <SafeDisplayRow
                 key={favorite}
-                network={addressPrefix}
-                address={favorite}
+                address={favorite.split(':')[1]}
+                network={favorite.split(':')[0]}
               />
             ))}
           </Box>

src/pages/home/SafeDisplayRow.tsx

@@ -2,15 +2,20 @@ import { Flex, Image, Show, 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 { SafeMenuItemProps } from '../../components/ui/menus/SafesMenu/SafeMenuItem';
 import Avatar from '../../components/ui/page/Header/Avatar';
 import { DAO_ROUTES } from '../../constants/routes';
 import { useGetDAOName } from '../../hooks/DAO/useGetDAOName';
 import useAvatar from '../../hooks/utils/useAvatar';
 import useDisplayName, { createAccountSubstring } from '../../hooks/utils/useDisplayName';
 import { useNetworkConfig } from '../../providers/NetworkConfig/NetworkConfigProvider';
+import { getChainIdFromPrefix, getChainName, getNetworkIcon } from '../../utils/url';
 
 export function SafeDisplayRow({ address, network, onClick, showAddress }: SafeMenuItemProps) {
+  const { addressPrefix } = useNetworkConfig();
+  const { switchChain } = useSwitchChain();
+
   const { daoName } = useGetDAOName({ address: getAddress(address) });
   const navigate = useNavigate();
 
@@ -21,13 +26,20 @@ export function SafeDisplayRow({ address, network, onClick, showAddress }: SafeM
 
   const onClickNav = () => {
     if (onClick) onClick();
-    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));
+    }
   };
 
   const nameColor = showAddress ? 'neutral-7' : 'white-0';
 
-  const networkConfig = useNetworkConfig();
-
   return (
     <Flex
       maxW="100%"
@@ -67,9 +79,9 @@ export function SafeDisplayRow({ address, network, onClick, showAddress }: SafeM
 
       {/* Network Icon */}
       <Flex gap="0.5rem">
-        <Image src={networkConfig.nativeTokenIcon} />
+        <Image src={getNetworkIcon(network)} />
         <Show above="md">
-          <Text>{networkConfig.chain.name}</Text>
+          <Text>{getChainName(network)}</Text>
         </Show>
       </Flex>
     </Flex>

src/utils/url.ts

@@ -1,5 +1,5 @@
 import { normalize } from 'viem/ens';
-
+import * as networks from '../providers/NetworkConfig/networks';
 export const isValidUrl = (urlString: string) => {
   try {
     const url = new URL(urlString);
@@ -28,3 +28,31 @@ export const validateENSName = (ensAddress?: string): boolean => {
     return false;
   }
 };
+
+export const addNetworkPrefix = (address: string, chainId: number): string => {
+  const network = Object.values(networks).find(_network => _network.chain.id === chainId);
+  if (!network) {
+    throw new Error(`No network found for chainId ${chainId}`);
+  }
+  return `${network?.addressPrefix}:${address}`;
+};
+
+export const getNetworkIcon = (_networkPrefix: string): string => {
+  const network = Object.values(networks).find(
+    _network => _network.addressPrefix === _networkPrefix,
+  );
+  if (!network) {
+    throw new Error(`No network found for networkPrefix ${_networkPrefix}`);
+  }
+  return network?.nativeTokenIcon;
+};
+
+export const getChainName = (_networkPrefix: string): string => {
+  const network = Object.values(networks).find(
+    _network => _network.addressPrefix === _networkPrefix,
+  );
+  if (!network) {
+    throw new Error(`No network found for chainId ${_networkPrefix}`);
+  }
+  return network.chain.name;
+};