Merge pull request #1918 from decentdao/useDaoName-consolidation

Show loading message when My Safe names are loading
decentdao · May 25, 2024 · 365c844 · 365c844
2 parents 4002b39 + cd95cf2
commit 365c844
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 125 deletions.
diff --git a/src/components/ui/menus/SafesMenu/SafeMenuItem.tsx b/src/components/ui/menus/SafesMenu/SafeMenuItem.tsx
@@ -2,8 +2,9 @@ import { Box, Button, MenuItem, Text } from '@chakra-ui/react';
 import { Star } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
+import { getAddress } from 'viem';
 import { DAO_ROUTES } from '../../../../constants/routes';
-import useDAOName from '../../../../hooks/DAO/useDAOName';
+import { useGetDAOName } from '../../../../hooks/DAO/useGetDAOName';
 
 export interface SafeMenuItemProps {
   network: string;
@@ -13,7 +14,7 @@ export interface SafeMenuItemProps {
 }
 
 export function SafeMenuItem({ network, address }: SafeMenuItemProps) {
-  const { daoRegistryName } = useDAOName({ address });
+  const { daoName } = useGetDAOName({ address: getAddress(address) });
   const navigate = useNavigate();
 
   const { t } = useTranslation('dashboard');
@@ -31,7 +32,6 @@ export function SafeMenuItem({ network, address }: SafeMenuItemProps) {
         h="3rem"
         onClick={onClickNav}
         noOfLines={1}
-        data-testid={'favorites-' + daoRegistryName}
         display="flex"
         alignItems="center"
         justifyContent="flex-start"
@@ -42,9 +42,7 @@ export function SafeMenuItem({ network, address }: SafeMenuItemProps) {
           weight="fill"
         />
 
-        <Text color={daoRegistryName ? 'white-0' : 'neutral-6'}>
-          {daoRegistryName ?? t('loadingFavorite')}
-        </Text>
+        <Text color={daoName ? 'white-0' : 'neutral-6'}>{daoName ?? t('loadingFavorite')}</Text>
       </MenuItem>
     </Box>
   );

diff --git a/src/hooks/DAO/loaders/useFractalNode.ts b/src/hooks/DAO/loaders/useFractalNode.ts
@@ -8,7 +8,7 @@ import { NodeAction } from '../../../providers/App/node/action';
 import { useNetworkConfig } from '../../../providers/NetworkConfig/NetworkConfigProvider';
 import { Node } from '../../../types';
 import { mapChildNodes } from '../../../utils/hierarchy';
-import { useLazyDAOName } from '../useDAOName';
+import { useGetDAONameDeferred } from '../useGetDAOName';
 import { useFractalModules } from './useFractalModules';
 
 const ONE_MINUTE = 60 * 1000;
@@ -29,7 +29,7 @@ export const useFractalNode = (
 
   const { action } = useFractal();
   const safeAPI = useSafeAPI();
-  const { getDaoName } = useLazyDAOName();
+  const { getDAOName } = useGetDAONameDeferred();
 
   const lookupModules = useFractalModules();
 
@@ -64,7 +64,10 @@ export const useFractalNode = (
     onCompleted: async data => {
       if (!daoAddress) return;
       const graphNodeInfo = formatDAOQuery({ data }, getAddress(daoAddress));
-      const daoName = await getDaoName(getAddress(daoAddress), graphNodeInfo?.daoName);
+      const daoName = await getDAOName({
+        address: getAddress(daoAddress),
+        registryName: graphNodeInfo?.daoName,
+      });
 
       action.dispatch({
         type: NodeAction.SET_DAO_INFO,

diff --git a/src/hooks/DAO/loaders/useLoadDAONode.ts b/src/hooks/DAO/loaders/useLoadDAONode.ts
@@ -7,12 +7,12 @@ import { useSafeAPI } from '../../../providers/App/hooks/useSafeAPI';
 import { useNetworkConfig } from '../../../providers/NetworkConfig/NetworkConfigProvider';
 import { FractalNode, Node, WithError } from '../../../types';
 import { mapChildNodes } from '../../../utils/hierarchy';
-import { useLazyDAOName } from '../useDAOName';
+import { useGetDAONameDeferred } from '../useGetDAOName';
 import { useFractalModules } from './useFractalModules';
 
 export const useLoadDAONode = () => {
   const safeAPI = useSafeAPI();
-  const { getDaoName } = useLazyDAOName();
+  const { getDAOName } = useGetDAONameDeferred();
   const lookupModules = useFractalModules();
   const { subgraph } = useNetworkConfig();
   const [getDAOInfo] = useLazyQuery(DAOQueryDocument, {
@@ -63,7 +63,10 @@ export const useLoadDAONode = () => {
           const safeInfoWithGuard = await safeAPI.getSafeData(sanitizedDaoAddress);
 
           const node: FractalNode = Object.assign(graphNodeInfo, {
-            daoName: await getDaoName(sanitizedDaoAddress, graphNodeInfo.daoName),
+            daoName: await getDAOName({
+              address: sanitizedDaoAddress,
+              registryName: graphNodeInfo.daoName,
+            }),
             safe: safeInfoWithGuard,
             fractalModules: await lookupModules(safeInfoWithGuard.modules),
           });
@@ -81,7 +84,7 @@ export const useLoadDAONode = () => {
         return { error: 'errorFailedSearch' };
       }
     },
-    [safeAPI, lookupModules, formatDAOQuery, getDAOInfo, getDaoName],
+    [formatDAOQuery, getDAOInfo, lookupModules, safeAPI, getDAOName],
   );
 
   return { loadDao };

diff --git a/src/hooks/DAO/useDAOName.ts b/src/hooks/DAO/useDAOName.ts
diff --git a/src/hooks/DAO/useGetDAOName.ts b/src/hooks/DAO/useGetDAOName.ts
@@ -0,0 +1,81 @@
+import { FractalRegistry } from '@fractal-framework/fractal-contracts';
+import { useCallback, useEffect, useState } from 'react';
+import { Address, PublicClient } from 'viem';
+import { usePublicClient } from 'wagmi';
+import { getEventRPC } from '../../helpers';
+import { useFractal } from '../../providers/App/AppProvider';
+import { FractalContracts } from '../../types';
+import { createAccountSubstring } from '../utils/useDisplayName';
+
+const getDAOName = async ({
+  address,
+  registryName,
+  publicClient,
+  baseContracts,
+}: {
+  address: Address;
+  registryName?: string | null;
+  publicClient: PublicClient | undefined;
+  baseContracts: FractalContracts | undefined;
+}) => {
+  if (!publicClient) {
+    throw new Error('Public client not available');
+  }
+
+  const ensName = await publicClient.getEnsName({ address: address });
+  if (ensName) {
+    return ensName;
+  }
+
+  if (registryName) {
+    return registryName;
+  }
+
+  if (!baseContracts) {
+    throw new Error('Base contracts not set');
+  }
+
+  const rpc = getEventRPC<FractalRegistry>(baseContracts.fractalRegistryContract);
+  const events = await rpc.queryFilter(rpc.filters.FractalNameUpdated(address));
+  const latestEvent = events.pop();
+
+  if (!latestEvent) {
+    return createAccountSubstring(address);
+  }
+
+  return latestEvent.args.daoName;
+};
+
+const useGetDAOName = ({
+  address,
+  registryName,
+}: {
+  address: Address;
+  registryName?: string | null;
+}) => {
+  const publicClient = usePublicClient();
+  const { baseContracts } = useFractal();
+
+  const [daoName, setDaoName] = useState<string>();
+  useEffect(() => {
+    getDAOName({ address, registryName, publicClient, baseContracts }).then(name => {
+      setDaoName(name);
+    });
+  }, [address, baseContracts, publicClient, registryName]);
+
+  return { daoName };
+};
+
+const useGetDAONameDeferred = () => {
+  const publicClient = usePublicClient();
+  const { baseContracts } = useFractal();
+  return {
+    getDAOName: useCallback(
+      ({ address, registryName }: { address: Address; registryName?: string | null }) =>
+        getDAOName({ address, registryName, publicClient, baseContracts }),
+      [baseContracts, publicClient],
+    ),
+  };
+};
+
+export { useGetDAOName, useGetDAONameDeferred };
diff --git a/src/pages/home/SafeDisplayRow.tsx b/src/pages/home/SafeDisplayRow.tsx
@@ -1,16 +1,17 @@
 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 { SafeMenuItemProps } from '../../components/ui/menus/SafesMenu/SafeMenuItem';
 import Avatar from '../../components/ui/page/Header/Avatar';
 import { DAO_ROUTES } from '../../constants/routes';
-import useDAOName from '../../hooks/DAO/useDAOName';
+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';
 
 export function SafeDisplayRow({ address, network, onClick, showAddress }: SafeMenuItemProps) {
-  const { daoRegistryName } = useDAOName({ address });
+  const { daoName } = useGetDAOName({ address: getAddress(address) });
   const navigate = useNavigate();
 
   const { t } = useTranslation('dashboard');
@@ -59,10 +60,10 @@ export function SafeDisplayRow({ address, network, onClick, showAddress }: SafeM
         alignSelf="center"
       >
         <Text
-          color={daoRegistryName ? nameColor : 'neutral-6'}
+          color={daoName ? nameColor : 'neutral-6'}
           textStyle={showAddress ? 'label-base' : 'button-base'}
         >
-          {daoRegistryName ?? t('loadingFavorite')}
+          {daoName ?? t('loadingFavorite')}
         </Text>
         {showAddress && <Text textStyle="button-base">{createAccountSubstring(address)}</Text>}
       </Flex>