Updated .env to have new NFT address.

Updated CommunitiesSection.tsx to properly display the NFTs. Updated [address].tsx to have better error handling when nftInfo is not set.
RootstockCollective · Oct 30, 2024 · 5631dc0 · 5631dc0
1 parent d51ed85
commit 5631dc0
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 20 deletions.
diff --git a/.env.dev b/.env.dev
@@ -22,6 +22,6 @@ NEXT_PUBLIC_FIRST_EPOCH_START_DATE_ISO="1970-01-01T00:00:00Z"
 NEXT_PUBLIC_ENV_DATA_URL="https://raw.githubusercontent.com/RootstockCollective/dao-frontend/develop/data.testnet.json"
 
 # OG NFT Contracts
-NEXT_PUBLIC_OG_FOUNDERS=0xCFEdEA1785321D4F1EceB7719A4B1a1f2c2Bc1fB
+NEXT_PUBLIC_OG_FOUNDERS=0x05E729438956ee96fFCF9dfd4D290c8264F463F2
 NEXT_PUBLIC_OG_PARTNERS=0x285046a90fb322E6BaCa4F38Bb884e3C0904F7EB
 NEXT_PUBLIC_OG_CONTRIBUTORS=0xDC03B8fb7E47E4651f5008bD718a804726424A75
diff --git a/.env.testnet b/.env.testnet
@@ -22,6 +22,6 @@ NEXT_PUBLIC_FIRST_EPOCH_START_DATE_ISO="1970-01-01T00:00:00Z"
 NEXT_PUBLIC_ENV_DATA_URL="https://raw.githubusercontent.com/RootstockCollective/dao-frontend/develop/data.testnet.json"
 
 # OG NFT Contracts
-NEXT_PUBLIC_OG_FOUNDERS=0xCFEdEA1785321D4F1EceB7719A4B1a1f2c2Bc1fB
+NEXT_PUBLIC_OG_FOUNDERS=0x05E729438956ee96fFCF9dfd4D290c8264F463F2
 NEXT_PUBLIC_OG_PARTNERS=0x285046a90fb322E6BaCa4F38Bb884e3C0904F7EB
 NEXT_PUBLIC_OG_CONTRIBUTORS=0xDC03B8fb7E47E4651f5008bD718a804726424A75
diff --git a/src/app/user/Communities/CommunitiesSection.tsx b/src/app/user/Communities/CommunitiesSection.tsx
@@ -52,13 +52,15 @@ const UserCommunities = ({ nftAddresses }: { nftAddresses: string[] }) => {
           </span>
         )}
       </HeaderTitle>
-      {nftsInfo.map((nftInfo, index) => (
-        <NftInfo
-          key={nftInfo.address}
-          nftAddress={nftInfo.address}
-          onFinishedLoading={onNftFinishedLoading(index)}
-        />
-      ))}
+      <div className="flex flex-wrap gap-[24px]">
+        {nftsInfo.map((nftInfo, index) => (
+          <NftInfo
+            key={nftInfo.address}
+            nftAddress={nftInfo.address}
+            onFinishedLoading={onNftFinishedLoading(index)}
+          />
+        ))}
+      </div>
       {!isLoadingNfts && nftsOwned === 0 && <JoinACommunity />}
     </>
   )
@@ -80,13 +82,13 @@ const NftInfo = ({
     }
   }, [data, onFinishedLoading])
 
-  if (data.nftMeta?.image && data.nftName && data.membersCount) {
+  if (data.nftName && data.isMember) {
     return (
       <CommunityCard
-        img={data.nftMeta.image}
+        img={data.nftMeta?.image || ''}
         title={data.nftName}
         link={`/communities/nft/${nftAddress}`}
-        description={data.nftMeta.description}
+        description={data.nftMeta?.description || ''}
         members={data.membersCount.toString()}
       />
     )

diff --git a/src/pages/communities/nft/[address].tsx b/src/pages/communities/nft/[address].tsx
@@ -60,7 +60,9 @@ export default function Page() {
   const { stRifBalance } = useStRif()
 
   const nftInfo = communitiesMapByContract[nftAddress || '']
-
+  if (nftInfo === undefined) {
+    console.warn(`The current NFT address is not registered: ${nftAddress} - Please check the config.`)
+  }
   const [message, setMessage] = useState<MessageProps | null>(null)
   // reset message after few seconds
   useEffect(() => {
@@ -209,12 +211,14 @@ export default function Page() {
         <div className="flex-1">
           <div className="flex items-center gap-3 mb-2">
             <div className="rounded-xl overflow-hidden">
-              <Image src={nftInfo.leftImageSrc} width={50} height={50} alt="Early Adopters" />
+              {nftInfo?.leftImageSrc && (
+                <Image src={nftInfo.leftImageSrc} width={50} height={50} alt="Early Adopters" />
+              )}
             </div>
-            <div className="font-semibold">{nftInfo.title}</div>
+            <div className="font-semibold">{nftInfo?.title}</div>
           </div>
           <div className="mb-[24px] font-extralight">
-            <p>{nftInfo.longDescription || nftInfo.description}</p>
+            <p>{nftInfo?.longDescription || nftInfo?.description}</p>
           </div>
           {/* Hidden until we get social media data */}
           <div className="gap-[8px] mt-[16px] mb-[24px] hidden">
@@ -252,15 +256,15 @@ export default function Page() {
             <div className="flex gap-6">
               <Image
                 alt={nftMeta?.name ?? 'Early Adopters NFT'}
-                src={nftMeta?.image || nftInfo.cover}
+                src={nftMeta?.image || nftInfo?.cover}
                 className="w-full self-center max-w-56 rounded-md"
                 width={500}
                 height={500}
               />
               {isMember && tokenId ? (
                 <div>
                   <Paragraph variant="semibold" className="text-[18px]">
-                    {nftInfo.title} #{tokenId}
+                    {nftInfo?.title} #{tokenId}
                   </Paragraph>
 
                   {/* `Owned by 0x00000` colored with 2 colors */}
@@ -291,8 +295,8 @@ export default function Page() {
                 </div>
               ) : (
                 <div>
-                  <Paragraph className="text-[18px]">{nftInfo.title}</Paragraph>
-                  {nftInfo.isMintable && (
+                  <Paragraph className="text-[18px]">{nftInfo?.title}</Paragraph>
+                  {nftInfo?.isMintable && (
                     <Button
                       variant="primary"
                       className="my-[16px]"