1931 Part 2: 1710 Cross network favorites

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

@@ -4,7 +4,6 @@ import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { SafeDisplayRow } from '../../../../pages/home/SafeDisplayRow';
 import { useFractal } from '../../../../providers/App/AppProvider';
-import { useNetworkConfig } from '../../../../providers/NetworkConfig/NetworkConfigProvider';
 
 interface ISearchDisplay {
   loading: boolean;
@@ -23,7 +22,6 @@ export function SearchDisplay({
 }: ISearchDisplay) {
   const { t } = useTranslation(['common', 'dashboard']);
   const { node } = useFractal();
-  const { addressPrefix } = useNetworkConfig();
 
   const isCurrentSafe = useMemo(
     () => !!node && !!node.daoAddress && node.daoAddress === address,
@@ -88,7 +86,6 @@ export function SearchDisplay({
 
         <SafeDisplayRow
           address={address}
-          network={addressPrefix}
           onClick={() => {
             onClickView();
             if (closeDrawer) closeDrawer();

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

@@ -7,20 +7,20 @@ import { DAO_ROUTES } from '../../../../constants/routes';
 import { useGetDAOName } from '../../../../hooks/DAO/useGetDAOName';
 
 export interface SafeMenuItemProps {
-  network: string;
   address: string;
   showAddress?: boolean;
   onClick?: () => void;
 }
 
-export function SafeMenuItem({ network, address }: SafeMenuItemProps) {
-  const { daoName } = useGetDAOName({ address: getAddress(address) });
+export function SafeMenuItem({ address }: SafeMenuItemProps) {
+  const [networkPrefix, daoAddress] = address.split(':');
+  const { daoName } = useGetDAOName({ address: getAddress(daoAddress) });
   const navigate = useNavigate();
 
   const { t } = useTranslation('dashboard');
 
   const onClickNav = () => {
-    navigate(DAO_ROUTES.dao.relative(network, address));
+    navigate(DAO_ROUTES.dao.relative(networkPrefix, daoAddress));
   };
 
   return (

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 (
@@ -31,7 +29,6 @@ export function SafesList() {
             {favoritesList.map(favorite => (
               <SafeMenuItem
                 key={favorite}
-                network={addressPrefix}
                 address={favorite}
               />
             ))}

src/hooks/DAO/loaders/useFavorites.ts

@@ -1,12 +1,14 @@
 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 = () => {
   const [favoritesList, setFavoritesList] = useState<string[]>(
     getValue({ cacheName: CacheKeys.FAVORITES }),
   );
+  const { addressPrefix } = useNetworkConfig();
 
   const toggleFavorite = (address: string) => {
     const normalizedAddress = getAddress(address);
@@ -16,7 +18,7 @@ export const useAccountFavorites = () => {
     if (favorites.includes(normalizedAddress)) {
       updatedFavorites = favorites.filter(favorite => favorite !== normalizedAddress);
     } else {
-      updatedFavorites = favorites.concat([normalizedAddress]);
+      updatedFavorites = favorites.concat([addressPrefix + normalizedAddress]);
     }
 
     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);
@@ -138,7 +135,6 @@ export function AllSafesDrawer({ isOpen, onClose }: AllSafesDrawerProps) {
           {getValue({ cacheName: CacheKeys.FAVORITES }).map((favorite: string) => (
             <SafeDisplayRow
               key={favorite}
-              network={addressPrefix}
               address={favorite}
             />
           ))}

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,7 +50,6 @@ export function MySafes() {
             {favoritesToShow.map(favorite => (
               <SafeDisplayRow
                 key={favorite}
-                network={addressPrefix}
                 address={favorite}
               />
             ))}

src/pages/home/SafeDisplayRow.tsx

@@ -9,8 +9,10 @@ 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 { getNetworkIcon } from '../../utils/url';
 
-export function SafeDisplayRow({ address, network, onClick, showAddress }: SafeMenuItemProps) {
+export function SafeDisplayRow({ address, onClick, showAddress }: SafeMenuItemProps) {
+  const [networkPrefix, daoAddress] = address.split(':');
   const { daoName } = useGetDAOName({ address: getAddress(address) });
   const navigate = useNavigate();
 
@@ -21,7 +23,7 @@ export function SafeDisplayRow({ address, network, onClick, showAddress }: SafeM
 
   const onClickNav = () => {
     if (onClick) onClick();
-    navigate(DAO_ROUTES.dao.relative(network, address));
+    navigate(DAO_ROUTES.dao.relative(networkPrefix, daoAddress));
   };
 
   const nameColor = showAddress ? 'neutral-7' : 'white-0';
@@ -50,7 +52,7 @@ export function SafeDisplayRow({ address, network, onClick, showAddress }: SafeM
     >
       <Avatar
         size="lg"
-        address={address}
+        address={daoAddress}
         url={avatarURL}
       />
       <Flex flexDir="column">
@@ -60,14 +62,14 @@ export function SafeDisplayRow({ address, network, onClick, showAddress }: SafeM
         >
           {daoName ?? t('loadingFavorite')}
         </Text>
-        {showAddress && <Text textStyle="button-base">{createAccountSubstring(address)}</Text>}
+        {showAddress && <Text textStyle="button-base">{createAccountSubstring(daoAddress)}</Text>}
       </Flex>
 
       <Spacer />
 
       {/* Network Icon */}
       <Flex gap="0.5rem">
-        <Image src={networkConfig.nativeTokenIcon} />
+        <Image src={getNetworkIcon(networkPrefix)} />
         <Show above="md">
           <Text>{networkConfig.chain.name}</Text>
         </Show>

src/utils/url.ts

@@ -28,3 +28,36 @@ export const validateENSName = (ensAddress?: string): boolean => {
     return false;
   }
 };
+
+export const networkPrefix: { [key: number]: string } = {
+  1: 'eth',
+  1115511: 'sep',
+  10: 'oeth',
+  8453: 'base',
+  137: 'matic',
+  84532: 'basesep',
+};
+
+export const addNetworkPrefix = (address: string, chainId: number): string => {
+  return `${networkPrefix[chainId]}:${address}`;
+};
+
+export const networkIcons: { [key: number]: string } = {
+  1: '/images/coin-icon-eth.svg',
+  1115511: '/images/coin-icon-sep.svg',
+  10: '/images/coin-icon-op.svg',
+  8453: '/images/coin-icon-base.svg',
+  137: '/images/coin-icon-pol.svg',
+  84532: '/images/coin-icon-base-sep.svg',
+};
+
+export const getChainIdFromNetworkPrefix = (_networkPrefix: string): number => {
+  return Number(
+    Object.keys(networkPrefix).find(key => networkPrefix[parseInt(key)] === _networkPrefix),
+  );
+};
+
+export const getNetworkIcon = (_networkPrefix: string): string => {
+  const chainId = getChainIdFromNetworkPrefix(_networkPrefix);
+  return networkIcons[chainId];
+};