Fix metadata validation (#2)

* update package files

* fix missing renderer dep

* committing graphql schemas for testing

* fix metadata validation

* Add .circleci/config.yml

* fix repo package.json

Author: iainnash

README.md

@@ -8,13 +8,13 @@ This library consists of a data fetch class and associated React hooks to load N
 
 
 Install:
-```
+```bash
 yarn add @zoralabs/nft-hooks
 ```
 
 Then you can import and use the hooks in your react application:
 
-```
+```ts
 import {useNFT, useNFTMetadata} from "@zoralabs/nft-hooks";
 
 function MyNFT() {
@@ -39,6 +39,21 @@ function MyNFT() {
 | [useNFTMetadata](docs/useNFTMetadata.md) | Fetches NFT metadata from a URL |
 | [useNFTContent](docs/useNFTContent.md) | Fetches text content from server for rendering from content URL |
 
+### Configuration:
+
+To set the network configuration, wrap the hooks used with the `NFTFetchConfiguration` component.
+
+```ts
+import {Networks, NFTFetchConfiguration} from '@zoralabs/nft-hooks';
+
+function NFTGallery() {
+  return (
+    <NFTFetchConfiguration network={Networks.MAINNET}>
+      <NFTList>
+    </NFTFetchConfiguration>
+  );
+}
+```
 
 ### Development:
 

docs/useNFTMetadata.md

@@ -5,6 +5,8 @@ There is a chance this request could fail when the server does not allow cross-o
 Requests are set with a 10 second timeout to allow showing the user an error message instead of an 
 indefinite loader.
 Metadata information can be found in the [zora metadata schema repo](https://github.com/ourzora/media-metadata-schemas).
+Metadata validation can be ignored optionally by passing in a second argument `{allowInvalid: true}`, otherwise, an 
+error will be thrown for invalid metadata.
 
 Hook result type:
 ```ts

jest.config.js

@@ -2,6 +2,7 @@ module.exports = {
   testEnvironment: 'jsdom',
   testRegex: "/tests/.*\\.(test|spec)?\\.(ts|tsx)$",
   moduleFileExtensions: ['js', 'ts', 'tsx', 'json', 'gql', 'graphql'],
+  modulePaths: ["<rootDir>/src"],
   transform: {
     "^.+\\.(j|t)sx?$": ["ts-jest"],
     "\\.(gql|graphql)$": ["@jagi/jest-transform-graphql"],

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zoralabs/nft-hooks",
-  "version": "0.0.1-pre",
+  "version": "0.1.0-pre",
   "description": "Generic Rendering Component for zNFTs",
   "repository": "https://github.com/our-zora/nft-hooks",
   "homepage": "https://github.com/our-zora/nft-hooks#README",
@@ -10,6 +10,9 @@
   "typings": "dist/src/index.d.ts",
   "source": "src/index.ts",
   "main": "dist/src/index.js",
+  "files": [
+    "dist"
+  ],
   "devDependencies": {
     "@graphql-codegen/cli": "^1.21.4",
     "@graphql-codegen/typescript": "^1.22.0",
@@ -52,7 +55,7 @@
   },
   "dependencies": {
     "@graphql-tools/mock": "^8.1.1",
-    "@zoralabs/media-metadata-schemas": "^0.1.2",
+    "@zoralabs/media-metadata-schemas": "^0.1.3",
     "big.js": "^6.1.0",
     "cross-fetch": "^3.1.4",
     "dataloader": "^2.0.0",

src/fetcher/MediaFetchAgent.ts

@@ -1,7 +1,6 @@
 import DataLoader from 'dataloader';
 import { GraphQLClient } from 'graphql-request';
-// TODO(iain): Fix validator
-// import {Validator} from "@zoralabs/media-metadata-schemas";
+import { Validator } from '@zoralabs/media-metadata-schemas';
 
 import { RequestError } from './RequestError';
 import {
@@ -104,10 +103,14 @@ export class MediaFetchAgent {
    */
   async loadMetadata(url: string): Promise<MetadataResultType> {
     const metadata = await this.loaders.metadataLoader.load(url);
-    // TODO(iain): fix imports
-    // const validator = new Validator(metadata.version);
-    // const valid = validator.validate(metadata);
-    const valid = true;
+
+    let valid = false;
+    try {
+      const validator = new Validator(metadata.version);
+      valid = validator.validate(metadata);
+    } catch (e) {
+      // skip validator errors
+    }
     return { metadata, valid };
   }
 

src/hooks/useNFTMetadata.ts

@@ -17,14 +17,17 @@ export type useNFTMetadataType = {
  * @param uri URI of metadata to fetch
  * @returns @type useNFTMetadataType
  */
-export function useNFTMetadata(uri: string): useNFTMetadataType {
+export function useNFTMetadata(
+  uri: string,
+  { allowInvalid } = { allowInvalid: false }
+): useNFTMetadataType {
   const [metadata, setMetadata] = useState<any>();
   const [error, setError] = useState<string | undefined>();
 
   useCallbackFetch(uri, async (fetchAgent, uri) => {
     try {
       const { metadata, valid } = await fetchAgent.loadMetadata(uri);
-      if (!valid) {
+      if (!allowInvalid && !valid) {
         throw new RequestError('Metadata Invalid: Metadata could not be validated.');
       }
       setMetadata(metadata);

tests/useNFTMetadata.test.ts

@@ -1,24 +1,26 @@
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from '@testing-library/react-hooks';
 
-import fetchMock from "./setupFetchMock";
+import fetchMock from './setupFetchMock';
 
-import { useNFTMetadata } from "../src";
-import { defaultFetchAgent } from "../src/context/NFTFetchContext";
+import { useNFTMetadata } from '../src';
+import { defaultFetchAgent } from '../src/context/NFTFetchContext';
 
-describe("useNFTContent", () => {
+describe('useNFTContent', () => {
   afterEach(() => {
     defaultFetchAgent.clearCache();
     fetchMock.reset();
   });
 
-  it("loads text content for NFT from server", async () => {
-    fetchMock.get(
-      "https://ipfs.io/ipfs/IPFS_SHA_EXAMPLE",
-      { name: "test", description: "test" },
-    );
+  it('loads text content for NFT from server', async () => {
+    fetchMock.get('https://ipfs.io/ipfs/IPFS_SHA_EXAMPLE', {
+      name: 'test',
+      description: 'test',
+      mimeType: 'text/plain',
+      version: 'zora-20210101',
+    });
 
     const { waitFor, result } = renderHook(() =>
-      useNFTMetadata("https://ipfs.io/ipfs/IPFS_SHA_EXAMPLE")
+      useNFTMetadata('https://ipfs.io/ipfs/IPFS_SHA_EXAMPLE')
     );
 
     await waitFor(() => result.current.loading === false);
@@ -27,37 +29,72 @@ describe("useNFTContent", () => {
     expect(result.current.loading).toBeFalsy();
     expect(result.current.metadata).toEqual({
       description: 'test',
+      mimeType: 'text/plain',
+      version: 'zora-20210101',
+      name: 'test',
+    });
+  });
+
+  it('throws an error for invalid metadata', async () => {
+    fetchMock.get('https://ipfs.io/ipfs/IPFS_SHA_EXAMPLE', { name: 'test' });
+
+    const { waitFor, result } = renderHook(() =>
+      useNFTMetadata('https://ipfs.io/ipfs/IPFS_SHA_EXAMPLE')
+    );
+
+    await waitFor(() => result.current.loading === false);
+
+    expect(result.current.error).toEqual(
+      'RequestError: Metadata Invalid: Metadata could not be validated.'
+    );
+    expect(result.current.loading).toBeFalsy();
+    expect(result.current.metadata).toBeUndefined();
+  });
+
+  it('allows invalid metadata when validation exception disabled', async () => {
+    fetchMock.get('https://ipfs.io/ipfs/IPFS_SHA_EXAMPLE', { name: 'test' });
+
+    const { waitFor, result } = renderHook(() =>
+      useNFTMetadata('https://ipfs.io/ipfs/IPFS_SHA_EXAMPLE', { allowInvalid: true })
+    );
+
+    await waitFor(() => result.current.loading === false);
+
+    expect(result.current.error).toBeUndefined();
+    expect(result.current.loading).toBeFalsy();
+    expect(result.current.metadata).toEqual({
       name: 'test',
     });
   });
-  it("returns error when metadata does not exist", async () => {
-    fetchMock.get("https://ipfs.io/ipfs/IPFS_SHA_EXAMPLE", "Not Found", {
+
+  it('returns error when metadata does not exist', async () => {
+    fetchMock.get('https://ipfs.io/ipfs/IPFS_SHA_EXAMPLE', 'Not Found', {
       response: { status: 404 },
     });
 
     const { waitFor, result } = renderHook(() =>
-      useNFTMetadata("https://ipfs.io/ipfs/IPFS_SHA_EXAMPLE")
+      useNFTMetadata('https://ipfs.io/ipfs/IPFS_SHA_EXAMPLE')
     );
 
     await waitFor(() => result.current.loading === false);
 
-    expect(result.current.error).toEqual("RequestError: Request Status = 404");
+    expect(result.current.error).toEqual('RequestError: Request Status = 404');
     expect(result.current.loading).toBeFalsy();
     expect(result.current.metadata).toBeUndefined();
   });
-  it("throws exception for invalid json", async () => {
-    fetchMock.get("https://ipfs.io/ipfs/IPFS_SHA_EXAMPLE", "INVALID JSON", {
-      response: { headers: { "content-type": "application/json" } },
+  it('throws exception for invalid json', async () => {
+    fetchMock.get('https://ipfs.io/ipfs/IPFS_SHA_EXAMPLE', 'INVALID JSON', {
+      response: { headers: { 'content-type': 'application/json' } },
     });
 
     const { waitFor, result } = renderHook(() =>
-      useNFTMetadata("https://ipfs.io/ipfs/IPFS_SHA_EXAMPLE")
+      useNFTMetadata('https://ipfs.io/ipfs/IPFS_SHA_EXAMPLE')
     );
 
     await waitFor(() => result.current.loading === false);
 
     expect(result.current.error).toEqual(
-      "RequestError: Cannot read JSON metadata from IPFS"
+      'RequestError: Cannot read JSON metadata from IPFS'
     );
     expect(result.current.loading).toBeFalsy();
     expect(result.current.metadata).toBeUndefined();

yarn.lock

@@ -1595,10 +1595,10 @@
   dependencies:
     tslib "^2.1.0"
 
-"@zoralabs/media-metadata-schemas@^0.1.2":
-  version "0.1.2"
-  resolved "https://registry.yarnpkg.com/@zoralabs/media-metadata-schemas/-/media-metadata-schemas-0.1.2.tgz#b6f3532e7bca95197fa8a7ca136ad70dbdce1d2d"
-  integrity sha512-QcvPNb4RkdU9xKfOxnmKRKKVI4Z5oammiz2wYHmqzOvkIgHvm7tjV/MQcTelaRJfjksYx8k6bqsmbSbKIMUJTQ==
+"@zoralabs/media-metadata-schemas@^0.1.3":
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/@zoralabs/media-metadata-schemas/-/media-metadata-schemas-0.1.3.tgz#082091b70ad1bd5e3b235afed391eefb0de83770"
+  integrity sha512-nyB/igVrifY2/AQgeq5eg081Q17VTFh7YP5Axda5v6CpNbSYSjAfgSFGSPG7Ho8t+T24wWBane8ainJGPP25mA==
   dependencies:
     "@types/jsonschema" "^1.1.1"
     jsonschema "^1.4.0"