Disable add to queue when media is uploading

ourzora · Apr 25, 2023 · bf1a316 · bf1a316
1 parent 9ca11b3
commit bf1a316
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 7 deletions.
diff --git a/apps/web/src/components/SingleMediaUpload/SingleMediaUpload.tsx b/apps/web/src/components/SingleMediaUpload/SingleMediaUpload.tsx
@@ -18,13 +18,15 @@ interface SingleImageUploadProps {
   inputLabel: string | ReactElement
   value: string
   onUploadStart?: (value: File) => void
+  onUploadSettled?: () => void
 }
 
 const SingleMediaUpload: React.FC<SingleImageUploadProps> = ({
   id,
   formik,
   inputLabel,
   onUploadStart,
+  onUploadSettled,
   value,
 }) => {
   const acceptableMIME = [
@@ -71,7 +73,7 @@ const SingleMediaUpload: React.FC<SingleImageUploadProps> = ({
         setIsUploading(true)
         setFileName(input.name)
 
-        if (onUploadStart) onUploadStart(input)
+        onUploadStart?.(input)
 
         const { cid } = await uploadFile(_input[0], {
           cache: true,
@@ -87,6 +89,8 @@ const SingleMediaUpload: React.FC<SingleImageUploadProps> = ({
           ...err,
           message: `Sorry, there was an error with our file uploading service. ${err?.message}`,
         })
+      } finally {
+        onUploadSettled?.()
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps

diff --git a/apps/web/src/modules/create-proposal/components/TransactionForm/Droposal/DroposalForm.tsx b/apps/web/src/modules/create-proposal/components/TransactionForm/Droposal/DroposalForm.tsx
@@ -1,6 +1,7 @@
 import { Box, Button, Flex, Text } from '@zoralabs/zord'
 import { Form, Formik, FormikHelpers } from 'formik'
 import { useCallback, useState } from 'react'
+import { useAccount } from 'wagmi'
 
 import SmartInput from 'src/components/Fields/SmartInput'
 import TextArea from 'src/components/Fields/TextArea'
@@ -29,7 +30,9 @@ const editionSizeOptions = [
 ]
 
 export const DroposalForm: React.FC<AirdropFormProps> = ({ onSubmit, disabled }) => {
-  const [editionType, setEditionType] = useState<string>('fixed')
+  const [editionType, setEditionType] = useState('fixed')
+  const [isIPFSUploading, setIsIPFSUploading] = useState(false)
+  const { address: user } = useAccount()
   const { treasury } = useDaoStore((x) => x.addresses)
   const isMobile = useLayoutStore((x) => x.isMobile)
 
@@ -39,8 +42,8 @@ export const DroposalForm: React.FC<AirdropFormProps> = ({ onSubmit, disabled })
     description: '',
     mediaUrl: '',
     coverUrl: '',
-    fundsRecipient: '',
-    defaultAdmin: treasury || '',
+    fundsRecipient: treasury || '',
+    defaultAdmin: user || '',
     publicSaleStart: '',
     publicSaleEnd: '',
     royaltyPercentage: 5,
@@ -68,6 +71,7 @@ export const DroposalForm: React.FC<AirdropFormProps> = ({ onSubmit, disabled })
       >
         {(formik) => {
           const handleMediaUploadStart = (media: File) => {
+            setIsIPFSUploading(true)
             formik.setFieldValue('mediaType', media.type)
           }
 
@@ -162,6 +166,7 @@ export const DroposalForm: React.FC<AirdropFormProps> = ({ onSubmit, disabled })
                     id="mediaUrl"
                     inputLabel={'Media'}
                     onUploadStart={handleMediaUploadStart}
+                    onUploadSettled={() => setIsIPFSUploading(false)}
                   />
 
                   {showCover && (
@@ -170,6 +175,8 @@ export const DroposalForm: React.FC<AirdropFormProps> = ({ onSubmit, disabled })
                       formik={formik}
                       id="coverUrl"
                       inputLabel={'Cover'}
+                      onUploadStart={() => setIsIPFSUploading(true)}
+                      onUploadSettled={() => setIsIPFSUploading(false)}
                     />
                   )}
 
@@ -323,7 +330,7 @@ export const DroposalForm: React.FC<AirdropFormProps> = ({ onSubmit, disabled })
                     onChange={formik.handleChange}
                     onBlur={formik.handleBlur}
                     helperText={
-                      'The address that will receive any withdrawals and royalties. It can be your personal wallet, a multisignature wallet, or an external splits contract.'
+                      'The DAO treasury address is set as the default payout address. This address will receive any withdrawals and royalties. It can be your personal wallet, a multisignature wallet, or an external splits contract.'
                     }
                     errorMessage={
                       formik.touched['fundsRecipient'] && formik.errors['fundsRecipient']
@@ -343,7 +350,7 @@ export const DroposalForm: React.FC<AirdropFormProps> = ({ onSubmit, disabled })
                     onChange={formik.handleChange}
                     onBlur={formik.handleBlur}
                     helperText={
-                      'The address that will manage the edition. It can be your personal wallet, a multisignature wallet, or the DAO treasury.'
+                      'The wallet you have connected to nouns.build is set as the default admin address. This address will manage the edition. It can be your personal wallet, a multisignature wallet, or the DAO treasury.'
                     }
                     errorMessage={
                       formik.touched['defaultAdmin'] && formik.errors['defaultAdmin']
@@ -357,7 +364,7 @@ export const DroposalForm: React.FC<AirdropFormProps> = ({ onSubmit, disabled })
                     variant={'outline'}
                     borderRadius={'curved'}
                     type="submit"
-                    disabled={disabled}
+                    disabled={disabled || isIPFSUploading}
                   >
                     Add Transaction to Queue
                   </Button>