Dictate minting start time wrt whitelist start time

components/collections/creation/MintingDetails.tsx

@@ -23,6 +23,8 @@ interface MintingDetailsProps {
   minimumMintPrice: number
   mintingTokenFromFactory?: TokenInfo
   importedMintingDetails?: MintingDetailsDataProps
+  isPresale: boolean
+  whitelistStartDate?: string
 }
 
 export interface MintingDetailsDataProps {
@@ -41,6 +43,8 @@ export const MintingDetails = ({
   minimumMintPrice,
   mintingTokenFromFactory,
   importedMintingDetails,
+  isPresale,
+  whitelistStartDate,
 }: MintingDetailsProps) => {
   const wallet = useWallet()
   const { timezone } = useGlobalSettings()
@@ -130,6 +134,12 @@ export const MintingDetails = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [importedMintingDetails])
 
+  useEffect(() => {
+    if (isPresale) {
+      setTimestamp(whitelistStartDate ? new Date(Number(whitelistStartDate) / 1_000_000) : undefined)
+    }
+  }, [whitelistStartDate, isPresale])
+
   return (
     <div>
       <FormGroup subtitle="Information about your minting settings" title="Minting Details">
@@ -163,10 +173,13 @@ export const MintingDetails = ({
         <FormControl
           htmlId="timestamp"
           isRequired
-          subtitle={`Minting start time ${timezone === 'Local' ? '(local)' : '(UTC)'}`}
+          subtitle={`Minting start time ${isPresale ? '(is dictated by whitelist start time)' : ''} ${
+            timezone === 'Local' ? '(local)' : '(UTC)'
+          }`}
           title="Start Time"
         >
           <InputDateTime
+            disabled={isPresale}
             minDate={
               timezone === 'Local' ? new Date() : new Date(Date.now() + new Date().getTimezoneOffset() * 60 * 1000)
             }

components/collections/creation/WhitelistDetails.tsx

@@ -332,7 +332,7 @@ export const WhitelistDetails = ({
               htmlId="start-date"
               isRequired
               subtitle="Start time for minting tokens to whitelisted addresses"
-              title={`Start Time ${timezone === 'Local' ? '(local)' : '(UTC)'}`}
+              title={`Whitelist Start Time ${timezone === 'Local' ? '(local)' : '(UTC)'}`}
             >
               <InputDateTime
                 minDate={
@@ -359,8 +359,8 @@ export const WhitelistDetails = ({
             <FormControl
               htmlId="end-date"
               isRequired
-              subtitle="End time for minting tokens to whitelisted addresses"
+              subtitle="Whitelist End Time dictates when public sales will start"
-              title={`End Time ${timezone === 'Local' ? '(local)' : '(UTC)'}`}
+              title={`Whitelist End Time ${timezone === 'Local' ? '(local)' : '(UTC)'}`}
             >
               <InputDateTime
                 minDate={

pages/collections/create.tsx

@@ -1908,6 +1908,7 @@ const CollectionCreationPage: NextPage = () => {
             <Conditional test={minterType === 'vending'}>
               <MintingDetails
                 importedMintingDetails={importedDetails?.mintingDetails}
+                isPresale={whitelistDetails?.whitelistState === 'new'}
                 minimumMintPrice={
                   whitelistDetails?.whitelistState !== 'none' && whitelistDetails?.whitelistType === 'flex'
                     ? Number(minimumFlexMintPrice) / 1000000
@@ -1919,6 +1920,7 @@ const CollectionCreationPage: NextPage = () => {
                 numberOfTokens={uploadDetails?.assetFiles.length}
                 onChange={setMintingDetails}
                 uploadMethod={uploadDetails?.uploadMethod as UploadMethod}
+                whitelistStartDate={whitelistDetails?.startTime}
               />
             </Conditional>
           </div>