[PRD] | [Issue #2529] Organization Hierarchy Cache

src/components/DaoHierarchy/DaoHierarchyNode.tsx

@@ -1,11 +1,36 @@
-import { Flex, Icon } from '@chakra-ui/react';
+import { Center, Flex, Icon, Link } from '@chakra-ui/react';
 import { ArrowElbowDownRight } from '@phosphor-icons/react';
 import { useEffect, useState } from 'react';
+import { Link as RouterLink } from 'react-router-dom';
 import { Address } from 'viem';
+import { useChainId } from 'wagmi';
+import { DAO_ROUTES } from '../../constants/routes';
 import { useLoadDAONode } from '../../hooks/DAO/loaders/useLoadDAONode';
+import { CacheKeys } from '../../hooks/utils/cache/cacheDefaults';
+import { setValue, getValue } from '../../hooks/utils/cache/useLocalStorage';
+import { useNetworkConfig } from '../../providers/NetworkConfig/NetworkConfigProvider';
 import { useDaoInfoStore } from '../../store/daoInfo/useDaoInfoStore';
-import { DaoInfo, WithError } from '../../types';
+import { DaoHierarchyInfo, DaoInfo, WithError } from '../../types';
 import { DAONodeInfoCard, NODE_HEIGHT_REM } from '../ui/cards/DAONodeInfoCard';
+import { BarLoader } from '../ui/loaders/BarLoader';
+
+function transformNode(node: DaoInfo, safeAddress: Address): DaoHierarchyInfo {
+  return {
+    daoName: node.daoName,
+    safeAddress: safeAddress,
+    nodeHierarchy: {
+      parentAddress: node.nodeHierarchy.parentAddress,
+      childNodes: node.nodeHierarchy.childNodes.map(child => {
+        if (!child.safe) {
+          throw new Error('Child node does not have a safe');
+        }
+        return {
+          safeAddress: child.safe.address,
+        };
+      }),
+    },
+  };
+}
 
 /**
  * A recursive component that displays a "hierarchy" of DAOInfoCards.
@@ -24,62 +49,104 @@ export function DaoHierarchyNode({
   depth: number;
 }) {
   const { safe: currentSafe } = useDaoInfoStore();
-  const [fractalNode, setNode] = useState<DaoInfo>();
+  const [hierarchyNode, setHierarchyNode] = useState<DaoHierarchyInfo>();
+  const { addressPrefix } = useNetworkConfig();
+  const chainId = useChainId();
   const { loadDao } = useLoadDAONode();
 
   useEffect(() => {
     if (safeAddress) {
+      const cachedNode = getValue({
+        cacheName: CacheKeys.HIERARCHY_DAO_INFO,
+        chainId,
+        daoAddress: safeAddress,
+      });
+      if (cachedNode) {
+        setHierarchyNode(cachedNode);
+        return;
+      }
       loadDao(safeAddress).then(_node => {
         const errorNode = _node as WithError;
         if (!errorNode.error) {
           const fnode = _node as DaoInfo;
-          setNode(fnode);
-        } else if (errorNode.error === 'errorFailedSearch') {
-          setNode({
-            daoName: null,
-            safe: null,
-            fractalModules: [],
-            nodeHierarchy: {
-              parentAddress: null,
-              childNodes: [],
+          const theNode = transformNode(fnode, safeAddress);
+          setValue(
+            {
+              cacheName: CacheKeys.HIERARCHY_DAO_INFO,
+              chainId,
+              daoAddress: safeAddress,
             },
-          });
+            theNode,
+          );
+          setHierarchyNode(theNode);
+        } else if (errorNode.error === 'errorFailedSearch') {
+          setHierarchyNode(undefined);
         }
       });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+  if (!hierarchyNode) {
+    // node hasn't loaded yet
+    return (
+      <Flex
+        w="full"
+        minH="full"
+      >
+        <Center w="100%">
+          <BarLoader />
+        </Center>
+      </Flex>
+    );
+  }
 
+  const isCurrentViewingDAO =
+    currentSafe?.address.toLowerCase() === hierarchyNode.safeAddress.toLocaleLowerCase();
   return (
     <Flex
       flexDirection="column"
       alignItems="stretch"
       gap="1.25rem"
       width="100%"
     >
-      <DAONodeInfoCard node={fractalNode} />
+      <Link
+        as={RouterLink}
+        to={DAO_ROUTES.dao.relative(addressPrefix, hierarchyNode.safeAddress)}
+        _hover={{ textDecoration: 'none', cursor: isCurrentViewingDAO ? 'default' : 'pointer' }}
+        onClick={event => {
+          if (isCurrentViewingDAO) {
+            event.preventDefault();
+          }
+        }}
+      >
+        <DAONodeInfoCard
+          node={{
+            daoAddress: hierarchyNode.safeAddress,
+            daoName: hierarchyNode?.daoName ?? hierarchyNode.safeAddress,
+            daoSnapshotENS: hierarchyNode?.daoSnapshotENS,
+          }}
+          isCurrentViewingDAO={isCurrentViewingDAO}
+        />
+      </Link>
 
       {/* CHILD NODES */}
