Incorporate metadata updatability into the collection creation process

components/Tooltip.tsx

@@ -6,6 +6,7 @@ import { usePopper } from 'react-popper'
 export interface TooltipProps extends ComponentProps<'div'> {
   label: ReactNode
   children: ReactElement
+  placement?: 'top' | 'bottom' | 'left' | 'right'
 }
 
 export const Tooltip = ({ label, children, ...props }: TooltipProps) => {
@@ -14,7 +15,7 @@ export const Tooltip = ({ label, children, ...props }: TooltipProps) => {
   const [show, setShow] = useState(false)
 
   const { styles, attributes } = usePopper(referenceElement, popperElement, {
-    placement: 'top',
+    placement: props.placement ? props.placement : 'top',
   })
 
   return (

components/collections/creation/CollectionDetails.tsx

@@ -8,6 +8,7 @@ import { FormControl } from 'components/FormControl'
 import { FormGroup } from 'components/FormGroup'
 import { useInputState } from 'components/forms/FormInput.hooks'
 import { InputDateTime } from 'components/InputDateTime'
+import { Tooltip } from 'components/Tooltip'
 import type { ChangeEvent } from 'react'
 import { useEffect, useState } from 'react'
 import { toast } from 'react-hot-toast'
@@ -31,12 +32,14 @@ export interface CollectionDetailsDataProps {
   externalLink?: string
   startTradingTime?: string
   explicit: boolean
+  updatable: boolean
 }
 
 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)
+  const [updatable, setUpdatable] = useState<boolean>(false)
 
   const nameState = useInputState({
     id: 'name',
@@ -76,6 +79,7 @@ export const CollectionDetails = ({ onChange, uploadMethod, coverImageUrl, minte
         externalLink: externalLinkState.value || undefined,
         startTradingTime: timestamp ? (timestamp.getTime() * 1_000_000).toString() : '',
         explicit,
+        updatable,
       }
       onChange(data)
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -91,6 +95,7 @@ export const CollectionDetails = ({ onChange, uploadMethod, coverImageUrl, minte
     coverImage,
     timestamp,
     explicit,
+    updatable,
   ])
 
   const selectCoverImage = (event: ChangeEvent<HTMLInputElement>) => {
@@ -174,7 +179,7 @@ export const CollectionDetails = ({ onChange, uploadMethod, coverImageUrl, minte
         <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">
+              <span className="mt-1 ml-[2px] text-sm first-letter:capitalize">
                 Does the collection contain explicit content?
               </span>
               <div className="ml-2 font-bold form-check form-check-inline">
@@ -216,6 +221,35 @@ export const CollectionDetails = ({ onChange, uploadMethod, coverImageUrl, minte
             </div>
           </div>
         </div>
+        <Tooltip
+          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.
+              </span>
+            </div>
+          }
+          placement="bottom"
+        >
+          <div
+            className={clsx(
+              minterType === 'base'
+                ? 'flex flex-col -ml-16 space-y-2 form-control'
+                : 'flex flex-col space-y-2 form-control',
+            )}
+          >
+            <label className="justify-start cursor-pointer label">
+              <span className="mr-4 font-bold">Updatable Token Metadata</span>
+              <input
+                checked={updatable}
+                className={`toggle ${updatable ? `bg-stargaze` : `bg-gray-600`}`}
+                onClick={() => setUpdatable(!updatable)}
+                type="checkbox"
+              />
+            </label>
+          </div>
+        </Tooltip>
       </FormGroup>
     </div>
   )

env.d.ts

@@ -15,10 +15,13 @@ declare namespace NodeJS {
     readonly APP_VERSION: string
 
     readonly NEXT_PUBLIC_SG721_CODE_ID: string
+    readonly NEXT_PUBLIC_SG721_UPDATABLE_CODE_ID: string
     readonly NEXT_PUBLIC_WHITELIST_CODE_ID: string
     readonly NEXT_PUBLIC_VENDING_MINTER_CODE_ID: string
     readonly NEXT_PUBLIC_VENDING_FACTORY_ADDRESS: string
+    readonly NEXT_PUBLIC_VENDING_FACTORY_UPDATABLE_ADDRESS: string
     readonly NEXT_PUBLIC_BASE_FACTORY_ADDRESS: string
+    readonly NEXT_PUBLIC_BASE_FACTORY_UPDATABLE_ADDRESS: string
     readonly NEXT_PUBLIC_SG721_NAME_ADDRESS: string
     readonly NEXT_PUBLIC_BASE_MINTER_CODE_ID: string
     readonly NEXT_PUBLIC_BADGE_HUB_CODE_ID: string

pages/collections/create.tsx

@@ -39,11 +39,14 @@ import { upload } from 'services/upload'
 import { compareFileArrays } from 'utils/compareFileArrays'
 import {
   BASE_FACTORY_ADDRESS,
+  BASE_FACTORY_UPDATABLE_ADDRESS,
   BLOCK_EXPLORER_URL,
   NETWORK,
   SG721_CODE_ID,
+  SG721_UPDATABLE_CODE_ID,
   STARGAZE_URL,
   VENDING_FACTORY_ADDRESS,
+  VENDING_FACTORY_UPDATABLE_ADDRESS,
   WHITELIST_CODE_ID,
 } from 'utils/constants'
 import { withMetadata } from 'utils/layout'
@@ -416,7 +419,7 @@ const CollectionCreationPage: NextPage = () => {
           whitelist,
         },
         collection_params: {
-          code_id: SG721_CODE_ID,
+          code_id: collectionDetails?.updatable ? SG721_UPDATABLE_CODE_ID : SG721_CODE_ID,
           name: collectionDetails?.name,
           symbol: collectionDetails?.symbol,
           info: {
@@ -437,11 +440,11 @@ const CollectionCreationPage: NextPage = () => {
     }
 
     const payload: VendingFactoryDispatchExecuteArgs = {
-      contract: VENDING_FACTORY_ADDRESS,
+      contract: collectionDetails?.updatable ? VENDING_FACTORY_UPDATABLE_ADDRESS : VENDING_FACTORY_ADDRESS,
       messages: vendingFactoryMessages,
       txSigner: wallet.address,
       msg,
-      funds: [coin('3000000000', 'ustars')],
+      funds: [coin(collectionDetails?.updatable ? '5000000000' : '3000000000', 'ustars')],
     }
     const data = await vendingFactoryDispatchExecute(payload)
     setTransactionHash(data.transactionHash)
@@ -466,7 +469,7 @@ const CollectionCreationPage: NextPage = () => {
       create_minter: {
         init_msg: null,
         collection_params: {
-          code_id: SG721_CODE_ID,
+          code_id: collectionDetails?.updatable ? SG721_UPDATABLE_CODE_ID : SG721_CODE_ID,
           name: collectionDetails?.name,
           symbol: collectionDetails?.symbol,
           info: {
@@ -487,11 +490,11 @@ const CollectionCreationPage: NextPage = () => {
     }
 
     const payload: BaseFactoryDispatchExecuteArgs = {
-      contract: BASE_FACTORY_ADDRESS,
+      contract: collectionDetails?.updatable ? BASE_FACTORY_UPDATABLE_ADDRESS : BASE_FACTORY_ADDRESS,
       messages: baseFactoryMessages,
       txSigner: wallet.address,
       msg,
-      funds: [coin('1000000000', 'ustars')],
+      funds: [coin(collectionDetails?.updatable ? '3000000000' : '1000000000', 'ustars')],
     }
     await baseFactoryDispatchExecute(payload)
       .then(async (data) => {

utils/constants.ts

@@ -1,8 +1,11 @@
 export const SG721_CODE_ID = parseInt(process.env.NEXT_PUBLIC_SG721_CODE_ID, 10)
+export const SG721_UPDATABLE_CODE_ID = parseInt(process.env.NEXT_PUBLIC_SG721_UPDATABLE_CODE_ID, 10)
 export const WHITELIST_CODE_ID = parseInt(process.env.NEXT_PUBLIC_WHITELIST_CODE_ID, 10)
 export const VENDING_MINTER_CODE_ID = parseInt(process.env.NEXT_PUBLIC_VENDING_MINTER_CODE_ID, 10)
 export const VENDING_FACTORY_ADDRESS = process.env.NEXT_PUBLIC_VENDING_FACTORY_ADDRESS
+export const VENDING_FACTORY_UPDATABLE_ADDRESS = process.env.NEXT_PUBLIC_VENDING_FACTORY_UPDATABLE_ADDRESS
 export const BASE_FACTORY_ADDRESS = process.env.NEXT_PUBLIC_BASE_FACTORY_ADDRESS
+export const BASE_FACTORY_UPDATABLE_ADDRESS = process.env.NEXT_PUBLIC_BASE_FACTORY_UPDATABLE_ADDRESS
 export const SG721_NAME_ADDRESS = process.env.NEXT_PUBLIC_SG721_NAME_ADDRESS
 export const BASE_MINTER_CODE_ID = parseInt(process.env.NEXT_PUBLIC_VENDING_MINTER_CODE_ID, 10)
 export const BADGE_HUB_CODE_ID = parseInt(process.env.NEXT_PUBLIC_BADGE_HUB_CODE_ID, 10)