mobile nav + improved ban

prisma/schema.prisma

@@ -17,14 +17,14 @@ model Bounties {
   in_progress      Boolean? @default(true)
   is_joined_bounty Boolean? @default(false)
   is_canceled      Boolean? @default(false)
-  is_banned        Boolean? @default(false)
   is_multiplayer   Boolean?
   is_voting        Boolean? @default(false)
   deadline         Int?
 
   claims         Claims[]
   participations ParticipationsBounties[]
   issuerUser     Users?                   @relation(fields: [issuer], references: [address])
+  ban            Ban[]
 
   @@id([id, chain_id])
 }
@@ -36,13 +36,13 @@ model Claims {
   description String
   url         String
   issuer      String
-  is_banned   Boolean?
   is_accepted Boolean?
   bounty_id   Int
   owner       String
 
   bounty     Bounties? @relation(fields: [bounty_id, chain_id], references: [id, chain_id])
   issuerUser Users?    @relation(fields: [issuer], references: [address])
+  ban        Ban[]
 
   @@id([id, chain_id])
 }
@@ -70,3 +70,15 @@ model Users {
 
   @@id([address])
 }
+
+model Ban {
+  id        Int      @id @default(autoincrement())
+  chain_id  Int
+  bounty_id Int?
+  claim_id  Int?
+  banned_at DateTime @default(now())
+  banned_by String
+
+  bounty Bounties? @relation(fields: [bounty_id, chain_id], references: [id, chain_id])
+  claim  Claims?   @relation(fields: [claim_id, chain_id], references: [id, chain_id])
+}

src/app/[netname]/bounty/[id]/page.tsx

@@ -7,15 +7,23 @@ import 'react-toastify/dist/ReactToastify.css';
 import BountyClaims from '@/components/bounty/BountyClaims';
 import BountyInfo from '@/components/bounty/BountyInfo';
 import CreateClaim from '@/components/ui/CreateClaim';
+import NavBarMobile from '@/components/global/NavBarMobile';
+import { useScreenSize } from '@/hooks/useScreenSize';
 
 export default function Bounty({ params }: { params: { id: string } }) {
+  const isMobile = useScreenSize();
+
   return (
     <>
       <div className='px-5 lg:px-20'>
         <BountyInfo bountyId={params.id} />
         <BountyClaims bountyId={params.id} />
       </div>
-      <CreateClaim bountyId={params.id} />
+      {isMobile ? (
+        <NavBarMobile type='claim' bountyId={params.id} />
+      ) : (
+        <CreateClaim bountyId={params.id} />
+      )}
       <ToastContainer />
       <div className='h-80' />
     </>

src/app/[netname]/layout.tsx

@@ -1,7 +1,6 @@
 import { Metadata } from 'next';
 import React from 'react';
 
-import Wrapper from '@/components/global/Wrapper';
 import { Netname } from '@/utils/types';
 
 type Props = {
@@ -26,5 +25,5 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
 }
 
 export default function Layout({ children }: Props) {
-  return <Wrapper>{children}</Wrapper>;
+  return children;
 }

src/app/[netname]/page.tsx

@@ -6,13 +6,17 @@ import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 
 import ContentHome from '@/components/layout/ContentHome';
+import NavBarMobile from '@/components/global/NavBarMobile';
 import CreateBounty from '@/components/ui/CreateBounty';
+import { useScreenSize } from '@/hooks/useScreenSize';
 
 export default function Home() {
+  const isMobile = useScreenSize();
+
   return (
     <>
       <ContentHome />
-      <CreateBounty />
+      {isMobile ? <NavBarMobile type='bounty' /> : <CreateBounty />}
       <ToastContainer />
     </>
   );

src/components/bounty/BountyInfo.tsx

@@ -142,15 +142,15 @@ export default function BountyInfo({ bountyId }: { bountyId: string }) {
                   toast.error('You are not an admin');
                 }
               }}
-              disabled={bounty.data.is_banned || false}
+              disabled={bounty.data.ban.length > 0 || false}
               className={cn(
                 'border border-[#F15E5F] w-fit rounded-md py-2 px-5 mt-5',
-                bounty.data.isBanned
+                bounty.data.ban.length > 0
                   ? 'bg-red-400 text-white'
                   : 'hover:bg-red-400 hover:text-white'
               )}
             >
-              {bounty.data.isBanned ? 'banned' : 'ban'}
+              {bounty.data.ban.length > 0 ? 'banned' : 'ban'}
             </button>
           )}
           <p className='mt-5 font-bold'>

src/components/bounty/ClaimItem.tsx

@@ -57,6 +57,7 @@ export default function ClaimItem({
         if (!signature) {
           throw new Error('Failed to sign message');
         }
+
         await banClaimMutation.mutateAsync({
           id: Number(claimId),
           chainId: chain.id,

src/components/global/FormClaim.tsx

@@ -35,6 +35,7 @@ export default function FormClaim({
   const [status, setStatus] = useState<string>('');
   const [file, setFile] = useState<File | null>(null);
   const utils = trpc.useUtils();
+  const [uploading, setUploading] = useState(false);
 
   const account = useAccount();
   const writeContract = useWriteContract({});
@@ -53,15 +54,7 @@ export default function FormClaim({
     reader.readAsDataURL(file);
   }, []);
 
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({
-    onDrop,
-    maxFiles: 1,
-    accept: {
-      'image/png': ['.png'],
-      'image/jpeg': ['.jpg', '.jpeg'],
-      'image/heic': ['.heic'],
-    },
-  });
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
 
   const compressImage = async (image: File): Promise<File> => {
     const options = {
@@ -102,15 +95,19 @@ 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);
+          console.error('Error uploading file:', error);
+          alert('Trouble uploading file');
         }
+        setUploading(false);
       }
     };
+
     uploadImage();
   }, [file]);
 
@@ -208,20 +205,7 @@ export default function FormClaim({
         <DialogContent>
           <div
             {...getRootProps()}
-            style={{
-              border: '2px dashed #D1ECFF',
-              padding: '20px',
-              borderRadius: '30px',
-              textAlign: 'center',
-              cursor: imageURI ? 'default' : 'pointer',
-              marginBottom: '10px',
-              opacity: imageURI ? 1 : 0.5,
-              display: 'flex',
-              flexDirection: 'column',
-              alignItems: 'center',
-              height: 'fit-content',
-              minHeight: '200px',
-            }}
+            className='flex items-center flex-col text-left text-white rounded-[30px] border border-[#D1ECFF] border-dashed p-5 w-full lg:min-w-[400px] justify-center cursor-pointer'
           >
             <input {...getInputProps()} />
             {isDragActive ? (
@@ -237,13 +221,7 @@ export default function FormClaim({
               <Image
                 src={preview}
                 alt='Preview'
-                width={300}
-                height={300}
-                style={{
-                  marginTop: '10px',
-                  objectFit: 'contain',
-                  borderRadius: '10px',
-                }}
+                className='w-[300px] h-[300px] mt-2 rounded-md object-contain'
               />
             )}
           </div>
@@ -271,7 +249,7 @@ export default function FormClaim({
               account.isDisconnected && 'opacity-50 cursor-not-allowed'
             )}
             onClick={() => {
-              if (name && description && imageURI) {
+              if (name && description && imageURI && !uploading) {
                 onClose();
                 createClaimMutations.mutate(BigInt(bountyId));
               } else {