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

…-frame-tags-to-collections-page feat: frames for collections
reservoirprotocol · Feb 22, 2024 · aa58bcb · aa58bcb
2 parents cffb44f + e93746f
commit aa58bcb
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 1 deletion.
diff --git a/pages/[chain]/asset/[assetId].tsx b/pages/[chain]/asset/[assetId].tsx
@@ -270,7 +270,7 @@ const IndexPage: NextPage<Props> = ({ assetId, ssr }) => {
             <meta property="fc:frame:button:1:action" content="mint" />
             <meta
               property="fc:frame:button:1:target"
-              content={`eip155:7777777:${token?.token?.contract}:${token?.token?.tokenId}`}
+              content={`eip155:${token?.token?.chainId}:${token?.token?.contract}:${token?.token?.tokenId}`}
             />
           </>
         }

diff --git a/pages/[chain]/collection/[contract].tsx b/pages/[chain]/collection/[contract].tsx
@@ -12,6 +12,7 @@ import {
   useCollectionActivity,
   useDynamicTokens,
   useAttributes,
+  useReservoirClient,
 } from '@reservoir0x/reservoir-kit-ui'
 import { paths } from '@reservoir0x/reservoir-sdk'
 import Layout from 'components/Layout'
@@ -81,6 +82,7 @@ const CollectionPage: NextPage<Props> = ({ id, ssr }) => {
   const [activityFiltersOpen, setActivityFiltersOpen] = useState(true)
   const [tokenSearchQuery, setTokenSearchQuery] = useState<string>('')
   const chainCurrency = useChainCurrency()
+  const client = useReservoirClient()
   const debouncedSearch = useDebounce(tokenSearchQuery, 500)
   const [socketState, setSocketState] = useState<SocketState>(null)
   const [activityTypes, setActivityTypes] = useState<ActivityTypes>([
@@ -359,6 +361,43 @@ const CollectionPage: NextPage<Props> = ({ id, ssr }) => {
         ogImage={ssr?.collection?.collections?.[0]?.banner}
         title={ssr?.collection?.collections?.[0]?.name}
         description={ssr?.collection?.collections?.[0]?.description as string}
+        metatags={
+          <>
+            <meta
+              property="og:title"
+              content={`Farcaster: ${collection?.name}`}
+            />
+
+            <meta
+              property="eth:nft:collection"
+              content={`Farcaster: ${collection?.name}`}
+            />
+            <meta
+              property="eth:nft:contract_address"
+              content={collection?.primaryContract}
+            />
+            <meta
+              property="eth:nft:creator_address"
+              content={collection?.creator}
+            />
+            <meta
+              property="eth:nft:schema"
+              content={collection?.contractKind?.toUpperCase()}
+            />
+            <meta
+              property="eth:nft:media_url"
+              content={collection.banner || collection.image}
+            />
+            <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:${
+                collection?.chainId
+              }:${collection.primaryContract?.toLowerCase()}`}
+            />
+          </>
+        }
       />
       <Tabs.Root
         defaultValue="items"