Dao 615 (#146)

* DAO-615 fix: user should be able to see his NFT in the user's page.

* fix: JoinACommunity.tsx will redirect to communities page

src/app/communities/page.tsx

@@ -2,19 +2,7 @@
 import { MainContainer } from '@/components/MainContainer/MainContainer'
 import Image from 'next/image'
 import { CommunityItem } from '@/app/communities/CommunityItem'
-import { firstNft } from '@/app/communities/communityUtils'
-import { nftContracts } from '@/lib/contracts'
-
-// @TODO remove and dynamically fetch the community
-const firstCommunity = {
-  leftImageSrc: firstNft.imageSrc,
-  title: 'Early Adopters',
-  subtitle: 'DeFi',
-  description:
-    'The Early Adopters collection features a vibrant array of digital pioneers, each uniquely crafted to embody the spirit of innovation and community in the blockchain world.',
-  nftAddress: nftContracts.EA,
-  numberOfMembers: 0,
-}
+import { firstCommunity } from '@/app/communities/communityUtils'
 
 export default function Communities() {
   return (

src/app/user/Communities/CommunityCard.tsx

@@ -4,21 +4,20 @@ import { CommunityCardProps } from '@/app/user/types'
 import Image from 'next/image'
 
 export const CommunityCard: FC<CommunityCardProps> = ({ img, title, description, members }) => (
-  <div className="rounded bg-input-bg px-[14px] py-[14px]">
+  <div className="rounded bg-input-bg px-[14px] py-[14px] w-[300px]">
     {/* image */}
     <Image
-      src={`data:image/png;base64, ${img}`}
+      src={img}
       alt="An image that contains a community logo"
-      className="w-full mb-[20px]"
+      className="mb-[20px]"
       width={300}
       height={300}
     />
     {/* community title */}
-    <Paragraph className="text-[18px]">{title}</Paragraph>
+    <Paragraph className="text-[18px] mb-[5px]">{title}</Paragraph>
     {/* description */}
-    <Paragraph variant="light" className="text-[12px]">
-      {description}
-    </Paragraph>
+    <Paragraph className="text-[14px] font-normal">{description}</Paragraph>
     {/* members */}
+    <Paragraph className="text-[14px] mt-[7px]">{members} members</Paragraph>
   </div>
 )

src/app/user/Communities/JoinACommunity.tsx

@@ -2,26 +2,30 @@ import { Paragraph } from '@/components/Typography/Paragraph'
 import { Button } from '@/components/Button'
 import { Header } from '@/components/Typography'
 import { LuUsers } from 'react-icons/lu'
+import { useRouter } from 'next/navigation'
 
-export const JoinACommunity = () => (
-  <div className="flex justify-center align-center">
-    <div className="w-[506px] flex align-middle items-center flex-col">
-      <div
-        style={{
-          boxShadow: '0px 0px 16.4px 0px rgba(123,87,252,0.68)',
-          padding: 17,
-          borderRadius: '30%',
-          backgroundColor: 'white',
-        }}
-      >
-        <LuUsers size={48} color="#665EF6" />
+export const JoinACommunity = () => {
+  const router = useRouter()
+  return (
+    <div className="flex justify-center align-center">
+      <div className="w-[506px] flex align-middle items-center flex-col">
+        <div
+          style={{
+            boxShadow: '0px 0px 16.4px 0px rgba(123,87,252,0.68)',
+            padding: 17,
+            borderRadius: '30%',
+            backgroundColor: 'white',
+          }}
+        >
+          <LuUsers size={48} color="#665EF6" />
+        </div>
+        <Header className="mt-[42px] mb-[8px] text-[24px]">Join a Community</Header>
+        <Paragraph variant="normal" className="text-center pb-[40px] text-[16px]">
+          You&apos;re not currently part of any communities. Join a community to connect with like-minded
+          individuals, participate in discussions, and gain access to exclusive content.
+        </Paragraph>
+        <Button onClick={() => router.push('/communities')}>Explore Communities</Button>
       </div>
-      <Header className="mt-[42px] mb-[8px] text-[24px]">Join a Community</Header>
-      <Paragraph variant="normal" className="text-center pb-[40px] text-[16px]">
-        You&apos;re not currently part of any communities. Join a community to connect with like-minded
-        individuals, participate in discussions, and gain access to exclusive content.
-      </Paragraph>
-      <Button>Explore Communities</Button>
     </div>
-  </div>
-)
+  )
+}

src/shared/hooks/useCommunity.ts

@@ -35,7 +35,7 @@ export const useContractData = (nftAddress?: Address) => {
   }
 
   // load data from the contract view functions
-  const { data, refetch } = useReadContracts(
+  const { data, refetch, isLoading } = useReadContracts(
     address &&
       nftAddress && {
         contracts: [
@@ -61,8 +61,9 @@ export const useContractData = (nftAddress?: Address) => {
       nftName: nftName?.result,
       nftSymbol: symbol?.result,
       nftUri: nftUri?.result,
+      isLoading,
     }
-  }, [data, refetch])
+  }, [data, refetch, isLoading])
 }
 
 /**

src/shared/types.ts

@@ -67,4 +67,5 @@ export interface CommunityData {
    * NFT Metadata
    */
   nftMeta: NftMeta | undefined
+  isLoading: boolean
 }