Export/Import open edition token metadata

components/MetadataInput.tsx

@@ -13,6 +13,8 @@ export interface MetadataInputProps {
   selectedAssetFile: File
   selectedMetadataFile: File
   updateMetadataToUpload: (metadataFile: File) => void
+  onChange?: (metadata: any) => void
+  importedMetadata?: any
 }
 
 export const MetadataInput = (props: MetadataInputProps) => {
@@ -151,8 +153,11 @@ export const MetadataInput = (props: MetadataInputProps) => {
 
   useEffect(() => {
     console.log(props.selectedMetadataFile?.name)
-    if (props.selectedMetadataFile) void parseMetadata(props.selectedMetadataFile)
-    else void parseMetadata(emptyMetadataFile)
+    if (props.selectedMetadataFile) {
+      void parseMetadata(props.selectedMetadataFile)
+    } else if (!props.importedMetadata) {
+      void parseMetadata(emptyMetadataFile)
+    }
   }, [props.selectedMetadataFile?.name])
 
   const nameStateMemo = useMemo(() => nameState, [nameState.value])
@@ -163,7 +168,10 @@ export const MetadataInput = (props: MetadataInputProps) => {
 
   useEffect(() => {
     console.log('Update metadata')
-    if (metadata) generateUpdatedMetadata()
+    if (metadata) {
+      generateUpdatedMetadata()
+      if (props.onChange) props.onChange(metadata)
+    }
     console.log(metadata)
   }, [
     nameStateMemo.value,
@@ -173,6 +181,31 @@ export const MetadataInput = (props: MetadataInputProps) => {
     attributesStateMemo.entries,
   ])
 
+  useEffect(() => {
+    if (props.importedMetadata) {
+      console.log('Imported metadata: ', props.importedMetadata)
+      nameState.onChange(props.importedMetadata.name || '')
+      descriptionState.onChange(props.importedMetadata.description || '')
+      externalUrlState.onChange(props.importedMetadata.external_url || '')
+      youtubeUrlState.onChange(props.importedMetadata.youtube_url || '')
+      if (props.importedMetadata?.attributes && props.importedMetadata?.attributes?.length > 0) {
+        attributesState.reset()
+        props.importedMetadata?.attributes?.forEach((attribute: { trait_type: string; value: string }) => {
+          attributesState.add({
+            trait_type: attribute.trait_type,
+            value: attribute.value,
+          })
+        })
+      } else {
+        attributesState.reset()
+        attributesState.add({
+          trait_type: '',
+          value: '',
+        })
+      }
+    }
+  }, [props.importedMetadata])
+
   return (
     <div>
       <div className="grid grid-cols-2 mt-4 mr-4 ml-8 w-full max-w-6xl max-h-full no-scrollbar">

components/openEdition/OffChainMetadataUploadDetails.tsx

@@ -42,6 +42,7 @@ export interface OffChainMetadataUploadDetailsDataProps {
   tokenURI?: string
   imageUrl?: string
   openEditionMinterMetadataFile?: File
+  exportedMetadata?: any
 }
 
 export const OffChainMetadataUploadDetails = ({
@@ -55,6 +56,7 @@ export const OffChainMetadataUploadDetails = ({
   const [uploadService, setUploadService] = useState<UploadServiceType>('nft-storage')
   const [metadataFileArrayIndex, setMetadataFileArrayIndex] = useState(0)
   const [refreshMetadata, setRefreshMetadata] = useState(false)
+  const [exportedMetadata, setExportedMetadata] = useState(undefined)
 
   const [openEditionMinterMetadataFile, setOpenEditionMinterMetadataFile] = useState<File | undefined>()
 
@@ -206,6 +208,7 @@ export const OffChainMetadataUploadDetails = ({
           .replace(regex, '')
           .trim(),
         openEditionMinterMetadataFile,
+        exportedMetadata,
       }
       onChange(data)
     } catch (error: any) {
@@ -224,6 +227,7 @@ export const OffChainMetadataUploadDetails = ({
     coverImageUrlState.value,
     refreshMetadata,
     openEditionMinterMetadataFile,
+    exportedMetadata,
   ])
 
   useEffect(() => {
@@ -246,7 +250,7 @@ export const OffChainMetadataUploadDetails = ({
       setUploadMethod(importedOffChainMetadataUploadDetails.uploadMethod)
       tokenUriState.onChange(importedOffChainMetadataUploadDetails.tokenURI || '')
       coverImageUrlState.onChange(importedOffChainMetadataUploadDetails.imageUrl || '')
-      setOpenEditionMinterMetadataFile(importedOffChainMetadataUploadDetails.openEditionMinterMetadataFile)
+      //setOpenEditionMinterMetadataFile(importedOffChainMetadataUploadDetails.openEditionMinterMetadataFile)
     }
   }, [importedOffChainMetadataUploadDetails])
 
@@ -464,6 +468,8 @@ export const OffChainMetadataUploadDetails = ({
                 />
               </div>
               <MetadataInput
+                importedMetadata={importedOffChainMetadataUploadDetails?.exportedMetadata}
+                onChange={setExportedMetadata}
                 selectedAssetFile={assetFilesArray[0]}
                 selectedMetadataFile={metadataFilesArray[0]}
                 updateMetadataToUpload={updateOpenEditionMinterMetadataFile}