Collection creation page styling (#26)
* Refactor whitelist component and add new state * Implement existing whitelist component * Refactor other pages for styling
This commit is contained in:
Arda Nakışçı
GitHub
parent
5b9ce8568c
commit
927a3af361
@ -1,6 +1,7 @@
|
|||||||
|
import { Conditional } from 'components/Conditional'
|
||||||
import { FormGroup } from 'components/FormGroup'
|
import { FormGroup } from 'components/FormGroup'
|
||||||
import { useInputState, useNumberInputState } from 'components/forms/FormInput.hooks'
|
import { useInputState, useNumberInputState } from 'components/forms/FormInput.hooks'
|
||||||
import React, { useEffect } from 'react'
|
import React, { useEffect, useState } from 'react'
|
||||||
|
|
||||||
import { NumberInput, TextInput } from '../../forms/FormInput'
|
import { NumberInput, TextInput } from '../../forms/FormInput'
|
||||||
|
|
||||||
@ -9,11 +10,16 @@ interface RoyaltyDetailsProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export interface RoyaltyDetailsDataProps {
|
export interface RoyaltyDetailsDataProps {
|
||||||
|
royaltyType: RoyaltyState
|
||||||
paymentAddress: string
|
paymentAddress: string
|
||||||
share: number
|
share: number
|
||||||
}
|
}
|
||||||
|
|
||||||
|
type RoyaltyState = 'none' | 'new'
|
||||||
|
|
||||||
export const RoyaltyDetails = ({ onChange }: RoyaltyDetailsProps) => {
|
export const RoyaltyDetails = ({ onChange }: RoyaltyDetailsProps) => {
|
||||||
|
const [royaltyState, setRoyaltyState] = useState<RoyaltyState>('none')
|
||||||
|
|
||||||
const royaltyPaymentAddressState = useInputState({
|
const royaltyPaymentAddressState = useInputState({
|
||||||
id: 'royalty-payment-address',
|
id: 'royalty-payment-address',
|
||||||
name: 'royaltyPaymentAddress',
|
name: 'royaltyPaymentAddress',
|
||||||
@ -32,6 +38,7 @@ export const RoyaltyDetails = ({ onChange }: RoyaltyDetailsProps) => {
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const data: RoyaltyDetailsDataProps = {
|
const data: RoyaltyDetailsDataProps = {
|
||||||
|
royaltyType: royaltyState,
|
||||||
paymentAddress: royaltyPaymentAddressState.value,
|
paymentAddress: royaltyPaymentAddressState.value,
|
||||||
share: royaltyShareState.value,
|
share: royaltyShareState.value,
|
||||||
}
|
}
|
||||||
@ -40,11 +47,47 @@ export const RoyaltyDetails = ({ onChange }: RoyaltyDetailsProps) => {
|
|||||||
}, [royaltyPaymentAddressState.value, royaltyShareState.value])
|
}, [royaltyPaymentAddressState.value, royaltyShareState.value])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div className="py-3 px-8 rounded border-2 border-white/20">
|
||||||
<FormGroup subtitle="Information about royalty" title="Royalty Details">
|
<div className="flex justify-center">
|
||||||
<TextInput {...royaltyPaymentAddressState} />
|
<div className="ml-4 font-bold form-check form-check-inline">
|
||||||
<NumberInput {...royaltyShareState} />
|
<input
|
||||||
</FormGroup>
|
checked={royaltyState === 'none'}
|
||||||
|
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="royaltyRadio1"
|
||||||
|
name="royaltyRadioOptions1"
|
||||||
|
onClick={() => {
|
||||||
|
setRoyaltyState('none')
|
||||||
|
}}
|
||||||
|
type="radio"
|
||||||
|
value="None"
|
||||||
|
/>
|
||||||
|
<label className="inline-block text-white cursor-pointer form-check-label" htmlFor="royaltyRadio1">
|
||||||
|
No royalty
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div className="ml-4 font-bold form-check form-check-inline">
|
||||||
|
<input
|
||||||
|
checked={royaltyState === '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="royaltyRadio2"
|
||||||
|
name="royaltyRadioOptions2"
|
||||||
|
onClick={() => {
|
||||||
|
setRoyaltyState('new')
|
||||||
|
}}
|
||||||
|
type="radio"
|
||||||
|
value="Existing"
|
||||||
|
/>
|
||||||
|
<label className="inline-block text-white cursor-pointer form-check-label" htmlFor="royaltyRadio2">
|
||||||
|
New royalty
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Conditional test={royaltyState === 'new'}>
|
||||||
|
<FormGroup subtitle="Information about royalty" title="Royalty Details">
|
||||||
|
<TextInput {...royaltyPaymentAddressState} />
|
||||||
|
<NumberInput {...royaltyShareState} />
|
||||||
|
</FormGroup>
|
||||||
|
</Conditional>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -162,170 +162,197 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
|
|||||||
}, [uploadMethod])
|
}, [uploadMethod])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div className="justify-items-start mt-5 mb-3 rounded border border-2 border-white/20 flex-column">
|
||||||
<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="flex justify-center">
|
<div className="mt-3 ml-4 font-bold form-check form-check-inline">
|
||||||
<div className="mt-3 ml-4 font-bold form-check form-check-inline">
|
<input
|
||||||
<input
|
checked={uploadMethod === 'existing'}
|
||||||
checked={uploadMethod === 'existing'}
|
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="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="inlineRadio1"
|
||||||
id="inlineRadio1"
|
name="inlineRadioOptions1"
|
||||||
name="inlineRadioOptions1"
|
onClick={() => {
|
||||||
onClick={() => {
|
setUploadMethod('existing')
|
||||||
setUploadMethod('existing')
|
}}
|
||||||
}}
|
type="radio"
|
||||||
type="radio"
|
value="Existing"
|
||||||
value="Existing"
|
/>
|
||||||
/>
|
<label className="inline-block text-white cursor-pointer form-check-label" htmlFor="inlineRadio1">
|
||||||
<label className="inline-block text-white cursor-pointer form-check-label" htmlFor="inlineRadio1">
|
Use an existing base URI
|
||||||
Use an existing base URI
|
</label>
|
||||||
</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>
|
||||||
|
|
||||||
{baseTokenURI && (
|
<div className="mt-3 ml-4 font-bold form-check form-check-inline">
|
||||||
<Alert className="mt-5" type="info">
|
<input
|
||||||
<a href={baseTokenURI} rel="noreferrer" target="_blank">
|
checked={uploadMethod === 'new'}
|
||||||
Base Token URI: {baseTokenURI}
|
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"
|
||||||
</a>
|
id="inlineRadio2"
|
||||||
</Alert>
|
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 className="p-3 py-5 pb-8">
|
{baseTokenURI && (
|
||||||
<Conditional test={uploadMethod === 'existing'}>
|
<Alert className="mt-5" type="info">
|
||||||
<div className="ml-3 flex-column">
|
<a href={baseTokenURI} rel="noreferrer" target="_blank">
|
||||||
<p className="mb-5 ml-5">
|
Base Token URI: {baseTokenURI}
|
||||||
Though Stargaze's sg721 contract allows for off-chain metadata storage, it is recommended to use a
|
</a>
|
||||||
decentralized storage solution, such as IPFS. <br /> You may head over to{' '}
|
</Alert>
|
||||||
<Anchor className="font-bold text-plumbus hover:underline" href="https://nft.storage">
|
)}
|
||||||
NFT Storage
|
|
||||||
</Anchor>{' '}
|
<div className="p-3 py-5 pb-8">
|
||||||
or{' '}
|
<Conditional test={uploadMethod === 'existing'}>
|
||||||
<Anchor className="font-bold text-plumbus hover:underline" href="https://www.pinata.cloud/">
|
<div className="ml-3 flex-column">
|
||||||
Pinata
|
<p className="mb-5 ml-5">
|
||||||
</Anchor>{' '}
|
Though Stargaze's sg721 contract allows for off-chain metadata storage, it is recommended to use a
|
||||||
and upload your assets & metadata manually to get a base URI for your collection.
|
decentralized storage solution, such as IPFS. <br /> You may head over to{' '}
|
||||||
</p>
|
<Anchor className="font-bold text-plumbus hover:underline" href="https://nft.storage">
|
||||||
<div>
|
NFT Storage
|
||||||
<label className="block mr-1 mb-1 ml-5 font-bold text-white dark:text-gray-300" htmlFor="coverImage">
|
</Anchor>{' '}
|
||||||
Collection Cover Image
|
or{' '}
|
||||||
</label>
|
<Anchor className="font-bold text-plumbus hover:underline" href="https://www.pinata.cloud/">
|
||||||
<input
|
Pinata
|
||||||
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
|
</Anchor>{' '}
|
||||||
|
and upload your assets & metadata manually to get a base URI for your collection.
|
||||||
|
</p>
|
||||||
|
<div>
|
||||||
|
<label className="block mr-1 mb-1 ml-5 font-bold text-white dark:text-gray-300" htmlFor="coverImage">
|
||||||
|
Collection Cover Image
|
||||||
|
</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
|
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>
|
||||||
|
</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="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="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>
|
||||||
<div>
|
|
||||||
<label
|
<div className="flex w-full">
|
||||||
className="block mt-3 mr-1 mb-1 ml-5 font-bold text-white dark:text-gray-300"
|
<Conditional test={uploadService === 'nft-storage'}>
|
||||||
htmlFor="baseTokenURI"
|
<TextInput {...nftStorageApiKeyState} className="w-full" />
|
||||||
>
|
</Conditional>
|
||||||
Base Token URI
|
<Conditional test={uploadService === 'pinata'}>
|
||||||
</label>
|
<TextInput {...pinataApiKeyState} className="w-full" />
|
||||||
<input
|
<div className="w-[20px]" />
|
||||||
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
|
<TextInput {...pinataSecretKeyState} className="w-full" />
|
||||||
focus:ring-plumbus-20
|
</Conditional>
|
||||||
form-input, placeholder:text-white/50,"
|
|
||||||
id="baseTokenURI"
|
|
||||||
onChange={handleChangeBaseTokenUri}
|
|
||||||
placeholder="ipfs://..."
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</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="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="ml-4 form-check form-check-inline">
|
<div className="mt-6">
|
||||||
<input
|
<div className="grid grid-cols-2">
|
||||||
checked={uploadService === 'pinata'}
|
<div className="w-full">
|
||||||
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"
|
<Conditional
|
||||||
id="inlineRadio4"
|
test={
|
||||||
name="inlineRadioOptions4"
|
assetFilesArray.length > 0 &&
|
||||||
onClick={() => {
|
metadataFilesArray.length > 0 &&
|
||||||
setUploadService('pinata')
|
assetFilesArray.length !== metadataFilesArray.length
|
||||||
}}
|
}
|
||||||
type="radio"
|
>
|
||||||
value="pinata"
|
<Alert className="mt-4 ml-8 w-3/4" type="warning">
|
||||||
/>
|
The number of assets and metadata files should match.
|
||||||
<label className="inline-block text-white cursor-pointer form-check-label" htmlFor="inlineRadio4">
|
</Alert>
|
||||||
Upload using Pinata
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex w-full">
|
|
||||||
<Conditional test={uploadService === 'nft-storage'}>
|
|
||||||
<TextInput {...nftStorageApiKeyState} className="w-full" />
|
|
||||||
</Conditional>
|
</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>
|
||||||
<div className="grid grid-cols-2">
|
<label
|
||||||
<div className="w-full">
|
className="block mt-5 mr-1 mb-1 ml-8 w-full font-bold text-white dark:text-gray-300"
|
||||||
<Conditional
|
htmlFor="assetFiles"
|
||||||
test={
|
|
||||||
assetFilesArray.length > 0 &&
|
|
||||||
metadataFilesArray.length > 0 &&
|
|
||||||
assetFilesArray.length !== metadataFilesArray.length
|
|
||||||
}
|
|
||||||
>
|
>
|
||||||
<Alert className="mt-4 ml-8 w-3/4" type="warning">
|
Asset Selection
|
||||||
The number of assets and metadata files should match.
|
</label>
|
||||||
</Alert>
|
<div
|
||||||
</Conditional>
|
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>
|
<div>
|
||||||
<label
|
<label
|
||||||
className="block mt-5 mr-1 mb-1 ml-8 w-full font-bold text-white dark:text-gray-300"
|
className="block mt-5 mr-1 mb-1 ml-8 w-full font-bold text-white dark:text-gray-300"
|
||||||
htmlFor="assetFiles"
|
htmlFor="metadataFiles"
|
||||||
>
|
>
|
||||||
Asset Selection
|
Metadata Selection
|
||||||
</label>
|
</label>
|
||||||
<div
|
<div
|
||||||
className={clsx(
|
className={clsx(
|
||||||
@ -334,111 +361,82 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
|
|||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
accept="image/*, audio/*, video/*"
|
accept=""
|
||||||
className={clsx(
|
className={clsx(
|
||||||
'file:py-2 file:px-4 file:mr-4 file:bg-plumbus-light file:rounded file:border-0 cursor-pointer',
|
'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',
|
'before:absolute before:inset-0 before:hover:bg-white/5 before:transition',
|
||||||
)}
|
)}
|
||||||
id="assetFiles"
|
id="metadataFiles"
|
||||||
multiple
|
multiple
|
||||||
onChange={selectAssets}
|
onChange={selectMetadata}
|
||||||
type="file"
|
type="file"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{assetFilesArray.length > 0 && (
|
<MetadataModal
|
||||||
<div>
|
assetFile={assetFilesArray[metadataFileArrayIndex]}
|
||||||
<label
|
metadataFile={metadataFilesArray[metadataFileArrayIndex]}
|
||||||
className="block mt-5 mr-1 mb-1 ml-8 w-full font-bold text-white dark:text-gray-300"
|
refresher={refreshMetadata}
|
||||||
htmlFor="metadataFiles"
|
updateMetadata={updateMetadataFileArray}
|
||||||
>
|
updatedMetadataFile={updatedMetadataFilesArray[metadataFileArrayIndex]}
|
||||||
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>
|
||||||
|
|
||||||
|
<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>
|
||||||
</Conditional>
|
</div>
|
||||||
</div>
|
</Conditional>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|||||||
@ -1,11 +1,11 @@
|
|||||||
import { FormControl } from 'components/FormControl'
|
import { FormControl } from 'components/FormControl'
|
||||||
import { FormGroup } from 'components/FormGroup'
|
import { FormGroup } from 'components/FormGroup'
|
||||||
import { useNumberInputState } from 'components/forms/FormInput.hooks'
|
import { useInputState, useNumberInputState } from 'components/forms/FormInput.hooks'
|
||||||
import { InputDateTime } from 'components/InputDateTime'
|
import { InputDateTime } from 'components/InputDateTime'
|
||||||
import React, { useEffect, useState } from 'react'
|
import React, { useEffect, useState } from 'react'
|
||||||
|
|
||||||
import { Conditional } from '../../Conditional'
|
import { Conditional } from '../../Conditional'
|
||||||
import { NumberInput } from '../../forms/FormInput'
|
import { AddressInput, NumberInput } from '../../forms/FormInput'
|
||||||
import { JsonPreview } from '../../JsonPreview'
|
import { JsonPreview } from '../../JsonPreview'
|
||||||
import { WhitelistUpload } from '../../WhitelistUpload'
|
import { WhitelistUpload } from '../../WhitelistUpload'
|
||||||
|
|
||||||
@ -14,7 +14,7 @@ interface WhitelistDetailsProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export interface WhitelistDetailsDataProps {
|
export interface WhitelistDetailsDataProps {
|
||||||
isContractAddress: boolean
|
whitelistType: WhitelistState
|
||||||
contractAddress?: string
|
contractAddress?: string
|
||||||
members?: string[]
|
members?: string[]
|
||||||
unitPrice?: string
|
unitPrice?: string
|
||||||
@ -24,11 +24,20 @@ export interface WhitelistDetailsDataProps {
|
|||||||
memberLimit?: number
|
memberLimit?: number
|
||||||
}
|
}
|
||||||
|
|
||||||
|
type WhitelistState = 'none' | 'existing' | 'new'
|
||||||
|
|
||||||
export const WhitelistDetails = ({ onChange }: WhitelistDetailsProps) => {
|
export const WhitelistDetails = ({ onChange }: WhitelistDetailsProps) => {
|
||||||
|
const [whitelistState, setWhitelistState] = useState<WhitelistState>('none')
|
||||||
const [startDate, setStartDate] = useState<Date | undefined>(undefined)
|
const [startDate, setStartDate] = useState<Date | undefined>(undefined)
|
||||||
const [endDate, setEndDate] = useState<Date | undefined>(undefined)
|
const [endDate, setEndDate] = useState<Date | undefined>(undefined)
|
||||||
const [whitelistArray, setWhitelistArray] = useState<string[]>([])
|
const [whitelistArray, setWhitelistArray] = useState<string[]>([])
|
||||||
|
|
||||||
|
const whitelistAddressState = useInputState({
|
||||||
|
id: 'whitelist-address',
|
||||||
|
name: 'whitelistAddress',
|
||||||
|
title: 'Whitelist Address',
|
||||||
|
})
|
||||||
|
|
||||||
const uniPriceState = useNumberInputState({
|
const uniPriceState = useNumberInputState({
|
||||||
id: 'unit-price',
|
id: 'unit-price',
|
||||||
name: 'unitPrice',
|
name: 'unitPrice',
|
||||||
@ -59,8 +68,8 @@ export const WhitelistDetails = ({ onChange }: WhitelistDetailsProps) => {
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const data: WhitelistDetailsDataProps = {
|
const data: WhitelistDetailsDataProps = {
|
||||||
isContractAddress: false,
|
whitelistType: whitelistState,
|
||||||
contractAddress: '',
|
contractAddress: whitelistAddressState.value,
|
||||||
members: whitelistArray,
|
members: whitelistArray,
|
||||||
unitPrice: uniPriceState.value ? (Number(uniPriceState.value) * 1_000_000).toString() : '',
|
unitPrice: uniPriceState.value ? (Number(uniPriceState.value) * 1_000_000).toString() : '',
|
||||||
startTime: startDate ? (startDate.getTime() * 1_000_000).toString() : '',
|
startTime: startDate ? (startDate.getTime() * 1_000_000).toString() : '',
|
||||||
@ -73,24 +82,85 @@ export const WhitelistDetails = ({ onChange }: WhitelistDetailsProps) => {
|
|||||||
}, [uniPriceState.value, memberLimitState.value, perAddressLimitState.value, startDate, endDate, whitelistArray])
|
}, [uniPriceState.value, memberLimitState.value, perAddressLimitState.value, startDate, endDate, whitelistArray])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="grid grid-cols-2">
|
<div className="py-3 px-8 rounded border-2 border-white/20">
|
||||||
<FormGroup subtitle="Information about your minting settings" title="Whitelist Minting Details">
|
<div className="flex justify-center">
|
||||||
<NumberInput isRequired {...uniPriceState} />
|
<div className="ml-4 font-bold form-check form-check-inline">
|
||||||
<NumberInput isRequired {...memberLimitState} />
|
<input
|
||||||
<NumberInput isRequired {...perAddressLimitState} />
|
checked={whitelistState === 'none'}
|
||||||
</FormGroup>
|
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"
|
||||||
<FormGroup subtitle="" title="">
|
id="whitelistRadio1"
|
||||||
<FormControl htmlId="start-date" isRequired subtitle="Start time for the minting" title="Start Time">
|
name="whitelistRadioOptions1"
|
||||||
<InputDateTime minDate={new Date()} onChange={(date) => setStartDate(date)} value={startDate} />
|
onClick={() => {
|
||||||
</FormControl>
|
setWhitelistState('none')
|
||||||
<FormControl htmlId="end-date" isRequired subtitle="End time for the minting" title="End Time">
|
}}
|
||||||
<InputDateTime minDate={new Date()} onChange={(date) => setEndDate(date)} value={endDate} />
|
type="radio"
|
||||||
</FormControl>
|
value="None"
|
||||||
<WhitelistUpload onChange={whitelistFileOnChange} />
|
/>
|
||||||
<Conditional test={whitelistArray.length > 0}>
|
<label className="inline-block text-white cursor-pointer form-check-label" htmlFor="whitelistRadio1">
|
||||||
<JsonPreview content={whitelistArray} initialState={false} title="File Contents" />
|
No whitelist
|
||||||
</Conditional>
|
</label>
|
||||||
</FormGroup>
|
</div>
|
||||||
|
<div className="ml-4 font-bold form-check form-check-inline">
|
||||||
|
<input
|
||||||
|
checked={whitelistState === 'existing'}
|
||||||
|
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="whitelistRadio2"
|
||||||
|
name="whitelistRadioOptions2"
|
||||||
|
onClick={() => {
|
||||||
|
setWhitelistState('existing')
|
||||||
|
}}
|
||||||
|
type="radio"
|
||||||
|
value="Existing"
|
||||||
|
/>
|
||||||
|
<label className="inline-block text-white cursor-pointer form-check-label" htmlFor="whitelistRadio2">
|
||||||
|
Existing whitelist
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div className="ml-4 font-bold form-check form-check-inline">
|
||||||
|
<input
|
||||||
|
checked={whitelistState === '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="whitelistRadio3"
|
||||||
|
name="whitelistRadioOptions3"
|
||||||
|
onClick={() => {
|
||||||
|
setWhitelistState('new')
|
||||||
|
}}
|
||||||
|
type="radio"
|
||||||
|
value="New"
|
||||||
|
/>
|
||||||
|
<label className="inline-block text-white cursor-pointer form-check-label" htmlFor="whitelistRadio3">
|
||||||
|
New whitelist
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Conditional test={whitelistState === 'existing'}>
|
||||||
|
<AddressInput {...whitelistAddressState} className="pb-5" />
|
||||||
|
</Conditional>
|
||||||
|
|
||||||
|
<Conditional test={whitelistState === 'new'}>
|
||||||
|
<div className="grid grid-cols-2">
|
||||||
|
<FormGroup subtitle="Information about your minting settings" title="Whitelist Minting Details">
|
||||||
|
<NumberInput isRequired {...uniPriceState} />
|
||||||
|
<NumberInput isRequired {...memberLimitState} />
|
||||||
|
<NumberInput isRequired {...perAddressLimitState} />
|
||||||
|
<FormControl htmlId="start-date" isRequired subtitle="Start time for the minting" title="Start Time">
|
||||||
|
<InputDateTime minDate={new Date()} onChange={(date) => setStartDate(date)} value={startDate} />
|
||||||
|
</FormControl>
|
||||||
|
<FormControl htmlId="end-date" isRequired subtitle="End time for the minting" title="End Time">
|
||||||
|
<InputDateTime minDate={new Date()} onChange={(date) => setEndDate(date)} value={endDate} />
|
||||||
|
</FormControl>
|
||||||
|
</FormGroup>
|
||||||
|
<div>
|
||||||
|
<FormGroup subtitle="TXT file that contains the whitelisted addresses" title="Whitelist File">
|
||||||
|
<WhitelistUpload onChange={whitelistFileOnChange} />
|
||||||
|
</FormGroup>
|
||||||
|
<Conditional test={whitelistArray.length > 0}>
|
||||||
|
<JsonPreview content={whitelistArray} initialState title="File Contents" />
|
||||||
|
</Conditional>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Conditional>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -65,9 +65,9 @@ const CollectionCreationPage: NextPage = () => {
|
|||||||
uploadDetails?.pinataSecretKey as string,
|
uploadDetails?.pinataSecretKey as string,
|
||||||
)
|
)
|
||||||
|
|
||||||
const whitelist = whitelistDetails?.isContractAddress
|
let whitelist: string | undefined
|
||||||
? whitelistDetails.contractAddress
|
if (whitelistDetails?.whitelistType === 'existing') whitelist = whitelistDetails.contractAddress
|
||||||
: await instantiateWhitelist()
|
else if (whitelistDetails?.whitelistType === 'new') whitelist = await instantiateWhitelist()
|
||||||
|
|
||||||
await instantate(baseUri, coverImageUri, whitelist)
|
await instantate(baseUri, coverImageUri, whitelist)
|
||||||
|
|
||||||
@ -105,7 +105,7 @@ const CollectionCreationPage: NextPage = () => {
|
|||||||
if (!minterContract) throw new Error('Contract not found')
|
if (!minterContract) throw new Error('Contract not found')
|
||||||
|
|
||||||
let royaltyInfo = null
|
let royaltyInfo = null
|
||||||
if (royaltyDetails?.paymentAddress && royaltyDetails.share) {
|
if (royaltyDetails?.royaltyType === 'new') {
|
||||||
royaltyInfo = {
|
royaltyInfo = {
|
||||||
paymentAddress: royaltyDetails.paymentAddress,
|
paymentAddress: royaltyDetails.paymentAddress,
|
||||||
share: royaltyDetails.share,
|
share: royaltyDetails.share,
|
||||||
@ -225,8 +225,8 @@ const CollectionCreationPage: NextPage = () => {
|
|||||||
|
|
||||||
const checkWhitelistDetails = () => {
|
const checkWhitelistDetails = () => {
|
||||||
if (!whitelistDetails) throw new Error('Please fill out the whitelist details')
|
if (!whitelistDetails) throw new Error('Please fill out the whitelist details')
|
||||||
if (whitelistDetails.isContractAddress) {
|
if (whitelistDetails.whitelistType === 'existing') {
|
||||||
if (whitelistDetails.contractAddress === '') throw new Error('Contract address is required')
|
if (whitelistDetails.contractAddress === '') throw new Error('Whitelist contract address is required')
|
||||||
} else {
|
} else {
|
||||||
if (whitelistDetails.members?.length === 0) throw new Error('Whitelist member list cannot be empty')
|
if (whitelistDetails.members?.length === 0) throw new Error('Whitelist member list cannot be empty')
|
||||||
if (whitelistDetails.unitPrice === '') throw new Error('Whitelist unit price is required')
|
if (whitelistDetails.unitPrice === '') throw new Error('Whitelist unit price is required')
|
||||||
@ -239,8 +239,10 @@ const CollectionCreationPage: NextPage = () => {
|
|||||||
|
|
||||||
const checkRoyaltyDetails = () => {
|
const checkRoyaltyDetails = () => {
|
||||||
if (!royaltyDetails) throw new Error('Please fill out the royalty details')
|
if (!royaltyDetails) throw new Error('Please fill out the royalty details')
|
||||||
if (royaltyDetails.share === 0) throw new Error('Royalty share is required')
|
if (royaltyDetails.royaltyType === 'new') {
|
||||||
if (royaltyDetails.paymentAddress === '') throw new Error('Royalty payment address is required')
|
if (royaltyDetails.share === 0) throw new Error('Royalty share is required')
|
||||||
|
if (royaltyDetails.paymentAddress === '') throw new Error('Royalty payment address is required')
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -259,28 +261,28 @@ const CollectionCreationPage: NextPage = () => {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<UploadDetails onChange={setUploadDetails} />
|
<div className="mx-10">
|
||||||
|
<UploadDetails onChange={setUploadDetails} />
|
||||||
|
|
||||||
<div className="flex justify-evenly grid-col-2">
|
<div className="flex justify-between py-3 px-8 rounded border-2 border-white/20 grid-col-2">
|
||||||
<CollectionDetails onChange={setCollectionDetails} />
|
<CollectionDetails onChange={setCollectionDetails} />
|
||||||
<MintingDetails onChange={setMintingDetails} />
|
<MintingDetails onChange={setMintingDetails} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex justify-end">
|
<div className="flex justify-between my-6">
|
||||||
<Button {...toggleProps} isWide type="button" variant="outline">
|
<Button {...toggleProps} isWide type="button" variant="outline">
|
||||||
{isExpanded ? 'Hide' : 'Show'} Advanced Details
|
{isExpanded ? 'Hide' : 'Show'} Advanced Details
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
<Button isWide onClick={createCollection} variant="solid">
|
||||||
|
Create Collection
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<section {...collapseProps}>
|
<section {...collapseProps} className="mb-10">
|
||||||
<WhitelistDetails onChange={setWhitelistDetails} />
|
<WhitelistDetails onChange={setWhitelistDetails} />
|
||||||
<RoyaltyDetails onChange={setRoyaltyDetails} />
|
<div className="my-6" />
|
||||||
</section>
|
<RoyaltyDetails onChange={setRoyaltyDetails} />
|
||||||
|
</section>
|
||||||
<div className="mt-5 ml-8">
|
|
||||||
<Button className="mb-8" isWide onClick={createCollection} variant="solid">
|
|
||||||
Create Collection
|
|
||||||
</Button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user