Merge pull request #371 from picsoritdidnthappen/database-migration

fixing nft card scaling account pages

src/components/account/AccountInfo.tsx

@@ -166,21 +166,23 @@ export default function AccountInfo({ address }: { address: string }) {
               <BountyList bounties={bounties.data ?? []} />
             )}
             {currentSection === 'claims' && (
-              <ClaimsListAccount
-                claims={
-                  claims.data?.map((claim) => {
-                    return {
-                      id: claim.primaryId.toString(),
-                      title: claim.title,
-                      description: claim.description,
-                      issuer: claim.issuer.id,
-                      bountyId: claim.bounty.primaryId.toString(),
-                      accepted: Boolean(claim.accepted),
-                      url: claim.url,
-                    };
-                  }) ?? []
-                }
-              />
+              <div className='lg:px-20 px-8'>
+                <ClaimsListAccount
+                  claims={
+                    claims.data?.map((claim) => {
+                      return {
+                        id: claim.primaryId.toString(),
+                        title: claim.title,
+                        description: claim.description,
+                        issuer: claim.issuer.id,
+                        bountyId: claim.bounty.primaryId.toString(),
+                        accepted: Boolean(claim.accepted),
+                        url: claim.url,
+                      };
+                    }) ?? []
+                  }
+                />
+              </div>
             )}
           </div>
         </div>

src/components/bounty/BountyInfo.tsx

@@ -1,4 +1,3 @@
-import Link from 'next/link';
 import React, { useState } from 'react';
 import { toast } from 'react-toastify';
 
@@ -97,7 +96,6 @@ export default function BountyInfo({ bountyId }: { bountyId: string }) {
           chainId: chain.id.toString(),
         });
         if (canceled) {
-          bounty.refetch();
           return;
         }
         await new Promise((resolve) => setTimeout(resolve, 1_000));
@@ -111,6 +109,7 @@ export default function BountyInfo({ bountyId }: { bountyId: string }) {
       toast.error('Failed to cancel bounty: ' + error.message);
     },
     onSettled: () => {
+      bounty.refetch();
       setStatus('');
     },
   });

src/components/bounty/ClaimItem.tsx

@@ -128,7 +128,6 @@ export default function ClaimItem({
           chainId: chain.id.toString(),
         });
         if (accepted) {
-          bounty.refetch();
           return;
         }
         await new Promise((resolve) => setTimeout(resolve, 1_000));
@@ -144,6 +143,7 @@ export default function ClaimItem({
       toast.error('Failed to accept claim:' + error.message);
     },
     onSettled: () => {
+      utils.bountyClaims.refetch();
       setStatus('');
     },
   });

src/components/bounty/Voting.tsx

@@ -44,11 +44,13 @@ export default function Voting({ bountyId }: { bountyId: string }) {
     },
     onSuccess: () => {
       toast.success('Voted successfully');
-      voting.refetch();
     },
     onError: (error) => {
       toast.error('Failed to vote: ' + error.message);
     },
