refactored DAO info and card props relationships

packages/state/recoil/selectors/dao.ts

@@ -46,12 +46,14 @@ export const lazyDaoCardPropsSelector = selectorFamily<
       // Native chain x/gov module.
       if (isConfiguredChainName(chainId, coreAddress)) {
         return {
-          chainId,
-          coreAddress,
-          coreVersion: ContractVersion.Gov,
-          name: getDisplayNameForChainId(chainId),
-          description: getChainGovernanceDaoDescription(chainId),
-          imageUrl: getImageUrlForChainId(chainId),
+          info: {
+            chainId,
+            coreAddress,
+            coreVersion: ContractVersion.Gov,
+            name: getDisplayNameForChainId(chainId),
+            description: getChainGovernanceDaoDescription(chainId),
+            imageUrl: getImageUrlForChainId(chainId),
+          },
         }
       }
 
@@ -82,12 +84,14 @@ export const lazyDaoCardPropsSelector = selectorFamily<
       }
 
       return {
-        chainId,
-        coreAddress,
-        coreVersion,
-        name: config.name,
-        description: config.description,
-        imageUrl: config.image_url || getFallbackImage(coreAddress),
+        info: {
+          chainId,
+          coreAddress,
+          coreVersion,
+          name: config.name,
+          description: config.description,
+          imageUrl: config.image_url || getFallbackImage(coreAddress),
+        },
         isInactive: INACTIVE_DAO_NAMES.includes(config.name),
       }
     },
