[Type Update] DAO Info Typing

src/components/DaoCreator/formComponents/AzoriusGovernance.tsx

@@ -25,16 +25,12 @@ import { DAOCreateMode } from './EstablishEssentials';
 export function AzoriusGovernance(props: ICreationStepProps) {
   const { values, setFieldValue, isSubmitting, transactionPending, isSubDAO, mode } = props;
 
-  const {
-    safe,
-    nodeHierarchy: { parentAddress },
-    fractalModules,
-  } = useDaoInfoStore();
+  const { safe, subgraphInfo, daoModules } = useDaoInfoStore();
 
-  const fractalModule = useMemo(
-    () => fractalModules.find(_module => _module.moduleType === FractalModuleType.FRACTAL),
-    [fractalModules],
-  );
+  const fractalModule = useMemo(() => {
+    if (!daoModules) return null;
+    return daoModules.find(_module => _module.moduleType === FractalModuleType.FRACTAL);
+  }, [daoModules]);
 
   const [showCustomNonce, setShowCustomNonce] = useState<boolean>();
   const { t } = useTranslation(['daoCreate', 'common']);
@@ -189,7 +185,7 @@ export function AzoriusGovernance(props: ICreationStepProps) {
           </Alert>
         </Flex>
       </StepWrapper>
-      {!!parentAddress && (
+      {!!subgraphInfo?.parentAddress && (
         <Box
           padding="1.5rem"
           bg="neutral-2"

src/components/DaoCreator/formComponents/EstablishEssentials.tsx

@@ -24,27 +24,38 @@ export function EstablishEssentials(props: ICreationStepProps) {
   const { t } = useTranslation(['daoCreate', 'common']);
   const { values, setFieldValue, isSubmitting, transactionPending, isSubDAO, errors, mode } = props;
 
-  const { daoName, daoSnapshotENS, safe } = useDaoInfoStore();
+  const { subgraphInfo, safe } = useDaoInfoStore();
 
   const isEdit = mode === DAOCreateMode.EDIT;
 
   const safeAddress = safe?.address;
 
   useEffect(() => {
-    if (isEdit) {
-      setFieldValue('essentials.daoName', daoName, false);
-      if (safeAddress && createAccountSubstring(safeAddress) !== daoName) {
+    if (isEdit && subgraphInfo) {
+      setFieldValue('essentials.daoName', subgraphInfo.daoName, false);
+      if (safeAddress && createAccountSubstring(safeAddress) !== subgraphInfo.daoName) {
         // Pre-fill the snapshot URL form field when editing
-        setFieldValue('essentials.snapshotENS', daoSnapshotENS || '', false);
+        setFieldValue('essentials.snapshotENS', subgraphInfo.daoSnapshotENS || '', false);
       }
     }
-  }, [setFieldValue, mode, daoName, daoSnapshotENS, isEdit, safeAddress]);
+  }, [
+    setFieldValue,
+    mode,
+    subgraphInfo?.daoName,
+    subgraphInfo?.daoSnapshotENS,
+    isEdit,
+    safeAddress,
+    subgraphInfo,
+  ]);
 
   const daoNameDisabled =
-    isEdit && !!daoName && !!safeAddress && createAccountSubstring(safeAddress) !== daoName;
+    isEdit &&
+    !!subgraphInfo?.daoName &&
+    !!safeAddress &&
+    createAccountSubstring(safeAddress) !== subgraphInfo?.daoName;
 
   // If in governance edit mode and snapshot URL is already set, disable the field
-  const snapshotENSDisabled = isEdit && !!daoSnapshotENS;
+  const snapshotENSDisabled = isEdit && !!subgraphInfo?.daoSnapshotENS;
 
   const handleGovernanceChange = (value: string) => {
     if (value === GovernanceType.AZORIUS_ERC20) {

src/components/DaoDashboard/Info/ParentLink.tsx

@@ -9,19 +9,19 @@ import { useDaoInfoStore } from '../../../store/daoInfo/useDaoInfoStore';
  * Displays a link to the current DAO's parent, if it has one.
  */
 export function ParentLink() {
-  const { nodeHierarchy } = useDaoInfoStore();
+  const { subgraphInfo } = useDaoInfoStore();
   const { addressPrefix } = useNetworkConfig();
   const { t } = useTranslation('breadcrumbs');
 
-  if (!nodeHierarchy.parentAddress) {
+  if (!subgraphInfo?.parentAddress) {
     return null;
   }
 
   return (
     <Link
       color="celery-0"
       _hover={{ textDecoration: 'none', color: 'celery--6' }}
-      to={DAO_ROUTES.dao.relative(addressPrefix, nodeHierarchy.parentAddress)}
+      to={DAO_ROUTES.dao.relative(addressPrefix, subgraphInfo.parentAddress)}
       marginBottom="1rem"
       as={RouterLink}
       width="fit-content"

src/components/DaoHierarchy/DaoHierarchyNode.tsx

@@ -1,37 +1,23 @@
+import { useLazyQuery } from '@apollo/client';
 import { Center, Flex, Icon, Link } from '@chakra-ui/react';
-import { ArrowElbowDownRight } from '@phosphor-icons/react';
-import { useEffect, useState } from 'react';
+import { AlignCenterVertical, ArrowElbowDownRight } from '@phosphor-icons/react';
+import { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Link as RouterLink } from 'react-router-dom';
 import { Address } from 'viem';
 import { useChainId } from 'wagmi';
+import { DAOQueryDocument } from '../../../.graphclient';
 import { DAO_ROUTES } from '../../constants/routes';
-import { useLoadDAONode } from '../../hooks/DAO/loaders/useLoadDAONode';
+import { useDecentModules } from '../../hooks/DAO/loaders/useDecentModules';
 import { CacheKeys } from '../../hooks/utils/cache/cacheDefaults';
 import { setValue, getValue } from '../../hooks/utils/cache/useLocalStorage';
+import { useSafeAPI } from '../../providers/App/hooks/useSafeAPI';
 import { useNetworkConfig } from '../../providers/NetworkConfig/NetworkConfigProvider';
 import { useDaoInfoStore } from '../../store/daoInfo/useDaoInfoStore';
-import { DaoHierarchyInfo, DaoInfo, WithError } from '../../types';
+import { DaoHierarchyInfo } 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.
  *
@@ -49,10 +35,50 @@ export function DaoHierarchyNode({
   depth: number;
 }) {
   const { safe: currentSafe } = useDaoInfoStore();
+  const { t } = useTranslation('common');
+  const safeApi = useSafeAPI();
   const [hierarchyNode, setHierarchyNode] = useState<DaoHierarchyInfo>();
-  const { addressPrefix } = useNetworkConfig();
+  const [hasErrorLoading, setErrorLoading] = useState<boolean>(false);
+  const { addressPrefix, subgraph } = useNetworkConfig();
   const chainId = useChainId();
-  const { loadDao } = useLoadDAONode();
+  const lookupModules = useDecentModules();
+
+  const [getDAOInfo] = useLazyQuery(DAOQueryDocument, {
+    context: {
+      subgraphSpace: subgraph.space,
+      subgraphSlug: subgraph.slug,
+      subgraphVersion: subgraph.version,
+    },
+  });
+
+  const loadDao = useCallback(
+    async (_safeAddress: Address) => {
+      if (!safeApi) {
+        throw new Error('Safe API not ready');
+      }
+      try {
+        const safe = await safeApi.getSafeInfo(_safeAddress);
+        const graphRawNodeData = await getDAOInfo({ variables: { safeAddress: _safeAddress } });
+        const modules = await lookupModules(safe.modules);
+        const graphDAOData = graphRawNodeData.data?.daos[0];
+        if (!graphRawNodeData || !graphDAOData) {
+          throw new Error('No data found');
+        }
+        return {
+          daoName: graphDAOData.name as string | undefined,
+          safeAddress: _safeAddress,
+          parentAddress: graphDAOData.parentAddress,
+          childAddresses: graphDAOData.hierarchy.map(child => child.address),
+          daoSnapshotENS: graphDAOData.snapshotENS as string | undefined,
+          proposalTemplatesHash: graphDAOData.proposalTemplatesHash as string | undefined,
+          modules,
+        };
+      } catch (e) {
+        setErrorLoading(true);
+      }
+    },
+    [getDAOInfo, lookupModules, safeApi],
+  );
 
   useEffect(() => {
     if (safeAddress) {
@@ -66,22 +92,15 @@ export function DaoHierarchyNode({
         return;
       }
       loadDao(safeAddress).then(_node => {
-        const errorNode = _node as WithError;
-        if (!errorNode.error) {
-          const fnode = _node as DaoInfo;
-          const theNode = transformNode(fnode, safeAddress);
-          setValue(
-            {
-              cacheName: CacheKeys.HIERARCHY_DAO_INFO,
-              chainId,
-              daoAddress: safeAddress,
-            },
-            theNode,
-          );
-          setHierarchyNode(theNode);
-        } else if (errorNode.error === 'errorFailedSearch') {
-          setHierarchyNode(undefined);
-        }
+        setValue(
+          {
+            cacheName: CacheKeys.HIERARCHY_DAO_INFO,
+            chainId,
+            daoAddress: safeAddress,
+          },
+          _node,
+        );
+        setHierarchyNode(_node);
       });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -100,6 +119,24 @@ export function DaoHierarchyNode({
     );
   }
 
+  if (hasErrorLoading) {
+    return (
+      <Flex
+        w="full"
+        minH="full"
+      >
+        <Center w="100%">
+          <Icon
+            as={AlignCenterVertical}
+            boxSize="32px"
+            color="neutral-6"
+          />
+          <div>{t('errorMySafesNotLoaded')}</div>
+        </Center>
+      </Flex>
+    );
+  }
+
   const isCurrentViewingDAO =
     currentSafe?.address.toLowerCase() === hierarchyNode.safeAddress.toLocaleLowerCase();
   return (
@@ -130,23 +167,23 @@ export function DaoHierarchyNode({
       </Link>
 
       {/* CHILD NODES */}
-      {hierarchyNode?.nodeHierarchy.childNodes.map(childNode => {
+      {hierarchyNode?.childAddresses.map(childAddress => {
         return (
           <Flex
             minH={`${NODE_HEIGHT_REM}rem`}
-            key={childNode.safeAddress}
+            key={childAddress}
             gap="1.25rem"
           >
             <Icon
               as={ArrowElbowDownRight}
               my={`${NODE_HEIGHT_REM / 2.5}rem`}
               ml="0.5rem"
               boxSize="32px"
-              color={currentSafe?.address === childNode.safeAddress ? 'celery-0' : 'neutral-6'}
+              color={currentSafe?.address === childAddress ? 'celery-0' : 'neutral-6'}
             />
 
             <DaoHierarchyNode
-              safeAddress={childNode.safeAddress}
+              safeAddress={childAddress}
               depth={depth + 1}
             />
           </Flex>

src/components/Proposals/MultisigProposalDetails/TxActions.tsx

@@ -2,7 +2,7 @@ import { Box, Button, Text, Flex } from '@chakra-ui/react';
 import { abis } from '@fractal-framework/fractal-contracts';
 import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { getAddress, getContract, isHex } from 'viem';
+import { getAddress, getContract, isHex, zeroAddress } from 'viem';
 import { useAccount, useWalletClient } from 'wagmi';
 import GnosisSafeL2Abi from '../../../assets/abi/GnosisSafeL2';
 import { Check } from '../../../assets/theme/custom/icons/Check';
@@ -50,7 +50,7 @@ export function TxActions({ proposal }: { proposal: MultisigProposal }) {
   const { loadSafeMultisigProposals } = useSafeMultisigProposals();
   const { data: walletClient } = useWalletClient();
 
-  const isOwner = safe?.owners?.includes(userAccount.address || '');
+  const isOwner = safe?.owners?.includes(userAccount.address ?? zeroAddress);
 
   if (!isOwner) return null;
 

src/components/Proposals/ProposalInfo.tsx

@@ -23,7 +23,7 @@ export function ProposalInfo({
 }) {
   const metaData = useGetMetadata(proposal);
   const { t } = useTranslation('proposal');
-  const { daoSnapshotENS } = useDaoInfoStore();
+  const { subgraphInfo } = useDaoInfoStore();
   const { snapshotProposal } = useSnapshotProposal(proposal);
 
   const [modalType, props] = useMemo(() => {
@@ -62,10 +62,10 @@ export function ProposalInfo({
           showIcon={false}
           textColor="neutral-7"
         />
-        {snapshotProposal && (
+        {snapshotProposal && subgraphInfo && (
           <>
             <SnapshotButton
-              snapshotENS={`${daoSnapshotENS}/proposal/${snapshotProposal.proposalId}`}
+              snapshotENS={`${subgraphInfo.daoSnapshotENS}/proposal/${snapshotProposal.proposalId}`}
             />
             {(proposal as ExtendedSnapshotProposal).privacy === 'shutter' && (
               <Button

src/components/Proposals/index.tsx

@@ -46,7 +46,7 @@ export default function Proposals() {
     governance: { type },
     guardContracts,
   } = useFractal();
-  const { daoSnapshotENS } = useDaoInfoStore();
+  const { subgraphInfo } = useDaoInfoStore();
 
   const [sortBy, setSortBy] = useState<SortBy>(SortBy.Newest);
   const [filters, setFilters] = useState<FractalProposalState[]>([]);
@@ -73,12 +73,12 @@ export default function Proposals() {
         }
         break;
     }
-    if (daoSnapshotENS) {
+    if (subgraphInfo?.daoSnapshotENS) {
       options = [...options, ...FILTERS_SNAPSHOT];
     }
     setAllOptions(options);
     setFilters(options);
-  }, [daoSnapshotENS, guardContracts.freezeGuardContractAddress, type]);
+  }, [subgraphInfo?.daoSnapshotENS, guardContracts.freezeGuardContractAddress, type]);
 
   const toggleFilter = (filter: FractalProposalState) => {
     setFilters(prevState => {

src/components/SafeSettings/SettingsNavigation.tsx

@@ -88,7 +88,7 @@ export default function SettingsNavigation() {
   const { t } = useTranslation('settings');
   const { addressPrefix } = useNetworkConfig();
   const { governance } = useFractal();
-  const { safe, fractalModules } = useDaoInfoStore();
+  const { safe, daoModules } = useDaoInfoStore();
   const azoriusGovernance = governance as AzoriusGovernance;
 
   return (
@@ -143,7 +143,7 @@ export default function SettingsNavigation() {
               textStyle="body-base"
               color="neutral-7"
             >
-              {fractalModules.length + safe.guard ? 1 : 0}
+              {(daoModules ?? []).length + (safe?.guard ? 1 : 0)}
             </Text>
           </SettingsLink>
           <SettingsLink

src/components/ui/cards/DAOInfoCard.tsx

@@ -36,7 +36,7 @@ export function DAOInfoCard() {
     );
   }
 
-  const daoName = node.daoName || displayName;
+  const daoName = node.subgraphInfo?.daoName || displayName;
 
   return (
     <Box>
@@ -62,7 +62,7 @@ export function DAOInfoCard() {
             />
 
             {/* PARENT TAG */}
-            {node.nodeHierarchy.childNodes.length > 0 && (
+            {!!node.subgraphInfo && node.subgraphInfo.childAddresses.length > 0 && (
               <Link
                 to={DAO_ROUTES.hierarchy.relative(addressPrefix, displayedAddress)}
                 as={RouterLink}
@@ -100,7 +100,9 @@ export function DAOInfoCard() {
         <AddressCopier address={displayedAddress} />
 
         {/* SNAPSHOT ICON LINK */}
-        {node.daoSnapshotENS && <SnapshotButton snapshotENS={node.daoSnapshotENS} />}
+        {node.subgraphInfo?.daoSnapshotENS && (
+          <SnapshotButton snapshotENS={node.subgraphInfo.daoSnapshotENS} />
+        )}
       </Flex>
     </Box>
   );