LaconicNetwork/stargaze-studio
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement 1/1 minting UI

Browse Source
This commit is contained in:
Serkan Reis 2022-12-13 21:50:42 +03:00
parent 5c6c87eb9e
commit fe4da95566
5 changed files with 230 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
components/AssetsPreview.tsx
View File

@ -2,14 +2,18 @@ import clsx from 'clsx'
import { useCallback, useMemo, useState } from 'react'
import { getAssetType } from 'utils/getAssetType'
import type { MinterType } from './collections/actions/Combobox'
import { Conditional } from './Conditional'
interface AssetsPreviewProps {
assetFilesArray: File[]
updateMetadataFileIndex: (index: number) => void
minterType: MinterType
}
const ITEM_NUMBER = 12
export const AssetsPreview = ({ assetFilesArray, updateMetadataFileIndex }: AssetsPreviewProps) => {
export const AssetsPreview = ({ assetFilesArray, updateMetadataFileIndex, minterType }: AssetsPreviewProps) => {
const [page, setPage] = useState(1)
const totalPages = useMemo(() => Math.ceil(assetFilesArray.length / ITEM_NUMBER), [assetFilesArray])
@ -116,23 +120,25 @@ export const AssetsPreview = ({ assetFilesArray, updateMetadataFileIndex }: Asse
return (
<div className="flex flex-col items-center">
<div className="mt-2 w-[400px] h-[300px]">{renderImages()}</div>
<div className="mt-5 btn-group">
<button className="text-white bg-plumbus-light btn" onClick={multiplePrevPage} type="button">
««
</button>
<button className="text-white bg-plumbus-light btn" onClick={prevPage} type="button">
«
</button>
<button className="text-white btn" type="button">
Page {page}/{totalPages}
</button>
<button className="text-white bg-plumbus-light btn" onClick={nextPage} type="button">
»
</button>
<button className="text-white bg-plumbus-light btn" onClick={multipleNextPage} type="button">
»»
</button>
</div>
<Conditional test={minterType === 'vending'}>
<div className="mt-5 btn-group">
<button className="text-white bg-plumbus-light btn" onClick={multiplePrevPage} type="button">
««
</button>
<button className="text-white bg-plumbus-light btn" onClick={prevPage} type="button">
«
</button>
<button className="text-white btn" type="button">
Page {page}/{totalPages}
</button>
<button className="text-white bg-plumbus-light btn" onClick={nextPage} type="button">
»
</button>
<button className="text-white bg-plumbus-light btn" onClick={multipleNextPage} type="button">
»»
</button>
</div>
</Conditional>
</div>
)
}

2
components/ConfirmationModal.tsx
View File

@ -40,7 +40,7 @@ export const ConfirmationModal = (props: ConfirmationModalProps) => {
/>
</div>
<br />
Are you sure to create a collection with the specified assets, metadata and parameters?
Are you sure to proceed with the specified assets, metadata and parameters?
</div>
<div className="flex justify-end w-full">
<Button className="px-0 mt-4 mr-5 mb-4 max-h-12 bg-gray-600 hover:bg-gray-600">

8
components/collections/creation/MinterDetails.tsx
View File

@ -35,7 +35,7 @@ export const MinterDetails = ({ onChange, minterType }: MinterDetailsProps) => {
const wallet = useWallet()
const [myBaseMinterContracts, setMyBaseMinterContracts] = useState<MinterInfo[]>([])
const [minterAcquisitionMethod, setMinterAcquisitionMethod] = useState<MinterAcquisitionMethod>('existing')
const [minterAcquisitionMethod, setMinterAcquisitionMethod] = useState<MinterAcquisitionMethod>('new')
const existingMinterState = useInputState({
id: 'existingMinter',
@ -79,7 +79,7 @@ export const MinterDetails = ({ onChange, minterType }: MinterDetailsProps) => {
minterContracts.map(async (minterContract: any) => {
await getMinterContractType(minterContract.minter)
.then((contractType) => {
if (contractType?.includes('sg-minter')) {
if (contractType?.includes('sg-base-minter')) {
setMyBaseMinterContracts((prevState) => [...prevState, minterContract])
}
})
@ -181,12 +181,12 @@ export const MinterDetails = ({ onChange, minterType }: MinterDetailsProps) => {
<select
className="mt-8 w-full max-w-lg text-sm bg-white/10 select select-bordered"
onChange={(e) => {
existingMinterState.onChange(e.target.value.slice(e.target.value.indexOf('-') + 2))
existingMinterState.onChange(e.target.value.slice(e.target.value.indexOf('stars1')))
e.preventDefault()
}}
>
<option className="mt-2 text-lg bg-[#1A1A1A]" disabled selected>
Select a Base Minter Contract
Select one of your existing Base Minter Contracts
</option>
{renderMinterContracts()}
</select>

64
components/collections/creation/UploadDetails.tsx
View File

@ -11,15 +11,20 @@ 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 { useEffect, useRef, useState } from 'react'
import { toast } from 'react-hot-toast'
import type { UploadServiceType } from 'services/upload'
import { naturalCompare } from 'utils/sort'
import type { MinterType } from '../actions/Combobox'
import type { MinterAcquisitionMethod } from './MinterDetails'
export type UploadMethod = 'new' | 'existing'
interface UploadDetailsProps {
onChange: (value: UploadDetailsDataProps) => void
minterType: MinterType
minterAcquisitionMethod?: MinterAcquisitionMethod
}
export interface UploadDetailsDataProps {
@ -34,7 +39,7 @@ export interface UploadDetailsDataProps {
imageUrl?: string
}
export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
export const UploadDetails = ({ onChange, minterType, minterAcquisitionMethod }: UploadDetailsProps) => {
const [assetFilesArray, setAssetFilesArray] = useState<File[]>([])
const [metadataFilesArray, setMetadataFilesArray] = useState<File[]>([])
const [uploadMethod, setUploadMethod] = useState<UploadMethod>('new')
@ -42,6 +47,9 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
const [metadataFileArrayIndex, setMetadataFileArrayIndex] = useState(0)
const [refreshMetadata, setRefreshMetadata] = useState(false)
const assetFilesRef = useRef<HTMLInputElement | null>(null)
const metadataFilesRef = useRef<HTMLInputElement | null>(null)
const nftStorageApiKeyState = useInputState({
id: 'nft-storage-api-key',
name: 'nftStorageApiKey',
@ -67,7 +75,7 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
const baseTokenUriState = useInputState({
id: 'baseTokenUri',
name: 'baseTokenUri',
title: 'Base Token URI',
title: minterType === 'vending' ? 'Base Token URI' : 'Token URI',
placeholder: 'ipfs://',
defaultValue: '',
})
@ -226,11 +234,13 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
])
useEffect(() => {
if (assetFilesRef.current) assetFilesRef.current.value = ''
if (assetFilesRef.current) assetFilesRef.current.value = ''
setAssetFilesArray([])
setMetadataFilesArray([])
baseTokenUriState.onChange('')
coverImageUrlState.onChange('')
}, [uploadMethod])
}, [uploadMethod, minterType, minterAcquisitionMethod])
return (
<div className="justify-items-start mb-3 rounded border-2 border-white/20 flex-column">
@ -251,7 +261,7 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
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
{minterType === 'base' ? 'Upload asset & metadata' : 'Upload assets & metadata'}
</label>
</div>
<div className="mt-3 ml-2 font-bold form-check form-check-inline">
@ -270,13 +280,13 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
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
{minterType === 'base' ? 'Use an existing Token URI' : 'Use an existing base URI'}
</label>
</div>
</div>
<div className="p-3 py-5 pb-8">
<Conditional test={uploadMethod === 'existing'}>
<Conditional test={uploadMethod === 'existing' && minterType === 'vending'}>
<div className="ml-3 flex-column">
<p className="mb-5 ml-5">
Though Stargaze&apos;s sg721 contract allows for off-chain metadata storage, it is recommended to use a
@ -293,9 +303,35 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
<div>
<TextInput {...baseTokenUriState} className="w-1/2" />
</div>
<Conditional test={minterType !== 'base'}>
<div>
<TextInput {...coverImageUrlState} className="mt-2 w-1/2" />
</div>
</Conditional>
</div>
</Conditional>
<Conditional test={uploadMethod === 'existing' && minterType === 'base'}>
<div className="ml-3 flex-column">
<p className="mb-5 ml-5">
Though Stargaze&apos;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 asset & metadata manually to get a URI for your token before minting.
</p>
<div>
<TextInput {...coverImageUrlState} className="mt-2 w-1/2" />
<TextInput {...baseTokenUriState} className="w-1/2" />
</div>
<Conditional test={minterType !== 'base' || (minterType === 'base' && minterAcquisitionMethod === 'new')}>
<div>
<TextInput {...coverImageUrlState} className="mt-2 w-1/2" />
</div>
</Conditional>
</div>
</Conditional>
<Conditional test={uploadMethod === 'new'}>
@ -390,8 +426,9 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
'before:absolute before:inset-0 before:hover:bg-white/5 before:transition',
)}
id="assetFiles"
multiple
multiple={minterType === 'vending'}
onChange={selectAssets}
ref={assetFilesRef}
type="file"
/>
</div>
@ -418,8 +455,9 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
'before:absolute before:inset-0 before:hover:bg-white/5 before:transition',
)}
id="metadataFiles"
multiple
multiple={minterType === 'vending'}
onChange={selectMetadata}
ref={metadataFilesRef}
type="file"
/>
</div>
@ -435,7 +473,11 @@ export const UploadDetails = ({ onChange }: UploadDetailsProps) => {
</div>
<Conditional test={assetFilesArray.length > 0}>
<AssetsPreview assetFilesArray={assetFilesArray} updateMetadataFileIndex={updateMetadataFileIndex} />
<AssetsPreview
assetFilesArray={assetFilesArray}
minterType={minterType}
updateMetadataFileIndex={updateMetadataFileIndex}
/>
</Conditional>
</div>
</div>

213
pages/collections/create.tsx
View File

@ -26,8 +26,10 @@ import { Conditional } from 'components/Conditional'
import { LoadingModal } from 'components/LoadingModal'
import { useContracts } from 'contexts/contracts'
import { useWallet } from 'contexts/wallet'
import type { DispatchExecuteArgs } from 'contracts/vendingFactory/messages/execute'
import { dispatchExecute } from 'contracts/vendingFactory/messages/execute'
import type { DispatchExecuteArgs as BaseFactoryDispatchExecuteArgs } from 'contracts/baseFactory/messages/execute'
import { dispatchExecute as baseFactoryDispatchExecute } from 'contracts/baseFactory/messages/execute'
import type { DispatchExecuteArgs as VendingFactoryDispatchExecuteArgs } from 'contracts/vendingFactory/messages/execute'
import { dispatchExecute as vendingFactoryDispatchExecute } from 'contracts/vendingFactory/messages/execute'
import type { NextPage } from 'next'
import { NextSeo } from 'next-seo'
import { useEffect, useMemo, useRef, useState } from 'react'
@ -35,6 +37,7 @@ import { toast } from 'react-hot-toast'
import { upload } from 'services/upload'
import { compareFileArrays } from 'utils/compareFileArrays'
import {
BASE_FACTORY_ADDRESS,
BLOCK_EXPLORER_URL,
NETWORK,
SG721_CODE_ID,
@ -53,17 +56,24 @@ import { getAssetType } from '../../utils/getAssetType'
const CollectionCreationPage: NextPage = () => {
const wallet = useWallet()
const {
baseMinter: baseMinterContract,
vendingMinter: vendingMinterContract,
whitelist: whitelistContract,
vendingFactory: vendingFactoryContract,
baseFactory: baseFactoryContract,
} = useContracts()
const scrollRef = useRef<HTMLDivElement>(null)
const messages = useMemo(
const vendingFactoryMessages = useMemo(
() => vendingFactoryContract?.use(VENDING_FACTORY_ADDRESS),
[vendingFactoryContract, wallet.address],
)
const baseFactoryMessages = useMemo(
() => baseFactoryContract?.use(BASE_FACTORY_ADDRESS),
[baseFactoryContract, wallet.address],
)
const [uploadDetails, setUploadDetails] = useState<UploadDetailsDataProps | null>(null)
const [collectionDetails, setCollectionDetails] = useState<CollectionDetailsDataProps | null>(null)
const [minterDetails, setMinterDetails] = useState<MinterDetailsDataProps | null>(null)
@ -109,9 +119,8 @@ const CollectionCreationPage: NextPage = () => {
try {
setReadyToCreateBm(false)
checkUploadDetails()
checkCollectionDetails()
checkMintingDetails()
checkRoyaltyDetails()
checkCollectionDetails()
checkWhitelistDetails()
.then(() => {
setReadyToCreateBm(true)
@ -130,9 +139,6 @@ const CollectionCreationPage: NextPage = () => {
try {
setReadyToUploadAndMint(false)
checkUploadDetails()
checkCollectionDetails()
checkMintingDetails()
checkRoyaltyDetails()
checkWhitelistDetails()
.then(() => {
setReadyToUploadAndMint(true)
@ -147,6 +153,12 @@ const CollectionCreationPage: NextPage = () => {
}
}
const resetReadyFlags = () => {
setReadyToCreateVm(false)
setReadyToCreateBm(false)
setReadyToUploadAndMint(false)
}
const createVendingMinterCollection = async () => {
try {
setCreatingCollection(true)
@ -180,7 +192,7 @@ const CollectionCreationPage: NextPage = () => {
else if (whitelistDetails?.whitelistType === 'new') whitelist = await instantiateWhitelist()
setWhitelistContractAddress(whitelist as string)
await instantiate(baseUri, coverImageUri, whitelist)
await instantiateVendingMinter(baseUri, coverImageUri, whitelist)
} else {
setBaseTokenUri(uploadDetails?.baseTokenURI as string)
setCoverImageUrl(uploadDetails?.imageUrl as string)
@ -190,7 +202,7 @@ const CollectionCreationPage: NextPage = () => {
else if (whitelistDetails?.whitelistType === 'new') whitelist = await instantiateWhitelist()
setWhitelistContractAddress(whitelist as string)
await instantiate(baseTokenUri as string, coverImageUrl as string, whitelist)
await instantiateVendingMinter(baseTokenUri as string, coverImageUrl as string, whitelist)
}
setCreatingCollection(false)
// eslint-disable-next-line @typescript-eslint/no-explicit-any
@ -229,22 +241,12 @@ const CollectionCreationPage: NextPage = () => {
setBaseTokenUri(baseUri)
setCoverImageUrl(coverImageUri)
let whitelist: string | undefined
if (whitelistDetails?.whitelistType === 'existing') whitelist = whitelistDetails.contractAddress
else if (whitelistDetails?.whitelistType === 'new') whitelist = await instantiateWhitelist()
setWhitelistContractAddress(whitelist as string)
await instantiate(baseUri, coverImageUri, whitelist)
await instantiateBaseMinter(baseUri, coverImageUri)
} else {
setBaseTokenUri(uploadDetails?.baseTokenURI as string)
setCoverImageUrl(uploadDetails?.imageUrl as string)
let whitelist: string | undefined
if (whitelistDetails?.whitelistType === 'existing') whitelist = whitelistDetails.contractAddress
else if (whitelistDetails?.whitelistType === 'new') whitelist = await instantiateWhitelist()
setWhitelistContractAddress(whitelist as string)
await instantiate(baseTokenUri as string, coverImageUrl as string, whitelist)
await instantiateBaseMinter(uploadDetails?.baseTokenURI as string, uploadDetails?.imageUrl as string)
}
setCreatingCollection(false)
// eslint-disable-next-line @typescript-eslint/no-explicit-any
@ -257,48 +259,49 @@ const CollectionCreationPage: NextPage = () => {
const uploadAndMint = async () => {
try {
if (!wallet.initialized) throw new Error('Wallet not connected')
if (!baseMinterContract) throw new Error('Contract not found')
setCreatingCollection(true)
setBaseTokenUri(null)
setCoverImageUrl(null)
setVendingMinterContractAddress(null)
setSg721ContractAddress(null)
setWhitelistContractAddress(null)
setTransactionHash(null)
if (uploadDetails?.uploadMethod === 'new') {
setUploading(true)
const baseUri = await uploadFiles()
//upload coverImageUri and append the file name
const coverImageUri = await upload(
collectionDetails?.imageFile as File[],
uploadDetails.uploadService,
'cover',
uploadDetails.nftStorageApiKey as string,
uploadDetails.pinataApiKey as string,
uploadDetails.pinataSecretKey as string,
)
setUploading(false)
setBaseTokenUri(baseUri)
setCoverImageUrl(coverImageUri)
let whitelist: string | undefined
if (whitelistDetails?.whitelistType === 'existing') whitelist = whitelistDetails.contractAddress
else if (whitelistDetails?.whitelistType === 'new') whitelist = await instantiateWhitelist()
setWhitelistContractAddress(whitelist as string)
await instantiate(baseUri, coverImageUri, whitelist)
await uploadFiles()
.then(async (baseUri) => {
setUploading(false)
setBaseTokenUri(baseUri)
const result = await baseMinterContract
.use(minterDetails?.existingMinter as string)
?.mint(wallet.address, `ipfs://${baseUri}`)
console.log(result)
return result
})
.then((result) => {
toast.success(`Minted successfully! Tx Hash: ${result}`, { style: { maxWidth: 'none' }, duration: 5000 })
})
.catch((error) => {
toast.error(error.message, { style: { maxWidth: 'none' } })
setUploading(false)
setCreatingCollection(false)
})
} else {
setBaseTokenUri(uploadDetails?.baseTokenURI as string)
setCoverImageUrl(uploadDetails?.imageUrl as string)
let whitelist: string | undefined
if (whitelistDetails?.whitelistType === 'existing') whitelist = whitelistDetails.contractAddress
else if (whitelistDetails?.whitelistType === 'new') whitelist = await instantiateWhitelist()
setWhitelistContractAddress(whitelist as string)
await instantiate(baseTokenUri as string, coverImageUrl as string, whitelist)
setUploading(false)
await baseMinterContract
.use(minterDetails?.existingMinter as string)
?.mint(wallet.address, `ipfs://${uploadDetails?.baseTokenURI}`)
.then((result) => {
toast.success(`Minted successfully! Tx Hash: ${result}`, { style: { maxWidth: 'none' }, duration: 5000 })
})
.catch((error) => {
toast.error(error.message, { style: { maxWidth: 'none' } })
setUploading(false)
setCreatingCollection(false)
})
}
setCreatingCollection(false)
// eslint-disable-next-line @typescript-eslint/no-explicit-any
@ -332,9 +335,9 @@ const CollectionCreationPage: NextPage = () => {
return data.contractAddress
}
const instantiate = async (baseUri: string, coverImageUri: string, whitelist?: string) => {
const instantiateVendingMinter = async (baseUri: string, coverImageUri: string, whitelist?: string) => {
if (!wallet.initialized) throw new Error('Wallet not connected')
if (!vendingMinterContract) throw new Error('Contract not found')
if (!vendingFactoryContract) throw new Error('Contract not found')
let royaltyInfo = null
if (royaltyDetails?.royaltyType === 'new') {
@ -378,19 +381,68 @@ const CollectionCreationPage: NextPage = () => {
},
}
const payload: DispatchExecuteArgs = {
const payload: VendingFactoryDispatchExecuteArgs = {
contract: VENDING_FACTORY_ADDRESS,
messages,
messages: vendingFactoryMessages,
txSigner: wallet.address,
msg,
funds: [coin('1000000000', 'ustars')],
}
const data = await dispatchExecute(payload)
const data = await vendingFactoryDispatchExecute(payload)
setTransactionHash(data.transactionHash)
setVendingMinterContractAddress(data.vendingMinterAddress)
setSg721ContractAddress(data.sg721Address)
}
const instantiateBaseMinter = async (baseUri: string, coverImageUri: string) => {
if (!wallet.initialized) throw new Error('Wallet not connected')
if (!baseFactoryContract) throw new Error('Contract not found')
let royaltyInfo = null
if (royaltyDetails?.royaltyType === 'new') {
royaltyInfo = {
payment_address: royaltyDetails.paymentAddress,
share: (Number(royaltyDetails.share) / 100).toString(),
}
}
const msg = {
create_minter: {
init_msg: null,
collection_params: {
code_id: SG721_CODE_ID,
name: collectionDetails?.name,
symbol: collectionDetails?.symbol,
info: {
creator: wallet.address,
description: collectionDetails?.description,
image: `${
uploadDetails?.uploadMethod === 'new'
? `ipfs://${coverImageUri}/${collectionDetails?.imageFile[0].name as string}`
: `${coverImageUri}`
}`,
external_link: collectionDetails?.externalLink,
explicit_content: collectionDetails?.explicit,
royalty_info: royaltyInfo,
start_trading_time: collectionDetails?.startTradingTime || null,
},
},
},
}
const payload: BaseFactoryDispatchExecuteArgs = {
contract: BASE_FACTORY_ADDRESS,
messages: baseFactoryMessages,
txSigner: wallet.address,
msg,
funds: [coin('1000000000', 'ustars')],
}
const data = await baseFactoryDispatchExecute(payload)
setTransactionHash(data.transactionHash)
setVendingMinterContractAddress(data.baseMinterAddress)
setSg721ContractAddress(data.sg721Address)
}
const uploadFiles = async (): Promise<string> => {
if (!uploadDetails) throw new Error('Please upload asset and metadata')
return new Promise((resolve, reject) => {
@ -459,6 +511,9 @@ const CollectionCreationPage: NextPage = () => {
if (!uploadDetails) {
throw new Error('Please select assets and metadata')
}
if (minterType === 'base' && uploadDetails.uploadMethod === 'new' && uploadDetails.assetFiles.length > 1) {
throw new Error('Base Minter can only mint one asset at a time. Please select only one asset.')
}
if (uploadDetails.uploadMethod === 'new' && uploadDetails.assetFiles.length === 0) {
throw new Error('Please select the assets')
}
@ -478,6 +533,9 @@ const CollectionCreationPage: NextPage = () => {
if (uploadDetails.uploadMethod === 'existing' && !uploadDetails.baseTokenURI?.includes('ipfs://')) {
throw new Error('Please specify a valid base token URI')
}
if (minterDetails?.minterAcquisitionMethod === 'existing' && !minterDetails.existingMinter) {
throw new Error('Please specify a valid Base Minter contract address')
}
}
const checkCollectionDetails = () => {
@ -565,12 +623,27 @@ const CollectionCreationPage: NextPage = () => {
setCoverImageUrl(uploadDetails?.imageUrl as string)
}, [uploadDetails?.baseTokenURI, uploadDetails?.imageUrl])
useEffect(() => {
resetReadyFlags()
setVendingMinterContractAddress(null)
}, [minterType, minterDetails?.minterAcquisitionMethod])
return (
<div>
<NextSeo title="Create Collection" />
<NextSeo
title={
minterType === 'base' && minterDetails?.minterAcquisitionMethod === 'existing'
? 'Mint Token'
: 'Create Collection'
}
/>
<div className="mt-5 space-y-5 text-center">
<h1 className="font-heading text-4xl font-bold">Create Collection</h1>
<h1 className="font-heading text-4xl font-bold">
{minterType === 'base' && minterDetails?.minterAcquisitionMethod === 'existing'
? 'Mint Token'
: 'Create Collection'}
</h1>
<Conditional test={uploading}>
<LoadingModal />
@ -689,7 +762,10 @@ const CollectionCreationPage: NextPage = () => {
>
<button
className="p-4 w-full h-full text-left bg-transparent"
onClick={() => setMinterType('vending')}
onClick={() => {
setMinterType('vending')
resetReadyFlags()
}}
type="button"
>
<h4 className="font-bold">Vending Minter</h4>
@ -708,7 +784,10 @@ const CollectionCreationPage: NextPage = () => {
>
<button
className="p-4 w-full h-full text-left bg-transparent"
onClick={() => setMinterType('base')}
onClick={() => {
setMinterType('base')
resetReadyFlags()
}}
type="button"
>
<h4 className="font-bold">Base Minter</h4>
@ -725,7 +804,11 @@ const CollectionCreationPage: NextPage = () => {
)}
<div className="mx-10">
<UploadDetails onChange={setUploadDetails} />
<UploadDetails
minterAcquisitionMethod={minterDetails?.minterAcquisitionMethod}
minterType={minterType}
onChange={setUploadDetails}
/>
<Conditional
test={minterType === 'vending' || (minterType === 'base' && minterDetails?.minterAcquisitionMethod === 'new')}
@ -794,7 +877,7 @@ const CollectionCreationPage: NextPage = () => {
onClick={performBaseMinterChecks}
variant="solid"
>
Create BM Collection
Create Collection
</Button>
</Conditional>
<Conditional test={minterType === 'base' && minterDetails?.minterAcquisitionMethod === 'existing'}>