Upload details component styling (#23)
* Add styling to upload details * Refactor image preview
This commit is contained in:
Arda Nakışçı
GitHub
parent
e89fcddc2f
commit
c62438d753
@ -2,7 +2,8 @@ import clsx from 'clsx'
|
|||||||
import { Alert } from 'components/Alert'
|
import { Alert } from 'components/Alert'
|
||||||
import Anchor from 'components/Anchor'
|
import Anchor from 'components/Anchor'
|
||||||
import { Conditional } from 'components/Conditional'
|
import { Conditional } from 'components/Conditional'
|
||||||
import { StyledInput } from 'components/forms/StyledInput'
|
import { TextInput } from 'components/forms/FormInput'
|
||||||
|
import { useInputState } from 'components/forms/FormInput.hooks'
|
||||||
import { MetadataModal } from 'components/MetadataModal'
|
import { MetadataModal } from 'components/MetadataModal'
|
||||||
import { setBaseTokenUri, setImage, useCollectionStore } from 'contexts/collection'
|
import { setBaseTokenUri, setImage, useCollectionStore } from 'contexts/collection'
|
||||||
import type { ChangeEvent } from 'react'
|
import type { ChangeEvent } from 'react'
|
||||||
@ -35,15 +36,30 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
|
|||||||
const [uploadMethod, setUploadMethod] = useState<UploadMethod>('new')
|
const [uploadMethod, setUploadMethod] = useState<UploadMethod>('new')
|
||||||
const [uploadService, setUploadService] = useState<UploadServiceType>('nft-storage')
|
const [uploadService, setUploadService] = useState<UploadServiceType>('nft-storage')
|
||||||
const [metadataFileArrayIndex, setMetadataFileArrayIndex] = useState(0)
|
const [metadataFileArrayIndex, setMetadataFileArrayIndex] = useState(0)
|
||||||
|
|
||||||
const [refreshMetadata, setRefreshMetadata] = useState(false)
|
const [refreshMetadata, setRefreshMetadata] = useState(false)
|
||||||
const [nftStorageApiKey, setNftStorageApiKey] = useState(
|
|
||||||
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJkaWQ6ZXRocjoweDJBODk5OGI4ZkE2YTM1NzMyYmMxQTRDQzNhOUU2M0Y2NUM3ZjA1RWIiLCJpc3MiOiJuZnQtc3RvcmFnZSIsImlhdCI6MTY1NTE5MTcwNDQ2MiwibmFtZSI6IlRlc3QifQ.IbdV_26bkPHSdd81sxox5AoG-5a4CCEY4aCrdbCXwAE',
|
const nftStorageApiKeyState = useInputState({
|
||||||
)
|
id: 'nft-storage-api-key',
|
||||||
const [pinataApiKey, setPinataApiKey] = useState('c8c2ea440c09ee8fa639')
|
name: 'nftStorageApiKey',
|
||||||
const [pinataSecretKey, setPinataSecretKey] = useState(
|
title: 'NFT Storage API Key',
|
||||||
'9d6f42dc01eaab15f52eac8f36cc4f0ee4184944cb3cdbcda229d06ecf877ee7',
|
placeholder: '...',
|
||||||
)
|
defaultValue:
|
||||||
|
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJkaWQ6ZXRocjoweDJBODk5OGI4ZkE2YTM1NzMyYmMxQTRDQzNhOUU2M0Y2NUM3ZjA1RWIiLCJpc3MiOiJuZnQtc3RvcmFnZSIsImlhdCI6MTY1NTE5MTcwNDQ2MiwibmFtZSI6IlRlc3QifQ.IbdV_26bkPHSdd81sxox5AoG-5a4CCEY4aCrdbCXwAE',
|
||||||
|
})
|
||||||
|
const pinataApiKeyState = useInputState({
|
||||||
|
id: 'pinata-api-key',
|
||||||
|
name: 'pinataApiKey',
|
||||||
|
title: 'Pinata API Key',
|
||||||
|
placeholder: '...',
|
||||||
|
defaultValue: 'c8c2ea440c09ee8fa639',
|
||||||
|
})
|
||||||
|
const pinataSecretKeyState = useInputState({
|
||||||
|
id: 'pinata-secret-key',
|
||||||
|
name: 'pinataSecretKey',
|
||||||
|
title: 'Pinata Secret Key',
|
||||||
|
placeholder: '...',
|
||||||
|
defaultValue: '9d6f42dc01eaab15f52eac8f36cc4f0ee4184944cb3cdbcda229d06ecf877ee7',
|
||||||
|
})
|
||||||
|
|
||||||
const handleChangeBaseTokenUri = (event: { target: { value: React.SetStateAction<string> } }) => {
|
const handleChangeBaseTokenUri = (event: { target: { value: React.SetStateAction<string> } }) => {
|
||||||
setBaseTokenUri(event.target.value.toString())
|
setBaseTokenUri(event.target.value.toString())
|
||||||
@ -130,9 +146,9 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
|
|||||||
assetFiles: assetFilesArray,
|
assetFiles: assetFilesArray,
|
||||||
metadataFiles: metadataFilesArray,
|
metadataFiles: metadataFilesArray,
|
||||||
uploadService,
|
uploadService,
|
||||||
nftStorageApiKey,
|
nftStorageApiKey: nftStorageApiKeyState.value,
|
||||||
pinataApiKey,
|
pinataApiKey: pinataApiKeyState.value,
|
||||||
pinataSecretKey,
|
pinataSecretKey: pinataSecretKeyState.value,
|
||||||
}
|
}
|
||||||
onChange(data)
|
onChange(data)
|
||||||
} catch (error: any) {
|
} catch (error: any) {
|
||||||
@ -142,40 +158,43 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<div className="justify-items-start mt-5 mb-3 ml-3 flex-column">
|
<div className="justify-items-start mt-5 mb-3 rounded border border-2 border-white/20 flex-column">
|
||||||
<div className="mt-3 ml-4 form-check form-check-inline">
|
<div className="flex justify-center">
|
||||||
<input
|
<div className="mt-3 ml-4 font-bold form-check form-check-inline">
|
||||||
checked={uploadMethod === 'existing'}
|
<input
|
||||||
className="float-none mr-2 mb-1 w-4 h-4 align-middle bg-white checked:bg-stargaze bg-center bg-no-repeat bg-contain rounded-full border border-gray-300 checked:border-white focus:outline-none transition duration-200 appearance-none cursor-pointer form-check-input"
|
checked={uploadMethod === 'existing'}
|
||||||
id="inlineRadio1"
|
className="float-none mr-2 mb-1 w-4 h-4 align-middle bg-white checked:bg-stargaze bg-center bg-no-repeat bg-contain rounded-full border border-gray-300 checked:border-white focus:outline-none transition duration-200 appearance-none cursor-pointer form-check-input"
|
||||||
name="inlineRadioOptions1"
|
id="inlineRadio1"
|
||||||
onClick={() => {
|
name="inlineRadioOptions1"
|
||||||
setUploadMethod('existing')
|
onClick={() => {
|
||||||
}}
|
setUploadMethod('existing')
|
||||||
type="radio"
|
}}
|
||||||
value="Existing"
|
type="radio"
|
||||||
/>
|
value="Existing"
|
||||||
<label className="inline-block text-white cursor-pointer form-check-label" htmlFor="inlineRadio1">
|
/>
|
||||||
Use an existing URI
|
<label className="inline-block text-white cursor-pointer form-check-label" htmlFor="inlineRadio1">
|
||||||
</label>
|
Use an existing base URI
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-3 ml-4 form-check form-check-inline">
|
||||||
|
<input
|
||||||
|
checked={uploadMethod === 'new'}
|
||||||
|
className="float-none mr-2 mb-1 w-4 h-4 align-middle bg-white checked:bg-stargaze bg-center bg-no-repeat bg-contain rounded-full border border-gray-300 checked:border-white focus:outline-none transition duration-200 appearance-none cursor-pointer form-check-input"
|
||||||
|
id="inlineRadio2"
|
||||||
|
name="inlineRadioOptions2"
|
||||||
|
onClick={() => {
|
||||||
|
setUploadMethod('new')
|
||||||
|
}}
|
||||||
|
type="radio"
|
||||||
|
value="New"
|
||||||
|
/>
|
||||||
|
<label className="inline-block text-white cursor-pointer form-check-label" htmlFor="inlineRadio2">
|
||||||
|
Upload assets & metadata
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="mt-3 ml-4 form-check form-check-inline">
|
|
||||||
<input
|
|
||||||
checked={uploadMethod === 'new'}
|
|
||||||
className="float-none mr-2 mb-1 w-4 h-4 align-middle bg-white checked:bg-stargaze bg-center bg-no-repeat bg-contain rounded-full border border-gray-300 checked:border-white focus:outline-none transition duration-200 appearance-none cursor-pointer form-check-input"
|
|
||||||
id="inlineRadio2"
|
|
||||||
name="inlineRadioOptions2"
|
|
||||||
onClick={() => {
|
|
||||||
setUploadMethod('new')
|
|
||||||
}}
|
|
||||||
type="radio"
|
|
||||||
value="New"
|
|
||||||
/>
|
|
||||||
<label className="inline-block text-white cursor-pointer form-check-label" htmlFor="inlineRadio2">
|
|
||||||
Upload assets & metadata
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
{baseTokenURI && (
|
{baseTokenURI && (
|
||||||
<Alert className="mt-5" type="info">
|
<Alert className="mt-5" type="info">
|
||||||
<a href={baseTokenURI} rel="noreferrer" target="_blank">
|
<a href={baseTokenURI} rel="noreferrer" target="_blank">
|
||||||
@ -183,405 +202,239 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
|
|||||||
</a>
|
</a>
|
||||||
</Alert>
|
</Alert>
|
||||||
)}
|
)}
|
||||||
</div>
|
|
||||||
|
|
||||||
<hr className="border-white/20" />
|
<div className="p-3 py-5 pb-8">
|
||||||
|
<Conditional test={uploadMethod === 'existing'}>
|
||||||
{uploadMethod === 'existing' && (
|
<div className="ml-3 flex-column">
|
||||||
<div className="ml-3 flex-column">
|
<p className="mb-5 ml-5">
|
||||||
<p className="my-3 ml-5">
|
Though Stargaze's sg721 contract allows for off-chain metadata storage, it is recommended to use a
|
||||||
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{' '}
|
||||||
decentralized storage solution, such as IPFS. <br /> You may head over to{' '}
|
<Anchor className="font-bold text-plumbus hover:underline" href="https://nft.storage">
|
||||||
<Anchor className="font-bold text-plumbus hover:underline" href="https://nft.storage">
|
NFT Storage
|
||||||
NFT Storage
|
</Anchor>{' '}
|
||||||
</Anchor>{' '}
|
or{' '}
|
||||||
or{' '}
|
<Anchor className="font-bold text-plumbus hover:underline" href="https://www.pinata.cloud/">
|
||||||
<Anchor className="font-bold text-plumbus hover:underline" href="https://www.pinata.cloud/">
|
Pinata
|
||||||
Pinata
|
</Anchor>{' '}
|
||||||
</Anchor>{' '}
|
and upload your assets & metadata manually to get a base URI for your collection.
|
||||||
and upload your assets & metadata manually to get a base URI for your collection.
|
</p>
|
||||||
</p>
|
<div>
|
||||||
<div>
|
<label className="block mr-1 mb-1 ml-5 font-bold text-white dark:text-gray-300" htmlFor="coverImage">
|
||||||
<label className="block mr-1 mb-1 ml-5 font-bold text-white dark:text-gray-300" htmlFor="coverImage">
|
Collection Cover Image
|
||||||
Collection Cover Image
|
</label>
|
||||||
</label>
|
<input
|
||||||
<input
|
className="py-2 px-1 mx-5 mt-2 mb-2 w-1/2 bg-white/10 rounded border-2 border-white/20 focus:ring
|
||||||
className="py-2 px-1 mx-5 mt-2 mb-2 w-1/2 bg-white/10 rounded border-2 border-white/20 focus:ring
|
|
||||||
focus:ring-plumbus-20
|
focus:ring-plumbus-20
|
||||||
form-input, placeholder:text-white/50,"
|
form-input, placeholder:text-white/50,"
|
||||||
id="coverImage"
|
id="coverImage"
|
||||||
onChange={handleChangeImage}
|
onChange={handleChangeImage}
|
||||||
placeholder="ipfs://bafybeigi3bwpvyvsmnbj46ra4hyffcxdeaj6ntfk5jpic5mx27x6ih2qvq/images/1.png"
|
placeholder="ipfs://bafybeigi3bwpvyvsmnbj46ra4hyffcxdeaj6ntfk5jpic5mx27x6ih2qvq/images/1.png"
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label className="block mt-3 mr-1 mb-1 ml-5 font-bold text-white dark:text-gray-300" htmlFor="baseTokenURI">
|
|
||||||
Base Token URI
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
className="py-2 px-1 mx-5 mt-2 mb-2 w-1/2 bg-white/10 rounded border-2 border-white/20 focus:ring
|
|
||||||
focus:ring-plumbus-20
|
|
||||||
form-input, placeholder:text-white/50,"
|
|
||||||
id="baseTokenURI"
|
|
||||||
onChange={handleChangeBaseTokenUri}
|
|
||||||
placeholder="ipfs://..."
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{uploadMethod === 'new' && (
|
|
||||||
<div>
|
|
||||||
<div className="justify-items-start mt-5 mb-3 ml-3 flex-column">
|
|
||||||
<div className="mt-3 ml-4 form-check form-check-inline">
|
|
||||||
<input
|
|
||||||
checked={uploadService === 'nft-storage'}
|
|
||||||
className="float-none mr-2 mb-1 w-4 h-4 align-middle bg-white checked:bg-stargaze bg-center bg-no-repeat bg-contain rounded-full border border-gray-300 checked:border-white focus:outline-none transition duration-200 appearance-none cursor-pointer form-check-input"
|
|
||||||
id="inlineRadio3"
|
|
||||||
name="inlineRadioOptions3"
|
|
||||||
onClick={() => {
|
|
||||||
setUploadService('nft-storage')
|
|
||||||
}}
|
|
||||||
type="radio"
|
|
||||||
value="nft-storage"
|
|
||||||
/>
|
|
||||||
<label className="inline-block text-white cursor-pointer form-check-label" htmlFor="inlineRadio3">
|
|
||||||
Upload using NFT.Storage
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mt-3 ml-4 form-check form-check-inline">
|
|
||||||
<input
|
|
||||||
checked={uploadService === 'pinata'}
|
|
||||||
className="float-none mr-2 mb-1 w-4 h-4 align-middle bg-white checked:bg-stargaze bg-center bg-no-repeat bg-contain rounded-full border border-gray-300 checked:border-white focus:outline-none transition duration-200 appearance-none cursor-pointer form-check-input"
|
|
||||||
id="inlineRadio4"
|
|
||||||
name="inlineRadioOptions4"
|
|
||||||
onClick={() => {
|
|
||||||
setUploadService('pinata')
|
|
||||||
}}
|
|
||||||
type="radio"
|
|
||||||
value="pinata"
|
|
||||||
/>
|
|
||||||
<label className="inline-block text-white cursor-pointer form-check-label" htmlFor="inlineRadio4">
|
|
||||||
Upload using Pinata
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex flex-col ml-8 w-1/2">
|
|
||||||
<Conditional test={uploadService === 'nft-storage'}>
|
|
||||||
<label htmlFor="nft_storage_api_key">NFT.Storage API Key</label>
|
|
||||||
<StyledInput
|
|
||||||
id="nft_storage_api_key"
|
|
||||||
onChange={(e) => setNftStorageApiKey(e.target.value)}
|
|
||||||
value={nftStorageApiKey}
|
|
||||||
/>
|
|
||||||
</Conditional>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col ml-8 w-1/2">
|
|
||||||
<Conditional test={uploadService === 'pinata'}>
|
|
||||||
<label htmlFor="pinata-api_key">Pinata API Key</label>
|
|
||||||
<StyledInput
|
|
||||||
className="flex mb-2 w-1/2"
|
|
||||||
id="pinata_api_key"
|
|
||||||
onChange={(e) => setPinataApiKey(e.target.value)}
|
|
||||||
value={pinataApiKey}
|
|
||||||
/>
|
|
||||||
<label htmlFor="pinata_secret_key">Pinata Secret Key</label>
|
|
||||||
<StyledInput
|
|
||||||
className="flex"
|
|
||||||
id="pinata_secret_key"
|
|
||||||
onChange={(e) => setPinataSecretKey(e.target.value)}
|
|
||||||
value={pinataSecretKey}
|
|
||||||
/>
|
|
||||||
</Conditional>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<div className="grid grid-cols-2">
|
|
||||||
<div className="w-full">
|
|
||||||
<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=""
|
|
||||||
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>
|
|
||||||
)}
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<MetadataModal
|
|
||||||
assetFile={assetFilesArray[metadataFileArrayIndex]}
|
|
||||||
metadataFile={metadataFilesArray[metadataFileArrayIndex]}
|
|
||||||
refresher={refreshMetadata}
|
|
||||||
updateMetadata={updateMetadataFileArray}
|
|
||||||
updatedMetadataFile={updatedMetadataFilesArray[metadataFileArrayIndex]}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
{assetFilesArray.length > 0 && (
|
<div>
|
||||||
<div className="mt-2 mr-10 ml-20 w-4/5 h-96 border-2 border-dashed carousel carousel-vertical rounded-box">
|
<label
|
||||||
{assetFilesArray.map((assetSource, index) => (
|
className="block mt-3 mr-1 mb-1 ml-5 font-bold text-white dark:text-gray-300"
|
||||||
<div key={`carousel-item-${index}`} className="w-full carousel-item h-1/8">
|
htmlFor="baseTokenURI"
|
||||||
<div className="grid grid-cols-4 col-auto">
|
>
|
||||||
<Conditional test={assetFilesArray.length > 4 * index}>
|
Base Token URI
|
||||||
<button
|
</label>
|
||||||
key={4 * index}
|
<input
|
||||||
className="relative p-0 w-full h-full bg-transparent hover:bg-transparent border-0 btn modal-button"
|
className="py-2 px-1 mx-5 mt-2 mb-2 w-1/2 bg-white/10 rounded border-2 border-white/20 focus:ring
|
||||||
onClick={() => {
|
focus:ring-plumbus-20
|
||||||
updateMetadataFileIndex(4 * index)
|
form-input, placeholder:text-white/50,"
|
||||||
}}
|
id="baseTokenURI"
|
||||||
type="button"
|
onChange={handleChangeBaseTokenUri}
|
||||||
>
|
placeholder="ipfs://..."
|
||||||
<label
|
/>
|
||||||
className="relative p-0 w-full h-full bg-transparent hover:bg-transparent border-0 btn modal-button"
|
</div>
|
||||||
htmlFor="my-modal-4"
|
</div>
|
||||||
>
|
</Conditional>
|
||||||
{getAssetType(assetFilesArray[4 * index]?.name) === 'audio' && (
|
<Conditional test={uploadMethod === 'new'}>
|
||||||
<div className="flex relative flex-col items-center mt-2 ml-2">
|
<div>
|
||||||
<img
|
<div className="flex flex-col items-center px-8 w-full">
|
||||||
key={`audio-${4 * index}`}
|
<div className="flex justify-items-start mb-5 w-full font-bold">
|
||||||
alt="audio_icon"
|
<div className="form-check form-check-inline">
|
||||||
className="relative mb-2 ml-1 w-6 h-6 thumbnail"
|
<input
|
||||||
src="/audio.png"
|
checked={uploadService === 'nft-storage'}
|
||||||
/>
|
className="float-none mr-2 mb-1 w-4 h-4 align-middle bg-white checked:bg-stargaze bg-center bg-no-repeat bg-contain rounded-full border border-gray-300 checked:border-white focus:outline-none transition duration-200 appearance-none cursor-pointer form-check-input"
|
||||||
<span className="relative self-center">{assetFilesArray[4 * index]?.name}</span>
|
id="inlineRadio3"
|
||||||
</div>
|
name="inlineRadioOptions3"
|
||||||
)}
|
onClick={() => {
|
||||||
{getAssetType(assetFilesArray[4 * index]?.name) === 'video' && (
|
setUploadService('nft-storage')
|
||||||
<video
|
}}
|
||||||
id="video"
|
type="radio"
|
||||||
muted
|
value="nft-storage"
|
||||||
onMouseEnter={(e) => e.currentTarget.play()}
|
/>
|
||||||
onMouseLeave={(e) => e.currentTarget.pause()}
|
<label className="inline-block text-white cursor-pointer form-check-label" htmlFor="inlineRadio3">
|
||||||
src={URL.createObjectURL(assetFilesArray[4 * index])}
|
Upload using NFT.Storage
|
||||||
/>
|
</label>
|
||||||
)}
|
</div>
|
||||||
|
|
||||||
{getAssetType(assetFilesArray[4 * index]?.name) === 'image' && (
|
<div className="ml-4 form-check form-check-inline">
|
||||||
<img
|
<input
|
||||||
key={`image-${4 * index}`}
|
checked={uploadService === 'pinata'}
|
||||||
alt="asset"
|
className="float-none mr-2 mb-1 w-4 h-4 align-middle bg-white checked:bg-stargaze bg-center bg-no-repeat bg-contain rounded-full border border-gray-300 checked:border-white focus:outline-none transition duration-200 appearance-none cursor-pointer form-check-input"
|
||||||
className="px-1 my-1 thumbnail"
|
id="inlineRadio4"
|
||||||
src={
|
name="inlineRadioOptions4"
|
||||||
assetFilesArray[4 * index] ? URL.createObjectURL(assetFilesArray[4 * index]) : ''
|
onClick={() => {
|
||||||
}
|
setUploadService('pinata')
|
||||||
/>
|
}}
|
||||||
)}
|
type="radio"
|
||||||
</label>
|
value="pinata"
|
||||||
</button>
|
/>
|
||||||
</Conditional>
|
<label className="inline-block text-white cursor-pointer form-check-label" htmlFor="inlineRadio4">
|
||||||
<Conditional test={assetFilesArray.length > 4 * index + 1}>
|
Upload using Pinata
|
||||||
<button
|
</label>
|
||||||
key={4 * index + 1}
|
</div>
|
||||||
className="relative p-0 w-full h-full bg-transparent hover:bg-transparent border-0 btn modal-button"
|
</div>
|
||||||
onClick={() => {
|
|
||||||
updateMetadataFileIndex(4 * index + 1)
|
|
||||||
}}
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<label
|
|
||||||
className="relative p-0 w-full h-full bg-transparent hover:bg-transparent border-0 btn modal-button"
|
|
||||||
htmlFor="my-modal-4"
|
|
||||||
>
|
|
||||||
{getAssetType(assetFilesArray[4 * index + 1]?.name) === 'audio' && (
|
|
||||||
<div className="flex relative flex-col items-center mt-2 ml-2">
|
|
||||||
<img
|
|
||||||
key={`audio-${4 * index + 1}`}
|
|
||||||
alt="audio_icon"
|
|
||||||
className="relative mb-2 ml-1 w-6 h-6 thumbnail"
|
|
||||||
src="/audio.png"
|
|
||||||
/>
|
|
||||||
<span className="relative self-center">{assetFilesArray[4 * index + 1]?.name}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{getAssetType(assetFilesArray[4 * index + 1]?.name) === 'video' && (
|
|
||||||
<video
|
|
||||||
id="video"
|
|
||||||
muted
|
|
||||||
onMouseEnter={(e) => e.currentTarget.play()}
|
|
||||||
onMouseLeave={(e) => e.currentTarget.pause()}
|
|
||||||
src={URL.createObjectURL(assetFilesArray[4 * index + 1])}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{getAssetType(assetFilesArray[4 * index + 1]?.name) === 'image' && (
|
<div className="flex w-full">
|
||||||
<img
|
<Conditional test={uploadService === 'nft-storage'}>
|
||||||
key={`image-${4 * index + 1}`}
|
<TextInput {...nftStorageApiKeyState} className="w-full" />
|
||||||
alt="asset"
|
</Conditional>
|
||||||
className="px-1 my-1 thumbnail"
|
<Conditional test={uploadService === 'pinata'}>
|
||||||
src={
|
<TextInput {...pinataApiKeyState} className="w-full" />
|
||||||
assetFilesArray[4 * index + 1]
|
<div className="w-[20px]" />
|
||||||
? URL.createObjectURL(assetFilesArray[4 * index + 1])
|
<TextInput {...pinataSecretKeyState} className="w-full" />
|
||||||
: ''
|
</Conditional>
|
||||||
}
|
</div>
|
||||||
/>
|
</div>
|
||||||
)}
|
|
||||||
</label>
|
|
||||||
</button>
|
|
||||||
</Conditional>
|
|
||||||
<Conditional test={assetFilesArray.length > 4 * index + 2}>
|
|
||||||
<button
|
|
||||||
key={4 * index + 2}
|
|
||||||
className="relative p-0 w-full h-full bg-transparent hover:bg-transparent border-0 btn modal-button"
|
|
||||||
onClick={() => {
|
|
||||||
updateMetadataFileIndex(4 * index + 2)
|
|
||||||
}}
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<label
|
|
||||||
className="relative p-0 w-full h-full bg-transparent hover:bg-transparent border-0 btn modal-button"
|
|
||||||
htmlFor="my-modal-4"
|
|
||||||
>
|
|
||||||
{getAssetType(assetFilesArray[4 * index + 2]?.name) === 'audio' && (
|
|
||||||
<div className="flex relative flex-col items-center mt-2 ml-2">
|
|
||||||
<img
|
|
||||||
key={`audio-${4 * index + 2}`}
|
|
||||||
alt="audio_icon"
|
|
||||||
className="relative mb-2 ml-1 w-6 h-6 thumbnail"
|
|
||||||
src="/audio.png"
|
|
||||||
/>
|
|
||||||
<span className="relative self-center">{assetFilesArray[4 * index + 2]?.name}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{getAssetType(assetFilesArray[4 * index + 2]?.name) === 'video' && (
|
|
||||||
<video
|
|
||||||
id="video"
|
|
||||||
muted
|
|
||||||
onMouseEnter={(e) => e.currentTarget.play()}
|
|
||||||
onMouseLeave={(e) => e.currentTarget.pause()}
|
|
||||||
src={URL.createObjectURL(assetFilesArray[4 * index + 2])}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{getAssetType(assetFilesArray[4 * index + 2]?.name) === 'image' && (
|
<div className="mt-6">
|
||||||
<img
|
<div className="grid grid-cols-2">
|
||||||
key={`image-${4 * index + 2}`}
|
<div className="w-full">
|
||||||
alt="asset"
|
<Conditional
|
||||||
className="px-1 my-1 thumbnail"
|
test={
|
||||||
src={
|
assetFilesArray.length > 0 &&
|
||||||
assetFilesArray[4 * index + 2]
|
metadataFilesArray.length > 0 &&
|
||||||
? URL.createObjectURL(assetFilesArray[4 * index + 2])
|
assetFilesArray.length !== metadataFilesArray.length
|
||||||
: ''
|
}
|
||||||
}
|
>
|
||||||
/>
|
<Alert className="mt-4 ml-8 w-3/4" type="warning">
|
||||||
)}
|
The number of assets and metadata files should match.
|
||||||
</label>
|
</Alert>
|
||||||
</button>
|
</Conditional>
|
||||||
</Conditional>
|
|
||||||
<Conditional test={assetFilesArray.length > 4 * index + 3}>
|
|
||||||
<button
|
|
||||||
key={4 * index + 3}
|
|
||||||
className="relative p-0 w-full h-full bg-transparent hover:bg-transparent border-0 btn modal-button"
|
|
||||||
onClick={() => {
|
|
||||||
updateMetadataFileIndex(4 * index + 3)
|
|
||||||
}}
|
|
||||||
type="button"
|
|
||||||
>
|
|
||||||
<label
|
|
||||||
className="relative p-0 w-full h-full bg-transparent hover:bg-transparent border-0 btn modal-button"
|
|
||||||
htmlFor="my-modal-4"
|
|
||||||
>
|
|
||||||
{getAssetType(assetFilesArray[4 * index + 3]?.name) === 'audio' && (
|
|
||||||
<div className="flex relative flex-col items-center mt-2 ml-2">
|
|
||||||
<img
|
|
||||||
key={`audio-${4 * index + 3}`}
|
|
||||||
alt="audio_icon"
|
|
||||||
className="relative mb-2 ml-1 w-6 h-6 thumbnail"
|
|
||||||
src="/audio.png"
|
|
||||||
/>
|
|
||||||
<span className="relative self-center">{assetFilesArray[4 * index + 3]?.name}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{getAssetType(assetFilesArray[4 * index + 3]?.name) === 'video' && (
|
|
||||||
<video
|
|
||||||
id="video"
|
|
||||||
muted
|
|
||||||
onMouseEnter={(e) => e.currentTarget.play()}
|
|
||||||
onMouseLeave={(e) => e.currentTarget.pause()}
|
|
||||||
src={URL.createObjectURL(assetFilesArray[4 * index + 3])}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{getAssetType(assetFilesArray[4 * index + 3]?.name) === 'image' && (
|
<div>
|
||||||
<img
|
<label
|
||||||
key={`image-${4 * index + 3}`}
|
className="block mt-5 mr-1 mb-1 ml-8 w-full font-bold text-white dark:text-gray-300"
|
||||||
alt="asset"
|
htmlFor="assetFiles"
|
||||||
className="px-1 my-1 thumbnail"
|
>
|
||||||
src={
|
Asset Selection
|
||||||
assetFilesArray[4 * index + 3]
|
</label>
|
||||||
? URL.createObjectURL(assetFilesArray[4 * index + 3])
|
<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',
|
||||||
)}
|
)}
|
||||||
</label>
|
>
|
||||||
</button>
|
<input
|
||||||
</Conditional>
|
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>
|
||||||
</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=""
|
||||||
|
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}
|
||||||
|
updatedMetadataFile={updatedMetadataFilesArray[metadataFileArrayIndex]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Conditional test={assetFilesArray.length > 0}>
|
||||||
|
<div className="overflow-auto mt-2 mr-10 ml-20 w-4/5 h-96">
|
||||||
|
{assetFilesArray.map((assetSource, index) => (
|
||||||
|
<button
|
||||||
|
key={assetSource.name}
|
||||||
|
className="relative p-0 w-[100px] h-[100px] bg-transparent hover:bg-transparent border-0 btn modal-button"
|
||||||
|
onClick={() => {
|
||||||
|
updateMetadataFileIndex(index)
|
||||||
|
}}
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<label
|
||||||
|
className="relative p-0 w-full h-full bg-transparent hover:bg-transparent border-0 btn modal-button"
|
||||||
|
htmlFor="my-modal-4"
|
||||||
|
>
|
||||||
|
{getAssetType(assetSource.name) === 'audio' && (
|
||||||
|
<div className="flex relative flex-col items-center mt-2 ml-2">
|
||||||
|
<img
|
||||||
|
key={`audio-${index}`}
|
||||||
|
alt="audio_icon"
|
||||||
|
className="relative mb-2 ml-1 w-6 h-6 thumbnail"
|
||||||
|
src="/audio.png"
|
||||||
|
/>
|
||||||
|
<span className="relative self-center">{assetSource.name}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{getAssetType(assetSource.name) === 'video' && (
|
||||||
|
<video
|
||||||
|
id="video"
|
||||||
|
muted
|
||||||
|
onMouseEnter={(e) => e.currentTarget.play()}
|
||||||
|
onMouseLeave={(e) => e.currentTarget.pause()}
|
||||||
|
src={URL.createObjectURL(assetSource)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{getAssetType(assetSource.name) === 'image' && (
|
||||||
|
<img
|
||||||
|
key={`image-${index}`}
|
||||||
|
alt="asset"
|
||||||
|
className="px-1 my-1 thumbnail"
|
||||||
|
src={URL.createObjectURL(assetSource)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</label>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</Conditional>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Conditional>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -17,9 +17,9 @@ export type FormInputProps = BaseProps & SlicedInputProps
|
|||||||
|
|
||||||
export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
|
export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
|
||||||
function FormInput(props, ref) {
|
function FormInput(props, ref) {
|
||||||
const { id, name, title, subtitle, isRequired, ...rest } = props
|
const { id, name, title, subtitle, isRequired, className, ...rest } = props
|
||||||
return (
|
return (
|
||||||
<FormControl htmlId={id} isRequired={isRequired} subtitle={subtitle} title={title}>
|
<FormControl className={className} htmlId={id} isRequired={isRequired} subtitle={subtitle} title={title}>
|
||||||
<StyledInput id={id} name={name} ref={ref} {...rest} />
|
<StyledInput id={id} name={name} ref={ref} {...rest} />
|
||||||
</FormControl>
|
</FormControl>
|
||||||
)
|
)
|
||||||
@ -78,28 +78,14 @@ export const UrlInput = forwardRef<HTMLInputElement, FormInputProps>(
|
|||||||
|
|
||||||
export const TraitTypeInput = forwardRef<HTMLInputElement, FormInputProps>(
|
export const TraitTypeInput = forwardRef<HTMLInputElement, FormInputProps>(
|
||||||
function TraitTypeInput(props, ref) {
|
function TraitTypeInput(props, ref) {
|
||||||
return (
|
return <FormInput {...props} placeholder={props.placeholder || 'Trait Type'} ref={ref} type="text" />
|
||||||
<FormInput
|
|
||||||
{...props}
|
|
||||||
placeholder={props.placeholder || 'Trait Type'}
|
|
||||||
ref={ref}
|
|
||||||
type="text"
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
},
|
},
|
||||||
//
|
//
|
||||||
)
|
)
|
||||||
|
|
||||||
export const TraitValueInput = forwardRef<HTMLInputElement, FormInputProps>(
|
export const TraitValueInput = forwardRef<HTMLInputElement, FormInputProps>(
|
||||||
function TraitValueInput(props, ref) {
|
function TraitValueInput(props, ref) {
|
||||||
return (
|
return <FormInput {...props} placeholder={props.placeholder || 'Trait Value'} ref={ref} type="text" />
|
||||||
<FormInput
|
|
||||||
{...props}
|
|
||||||
placeholder={props.placeholder || 'Trait Value'}
|
|
||||||
ref={ref}
|
|
||||||
type="text"
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
},
|
},
|
||||||
//
|
//
|
||||||
)
|
)
|
||||||
|
|||||||
@ -247,8 +247,8 @@ const CollectionCreationPage: NextPage = () => {
|
|||||||
<div>
|
<div>
|
||||||
<NextSeo title="Create Collection" />
|
<NextSeo title="Create Collection" />
|
||||||
|
|
||||||
<div className="mt-5 space-y-8 text-center">
|
<div className="mt-5 space-y-5 text-center">
|
||||||
<h1 className="font-heading text-4xl font-bold">Upload Assets & Metadata</h1>
|
<h1 className="font-heading text-4xl font-bold">Create Collection</h1>
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Make sure you check our{' '}
|
Make sure you check our{' '}
|
||||||
@ -259,8 +259,6 @@ const CollectionCreationPage: NextPage = () => {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<hr className="border-white/20" />
|
|
||||||
|
|
||||||
<UploadDetails onChange={setUploadDetails} />
|
<UploadDetails onChange={setUploadDetails} />
|
||||||
|
|
||||||
<div className="flex justify-evenly grid-col-2">
|
<div className="flex justify-evenly grid-col-2">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user