432 lines
17 KiB
TypeScript
432 lines
17 KiB
TypeScript
// eslint-disable-next-line eslint-comments/disable-enable-pair
|
|
/* eslint-disable @typescript-eslint/no-loop-func */
|
|
import clsx from 'clsx'
|
|
import { Alert } from 'components/Alert'
|
|
import { Anchor } from 'components/Anchor'
|
|
import { AssetsPreview } from 'components/AssetsPreview'
|
|
import { Conditional } from 'components/Conditional'
|
|
import { TextInput } from 'components/forms/FormInput'
|
|
import { useInputState } from 'components/forms/FormInput.hooks'
|
|
import { MetadataModal } from 'components/MetadataModal'
|
|
import type { ChangeEvent } from 'react'
|
|
import { useEffect, useState } from 'react'
|
|
import { toast } from 'react-hot-toast'
|
|
import type { UploadServiceType } from 'services/upload'
|
|
import { naturalCompare } from 'utils/sort'
|
|
|
|
export type UploadMethod = 'new' | 'existing'
|
|
|
|
interface UploadDetailsProps {
|
|
onChange: (value: UploadDetailsDataProps) => void
|
|
}
|
|
|
|
export interface UploadDetailsDataProps {
|
|
assetFiles: File[]
|
|
metadataFiles: File[]
|
|
uploadService: UploadServiceType
|
|
nftStorageApiKey?: string
|
|
pinataApiKey?: string
|
|
pinataSecretKey?: string
|
|
uploadMethod: UploadMethod
|
|
baseTokenURI?: string
|
|
imageUrl?: string
|
|
}
|
|
|
|
export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
|
|
const [assetFilesArray, setAssetFilesArray] = useState<File[]>([])
|
|
const [metadataFilesArray, setMetadataFilesArray] = useState<File[]>([])
|
|
const [uploadMethod, setUploadMethod] = useState<UploadMethod>('new')
|
|
const [uploadService, setUploadService] = useState<UploadServiceType>('nft-storage')
|
|
const [metadataFileArrayIndex, setMetadataFileArrayIndex] = useState(0)
|
|
const [refreshMetadata, setRefreshMetadata] = useState(false)
|
|
|
|
const nftStorageApiKeyState = useInputState({
|
|
id: 'nft-storage-api-key',
|
|
name: 'nftStorageApiKey',
|
|
title: 'NFT.Storage API Key',
|
|
placeholder: 'Enter NFT.Storage API Key',
|
|
defaultValue: '',
|
|
})
|
|
const pinataApiKeyState = useInputState({
|
|
id: 'pinata-api-key',
|
|
name: 'pinataApiKey',
|
|
title: 'Pinata API Key',
|
|
placeholder: 'Enter Pinata API Key',
|
|
defaultValue: '',
|
|
})
|
|
const pinataSecretKeyState = useInputState({
|
|
id: 'pinata-secret-key',
|
|
name: 'pinataSecretKey',
|
|
title: 'Pinata Secret Key',
|
|
placeholder: 'Enter Pinata Secret Key',
|
|
defaultValue: '',
|
|
})
|
|
|
|
const baseTokenUriState = useInputState({
|
|
id: 'baseTokenUri',
|
|
name: 'baseTokenUri',
|
|
title: 'Base Token URI',
|
|
placeholder: 'ipfs://',
|
|
defaultValue: '',
|
|
})
|
|
|
|
const coverImageUrlState = useInputState({
|
|
id: 'coverImageUrl',
|
|
name: 'coverImageUrl',
|
|
title: 'Cover Image URL',
|
|
placeholder: 'ipfs://',
|
|
defaultValue: '',
|
|
})
|
|
|
|
const selectAssets = (event: ChangeEvent<HTMLInputElement>) => {
|
|
setAssetFilesArray([])
|
|
setMetadataFilesArray([])
|
|
if (event.target.files === null) return
|
|
//sort the files
|
|
const sortedFiles = Array.from(event.target.files).sort((a, b) => naturalCompare(a.name, b.name))
|
|
//check if the sorted file names are in numerical order
|
|
const sortedFileNames = sortedFiles.map((file) => file.name.split('.')[0])
|
|
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.')
|
|
//clear the input
|
|
event.target.value = ''
|
|
return
|
|
}
|
|
}
|
|
let loadedFileCount = 0
|
|
const files: File[] = []
|
|
let reader: FileReader
|
|
for (let i = 0; i < event.target.files.length; i++) {
|
|
reader = new FileReader()
|
|
reader.onload = (e) => {
|
|
if (!e.target?.result) return toast.error('Error parsing file.')
|
|
if (!event.target.files) return toast.error('No files selected.')
|
|
const assetFile = new File([e.target.result], event.target.files[i].name, { type: 'image/jpg' })
|
|
files.push(assetFile)
|
|
}
|
|
reader.readAsArrayBuffer(event.target.files[i])
|
|
reader.onloadend = () => {
|
|
if (!event.target.files) return toast.error('No file selected.')
|
|
loadedFileCount++
|
|
if (loadedFileCount === event.target.files.length) {
|
|
setAssetFilesArray(files.sort((a, b) => naturalCompare(a.name, b.name)))
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
const selectMetadata = (event: ChangeEvent<HTMLInputElement>) => {
|
|
setMetadataFilesArray([])
|
|
if (event.target.files === null) return toast.error('No files selected.')
|
|
if (event.target.files.length !== assetFilesArray.length) {
|
|
event.target.value = ''
|
|
return toast.error('The number of metadata files should be equal to the number of asset files.')
|
|
}
|
|
//sort the files
|
|
const sortedFiles = Array.from(event.target.files).sort((a, b) => naturalCompare(a.name, b.name))
|
|
//check if the sorted file names are in numerical order
|
|
const sortedFileNames = sortedFiles.map((file) => file.name.split('.')[0])
|
|
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.')
|
|
//clear the input
|
|
event.target.value = ''
|
|
return
|
|
}
|
|
}
|
|
let loadedFileCount = 0
|
|
const files: File[] = []
|
|
let reader: FileReader
|
|
for (let i = 0; i < event.target.files.length; i++) {
|
|
reader = new FileReader()
|
|
reader.onload = async (e) => {
|
|
if (!e.target?.result) return toast.error('Error parsing file.')
|
|
if (!event.target.files) return toast.error('No files selected.')
|
|
const metadataFile = new File([e.target.result], event.target.files[i].name, { type: 'application/json' })
|
|
try {
|
|
const parsedMetadata = JSON.parse(await metadataFile.text())
|
|
if (!parsedMetadata || typeof parsedMetadata !== 'object') {
|
|
event.target.value = ''
|
|
setMetadataFilesArray([])
|
|
return toast.error(`Invalid metadata file: ${metadataFile.name}`)
|
|
}
|
|
} catch (error) {
|
|
event.target.value = ''
|
|
setMetadataFilesArray([])
|
|
return toast.error(`Invalid metadata file: ${metadataFile.name}`)
|
|
}
|
|
files.push(metadataFile)
|
|
}
|
|
reader.readAsText(event.target.files[i], 'utf8')
|
|
reader.onloadend = () => {
|
|
if (!event.target.files) return toast.error('No file selected.')
|
|
loadedFileCount++
|
|
if (loadedFileCount === event.target.files.length) {
|
|
setMetadataFilesArray(files.sort((a, b) => naturalCompare(a.name, b.name)))
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
const updateMetadataFileIndex = (index: number) => {
|
|
setMetadataFileArrayIndex(index)
|
|
setRefreshMetadata((prev) => !prev)
|
|
}
|
|
|
|
const updateMetadataFileArray = async (updatedMetadataFile: File) => {
|
|
metadataFilesArray[metadataFileArrayIndex] = updatedMetadataFile
|
|
console.log('Updated Metadata File:')
|
|
console.log(JSON.parse(await metadataFilesArray[metadataFileArrayIndex]?.text()))
|
|
}
|
|
|
|
useEffect(() => {
|
|
try {
|
|
const data: UploadDetailsDataProps = {
|
|
assetFiles: assetFilesArray,
|
|
metadataFiles: metadataFilesArray,
|
|
uploadService,
|
|
nftStorageApiKey: nftStorageApiKeyState.value,
|
|
pinataApiKey: pinataApiKeyState.value,
|
|
pinataSecretKey: pinataSecretKeyState.value,
|
|
uploadMethod,
|
|
baseTokenURI: baseTokenUriState.value,
|
|
imageUrl: coverImageUrlState.value,
|
|
}
|
|
onChange(data)
|
|
} catch (error: any) {
|
|
toast.error(error.message, { style: { maxWidth: 'none' } })
|
|
}
|
|
}, [
|
|
assetFilesArray,
|
|
metadataFilesArray,
|
|
uploadService,
|
|
nftStorageApiKeyState.value,
|
|
pinataApiKeyState.value,
|
|
pinataSecretKeyState.value,
|
|
uploadMethod,
|
|
baseTokenUriState.value,
|
|
coverImageUrlState.value,
|
|
])
|
|
|
|
useEffect(() => {
|
|
setAssetFilesArray([])
|
|
setMetadataFilesArray([])
|
|
baseTokenUriState.onChange('')
|
|
coverImageUrlState.onChange('')
|
|
}, [uploadMethod])
|
|
|
|
return (
|
|
<div className="justify-items-start mt-5 mb-3 rounded border border-2 border-white/20 flex-column">
|
|
<div className="flex justify-center">
|
|
<div className="mt-3 ml-4 font-bold form-check form-check-inline">
|
|
<input
|
|
checked={uploadMethod === 'new'}
|
|
className="peer sr-only"
|
|
id="inlineRadio2"
|
|
name="inlineRadioOptions2"
|
|
onClick={() => {
|
|
setUploadMethod('new')
|
|
}}
|
|
type="radio"
|
|
value="New"
|
|
/>
|
|
<label
|
|
className="inline-block py-1 px-2 text-gray peer-checked:text-white hover:text-white peer-checked:bg-black peer-checked:border-b-2 hover:border-b-2 peer-checked:border-plumbus hover:border-plumbus cursor-pointer form-check-label"
|
|
htmlFor="inlineRadio2"
|
|
>
|
|
Upload assets & metadata
|
|
</label>
|
|
</div>
|
|
<div className="mt-3 ml-2 font-bold form-check form-check-inline">
|
|
<input
|
|
checked={uploadMethod === 'existing'}
|
|
className="peer sr-only"
|
|
id="inlineRadio1"
|
|
name="inlineRadioOptions1"
|
|
onClick={() => {
|
|
setUploadMethod('existing')
|
|
}}
|
|
type="radio"
|
|
value="Existing"
|
|
/>
|
|
<label
|
|
className="inline-block py-1 px-2 text-gray peer-checked:text-white hover:text-white peer-checked:bg-black peer-checked:border-b-2 hover:border-b-2 peer-checked:border-plumbus hover:border-plumbus cursor-pointer form-check-label"
|
|
htmlFor="inlineRadio1"
|
|
>
|
|
Use an existing base URI
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-3 py-5 pb-8">
|
|
<Conditional test={uploadMethod === 'existing'}>
|
|
<div className="ml-3 flex-column">
|
|
<p className="mb-5 ml-5">
|
|
Though Stargaze's sg721 contract allows for off-chain metadata storage, it is recommended to use a
|
|
decentralized storage solution, such as IPFS. <br /> You may head over to{' '}
|
|
<Anchor className="font-bold text-plumbus hover:underline" href="https://nft.storage">
|
|
NFT.Storage
|
|
</Anchor>{' '}
|
|
or{' '}
|
|
<Anchor className="font-bold text-plumbus hover:underline" href="https://www.pinata.cloud/">
|
|
Pinata
|
|
</Anchor>{' '}
|
|
and upload your assets & metadata manually to get a base URI for your collection.
|
|
</p>
|
|
<div>
|
|
<TextInput {...baseTokenUriState} className="w-1/2" />
|
|
</div>
|
|
<div>
|
|
<TextInput {...coverImageUrlState} className="mt-2 w-1/2" />
|
|
</div>
|
|
</div>
|
|
</Conditional>
|
|
<Conditional test={uploadMethod === 'new'}>
|
|
<div>
|
|
<div className="flex flex-col items-center px-8 w-full">
|
|
<div className="flex justify-items-start mb-5 w-full font-bold">
|
|
<div className="form-check form-check-inline">
|
|
<input
|
|
checked={uploadService === 'nft-storage'}
|
|
className="peer sr-only"
|
|
id="inlineRadio3"
|
|
name="inlineRadioOptions3"
|
|
onClick={() => {
|
|
setUploadService('nft-storage')
|
|
}}
|
|
type="radio"
|
|
value="nft-storage"
|
|
/>
|
|
<label
|
|
className="inline-block py-1 px-2 text-gray peer-checked:text-white hover:text-white peer-checked:bg-black hover:rounded-sm peer-checked:border-b-2 hover:border-b-2 peer-checked:border-plumbus hover:border-plumbus cursor-pointer form-check-label"
|
|
htmlFor="inlineRadio3"
|
|
>
|
|
Upload using NFT.Storage
|
|
</label>
|
|
</div>
|
|
|
|
<div className="ml-2 form-check form-check-inline">
|
|
<input
|
|
checked={uploadService === 'pinata'}
|
|
className="peer sr-only"
|
|
id="inlineRadio4"
|
|
name="inlineRadioOptions4"
|
|
onClick={() => {
|
|
setUploadService('pinata')
|
|
}}
|
|
type="radio"
|
|
value="pinata"
|
|
/>
|
|
<label
|
|
className="inline-block py-1 px-2 text-gray peer-checked:text-white hover:text-white peer-checked:bg-black hover:rounded-sm peer-checked:border-b-2 hover:border-b-2 peer-checked:border-plumbus hover:border-plumbus cursor-pointer form-check-label"
|
|
htmlFor="inlineRadio4"
|
|
>
|
|
Upload using Pinata
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex w-full">
|
|
<Conditional test={uploadService === 'nft-storage'}>
|
|
<TextInput {...nftStorageApiKeyState} className="w-full" />
|
|
</Conditional>
|
|
<Conditional test={uploadService === 'pinata'}>
|
|
<TextInput {...pinataApiKeyState} className="w-full" />
|
|
<div className="w-[20px]" />
|
|
<TextInput {...pinataSecretKeyState} className="w-full" />
|
|
</Conditional>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-6">
|
|
<div className="grid grid-cols-2">
|
|
<div className="w-full">
|
|
<Conditional
|
|
test={
|
|
assetFilesArray.length > 0 &&
|
|
metadataFilesArray.length > 0 &&
|
|
assetFilesArray.length !== metadataFilesArray.length
|
|
}
|
|
>
|
|
<Alert className="mt-4 ml-8 w-3/4" type="warning">
|
|
The number of assets and metadata files should match.
|
|
</Alert>
|
|
</Conditional>
|
|
|
|
<div>
|
|
<label
|
|
className="block mt-5 mr-1 mb-1 ml-8 w-full font-bold text-white dark:text-gray-300"
|
|
htmlFor="assetFiles"
|
|
>
|
|
Asset Selection
|
|
</label>
|
|
<div
|
|
className={clsx(
|
|
'flex relative justify-center items-center mx-8 mt-2 space-y-4 w-full h-32',
|
|
'rounded border-2 border-white/20 border-dashed',
|
|
)}
|
|
>
|
|
<input
|
|
accept="image/*, audio/*, video/*"
|
|
className={clsx(
|
|
'file:py-2 file:px-4 file:mr-4 file:bg-plumbus-light file:rounded file:border-0 cursor-pointer',
|
|
'before:absolute before:inset-0 before:hover:bg-white/5 before:transition',
|
|
)}
|
|
id="assetFiles"
|
|
multiple
|
|
onChange={selectAssets}
|
|
type="file"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{assetFilesArray.length > 0 && (
|
|
<div>
|
|
<label
|
|
className="block mt-5 mr-1 mb-1 ml-8 w-full font-bold text-white dark:text-gray-300"
|
|
htmlFor="metadataFiles"
|
|
>
|
|
Metadata Selection
|
|
</label>
|
|
<div
|
|
className={clsx(
|
|
'flex relative justify-center items-center mx-8 mt-2 space-y-4 w-full h-32',
|
|
'rounded border-2 border-white/20 border-dashed',
|
|
)}
|
|
>
|
|
<input
|
|
accept="application/json"
|
|
className={clsx(
|
|
'file:py-2 file:px-4 file:mr-4 file:bg-plumbus-light file:rounded file:border-0 cursor-pointer',
|
|
'before:absolute before:inset-0 before:hover:bg-white/5 before:transition',
|
|
)}
|
|
id="metadataFiles"
|
|
multiple
|
|
onChange={selectMetadata}
|
|
type="file"
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<MetadataModal
|
|
assetFile={assetFilesArray[metadataFileArrayIndex]}
|
|
metadataFile={metadataFilesArray[metadataFileArrayIndex]}
|
|
refresher={refreshMetadata}
|
|
updateMetadata={updateMetadataFileArray}
|
|
/>
|
|
</div>
|
|
|
|
<Conditional test={assetFilesArray.length > 0}>
|
|
<AssetsPreview assetFilesArray={assetFilesArray} updateMetadataFileIndex={updateMetadataFileIndex} />
|
|
</Conditional>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Conditional>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|