From 0990a967b728859b3b8d288d8eb12cdc05212e11 Mon Sep 17 00:00:00 2001
From: 0xMillz <37815163+0xMillz@users.noreply.github.com>
Date: Wed, 16 Oct 2024 23:55:53 -0500
Subject: [PATCH] feat: make DAO list linkable in user profile

---
 .../components/DaoFeed/DaoFeedSkeleton.tsx    |  5 +--
 .../src/modules/dashboard/DaoAuctionCard.tsx  |  3 +-
 apps/web/src/pages/profile/[user].tsx         | 45 +++++++++++++------
 apps/web/src/utils/helpers.ts                 |  5 +++
 packages/zoralabs-zord/src/theme.css.ts       |  8 ++++
 5 files changed, 48 insertions(+), 18 deletions(-)

diff --git a/apps/web/src/modules/dao/components/DaoFeed/DaoFeedSkeleton.tsx b/apps/web/src/modules/dao/components/DaoFeed/DaoFeedSkeleton.tsx
index c2c42f003..fb80da2a5 100644
--- a/apps/web/src/modules/dao/components/DaoFeed/DaoFeedSkeleton.tsx
+++ b/apps/web/src/modules/dao/components/DaoFeed/DaoFeedSkeleton.tsx
@@ -3,14 +3,13 @@ import { Box } from '@zoralabs/zord'
 import { exploreSkeleton } from '../Explore/Explore.css'
 import { GridContainer } from './DaoFeed'
 