@@ -119,8 +123,8 @@ export const daoDropdownInfoSelector: (
         return {
           chainId,
           coreAddress,
-          imageUrl: lazyInfo.imageUrl,
-          name: lazyInfo.name,
+          imageUrl: lazyInfo.info.imageUrl,
+          name: lazyInfo.info.name,
           subDaos: get(
             waitForAll(
               subDaos.map((subDaoAddress) =>

packages/state/recoil/selectors/wallet.ts

@@ -526,13 +526,15 @@ export const lazyWalletDaosSelector = selectorFamily<
 
       const lazyDaoCards = daos.map(
         ({ dao, info, config, proposalCount }): LazyDaoCardProps => ({
-          chainId,
-          coreAddress: dao,
-          coreVersion:
-            parseContractVersion(info.version) || ContractVersion.Unknown,
-          name: config.name,
-          description: config.description,
-          imageUrl: config.image_url || getFallbackImage(dao),
+          info: {
+            chainId,
+            coreAddress: dao,
+            coreVersion:
+              parseContractVersion(info.version) || ContractVersion.Unknown,
+            name: config.name,
+            description: config.description,
+            imageUrl: config.image_url || getFallbackImage(dao),
+          },
           isInactive:
             INACTIVE_DAO_NAMES.includes(config.name) || proposalCount === 0,
         })

packages/stateful/command/hooks/useFollowingAndFilteredDaosSections.ts

@@ -21,8 +21,8 @@ import {
 } from '@dao-dao/utils'
 
 import {
-  useLoadingFeaturedDaoCardInfos,
-  useLoadingFollowingDaoCardInfos,
+  useLoadingFeaturedDaoCards,
+  useLoadingFollowingDaos,
 } from '../../hooks'
 
 export interface UseFilteredDaosSectionOptions {
@@ -41,8 +41,8 @@ export const useFollowingAndFilteredDaosSections = ({
   const { t } = useTranslation()
 
   const chains = getSupportedChains({ hasIndexer: true })
-  const featuredDaosLoading = useLoadingFeaturedDaoCardInfos()
-  const followingDaosLoading = useLoadingFollowingDaoCardInfos()
+  const featuredDaosLoading = useLoadingFeaturedDaoCards()
+  const followingDaosLoading = useLoadingFollowingDaos()
   const { getDaoPath } = useDaoNavHelpers()
 
   const queryResults = useCachedLoadable(
@@ -104,7 +104,7 @@ export const useFollowingAndFilteredDaosSections = ({
       : // Otherwise when filter is empty, display featured DAOs.
       featuredDaosLoading.loading
       ? []
-      : featuredDaosLoading.data),
+      : featuredDaosLoading.data.map((d) => d.info)),
     // Add configured chains.
     ...getConfiguredChains().flatMap(
       ({

packages/stateful/components/DaoCreatedModal.tsx

@@ -23,8 +23,8 @@ export const DaoCreatedModal = ({
     useFollowingDaos()
 
   const followedDao: DaoSource = {
-    chainId: itemProps.chainId,
-    coreAddress: itemProps.coreAddress,
+    chainId: itemProps.info.chainId,
+    coreAddress: itemProps.info.coreAddress,
   }
   const follow: FollowState = {
     following: isFollowing(followedDao),
@@ -36,14 +36,12 @@ export const DaoCreatedModal = ({
   }
 
   return (
-    <ChainProvider chainId={itemProps.chainId}>
+    <ChainProvider chainId={itemProps.info.chainId}>
       <StatelessDaoCreatedModal
         {...props}
         itemProps={{
           ...itemProps,
-
           follow,
-
           LinkWrapper,
         }}
       />

packages/stateful/components/DappLayout.tsx

@@ -202,7 +202,6 @@ export const DappLayout = ({ children }: { children: ReactNode }) => {
             modalProps={{
               onClose: () => setDaoCreatedCardProps(undefined),
             }}
-            subDao={!!daoCreatedCardProps.parentDao}
           />
         )}
 

packages/stateful/components/SdaLayout.tsx

@@ -64,7 +64,6 @@ export const SdaLayout = ({ children }: { children: ReactNode }) => {
         <DaoCreatedModal
           itemProps={{
             ...daoCreatedCardProps,
-
             follow: {
               hide: true,
             },
@@ -73,7 +72,6 @@ export const SdaLayout = ({ children }: { children: ReactNode }) => {
           modalProps={{
             onClose: () => setDaoCreatedCardProps(undefined),
           }}
-          subDao={!!daoCreatedCardProps}
         />
       )}
 

packages/stateful/components/dao/CreateDaoForm.tsx

@@ -593,28 +593,42 @@ export const InnerCreateDaoForm = ({
 
           // Set card props to show modal.
           setDaoCreatedCardProps({
-            chainId,
-            coreAddress,
-            coreVersion,
-            name,
-            description,
-            imageUrl: imageUrl || getFallbackImage(coreAddress),
-            polytoneProxies: {},
-            established: new Date(),
-            showIsMember: false,
-            parentDao,
-            tokenDecimals,
-            tokenSymbol,
-            showingEstimatedUsdValue: false,
+            info: {
+              admin: parentDao?.coreAddress || coreAddress,
+              chainId,
+              coreAddress,
+              coreVersion,
+              name,
+              description,
+              imageUrl: imageUrl || getFallbackImage(coreAddress),
+              parentDao: parentDao || null,
+              // Unused.
+              supportedFeatures: {} as any,
+              created: new Date(),
+              votingModuleAddress: '',
+              votingModuleContractName: '',
+              proposalModules: [],
+              isActive: true,
+              activeThreshold: null,
+              items: {},
+              polytoneProxies: {},
+              accounts: [],
+            },
             lazyData: {
               loading: false,
               data: {
-                tokenBalance,
                 // Does not matter, will not show.
                 isMember: false,
                 proposalCount: 0,
+                tokenWithBalance: {
+                  balance: tokenBalance,
+                  symbol: tokenSymbol,
+                  decimals: tokenDecimals,
+                },
               },
             },
+            showIsMember: false,
+            showingEstimatedUsdValue: false,
           })
 
           // Clear saved form data.

packages/stateful/components/dao/DaoCard.tsx

@@ -3,13 +3,16 @@ import {
   useCachedLoading,
 } from '@dao-dao/stateless'
 import { DaoSource } from '@dao-dao/types'
-import { DaoCardInfo, FollowState } from '@dao-dao/types/components/DaoCard'
+import {
+  FollowState,
+  StatefulDaoCardProps,
+} from '@dao-dao/types/components/DaoCard'
 
 import { useFollowingDaos, useProfile } from '../../hooks'
 import { daoCardInfoLazyDataSelector } from '../../recoil'
 import { LinkWrapper } from '../LinkWrapper'
 
-export const DaoCard = (props: DaoCardInfo) => {
+export const DaoCard = (props: StatefulDaoCardProps) => {
   // Don't load chain-specific profile because the wallet may not be connected
   // to that chain and thus the correct profile won't load. Instead, fetch the
   // chains from the currently connected profile and find the correct one.
@@ -20,22 +23,22 @@ export const DaoCard = (props: DaoCardInfo) => {
 
   const lazyData = useCachedLoading(
     daoCardInfoLazyDataSelector({
-      coreAddress: props.coreAddress,
-      chainId: props.chainId,
+      coreAddress: props.info.coreAddress,
+      chainId: props.info.chainId,
       walletAddress: chains.loading
         ? undefined
-        : chains.data.find((chain) => chain.chainId === props.chainId)?.address,
+        : chains.data.find((chain) => chain.chainId === props.info.chainId)
+            ?.address,
     }),
     {
       isMember: false,
-      tokenBalance: NaN,
       proposalCount: NaN,
     }
   )
 
   const followedDao: DaoSource = {
-    chainId: props.chainId,
-    coreAddress: props.coreAddress,
+    chainId: props.info.chainId,
+    coreAddress: props.info.coreAddress,
   }
   const follow: FollowState = {
     following: isFollowing(followedDao),

packages/stateful/components/dao/LazyDaoCard.tsx

@@ -5,53 +5,70 @@ import { useCachedLoadingWithError } from '@dao-dao/stateless'
 import { LazyDaoCardProps } from '@dao-dao/types'
 import { processError } from '@dao-dao/utils'
 
-import { daoCardInfoSelector } from '../../recoil'
+import { daoInfoSelector } from '../../recoil'
 import { DaoCard } from './DaoCard'
 
 export const LazyDaoCard = (props: LazyDaoCardProps) => {
   const { t } = useTranslation()
 
-  const daoCardInfo = useCachedLoadingWithError(
-    daoCardInfoSelector({
-      chainId: props.chainId,
-      coreAddress: props.coreAddress,
+  const daoInfo = useCachedLoadingWithError(
+    daoInfoSelector({
+      chainId: props.info.chainId,
+      coreAddress: props.info.coreAddress,
     })
   )
 
-  return daoCardInfo.loading ? (
+  return daoInfo.loading ? (
     <DaoCard
       {...props}
       className={clsx('animate-pulse', props.className)}
-      lazyData={{
-        loading: true,
+      info={{
+        ...props.info,
+        // Unused.
+        supportedFeatures: {} as any,
+        votingModuleAddress: '',
+        votingModuleContractName: '',
+        proposalModules: [],
+        created: undefined,
+        isActive: true,
+        activeThreshold: null,
+        items: {},
+        polytoneProxies: {},
+        accounts: [],
+        parentDao: null,
+        admin: '',
       }}
-      polytoneProxies={{}}
-      showingEstimatedUsdValue={false}
-      tokenDecimals={0}
-      tokenSymbol=""
     />
-  ) : daoCardInfo.errored || !daoCardInfo.data ? (
+  ) : daoInfo.errored || !daoInfo.data ? (
     <DaoCard
       {...props}
-      description={
-        t('error.unexpectedError') +
-        '\n' +
-        processError(
-          daoCardInfo.errored ? daoCardInfo.error : t('error.loadingData'),
-          {
-            forceCapture: false,
-          }
-        )
-      }
-      lazyData={{
-        loading: true,
+      info={{
+        ...props.info,
+        description:
+          t('error.unexpectedError') +
+          '\n' +
+          processError(
+            daoInfo.errored ? daoInfo.error : t('error.loadingData'),
+            {
+              forceCapture: false,
+            }
+          ),
+        // Unused.
+        supportedFeatures: {} as any,
+        votingModuleAddress: '',
+        votingModuleContractName: '',
+        proposalModules: [],
+        created: undefined,
+        isActive: true,
+        activeThreshold: null,
+        items: {},
+        polytoneProxies: {},
+        accounts: [],
+        parentDao: null,
+        admin: '',
       }}
-      polytoneProxies={{}}
-      showingEstimatedUsdValue={false}
-      tokenDecimals={0}
-      tokenSymbol=""
     />
   ) : (
-    <DaoCard {...daoCardInfo.data} />
+    <DaoCard info={daoInfo.data} />
   )
 }

packages/stateful/components/dao/tabs/SubDaosTab.tsx

@@ -10,7 +10,7 @@ import { getDaoProposalSinglePrefill } from '@dao-dao/utils'
 
 import { useActionForKey } from '../../../actions'
 import { useMembership } from '../../../hooks'
-import { subDaoCardInfosSelector } from '../../../recoil'
+import { subDaoInfosSelector } from '../../../recoil'
 import { ButtonLink } from '../../ButtonLink'
 import { DaoCard } from '../DaoCard'
 
@@ -23,7 +23,7 @@ export const SubDaosTab = () => {
 
   const subDaos = useCachedLoading(
     daoInfo.supportedFeatures[Feature.SubDaos]
-      ? subDaoCardInfosSelector({ chainId, coreAddress: daoInfo.coreAddress })
+      ? subDaoInfosSelector({ chainId, coreAddress: daoInfo.coreAddress })
       : // Passing undefined here returns an infinite loading state, which is
         // fine because it's never used.
         undefined,

packages/stateful/components/gov/GovSubDaosTab.tsx

@@ -10,7 +10,7 @@ import {
 import { CHAIN_SUBDAOS } from '@dao-dao/utils'
 
 import { GovActionsProvider } from '../../actions'
-import { daoCardInfoSelector } from '../../recoil'
+import { daoInfoSelector } from '../../recoil'
 import { ButtonLink } from '../ButtonLink'
 import { DaoCard } from '../dao/DaoCard'
 
@@ -20,7 +20,7 @@ export const GovSubDaosTab = () => {
   const subDaos = useCachedLoading(
     waitForAll(
       CHAIN_SUBDAOS[chainId]?.map((coreAddress) =>
-        daoCardInfoSelector({ chainId, coreAddress })
+        daoInfoSelector({ chainId, coreAddress })
       ) ?? []
     ),
     []