Minor UI updates

components/MetadataInput.tsx

@@ -175,9 +175,9 @@ export const MetadataInput = (props: MetadataInputProps) => {
 
   return (
     <div>
-      <div className="grid grid-cols-2 mx-4 mt-4 w-full max-w-6xl max-h-full no-scrollbar">
+      <div className="grid grid-cols-2 mt-4 mr-4 ml-8 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>
+          <div className="mb-7 text-xl font-bold underline underline-offset-4">NFT Metadata</div>
           <TextInput {...nameState} />
           <TextInput className="mt-2" {...descriptionState} />
           <TextInput className="mt-2" {...externalUrlState} />

components/openEdition/CollectionDetails.tsx

@@ -14,7 +14,7 @@ import { addLogItem } from 'contexts/log'
 import type { ChangeEvent } from 'react'
 import { useEffect, useRef, useState } from 'react'
 import { toast } from 'react-hot-toast'
-import { SG721_UPDATABLE_CODE_ID } from 'utils/constants'
+import { OPEN_EDITION_UPDATABLE_FACTORY_ADDRESS, SG721_UPDATABLE_CODE_ID } from 'utils/constants'
 import { uid } from 'utils/random'
 
 import { TextInput } from '../forms/FormInput'
@@ -131,7 +131,7 @@ export const CollectionDetails = ({
   useEffect(() => {
     setCoverImage(null)
     // empty the element so that the same file can be selected again
-    coverImageInputRef.current!.value = ''
+    if (coverImageInputRef.current) coverImageInputRef.current.value = ''
   }, [metadataStorageMethod])
 
   useEffect(() => {
@@ -261,7 +261,7 @@ export const CollectionDetails = ({
             </div>
           </div>
         </div>
-        <Conditional test={SG721_UPDATABLE_CODE_ID > 0}>
+        <Conditional test={SG721_UPDATABLE_CODE_ID > 0 && OPEN_EDITION_UPDATABLE_FACTORY_ADDRESS !== undefined}>
           <Tooltip
             backgroundColor="bg-blue-500"
             label={

components/openEdition/ImageUploadDetails.tsx

@@ -65,7 +65,7 @@ export const ImageUploadDetails = ({ onChange }: ImageUploadDetailsProps) => {
   const imageUrlState = useInputState({
     id: 'imageUrl',
     name: 'imageUrl',
-    title: 'Image URL',
+    title: 'Asset URL',
     placeholder: 'ipfs://',
     defaultValue: '',
   })
@@ -217,7 +217,7 @@ export const ImageUploadDetails = ({ onChange }: ImageUploadDetailsProps) => {
         <Conditional test={uploadMethod === 'existing'}>
           <div className="ml-3 flex-column">
             <p className="mb-5 ml-5">
-              Though the Open Edition contracts allow for off-chain image storage, it is recommended to use a
+              Though the Open Edition contracts allow for off-chain asset storage, it is recommended to use a
               decentralized storage solution, such as IPFS. <br /> You may head over to{' '}
               <Anchor className="font-bold text-plumbus hover:underline" href="https://nft.storage">
                 NFT.Storage
@@ -310,7 +310,7 @@ export const ImageUploadDetails = ({ onChange }: ImageUploadDetailsProps) => {
                         className="block mt-5 mr-1 mb-1 ml-8 w-full font-bold text-white dark:text-gray-300"
                         htmlFor="assetFile"
                       >
-                        Image Selection
+                        Asset Selection
                       </label>
                       <div
                         className={clsx(

components/openEdition/OnChainMetadataInputDetails.tsx

@@ -66,7 +66,8 @@ export const OnChainMetadataInputDetails = ({ onChange }: OnChainMetadataInputDe
     id: 'metadata-external-url',
     name: 'metadata-external-url',
     title: 'External URL',
-    subtitle: 'External URL for the badge',
+    subtitle: 'External URL for the token',
+    placeholder: 'https://',
   })
 
   const attributesState = useMetadataAttributesState()
@@ -75,14 +76,16 @@ export const OnChainMetadataInputDetails = ({ onChange }: OnChainMetadataInputDe
     id: 'metadata-animation-url',
     name: 'metadata-animation-url',
     title: 'Animation URL',
-    subtitle: 'Animation URL for the badge',
+    subtitle: 'Animation URL for the token',
+    placeholder: 'https://',
   })
 
   const youtubeUrlState = useInputState({
     id: 'metadata-youtube-url',
     name: 'metadata-youtube-url',
     title: 'YouTube URL',
-    subtitle: 'YouTube URL for the badge',
+    subtitle: 'YouTube URL for the token',
+    placeholder: 'https://',
   })
 
   const parseMetadata = async () => {
@@ -193,8 +196,9 @@ export const OnChainMetadataInputDetails = ({ onChange }: OnChainMetadataInputDe
   ])
 
   return (
-    <div>
+    <div className="py-3 px-8 rounded border-2 border-white/20">
-      <div className={clsx('grid grid-cols-2 mt-4 ml-12 max-w-5xl')}>
+      <span className="ml-4 text-xl font-bold underline underline-offset-4">NFT Metadata</span>
+      <div className={clsx('grid grid-cols-2 mt-4 mb-2 ml-4 max-w-6xl')}>
         <div className={clsx('mt-6')}>
           <TextInput className="mt-2" {...nameState} />
           <TextInput className="mt-2" {...descriptionState} />

components/openEdition/RoyaltyDetails.tsx

@@ -61,7 +61,7 @@ export const RoyaltyDetails = ({ onChange }: RoyaltyDetailsProps) => {
   }, [royaltyState, royaltyPaymentAddressState.value, royaltyShareState.value])
 
   return (
-    <div className="py-3 px-8 rounded border-2 border-white/20">
+    <div className="py-3 px-8 mx-10 rounded border-2 border-white/20">
       <div className="flex justify-center">
         <div className="ml-4 font-bold form-check form-check-inline">
           <input

pages/collections/create.tsx

@@ -1374,30 +1374,30 @@ const CollectionCreationPage: NextPage = () => {
               </span>
             </button>
           </div>
-          <Conditional test={OPEN_EDITION_FACTORY_ADDRESS !== undefined}>
+          <div
-            <div
+            className={clsx(
-              className={clsx(
+              'isolate space-y-1 border-2',
-                'isolate space-y-1 border-2',
+              'first-of-type:rounded-tl-md last-of-type:rounded-tr-md',
-                'first-of-type:rounded-tl-md last-of-type:rounded-tr-md',
+              minterType === 'openEdition' ? 'border-stargaze' : 'border-transparent',
-                minterType === 'openEdition' ? 'border-stargaze' : 'border-transparent',
+              minterType !== 'openEdition' ? 'bg-stargaze/5 hover:bg-stargaze/80' : 'hover:bg-white/5',
-                minterType !== 'openEdition' ? 'bg-stargaze/5 hover:bg-stargaze/80' : 'hover:bg-white/5',
+              OPEN_EDITION_FACTORY_ADDRESS === undefined ? 'hover:bg-zinc-500 opacity-50 hover:opacity-70' : '',
-              )}
+            )}
+          >
+            <button
+              className="p-4 w-full h-full text-left bg-transparent"
+              disabled={OPEN_EDITION_FACTORY_ADDRESS === undefined}
+              onClick={() => {
+                setMinterType('openEdition')
+                resetReadyFlags()
+              }}
+              type="button"
             >
-              <button
+              <h4 className="font-bold">Open Edition Collection</h4>
-                className="p-4 w-full h-full text-left bg-transparent"
+              <span className="text-sm text-white/80 line-clamp-2">
-                onClick={() => {
+                Allows multiple copies of a single NFT to be minted for a given time interval.
-                  setMinterType('openEdition')
+              </span>
-                  resetReadyFlags()
+            </button>
-                }}
+          </div>
-                type="button"
-              >
-                <h4 className="font-bold">Open Edition Collection</h4>
-                <span className="text-sm text-white/80 line-clamp-2">
-                  Allows multiple copies of a single NFT to be minted for a given time interval.
-                </span>
-              </button>
-            </div>
-          </Conditional>
         </div>
       </div>