Implement manual metadata input functionality for 1/1 minting

components/AssetsPreview.tsx

@@ -2,18 +2,14 @@ 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, minterType }: AssetsPreviewProps) => {
+export const AssetsPreview = ({ assetFilesArray, updateMetadataFileIndex }: AssetsPreviewProps) => {
   const [page, setPage] = useState(1)
 
   const totalPages = useMemo(() => Math.ceil(assetFilesArray.length / ITEM_NUMBER), [assetFilesArray])
@@ -25,11 +21,7 @@ export const AssetsPreview = ({ assetFilesArray, updateMetadataFileIndex, minter
         tempArray.push(
           <video
             key={assetFile.name}
-            className={clsx(
+            className={clsx('absolute px-1 my-1 max-h-24 thumbnail')}
-              'absolute px-1 my-1 thumbnail',
-              { 'max-h-24': minterType === 'vending' },
-              { 'max-h-72': minterType === 'base' },
-            )}
             id="video"
             muted
             onMouseEnter={(e) => {
@@ -59,9 +51,7 @@ export const AssetsPreview = ({ assetFilesArray, updateMetadataFileIndex, minter
       <button
         key={assetSource.name}
         className={clsx(
-          'relative p-0 bg-transparent hover:bg-transparent border-0 btn modal-button',
+          'relative p-0 w-[100px] h-[100px] bg-transparent hover:bg-transparent border-0 btn modal-button',
-          { 'w-[100px] h-[100px]': minterType === 'vending' },
-          { 'mt-14 ml-20 w-[288px] h-[288px]': minterType === 'base' },
         )}
         onClick={() => {
           updateMetadataFileIndex((page - 1) * ITEM_NUMBER + index)
@@ -72,7 +62,6 @@ export const AssetsPreview = ({ assetFilesArray, updateMetadataFileIndex, minter
           className="relative p-0 w-full h-full bg-transparent hover:bg-transparent border-0 btn modal-button"
           htmlFor="my-modal-4"
         >
-          <Conditional test={minterType === 'vending'}>
           <div
             className={clsx(
               'flex absolute right-20 bottom-20 justify-center items-center',
@@ -82,17 +71,13 @@ export const AssetsPreview = ({ assetFilesArray, updateMetadataFileIndex, minter
           >
             {(page - 1) * 12 + (index + 1)}
           </div>
-          </Conditional>
+
           {getAssetType(assetSource.name) === 'audio' && (
             <div className="flex absolute flex-col items-center mt-4 ml-2">
               <img
                 key={`audio-${index}`}
                 alt="audio_icon"
-                className={clsx(
+                className={clsx('mb-2 ml-1 w-6 h-6 thumbnail')}
-                  'mb-2 ml-1 thumbnail',
-                  { 'w-6 h-6': minterType === 'vending' },
-                  { 'w-24 h-24': minterType === 'base' },
-                )}
                 src="/audio.png"
               />
               <span className="flex self-center ">{assetSource.name}</span>
@@ -106,11 +91,7 @@ export const AssetsPreview = ({ assetFilesArray, updateMetadataFileIndex, minter
               <img
                 key={`image-${index}`}
                 alt="asset"
-                className={clsx(
+                className={clsx('px-1 my-1 max-h-24 thumbnail')}
-                  'px-1 my-1 thumbnail',
-                  { 'max-h-24': minterType === 'vending' },
-                  { 'max-h-72': minterType === 'base' },
-                )}
                 src={URL.createObjectURL(assetSource)}
               />
             </div>
@@ -143,7 +124,7 @@ export const AssetsPreview = ({ assetFilesArray, updateMetadataFileIndex, minter
   return (
     <div className="flex flex-col items-center">
       <div className="mt-2 w-[400px] h-[300px]">{renderImages()}</div>
-      <Conditional test={minterType === 'vending'}>
+
       <div className="mt-5 btn-group">
         <button className="text-white bg-plumbus-light btn" onClick={multiplePrevPage} type="button">
           ««
@@ -161,7 +142,6 @@ export const AssetsPreview = ({ assetFilesArray, updateMetadataFileIndex, minter
           »»
         </button>
       </div>
-      </Conditional>
     </div>
   )
 }

components/MetadataInput.tsx

@@ -0,0 +1,198 @@
+/* eslint-disable eslint-comments/disable-enable-pair */
+/* eslint-disable @typescript-eslint/no-unnecessary-condition */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+
+import { useMetadataAttributesState } from 'components/forms/MetadataAttributes.hooks'
+import { useEffect, useMemo, useState } from 'react'
+
+import { TextInput } from './forms/FormInput'
+import { useInputState } from './forms/FormInput.hooks'
+import { MetadataAttributes } from './forms/MetadataAttributes'
+
+export interface MetadataInputProps {
+  selectedAssetFile: File
+  selectedMetadataFile: File
+  updateMetadataToUpload: (metadataFile: File) => void
+}
+
+export const MetadataInput = (props: MetadataInputProps) => {
+  const emptyMetadataFile = new File(
+    [JSON.stringify({})],
+    `${props.selectedAssetFile?.name.substring(0, props.selectedAssetFile?.name.lastIndexOf('.'))}.json`,
+    { type: 'application/json' },
+  )
+
+  const [metadata, setMetadata] = useState<any>(null)
+
+  const nameState = useInputState({
+    id: 'name',
+    name: 'name',
+    title: 'Name',
+    placeholder: 'Token name',
+  })
+
+  const descriptionState = useInputState({
+    id: 'description',
+    name: 'description',
+    title: 'Description',
+    placeholder: 'Token description',
+  })
+
+  const externalUrlState = useInputState({
+    id: 'externalUrl',
+    name: 'externalUrl',
+    title: 'External URL',
+    placeholder: 'https://',
+  })
+
+  const youtubeUrlState = useInputState({
+    id: 'youtubeUrl',
+    name: 'youtubeUrl',
+    title: 'Youtube URL',
+    placeholder: 'https://',
+  })
+
+  const attributesState = useMetadataAttributesState()
+
+  let parsedMetadata: any
+  const parseMetadata = async (metadataFile: File) => {
+    console.log(metadataFile.size)
+    console.log(`Parsing metadataFile...`)
+    if (metadataFile) {
+      attributesState.reset()
+      try {
+        parsedMetadata = JSON.parse(await metadataFile.text())
+      } catch (e) {
+        console.log(e)
+        return
+      }
+      console.log('Parsed metadata: ', parsedMetadata)
+
+      if (!parsedMetadata.attributes || parsedMetadata.attributes?.length === 0) {
+        attributesState.reset()
+        attributesState.add({
+          trait_type: '',
+          value: '',
+        })
+      } else {
+        attributesState.reset()
+        for (let i = 0; i < parsedMetadata.attributes?.length; i++) {
+          attributesState.add({
+            trait_type: parsedMetadata.attributes[i].trait_type,
+            value: parsedMetadata.attributes[i].value,
+          })
+        }
+      }
+      if (!parsedMetadata.name) {
+        nameState.onChange('')
+      } else {
+        nameState.onChange(parsedMetadata.name)
+      }
+      if (!parsedMetadata.description) {
+        descriptionState.onChange('')
+      } else {
+        descriptionState.onChange(parsedMetadata.description)
+      }
+      if (!parsedMetadata.external_url) {
+        externalUrlState.onChange('')
+      } else {
+        externalUrlState.onChange(parsedMetadata.external_url)
+      }
+      if (!parsedMetadata.youtube_url) {
+        youtubeUrlState.onChange('')
+      } else {
+        youtubeUrlState.onChange(parsedMetadata.youtube_url)
+      }
+      setMetadata(parsedMetadata)
+    } else {
+      attributesState.reset()
+      nameState.onChange('')
+      descriptionState.onChange('')
+      externalUrlState.onChange('')
+      youtubeUrlState.onChange('')
+      attributesState.add({
+        trait_type: '',
+        value: '',
+      })
+      setMetadata(null)
+      props.updateMetadataToUpload(emptyMetadataFile)
+    }
+  }
+
+  const generateUpdatedMetadata = () => {
+    metadata.attributes = Object.values(attributesState)[1]
+    metadata.attributes = metadata.attributes.filter((attribute: { trait_type: string }) => attribute.trait_type !== '')
+
+    if (metadata.attributes.length === 0) delete metadata.attributes
+    if (nameState.value === '') delete metadata.name
+    else metadata.name = nameState.value
+    if (descriptionState.value === '') delete metadata.description
+    else metadata.description = descriptionState.value
+    if (externalUrlState.value === '') delete metadata.external_url
+    else metadata.external_url = externalUrlState.value
+    if (youtubeUrlState.value === '') delete metadata.youtube_url
+    else metadata.youtube_url = youtubeUrlState.value
+
+    const metadataFileBlob = new Blob([JSON.stringify(metadata)], {
+      type: 'application/json',
+    })
+
+    const editedMetadataFile = new File(
+      [metadataFileBlob],
+      props.selectedMetadataFile?.name
+        ? props.selectedMetadataFile?.name
+        : `${props.selectedAssetFile?.name.substring(0, props.selectedAssetFile?.name.lastIndexOf('.'))}.json`,
+      { type: 'application/json' },
+    )
+    props.updateMetadataToUpload(editedMetadataFile)
+    //console.log(editedMetadataFile)
+    //console.log(`${props.assetFile?.name.substring(0, props.assetFile?.name.lastIndexOf('.'))}.json`)
+  }
+
+  useEffect(() => {
+    console.log(props.selectedMetadataFile?.name)
+    if (props.selectedMetadataFile) void parseMetadata(props.selectedMetadataFile)
+    else void parseMetadata(emptyMetadataFile)
+  }, [props.selectedMetadataFile?.name])
+
+  const nameStateMemo = useMemo(() => nameState, [nameState.value])
+  const descriptionStateMemo = useMemo(() => descriptionState, [descriptionState.value])
+  const externalUrlStateMemo = useMemo(() => externalUrlState, [externalUrlState.value])
+  const youtubeUrlStateMemo = useMemo(() => youtubeUrlState, [youtubeUrlState.value])
+  const attributesStateMemo = useMemo(() => attributesState, [attributesState.entries])
+
+  useEffect(() => {
+    console.log('Update metadata')
+    if (metadata) generateUpdatedMetadata()
+    console.log(metadata)
+  }, [
+    nameStateMemo.value,
+    descriptionStateMemo.value,
+    externalUrlStateMemo.value,
+    youtubeUrlStateMemo.value,
+    attributesStateMemo.entries,
+  ])
+
+  return (
+    <div>
+      <div className="grid grid-cols-2 mx-4 mt-4 w-full max-w-6xl max-h-full no-scrollbar">
+        <div className="mr-4">
+          <div className="mb-7 text-xl font-bold underline underline-offset-2">NFT Metadata</div>
+          <TextInput {...nameState} />
+          <TextInput className="mt-2" {...descriptionState} />
+          <TextInput className="mt-2" {...externalUrlState} />
+          <TextInput className="mt-2" {...youtubeUrlState} />
+        </div>
+        <div className="mt-6">
+          <MetadataAttributes
+            attributes={attributesState.entries}
+            onAdd={attributesState.add}
+            onChange={attributesState.update}
+            onRemove={attributesState.remove}
+            title="Attributes"
+          />
+        </div>
+      </div>
+    </div>
+  )
+}

components/MetadataModal.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable eslint-comments/disable-enable-pair */
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
-/* eslint-disable @typescript-eslint/restrict-template-expressions */
+
 import { useMetadataAttributesState } from 'components/forms/MetadataAttributes.hooks'
 import { useEffect, useState } from 'react'
 import toast from 'react-hot-toast'
@@ -111,9 +111,6 @@ export const MetadataModal = (props: MetadataModalProps) => {
   const attributesState = useMetadataAttributesState()
 
   const generateUpdatedMetadata = () => {
-    console.log(`Current parsed data: ${parsedMetadata}`)
-    console.log('Updating...')
-
     metadata.attributes = Object.values(attributesState)[1]
     metadata.attributes = metadata.attributes.filter((attribute: { trait_type: string }) => attribute.trait_type !== '')
 
@@ -133,7 +130,6 @@ export const MetadataModal = (props: MetadataModalProps) => {
     const editedMetadataFile = new File([metadataFileBlob], metadataFile.name, { type: 'application/json' })
     props.updateMetadata(editedMetadataFile)
     toast.success('Metadata updated successfully.')
-    console.log(editedMetadataFile)
   }
 
   useEffect(() => {

components/SingleAssetPreview.tsx

@@ -0,0 +1,64 @@
+/* eslint-disable eslint-comments/disable-enable-pair */
+/* eslint-disable jsx-a11y/media-has-caption */
+import type { ReactNode } from 'react'
+import { useMemo } from 'react'
+import { getAssetType } from 'utils/getAssetType'
+
+export interface SingleAssetPreviewProps {
+  subtitle: ReactNode
+  relatedAsset?: File
+  updateMetadataFileIndex: (index: number) => void
+  children?: ReactNode
+}
+
+export const SingleAssetPreview = (props: SingleAssetPreviewProps) => {
+  const { subtitle, relatedAsset, updateMetadataFileIndex, children } = props
+
+  const videoPreview = useMemo(
+    () => (
+      <video
+        controls
+        id="video"
+        onMouseEnter={(e) => e.currentTarget.play()}
+        onMouseLeave={(e) => e.currentTarget.pause()}
+        src={relatedAsset ? URL.createObjectURL(relatedAsset) : ''}
+      />
+    ),
+    [relatedAsset],
+  )
+
+  const audioPreview = useMemo(
+    () => (
+      <audio
+        controls
+        id="audio"
+        onMouseEnter={(e) => e.currentTarget.play()}
+        onMouseLeave={(e) => e.currentTarget.pause()}
+        src={relatedAsset ? URL.createObjectURL(relatedAsset) : ''}
+      />
+    ),
+    [relatedAsset],
+  )
+
+  return (
+    <div className="flex p-4 pt-0 mt-11 ml-24 space-x-4 w-full">
+      <div className="flex flex-col w-full">
+        <label className="flex flex-col space-y-1">
+          <div>
+            {/* {subtitle && <span className="text-sm text-white/50">{subtitle}</span>} */}
+            {relatedAsset && (
+              <div className="flex flex-row items-center mt-2 mr-4 border-2 border-dashed">
+                {getAssetType(relatedAsset.name) === 'audio' && audioPreview}
+                {getAssetType(relatedAsset.name) === 'video' && videoPreview}
+                {getAssetType(relatedAsset.name) === 'image' && (
+                  <img alt="preview" src={URL.createObjectURL(relatedAsset)} />
+                )}
+              </div>
+            )}
+          </div>
+        </label>
+      </div>
+      <div className="space-y-4 w-2/3">{children}</div>
+    </div>
+  )
+}

components/collections/actions/Action.tsx

@@ -205,7 +205,7 @@ export const CollectionActions = ({
       royalty_info:
         royaltyPaymentAddressState.value && royaltyShareState.value
           ? {
-              payment_address: royaltyPaymentAddressState.value,
+              payment_address: royaltyPaymentAddressState.value.trim(),
               share: (Number(royaltyShareState.value) / 100).toString(),
             }
           : undefined,
@@ -260,7 +260,7 @@ export const CollectionActions = ({
               error: `Querying mint price failed!`,
               loading: 'Querying current mint price...',
               success: (price) => {
-                console.log(price)
+                console.log('Current mint price: ', price)
                 return `Current mint price is ${Number(price.public_price.amount) / 1000000} STARS`
               },
             },

components/collections/creation/BaseMinterDetails.tsx

@@ -14,30 +14,30 @@ import { useDebounce } from '../../../utils/debounce'
 import { TextInput } from '../../forms/FormInput'
 import type { MinterType } from '../actions/Combobox'
 
-export type MinterAcquisitionMethod = 'existing' | 'new'
+export type BaseMinterAcquisitionMethod = 'existing' | 'new'
 
 export interface MinterInfo {
   name: string
   minter: string
 }
 
-interface MinterDetailsProps {
+interface BaseMinterDetailsProps {
-  onChange: (data: MinterDetailsDataProps) => void
+  onChange: (data: BaseMinterDetailsDataProps) => void
   minterType: MinterType
 }
 
-export interface MinterDetailsDataProps {
+export interface BaseMinterDetailsDataProps {
-  minterAcquisitionMethod: MinterAcquisitionMethod
+  baseMinterAcquisitionMethod: BaseMinterAcquisitionMethod
-  existingMinter: string | undefined
+  existingBaseMinter: string | undefined
 }
 
-export const MinterDetails = ({ onChange, minterType }: MinterDetailsProps) => {
+export const BaseMinterDetails = ({ onChange, minterType }: BaseMinterDetailsProps) => {
   const wallet = useWallet()
 
   const [myBaseMinterContracts, setMyBaseMinterContracts] = useState<MinterInfo[]>([])
-  const [minterAcquisitionMethod, setMinterAcquisitionMethod] = useState<MinterAcquisitionMethod>('new')
+  const [baseMinterAcquisitionMethod, setBaseMinterAcquisitionMethod] = useState<BaseMinterAcquisitionMethod>('new')
 
-  const existingMinterState = useInputState({
+  const existingBaseMinterState = useInputState({
     id: 'existingMinter',
     name: 'existingMinter',
     title: 'Existing Base Minter Contract Address',
@@ -97,11 +97,11 @@ export const MinterDetails = ({ onChange, minterType }: MinterDetailsProps) => {
 
   const debouncedMyBaseMinterContracts = useDebounce(myBaseMinterContracts, 500)
 
-  const renderMinterContracts = useCallback(() => {
+  const renderBaseMinterContracts = useCallback(() => {
-    return myBaseMinterContracts.map((minterContract, index) => {
+    return myBaseMinterContracts.map((baseMinterContract, index) => {
       return (
         <option key={index} className="mt-2 text-lg bg-[#1A1A1A]">
-          {`${minterContract.name} - ${minterContract.minter}`}
+          {`${baseMinterContract.name} - ${baseMinterContract.minter}`}
         </option>
       )
     })
@@ -118,31 +118,31 @@ export const MinterDetails = ({ onChange, minterType }: MinterDetailsProps) => {
   }
 
   useEffect(() => {
-    if (debouncedWalletAddress && minterAcquisitionMethod === 'existing') {
+    if (debouncedWalletAddress && baseMinterAcquisitionMethod === 'existing') {
       void displayToast()
     }
-  }, [debouncedWalletAddress, minterAcquisitionMethod])
+  }, [debouncedWalletAddress, baseMinterAcquisitionMethod])
 
   useEffect(() => {
-    const data: MinterDetailsDataProps = {
+    const data: BaseMinterDetailsDataProps = {
-      minterAcquisitionMethod,
+      baseMinterAcquisitionMethod,
-      existingMinter: existingMinterState.value,
+      existingBaseMinter: existingBaseMinterState.value,
     }
     onChange(data)
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [existingMinterState.value, minterAcquisitionMethod])
+  }, [existingBaseMinterState.value, baseMinterAcquisitionMethod])
 
   return (
     <div className="mx-10 mb-4 rounded border-2 border-white/20">
       <div className="flex justify-center mb-2">
         <div className="mt-3 ml-4 font-bold form-check form-check-inline">
           <input
-            checked={minterAcquisitionMethod === 'new'}
+            checked={baseMinterAcquisitionMethod === 'new'}
             className="peer sr-only"
             id="inlineRadio5"
             name="inlineRadioOptions5"
             onClick={() => {
-              setMinterAcquisitionMethod('new')
+              setBaseMinterAcquisitionMethod('new')
             }}
             type="radio"
             value="New"
@@ -156,12 +156,12 @@ export const MinterDetails = ({ onChange, minterType }: MinterDetailsProps) => {
         </div>
         <div className="mt-3 ml-2 font-bold form-check form-check-inline">
           <input
-            checked={minterAcquisitionMethod === 'existing'}
+            checked={baseMinterAcquisitionMethod === 'existing'}
             className="peer sr-only"
             id="inlineRadio6"
             name="inlineRadioOptions6"
             onClick={() => {
-              setMinterAcquisitionMethod('existing')
+              setBaseMinterAcquisitionMethod('existing')
             }}
             type="radio"
             value="Existing"
@@ -175,22 +175,22 @@ export const MinterDetails = ({ onChange, minterType }: MinterDetailsProps) => {
         </div>
       </div>
 
-      {minterAcquisitionMethod === 'existing' && (
+      {baseMinterAcquisitionMethod === 'existing' && (
         <div>
           <div className="grid grid-cols-2 grid-flow-col my-4 mx-10">
             <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('stars1')))
+                existingBaseMinterState.onChange(e.target.value.slice(e.target.value.indexOf('stars1')))
                 e.preventDefault()
               }}
             >
               <option className="mt-2 text-lg bg-[#1A1A1A]" disabled selected>
-                Select one of your existing Base Minter Contracts
+                Select one of your existing Base Minter contracts
               </option>
-              {renderMinterContracts()}
+              {renderBaseMinterContracts()}
             </select>
-            <TextInput defaultValue={existingMinterState.value} {...existingMinterState} isRequired />
+            <TextInput defaultValue={existingBaseMinterState.value} {...existingBaseMinterState} isRequired />
           </div>
         </div>
       )}

components/collections/creation/CollectionDetails.tsx

@@ -13,12 +13,14 @@ import { useEffect, useState } from 'react'
 import { toast } from 'react-hot-toast'
 
 import { TextInput } from '../../forms/FormInput'
+import type { MinterType } from '../actions/Combobox'
 import type { UploadMethod } from './UploadDetails'
 
 interface CollectionDetailsProps {
   onChange: (data: CollectionDetailsDataProps) => void
   uploadMethod: UploadMethod
   coverImageUrl: string
+  minterType: MinterType
 }
 
 export interface CollectionDetailsDataProps {
@@ -31,7 +33,7 @@ export interface CollectionDetailsDataProps {
   explicit: boolean
 }
 
-export const CollectionDetails = ({ onChange, uploadMethod, coverImageUrl }: CollectionDetailsProps) => {
+export const CollectionDetails = ({ onChange, uploadMethod, coverImageUrl, minterType }: CollectionDetailsProps) => {
   const [coverImage, setCoverImage] = useState<File | null>(null)
   const [timestamp, setTimestamp] = useState<Date | undefined>()
   const [explicit, setExplicit] = useState<boolean>(false)
@@ -110,19 +112,30 @@ export const CollectionDetails = ({ onChange, uploadMethod, coverImageUrl }: Col
   return (
     <div>
       <FormGroup subtitle="Information about your collection" title="Collection Details">
+        <div className={clsx(minterType === 'base' ? 'grid grid-cols-2 -ml-16 max-w-5xl' : '')}>
+          <div className={clsx(minterType === 'base' ? 'ml-0' : '')}>
             <TextInput {...nameState} isRequired />
-        <TextInput {...descriptionState} isRequired />
+            <TextInput className="mt-2" {...descriptionState} isRequired />
-        <TextInput {...symbolState} isRequired />
+            <TextInput className="mt-2" {...symbolState} isRequired />
+          </div>
+          <div className={clsx(minterType === 'base' ? 'ml-10' : '')}>
             <TextInput {...externalLinkState} />
             <FormControl
+              className={clsx(minterType === 'base' ? 'mt-12' : '')}
               htmlId="timestamp"
               subtitle="Trading start time offset will be set as 2 weeks by default."
               title="Trading Start Time (optional)"
             >
               <InputDateTime minDate={new Date()} onChange={(date) => setTimestamp(date)} value={timestamp} />
             </FormControl>
+          </div>
+        </div>
 
-        <FormControl isRequired={uploadMethod === 'new'} title="Cover Image">
+        <FormControl
+          className={clsx(minterType === 'base' ? '-ml-16' : '')}
+          isRequired={uploadMethod === 'new'}
+          title="Cover Image"
+        >
           {uploadMethod === 'new' && (
             <input
               accept="image/*"
@@ -158,7 +171,7 @@ export const CollectionDetails = ({ onChange, uploadMethod, coverImageUrl }: Col
             <span className="italic font-light ">Waiting for cover image URL to be specified.</span>
           )}
         </FormControl>
-        <div className="flex flex-col space-y-2">
+        <div className={clsx(minterType === 'base' ? 'flex flex-col -ml-16 space-y-2' : 'flex flex-col space-y-2')}>
           <div>
             <div className="flex">
               <span className="mt-1 text-sm first-letter:capitalize">

components/collections/creation/UploadDetails.tsx

@@ -9,7 +9,9 @@ import { AssetsPreview } from 'components/AssetsPreview'
 import { Conditional } from 'components/Conditional'
 import { TextInput } from 'components/forms/FormInput'
 import { useInputState } from 'components/forms/FormInput.hooks'
+import { MetadataInput } from 'components/MetadataInput'
 import { MetadataModal } from 'components/MetadataModal'
+import { SingleAssetPreview } from 'components/SingleAssetPreview'
 import type { ChangeEvent } from 'react'
 import { useEffect, useRef, useState } from 'react'
 import { toast } from 'react-hot-toast'
@@ -17,14 +19,14 @@ import type { UploadServiceType } from 'services/upload'
 import { naturalCompare } from 'utils/sort'
 
 import type { MinterType } from '../actions/Combobox'
-import type { MinterAcquisitionMethod } from './MinterDetails'
+import type { BaseMinterAcquisitionMethod } from './BaseMinterDetails'
 
 export type UploadMethod = 'new' | 'existing'
 
 interface UploadDetailsProps {
   onChange: (value: UploadDetailsDataProps) => void
   minterType: MinterType
-  minterAcquisitionMethod?: MinterAcquisitionMethod
+  baseMinterAcquisitionMethod?: BaseMinterAcquisitionMethod
 }
 
 export interface UploadDetailsDataProps {
@@ -37,9 +39,10 @@ export interface UploadDetailsDataProps {
   uploadMethod: UploadMethod
   baseTokenURI?: string
   imageUrl?: string
+  baseMinterMetadataFile?: File
 }
 
-export const UploadDetails = ({ onChange, minterType, minterAcquisitionMethod }: UploadDetailsProps) => {
+export const UploadDetails = ({ onChange, minterType, baseMinterAcquisitionMethod }: UploadDetailsProps) => {
   const [assetFilesArray, setAssetFilesArray] = useState<File[]>([])
   const [metadataFilesArray, setMetadataFilesArray] = useState<File[]>([])
   const [uploadMethod, setUploadMethod] = useState<UploadMethod>('new')
@@ -47,6 +50,9 @@ export const UploadDetails = ({ onChange, minterType, minterAcquisitionMethod }:
   const [metadataFileArrayIndex, setMetadataFileArrayIndex] = useState(0)
   const [refreshMetadata, setRefreshMetadata] = useState(false)
 
+  //let baseMinterMetadataFile: File | undefined
+  const [baseMinterMetadataFile, setBaseMinterMetadataFile] = useState<File | undefined>()
+
   const assetFilesRef = useRef<HTMLInputElement | null>(null)
   const metadataFilesRef = useRef<HTMLInputElement | null>(null)
 
@@ -131,7 +137,7 @@ export const UploadDetails = ({ onChange, minterType, minterAcquisitionMethod }:
   const selectMetadata = (event: ChangeEvent<HTMLInputElement>) => {
     setMetadataFilesArray([])
     if (event.target.files === null) return toast.error('No files selected.')
-    if (event.target.files.length !== assetFilesArray.length) {
+    if (minterType === 'vending' && event.target.files.length !== assetFilesArray.length) {
       event.target.value = ''
       return toast.error('The number of metadata files should be equal to the number of asset files.')
     }
@@ -188,10 +194,14 @@ export const UploadDetails = ({ onChange, minterType, minterAcquisitionMethod }:
     setRefreshMetadata((prev) => !prev)
   }
 
-  const updateMetadataFileArray = async (updatedMetadataFile: File) => {
+  const updateMetadataFileArray = (updatedMetadataFile: File) => {
     metadataFilesArray[metadataFileArrayIndex] = updatedMetadataFile
-    console.log('Updated Metadata File:')
+  }
-    console.log(JSON.parse(await metadataFilesArray[metadataFileArrayIndex]?.text()))
+
+  const updateBaseMinterMetadataFile = (updatedMetadataFile: File) => {
+    setBaseMinterMetadataFile(updatedMetadataFile)
+    console.log('Updated Base Minter Metadata File:')
+    console.log(baseMinterMetadataFile)
   }
   const regex =
     /[\0-\x1F\x7F-\x9F\xAD\u0378\u0379\u037F-\u0383\u038B\u038D\u03A2\u0528-\u0530\u0557\u0558\u0560\u0588\u058B-\u058E\u0590\u05C8-\u05CF\u05EB-\u05EF\u05F5-\u0605\u061C\u061D\u06DD\u070E\u070F\u074B\u074C\u07B2-\u07BF\u07FB-\u07FF\u082E\u082F\u083F\u085C\u085D\u085F-\u089F\u08A1\u08AD-\u08E3\u08FF\u0978\u0980\u0984\u098D\u098E\u0991\u0992\u09A9\u09B1\u09B3-\u09B5\u09BA\u09BB\u09C5\u09C6\u09C9\u09CA\u09CF-\u09D6\u09D8-\u09DB\u09DE\u09E4\u09E5\u09FC-\u0A00\u0A04\u0A0B-\u0A0E\u0A11\u0A12\u0A29\u0A31\u0A34\u0A37\u0A3A\u0A3B\u0A3D\u0A43-\u0A46\u0A49\u0A4A\u0A4E-\u0A50\u0A52-\u0A58\u0A5D\u0A5F-\u0A65\u0A76-\u0A80\u0A84\u0A8E\u0A92\u0AA9\u0AB1\u0AB4\u0ABA\u0ABB\u0AC6\u0ACA\u0ACE\u0ACF\u0AD1-\u0ADF\u0AE4\u0AE5\u0AF2-\u0B00\u0B04\u0B0D\u0B0E\u0B11\u0B12\u0B29\u0B31\u0B34\u0B3A\u0B3B\u0B45\u0B46\u0B49\u0B4A\u0B4E-\u0B55\u0B58-\u0B5B\u0B5E\u0B64\u0B65\u0B78-\u0B81\u0B84\u0B8B-\u0B8D\u0B91\u0B96-\u0B98\u0B9B\u0B9D\u0BA0-\u0BA2\u0BA5-\u0BA7\u0BAB-\u0BAD\u0BBA-\u0BBD\u0BC3-\u0BC5\u0BC9\u0BCE\u0BCF\u0BD1-\u0BD6\u0BD8-\u0BE5\u0BFB-\u0C00\u0C04\u0C0D\u0C11\u0C29\u0C34\u0C3A-\u0C3C\u0C45\u0C49\u0C4E-\u0C54\u0C57\u0C5A-\u0C5F\u0C64\u0C65\u0C70-\u0C77\u0C80\u0C81\u0C84\u0C8D\u0C91\u0CA9\u0CB4\u0CBA\u0CBB\u0CC5\u0CC9\u0CCE-\u0CD4\u0CD7-\u0CDD\u0CDF\u0CE4\u0CE5\u0CF0\u0CF3-\u0D01\u0D04\u0D0D\u0D11\u0D3B\u0D3C\u0D45\u0D49\u0D4F-\u0D56\u0D58-\u0D5F\u0D64\u0D65\u0D76-\u0D78\u0D80\u0D81\u0D84\u0D97-\u0D99\u0DB2\u0DBC\u0DBE\u0DBF\u0DC7-\u0DC9\u0DCB-\u0DCE\u0DD5\u0DD7\u0DE0-\u0DF1\u0DF5-\u0E00\u0E3B-\u0E3E\u0E5C-\u0E80\u0E83\u0E85\u0E86\u0E89\u0E8B\u0E8C\u0E8E-\u0E93\u0E98\u0EA0\u0EA4\u0EA6\u0EA8\u0EA9\u0EAC\u0EBA\u0EBE\u0EBF\u0EC5\u0EC7\u0ECE\u0ECF\u0EDA\u0EDB\u0EE0-\u0EFF\u0F48\u0F6D-\u0F70\u0F98\u0FBD\u0FCD\u0FDB-\u0FFF\u10C6\u10C8-\u10CC\u10CE\u10CF\u1249\u124E\u124F\u1257\u1259\u125E\u125F\u1289\u128E\u128F\u12B1\u12B6\u12B7\u12BF\u12C1\u12C6\u12C7\u12D7\u1311\u1316\u1317\u135B\u135C\u137D-\u137F\u139A-\u139F\u13F5-\u13FF\u169D-\u169F\u16F1-\u16FF\u170D\u1715-\u171F\u1737-\u173F\u1754-\u175F\u176D\u1771\u1774-\u177F\u17DE\u17DF\u17EA-\u17EF\u17FA-\u17FF\u180F\u181A-\u181F\u1878-\u187F\u18AB-\u18AF\u18F6-\u18FF\u191D-\u191F\u192C-\u192F\u193C-\u193F\u1941-\u1943\u196E\u196F\u1975-\u197F\u19AC-\u19AF\u19CA-\u19CF\u19DB-\u19DD\u1A1C\u1A1D\u1A5F\u1A7D\u1A7E\u1A8A-\u1A8F\u1A9A-\u1A9F\u1AAE-\u1AFF\u1B4C-\u1B4F\u1B7D-\u1B7F\u1BF4-\u1BFB\u1C38-\u1C3A\u1C4A-\u1C4C\u1C80-\u1CBF\u1CC8-\u1CCF\u1CF7-\u1CFF\u1DE7-\u1DFB\u1F16\u1F17\u1F1E\u1F1F\u1F46\u1F47\u1F4E\u1F4F\u1F58\u1F5A\u1F5C\u1F5E\u1F7E\u1F7F\u1FB5\u1FC5\u1FD4\u1FD5\u1FDC\u1FF0\u1FF1\u1FF5\u1FFF\u200B-\u200F\u2020-\u202E\u2060-\u206F\u2072\u2073\u208F\u209D-\u209F\u20BB-\u20CF\u20F1-\u20FF\u218A-\u218F\u23F4-\u23FF\u2427-\u243F\u244B-\u245F\u2700\u2B4D-\u2B4F\u2B5A-\u2BFF\u2C2F\u2C5F\u2CF4-\u2CF8\u2D26\u2D28-\u2D2C\u2D2E\u2D2F\u2D68-\u2D6E\u2D71-\u2D7E\u2D97-\u2D9F\u2DA7\u2DAF\u2DB7\u2DBF\u2DC7\u2DCF\u2DD7\u2DDF\u2E3C-\u2E7F\u2E9A\u2EF4-\u2EFF\u2FD6-\u2FEF\u2FFC-\u2FFF\u3040\u3097\u3098\u3100-\u3104\u312E-\u3130\u318F\u31BB-\u31BF\u31E4-\u31EF\u321F\u32FF\u4DB6-\u4DBF\u9FCD-\u9FFF\uA48D-\uA48F\uA4C7-\uA4CF\uA62C-\uA63F\uA698-\uA69E\uA6F8-\uA6FF\uA78F\uA794-\uA79F\uA7AB-\uA7F7\uA82C-\uA82F\uA83A-\uA83F\uA878-\uA87F\uA8C5-\uA8CD\uA8DA-\uA8DF\uA8FC-\uA8FF\uA954-\uA95E\uA97D-\uA97F\uA9CE\uA9DA-\uA9DD\uA9E0-\uA9FF\uAA37-\uAA3F\uAA4E\uAA4F\uAA5A\uAA5B\uAA7C-\uAA7F\uAAC3-\uAADA\uAAF7-\uAB00\uAB07\uAB08\uAB0F\uAB10\uAB17-\uAB1F\uAB27\uAB2F-\uABBF\uABEE\uABEF\uABFA-\uABFF\uD7A4-\uD7AF\uD7C7-\uD7CA\uD7FC-\uF8FF\uFA6E\uFA6F\uFADA-\uFAFF\uFB07-\uFB12\uFB18-\uFB1C\uFB37\uFB3D\uFB3F\uFB42\uFB45\uFBC2-\uFBD2\uFD40-\uFD4F\uFD90\uFD91\uFDC8-\uFDEF\uFDFE\uFDFF\uFE1A-\uFE1F\uFE27-\uFE2F\uFE53\uFE67\uFE6C-\uFE6F\uFE75\uFEFD-\uFF00\uFFBF-\uFFC1\uFFC8\uFFC9\uFFD0\uFFD1\uFFD8\uFFD9\uFFDD-\uFFDF\uFFE7\uFFEF-\uFFFB\uFFFE\uFFFF]/g
@@ -220,6 +230,7 @@ export const UploadDetails = ({ onChange, minterType, minterAcquisitionMethod }:
           .replace(/'/g, '')
           .replace(/ /g, '')
           .replace(regex, ''),
+        baseMinterMetadataFile,
       }
       onChange(data)
     } catch (error: any) {
@@ -235,16 +246,18 @@ export const UploadDetails = ({ onChange, minterType, minterAcquisitionMethod }:
     uploadMethod,
     baseTokenUriState.value,
     coverImageUrlState.value,
+    refreshMetadata,
+    baseMinterMetadataFile,
   ])
 
   useEffect(() => {
-    if (assetFilesRef.current) assetFilesRef.current.value = ''
+    if (metadataFilesRef.current) metadataFilesRef.current.value = ''
+    setMetadataFilesArray([])
     if (assetFilesRef.current) assetFilesRef.current.value = ''
     setAssetFilesArray([])
-    setMetadataFilesArray([])
     baseTokenUriState.onChange('')
     coverImageUrlState.onChange('')
-  }, [uploadMethod, minterType, minterAcquisitionMethod])
+  }, [uploadMethod, minterType, baseMinterAcquisitionMethod])
 
   return (
     <div className="justify-items-start mb-3 rounded border-2 border-white/20 flex-column">
@@ -331,7 +344,9 @@ export const UploadDetails = ({ onChange, minterType, minterAcquisitionMethod }:
             <div>
               <TextInput {...baseTokenUriState} className="w-1/2" />
             </div>
-            <Conditional test={minterType !== 'base' || (minterType === 'base' && minterAcquisitionMethod === 'new')}>
+            <Conditional
+              test={minterType !== 'base' || (minterType === 'base' && baseMinterAcquisitionMethod === 'new')}
+            >
               <div>
                 <TextInput {...coverImageUrlState} className="mt-2 w-1/2" />
               </div>
@@ -444,7 +459,7 @@ export const UploadDetails = ({ onChange, minterType, minterAcquisitionMethod }:
                         className="block mt-5 mr-1 mb-1 ml-8 w-full font-bold text-white dark:text-gray-300"
                         htmlFor="metadataFiles"
                       >
-                        Metadata Selection
+                        {minterType === 'vending' ? 'Metadata Selection' : 'Metadata Selection (optional)'}
                       </label>
                       <div
                         className={clsx(
@@ -467,23 +482,34 @@ export const UploadDetails = ({ onChange, minterType, minterAcquisitionMethod }:
                       </div>
                     </div>
                   )}
-
+                  <Conditional test={minterType === 'vending'}>
                     <MetadataModal
                       assetFile={assetFilesArray[metadataFileArrayIndex]}
                       metadataFile={metadataFilesArray[metadataFileArrayIndex]}
                       refresher={refreshMetadata}
                       updateMetadata={updateMetadataFileArray}
                     />
+                  </Conditional>
                 </div>
 
-                <Conditional test={assetFilesArray.length > 0}>
+                <Conditional test={assetFilesArray.length > 0 && minterType === 'vending'}>
-                  <AssetsPreview
+                  <AssetsPreview assetFilesArray={assetFilesArray} updateMetadataFileIndex={updateMetadataFileIndex} />
-                    assetFilesArray={assetFilesArray}
+                </Conditional>
-                    minterType={minterType}
+                <Conditional test={assetFilesArray.length > 0 && minterType === 'base'}>
+                  <SingleAssetPreview
+                    relatedAsset={assetFilesArray[0]}
+                    subtitle={`Asset filename: ${assetFilesArray[0]?.name}`}
                     updateMetadataFileIndex={updateMetadataFileIndex}
                   />
                 </Conditional>
               </div>
+              <Conditional test={minterType === 'base' && assetFilesArray.length > 0}>
+                <MetadataInput
+                  selectedAssetFile={assetFilesArray[0]}
+                  selectedMetadataFile={metadataFilesArray[0]}
+                  updateMetadataToUpload={updateBaseMinterMetadataFile}
+                />
+              </Conditional>
             </div>
           </div>
         </Conditional>

components/forms/MetadataAttributes.tsx

@@ -78,7 +78,7 @@ export function MetadataAttribute({ id, isLast, onAdd, onChange, onRemove, defau
       <TraitValueInput {...traitValueState} />
       <div className="flex justify-end items-end pb-2 w-8">
         <button
-          className="flex justify-center items-center p-2 bg-plumbus-80 hover:bg-plumbus-60 rounded-full"
+          className="flex justify-center items-center p-2 bg-stargaze-80 hover:bg-plumbus-60 rounded-full"
           onClick={(e) => {
             e.preventDefault()
             isLast ? onAdd() : onRemove(id)

pages/collections/create.tsx

@@ -15,9 +15,9 @@ import {
   UploadDetails,
   WhitelistDetails,
 } from 'components/collections/creation'
+import type { BaseMinterDetailsDataProps } from 'components/collections/creation/BaseMinterDetails'
+import { BaseMinterDetails } from 'components/collections/creation/BaseMinterDetails'
 import type { CollectionDetailsDataProps } from 'components/collections/creation/CollectionDetails'
-import type { MinterDetailsDataProps } from 'components/collections/creation/MinterDetails'
-import { MinterDetails } from 'components/collections/creation/MinterDetails'
 import type { MintingDetailsDataProps } from 'components/collections/creation/MintingDetails'
 import type { RoyaltyDetailsDataProps } from 'components/collections/creation/RoyaltyDetails'
 import type { UploadDetailsDataProps } from 'components/collections/creation/UploadDetails'
@@ -76,13 +76,14 @@ const CollectionCreationPage: NextPage = () => {
 
   const [uploadDetails, setUploadDetails] = useState<UploadDetailsDataProps | null>(null)
   const [collectionDetails, setCollectionDetails] = useState<CollectionDetailsDataProps | null>(null)
-  const [minterDetails, setMinterDetails] = useState<MinterDetailsDataProps | null>(null)
+  const [baseMinterDetails, setBaseMinterDetails] = useState<BaseMinterDetailsDataProps | null>(null)
   const [mintingDetails, setMintingDetails] = useState<MintingDetailsDataProps | null>(null)
   const [whitelistDetails, setWhitelistDetails] = useState<WhitelistDetailsDataProps | null>(null)
   const [royaltyDetails, setRoyaltyDetails] = useState<RoyaltyDetailsDataProps | null>(null)
   const [minterType, setMinterType] = useState<MinterType>('vending')
 
   const [uploading, setUploading] = useState(false)
+  const [isMintingComplete, setIsMintingComplete] = useState(false)
   const [creatingCollection, setCreatingCollection] = useState(false)
   const [readyToCreateVm, setReadyToCreateVm] = useState(false)
   const [readyToCreateBm, setReadyToCreateBm] = useState(false)
@@ -223,6 +224,7 @@ const CollectionCreationPage: NextPage = () => {
       setBaseTokenUri(null)
       setCoverImageUrl(null)
       setVendingMinterContractAddress(null)
+      setIsMintingComplete(false)
       setSg721ContractAddress(null)
       setWhitelistContractAddress(null)
       setTransactionHash(null)
@@ -242,11 +244,19 @@ const CollectionCreationPage: NextPage = () => {
 
         setUploading(false)
 
-        setBaseTokenUri(baseUri)
+        setBaseTokenUri(
+          `${baseUri}/${(uploadDetails.baseMinterMetadataFile as File).name.substring(
+            0,
+            (uploadDetails.baseMinterMetadataFile as File).name.lastIndexOf('.'),
+          )}`,
+        )
         setCoverImageUrl(coverImageUri)
 
         await instantiateBaseMinter(
-          `ipfs://${baseUri}/${uploadDetails.metadataFiles[0].name.split('.')[0]}`,
+          `ipfs://${baseUri}/${(uploadDetails.baseMinterMetadataFile as File).name.substring(
+            0,
+            (uploadDetails.baseMinterMetadataFile as File).name.lastIndexOf('.'),
+          )}`,
           coverImageUri,
         )
       } else {
@@ -276,32 +286,46 @@ const CollectionCreationPage: NextPage = () => {
       setTransactionHash(null)
 
       if (uploadDetails?.uploadMethod === 'new') {
+        console.log(JSON.stringify(uploadDetails.baseMinterMetadataFile?.text()))
         setUploading(true)
         await uploadFiles()
           .then(async (baseUri) => {
             setUploading(false)
-            setBaseTokenUri(baseUri)
+            setBaseTokenUri(
+              `${baseUri}/${(uploadDetails.baseMinterMetadataFile as File).name.substring(
+                0,
+                (uploadDetails.baseMinterMetadataFile as File).name.lastIndexOf('.'),
+              )}`,
+            )
             const result = await baseMinterContract
-              .use(minterDetails?.existingMinter as string)
+              .use(baseMinterDetails?.existingBaseMinter as string)
-              // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+
-              ?.mint(wallet.address, `ipfs://${baseUri}/${uploadDetails?.metadataFiles[0].name.split('.')[0]}`)
+              ?.mint(
+                wallet.address,
+                `ipfs://${baseUri}/${(uploadDetails.baseMinterMetadataFile as File).name.substring(
+                  0,
+                  (uploadDetails.baseMinterMetadataFile as File).name.lastIndexOf('.'),
+                )}`,
+              )
             console.log(result)
             return result
           })
           .then((result) => {
             toast.success(`Minted successfully! Tx Hash: ${result}`, { style: { maxWidth: 'none' }, duration: 5000 })
+            setIsMintingComplete(true)
           })
           .catch((error) => {
             toast.error(error.message, { style: { maxWidth: 'none' } })
             setUploading(false)
             setCreatingCollection(false)
+            setIsMintingComplete(false)
           })
       } else {
         setBaseTokenUri(uploadDetails?.baseTokenURI as string)
         setUploading(false)
         await baseMinterContract
-          .use(minterDetails?.existingMinter as string)
+          .use(baseMinterDetails?.existingBaseMinter as string)
-          ?.mint(wallet.address, `ipfs://${uploadDetails?.baseTokenURI}`)
+          ?.mint(wallet.address, `${uploadDetails?.baseTokenURI?.trim()}`)
           .then((result) => {
             toast.success(`Minted successfully! Tx Hash: ${result}`, { style: { maxWidth: 'none' }, duration: 5000 })
           })
@@ -459,7 +483,10 @@ const CollectionCreationPage: NextPage = () => {
               ?.mint(wallet.address, baseUri) as Promise<string>,
             {
               loading: 'Minting token...',
-              success: (result) => `Token minted successfully! Tx Hash: ${result}`,
+              success: (result) => {
+                setIsMintingComplete(true)
+                return `Token minted successfully! Tx Hash: ${result}`
+              },
               error: (error) => `Failed to mint token: ${error.message}`,
             },
             { style: { maxWidth: 'none' } },
@@ -467,6 +494,7 @@ const CollectionCreationPage: NextPage = () => {
           .catch((error) => {
             toast.error(error.message, { style: { maxWidth: 'none' } })
             setUploading(false)
+            setIsMintingComplete(false)
             setCreatingCollection(false)
           })
         setUploading(false)
@@ -491,6 +519,7 @@ const CollectionCreationPage: NextPage = () => {
         uploadDetails.pinataSecretKey as string,
       )
         .then((assetUri: string) => {
+          if (minterType === 'vending') {
             const fileArray: File[] = []
             let reader: FileReader
 
@@ -514,7 +543,10 @@ const CollectionCreationPage: NextPage = () => {
 
                 const updatedMetadataFile = new File(
                   [metadataFileBlob],
-                uploadDetails.metadataFiles[i].name.substring(0, uploadDetails.metadataFiles[i].name.lastIndexOf('.')),
+                  uploadDetails.metadataFiles[i].name.substring(
+                    0,
+                    uploadDetails.metadataFiles[i].name.lastIndexOf('.'),
+                  ),
                   {
                     type: 'application/json',
                   },
@@ -538,6 +570,55 @@ const CollectionCreationPage: NextPage = () => {
               }
               reader.readAsText(uploadDetails.metadataFiles[i], 'utf8')
             }
+          } else if (minterType === 'base') {
+            const fileArray: File[] = []
+            const reader: FileReader = new FileReader()
+
+            reader.onload = (e) => {
+              const data: any = JSON.parse(e.target?.result as string)
+
+              if (
+                getAssetType(uploadDetails.assetFiles[0].name) === 'audio' ||
+                getAssetType(uploadDetails.assetFiles[0].name) === 'video'
+              ) {
+                data.animation_url = `ipfs://${assetUri}/${uploadDetails.assetFiles[0].name}`
+              }
+
+              data.image = `ipfs://${assetUri}/${uploadDetails.assetFiles[0].name}`
+
+              const metadataFileBlob = new Blob([JSON.stringify(data)], {
+                type: 'application/json',
+              })
+
+              console.log('Name: ', (uploadDetails.baseMinterMetadataFile as File).name)
+              const updatedMetadataFile = new File(
+                [metadataFileBlob],
+                (uploadDetails.baseMinterMetadataFile as File).name.substring(
+                  0,
+                  (uploadDetails.baseMinterMetadataFile as File).name.lastIndexOf('.'),
+                ),
+                {
+                  type: 'application/json',
+                },
+              )
+
+              fileArray.push(updatedMetadataFile)
+            }
+            reader.onloadend = () => {
+              upload(
+                fileArray,
+                uploadDetails.uploadService,
+                'metadata',
+                uploadDetails.nftStorageApiKey as string,
+                uploadDetails.pinataApiKey as string,
+                uploadDetails.pinataSecretKey as string,
+              )
+                .then(resolve)
+                .catch(reject)
+            }
+            console.log('File: ', uploadDetails.baseMinterMetadataFile)
+            reader.readAsText(uploadDetails.baseMinterMetadataFile as File, 'utf8')
+          }
         })
         .catch(reject)
     })
@@ -554,7 +635,7 @@ const CollectionCreationPage: NextPage = () => {
     if (uploadDetails.uploadMethod === 'new' && uploadDetails.assetFiles.length === 0) {
       throw new Error('Please select the assets')
     }
-    if (uploadDetails.uploadMethod === 'new' && uploadDetails.metadataFiles.length === 0) {
+    if (minterType === 'vending' && uploadDetails.uploadMethod === 'new' && uploadDetails.metadataFiles.length === 0) {
       throw new Error('Please select the metadata files')
     }
     if (uploadDetails.uploadMethod === 'new' && minterType === 'vending')
@@ -571,7 +652,7 @@ 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) {
+    if (baseMinterDetails?.baseMinterAcquisitionMethod === 'existing' && !baseMinterDetails.existingBaseMinter) {
       throw new Error('Please specify a valid Base Minter contract address')
     }
   }
@@ -600,6 +681,7 @@ const CollectionCreationPage: NextPage = () => {
     if (Number(mintingDetails.unitPrice) < 50000000)
       throw new Error('Invalid unit price: The minimum unit price is 50 STARS')
     if (
+      !mintingDetails.perAddressLimit ||
       mintingDetails.perAddressLimit < 1 ||
       mintingDetails.perAddressLimit > 50 ||
       mintingDetails.perAddressLimit > mintingDetails.numTokens
@@ -634,7 +716,7 @@ const CollectionCreationPage: NextPage = () => {
           Number(config.per_address_limit) > mintingDetails.numTokens / 100
         )
           throw Error(
-            `Whitelist configuration error: Invalid limit for tokens per address (${config.per_address_limit} tokens). The limit cannot exceed 1% of the total number of tokens.`,
+            `Invalid limit for tokens per address (${config.per_address_limit} tokens). The limit cannot exceed 1% of the total number of tokens.`,
           )
       }
     } else if (whitelistDetails.whitelistType === 'new') {
@@ -659,7 +741,7 @@ const CollectionCreationPage: NextPage = () => {
         whitelistDetails.perAddressLimit > mintingDetails.numTokens / 100
       )
         throw Error(
-          `Whitelist configuration error: Invalid limit for tokens per address (${whitelistDetails.perAddressLimit} tokens). The limit cannot exceed 1% of the total number of tokens.`,
+          `Invalid limit for tokens per address (${whitelistDetails.perAddressLimit} tokens). The limit cannot exceed 1% of the total number of tokens.`,
         )
     }
   }
@@ -697,13 +779,14 @@ const CollectionCreationPage: NextPage = () => {
   useEffect(() => {
     resetReadyFlags()
     setVendingMinterContractAddress(null)
-  }, [minterType, minterDetails?.minterAcquisitionMethod])
+    setIsMintingComplete(false)
+  }, [minterType, baseMinterDetails?.baseMinterAcquisitionMethod, uploadDetails?.uploadMethod])
 
   return (
     <div>
       <NextSeo
         title={
-          minterType === 'base' && minterDetails?.minterAcquisitionMethod === 'existing'
+          minterType === 'base' && baseMinterDetails?.baseMinterAcquisitionMethod === 'existing'
             ? 'Mint Token'
             : 'Create Collection'
         }
@@ -711,7 +794,7 @@ const CollectionCreationPage: NextPage = () => {
 
       <div className="mt-5 space-y-5 text-center">
         <h1 className="font-heading text-4xl font-bold">
-          {minterType === 'base' && minterDetails?.minterAcquisitionMethod === 'existing'
+          {minterType === 'base' && baseMinterDetails?.baseMinterAcquisitionMethod === 'existing'
             ? 'Mint Token'
             : 'Create Collection'}
         </h1>
@@ -732,7 +815,8 @@ const CollectionCreationPage: NextPage = () => {
         <Conditional test={vendingMinterContractAddress !== null}>
           <Alert className="mt-5" type="info">
             <div>
-              Base Token URI:{' '}
+              <Conditional test={minterType === 'vending' || isMintingComplete}>
+                {minterType === 'vending' ? 'Base Token URI: ' : 'Token URI: '}{' '}
                 {uploadDetails?.uploadMethod === 'new' && (
                   <Anchor
                     className="text-stargaze hover:underline"
@@ -754,6 +838,7 @@ const CollectionCreationPage: NextPage = () => {
                   </Anchor>
                 )}
                 <br />
+              </Conditional>
               Minter Contract Address:{'  '}
               <Anchor
                 className="text-stargaze hover:underline"
@@ -882,28 +967,33 @@ const CollectionCreationPage: NextPage = () => {
 
       {minterType === 'base' && (
         <div>
-          <MinterDetails minterType={minterType} onChange={setMinterDetails} />
+          <BaseMinterDetails minterType={minterType} onChange={setBaseMinterDetails} />
         </div>
       )}
 
       <div className="mx-10">
         <UploadDetails
-          minterAcquisitionMethod={minterDetails?.minterAcquisitionMethod}
+          baseMinterAcquisitionMethod={baseMinterDetails?.baseMinterAcquisitionMethod}
           minterType={minterType}
           onChange={setUploadDetails}
         />
 
         <Conditional
-          test={minterType === 'vending' || (minterType === 'base' && minterDetails?.minterAcquisitionMethod === 'new')}
+          test={
+            minterType === 'vending' ||
+            (minterType === 'base' && baseMinterDetails?.baseMinterAcquisitionMethod === 'new')
+          }
         >
           <div className="flex justify-between py-3 px-8 rounded border-2 border-white/20 grid-col-2">
             <Conditional
               test={
-                minterType === 'vending' || (minterType === 'base' && minterDetails?.minterAcquisitionMethod === 'new')
+                minterType === 'vending' ||
+                (minterType === 'base' && baseMinterDetails?.baseMinterAcquisitionMethod === 'new')
               }
             >
               <CollectionDetails
                 coverImageUrl={coverImageUrl as string}
+                minterType={minterType}
                 onChange={setCollectionDetails}
                 uploadMethod={uploadDetails?.uploadMethod as UploadMethod}
               />
@@ -919,7 +1009,10 @@ const CollectionCreationPage: NextPage = () => {
         </Conditional>
 
         <Conditional
-          test={minterType === 'vending' || (minterType === 'base' && minterDetails?.minterAcquisitionMethod === 'new')}
+          test={
+            minterType === 'vending' ||
+            (minterType === 'base' && baseMinterDetails?.baseMinterAcquisitionMethod === 'new')
+          }
         >
           <div className="my-6">
             <Conditional test={minterType === 'vending'}>
@@ -933,12 +1026,16 @@ const CollectionCreationPage: NextPage = () => {
           <ConfirmationModal confirm={createVendingMinterCollection} />
         </Conditional>
         <Conditional
-          test={readyToCreateBm && minterType === 'base' && minterDetails?.minterAcquisitionMethod === 'new'}
+          test={readyToCreateBm && minterType === 'base' && baseMinterDetails?.baseMinterAcquisitionMethod === 'new'}
         >
           <ConfirmationModal confirm={createBaseMinterCollection} />
         </Conditional>
         <Conditional
-          test={readyToUploadAndMint && minterType === 'base' && minterDetails?.minterAcquisitionMethod === 'existing'}
+          test={
+            readyToUploadAndMint &&
+            minterType === 'base' &&
+            baseMinterDetails?.baseMinterAcquisitionMethod === 'existing'
+          }
         >
           <ConfirmationModal confirm={uploadAndMint} />
         </Conditional>
@@ -953,7 +1050,7 @@ const CollectionCreationPage: NextPage = () => {
               Create Collection
             </Button>
           </Conditional>
-          <Conditional test={minterType === 'base' && minterDetails?.minterAcquisitionMethod === 'new'}>
+          <Conditional test={minterType === 'base' && baseMinterDetails?.baseMinterAcquisitionMethod === 'new'}>
             <Button
               className="relative justify-center p-2 mb-6 max-h-12 text-white bg-plumbus hover:bg-plumbus-light border-0"
               isLoading={creatingCollection}
@@ -963,7 +1060,7 @@ const CollectionCreationPage: NextPage = () => {
               Create Collection
             </Button>
           </Conditional>
-          <Conditional test={minterType === 'base' && minterDetails?.minterAcquisitionMethod === 'existing'}>
+          <Conditional test={minterType === 'base' && baseMinterDetails?.baseMinterAcquisitionMethod === 'existing'}>
             <Button
               className="relative justify-center p-2 mb-6 max-h-12 text-white bg-plumbus hover:bg-plumbus-light border-0"
               isLoading={creatingCollection}