fix: return null from non existant contractURI query, reorg queries, …

…add customIpfs prop throughout queries

examples/nextjs-dapp/src/pages/drops-metadata.tsx

@@ -4,7 +4,18 @@ function Page() {
   return (
     <section className="flex flex-col gap-4">
       <h1>Render Drops Style Contract Metadata</h1>
-      <DropsContractProvider collectionAddress="0xb603d89f9f87fda06cd80c4a04ec6dc0440b8f42" networkId="5">
+      <DropsContractProvider collectionAddress="0xb603d89f9f87fda06cd80c4a04ec6dc0440b8f42" networkId="5" ipfsGateway="zora-prod.mypinata.cloud">
+        <DropsComponents.Thumbnail style={{maxWidth: 600}} />
+        <DropsComponents.Metadata />
+        <div className="flex flex-row gap-2">
+          <DropsComponents.MintButton />
+          <DropsComponents.MintQuantity />
+        </div>
+        <DropsComponents.TxStatus />
+        <DropsData />
+      </DropsContractProvider>
+      <h1>Render Editions Style Contract Metadata</h1>
+      <DropsContractProvider collectionAddress="0x213b55e62323f918b3fb45ac02882a885f9b1da3" networkId="5" ipfsGateway="zora-prod.mypinata.cloud">
         <DropsComponents.Thumbnail style={{maxWidth: 600}} />
         <DropsComponents.Metadata />
         <div className="flex flex-row gap-2">

packages/zora-drops-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-assembly/zora-drops-utils",
-  "version": "0.1.61",
+  "version": "0.1.62",
   "description": "Example package with some web3 peer dependencies",
   "main": "dist/public-assembly-zora-drops-utils.cjs.js",
   "module": "dist/public-assembly-zora-drops-utils.esm.js",

packages/zora-drops-utils/src/context/DropsContractProvider.tsx

@@ -36,6 +36,7 @@ export function DropsContractProvider({
     contractAddress: collectionAddress,
     networkId: networkId,
     refreshInterval: refreshInterval,
+    ipfsGateway: ipfsGateway,
   })
   const [error, setError] = React.useState<any | undefined>(undefined)
   const [purchaseLoading, setPurchaseLoading] = React.useState(false)

packages/zora-drops-utils/src/data/dropsArrayFetcher.ts

@@ -1,18 +1,20 @@
 import { dropsFetcher } from './dropsFetcher'
-import { EDITION_QUERY } from './dropsQuery'
 import { DropsArrayRequestProps } from '../typings/requestTypes'
 
 export async function dropsArrayFetcher({
   contractAddresses,
   networkId = '1',
-}: DropsArrayRequestProps) {
+  ipfsGateway,
+}: DropsArrayRequestProps & {
+  ipfsGateway?: string
+}) {
   try {
     const editions = await Promise.all(
       contractAddresses.map(async (contractAddress) => {
         const metadata = await dropsFetcher(
           networkId,
           contractAddress.toLowerCase(),
-          EDITION_QUERY
+          ipfsGateway
         )
           .then((res) => {
             return res

packages/zora-drops-utils/src/data/dropsFetcher.ts

@@ -1,30 +1,13 @@
 import { GraphQLClient } from 'graphql-request'
 import { returnDropEndpoint } from '../constants'
 import { Networks } from '../typings'
-import { addIPFSGateway } from '../lib'
-
-export async function decodeContractUri(contractURI?: string) {
-  const url = contractURI ? addIPFSGateway(contractURI) : undefined
-  try {
-    const contractURIData = await fetch(url)
-      .then((res) => res.text())
-      .then((t) => {
-        try {
-          return JSON.parse(t.replace(/\\n/g, ' '))
-        } catch (e) {
-          return undefined
-        }
-      })
-    return contractURIData
-  } catch (err) {
-    console.error(err)
-  }
-}
+import { DROPS_QUERY } from './dropsQuery'
+import { decodeContractUri } from '../lib/decodeContractURI'
 
 export async function dropsFetcher(
   chainId: Networks,
   collectionAddress: string,
-  query: any
+  ipfsGateway?: string
 ) {
   const variables = {
     collectionAddress: collectionAddress.toLowerCase(),
@@ -33,11 +16,15 @@ export async function dropsFetcher(
   const endpoint = returnDropEndpoint(chainId)
   const client = new GraphQLClient(endpoint, { headers: {} })
 
-  const data = await client.request(query, variables).then((data) => data?.erc721Drop)
-  const contractURI = await decodeContractUri(data?.contractURI)
+  const data = await client
+    .request(DROPS_QUERY, variables)
+    .then((data) => data?.erc721Drop)
+  const contractURI = data?.contractURI
+    ? await decodeContractUri(data?.contractURI, ipfsGateway)
+    : null
 
   return {
     ...data,
-    contractURI: contractURI,
+    contractURI: contractURI ? contractURI : null,
   }
 }

packages/zora-drops-utils/src/data/dropsQuery.ts

@@ -1,6 +1,6 @@
 import { gql } from 'graphql-request'
 
-export const EDITIONS_STYLE_CONTRACT_METADATA = gql`
+export const ERC721_DROPS_CONTRACT_METADATA = gql`
   fragment ERC721Fields on ERC721Drop {
     name
     owner
@@ -28,11 +28,11 @@ export const EDITIONS_STYLE_CONTRACT_METADATA = gql`
   }
 `
 
-export const EDITION_QUERY = gql`
+export const DROPS_QUERY = gql`
   query editionsStyleDropMetadataerc721Drops($collectionAddress: String!) {
     erc721Drop(id: $collectionAddress) {
       ...ERC721Fields
     }
   }
-  ${EDITIONS_STYLE_CONTRACT_METADATA}
+  ${ERC721_DROPS_CONTRACT_METADATA}
 `

packages/zora-drops-utils/src/hooks/useDrop.ts

@@ -1,9 +1,15 @@
 import React from 'react'
-import { EDITION_QUERY, dropsFetcher } from '../data'
+import { dropsFetcher } from '../data'
 import { DropsRequestProps } from '../typings'
 import { useValidAddress } from './useValidAddress'
 
-export function useDrop({ contractAddress, networkId = '1' }: DropsRequestProps) {
+export function useDrop({
+  contractAddress,
+  networkId = '1',
+  ipfsGateway,
+}: DropsRequestProps & {
+  ipfsGateway?: string
+}) {
   const [data, setData] = React.useState<any>(undefined)
   const [error, setError] = React.useState<any>(undefined)
   const [isLoading, setIsLoading] = React.useState(true)
@@ -15,7 +21,7 @@ export function useDrop({ contractAddress, networkId = '1' }: DropsRequestProps)
     setIsLoading(true)
 
     async function getDropsData() {
-      await dropsFetcher(networkId, contractAddress, EDITION_QUERY)
+      await dropsFetcher(networkId, contractAddress, ipfsGateway)
         .then((res) => {
           setData(res)
           setIsLoading(false)

packages/zora-drops-utils/src/hooks/useSWRDrop.ts

@@ -1,19 +1,21 @@
 import useSWR from 'swr'
-import { EDITION_QUERY, dropsFetcher } from '../data'
+import { dropsFetcher } from '../data'
 import { DropsRequestProps } from '../typings'
 import { useValidAddress } from './useValidAddress'
 
 export function useSWRDrop({
   contractAddress,
   networkId = '1',
   refreshInterval = 2000,
+  ipfsGateway,
 }: {
   refreshInterval?: number
+  ipfsGateway?: string
 } & DropsRequestProps) {
   const isValidAddress = useValidAddress(contractAddress)
 
   const { data, error, isValidating } = useSWR(
-    [networkId, contractAddress, EDITION_QUERY],
+    [networkId, contractAddress, ipfsGateway],
     dropsFetcher,
     {
       isPaused: () => !isValidAddress,

packages/zora-drops-utils/src/index.ts

@@ -1,6 +1,6 @@
 export {
-  EDITIONS_STYLE_CONTRACT_METADATA,
-  EDITION_QUERY,
+  ERC721_DROPS_CONTRACT_METADATA,
+  DROPS_QUERY,
   dropsFetcher,
   dropsArrayFetcher,
 } from './data'

packages/zora-drops-utils/src/lib/decodeContractURI.ts

@@ -0,0 +1,25 @@
+import { addIPFSGateway } from './addIPFSGateway'
+
+export async function decodeContractUri(contractURI?: string, ipfsGateway?: string) {
+  const url = !contractURI.startsWith('data:application')
+    ? addIPFSGateway(contractURI, ipfsGateway)
+    : undefined
+
+  if (!url) return null
+
+  try {
+    const contractURIData = await fetch(url)
+      .then((res) => res.text())
+      .then((t) => {
+        try {
+          return JSON.parse(t.replace(/\\n/g, ' '))
+        } catch (e) {
+          return null
+        }
+      })
+    return contractURIData
+  } catch (err) {
+    console.error(err)
+    return null
+  }
+}