-      {fractalNode?.nodeHierarchy.childNodes.map(childNode => {
-        if (!childNode.safe) {
-          return null;
-        }
+      {hierarchyNode?.nodeHierarchy.childNodes.map(childNode => {
         return (
           <Flex
             minH={`${NODE_HEIGHT_REM}rem`}
-            key={childNode.safe.address}
+            key={childNode.safeAddress}
             gap="1.25rem"
           >
             <Icon
               as={ArrowElbowDownRight}
               my={`${NODE_HEIGHT_REM / 2.5}rem`}
               ml="0.5rem"
               boxSize="32px"
-              color={currentSafe?.address === childNode.safe.address ? 'celery-0' : 'neutral-6'}
+              color={currentSafe?.address === childNode.safeAddress ? 'celery-0' : 'neutral-6'}
             />
 
             <DaoHierarchyNode
-              safeAddress={childNode.safe.address}
+              safeAddress={childNode.safeAddress}
               depth={depth + 1}
             />
           </Flex>

src/components/ui/cards/DAONodeInfoCard.tsx

@@ -1,21 +1,23 @@
-import { Center, Flex, FlexProps, Link, Text, VStack } from '@chakra-ui/react';
+import { Flex, Link, Text, VStack } from '@chakra-ui/react';
 import { Link as RouterLink } from 'react-router-dom';
+import { Address } from 'viem';
 import { DAO_ROUTES } from '../../../constants/routes';
 import { useAccountFavorites } from '../../../hooks/DAO/loaders/useFavorites';
-import { useGetAccountName } from '../../../hooks/utils/useGetAccountName';
 import { useNetworkConfig } from '../../../providers/NetworkConfig/NetworkConfigProvider';
-import { useDaoInfoStore } from '../../../store/daoInfo/useDaoInfoStore';
-import { DaoInfo } from '../../../types';
 import { SnapshotButton } from '../badges/Snapshot';
 import { FavoriteIcon } from '../icons/FavoriteIcon';
 import AddressCopier from '../links/AddressCopier';
-import { BarLoader } from '../loaders/BarLoader';
 
 export const NODE_HEIGHT_REM = 6.75;
 export const NODE_MARGIN_TOP_REM = 1.25;
 
-export interface InfoProps extends FlexProps {
-  node?: DaoInfo;
+interface DAONodeInfoCardProps {
+  node: {
+    daoAddress: Address;
+    daoName: string;
+    daoSnapshotENS?: string;
+  };
+  isCurrentViewingDAO: boolean;
 }
 
 /**
@@ -28,39 +30,22 @@ export interface InfoProps extends FlexProps {
  * Simply using the useFractal() hook to get info will end up with the current DAO's
  * context being displayed in ALL the node cards in a hierarchy, which is incorrect.
  */
-export function DAONodeInfoCard({ node, ...rest }: InfoProps) {
-  const { safe: currentSafe } = useDaoInfoStore();
+export function DAONodeInfoCard(props: DAONodeInfoCardProps) {
+  const {
+    node: { daoAddress, daoName, daoSnapshotENS },
+    isCurrentViewingDAO,
+  } = props;
   const { addressPrefix } = useNetworkConfig();
-  // for non Fractal Safes
-  const displayedAddress = node?.safe?.address;
-  const { displayName } = useGetAccountName(displayedAddress);
-  const { toggleFavorite, isFavorite } = useAccountFavorites();
-
-  // node hasn't loaded yet
-  if (!node || !displayedAddress) {
-    return (
-      <Flex
-        w="full"
-        minH="full"
-        {...rest}
-      >
-        <Center w="100%">
-          <BarLoader />
-        </Center>
-      </Flex>
-    );
-  }
 
-  const isCurrentDAO = displayedAddress === currentSafe?.address;
-  const daoName = node.daoName || displayName;
+  const { toggleFavorite, isFavorite } = useAccountFavorites();
 
   return (
     <Link
       as={RouterLink}
-      to={DAO_ROUTES.dao.relative(addressPrefix, displayedAddress)}
-      _hover={{ textDecoration: 'none', cursor: isCurrentDAO ? 'default' : 'pointer' }}
+      to={DAO_ROUTES.dao.relative(addressPrefix, daoAddress)}
+      _hover={{ textDecoration: 'none', cursor: isCurrentViewingDAO ? 'default' : 'pointer' }}
       onClick={event => {
-        if (isCurrentDAO) {
+        if (isCurrentViewingDAO) {
           event.preventDefault();
         }
       }}
@@ -69,7 +54,7 @@ export function DAONodeInfoCard({ node, ...rest }: InfoProps) {
         minH={`${NODE_HEIGHT_REM}rem`}
         bg="neutral-2"
         _hover={
-          !isCurrentDAO
+          !isCurrentViewingDAO
             ? {
                 bg: 'neutral-3',
                 border: '1px solid',
@@ -80,8 +65,8 @@ export function DAONodeInfoCard({ node, ...rest }: InfoProps) {
         p="1.5rem"
         width="100%"
         borderRadius="0.75rem"
-        border={isCurrentDAO ? '4px solid' : '1px'}
-        borderColor={isCurrentDAO ? 'neutral-4' : 'transparent'}
+        border={isCurrentViewingDAO ? '4px solid' : '1px'}
+        borderColor={isCurrentViewingDAO ? 'neutral-4' : 'transparent'}
       >
         <VStack
           gap="0.5rem"
@@ -98,17 +83,17 @@ export function DAONodeInfoCard({ node, ...rest }: InfoProps) {
 
             {/* FAVORITE ICON */}
             <FavoriteIcon
-              isFavorite={isFavorite(displayedAddress)}
-              toggleFavoriteCallback={() => toggleFavorite(displayedAddress, daoName)}
+              isFavorite={isFavorite(daoAddress)}
+              toggleFavoriteCallback={() => toggleFavorite(daoAddress, daoName)}
               data-testid="DAOInfo-favorite"
             />
 
             {/* SNAPSHOT ICON LINK */}
-            {node.daoSnapshotENS && <SnapshotButton snapshotENS={node.daoSnapshotENS} />}
+            {daoSnapshotENS && <SnapshotButton snapshotENS={daoSnapshotENS} />}
           </Flex>
 
           {/* DAO ADDRESS */}
-          <AddressCopier address={displayedAddress} />
+          <AddressCopier address={daoAddress} />
         </VStack>
       </Flex>
     </Link>

src/hooks/utils/cache/cacheDefaults.ts

@@ -1,5 +1,5 @@
 import { Address } from 'viem';
-import { AzoriusProposal } from '../../../types';
+import { AzoriusProposal, DaoHierarchyInfo } from '../../../types';
 
 export interface IStorageValue {
   // the value to store, 1 character to minimize cache size
@@ -33,6 +33,7 @@ export enum CacheKeys {
   PROPOSAL_CACHE = 'Proposal',
   MIGRATION = 'Migration',
   IPFS_HASH = 'IPFS Hash',
+  HIERARCHY_DAO_INFO = 'Hierarchy DAO Info',
   // indexDB keys
   DECODED_TRANSACTION_PREFIX = 'decode_trans_',
   MULTISIG_METADATA_PREFIX = 'm_m_',
@@ -70,9 +71,15 @@ export interface IPFSHashCacheKey extends CacheKey {
   hash: string;
   chainId: number;
 }
+export interface HierarchyDAOInfoCacheKey extends CacheKey {
+  cacheName: CacheKeys.HIERARCHY_DAO_INFO;
+  chainId: number;
+  daoAddress: Address;
+}
 
 export type CacheKeyType =
   | FavoritesCacheKey
+  | HierarchyDAOInfoCacheKey
   | MasterCacheKey
   | ProposalCacheKey
   | AverageBlockTimeCacheKey
@@ -97,6 +104,7 @@ type CacheKeyToValueMap = {
   [CacheKeys.AVERAGE_BLOCK_TIME]: number;
   [CacheKeys.MIGRATION]: number;
   [CacheKeys.IPFS_HASH]: string;
+  [CacheKeys.HIERARCHY_DAO_INFO]: DaoHierarchyInfo;
 };
 
 export type CacheValueType<T extends CacheKeyType> = T extends { cacheName: infer U }
@@ -114,6 +122,7 @@ export const CACHE_VERSIONS: { [key: string]: number } = Object.freeze({
   [CacheKeys.MASTER_COPY]: 1,
   [CacheKeys.PROPOSAL_CACHE]: 1,
   [CacheKeys.AVERAGE_BLOCK_TIME]: 1,
+  [CacheKeys.HIERARCHY_DAO_INFO]: 1,
 });
 
 /**

src/types/fractal.ts

@@ -202,6 +202,18 @@ export interface DaoInfo extends SubgraphDAOInfo {
   isModulesLoaded?: boolean;
 }
 
+export interface DaoHierarchyInfo {
+  daoName: string | null;
+  nodeHierarchy: {
+    parentAddress: Address | null;
+    childNodes: {
+      safeAddress: Address;
+    }[];
+  };
+  safeAddress: Address;
+  daoSnapshotENS?: string;
+}
+
 export interface FractalModuleData {
   moduleAddress: Address;
   moduleType: FractalModuleType;