fix: dao memberships without title are also displayed

packages/web/components/Player/Section/PlayerMemberships.tsx

@@ -27,7 +27,7 @@ import metaclanImage from '../../../assets/moloch/metaclan.png';
 import raidGuildImage from '../../../assets/moloch/raid_guild.png';
 import { ProfileSection } from '../../ProfileSection';
 
-const getImageMoloch = (title: string) => {
+export const getImageMoloch = (title: string): File => {
   if (title.toLowerCase().includes('hausdao')) return hausdaoImage;
   if (title.toLowerCase().includes('metacartel')) return metacartelImage;
   if (title.toLowerCase().includes('metaclan')) return metaclanImage;
@@ -50,7 +50,7 @@ const getHexChainId = (chain: string | undefined): string => {
   }
 };
 
-const getDaoLink = (
+export const getDaoLink = (
   chain: string | undefined,
   address: string | undefined,
 ): string => {
@@ -66,7 +66,7 @@ type LinkGuildProps = {
   guildname: string | undefined;
 };
 
-const LinkGuild: React.FC<LinkGuildProps> = ({
+export const LinkGuild: React.FC<LinkGuildProps> = ({
   daoUrl,
   guildname,
   children,

packages/web/components/Setup/SetupMemberships.tsx

@@ -1,10 +1,12 @@
 import {
+  Box,
+  Flex,
+  Heading,
+  HStack,
   MetaButton,
   MetaHeading,
-  MetaTag,
   Text,
   Wrap,
-  WrapItem,
 } from '@metafam/ds';
 import { FlexContainer } from 'components/Container';
 import { useSetupFlow } from 'contexts/SetupContext';
@@ -12,6 +14,11 @@ import { Membership } from 'graphql/types';
 import React, { useState } from 'react';
 
 import { useWeb3 } from '../../lib/hooks';
+import {
+  getDaoLink,
+  getImageMoloch,
+  LinkGuild,
+} from '../Player/Section/PlayerMemberships';
 
 export type SetupMembershipsProps = {
   memberships: Array<Membership> | null | undefined;
@@ -52,11 +59,7 @@ export const SetupMemberships: React.FC<SetupMembershipsProps> = ({
             </Text>
             <Wrap justify="center" mb={10} spacing={4} maxW="50rem">
               {memberships.map((member) => (
-                <WrapItem key={member.id}>
-                  <MetaTag size="lg" fontWeight="normal">
-                    {member.moloch.title}
-                  </MetaTag>
-                </WrapItem>
+                <MembershipListing key={member.id} member={member} />
               ))}
             </Wrap>
           </>
@@ -78,3 +81,43 @@ export const SetupMemberships: React.FC<SetupMembershipsProps> = ({
     </FlexContainer>
   );
 };
+
+type MembershipListingProps = {
+  member: Membership;
+};
+
+const MembershipListing: React.FC<MembershipListingProps> = ({ member }) => {
+  const guildLogo = getImageMoloch(member.moloch.title || member.moloch.chain);
+  const daoUrl = getDaoLink(member.moloch.chain, member.moloch.id);
+
+  return (
+    <LinkGuild
+      daoUrl={daoUrl}
+      guildname={member.moloch.title as string | undefined}
+    >
+      <HStack alignItems="center" mb={4}>
+        <Flex bg="purpleBoxLight" width={16} height={16} mr={6}>
+          <Box
+            bgImage={`url(${guildLogo})`}
+            backgroundSize="cover"
+            width={12}
+            height={12}
+            m="auto"
+          />
+        </Flex>
+        <Box>
+          <Heading
+            _groupHover={{ textDecoration: 'underline' }}
+            fontWeight="bold"
+            textTransform="uppercase"
+            fontSize="xs"
+            color={daoUrl ? 'cyanText' : 'white'}
+            mb="1"
+          >
+            {member.moloch.title || `Unknown ${member.moloch.chain} DAO`}
+          </Heading>
+        </Box>
+      </HStack>
+    </LinkGuild>
+  );
+};