Standard collection creation now includes optional payment address input

components/collections/creation/CollectionDetails.tsx

@@ -142,9 +142,9 @@ export const CollectionDetails = ({ onChange, uploadMethod, coverImageUrl, minte
             <TextInput className="mt-2" {...symbolState} isRequired />
           </div>
           <div className={clsx(minterType === 'base' ? 'ml-10' : '')}>
-            <TextInput {...externalLinkState} />
+            <TextInput className="mt-2" {...externalLinkState} />
             <FormControl
-              className={clsx(minterType === 'base' ? 'mt-12' : '')}
+              className={clsx(minterType === 'base' ? 'mt-12' : 'mt-2')}
               htmlId="timestamp"
               subtitle="Trading start time offset will be set as 2 weeks by default."
               title="Trading Start Time (optional)"
@@ -163,6 +163,8 @@ export const CollectionDetails = ({ onChange, uploadMethod, coverImageUrl, minte
             <input
               accept="image/*"
               className={clsx(
+                minterType === 'base' ? 'w-1/2' : 'w-full',
+                'p-[13px] rounded border-2 border-white/20 border-dashed cursor-pointer h-18',
                 'file:py-2 file:px-4 file:mr-4 file:bg-plumbus-light file:rounded file:border-0 cursor-pointer',
                 'before:hover:bg-white/5 before:transition',
               )}
@@ -196,7 +198,7 @@ export const CollectionDetails = ({ onChange, uploadMethod, coverImageUrl, minte
         </FormControl>
         <div className={clsx(minterType === 'base' ? 'flex flex-col -ml-16 space-y-2' : 'flex flex-col space-y-2')}>
           <div>
-            <div className="flex">
+            <div className="flex mt-4">
               <span className="mt-1 ml-[2px] text-sm first-letter:capitalize">
                 Does the collection contain explicit content?
               </span>
@@ -240,11 +242,12 @@ export const CollectionDetails = ({ onChange, uploadMethod, coverImageUrl, minte
           </div>
         </div>
         <Tooltip
+          backgroundColor="bg-blue-500"
           label={
             <div className="grid grid-flow-row">
               <span>
                 ℹ️ When enabled, the metadata for tokens can be updated after the collection is created until the
-                metadata is frozen by the creator.
+                collection is frozen by the creator.
               </span>
             </div>
           }

components/collections/creation/MintingDetails.tsx

@@ -1,10 +1,12 @@
 import { FormControl } from 'components/FormControl'
 import { FormGroup } from 'components/FormGroup'
-import { useNumberInputState } from 'components/forms/FormInput.hooks'
+import { useInputState, useNumberInputState } from 'components/forms/FormInput.hooks'
 import { InputDateTime } from 'components/InputDateTime'
 import React, { useEffect, useState } from 'react'
+import { resolveAddress } from 'utils/resolveAddress'
 
-import { NumberInput } from '../../forms/FormInput'
+import { useWallet } from '../../../contexts/wallet'
+import { NumberInput, TextInput } from '../../forms/FormInput'
 import type { UploadMethod } from './UploadDetails'
 
 interface MintingDetailsProps {
@@ -18,9 +20,12 @@ export interface MintingDetailsDataProps {
   unitPrice: string
   perAddressLimit: number
   startTime: string
+  paymentAddress?: string
 }
 
 export const MintingDetails = ({ onChange, numberOfTokens, uploadMethod }: MintingDetailsProps) => {
+  const wallet = useWallet()
+
   const [timestamp, setTimestamp] = useState<Date | undefined>()
 
   const numberOfTokensState = useNumberInputState({
@@ -47,6 +52,24 @@ export const MintingDetails = ({ onChange, numberOfTokens, uploadMethod }: Minti
     placeholder: '1',
   })
 
+  const paymentAddressState = useInputState({
+    id: 'payment-address',
+    name: 'paymentAddress',
+    title: 'Payment Address (optional)',
+    subtitle: 'Address to receive minting revenues (defaults to current wallet address)',
+    placeholder: 'stars1234567890abcdefghijklmnopqrstuvwxyz...',
+  })
+
+  const resolvePaymentAddress = async () => {
+    await resolveAddress(paymentAddressState.value.trim(), wallet).then((resolvedAddress) => {
+      paymentAddressState.onChange(resolvedAddress)
+    })
+  }
+
+  useEffect(() => {
+    void resolvePaymentAddress()
+  }, [paymentAddressState.value])
+
   useEffect(() => {
     if (numberOfTokens) numberOfTokensState.onChange(numberOfTokens)
     const data: MintingDetailsDataProps = {
@@ -54,10 +77,18 @@ export const MintingDetails = ({ onChange, numberOfTokens, uploadMethod }: Minti
       unitPrice: unitPriceState.value ? (Number(unitPriceState.value) * 1_000_000).toString() : '',
       perAddressLimit: perAddressLimitState.value,
       startTime: timestamp ? (timestamp.getTime() * 1_000_000).toString() : '',
+      paymentAddress: paymentAddressState.value,
     }
     onChange(data)
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [numberOfTokens, numberOfTokensState.value, unitPriceState.value, perAddressLimitState.value, timestamp])
+  }, [
+    numberOfTokens,
+    numberOfTokensState.value,
+    unitPriceState.value,
+    perAddressLimitState.value,
+    timestamp,
+    paymentAddressState.value,
+  ])
 
   return (
     <div>
@@ -74,6 +105,7 @@ export const MintingDetails = ({ onChange, numberOfTokens, uploadMethod }: Minti
           <InputDateTime minDate={new Date()} onChange={(date) => setTimestamp(date)} value={timestamp} />
         </FormControl>
       </FormGroup>
+      <TextInput className="p-4 mt-5" {...paymentAddressState} />
     </div>
   )
 }