Fix auction house for polygon

.env

@@ -4,9 +4,13 @@ NEXT_PUBLIC_BASE_URL=http://localhost:8080
 
 ## configured RPC URL (mainnet/rinkeby depending on NETWORK_ID) for walletconnect
 
-NEXT_PUBLIC_NETWORK_ID=4
-NEXT_PUBLIC_CURATORS_ID=0x488Ae9448E7fc869C12cE26f813Af5620B351A50
+## Polygon ENV VARS
+NEXT_PUBLIC_NETWORK_ID=137
+# Show all NFTs curated by this address in the auction house
+NEXT_PUBLIC_CONTRACT_ADDRESSES=0x6953190AAfD8f8995e8f47e8F014d0dB83E92300
+# Typically you want to use the CONTRACT_ADDRESSES field and not CURATOR_ID field
 
 ## MAINNET ENV VARS
 #NEXT_PUBLIC_NETWORK_ID=1
-#NEXT_PUBLIC_TARGET_CONTRACT_ADDRESS=0x8d04a8c79cEB0889Bdd12acdF3Fa9D207eD3Ff63
+# Show all NFTs in these contract addresses (comma-seperated)
+#NEXT_PUBLIC_CONTRACT_ADDRESSES=0x8d04a8c79cEB0889Bdd12acdF3Fa9D207eD3Ff63

components/AuctionsList.tsx

@@ -1,27 +1,45 @@
 import { FetchStaticData } from "@zoralabs/nft-hooks";
 import { NFTPreview } from "@zoralabs/nft-components";
 import { useRouter } from "next/router";
+import { useCallback, useEffect, useState } from "react";
+import { CONTRACT_ADDRESSES } from "../utils/env-vars";
 
