Add rawData (bpierre#150)

README.md

@@ -108,6 +108,9 @@ nft.owner
 
 // url of the json containing the NFT's metadata
 nft.metadataUrl
+
+// the raw NFT metadata, or null if non applicable
+nft.rawData
 ```
 
 As TypeScript type:
@@ -125,6 +128,7 @@ type NftResult = {
     name: string
     owner: string
     metadataUrl?: string
+    rawData: Record<string, unknown> | null
   }
 }
 ```

src/fetchers/shared/cryptokitties.ts

@@ -22,6 +22,7 @@ export async function cryptoKittiesMetadata(
     metadataUrl,
     name: data?.name ?? "Unknown",
     owner: "",
+    rawData: data,
   }
 }
 

src/fetchers/shared/cryptopunks.ts

@@ -18,6 +18,7 @@ export function cryptoPunksMetadata(index: string): NftMetadata {
     metadataUrl: "",
     name: `CryptoPunk ${index}`,
     owner: "",
+    rawData: null,
   }
 }
 

src/fetchers/shared/decentraland-estate.tsx

@@ -69,6 +69,7 @@ export async function decentralandEstateMetadata(
     metadataUrl: "",
     name: nft?.name ?? "Unknown",
     owner: nft?.owner?.address ?? "",
+    rawData: data,
   }
 }
 

src/fetchers/shared/decentraland-parcel.tsx

@@ -74,6 +74,7 @@ export async function decentralandParcelMetadata(
     metadataUrl: "",
     name: nft?.name ?? `Parcel ${parcel?.x},${parcel?.y}`,
     owner: nft?.owner?.address ?? "",
+    rawData: data,
   }
 }
 

src/fetchers/shared/fetch-metadata.tsx

@@ -18,15 +18,17 @@ export async function fetchMetadata(
     throw new Error("Error when trying to request " + url)
   }
 
-  let data: unknown
+  let rawData
 
   try {
-    data = await res.json()
+    rawData = (await res.json()) as Record<string, unknown>
   } catch (err) {
     // If it can’t be parsed as JSON, it must be an image URL
-    data = { name: "", description: "", image: url }
+    rawData = { name: "", description: "", image: url }
   }
 
+  let data = { ...rawData }
+
   if (isNftMetadataMixedInJsonSchema(data)) {
     data = fixNftMetadataMixedInJsonSchema(data)
   }
@@ -39,9 +41,10 @@ export async function fetchMetadata(
 
   return normalizeNftMetadata(
     {
-      name: data.name || "",
-      image: data.image || "",
       description: data.description || "",
+      image: data.image || "",
+      name: data.name || "",
+      rawData,
     },
     fetchContext
   )

src/fetchers/shared/mooncats.ts

@@ -69,6 +69,7 @@ export async function moonCatsMetadata(
     metadataUrl: "",
     name: `Wrapped MoonCat #${tokenId}`,
     owner: "",
+    rawData: null,
   }
 }
 

src/types.ts

@@ -36,12 +36,14 @@ export type NftMetadata = {
   metadataUrl: string
   name: string
   owner: Address
+  rawData: Record<string, unknown> | null
 }
 
 export type NftJsonMetadata = {
   description: string
   image: string
   name: string
+  rawData: Record<string, unknown> | null
 }
 
 export type ContractMethod = {

src/utils.tsx

@@ -173,8 +173,8 @@ export function normalizeNftMetadata(
 }
 
 export function fixIncorrectImageField(
-  data: unknown
-): { image: string } | unknown {
+  data: Record<string, unknown>
+): Record<string, unknown> {
   if (!data || typeof data !== "object") {
     return data
   }
@@ -219,9 +219,10 @@ export function fixNftMetadataMixedInJsonSchema(
   data: NftMetadataMixedInJsonSchema
 ): NftJsonMetadata {
   return {
-    name: data?.properties?.name?.description || "",
-    description: data?.properties?.description?.description || "",
-    image: data?.properties?.image?.description || "",
+    name: data.properties?.name?.description || "",
+    description: data.properties?.description?.description || "",
+    image: data.properties?.image?.description || "",
+    rawData: { ...data },
   }
 }
 

test/utils.test.tsx

@@ -178,13 +178,15 @@ describe("normalizeNftMetadata()", () => {
           name: "",
           description: "",
           image: `ipfs://ipfs/${IPFS_HASH_1}`,
+          rawData: null,
         },
         FETCH_CONTEXT
       )
     ).toStrictEqual({
       name: "",
       description: "",
       image: `https://ipfs.io/ipfs/${IPFS_HASH_1}`,
+      rawData: null,
     })
   })
 })

website/src/Nft.tsx

@@ -16,6 +16,7 @@ type NftProps = {
 
 function Nft({ contract, tokenId, service, url }: NftProps) {
   const { nft, loading, error, reload } = useNft(contract, tokenId)
+
   return (
     <Card url={nft && url} label={service}>
       {(() => {