Merge pull request #480 from reservoirprotocol/armando/grwth-4132-add…

…-frame-tags-to-collections-page Armando/grwth 4132 add frame tags to collections page
reservoirprotocol · Feb 26, 2024 · e87ee59 · e87ee59
2 parents 0ce1165 + 06b9419
commit e87ee59
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 60 deletions.
diff --git a/pages/[chain]/asset/[assetId].tsx b/pages/[chain]/asset/[assetId].tsx
@@ -228,6 +228,22 @@ const IndexPage: NextPage<Props> = ({ assetId, ssr }) => {
 
   const base64EncodedToken = btoa(encodeURIComponent(JSON.stringify(token)))
 
+  const mintData = collection?.mintStages?.find(
+    (stage) => stage.kind === 'public'
+  )
+
+  const mintPriceDecimal = mintData?.price?.amount?.decimal
+  const mintCurrency = mintData?.price?.currency?.symbol?.toUpperCase()
+
+  const mintPrice =
+    typeof mintPriceDecimal === 'number' &&
+    mintPriceDecimal !== null &&
+    mintPriceDecimal !== undefined
+      ? mintPriceDecimal === 0
+        ? 'Free'
+        : `${mintPriceDecimal} ${mintCurrency}`
+      : undefined
+
   return (
     <Layout>
       <Head
@@ -238,49 +254,49 @@ const IndexPage: NextPage<Props> = ({ assetId, ssr }) => {
         description={collection?.description as string}
         metatags={
           <>
+            {collection?.isMinting && (
+              <>
+                <meta
+                  property="og:title"
+                  content={`Farcaster: ${token?.token?.name}`}
+                />
+                <meta
+                  property="fc:frame:button:1"
+                  content={`Mint ${mintPrice}`}
+                />
+                <meta property="fc:frame:button:1:action" content="mint" />
+                <meta
+                  property="fc:frame:button:1:target"
+                  content={`eip155:${token?.token?.chainId}:${token?.token?.contract}:${token?.token?.tokenId}`}
+                />
+              </>
+            )}
+
+            {token?.market?.floorAsk?.price?.amount?.native && (
+              <>
+                <meta
+                  property="fc:frame:button:2"
+                  content={`Buy ${
+                    token.market.floorAsk.price.amount.native
+                  } ${token.market.floorAsk.price.currency?.symbol?.toUpperCase()}`}
+                />
+                <meta property="fc:frame:button:2:action" content="link" />
+                <meta
+                  property="fc:frame:button:2:target"
+                  content={`${process.env.NEXT_PUBLIC_HOST_URL}${router.asPath}`}
+                />
+              </>
+            )}
             <meta
-              property="og:title"
-              content={`Farcaster: ${token?.token?.name}`}
-            />
-
-            <meta
-              property="eth:nft:collection"
-              content={`Farcaster: ${token?.token?.name}`}
-            />
-            <meta
-              property="eth:nft:contract_address"
-              content={token?.token?.contract}
-            />
-            <meta
-              property="eth:nft:creator_address"
-              content={token?.token?.collection?.creator}
-            />
-            <meta
-              property="eth:nft:schema"
-              content={token?.token?.kind?.toUpperCase()}
-            />
-            <meta property="eth:nft:media_url" content={token?.token?.image} />
-
-            <meta property="fc:frame" content="vNext" />
-            <meta
-              property="fc:frame:image"
-              content={token?.token?.image || collection?.banner}
-            />
-            <meta property="fc:frame:button:1" content="Mint" />
-            <meta property="fc:frame:button:1:action" content="mint" />
-            <meta
-              property="fc:frame:button:1:target"
-              content={`eip155:${token?.token?.chainId}:${token?.token?.contract}:${token?.token?.tokenId}`}
+              name="twitter:image"
+              content={`/api/og/token?token=${encodeURIComponent(
+                base64EncodedToken
+              )}`}
             />
           </>
         }
       />
-      <meta
-        name="twitter:image"
-        content={`/api/og/token?token=${encodeURIComponent(
-          base64EncodedToken
-        )}`}
-      />
+
       <Flex
         justify="center"
         css={{

diff --git a/pages/[chain]/collection/[contract].tsx b/pages/[chain]/collection/[contract].tsx
@@ -362,28 +362,6 @@ const CollectionPage: NextPage<Props> = ({ id, ssr }) => {
         description={ssr?.collection?.collections?.[0]?.description as string}
         metatags={
           <>
-            <meta property="eth:nft:collection" content={collection.name} />
-            <meta
-              property="eth:nft:contract_address"
-              content={collection.primaryContract}
-            />
-            <meta
-              property="eth:nft:creator_address"
-              content={collection.primaryContract}
-            />
-            <meta
-              property="eth:nft:schema"
-              content={collection.contractKind?.toLowerCase()}
-            />
-            <meta
-              property="eth:nft:mint_status"
-              content={collection.isMinting ? 'live' : 'closed'}
-            />
-            <meta
-              property="eth:nft:chain"
-              content={client?.currentChain()?.name}
-            />
-            <meta property="nft:chain" content={client?.currentChain()?.name} />
             <meta property="fc:frame" content="vNext" />
             <meta
               property="fc:frame:image"
@@ -396,6 +374,22 @@ const CollectionPage: NextPage<Props> = ({ id, ssr }) => {
               property="fc:frame:button:1:target"
               content={`eip155:${collection.chainId}:${collection.primaryContract}`}
             />
+
+            {collection.floorAsk?.price?.amount?.native && (
+              <>
+                <meta
+                  property="fc:frame:button:2"
+                  content={`Collect ${
+                    collection.floorAsk.price.amount.native
+                  } ${collection.floorAsk.price.currency?.symbol?.toUpperCase()}`}
+                />
+                <meta property="fc:frame:button:2:action" content="link" />
+                <meta
+                  property="fc:frame:button:2:target"
+                  content={`${process.env.NEXT_PUBLIC_HOST_URL}${router.asPath}`}
+                />
+              </>
+            )}
           </>
         }
       />