diff --git a/components/MetadataModal.tsx b/components/MetadataModal.tsx index d672dc2..c6803d2 100644 --- a/components/MetadataModal.tsx +++ b/components/MetadataModal.tsx @@ -15,13 +15,11 @@ export interface MetadataModalProps { assetFile: File metadataFile: File updateMetadata: (metadataFile: File) => void - updatedMetadataFile: File refresher: boolean } export const MetadataModal = (props: MetadataModalProps) => { const metadataFile: File = props.metadataFile - const updatedMetadataFile: File = props.updatedMetadataFile const [metadata, setMetadata] = useState(null) const [imageURL, setImageURL] = useState('') @@ -59,11 +57,6 @@ export const MetadataModal = (props: MetadataModalProps) => { } else { externalUrlState.onChange(parsedMetadata.external_url) } - if (!parsedMetadata.animation_url) { - animationUrlState.onChange('') - } else { - animationUrlState.onChange(parsedMetadata.animation_url) - } if (!parsedMetadata.youtube_url) { youtubeUrlState.onChange('') } else { @@ -72,10 +65,6 @@ export const MetadataModal = (props: MetadataModalProps) => { setMetadata(parsedMetadata) } - if (updatedMetadataFile) { - const parsedUpdatedMetadata = JSON.parse(await updatedMetadataFile.text()) - setImageURL(parsedUpdatedMetadata.image) - } } const nameState = useInputState({ @@ -102,14 +91,6 @@ export const MetadataModal = (props: MetadataModalProps) => { defaultValue: metadata?.external_url, }) - const animationUrlState = useInputState({ - id: 'animationUrl', - name: 'animationlUrl', - title: 'Animation URL', - placeholder: 'https://', - defaultValue: metadata?.animation_url, - }) - const youtubeUrlState = useInputState({ id: 'youtubeUrl', name: 'youtubeUrl', @@ -118,14 +99,6 @@ export const MetadataModal = (props: MetadataModalProps) => { defaultValue: metadata?.youtube_url, }) - const imageState = useInputState({ - id: 'image', - name: 'image', - title: 'Image', - placeholder: 'Not uploaded yet.', - defaultValue: imageURL, - }) - const attributesState = useMetadataAttributesState() const generateUpdatedMetadata = () => { @@ -135,11 +108,14 @@ export const MetadataModal = (props: MetadataModalProps) => { metadata.attributes = Object.values(attributesState)[1] metadata.attributes = metadata.attributes.filter((attribute: { trait_type: string }) => attribute.trait_type !== '') - metadata.name = nameState.value - metadata.description = descriptionState.value - metadata.external_url = externalUrlState.value - metadata.animation_url = animationUrlState.value - metadata.youtube_url = youtubeUrlState.value + if (nameState.value === '') delete metadata.name + else metadata.name = nameState.value + if (descriptionState.value === '') delete metadata.description + else metadata.description = descriptionState.value + if (externalUrlState.value === '') delete metadata.external_url + else metadata.externalUrl = externalUrlState.value + if (youtubeUrlState.value === '') delete metadata.youtube_url + else metadata.youtube_url = youtubeUrlState.value const metadataFileBlob = new Blob([JSON.stringify(metadata)], { type: 'application/json', @@ -147,6 +123,7 @@ export const MetadataModal = (props: MetadataModalProps) => { const editedMetadataFile = new File([metadataFileBlob], metadataFile.name, { type: 'application/json' }) props.updateMetadata(editedMetadataFile) + console.log(editedMetadataFile) } useEffect(() => { @@ -169,9 +146,7 @@ export const MetadataModal = (props: MetadataModalProps) => { nameState.onChange(e.target.value)} /> descriptionState.onChange(e.target.value)} /> externalUrlState.onChange(e.target.value)} /> - animationUrlState.onChange(e.target.value)} /> youtubeUrlState.onChange(e.target.value)} /> - { const baseTokenURI = useCollectionStore().base_token_uri const [assetFilesArray, setAssetFilesArray] = useState([]) const [metadataFilesArray, setMetadataFilesArray] = useState([]) - const [updatedMetadataFilesArray, setUpdatedMetadataFilesArray] = useState([]) const [uploadMethod, setUploadMethod] = useState('new') const [uploadService, setUploadService] = useState('nft-storage') const [metadataFileArrayIndex, setMetadataFileArrayIndex] = useState(0) @@ -72,7 +71,6 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => { const selectAssets = (event: ChangeEvent) => { setAssetFilesArray([]) setMetadataFilesArray([]) - setUpdatedMetadataFilesArray([]) console.log(event.target.files) let reader: FileReader if (event.target.files === null) return @@ -94,7 +92,6 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => { const selectMetadata = (event: ChangeEvent) => { setMetadataFilesArray([]) - setUpdatedMetadataFilesArray([]) console.log(assetFilesArray) console.log(event.target.files) let reader: FileReader @@ -405,7 +402,6 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => { metadataFile={metadataFilesArray[metadataFileArrayIndex]} refresher={refreshMetadata} updateMetadata={updateMetadataFileArray} - updatedMetadataFile={updatedMetadataFilesArray[metadataFileArrayIndex]} /> diff --git a/pages/collections/create.tsx b/pages/collections/create.tsx index a1ef073..7fa2742 100644 --- a/pages/collections/create.tsx +++ b/pages/collections/create.tsx @@ -30,6 +30,8 @@ import { MINTER_CODE_ID, SG721_CODE_ID, WHITELIST_CODE_ID } from 'utils/constant import { withMetadata } from 'utils/layout' import { links } from 'utils/links' +import { getAssetType } from '../../utils/getAssetType' + const CollectionCreationPage: NextPage = () => { const wallet = useWallet() const { minter: minterContract, whitelist: whitelistContract } = useContracts() @@ -158,6 +160,12 @@ const CollectionCreationPage: NextPage = () => { reader = new FileReader() reader.onload = (e) => { const data: any = JSON.parse(e.target?.result as string) + if ( + getAssetType(uploadDetails.assetFiles[i].name) === 'audio' || + getAssetType(uploadDetails.assetFiles[i].name) === 'video' + ) { + data.animation_url = `ipfs://${assetUri}/${uploadDetails.assetFiles[i].name}` + } data.image = `ipfs://${assetUri}/${uploadDetails.assetFiles[i].name}` const metadataFileBlob = new Blob([JSON.stringify(data)], { type: 'application/json', diff --git a/utils/getAssetType.ts b/utils/getAssetType.ts index 427e1c1..e6b0312 100644 --- a/utils/getAssetType.ts +++ b/utils/getAssetType.ts @@ -4,7 +4,7 @@ export type AssetType = 'image' | 'audio' | 'video' | 'unknown' export const getAssetType = (assetFileName: string): AssetType => { const assetType = assetFileName?.split('.').pop() || 'unknown' - if (assetType === 'png' || assetType === 'jpg' || assetType === 'jpeg') return 'image' + if (assetType === 'png' || assetType === 'jpg' || assetType === 'jpeg' || assetType === 'svg') return 'image' if (assetType === 'mp3' || assetType === 'wav') return 'audio' if (assetType === 'mp4') return 'video' return 'unknown'