Merge pull request #82 from public-awesome/manual-metadata-input
Manual metadata input option for 1/1 minting
This commit is contained in:
Serkan Reis
GitHub
commit
0cb5e0e6b6
@ -1,4 +1,4 @@
|
||||
APP_VERSION=0.3.4
|
||||
APP_VERSION=0.3.5
|
||||
|
||||
NEXT_PUBLIC_PINATA_ENDPOINT_URL=https://api.pinata.cloud/pinning/pinFileToIPFS
|
||||
NEXT_PUBLIC_SG721_CODE_ID=274
|
||||
|
||||
@ -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(
|
||||
'absolute px-1 my-1 thumbnail',
|
||||
{ 'max-h-24': minterType === 'vending' },
|
||||
{ 'max-h-72': minterType === 'base' },
|
||||
)}
|
||||
className={clsx('absolute px-1 my-1 max-h-24 thumbnail')}
|
||||
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',
|
||||
{ 'w-[100px] h-[100px]': minterType === 'vending' },
|
||||
{ 'mt-14 ml-20 w-[288px] h-[288px]': minterType === 'base' },
|
||||
'relative p-0 w-[100px] h-[100px] bg-transparent hover:bg-transparent border-0 btn modal-button',
|
||||
)}
|
||||
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(
|
||||
'mb-2 ml-1 thumbnail',
|
||||
{ 'w-6 h-6': minterType === 'vending' },
|
||||
{ 'w-24 h-24': minterType === 'base' },
|
||||
)}
|
||||
className={clsx('mb-2 ml-1 w-6 h-6 thumbnail')}
|
||||
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(
|
||||
'px-1 my-1 thumbnail',
|
||||
{ 'max-h-24': minterType === 'vending' },
|
||||
{ 'max-h-72': minterType === 'base' },
|
||||
)}
|
||||
className={clsx('px-1 my-1 max-h-24 thumbnail')}
|
||||
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>
|
||||
)
|
||||
}
|
||||
|
||||
198
components/MetadataInput.tsx
Normal file
198
components/MetadataInput.tsx
Normal file
@ -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>
|
||||
)
|
||||
}
|
||||
@ -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(() => {
|
||||
|
||||
64
components/SingleAssetPreview.tsx
Normal file
64
components/SingleAssetPreview.tsx
Normal file
@ -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>
|
||||
)
|
||||
}
|
||||
@ -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`
|
||||
},
|
||||
},
|
||||
|
||||
@ -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 {
|
||||
onChange: (data: MinterDetailsDataProps) => void
|
||||
interface BaseMinterDetailsProps {
|
||||
onChange: (data: BaseMinterDetailsDataProps) => void
|
||||
minterType: MinterType
|
||||
}
|
||||
|
||||
export interface MinterDetailsDataProps {
|
||||
minterAcquisitionMethod: MinterAcquisitionMethod
|
||||
existingMinter: string | undefined
|
||||
export interface BaseMinterDetailsDataProps {
|
||||
baseMinterAcquisitionMethod: BaseMinterAcquisitionMethod
|
||||
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(() => {
|
||||
return myBaseMinterContracts.map((minterContract, index) => {
|
||||
const renderBaseMinterContracts = useCallback(() => {
|
||||
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 = {
|
||||
minterAcquisitionMethod,
|
||||
existingMinter: existingMinterState.value,
|
||||
const data: BaseMinterDetailsDataProps = {
|
||||
baseMinterAcquisitionMethod,
|
||||
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>
|
||||
)}
|
||||
@ -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 {...symbolState} isRequired />
|
||||
<TextInput className="mt-2" {...descriptionState} 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">
|
||||
|
||||
@ -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}>
|
||||
<AssetsPreview
|
||||
assetFilesArray={assetFilesArray}
|
||||
minterType={minterType}
|
||||
<Conditional test={assetFilesArray.length > 0 && minterType === 'vending'}>
|
||||
<AssetsPreview assetFilesArray={assetFilesArray} updateMetadataFileIndex={updateMetadataFileIndex} />
|
||||
</Conditional>
|
||||
<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>
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "stargaze-studio",
|
||||
"version": "0.3.4",
|
||||
"version": "0.3.5",
|
||||
"workspaces": [
|
||||
"packages/*"
|
||||
],
|
||||
|
||||
@ -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)
|
||||
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
||||
?.mint(wallet.address, `ipfs://${baseUri}/${uploadDetails?.metadataFiles[0].name.split('.')[0]}`)
|
||||
.use(baseMinterDetails?.existingBaseMinter as string)
|
||||
|
||||
?.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)
|
||||
?.mint(wallet.address, `ipfs://${uploadDetails?.baseTokenURI}`)
|
||||
.use(baseMinterDetails?.existingBaseMinter as string)
|
||||
?.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}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user