diff --git a/components/collections/creation/UploadDetails.tsx b/components/collections/creation/UploadDetails.tsx index a639031..8d78746 100644 --- a/components/collections/creation/UploadDetails.tsx +++ b/components/collections/creation/UploadDetails.tsx @@ -134,6 +134,7 @@ export const UploadDetails = ({ for (let i = 0; i < sortedFileNames.length; i++) { if (isNaN(Number(sortedFileNames[i])) || parseInt(sortedFileNames[i]) !== i + 1) { toast.error('The file names should be in numerical order starting from 1.') + setThumbnailCompatibleAssetFileNames([]) addLogItem({ id: uid(), message: 'The file names should be in numerical order starting from 1.', diff --git a/components/openEdition/OpenEditionMinterCreator.tsx b/components/openEdition/OpenEditionMinterCreator.tsx index 9f2e620..2375c07 100644 --- a/components/openEdition/OpenEditionMinterCreator.tsx +++ b/components/openEdition/OpenEditionMinterCreator.tsx @@ -28,6 +28,7 @@ import { SG721_OPEN_EDITION_CODE_ID, SG721_OPEN_EDITION_UPDATABLE_CODE_ID, } from 'utils/constants' +import type { AssetType } from 'utils/getAssetType' import { getAssetType } from 'utils/getAssetType' import { isValidAddress } from 'utils/isValidAddress' import { checkTokenUri } from 'utils/isValidTokenUri' @@ -116,6 +117,9 @@ export const OpenEditionMinterCreator = ({ const [openEditionMinterContractAddress, setOpenEditionMinterContractAddress] = useState(null) const [sg721ContractAddress, setSg721ContractAddress] = useState(null) const [transactionHash, setTransactionHash] = useState(null) + const [thumbnailImageUri, setThumbnailImageUri] = useState(undefined) + + const thumbnailCompatibleAssetTypes: AssetType[] = ['video', 'audio', 'html'] const factoryAddressForSelectedDenom = openEditionMinterList.find((minter) => minter.supportedToken === mintTokenFromFactory && minter.updatable === false) @@ -436,8 +440,23 @@ export const OpenEditionMinterCreator = ({ const coverImageUriWithBase = `ipfs://${coverImageUri}/${(collectionDetails?.imageFile as File[])[0].name}` setCoverImageUrl(coverImageUriWithBase) + let thumbnailUri: string | undefined + if (imageUploadDetails.isThumbnailCompatible && imageUploadDetails.thumbnailFile) + thumbnailUri = await upload( + [imageUploadDetails.thumbnailFile] as File[], + imageUploadDetails.uploadService, + 'thumbnail', + imageUploadDetails.nftStorageApiKey as string, + imageUploadDetails.pinataApiKey as string, + imageUploadDetails.pinataSecretKey as string, + ) + const thumbnailUriWithBase = thumbnailUri + ? `ipfs://${thumbnailUri}/${(imageUploadDetails.thumbnailFile as File).name}` + : undefined + setThumbnailImageUri(thumbnailUriWithBase) + setUploading(false) - await instantiateOpenEditionMinter(imageUriWithBase, coverImageUriWithBase) + await instantiateOpenEditionMinter(imageUriWithBase, coverImageUriWithBase, thumbnailUriWithBase) } else if (imageUploadDetails?.uploadMethod === 'existing') { setTokenImageUri(imageUploadDetails.imageUrl as string) setCoverImageUrl(imageUploadDetails.coverImageUrl as string) @@ -527,7 +546,7 @@ export const OpenEditionMinterCreator = ({ }) } - const instantiateOpenEditionMinter = async (uri: string, coverImageUri: string) => { + const instantiateOpenEditionMinter = async (uri: string, coverImageUri: string, thumbnailUri?: string) => { if (!wallet.initialized) throw new Error('Wallet not connected') if (!openEditionFactoryContract) throw new Error('Contract not found') if (!openEditionMinterContract) throw new Error('Contract not found') @@ -549,7 +568,10 @@ export const OpenEditionMinterCreator = ({ extension: metadataStorageMethod === 'on-chain' ? { - image: uri, + image: + imageUploadDetails?.isThumbnailCompatible && imageUploadDetails.thumbnailFile + ? thumbnailUri + : uri, name: onChainMetadataInputDetails?.name, description: onChainMetadataInputDetails?.description?.replaceAll('\\n', '\n'), attributes: onChainMetadataInputDetails?.attributes, @@ -557,7 +579,7 @@ export const OpenEditionMinterCreator = ({ animation_url: imageUploadDetails?.uploadMethod === 'existing' ? onChainMetadataInputDetails?.animation_url - : getAssetType(imageUploadDetails?.assetFile?.name as string) === 'video' + : imageUploadDetails?.isThumbnailCompatible ? uri : undefined, youtube_url: onChainMetadataInputDetails?.youtube_url, @@ -677,7 +699,7 @@ export const OpenEditionMinterCreator = ({ return (
{/* TODO: Cancel once we're able to index on-chain metadata */} - +