diff --git a/examples/nextjs-dapp/src/pages/drops-metadata.tsx b/examples/nextjs-dapp/src/pages/drops-metadata.tsx index 0db5b23..b7473b6 100644 --- a/examples/nextjs-dapp/src/pages/drops-metadata.tsx +++ b/examples/nextjs-dapp/src/pages/drops-metadata.tsx @@ -4,7 +4,18 @@ function Page() { return (

Render Drops Style Contract Metadata

- + + + +
+ + +
+ + +
+

Render Editions Style Contract Metadata

+
diff --git a/packages/zora-drops-utils/package.json b/packages/zora-drops-utils/package.json index 80c06c0..4445679 100644 --- a/packages/zora-drops-utils/package.json +++ b/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", diff --git a/packages/zora-drops-utils/src/context/DropsContractProvider.tsx b/packages/zora-drops-utils/src/context/DropsContractProvider.tsx index 4c460b1..4af9b33 100644 --- a/packages/zora-drops-utils/src/context/DropsContractProvider.tsx +++ b/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(undefined) const [purchaseLoading, setPurchaseLoading] = React.useState(false) diff --git a/packages/zora-drops-utils/src/data/dropsArrayFetcher.ts b/packages/zora-drops-utils/src/data/dropsArrayFetcher.ts index d9e7667..af3409a 100644 --- a/packages/zora-drops-utils/src/data/dropsArrayFetcher.ts +++ b/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 diff --git a/packages/zora-drops-utils/src/data/dropsFetcher.ts b/packages/zora-drops-utils/src/data/dropsFetcher.ts index f27d362..571ce55 100644 --- a/packages/zora-drops-utils/src/data/dropsFetcher.ts +++ b/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, } } diff --git a/packages/zora-drops-utils/src/data/dropsQuery.ts b/packages/zora-drops-utils/src/data/dropsQuery.ts index 5fdd4ee..fa97607 100644 --- a/packages/zora-drops-utils/src/data/dropsQuery.ts +++ b/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} ` diff --git a/packages/zora-drops-utils/src/hooks/useDrop.ts b/packages/zora-drops-utils/src/hooks/useDrop.ts index 5e5128f..33a2f97 100644 --- a/packages/zora-drops-utils/src/hooks/useDrop.ts +++ b/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(undefined) const [error, setError] = React.useState(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) diff --git a/packages/zora-drops-utils/src/hooks/useSWRDrop.ts b/packages/zora-drops-utils/src/hooks/useSWRDrop.ts index 71cc695..c2352bd 100644 --- a/packages/zora-drops-utils/src/hooks/useSWRDrop.ts +++ b/packages/zora-drops-utils/src/hooks/useSWRDrop.ts @@ -1,5 +1,5 @@ import useSWR from 'swr' -import { EDITION_QUERY, dropsFetcher } from '../data' +import { dropsFetcher } from '../data' import { DropsRequestProps } from '../typings' import { useValidAddress } from './useValidAddress' @@ -7,13 +7,15 @@ 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, diff --git a/packages/zora-drops-utils/src/index.ts b/packages/zora-drops-utils/src/index.ts index c3a6cef..5028b86 100644 --- a/packages/zora-drops-utils/src/index.ts +++ b/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' diff --git a/packages/zora-drops-utils/src/lib/decodeContractURI.ts b/packages/zora-drops-utils/src/lib/decodeContractURI.ts new file mode 100644 index 0000000..3d42303 --- /dev/null +++ b/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 + } +}