-export const DaoFeedCardSkeleton = ({ key }: { key?: any }) => {
+export const DaoFeedCardSkeleton = () => {
   return (
     <Box
-      key={key}
       borderRadius="curved"
       backgroundColor="background2"
       width={'100%'}
-      aspectRatio={1 / 1}
+      aspectRatio={1}
       position="relative"
       className={exploreSkeleton}
     />
diff --git a/apps/web/src/modules/dashboard/DaoAuctionCard.tsx b/apps/web/src/modules/dashboard/DaoAuctionCard.tsx
index 756ce8559..2a01e5bd1 100644
--- a/apps/web/src/modules/dashboard/DaoAuctionCard.tsx
+++ b/apps/web/src/modules/dashboard/DaoAuctionCard.tsx
@@ -13,6 +13,7 @@ import { auctionAbi } from 'src/data/contract/abis'
 import { useCountdown, useIsMounted } from 'src/hooks'
 import { AddressType } from 'src/typings'
 
+import { chainIdToSlug } from '../../utils/helpers'
 import { overflowEllipsis } from '../auction/components/Auction.css'
 import { AuctionPaused } from './AuctionPaused'
 import { BidActionButton } from './BidActionButton'
@@ -75,7 +76,7 @@ export const DaoAuctionCard = (props: DaoAuctionCardProps) => {
   const handleSelectAuction = () => {
     router.push(`/dao/${currentChainSlug}/${tokenAddress}`)
   }
-  const currentChainSlug = PUBLIC_ALL_CHAINS.find((chain) => chain.id === chainId)?.slug
+  const currentChainSlug = chainIdToSlug(chainId)
 
   if (!currentAuction) {
     return (
diff --git a/apps/web/src/pages/profile/[user].tsx b/apps/web/src/pages/profile/[user].tsx
index 1f3a7c21b..18411f7d4 100644
--- a/apps/web/src/pages/profile/[user].tsx
+++ b/apps/web/src/pages/profile/[user].tsx
@@ -18,7 +18,7 @@ import { useLayoutStore } from 'src/stores'
 import { useChainStore } from 'src/stores/useChainStore'
 import { artworkSkeleton } from 'src/styles/Artwork.css'
 import { getEnsAddress } from 'src/utils/ens'
-import { walletSnippet } from 'src/utils/helpers'
+import { chainIdToSlug, walletSnippet } from 'src/utils/helpers'
 
 import { NextPageWithLayout } from '../_app'
 import { UserTokensResponse } from '../api/profile/[network]/[user]/tokens'
@@ -52,8 +52,6 @@ const ProfilePage: NextPageWithLayout<ProfileProps> = ({ userAddress }) => {
 
   const { handlePageBack, handlePageForward } = usePagination(tokens?.hasNextPage)
 
-  const daosString = daos?.map((x) => x.name).join(', ')
-
   return (
     <Flex
       align={'center'}
@@ -118,17 +116,36 @@ const ProfilePage: NextPageWithLayout<ProfileProps> = ({ userAddress }) => {
             <Text mr="x4" fontWeight={'display'}>
               DAOs
             </Text>
-            {isLoading ? (
-              <Box
-                backgroundColor="background2"
-                h="x6"
-                w="100%"
-                className={artworkSkeleton}
-                borderRadius="normal"
-              />
-            ) : (
-              <Text color="text3">{daosString || 'No DAO tokens owned.'}</Text>
-            )}
+            {
+              isLoading ? (
+                  <Box
+                      backgroundColor="background2"
+                      h="x6"
+                      w="100%"
+                      className={artworkSkeleton}
+                      borderRadius="normal"
+                  />
+              ) : (
+                  daos && daos?.length > 0 ? (
+                      <Text color="text3">
+                        {daos.map((dao, index) => (
+                            <>
+                              <Link
+                                  href={`https://nouns.build/dao/${chainIdToSlug(dao.chainId)}/${dao.collectionAddress}`}
+                                  style={{ textDecoration: 'none', color: 'inherit' }}
+                                  className='profile-dao-links'
+                              >
+                                {dao.name}
+                              </Link>
+                              {index < daos.length - 1 && ', '}
+                            </>
+                        ))}
+                      </Text>
+                  ) : (
+                      <Text>No DAO tokens owned.</Text>
+                  )
+              )
+            }
           </Flex>
         </Box>
         {!isMobile && (
diff --git a/apps/web/src/utils/helpers.ts b/apps/web/src/utils/helpers.ts
index d0b2e4f59..a4649503b 100644
--- a/apps/web/src/utils/helpers.ts
+++ b/apps/web/src/utils/helpers.ts
@@ -2,6 +2,7 @@ import isEqual from 'lodash/isEqual'
 import { isAddress } from 'viem'
 
 import { Duration } from 'src/typings'
+import { PUBLIC_ALL_CHAINS } from '../constants/defaultChains'
 
 /**
  *
@@ -276,9 +277,13 @@ export const isPossibleMarkdown = (text: string) => {
     /(?:\*\*[^\*]+\*\*)|(?:__[^\_]+__)|(?:\*[^\*]+\*)|(?:_[^\_]+_)|(?:\#[^\#]+\#)|(?:\!\[[^\]]*\]\([^\)]+\))|(?:\[[^\]]+\]\([^\)]+\))/g
   return markdownRegex.test(text)
 }
+
 export function maxChar(str: string, maxLength: number) {
   if (str.length <= maxLength) {
     return str
   }
   return str.slice(0, maxLength) + '...'
 }
+
+export const chainIdToSlug = (chainId: number) =>
+  PUBLIC_ALL_CHAINS.find((chain) => chain.id === chainId)?.slug
diff --git a/packages/zoralabs-zord/src/theme.css.ts b/packages/zoralabs-zord/src/theme.css.ts
index 8bf0b3122..70151c065 100644
--- a/packages/zoralabs-zord/src/theme.css.ts
+++ b/packages/zoralabs-zord/src/theme.css.ts
@@ -378,3 +378,11 @@ globalStyle('h1,h2,h3,h4,h5,h6,p', {
   padding: 0,
   margin: 0,
 })
+
+globalStyle('.profile-dao-links', {
+  marginRight: '0 !important',
+})
+
+globalStyle('.profile-dao-links::after', {
+  content: 'none !important',
+})