Fix communities without a name (#1995)

* enable hover cards on nft detail page

* fixxxx

* fix types

apps/mobile/src/components/Community/CommunityHeader.tsx

@@ -3,6 +3,7 @@ import { View } from 'react-native';
 import { graphql, useFragment } from 'react-relay';
 
 import { CommunityHeaderFragment$key } from '~/generated/CommunityHeaderFragment.graphql';
+import { truncateAddress } from '~/shared/utils/wallet';
 
 import { GalleryBottomSheetModalType } from '../GalleryBottomSheet/GalleryBottomSheetModal';
 import { GalleryTouchableOpacity } from '../GalleryTouchableOpacity';
@@ -19,6 +20,9 @@ export function CommunityHeader({ communityRef }: Props) {
     graphql`
       fragment CommunityHeaderFragment on Community {
         name
+        contractAddress {
+          address
+        }
         description
         ...CommunityProfilePictureFragment
         ...CommunityBottomSheetFragment
@@ -40,6 +44,8 @@ export function CommunityHeader({ communityRef }: Props) {
   const cleanedSentences = community.description?.trim().replace(/\s+/g, ' ');
   const formattedDescription = cleanedSentences?.split(/[.!?]\s+/).join(' ');
 
+  const displayName = community.name || truncateAddress(community.contractAddress?.address ?? '');
+
   return (
     <View className="mb-2">
       <View className="flex flex-row space-x-2 items-center">
@@ -56,7 +62,7 @@ export function CommunityHeader({ communityRef }: Props) {
               font={{ family: 'ABCDiatype', weight: 'Bold' }}
               className="text-lg leading-5 mb-1"
             >
-              {community.name}
+              {displayName}
             </Typography>
 
             {formattedDescription && <Markdown numberOfLines={3}>{formattedDescription}</Markdown>}

apps/mobile/src/components/ProfilePicture/CommunityProfilePicture.tsx

@@ -17,6 +17,9 @@ export function CommunityProfilePicture({ communityRef, style, ...rest }: Profil
     graphql`
       fragment CommunityProfilePictureFragment on Community {
         name
+        contractAddress {
+          address
+        }
         profileImageURL
       }
     `,
@@ -25,7 +28,8 @@ export function CommunityProfilePicture({ communityRef, style, ...rest }: Profil
 
   const imageUrl = community?.profileImageURL;
 
-  const letter = community?.name?.[0]?.toUpperCase();
+  const letter =
+    community?.name?.[0]?.toUpperCase() || community?.contractAddress?.address?.[0]?.toUpperCase();
 
   const fallbackProfilePicture = (
     <RawProfilePicture

apps/mobile/src/screens/NftDetailScreen/NftDetailSection.tsx

@@ -24,7 +24,7 @@ import TokenViewEmitter from '~/shared/components/TokenViewEmitter';
 import { useTrack } from '~/shared/contexts/AnalyticsContext';
 import { useLoggedInUserId } from '~/shared/relay/useLoggedInUserId';
 import colors from '~/shared/theme/colors';
-import { isFxHashContractAddress } from '~/shared/utils/getTezosExternalUrl';
+import { extractRelevantMetadataFromToken } from '~/shared/utils/extractRelevantMetadataFromToken';
 
 import { NftAdditionalDetails } from './NftAdditionalDetails';
 import { NftDetailAsset } from './NftDetailAsset/NftDetailAsset';
@@ -83,6 +83,7 @@ export function NftDetailSection({ onShare, queryRef }: Props) {
             ...NftAdditionalDetailsFragment
             ...NftDetailAssetFragment
             ...TokenFailureBoundaryFragment
+            ...extractRelevantMetadataFromTokenFragment
           }
         }
         ...useLoggedInUserIdFragment
@@ -153,9 +154,7 @@ export function NftDetailSection({ onShare, queryRef }: Props) {
   //   }
   // }, [navigation, track, token.creator?.username]);
 
-  const contractName = isFxHashContractAddress(token.contract?.contractAddress?.address)
-    ? 'fx(hash)'
-    : token.contract?.name ?? 'Untitled Contract';
+  const { contractName } = extractRelevantMetadataFromToken(token);
 
   return (
     <ScrollView>

apps/web/src/components/Feed/Posts/PostCommunityPill.tsx

@@ -48,7 +48,11 @@ export default function PostCommunityPill({ postRef }: Props) {
   }
 
   return (
-    <CommunityHoverCard communityRef={token.community} onClick={handleClick}>
+    <CommunityHoverCard
+      communityRef={token.community}
+      communityName={contractName}
+      onClick={handleClick}
+    >
       <StyledPill>
         <StyledCommunityName>{contractName}</StyledCommunityName>
       </StyledPill>

apps/web/src/components/HoverCard/CommunityHoverCard.tsx

@@ -11,8 +11,6 @@ import { ErrorWithSentryMetadata } from '~/shared/errors/ErrorWithSentryMetadata
 import { removeNullValues } from '~/shared/relay/removeNullValues';
 import { useLoggedInUserId } from '~/shared/relay/useLoggedInUserId';
 import colors from '~/shared/theme/colors';
-import { isValidEthereumAddress, truncateAddress } from '~/shared/utils/wallet';
-import handleCustomDisplayName from '~/utils/handleCustomDisplayName';
 
 import InteractiveLink from '../core/InteractiveLink/InteractiveLink';
 import Markdown from '../core/Markdown/Markdown';
@@ -27,7 +25,6 @@ const CommunityHoverCardQueryNode = graphql`
     communityByAddress(communityAddress: $communityAddress) {
       __typename
       ... on Community {
-        name
         description
         contractAddress {
           address
@@ -59,14 +56,19 @@ const CommunityHoverCardQueryNode = graphql`
 
 type Props = PropsWithChildren<{
   communityRef: CommunityHoverCardFragment$key;
+  communityName: string;
   onClick?: HoverCardProps<CommunityHoverCardQuery>['onHoverableElementClick'];
 }>;
 
-export default function CommunityHoverCard({ children, communityRef, onClick }: Props) {
+export default function CommunityHoverCard({
+  children,
+  communityName,
+  communityRef,
+  onClick,
+}: Props) {
   const community = useFragment(
     graphql`
       fragment CommunityHoverCardFragment on Community {
-        name
         contractAddress {
           address
           chain
@@ -99,20 +101,17 @@ export default function CommunityHoverCard({ children, communityRef, onClick }:
     });
   }, [community.contractAddress?.address, community.contractAddress?.chain, preloadHoverCardQuery]);
 
-  if (!community.name) {
-    return null;
-  }
-
-  const displayName = handleCustomDisplayName(community.name);
-
   return (
     <HoverCard
-      HoverableElement={children ?? <BaseS color={colors.shadow}>{displayName}</BaseS>}
+      HoverableElement={children ?? <BaseS color={colors.shadow}>{communityName}</BaseS>}
       onHoverableElementClick={onClick}
       hoverableElementHref={communityProfileLink}
       HoveringContent={
         preloadedHoverCardQuery ? (
-          <CommunityHoverCardContent preloadedQuery={preloadedHoverCardQuery} />
+          <CommunityHoverCardContent
+            preloadedQuery={preloadedHoverCardQuery}
+            communityName={communityName}
+          />
         ) : null
       }
       preloadQuery={handlePreloadQuery}
@@ -123,8 +122,10 @@ export default function CommunityHoverCard({ children, communityRef, onClick }:
 
 function CommunityHoverCardContent({
   preloadedQuery,
+  communityName,
 }: {
   preloadedQuery: PreloadedQuery<CommunityHoverCardQuery>;
+  communityName: string;
 }) {
   const communityQuery = usePreloadedQuery(CommunityHoverCardQueryNode, preloadedQuery);
 
@@ -197,10 +198,6 @@ function CommunityHoverCardContent({
     };
   }, [community]);
 
-  if (!community.name) {
-    return null;
-  }
-
   const hasDescription = Boolean(community.description);
   return (
     <VStack gap={6}>
@@ -210,11 +207,7 @@ function CommunityHoverCardContent({
         </StyledLink>
         <Section gap={2}>
           <StyledLink href={communityProfileLink}>
-            <StyledCardTitle>
-              {isValidEthereumAddress(community.name)
-                ? truncateAddress(community.name)
-                : community.name}
-            </StyledCardTitle>
+            <StyledCardTitle>{communityName}</StyledCardTitle>
           </StyledLink>
           {community.description && (
             <StyledCardDescription>

apps/web/src/components/ProfilePicture/CommunityProfilePicture.tsx

@@ -13,6 +13,9 @@ export default function CommunityProfilePicture({ communityRef, ...rest }: Props
     graphql`
       fragment CommunityProfilePictureFragment on Community {
         name
+        contractAddress {
+          address
+        }
         profileImageURL
       }
     `,
@@ -24,6 +27,7 @@ export default function CommunityProfilePicture({ communityRef, ...rest }: Props
     return <RawProfilePicture imageUrl={imageUrl} {...rest} />;
   }
 
-  const firstLetter = community?.name?.[0]?.toUpperCase();
+  const firstLetter =
+    community?.name?.[0]?.toUpperCase() || community?.contractAddress?.address?.[0]?.toUpperCase();
   return <RawProfilePicture letter={firstLetter ?? ''} {...rest} />;
 }

apps/web/src/scenes/CommunityPage/CommunityPageViewHeader.tsx

@@ -19,7 +19,7 @@ import GlobeIcon from '~/icons/GlobeIcon';
 import ShareIcon from '~/icons/ShareIcon';
 import { useTrack } from '~/shared/contexts/AnalyticsContext';
 import { replaceUrlsWithMarkdownFormat } from '~/shared/utils/replaceUrlsWithMarkdownFormat';
-import { getExternalAddressLink } from '~/shared/utils/wallet';
+import { getExternalAddressLink, truncateAddress } from '~/shared/utils/wallet';
 import { getBaseUrl } from '~/utils/getBaseUrl';
 
 import CommunityPageMetadata from './CommunityPageMetadata';
@@ -37,6 +37,7 @@ export default function CommunityPageViewHeader({ communityRef, queryRef }: Prop
         description
         badgeURL
         contractAddress {
+          address
           ...walletGetExternalAddressLinkFragment
         }
         ...CommunityPageMetadataFragment
@@ -152,14 +153,16 @@ export default function CommunityPageViewHeader({ communityRef, queryRef }: Prop
     showExpandedDescription,
   ]);
 
+  const displayName = name || truncateAddress(contractAddress?.address ?? '');
+
   if (isMobile) {
     return (
       <VStack justify="space-between" gap={16}>
         {ExternalLinks}
         <HStack gap={12} align="center">
           <CommunityProfilePicture communityRef={community} size="xxl" />
           <VStack>
-            <TitleDiatypeL>{name}</TitleDiatypeL>
+            <TitleDiatypeL>{displayName}</TitleDiatypeL>
             {DescriptionContainer}
           </VStack>
         </HStack>
@@ -175,7 +178,7 @@ export default function CommunityPageViewHeader({ communityRef, queryRef }: Prop
       <StyledContainer>
         <HStack gap={12} align="center">
           <CommunityProfilePicture communityRef={community} size="lg" />
-          <TitleL>{name}</TitleL>
+          <TitleL>{displayName}</TitleL>
           {badgeURL && <StyledBadge src={badgeURL} />}
         </HStack>
         <HStack gap={48}>

apps/web/src/scenes/NftDetailPage/NftDetailAsset.test.tsx

@@ -57,6 +57,7 @@ const UnknownMediaResponse: NftDetailAssetTestQueryQuery = {
       lastUpdated: '2023-07-25T11:47:41.83653Z',
       ownerIsCreator: false,
       owner: {
+        dbid: 'testOwnerId',
         id: 'GalleryUser:TestOwnerId',
         username: 'Test Username',
         profileImage: {
@@ -102,6 +103,14 @@ const UnknownMediaResponse: NftDetailAssetTestQueryQuery = {
         },
         badgeURL: 'http://someurl.com',
       },
+      community: {
+        __typename: 'Community',
+        id: 'Contract:someCommunityId',
+        contractAddress: {
+          chain: Chain.Ethereum,
+          address: '0x0Ff979fB365e20c09bE06676D569EF581a46621D',
+        },
+      },
     },
   },
 };

apps/web/src/scenes/NftDetailPage/NftDetailText.tsx

@@ -10,6 +10,8 @@ import InteractiveLink from '~/components/core/InteractiveLink/InteractiveLink';
 import Markdown from '~/components/core/Markdown/Markdown';
 import { HStack, VStack } from '~/components/core/Spacer/Stack';
 import { BaseM, TitleDiatypeM, TitleM, TitleXS } from '~/components/core/Text/Text';
+import CommunityHoverCard from '~/components/HoverCard/CommunityHoverCard';
+import UserHoverCard from '~/components/HoverCard/UserHoverCard';
 import { ClickablePill, NonclickablePill } from '~/components/Pill';
 import { PostComposerModal } from '~/components/Posts/PostComposerModal';
 import { ProfilePicture } from '~/components/ProfilePicture/ProfilePicture';
@@ -49,6 +51,7 @@ function NftDetailText({ tokenRef, authenticatedUserOwnsAsset }: Props) {
         owner {
           username
           ...ProfilePictureFragment
+          ...UserHoverCardFragment
         }
         ownerIsCreator
         contract {
@@ -59,6 +62,9 @@ function NftDetailText({ tokenRef, authenticatedUserOwnsAsset }: Props) {
           }
           badgeURL
         }
+        community {
+          ...CommunityHoverCardFragment
+        }
 
         ...NftAdditionalDetailsFragment
         ...getCommunityUrlForTokenFragment
@@ -159,14 +165,16 @@ function NftDetailText({ tokenRef, authenticatedUserOwnsAsset }: Props) {
         <VStack gap={8}>
           {token.name && <TitleM>{decodedTokenName}</TitleM>}
           <HStack align="center" gap={4}>
-            {communityUrl ? (
-              <ClickablePill to={communityUrl}>
-                <StyledPillContent gap={4} align="center" justify="flex-end">
-                  {token.chain === 'POAP' && <PoapLogo />}
-                  {token.contract?.badgeURL && <StyledBadge src={token.contract.badgeURL} />}
-                  <StyledContractName>{contractName}</StyledContractName>
-                </StyledPillContent>
-              </ClickablePill>
+            {communityUrl && token.community ? (
+              <CommunityHoverCard communityRef={token.community} communityName={contractName}>
+                <ClickablePill to={communityUrl}>
+                  <StyledPillContent gap={4} align="center" justify="flex-end">
+                    {token.chain === 'POAP' && <PoapLogo />}
+                    {token.contract?.badgeURL && <StyledBadge src={token.contract.badgeURL} />}
+                    <StyledContractName>{contractName}</StyledContractName>
+                  </StyledPillContent>
+                </ClickablePill>
+              </CommunityHoverCard>
             ) : (
               <NonclickablePill>
                 <StyledContractName>{contractName}</StyledContractName>
@@ -177,18 +185,20 @@ function NftDetailText({ tokenRef, authenticatedUserOwnsAsset }: Props) {
 
         <HStack justify="space-between">
           {token.owner?.username && (
-            <VStack gap={2}>
-              <TitleXS>{token.ownerIsCreator ? 'CREATOR' : 'OWNER'}</TitleXS>
-              <StyledInteractiveLink
-                to={{ pathname: '/[username]', query: { username: token.owner.username } }}
-                onClick={handleCollectorNameClick}
-              >
-                <HStack align="center" gap={4}>
-                  <ProfilePicture size="sm" userRef={token.owner} />
-                  <TitleDiatypeM>{token.owner.username}</TitleDiatypeM>
-                </HStack>
-              </StyledInteractiveLink>
-            </VStack>
+            <UserHoverCard userRef={token.owner}>
+              <VStack gap={2}>
+                <TitleXS>{token.ownerIsCreator ? 'CREATOR' : 'OWNER'}</TitleXS>
+                <StyledInteractiveLink
+                  to={{ pathname: '/[username]', query: { username: token.owner.username } }}
+                  onClick={handleCollectorNameClick}
+                >
+                  <HStack align="center" gap={4}>
+                    <ProfilePicture size="sm" userRef={token.owner} />
+                    <TitleDiatypeM>{token.owner.username}</TitleDiatypeM>
+                  </HStack>
+                </StyledInteractiveLink>
+              </VStack>
+            </UserHoverCard>
           )}
           {ENABLED_CREATOR && (
             // TODO: Update this to use the creator's username

apps/web/src/scenes/UserGalleryPage/UserSharedInfo/UserSharedInfoList/SharedCommunitiesList.tsx

@@ -75,13 +75,16 @@ export default function SharedCommunitiesList({ userRef }: Props) {
             )
           : null;
 
-      if (!community.name && !descriptionFirstLine) {
+      const displayName =
+        community.name || community.contractAddress?.address || 'Untitled Contract';
+
+      if (!displayName && !descriptionFirstLine) {
         return null;
       }
 
       return (
         <div style={style} key={key}>
-          <CommunityHoverCard communityRef={community}>
+          <CommunityHoverCard communityRef={community} communityName={displayName}>
             <PaginatedListRow
               title={community.name ?? ''}
               subTitle={descriptionFirstLine}