+    onSettled: () => {
+      voting.refetch();
+    },
   });
 
   const resolveVoteMutation = useMutation({
@@ -67,11 +69,13 @@ export default function Voting({ bountyId }: { bountyId: string }) {
     },
     onSuccess: () => {
       toast.success('Vote resolved successfully');
-      voting.refetch();
     },
     onError: (error) => {
       toast.error('Failed to resolve vote: ' + error.message);
     },
+    onSettled: () => {
+      voting.refetch();
+    },
   });
 
   return (

src/components/global/FormBounty.tsx

@@ -1,6 +1,5 @@
 import {
   Box,
-  CircularProgress,
   Dialog,
   DialogActions,
   DialogContent,
@@ -176,39 +175,28 @@ export default function FormBounty({
           </Box>
         </DialogContent>
         <DialogActions>
-          {createBountyMutations.isPending ? (
-            <Box className='flex justify-center items-center mt-5'>
-              <CircularProgress />
-            </Box>
-          ) : (
-            <button
-              className={cn(
-                'flex flex-row items-center justify-center',
-                account.isDisconnected && 'opacity-50 cursor-not-allowed'
-              )}
-              onClick={() => {
-                if (account.isConnected && name && description && amount) {
-                  onClose();
-                  createBountyMutations.mutate();
-                } else {
-                  toast.error(
-                    'Please fill in all fields and check wallet connection.'
-                  );
-                }
-              }}
-              disabled={account.isDisconnected}
-            >
-              {createBountyMutations.isPending && (
-                <Box sx={{ display: 'flex' }}>
-                  <CircularProgress />
-                </Box>
-              )}
-              <div className='button'>
-                <GameButton />
-              </div>
-              <ButtonCTA>create bounty</ButtonCTA>
-            </button>
-          )}
+          <button
+            className={cn(
+              'flex flex-row items-center justify-center',
+              account.isDisconnected && 'opacity-50 cursor-not-allowed'
+            )}
+            onClick={() => {
+              if (account.isConnected && name && description && amount) {
+                onClose();
+                createBountyMutations.mutate();
+              } else {
+                toast.error(
+                  'Please fill in all fields and check wallet connection.'
+                );
+              }
+            }}
+            disabled={account.isDisconnected}
+          >
+            <div className='button'>
+              <GameButton />
+            </div>
+            <ButtonCTA>create bounty</ButtonCTA>
+          </button>
         </DialogActions>
       </Dialog>
     </>

src/components/global/FormClaim.tsx

@@ -4,23 +4,18 @@ import { useDropzone } from 'react-dropzone';
 import { toast } from 'react-toastify';
 
 import { useGetChain } from '@/hooks/useGetChain';
-import { buildMetadata, uploadFile, uploadMetadata } from '@/utils';
+import { buildMetadata, cn, uploadFile, uploadMetadata } from '@/utils';
 import { useAccount, useSwitchChain, useWriteContract } from 'wagmi';
 import abi from '@/constant/abi/abi';
 import Image from 'next/image';
 import { useMutation } from '@tanstack/react-query';
 
-import {
-  Dialog,
-  DialogContent,
-  DialogActions,
-  Button,
-  CircularProgress,
-  Box,
-} from '@mui/material';
+import { Dialog, DialogContent, DialogActions, Box } from '@mui/material';
 import { decodeEventLog } from 'viem';
 import { trpc, trpcClient } from '@/trpc/client';
 import Loading from '@/components/global/Loading';
+import GameButton from '@/components/global/GameButton';
+import ButtonCTA from '@/components/ui/ButtonCTA';
 
 const LINK_IPFS = 'https://beige-impossible-dragon-883.mypinata.cloud/ipfs';
 
@@ -37,7 +32,6 @@ export default function FormClaim({
   const [imageURI, setImageURI] = useState<string>('');
   const [name, setName] = useState('');
   const [description, setDescription] = useState('');
-  const [uploading, setUploading] = useState(false);
   const [status, setStatus] = useState<string>('');
   const [file, setFile] = useState<File | null>(null);
   const utils = trpc.useUtils();
@@ -69,19 +63,6 @@ export default function FormClaim({
     },
   });
 
-  const handleImageUpload = async (file: File) => {
-    setUploading(true);
-    try {
-      const compressedFile = await compressImage(file);
-      const cid = await retryUpload(compressedFile);
-      setImageURI(`${LINK_IPFS}/${cid}`);
-    } catch (error) {
-      toast.error('Error uploading image');
-    } finally {
-      setUploading(false);
-    }
-  };
-
   const compressImage = async (image: File): Promise<File> => {
     const options = {
       maxSizeMB: 10,
@@ -121,15 +102,12 @@ export default function FormClaim({
   useEffect(() => {
     const uploadImage = async () => {
       if (file) {
-        setUploading(true);
         try {
           const compressedFile = await compressImage(file);
           const cid = await retryUpload(compressedFile);
           setImageURI(`${LINK_IPFS}/${cid}`);
         } catch (error) {
           toast.error('Failed to upload image: ' + error);
-        } finally {
-          setUploading(false);
         }
       }
     };
@@ -189,7 +167,6 @@ export default function FormClaim({
         });
 
         if (claim) {
-          utils.bountyClaims.refetch();
           return;
         }
         await new Promise((resolve) => setTimeout(resolve, 1_000));
@@ -204,15 +181,15 @@ export default function FormClaim({
       toast.error('Failed to create claim: ' + error.message);
     },
     onSettled: () => {
-      setStatus('');
+      utils.bountyClaims.refetch();
     },
   });
 
   return (
     <>
       <Loading open={createClaimMutations.isPending} status={status} />
       <Dialog
-        open={!createClaimMutations.isPending && open}
+        open={open}
         onClose={onClose}
         maxWidth='xs'
         PaperProps={{
@@ -234,11 +211,12 @@ export default function FormClaim({
               textAlign: 'center',
               cursor: imageURI ? 'default' : 'pointer',
               marginBottom: '10px',
-              opacity: imageURI ? 0.5 : 1,
+              opacity: imageURI ? 1 : 0.5,
               display: 'flex',
               flexDirection: 'column',
               alignItems: 'center',
-              height: '300px',
+              height: 'fit-content',
+              minHeight: '200px',
             }}
           >
             <input {...getInputProps()} />
@@ -255,12 +233,12 @@ export default function FormClaim({
               <Image
                 src={preview}
                 alt='Preview'
-                width={200}
-                height={200}
+                width={300}
+                height={300}
                 style={{
                   marginTop: '10px',
-                  borderRadius: '10px',
                   objectFit: 'contain',
+                  borderRadius: '10px',
                 }}
               />
             )}
@@ -283,28 +261,31 @@ export default function FormClaim({
           </Box>
         </DialogContent>
         <DialogActions>
-          <Button
+          <button
+            className={cn(
+              'flex flex-row items-center justify-center',
+              account.isDisconnected && 'opacity-50 cursor-not-allowed'
+            )}
             onClick={() => {
-              if (name && description && account.isConnected && imageURI) {
+              if (name && description && imageURI) {
+                onClose();
+                setName('');
+                setDescription('');
+                setImageURI('');
+                setPreview('');
                 createClaimMutations.mutate(BigInt(bountyId));
               } else {
                 toast.error(
-                  'Please fill in all fields, upload an image, and connect wallet'
+                  'Please fill in all fields and check wallet connection.'
                 );
               }
             }}
-            variant='contained'
-            className='w-full rounded-full lowercase bg-[#F15E5F] hover:bg-red-400 text-white'
-            disabled={
-              account.isDisconnected ||
-              !name ||
-              !description ||
-              uploading ||
-              !imageURI
-            }
           >
-            {uploading ? <CircularProgress size={24} /> : 'Create Claim'}
-          </Button>
+            <div className='button'>
+              <GameButton />
+            </div>
+            <ButtonCTA>create claim</ButtonCTA>
+          </button>
         </DialogActions>
       </Dialog>
     </>

src/components/global/FormJoinBounty.tsx

@@ -11,7 +11,6 @@ import {
   Dialog,
   DialogActions,
   DialogContent,
-  DialogTitle,
   Typography,
 } from '@mui/material';
 import { cn } from '@/utils';
@@ -59,7 +58,6 @@ export default function FormJoinBounty({
           id: calcId({ id: bountyId, chainId: chain.id }),
         });
         if (participant) {
-          utils.participants.refetch();
           return;
         }
         await new Promise((resolve) => setTimeout(resolve, 1_000));
@@ -73,6 +71,9 @@ export default function FormJoinBounty({
     onError: (error) => {
       toast.error('Failed to join bounty: ' + error.message);
     },
+    onSettled: () => {
+      utils.participants.refetch();
+    },
   });
 
   const handleAmountChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -100,12 +101,11 @@ export default function FormJoinBounty({
           },
         }}
       >
-        <DialogTitle>Join Bounty</DialogTitle>
         <DialogContent>
           <Box
             display='flex'
             flexDirection='column'
-            alignItems='center'
+            alignItems='left'
             width='100%'
           >
             <Typography variant='subtitle1' gutterBottom>
@@ -129,6 +129,8 @@ export default function FormJoinBounty({
             disabled={!amount}
             onClick={() => {
               if (account.isConnected) {
+                onClose();
+                setAmount('');
                 bountyMutation.mutate(BigInt(bountyId));
               } else {
                 toast.error('Please connect wallet to continue');