Surface standard & 1/1 collection configuration

components/collections/creation/BaseMinterDetails.tsx

@@ -28,6 +28,7 @@ export interface MinterInfo {
 interface BaseMinterDetailsProps {
   onChange: (data: BaseMinterDetailsDataProps) => void
   minterType: MinterType
+  importedBaseMinterDetails?: BaseMinterDetailsDataProps
 }
 
 export interface BaseMinterDetailsDataProps {
@@ -37,7 +38,7 @@ export interface BaseMinterDetailsDataProps {
   collectionTokenCount: number | undefined
 }
 
-export const BaseMinterDetails = ({ onChange, minterType }: BaseMinterDetailsProps) => {
+export const BaseMinterDetails = ({ onChange, minterType, importedBaseMinterDetails }: BaseMinterDetailsProps) => {
   const wallet = useWallet()
 
   const [myBaseMinterContracts, setMyBaseMinterContracts] = useState<MinterInfo[]>([])
@@ -198,6 +199,15 @@ export const BaseMinterDetails = ({ onChange, minterType }: BaseMinterDetailsPro
     collectionTokenCount,
   ])
 
+  useEffect(() => {
+    if (importedBaseMinterDetails) {
+      setBaseMinterAcquisitionMethod(importedBaseMinterDetails.baseMinterAcquisitionMethod)
+      existingBaseMinterState.onChange(
+        importedBaseMinterDetails.existingBaseMinter ? importedBaseMinterDetails.existingBaseMinter : '',
+      )
+    }
+  }, [importedBaseMinterDetails])
+
   return (
     <div className="mx-10 mb-4 rounded border-2 border-white/20">
       <div className="flex justify-center mb-2">

components/collections/creation/CollectionDetails.tsx

@@ -26,6 +26,7 @@ interface CollectionDetailsProps {
   uploadMethod: UploadMethod
   coverImageUrl: string
   minterType: MinterType
+  importedCollectionDetails?: CollectionDetailsDataProps
 }
 
 export interface CollectionDetailsDataProps {
@@ -39,7 +40,13 @@ export interface CollectionDetailsDataProps {
   updatable: boolean
 }
 
-export const CollectionDetails = ({ onChange, uploadMethod, coverImageUrl, minterType }: CollectionDetailsProps) => {
+export const CollectionDetails = ({
+  onChange,
+  uploadMethod,
+  coverImageUrl,
+  minterType,
+  importedCollectionDetails,
+}: CollectionDetailsProps) => {
   const [coverImage, setCoverImage] = useState<File | null>(null)
   const [timestamp, setTimestamp] = useState<Date | undefined>()
   const [explicit, setExplicit] = useState<boolean>(false)
@@ -105,6 +112,23 @@ export const CollectionDetails = ({ onChange, uploadMethod, coverImageUrl, minte
     updatable,
   ])
 
+  useEffect(() => {
+    if (importedCollectionDetails) {
+      nameState.onChange(importedCollectionDetails.name)
+      descriptionState.onChange(importedCollectionDetails.description)
+      symbolState.onChange(importedCollectionDetails.symbol)
+      externalLinkState.onChange(importedCollectionDetails.externalLink || '')
+      setTimestamp(
+        importedCollectionDetails.startTradingTime
+          ? new Date(parseInt(importedCollectionDetails.startTradingTime) / 1_000_000)
+          : undefined,
+      )
+      setExplicit(importedCollectionDetails.explicit)
+      setUpdatable(importedCollectionDetails.updatable)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [importedCollectionDetails])
+
   const selectCoverImage = (event: ChangeEvent<HTMLInputElement>) => {
     if (event.target.files === null) return toast.error('Error selecting cover image')
     if (event.target.files.length === 0) {

components/collections/creation/MintingDetails.tsx

@@ -16,6 +16,7 @@ interface MintingDetailsProps {
   numberOfTokens: number | undefined
   uploadMethod: UploadMethod
   minimumMintPrice: number
+  importedMintingDetails?: MintingDetailsDataProps
 }
 
 export interface MintingDetailsDataProps {
@@ -26,7 +27,13 @@ export interface MintingDetailsDataProps {
   paymentAddress?: string
 }
 
-export const MintingDetails = ({ onChange, numberOfTokens, uploadMethod, minimumMintPrice }: MintingDetailsProps) => {
+export const MintingDetails = ({
+  onChange,
+  numberOfTokens,
+  uploadMethod,
+  minimumMintPrice,
+  importedMintingDetails,
+}: MintingDetailsProps) => {
   const wallet = useWallet()
 
   const [timestamp, setTimestamp] = useState<Date | undefined>()
@@ -97,6 +104,17 @@ export const MintingDetails = ({ onChange, numberOfTokens, uploadMethod, minimum
     paymentAddressState.value,
   ])
 
+  useEffect(() => {
+    if (importedMintingDetails) {
+      numberOfTokensState.onChange(importedMintingDetails.numTokens)
+      unitPriceState.onChange(Number(importedMintingDetails.unitPrice) / 1_000_000)
+      perAddressLimitState.onChange(importedMintingDetails.perAddressLimit)
+      setTimestamp(new Date(Number(importedMintingDetails.startTime) / 1_000_000))
+      paymentAddressState.onChange(importedMintingDetails.paymentAddress ? importedMintingDetails.paymentAddress : '')
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [importedMintingDetails])
+
   return (
     <div>
       <FormGroup subtitle="Information about your minting settings" title="Minting Details">

components/collections/creation/RoyaltyDetails.tsx

@@ -9,6 +9,7 @@ import { NumberInput, TextInput } from '../../forms/FormInput'
 
 interface RoyaltyDetailsProps {
   onChange: (data: RoyaltyDetailsDataProps) => void
+  importedRoyaltyDetails?: RoyaltyDetailsDataProps
 }
 
 export interface RoyaltyDetailsDataProps {
@@ -19,7 +20,7 @@ export interface RoyaltyDetailsDataProps {
 
 type RoyaltyState = 'none' | 'new'
 
-export const RoyaltyDetails = ({ onChange }: RoyaltyDetailsProps) => {
+export const RoyaltyDetails = ({ onChange, importedRoyaltyDetails }: RoyaltyDetailsProps) => {
   const wallet = useWallet()
   const [royaltyState, setRoyaltyState] = useState<RoyaltyState>('none')
 
@@ -60,6 +61,15 @@ export const RoyaltyDetails = ({ onChange }: RoyaltyDetailsProps) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [royaltyState, royaltyPaymentAddressState.value, royaltyShareState.value])
 
+  useEffect(() => {
+    if (importedRoyaltyDetails) {
+      setRoyaltyState(importedRoyaltyDetails.royaltyType)
+      royaltyPaymentAddressState.onChange(importedRoyaltyDetails.paymentAddress)
+      royaltyShareState.onChange(importedRoyaltyDetails.share.toString())
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [importedRoyaltyDetails])
+
   return (
     <div className="py-3 px-8 rounded border-2 border-white/20">
       <div className="flex justify-center">

components/collections/creation/UploadDetails.tsx

@@ -31,6 +31,7 @@ interface UploadDetailsProps {
   onChange: (value: UploadDetailsDataProps) => void
   minterType: MinterType
   baseMinterAcquisitionMethod?: BaseMinterAcquisitionMethod
+  importedUploadDetails?: UploadDetailsDataProps
 }
 
 export interface UploadDetailsDataProps {
@@ -46,7 +47,12 @@ export interface UploadDetailsDataProps {
   baseMinterMetadataFile?: File
 }
 
-export const UploadDetails = ({ onChange, minterType, baseMinterAcquisitionMethod }: UploadDetailsProps) => {
+export const UploadDetails = ({
+  onChange,
+  minterType,
+  baseMinterAcquisitionMethod,
+  importedUploadDetails,
+}: UploadDetailsProps) => {
   const [assetFilesArray, setAssetFilesArray] = useState<File[]>([])
   const [metadataFilesArray, setMetadataFilesArray] = useState<File[]>([])
   const [uploadMethod, setUploadMethod] = useState<UploadMethod>('new')
@@ -274,10 +280,31 @@ export const UploadDetails = ({ onChange, minterType, baseMinterAcquisitionMetho
     setMetadataFilesArray([])
     if (assetFilesRef.current) assetFilesRef.current.value = ''
     setAssetFilesArray([])
-    baseTokenUriState.onChange('')
-    coverImageUrlState.onChange('')
+    if (!importedUploadDetails) {
+      baseTokenUriState.onChange('')
+      coverImageUrlState.onChange('')
+    }
   }, [uploadMethod, minterType, baseMinterAcquisitionMethod])
 
+  useEffect(() => {
+    if (importedUploadDetails) {
+      if (importedUploadDetails.uploadMethod === 'new') {
+        setUploadMethod('existing')
+        setUploadService(importedUploadDetails.uploadService)
+        nftStorageApiKeyState.onChange(importedUploadDetails.nftStorageApiKey || '')
+        pinataApiKeyState.onChange(importedUploadDetails.pinataApiKey || '')
+        pinataSecretKeyState.onChange(importedUploadDetails.pinataSecretKey || '')
+        baseTokenUriState.onChange(importedUploadDetails.baseTokenURI || '')
+        coverImageUrlState.onChange(importedUploadDetails.imageUrl || '')
+      } else if (importedUploadDetails.uploadMethod === 'existing') {
+        setUploadMethod('existing')
+        baseTokenUriState.onChange(importedUploadDetails.baseTokenURI || '')
+        coverImageUrlState.onChange(importedUploadDetails.imageUrl || '')
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [importedUploadDetails])
+
   return (
     <div className="justify-items-start mb-3 rounded border-2 border-white/20 flex-column">
       <div className="flex justify-center">

components/collections/creation/WhitelistDetails.tsx

@@ -18,6 +18,7 @@ import { WhitelistUpload } from '../../WhitelistUpload'
 
 interface WhitelistDetailsProps {
   onChange: (data: WhitelistDetailsDataProps) => void
+  importedWhitelistDetails?: WhitelistDetailsDataProps
 }
 
 export interface WhitelistDetailsDataProps {
@@ -38,7 +39,7 @@ type WhitelistState = 'none' | 'existing' | 'new'
 
 type WhitelistType = 'standard' | 'flex'
 
-export const WhitelistDetails = ({ onChange }: WhitelistDetailsProps) => {
+export const WhitelistDetails = ({ onChange, importedWhitelistDetails }: WhitelistDetailsProps) => {
   const [whitelistState, setWhitelistState] = useState<WhitelistState>('none')
   const [whitelistType, setWhitelistType] = useState<WhitelistType>('standard')
   const [startDate, setStartDate] = useState<Date | undefined>(undefined)
@@ -89,8 +90,10 @@ export const WhitelistDetails = ({ onChange }: WhitelistDetailsProps) => {
   }
 
   useEffect(() => {
-    setWhitelistStandardArray([])
-    setWhitelistFlexArray([])
+    if (!importedWhitelistDetails) {
+      setWhitelistStandardArray([])
+      setWhitelistFlexArray([])
+    }
   }, [whitelistType])
 
   useEffect(() => {
@@ -138,6 +141,53 @@ export const WhitelistDetails = ({ onChange }: WhitelistDetailsProps) => {
     adminsMutable,
   ])
 
+  // make the necessary changes with respect to imported whitelist details
+  useEffect(() => {
+    if (importedWhitelistDetails) {
+      setWhitelistState(importedWhitelistDetails.whitelistState)
+      setWhitelistType(importedWhitelistDetails.whitelistType)
+      whitelistAddressState.onChange(
+        importedWhitelistDetails.contractAddress ? importedWhitelistDetails.contractAddress : '',
+      )
+      unitPriceState.onChange(importedWhitelistDetails.unitPrice ? Number(importedWhitelistDetails.unitPrice) : 0)
+      memberLimitState.onChange(importedWhitelistDetails.memberLimit ? importedWhitelistDetails.memberLimit : 0)
+      perAddressLimitState.onChange(
+        importedWhitelistDetails.perAddressLimit ? importedWhitelistDetails.perAddressLimit : 0,
+      )
+      setStartDate(
+        importedWhitelistDetails.startTime
+          ? new Date(Number(importedWhitelistDetails.startTime) / 1_000_000)
+          : undefined,
+      )
+      setEndDate(
+        importedWhitelistDetails.endTime ? new Date(Number(importedWhitelistDetails.endTime) / 1_000_000) : undefined,
+      )
+      setAdminsMutable(importedWhitelistDetails.adminsMutable ? importedWhitelistDetails.adminsMutable : true)
+      importedWhitelistDetails.admins?.forEach((admin) => {
+        addressListState.reset()
+        addressListState.add({ address: admin })
+      })
+      if (importedWhitelistDetails.whitelistType === 'standard') {
+        setWhitelistStandardArray([])
+        importedWhitelistDetails.members?.forEach((member) => {
+          setWhitelistStandardArray((standardArray) => [...standardArray, member as string])
+        })
+      } else {
+        setWhitelistFlexArray([])
+        importedWhitelistDetails.members?.forEach((member) => {
+          setWhitelistFlexArray((flexArray) => [
+            ...flexArray,
+            {
+              address: (member as WhitelistFlexMember).address,
+              mint_count: (member as WhitelistFlexMember).mint_count,
+            },
+          ])
+        })
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [importedWhitelistDetails])
+
   return (
     <div className="py-3 px-8 rounded border-2 border-white/20">
       <div className="flex justify-center">