feat(status): created a system where the hook can set a status

src/components/request/NewRequestForm.tsx

@@ -5,7 +5,6 @@ import { useRouter } from 'next/router';
 import React, { useState } from 'react';
 
 import { FMPButton, FMPTypography, LoadingOverlay } from '@/components';
-import { useIpfs } from '@/hooks/useIpfs';
 import { useRequests } from '@/hooks/useRequests';
 import { useWallet } from '@/hooks/useWallet';
 
@@ -19,7 +18,6 @@ const NewRequestForm: React.FC = () => {
   const [loading, setLoading] = useState(false);
   const [loadingLabel, setLoadingLabel] = useState('');
 
-  const { uploadImage } = useIpfs();
   const { createPictureRequest } = useRequests();
   const { selectedAccount: account, selectedWallet: wallet } = useWallet();
 
@@ -44,16 +42,14 @@ const NewRequestForm: React.FC = () => {
 
     try {
       setLoadingLabel('Uploading image...');
-      const imageId = await uploadImage({ file: image });
-
-      setLoadingLabel('Creating smart contract...');
 
       await createPictureRequest({
+        image,
         title,
         wallet,
         account,
-        imageId,
         description,
+        setStatus: setLoadingLabel,
         budget: parseFloat(budget),
       });
       router.push('/');

src/components/request/RequestDetailCommentTab.tsx

@@ -20,6 +20,7 @@ const RequestDetailCommentTab: React.FC<RequestDetailCommentTabProps> = ({ reque
   const [commentText, setCommentText] = useState('');
   const [dialogOpen, setDialogOpen] = useState(false);
   const [submitting, setSubmitting] = useState(false);
+  const [loadingLabel, setLoadingLabel] = useState('');
 
   const handleCommentChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setCommentText(event.target.value);
@@ -41,13 +42,15 @@ const RequestDetailCommentTab: React.FC<RequestDetailCommentTabProps> = ({ reque
     if (!commentText.trim()) {
       return;
     }
+
     setSubmitting(true);
     try {
       await createRequestComment({
         account,
         text: commentText,
         requestId: requestId,
         wallet: selectedWallet,
+        setStatus: setLoadingLabel,
       });
       setCommentText('');
       router.reload();
@@ -82,7 +85,7 @@ const RequestDetailCommentTab: React.FC<RequestDetailCommentTabProps> = ({ reque
         {account ? 'Submit' : 'Connect Wallet'}
       </FMPButton>
       <ConnectWalletDialog open={dialogOpen} onClose={handleCloseDialog} />
-      <LoadingOverlay loading={submitting} label={`Submitting comment`} />
+      <LoadingOverlay loading={submitting} label={loadingLabel} />
     </Box>
   );
 };

src/components/submission/NewSubmissionForm.tsx

@@ -116,13 +116,12 @@ const NewSubmissionForm: React.FC<NewSubmissionFormProps> = ({ requestId }) => {
         }
       }
 
-      setLoadingLabel('Creating smart contract...');
-
       await createRequestSubmission({
         description,
         wallet,
         account,
         requestId,
+        setStatus: setLoadingLabel,
         freeImageId: freeImageId || '',
         encryptedImageId: encryptedImageId || '',
         watermarkedImageId: watermarkedImageId || '',

src/hooks/useComments.tsx

@@ -10,6 +10,7 @@ import { useIpfs } from './useIpfs';
 interface CreateRequestCommentParams extends Omit<ContractCreateCommentParams, 'requestAddress' | 'ipfsHash'> {
   text: string;
   requestId: string;
+  setStatus?: (status: string) => void;
 }
 
 export const useComments = () => {
@@ -41,16 +42,19 @@ export const useComments = () => {
   };
 
   const createRequestComment = async ({
+    text,
     wallet,
     account,
     requestId,
-    text,
+    setStatus,
   }: CreateRequestCommentParams): Promise<void> => {
     setLoading(true);
 
     try {
+      setStatus?.('Uploading comment...');
       const ipfsHash = await uploadRequestComment({ text });
 
+      setStatus?.('Creating smart contract...');
       const requestCommentAddress = await contractService.createRequestComment({
         wallet,
         account,
@@ -61,6 +65,7 @@ export const useComments = () => {
       let created = false;
       if (requestCommentAddress) {
         // Try to fetch data from the subgraph until the new comment appears
+        setStatus?.('Waiting for confirmation...');
         await pollForNewComment(requestCommentAddress);
         created = true;
       }
@@ -69,6 +74,7 @@ export const useComments = () => {
         throw new Error('Failed to create request comment');
       }
     } finally {
+      setStatus?.('');
       setLoading(false);
     }
   };

src/hooks/useRequests.tsx

@@ -10,13 +10,14 @@ import { useIpfs } from './useIpfs';
 
 interface CreatePictureRequestParams extends Omit<ContractCreateRequestParams, 'ipfsHash'> {
   title: string;
-  imageId: string;
+  image: File;
   description: string;
+  setStatus?: (status: string) => void;
 }
 
 export const useRequests = () => {
-  const { fetchIPFSData, uploadPictureRequest } = useIpfs();
   const { contractService } = useContractService();
+  const { fetchIPFSData, uploadPictureRequest, uploadImage } = useIpfs();
 
   const [requests, setRequests] = useState<Request[]>([]);
   const [loading, setLoading] = useState<boolean>(false);
@@ -76,15 +77,22 @@ export const useRequests = () => {
 
   const createPictureRequest = async ({
     title,
-    description,
-    imageId,
+    image,
     budget,
+    setStatus,
+    description,
     ...otherParams
   }: CreatePictureRequestParams) => {
     setLoading(true);
 
     try {
+      setStatus?.('Uploading image...');
+      const imageId = await uploadImage({ file: image });
+
+      setStatus?.('Uploading metadata...');
       const ipfsHash = await uploadPictureRequest({ title, description, imageId });
+
+      setStatus?.('Creating smart contract...');
       const pictureRequestAddress = await contractService.createPictureRequest({ ipfsHash, budget, ...otherParams });
 
       let created = false;
@@ -102,6 +110,7 @@ export const useRequests = () => {
         setRequests((prevRequests) => [...prevRequests, newRequest as Request]);
 
         // Try to fetch data from the subgraph until the new request appears
+        setStatus?.('Waiting for confirmation...');
         await pollForNewRequest(pictureRequestAddress);
         created = true;
       }
@@ -110,6 +119,7 @@ export const useRequests = () => {
         throw new Error('Failed to create picture request');
       }
     } finally {
+      setStatus?.('');
       setLoading(false);
     }
   };

src/hooks/useSubmissions.tsx

@@ -13,6 +13,7 @@ interface CreateRequestSubmissionParams extends Omit<ContractCreateSubmissionPar
   freeImageId: string;
   encryptedImageId: string;
   watermarkedImageId: string;
+  setStatus?: (status: string) => void;
 }
 
 export const useSubmissions = () => {
@@ -48,6 +49,7 @@ export const useSubmissions = () => {
     wallet,
     account,
     price,
+    setStatus,
     requestId,
     freeImageId,
     encryptedImageId,
@@ -56,13 +58,15 @@ export const useSubmissions = () => {
     setLoading(true);
 
     try {
+      setStatus?.('Uploading metadata...');
       const ipfsHash = await uploadRequestSubmission({
         description,
         freeImageId,
         encryptedImageId,
         watermarkedImageId,
       });
 
+      setStatus?.('Creating smart contract...');
       const requestSubmissionAddress = await contractService.createRequestSubmission({
         price,
         wallet,
@@ -74,6 +78,7 @@ export const useSubmissions = () => {
       let created = false;
       if (requestSubmissionAddress) {
         // Try to fetch data from the subgraph until the new submission appears
+        setStatus?.('Waiting for confirmation...');
         await pollForNewSubmission(requestSubmissionAddress);
         created = true;
       }
@@ -82,6 +87,7 @@ export const useSubmissions = () => {
         throw new Error('Failed to create request submission');
       }
     } finally {
+      setStatus?.('');
       setLoading(false);
     }
   };