Merge pull request #311 from RootstockCollective/OG-NFT-addresses

Add OG NFT contract addresses to environment files

.env.dev

@@ -20,3 +20,8 @@ NEXT_PUBLIC_EPOCH_DURATION_IN_DAYS=7
 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_PARTNERS=0x285046a90fb322E6BaCa4F38Bb884e3C0904F7EB
+NEXT_PUBLIC_OG_CONTRIBUTORS=0xDC03B8fb7E47E4651f5008bD718a804726424A75

.env.testnet

@@ -20,3 +20,8 @@ NEXT_PUBLIC_EPOCH_DURATION_IN_DAYS=7
 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_PARTNERS=0x285046a90fb322E6BaCa4F38Bb884e3C0904F7EB
+NEXT_PUBLIC_OG_CONTRIBUTORS=0xDC03B8fb7E47E4651f5008bD718a804726424A75

src/app/communities/CommunityItem.tsx

@@ -20,7 +20,7 @@ export const CommunityItem = ({
   description,
   numberOfMembers,
 }: CommunityItemProps) => (
-  <div className="rounded-[8px] bg-input-bg p-[16px] w-[358px] h-[201px]">
+  <div className="rounded-[8px] bg-input-bg p-[16px] w-[358px]">
     <Link
       href={nftAddress ? `/communities/nft/${nftAddress}` : '/communities'}
       className="flex flex-col h-full"

src/app/communities/communityUtils.tsx

@@ -0,0 +1,96 @@
+import { nftContracts } from '@/lib/contracts'
+import { ReactNode } from 'react'
+
+interface CommunityItem {
+  leftImageSrc: string
+  title: string
+  subtitle: string
+  description: string
+  nftAddress: string
+  numberOfMembers: number
+  cover: string
+  longDescription?: ReactNode
+  isMintable?: boolean
+}
+
+export const firstCommunity = {
+  leftImageSrc: '/images/ea-nft-dog.png',
+  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,
+  cover: '/images/nfts/ea-nft-cover.png',
+  isMintable: true,
+  longDescription: (
+    <>
+      <p className="mb-4">
+        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. From governance and protocol
+        architects to visionary explorers and collaborative creators, these NFTs represent the diverse talents
+        and passions driving the decentralized revolution.
+      </p>
+      <p className="mb-4">
+        Whether blazing new trails as blockchain pioneers, nurturing the ecosystem as open-source champions,
+        or guiding the community as decentralized thinkers, each character in this collection is a testament
+        to the boundless creativity and dedication of those building the future of Bitcoin and beyond.
+      </p>
+      <p>
+        Join the journey with these extraordinary individuals as they carve out a new digital frontier, one
+        block at a time.
+      </p>
+    </>
+  ),
+}
+
+export const ogFounders = {
+  leftImageSrc: '/images/nfts/og-founders-thumb.png',
+  title: 'OG Founders',
+  subtitle: 'DeFi',
+  description:
+    'In the magical realm of Rootstock, a select group of visionary elves, known as the Founders, received the prestigious OG Badge. This badge was a testament to their foresight and pioneering spirit, marking them as the true architects of their era.',
+  nftAddress: nftContracts.OG_FOUNDERS,
+  numberOfMembers: 0,
+  cover: '/images/nfts/founders-cover.png',
+  isMintable: true,
+}
+
+export const ogFoundersEcosystemPartners = {
+  leftImageSrc: '/images/nfts/og-partners-thumb.jpg',
+  title: 'OG Founders - Ecosystem Partners',
+  subtitle: 'DeFi',
+  description:
+    'In the magical realm of Rootstock, a new chapter unfolds as the elves of the RootstockCollective embark on an extraordinary journey. Equipped with the OG Badge, these visionary elves invite their esteemed external partners to join them in exploring and innovating within the Rootstock ecosystem.',
+  nftAddress: nftContracts.OG_PARTNERS,
+  numberOfMembers: 0,
+  cover: '/images/nfts/partners-cover.png',
+  isMintable: false,
+}
+
+export const ogFoundersExternalContributors = {
+  leftImageSrc: '/images/nfts/og-contributors-thumb.jpg',
+  title: 'OG Founders - External Contributors',
+  subtitle: 'DeFi',
+  description:
+    'In the enchanting realm of Rootstock, a thrilling new chapter unfolds as the elves of the RootstockCollective embark on an extraordinary journey. These visionary elves, recognized for their remarkable contributions, are bestowed with the prestigious OG Badge—a symbol of honor that grants them special powers.',
+  nftAddress: nftContracts.OG_CONTRIBUTORS,
+  numberOfMembers: 0,
+  cover: '/images/nfts/contributors-cover.png',
+  isMintable: false,
+}
+
+export const communitiesToRender = [
+  firstCommunity,
+  ogFounders,
+  ogFoundersEcosystemPartners,
+  ogFoundersExternalContributors,
+]
+
+export const communitiesMapByContract = communitiesToRender.reduce<Record<string, CommunityItem>>(
+  (prev, currentValue) => {
+    prev[currentValue.nftAddress] = currentValue
+    return prev
+  },
+  {},
+)

src/lib/constants.ts

@@ -9,7 +9,12 @@ export const BUILD_ID = process.env.NEXT_PUBLIC_BUILD_ID as string
 export const RIF_ADDRESS = process.env.NEXT_PUBLIC_RIF_ADDRESS as Address
 export const STRIF_ADDRESS = process.env.NEXT_PUBLIC_STRIF_ADDRESS as Address
 export const GOVERNOR_ADDRESS = process.env.NEXT_PUBLIC_GOVERNOR_ADDRESS as Address
+// NFTs
 export const EA_NFT_ADDRESS = process.env.NEXT_PUBLIC_EA_NFT_ADDRESS?.toLowerCase() as Address
+export const OG_FOUNDERS_NFT_ADDRESS = process.env.NEXT_PUBLIC_OG_FOUNDERS?.toLowerCase() as Address
+export const OG_PARTNERS_NFT_ADDRESS = process.env.NEXT_PUBLIC_OG_PARTNERS?.toLowerCase() as Address
+export const OG_CONTRIBUTORS_NFT_ADDRESS = process.env.NEXT_PUBLIC_OG_CONTRIBUTORS?.toLowerCase() as Address
+// NFTs end
 export const MULTICALL_ADDRESS = process.env.NEXT_PUBLIC_MULTICALL_ADDRESS as Address
 export const GRANTS_BUCKET_ADDRESS = process.env.NEXT_PUBLIC_GRANTS_BUCKET_ADDRESS as Address
 export const GRANTS_ACTIVE_BUCKET_ADDRESS = process.env.NEXT_PUBLIC_GRANTS_ACTIVE_BUCKET_ADDRESS as Address

src/lib/contracts.ts

@@ -12,6 +12,9 @@ import {
   RIF_ADDRESS,
   STRIF_ADDRESS,
   SIMPLIFIED_REWARD_DISTRIBUTOR_ADDRESS,
+  OG_FOUNDERS_NFT_ADDRESS,
+  OG_PARTNERS_NFT_ADDRESS,
+  OG_CONTRIBUTORS_NFT_ADDRESS,
 } from './constants'
 
 const tokenContracts = {
@@ -23,6 +26,9 @@ export type SupportedTokens = keyof typeof tokenContracts
 
 const nftContracts = {
   EA: EA_NFT_ADDRESS, // Early Adopters
+  OG_FOUNDERS: OG_FOUNDERS_NFT_ADDRESS, // Early Adopters
+  OG_PARTNERS: OG_PARTNERS_NFT_ADDRESS, // Early Adopters
+  OG_CONTRIBUTORS: OG_CONTRIBUTORS_NFT_ADDRESS, // Early Adopters
 }
 
 const abiContractsMap = {

src/pages/communities/nft/[address].tsx

@@ -14,6 +14,7 @@ import { useCommunity } from '@/shared/hooks/useCommunity'
 import { useStRif } from '@/shared/hooks/useStRIf'
 import { CopyButton } from '@/components/CopyButton'
 import { NftHoldersSection } from '@/app/communities/NftHoldersSection'
+import { communitiesMapByContract } from '@/app/communities/communityUtils'
 
 /**
  * Name of the local storage variable with information about whether the token was added to the wallet
@@ -58,6 +59,8 @@ export default function Page() {
   } = useCommunity(nftAddress)
   const { stRifBalance } = useStRif()
 
+  const nftInfo = communitiesMapByContract[nftAddress || '']
+
   const [message, setMessage] = useState<MessageProps | null>(null)
   // reset message after few seconds
   useEffect(() => {
@@ -206,30 +209,15 @@ 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="/images/ea-nft-dog.png" width={50} height={50} alt="Early Adopters" />
+              <Image src={nftInfo.leftImageSrc} width={50} height={50} alt="Early Adopters" />
             </div>
-            <div className="font-semibold">Early Adopters</div>
+            <div className="font-semibold">{nftInfo.title}</div>
           </div>
           <div className="mb-[24px] font-extralight">
-            <p className="mb-4">
-              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. From
-              governance and protocol architects to visionary explorers and collaborative creators, these NFTs
-              represent the diverse talents and passions driving the decentralized revolution.
-            </p>
-            <p className="mb-4">
-              Whether blazing new trails as blockchain pioneers, nurturing the ecosystem as open-source
-              champions, or guiding the community as decentralized thinkers, each character in this collection
-              is a testament to the boundless creativity and dedication of those building the future of
-              Bitcoin and beyond.
-            </p>
-            <p>
-              Join the journey with these extraordinary individuals as they carve out a new digital frontier,
-              one block at a time.
-            </p>
+            <p>{nftInfo.longDescription || nftInfo.description}</p>
           </div>
           {/* Hidden until we get social media data */}
-          <div className="flex gap-[8px] mt-[16px] mb-[24px] hidden">
+          <div className="gap-[8px] mt-[16px] mb-[24px] hidden">
             {/* Chips with community links */}
             <Chip className="bg-white text-black">
               <BsTwitterX />
@@ -264,15 +252,15 @@ export default function Page() {
             <div className="flex gap-6">
               <Image
                 alt={nftMeta?.name ?? 'Early Adopters NFT'}
-                src={nftMeta?.image || '/images/ea-nft-cover.png'}
+                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]">
-                    Early Adopter #{tokenId}
+                    {nftInfo.title} #{tokenId}
                   </Paragraph>
 
                   {/* `Owned by 0x00000` colored with 2 colors */}
@@ -303,18 +291,20 @@ export default function Page() {
                 </div>
               ) : (
                 <div>
-                  <Paragraph className="text-[18px]">Early Adopter</Paragraph>
-                  <Button
-                    variant="primary"
-                    className="my-[16px]"
-                    onClick={handleMinting}
-                    disabled={!tokensAvailable || !address || isClaiming}
-                    loading={isClaiming}
-                    data-testid="claimButton"
-                  >
-                    Claim it!
-                  </Button>
-                  <Span className="inline-block text-[14px] tracking-wide hidden">
+                  <Paragraph className="text-[18px]">{nftInfo.title}</Paragraph>
+                  {nftInfo.isMintable && (
+                    <Button
+                      variant="primary"
+                      className="my-[16px]"
+                      onClick={handleMinting}
+                      disabled={!tokensAvailable || !address || isClaiming}
+                      loading={isClaiming}
+                      data-testid="claimButton"
+                    >
+                      Claim it!
+                    </Button>
+                  )}
+                  <Span className="text-[14px] tracking-wide hidden">
                     Crypto ipsum bitcoin ethereum dogecoin litecoin. Hedera USD kadena chainlink weave hive
                     binance. Shiba-inu terra ICON IOTA ICON livepeer velas uniswap. Kadena kusama IOTA
                     horizen.