diff --git a/src/components/request/NewRequestForm.tsx b/src/components/request/NewRequestForm.tsx index 734f638..b08e3e4 100644 --- a/src/components/request/NewRequestForm.tsx +++ b/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('/'); diff --git a/src/components/request/RequestDetailCommentTab.tsx b/src/components/request/RequestDetailCommentTab.tsx index 7181ee9..f282f77 100644 --- a/src/components/request/RequestDetailCommentTab.tsx +++ b/src/components/request/RequestDetailCommentTab.tsx @@ -20,6 +20,7 @@ const RequestDetailCommentTab: React.FC = ({ reque const [commentText, setCommentText] = useState(''); const [dialogOpen, setDialogOpen] = useState(false); const [submitting, setSubmitting] = useState(false); + const [loadingLabel, setLoadingLabel] = useState(''); const handleCommentChange = (event: React.ChangeEvent) => { setCommentText(event.target.value); @@ -41,6 +42,7 @@ const RequestDetailCommentTab: React.FC = ({ reque if (!commentText.trim()) { return; } + setSubmitting(true); try { await createRequestComment({ @@ -48,6 +50,7 @@ const RequestDetailCommentTab: React.FC = ({ reque text: commentText, requestId: requestId, wallet: selectedWallet, + setStatus: setLoadingLabel, }); setCommentText(''); router.reload(); @@ -82,7 +85,7 @@ const RequestDetailCommentTab: React.FC = ({ reque {account ? 'Submit' : 'Connect Wallet'} - + ); }; diff --git a/src/components/submission/NewSubmissionForm.tsx b/src/components/submission/NewSubmissionForm.tsx index 25481ef..42976bf 100644 --- a/src/components/submission/NewSubmissionForm.tsx +++ b/src/components/submission/NewSubmissionForm.tsx @@ -116,13 +116,12 @@ const NewSubmissionForm: React.FC = ({ requestId }) => { } } - setLoadingLabel('Creating smart contract...'); - await createRequestSubmission({ description, wallet, account, requestId, + setStatus: setLoadingLabel, freeImageId: freeImageId || '', encryptedImageId: encryptedImageId || '', watermarkedImageId: watermarkedImageId || '', diff --git a/src/hooks/useComments.tsx b/src/hooks/useComments.tsx index bbb63b9..e26b623 100644 --- a/src/hooks/useComments.tsx +++ b/src/hooks/useComments.tsx @@ -10,6 +10,7 @@ import { useIpfs } from './useIpfs'; interface CreateRequestCommentParams extends Omit { 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 => { 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); } }; diff --git a/src/hooks/useRequests.tsx b/src/hooks/useRequests.tsx index 7bb4743..30753d6 100644 --- a/src/hooks/useRequests.tsx +++ b/src/hooks/useRequests.tsx @@ -10,13 +10,14 @@ import { useIpfs } from './useIpfs'; interface CreatePictureRequestParams extends Omit { 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([]); const [loading, setLoading] = useState(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); } }; diff --git a/src/hooks/useSubmissions.tsx b/src/hooks/useSubmissions.tsx index 300b413..47002f2 100644 --- a/src/hooks/useSubmissions.tsx +++ b/src/hooks/useSubmissions.tsx @@ -13,6 +13,7 @@ interface CreateRequestSubmissionParams extends Omit void; } export const useSubmissions = () => { @@ -48,6 +49,7 @@ export const useSubmissions = () => { wallet, account, price, + setStatus, requestId, freeImageId, encryptedImageId, @@ -56,6 +58,7 @@ export const useSubmissions = () => { setLoading(true); try { + setStatus?.('Uploading metadata...'); const ipfsHash = await uploadRequestSubmission({ description, freeImageId, @@ -63,6 +66,7 @@ export const useSubmissions = () => { 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); } };