-export const AuctionsList = ({ tokens }: { tokens: any[] }) => {
+type TokenInfo = {
+  id: string;
+}
+
+export const AuctionsList = () => {
+  const [medias, setMedias] = useState<TokenInfo[] | undefined>(undefined);
+  const fetchMedia = useCallback(async () => {
+    const mediaRequest = await fetch(
+      "https://api.thegraph.com/subgraphs/name/ourzora/zora-v1-polygon",
+      {
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: '{"query":"{\\n  medias(last:100) {\\n    id\\n  }\\n}","variables":null}',
+        method: "POST",
+      }
+    );
+    const json = await mediaRequest.json();
+    setMedias(json.data.medias);
+  }, [setMedias]);
+  useEffect(() => {
+    fetchMedia();
+  }, []);
   const router = useRouter();
 
   return (
     <div css={{ display: "flex", flexWrap: "wrap", justifyContent: "center" }}>
-      {tokens &&
-        tokens.map((token) => {
-          const tokenInfo = FetchStaticData.getIndexerServerTokenInfo(token);
+      {medias &&
+        medias.map((media: TokenInfo) => {
           return (
             <NFTPreview
-              initialData={token}
-              key={tokenInfo.tokenId}
-              id={tokenInfo.tokenId}
-              contract={tokenInfo.tokenContract}
-              onClick={(evt) =>
-                router.push(
-                  `/token/${tokenInfo.tokenContract}/${tokenInfo.tokenId}`
-                )
-              }
-              useBetaIndexer={true}
+              key={media.id}
+              id={media.id}
+              contract={CONTRACT_ADDRESSES}
+              onClick={() => router.push(`/token/zora/${media.id}`)}
+              useBetaIndexer={false}
             />
           );
         })}

package.json

@@ -12,7 +12,7 @@
     "@emotion/styled": "^11.3.0",
     "@zoralabs/manage-auction-hooks": "^0.0.11",
     "@zoralabs/nft-components": "^0.3.1",
-    "@zoralabs/nft-hooks": "^0.8.1",
+    "@zoralabs/nft-hooks": "0.8.1",
     "@zoralabs/simple-wallet-provider": "^0.0.9",
     "classnames": "^2.3.1",
     "next": "10.2.3",

pages/_app.tsx

@@ -11,6 +11,7 @@ import { mediaConfigurationStyles } from '../styles/theme'
 import GlobalStyles from '../styles/GlobalStyles'
 import { Header } from '../components/Header'
 import { Footer } from '../components/Footer'
+import { NETWORK_ID, RPC_URL } from '../utils/env-vars'
 
 export default function CreateAuctionHouseApp({
   Component,
@@ -20,8 +21,8 @@ export default function CreateAuctionHouseApp({
     <>
       <GlobalStyles />
       <Web3ConfigProvider
-        networkId={parseInt(process.env.NEXT_PUBLIC_NETWORK_ID as string, 10)}
-        rpcUrl={process.env.NEXT_PUBLIC_RPC_URL as string || undefined}
+        networkId={parseInt(NETWORK_ID, 10)}
+        rpcUrl={RPC_URL}
         theme={{
           walletOption: css`
             color: #000 !important;
@@ -37,7 +38,7 @@ export default function CreateAuctionHouseApp({
         }}
       >
         <MediaConfiguration
-          networkId={process.env.NEXT_PUBLIC_NETWORK as NetworkIDs}
+          networkId={NETWORK_ID as NetworkIDs}
           style={mediaConfigurationStyles}
         >
           <Header />

pages/api/ownedItems.ts

@@ -1,4 +1,5 @@
 import { FetchStaticData, MediaFetchAgent } from "@zoralabs/nft-hooks";
+import { CONTRACT_ADDRESSES } from "../../utils/env-vars";
 
 module.exports = async (req: any, res: any) => {
   const { owner } = req.query;
@@ -13,9 +14,7 @@ module.exports = async (req: any, res: any) => {
   const tokens = await FetchStaticData.fetchUserOwnedNFTs(
     fetchAgent,
     {
-      collectionAddresses: process.env.NEXT_PUBLIC_TARGET_CONTRACT_ADDRESS
-        ? (process.env.NEXT_PUBLIC_TARGET_CONTRACT_ADDRESS as string).split(",")
-        : undefined,
+      collectionAddresses: CONTRACT_ADDRESSES?.split(","),
       userAddress: owner,
       limit: 200,
       offset: 0,

pages/custom-thumbnails.tsx

@@ -14,6 +14,7 @@ import { NFTPreview, PreviewComponents } from "@zoralabs/nft-components";
 import { useRouter } from "next/router";
 import { SyntheticEvent } from "react";
 import { media, buttonStyle, absoluteCentered } from "../styles/mixins";
+import { APP_TITLE, CONTRACT_ADDRESSES, CURATOR_ID } from "../utils/env-vars";
 
 // Create A Token Thumbnail
 const TokenThumbnail = ({
@@ -82,7 +83,7 @@ export default function Home({ tokens }: { tokens: any }) {
   return (
     <IndexWrapper>
       <Head />
-      <h1>{process.env.NEXT_PUBLIC_APP_TITLE}</h1>
+      <h1>{APP_TITLE}</h1>
       <CustomAuctionsList tokens={tokens} />
     </IndexWrapper>
   );
@@ -93,11 +94,8 @@ export const getStaticProps: GetStaticProps = async () => {
     process.env.NEXT_PUBLIC_NETWORK_ID as NetworkIDs
   );
   const tokens = await FetchStaticData.fetchZoraIndexerList(fetchAgent, {
-    curatorAddress: process.env.NEXT_PUBLIC_CURATORS_ID as string,
-    collectionAddresses: process.env.NEXT_PUBLIC_TARGET_CONTRACT_ADDRESS
-      ? (process.env.NEXT_PUBLIC_TARGET_CONTRACT_ADDRESS as string).split(",")
-      : undefined,
-
+    curatorAddress: CURATOR_ID,
+    collectionAddresses: CONTRACT_ADDRESSES?.split(","),
     limit: 100,
     offset: 0,
   });

pages/index.tsx

@@ -10,38 +10,18 @@ import {
   MediaFetchAgent,
   NetworkIDs,
 } from "@zoralabs/nft-hooks";
+import { APP_TITLE, CONTRACT_ADDRESSES, CURATOR_ID } from "../utils/env-vars";
 
 export default function Home({ tokens }: { tokens: any }) {
   return (
     <IndexWrapper>
       <Head />
-      <h1>{process.env.NEXT_PUBLIC_APP_TITLE}</h1>
+      <h1>{APP_TITLE}</h1>
       <AuctionsList tokens={tokens} />
     </IndexWrapper>
   );
 }
 
-export const getStaticProps: GetStaticProps = async () => {
-  const fetchAgent = new MediaFetchAgent(
-    process.env.NEXT_PUBLIC_NETWORK_ID as NetworkIDs
-  );
-  const contractAddress = process.env
-    .NEXT_PUBLIC_TARGET_CONTRACT_ADDRESS as string;
-  const tokens = await FetchStaticData.fetchZoraIndexerList(fetchAgent, {
-    curatorAddress: process.env.NEXT_PUBLIC_CURATORS_ID as any,
-    collectionAddresses: contractAddress ? contractAddress.split(',') : undefined,
-    limit: 100,
-    offset: 0,
-  });
-
-  return {
-    props: {
-      tokens,
-    },
-    revalidate: 60,
-  };
-};
-
 const IndexWrapper = styled(PageWrapper)`
   max-width: var(--content-width-xl);
 `;

pages/list.tsx

@@ -17,6 +17,7 @@ import { Fragment, useContext } from "react";
 import useSWR from "swr";
 
 import Head from "../components/head";
+import { APP_TITLE } from "../utils/env-vars";
 import { PageWrapper } from "./../styles/components";
 
 const ListItemComponent = () => {
@@ -156,7 +157,7 @@ export default function List() {
         renderMedia={MediaThumbnailPreview}
         strings={{
           LIST_MEDIA_HEADER: "List your NFT",
-          LIST_MEDIA_DESCRIPTION: `Set the reserve price to list your NFT on ${process.env.NEXT_PUBLIC_APP_TITLE}`,
+          LIST_MEDIA_DESCRIPTION: `Set the reserve price to list your NFT on ${APP_TITLE}`,
         }}
       >
         <ListWrapper>

pages/token/[contract]/[id].tsx → pages/token/zora/[id].tsx

@@ -9,6 +9,7 @@ import { GetServerSideProps } from "next";
 
 import { PageWrapper } from "../../../styles/components";
 import Head from "../../../components/head";
+import { APP_TITLE } from "../../../utils/env-vars";
 
 const styles = {
   theme: {
@@ -24,8 +25,6 @@ type PieceProps = {
   initialData: any;
 };
 
-const APP_TITLE = process.env.NEXT_PUBLIC_APP_TITLE;
-
 export default function Piece({
   name,
   description,
@@ -47,7 +46,7 @@ export default function Piece({
       >
         <PageWrapper>
           <NFTFullPage
-            useBetaIndexer={true}
+            useBetaIndexer={false}
             contract={query.contract as string}
             id={query.id as string}
             initialData={initialData}
@@ -62,30 +61,29 @@ export const getServerSideProps: GetServerSideProps = async ({ params }) => {
   if (!params?.id || Array.isArray(params.id)) {
     return { notFound: true };
   }
-  if (!params?.contract || Array.isArray(params.contract)) {
-    return { notFound: true };
-  }
 
   const id = params.id as string;
-  const contract = params.contract as string;
 
   const fetchAgent = new MediaFetchAgent(
     process.env.NEXT_PUBLIC_NETWORK_ID as NetworkIDs
   );
-  const data = await FetchStaticData.fetchZoraIndexerItem(fetchAgent, {
-    tokenId: id,
-    collectionAddress: contract,
+  const data = await FetchStaticData.fetchZNFTGroupData({
+    fetchAgent,
+    ids: [id],
+    type: "id",
   });
 
-  const tokenInfo = FetchStaticData.getIndexerServerTokenInfo(data);
+  const nft = data[0];
+
+  const metadata = await fetchAgent.fetchIPFSMetadata(nft.zoraNFT.metadataURI);
 
   return {
     props: {
       id,
-      name: tokenInfo.metadata?.name || null,
-      description: tokenInfo.metadata?.description || null,
-      image: tokenInfo.image || null,
-      initialData: data,
+      name: metadata.name || null,
+      description: metadata.description || null,
+      image: null,
+      initialData: { nft, metadata },
     },
   };
 };

utils/env-vars.ts

@@ -0,0 +1,16 @@
+export const NETWORK_ID: string = process.env.NEXT_PUBLIC_NETWORK_ID!;
+if (!NETWORK_ID) {
+  throw new Error("NetworkID is required.");
+}
+
+export const CURATOR_ID = process.env.NEXT_PUBLIC_CURATOR_ID;
+export const CONTRACT_ADDRESSES = process.env.NEXT_PUBLIC_CONTRACT_ADDRESSES;
+if (!CURATOR_ID && !CONTRACT_ADDRESSES) {
+  throw new Error(
+    "At least one of curator id or contract address is required"
+  );
+}
+
+export const APP_TITLE = process.env.NEXT_PUBLIC_APP_TITLE
+
+export const RPC_URL: string | undefined = process.env.NEXT_PUBLIC_RPC_URL;

yarn.lock

@@ -1298,7 +1298,7 @@
     swr "^0.5.6"
     tslib "^2.2.0"
 
-"@zoralabs/nft-hooks@^0.8.0", "@zoralabs/nft-hooks@^0.8.1":
+"@zoralabs/nft-hooks@0.8.1", "@zoralabs/nft-hooks@^0.8.0":
   version "0.8.1"
   resolved "https://registry.yarnpkg.com/@zoralabs/nft-hooks/-/nft-hooks-0.8.1.tgz#7f66516c44eac6160b4a5d8bfff47544b0cda345"
   integrity sha512-Flc4s87KhAnXKxubyELVWfydc8FYu+uiZPl1pvIwvuTTsBPEAUKMTepGkkLivrJFPQ47a++hsUGMHRPnTvhDbA==