diff --git a/package-lock.json b/package-lock.json
index 6a45738..dbf84fb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "name": "react-next-tww",
       "version": "0.1.0",
       "dependencies": {
-        "@decleanup/contracts": "^1.0.3",
+        "@decleanup/contracts": "^1.0.4",
         "@radix-ui/react-collapsible": "^1.1.2",
         "@radix-ui/react-dialog": "^1.1.3",
         "@radix-ui/react-dropdown-menu": "^2.1.3",
@@ -262,9 +262,9 @@
       }
     },
     "node_modules/@decleanup/contracts": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@decleanup/contracts/-/contracts-1.0.3.tgz",
-      "integrity": "sha512-K2ZhGOca1l1UmEkKo46R0jcu2F9QY0Vq/2PH++R2CjzAAtUc5SusRopA8D6sjRYbM34CYOkPeN63dq7E1e8h9w==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@decleanup/contracts/-/contracts-1.0.4.tgz",
+      "integrity": "sha512-tKciIO28NMM9Lsg6df+DTCO7wiDIs/qxHq1POUZPndiiEXqg0fVSW2+h1UjmunshLh+i0ZLB6kecboIEHDJn/w==",
       "license": "MIT",
       "dependencies": {
         "ethers": "^5.7.2"
diff --git a/package.json b/package.json
index e53dfd4..b5a7d41 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
     ]
   },
   "dependencies": {
-    "@decleanup/contracts": "^1.0.3",
+    "@decleanup/contracts": "^1.0.4",
     "@radix-ui/react-collapsible": "^1.1.2",
     "@radix-ui/react-dialog": "^1.1.3",
     "@radix-ui/react-dropdown-menu": "^2.1.3",
diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index acb9542..372eb16 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -6,6 +6,8 @@ import PreviewPage from '@/components/modals/PreviewModal'
 import Link from 'next/link'
 import { useState } from 'react'
 import Image from 'next/image'
+import { useChainId, useSwitchChain } from 'wagmi'
+import { arbitrumSepolia } from 'wagmi/chains'
 
 interface LongButtonProps {
   text: string
@@ -15,16 +17,39 @@ interface LongButtonProps {
 export default function Page() {
   const [isModalOpen, setIsModalOpen] = useState(false)
   const [isUploadModalOpen, setIsUploadModalOpen] = useState(false)
-  const [_uploadedImages, setUploadedImages] = useState<File[]>([])
+  const [uploadedIpfsUri, setUploadedIpfsUri] = useState<string>('')
   const [isShareModal, setIsShareModal] = useState(false)
 
-  const handleSubmit = (images: File[]) => {
-    setUploadedImages(images)
+  const chainId = useChainId()
+  const { switchChain } = useSwitchChain()
+
+  const handleSubmit = (ipfsUri: string) => {
+    setUploadedIpfsUri(ipfsUri)
     setIsShareModal(true)
-    console.log('Uploaded images:', images)
+    console.log('Uploaded IPFS URI:', ipfsUri)
+  }
+
+  const handleSwitchToArbitrumSepolia = () => {
+    switchChain({ chainId: arbitrumSepolia.id })
   }
+
   return (
     <div className='my-4 h-[calc(100vh-190px)] min-h-[calc(98vh-190px)] bg-[#58B12F] font-bebas font-bold md:min-h-[calc(94vh-160px)] lg:p-4'>
+      {/* Network Warning Banner */}
+      {chainId !== 421614 && (
+        <div className='fixed left-0 right-0 top-0 z-50 bg-red-500 p-4 text-center text-white'>
+          <div className='flex items-center justify-center gap-4'>
+            <span>⚠️ Wrong Network! Please switch to Arbitrum Sepolia</span>
+            <button
+              onClick={handleSwitchToArbitrumSepolia}
+              className='rounded bg-white px-4 py-2 font-semibold text-red-500 hover:bg-gray-100'
+            >
+              Switch Network
+            </button>
+          </div>
+        </div>
+      )}
+
       <div className='flex flex-col items-start justify-between lg:flex-row lg:gap-12'>
         <div className='mt-4 flex w-full flex-col bg-[#FAFF00] lg:order-first lg:w-1/3 lg:bg-[#58B12F]'>
           {/* 24 WEEKS STREAK*/}
@@ -157,7 +182,11 @@ export default function Page() {
             </div>
           </div>
           <div className='flex h-full w-full flex-col space-y-2 py-4'>
-            <button onClick={() => setIsModalOpen(true)} className='w-full'>
+            <button
+              onClick={() => setIsModalOpen(true)}
+              className='w-full'
+              disabled={chainId !== 421614}
+            >
               <LongButton text='APPLY WITH CLEANUP' />
             </button>
             <div className='mt-6'>
@@ -193,6 +222,7 @@ export default function Page() {
         onClose={() => {
           setIsShareModal(false)
         }}
+        ipfsUri={uploadedIpfsUri}
       />
     </div>
   )
@@ -203,7 +233,7 @@ function LongButton({ text, isNotBlack }: LongButtonProps) {
     <button
       className={
         isNotBlack
-          ? `block w-full bg-[#1E8428] py-2 text-center text-xl  text-black opacity-50 md:h-[60px] md:text-3xl md:text-[40px]`
+          ? `block w-full bg-[#1E8428] py-2 text-center text-xl text-black opacity-50 md:h-[60px] md:text-3xl md:text-[40px]`
           : `block h-[60px] w-full bg-black text-center text-sm text-[#FAFF00] md:text-[40px]`
       }
     >
diff --git a/src/app/page.tsx b/src/app/page.tsx
index a26e4b5..eda5b00 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,4 +1,4 @@
-import { Login } from '@/components'
+import Login from '@/components/forms/Login'
 
 const Page = () => {
   return (
diff --git a/src/app/provider.tsx b/src/app/provider.tsx
index 89e103a..7097a2f 100644
--- a/src/app/provider.tsx
+++ b/src/app/provider.tsx
@@ -7,7 +7,7 @@ import { sepolia, arbitrumSepolia } from 'wagmi/chains'
 
 const queryClient = new QueryClient()
 const config = getDefaultConfig({
-  appName: 'My RainbowKit App',
+  appName: 'DeCleanup Network',
   projectId: 'YOUR_PROJECT_ID',
   chains: [sepolia, arbitrumSepolia],
 })
diff --git a/src/components/features/ContractInfo.tsx b/src/components/features/ContractInfo.tsx
deleted file mode 100644
index da4fd28..0000000
--- a/src/components/features/ContractInfo.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { DCUContracts } from "@/services"
-
-export function ContractInfo() {
-  const contracts = new DCUContracts('ARBITRUM_SEPOLIA')
-
-  return (
-    <div className='space-y-2 text-sm'>
-      <div>Network: {contracts.DCUToken.network}</div>
-      <div>Chain ID: {contracts.DCUToken.chainId}</div>
-      <div>DCU Token: {contracts.DCUToken.address}</div>
-      <div>Reward Logic: {contracts.RewardLogic.address}</div>
-      <div>Accounting: {contracts.DCUAccounting.address}</div>
-    </div>
-  )
-}
diff --git a/src/components/forms/Login.tsx b/src/components/forms/Login.tsx
index 41ab377..134553d 100644
--- a/src/components/forms/Login.tsx
+++ b/src/components/forms/Login.tsx
@@ -1,6 +1,5 @@
 'use client'
 import { ConnectButton } from '@rainbow-me/rainbowkit'
-import { ContractInfo } from '@/components/features/ContractInfo'
 import { useAccount } from 'wagmi'
 import Link from 'next/link'
 
@@ -20,7 +19,7 @@ const Login: React.FC = () => {
     'FIRST DAPP TO SELF-TOKENIZE ENVIRONMENTAL',
     'CLEANUP EFFORTS',
   ]
-  console.log(ContractInfo())
+
   return (
     <div className='flex flex-1 flex-col bg-[#58B12F]'>
       {/* Main Content */}
diff --git a/src/components/index.ts b/src/components/index.ts
deleted file mode 100644
index f37bc3d..0000000
--- a/src/components/index.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-// Layout components
-export { default as Header } from './layout/Header'
-export { default as Footer } from './layout/Footer'
-
-// Form components
-export { default as Login } from './forms/Login'
-
-// Feature components
-export { default as ContractInfo } from './features/ContractInfo'
-export { default as DecleanupShareModal } from './features/DecleanupShareModal'
-
-// Common components
-export { default as SessionProvider } from './common/SessionProvider'
-
-// UI components (shadcn/ui)
-export { default as Button } from './ui/button'
-export { default as Card } from './ui/card'
-export { default as Input } from './ui/input'
-export { default as Progress } from './ui/Progress'
-export { default as Separator } from './ui/separator'
-export { default as Skeleton } from './ui/skeleton'
-export { default as Tooltip } from './ui/tooltip'
-export { default as DropdownMenu } from './ui/dropdown-menu'
-export { default as NavigationMenu } from './ui/navigation-menu'
-export { default as Sheet } from './ui/sheet'
-export { default as Collapsible } from './ui/collapsible'
diff --git a/src/components/modals/PreviewModal.tsx b/src/components/modals/PreviewModal.tsx
index 87ff919..b1ff8df 100644
--- a/src/components/modals/PreviewModal.tsx
+++ b/src/components/modals/PreviewModal.tsx
@@ -1,20 +1,77 @@
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import { X, Clock, MessageCircle, CheckCircle } from 'lucide-react'
 
 type DecleanupShareModalProps = {
   isOpen: boolean
   onClose: () => void
+  ipfsUri?: string
+}
+
+interface CleanupMetadata {
+  userAddress: string
+  submissionTimestamp: string
+  cleanupDateTime: string
+  images: {
+    before: {
+      hash: string
+      ipfsUri: string
+      name: string
+      size: number
+      type: string
+    }
+    after: {
+      hash: string
+      ipfsUri: string
+      name: string
+      size: number
+      type: string
+    }
+  }
+  version: string
+  platform: string
 }
 
 const PreviewPage: React.FC<DecleanupShareModalProps> = ({
   isOpen,
   onClose,
+  ipfsUri,
 }) => {
-  // Mock cleanup pictures for demo
-  const cleanupPicture = {
-    before: null, // Will be populated with actual File objects
-    after: null
-  }
+  const [metadata, setMetadata] = useState<CleanupMetadata | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  // Fetch metadata from IPFS when modal opens
+  useEffect(() => {
+    const fetchMetadata = async () => {
+      if (!ipfsUri || !isOpen) return
+
+      setLoading(true)
+      setError(null)
+
+      try {
+        // Convert ipfs:// URI to HTTP gateway URL
+        const gatewayUrl = ipfsUri.replace(
+          'ipfs://',
+          'https://gateway.pinata.cloud/ipfs/',
+        )
+        const response = await fetch(gatewayUrl)
+
+        if (!response.ok) {
+          throw new Error('Failed to fetch metadata from IPFS')
+        }
+
+        const data = await response.json()
+        setMetadata(data)
+      } catch (err) {
+        console.error('Error fetching metadata:', err)
+        setError(err instanceof Error ? err.message : 'Failed to load images')
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    fetchMetadata()
+  }, [ipfsUri, isOpen])
 
   useEffect(() => {
     if (isOpen) {
@@ -31,14 +88,16 @@ const PreviewPage: React.FC<DecleanupShareModalProps> = ({
 
   return (
     <div className='fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-60 backdrop-blur-sm'>
-      <div className='relative w-full max-w-6xl mx-4 bg-white rounded-2xl shadow-2xl overflow-hidden max-h-[90vh]'>
+      <div className='relative mx-4 max-h-[90vh] w-full max-w-6xl overflow-hidden rounded-2xl bg-white shadow-2xl'>
         {/* Header */}
         <div className='bg-black px-6 py-4'>
           <div className='flex items-center justify-between'>
-            <h2 className='text-2xl font-bold text-[#FAFF00]'>Cleanup Submission Preview</h2>
+            <h2 className='text-2xl font-bold text-[#FAFF00]'>
+              Cleanup Submission Preview
+            </h2>
             <button
               onClick={onClose}
-              className='text-[#FAFF00] hover:bg-[#FAFF00] hover:bg-opacity-20 rounded-full p-2 transition-colors'
+              className='rounded-full p-2 text-[#FAFF00] transition-colors hover:bg-[#FAFF00] hover:bg-opacity-20'
             >
               <X size={24} />
             </button>
@@ -46,124 +105,186 @@ const PreviewPage: React.FC<DecleanupShareModalProps> = ({
         </div>
 
         {/* Status Banner */}
-        <div className='bg-[#FAFF00] px-6 py-3 border-b border-gray-200'>
+        <div className='border-b border-gray-200 bg-[#FAFF00] px-6 py-3'>
           <div className='flex items-center gap-3'>
-            <div className='w-8 h-8 bg-black text-[#FAFF00] rounded-full flex items-center justify-center'>
+            <div className='flex h-8 w-8 items-center justify-center rounded-full bg-black text-[#FAFF00]'>
               <Clock size={18} />
             </div>
             <div>
-              <h3 className='font-semibold text-black'>Submission Under Review</h3>
-              <p className='text-sm text-gray-700'>Your cleanup photos are being reviewed by our team</p>
+              <h3 className='font-semibold text-black'>
+                Submission Under Review
+              </h3>
+              <p className='text-sm text-gray-700'>
+                Your cleanup photos are being reviewed by our team
+              </p>
             </div>
           </div>
         </div>
 
         {/* Content */}
-        <div className='p-6 overflow-y-auto max-h-[calc(90vh-200px)]'>
-          <div className='grid grid-cols-1 lg:grid-cols-3 gap-8'>
+        <div className='max-h-[calc(90vh-200px)] overflow-y-auto p-6'>
+          <div className='grid grid-cols-1 gap-8 lg:grid-cols-3'>
             {/* Images Section */}
             <div className='lg:col-span-2'>
-              <h3 className='text-xl font-semibold mb-6 text-gray-900'>Your Cleanup Journey</h3>
-              
-              {cleanupPicture.before || cleanupPicture.after ? (
-                <div className='grid grid-cols-1 md:grid-cols-2 gap-6'>
+              <h3 className='mb-6 text-xl font-semibold text-gray-900'>
+                Your Cleanup Journey
+              </h3>
+
+              {loading ? (
+                <div className='flex flex-col items-center justify-center rounded-lg bg-gray-50 py-12'>
+                  <div className='mb-4 flex h-16 w-16 animate-spin items-center justify-center rounded-full bg-gray-200'>
+                    <Clock size={32} className='text-gray-400' />
+                  </div>
+                  <h4 className='mb-2 text-lg font-medium text-gray-900'>
+                    Loading Images...
+                  </h4>
+                  <p className='text-center text-gray-600'>
+                    Fetching your cleanup photos from IPFS
+                  </p>
+                </div>
+              ) : error ? (
+                <div className='flex flex-col items-center justify-center rounded-lg bg-gray-50 py-12'>
+                  <div className='mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-100'>
+                    <X size={32} className='text-red-500' />
+                  </div>
+                  <h4 className='mb-2 text-lg font-medium text-gray-900'>
+                    Error Loading Images
+                  </h4>
+                  <p className='text-center text-gray-600'>{error}</p>
+                </div>
+              ) : metadata ? (
+                <div className='grid grid-cols-1 gap-6 md:grid-cols-2'>
                   {/* Before Image */}
-                  {cleanupPicture.before && (
-                    <div className='space-y-4'>
-                      <div className='flex items-center gap-3'>
-                        <div className='w-8 h-8 bg-black text-[#FAFF00] rounded-full flex items-center justify-center text-sm font-bold'>
-                          1
-                        </div>
-                        <h4 className='text-lg font-semibold text-gray-900'>Before</h4>
+                  <div className='space-y-4'>
+                    <div className='flex items-center gap-3'>
+                      <div className='flex h-8 w-8 items-center justify-center rounded-full bg-black text-sm font-bold text-[#FAFF00]'>
+                        1
                       </div>
-                      <div className='relative overflow-hidden rounded-lg border-2 border-gray-200'>
-                        <img
-                          src={URL.createObjectURL(cleanupPicture.before)}
-                          alt='Before cleanup'
-                          className='w-full h-64 object-cover'
-                        />
-                        <div className='absolute top-2 right-2 bg-black bg-opacity-75 text-[#FAFF00] px-2 py-1 rounded text-xs font-medium'>
-                          Before
-                        </div>
+                      <h4 className='text-lg font-semibold text-gray-900'>
+                        Before
+                      </h4>
+                    </div>
+                    <div className='relative overflow-hidden rounded-lg border-2 border-gray-200'>
+                      <img
+                        src={metadata.images.before.ipfsUri.replace(
+                          'ipfs://',
+                          'https://gateway.pinata.cloud/ipfs/',
+                        )}
+                        alt='Before cleanup'
+                        className='h-64 w-full object-cover'
+                        onError={e => {
+                          console.error('Failed to load before image')
+                          e.currentTarget.style.display = 'none'
+                        }}
+                      />
+                      <div className='absolute right-2 top-2 rounded bg-black bg-opacity-75 px-2 py-1 text-xs font-medium text-[#FAFF00]'>
+                        Before
                       </div>
                     </div>
-                  )}
+                  </div>
 
                   {/* After Image */}
-                  {cleanupPicture.after && (
-                    <div className='space-y-4'>
-                      <div className='flex items-center gap-3'>
-                        <div className='w-8 h-8 bg-black text-[#FAFF00] rounded-full flex items-center justify-center text-sm font-bold'>
-                          2
-                        </div>
-                        <h4 className='text-lg font-semibold text-gray-900'>After</h4>
+                  <div className='space-y-4'>
+                    <div className='flex items-center gap-3'>
+                      <div className='flex h-8 w-8 items-center justify-center rounded-full bg-black text-sm font-bold text-[#FAFF00]'>
+                        2
                       </div>
-                      <div className='relative overflow-hidden rounded-lg border-2 border-gray-200'>
-                        <img
-                          src={URL.createObjectURL(cleanupPicture.after)}
-                          alt='After cleanup'
-                          className='w-full h-64 object-cover'
-                        />
-                        <div className='absolute top-2 right-2 bg-black bg-opacity-75 text-[#FAFF00] px-2 py-1 rounded text-xs font-medium'>
-                          After
-                        </div>
+                      <h4 className='text-lg font-semibold text-gray-900'>
+                        After
+                      </h4>
+                    </div>
+                    <div className='relative overflow-hidden rounded-lg border-2 border-gray-200'>
+                      <img
+                        src={metadata.images.after.ipfsUri.replace(
+                          'ipfs://',
+                          'https://gateway.pinata.cloud/ipfs/',
+                        )}
+                        alt='After cleanup'
+                        className='h-64 w-full object-cover'
+                        onError={e => {
+                          console.error('Failed to load after image')
+                          e.currentTarget.style.display = 'none'
+                        }}
+                      />
+                      <div className='absolute right-2 top-2 rounded bg-black bg-opacity-75 px-2 py-1 text-xs font-medium text-[#FAFF00]'>
+                        After
                       </div>
                     </div>
-                  )}
+                  </div>
                 </div>
               ) : (
-                <div className='flex flex-col items-center justify-center py-12 bg-gray-50 rounded-lg'>
-                  <div className='w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center mb-4'>
+                <div className='flex flex-col items-center justify-center rounded-lg bg-gray-50 py-12'>
+                  <div className='mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-gray-200'>
                     <CheckCircle size={32} className='text-gray-400' />
                   </div>
-                  <h4 className='text-lg font-medium text-gray-900 mb-2'>No Images to Preview</h4>
-                  <p className='text-gray-600 text-center'>Upload your before and after photos to see them here</p>
+                  <h4 className='mb-2 text-lg font-medium text-gray-900'>
+                    No Images to Preview
+                  </h4>
+                  <p className='text-center text-gray-600'>
+                    Upload your before and after photos to see them here
+                  </p>
                 </div>
               )}
             </div>
 
             {/* Status Panel */}
             <div className='lg:col-span-1'>
-              <div className='bg-gray-50 rounded-lg p-6 space-y-6'>
+              <div className='space-y-6 rounded-lg bg-gray-50 p-6'>
                 <div>
-                  <h3 className='text-lg font-semibold text-gray-900 mb-4'>Review Status</h3>
-                  
+                  <h3 className='mb-4 text-lg font-semibold text-gray-900'>
+                    Review Status
+                  </h3>
+
                   {/* Review Timeline */}
                   <div className='space-y-4'>
                     <div className='flex items-center gap-3'>
-                      <div className='w-6 h-6 bg-black text-[#FAFF00] rounded-full flex items-center justify-center'>
+                      <div className='flex h-6 w-6 items-center justify-center rounded-full bg-black text-[#FAFF00]'>
                         <CheckCircle size={14} />
                       </div>
                       <div>
-                        <p className='text-sm font-medium text-gray-900'>Submitted</p>
-                        <p className='text-xs text-gray-600'>Photos uploaded successfully</p>
+                        <p className='text-sm font-medium text-gray-900'>
+                          Submitted
+                        </p>
+                        <p className='text-xs text-gray-600'>
+                          Photos uploaded successfully
+                        </p>
                       </div>
                     </div>
-                    
+
                     <div className='flex items-center gap-3'>
-                      <div className='w-6 h-6 bg-black text-[#FAFF00] rounded-full flex items-center justify-center'>
+                      <div className='flex h-6 w-6 items-center justify-center rounded-full bg-black text-[#FAFF00]'>
                         <Clock size={14} />
                       </div>
                       <div>
-                        <p className='text-sm font-medium text-gray-900'>Under Review</p>
-                        <p className='text-xs text-gray-600'>Team is verifying your cleanup</p>
+                        <p className='text-sm font-medium text-gray-900'>
+                          Under Review
+                        </p>
+                        <p className='text-xs text-gray-600'>
+                          Team is verifying your cleanup
+                        </p>
                       </div>
                     </div>
-                    
+
                     <div className='flex items-center gap-3'>
-                      <div className='w-6 h-6 bg-gray-300 text-gray-500 rounded-full flex items-center justify-center'>
+                      <div className='flex h-6 w-6 items-center justify-center rounded-full bg-gray-300 text-gray-500'>
                         <CheckCircle size={14} />
                       </div>
                       <div>
-                        <p className='text-sm font-medium text-gray-500'>Approved</p>
-                        <p className='text-xs text-gray-500'>Rewards will be distributed</p>
+                        <p className='text-sm font-medium text-gray-500'>
+                          Approved
+                        </p>
+                        <p className='text-xs text-gray-500'>
+                          Rewards will be distributed
+                        </p>
                       </div>
                     </div>
                   </div>
                 </div>
 
                 <div className='border-t pt-6'>
-                  <h4 className='font-semibold text-gray-900 mb-3'>What's Next?</h4>
+                  <h4 className='mb-3 font-semibold text-gray-900'>
+                    What\'s Next?
+                  </h4>
                   <div className='space-y-3 text-sm text-gray-700'>
                     <div className='flex items-start gap-2'>
                       <span className='font-medium'>⏱️</span>
@@ -171,7 +292,7 @@ const PreviewPage: React.FC<DecleanupShareModalProps> = ({
                     </div>
                     <div className='flex items-start gap-2'>
                       <span className='font-medium'>🏆</span>
-                      <p>You'll receive your new level after approval</p>
+                      <p>You&apos;ll receive your new level after approval</p>
                     </div>
                     <div className='flex items-start gap-2'>
                       <span className='font-medium'>💬</span>
@@ -181,12 +302,12 @@ const PreviewPage: React.FC<DecleanupShareModalProps> = ({
                 </div>
 
                 <div className='border-t pt-6'>
-                  <button className='w-full bg-black text-[#FAFF00] py-3 px-4 rounded-lg font-semibold hover:bg-gray-800 transition-colors flex items-center justify-center gap-2'>
+                  <button className='flex w-full items-center justify-center gap-2 rounded-lg bg-black px-4 py-3 font-semibold text-[#FAFF00] transition-colors hover:bg-gray-800'>
                     <Clock size={18} />
                     In Review
                   </button>
-                  
-                  <button className='w-full mt-3 border border-gray-300 text-gray-700 py-3 px-4 rounded-lg font-medium hover:bg-gray-50 transition-colors flex items-center justify-center gap-2'>
+
+                  <button className='mt-3 flex w-full items-center justify-center gap-2 rounded-lg border border-gray-300 px-4 py-3 font-medium text-gray-700 transition-colors hover:bg-gray-50'>
                     <MessageCircle size={18} />
                     Contact Support
                   </button>
@@ -200,4 +321,4 @@ const PreviewPage: React.FC<DecleanupShareModalProps> = ({
   )
 }
 
-export default PreviewPage
\ No newline at end of file
+export default PreviewPage
diff --git a/src/components/modals/UploadModal.tsx b/src/components/modals/UploadModal.tsx
index 9a2c46f..5307fa3 100644
--- a/src/components/modals/UploadModal.tsx
+++ b/src/components/modals/UploadModal.tsx
@@ -1,30 +1,43 @@
 import { useState } from 'react'
-import { X, Send, Camera, Upload, CheckCircle, ArrowRight, AlertCircle } from 'lucide-react'
-
-// Import components (you'll need to make sure these exist or create them)
-// import ImageUploader from '../imageUploader/ImageUploader'
-// import UploadInstructions from '../imageUploader/UploadInstructions'
-// import SocialConsentCheckbox from '../imageUploader/SocialConsentCheckbox'
-// import { useCleanupContext } from '@/context/ContextApi'
-
-// If you don't have these components, we'll create inline versions
-const ImageUploadModal = ({ 
-  isOpen, 
-  onClose, 
-  onSubmit, 
-  userAddress = '' 
-}) => {
-  const [beforeImage, setBeforeImage] = useState(null)
-  const [afterImage, setAfterImage] = useState(null)
+import {
+  X,
+  Send,
+  Camera,
+  Upload,
+  CheckCircle,
+  ArrowRight,
+  AlertCircle,
+} from 'lucide-react'
+import { useSubmissionOperations } from '@/hooks/useSubmissionOperation'
+import { useAccount } from 'wagmi'
+
+interface ImageUploadModalProps {
+  isOpen: boolean
+  onClose: () => void
+  onSubmit: (ipfsUri: string) => void
+  userAddress?: string
+}
+
+const ImageUploadModal = ({
+  isOpen,
+  onClose,
+  onSubmit,
+  userAddress = '',
+}: ImageUploadModalProps) => {
+  const { address } = useAccount()
+  const { createSubmission } = useSubmissionOperations()
+
+  const [beforeImage, setBeforeImage] = useState<File | null>(null)
+  const [afterImage, setAfterImage] = useState<File | null>(null)
   const [cleanupDate, setCleanupDate] = useState('')
   const [cleanupTime, setCleanupTime] = useState('')
   const [step, setStep] = useState(1)
   const [checkBox, setCheckBox] = useState(false)
   const [isDragging, setIsDragging] = useState(false)
   const [uploadStatus, setUploadStatus] = useState({
-    status: 'idle',
+    status: 'idle' as 'idle' | 'uploading' | 'success' | 'error',
     message: '',
-    progress: 0
+    progress: 0,
   })
 
   // If you have the context, uncomment this:
@@ -33,28 +46,28 @@ const ImageUploadModal = ({
   if (!isOpen) return null
 
   // Validate image file types
-  const validateImageFile = (file) => {
+  const validateImageFile = (file: File) => {
     const validTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp']
     const maxSize = 10 * 1024 * 1024 // 10MB
-    
+
     if (!validTypes.includes(file.type)) {
       setUploadStatus({
         status: 'error',
         message: 'Please upload valid image files (JPEG, PNG, WebP)',
-        progress: 0
+        progress: 0,
       })
       return false
     }
-    
+
     if (file.size > maxSize) {
       setUploadStatus({
         status: 'error',
         message: 'Image files must be smaller than 10MB',
-        progress: 0
+        progress: 0,
       })
       return false
     }
-    
+
     return true
   }
 
@@ -62,21 +75,24 @@ const ImageUploadModal = ({
   const testPinataConnection = async () => {
     const PINATA_API_KEY = process.env.NEXT_PUBLIC_PINATA_API_KEY
     const PINATA_SECRET_KEY = process.env.NEXT_PUBLIC_PINATA_SECRET_KEY
-    
+
     if (!PINATA_API_KEY || !PINATA_SECRET_KEY) {
       console.error('Pinata API keys not configured')
       return false
     }
 
     try {
-      const response = await fetch('https://api.pinata.cloud/data/testAuthentication', {
-        method: 'GET',
-        headers: {
-          'pinata_api_key': PINATA_API_KEY,
-          'pinata_secret_api_key': PINATA_SECRET_KEY,
+      const response = await fetch(
+        'https://api.pinata.cloud/data/testAuthentication',
+        {
+          method: 'GET',
+          headers: {
+            pinata_api_key: PINATA_API_KEY,
+            pinata_secret_api_key: PINATA_SECRET_KEY,
+          },
         },
-      })
-      
+      )
+
       const result = await response.json()
       console.log('Pinata connection test:', result)
       return response.ok
@@ -87,42 +103,47 @@ const ImageUploadModal = ({
   }
 
   // Upload single file to Pinata
-  const uploadSingleFile = async (file, filename) => {
+  const uploadSingleFile = async (file: File, filename: string) => {
     const PINATA_API_KEY = process.env.NEXT_PUBLIC_PINATA_API_KEY
     const PINATA_SECRET_KEY = process.env.NEXT_PUBLIC_PINATA_SECRET_KEY
-    
+
     if (!PINATA_API_KEY || !PINATA_SECRET_KEY) {
       throw new Error('Pinata API keys not configured')
     }
 
     const formData = new FormData()
     formData.append('file', file, filename)
-    
+
     const pinataMetadata = {
       name: filename,
       keyvalues: {
-        userAddress,
+        userAddress: userAddress || address,
         type: 'cleanup-image',
-        timestamp: new Date().toISOString()
-      }
+        timestamp: new Date().toISOString(),
+      },
     }
-    
+
     formData.append('pinataMetadata', JSON.stringify(pinataMetadata))
 
-    const response = await fetch('https://api.pinata.cloud/pinning/pinFileToIPFS', {
-      method: 'POST',
-      headers: {
-        'pinata_api_key': PINATA_API_KEY,
-        'pinata_secret_api_key': PINATA_SECRET_KEY,
+    const response = await fetch(
+      'https://api.pinata.cloud/pinning/pinFileToIPFS',
+      {
+        method: 'POST',
+        headers: {
+          pinata_api_key: PINATA_API_KEY,
+          pinata_secret_api_key: PINATA_SECRET_KEY,
+        },
+        body: formData,
       },
-      body: formData,
-    })
+    )
 
     const responseText = await response.text()
-    
+
     if (!response.ok) {
       console.error('Pinata response:', responseText)
-      throw new Error(`Pinata upload failed: ${response.status} ${response.statusText} - ${responseText}`)
+      throw new Error(
+        `Pinata upload failed: ${response.status} ${response.statusText} - ${responseText}`,
+      )
     }
 
     const result = JSON.parse(responseText)
@@ -130,66 +151,71 @@ const ImageUploadModal = ({
   }
 
   // Create and upload metadata JSON
-  const uploadMetadata = async (metadata) => {
+  const uploadMetadata = async (metadata: Record<string, unknown>) => {
     const PINATA_API_KEY = process.env.NEXT_PUBLIC_PINATA_API_KEY
     const PINATA_SECRET_KEY = process.env.NEXT_PUBLIC_PINATA_SECRET_KEY
-    
+
     if (!PINATA_API_KEY || !PINATA_SECRET_KEY) {
       throw new Error('Pinata API keys not configured')
     }
 
     const metadataBlob = new Blob([JSON.stringify(metadata, null, 2)], {
-      type: 'application/json'
+      type: 'application/json',
     })
 
     const formData = new FormData()
     formData.append('file', metadataBlob, 'cleanup-metadata.json')
-    
+
     const pinataMetadata = {
       name: 'Cleanup Submission Metadata',
       keyvalues: {
         userAddress: metadata.userAddress,
         type: 'cleanup-metadata',
-        timestamp: metadata.submissionTimestamp
-      }
+        timestamp: metadata.submissionTimestamp,
+      },
     }
-    
+
     formData.append('pinataMetadata', JSON.stringify(pinataMetadata))
 
-    const response = await fetch('https://api.pinata.cloud/pinning/pinFileToIPFS', {
-      method: 'POST',
-      headers: {
-        'pinata_api_key': PINATA_API_KEY,
-        'pinata_secret_api_key': PINATA_SECRET_KEY,
+    const response = await fetch(
+      'https://api.pinata.cloud/pinning/pinFileToIPFS',
+      {
+        method: 'POST',
+        headers: {
+          pinata_api_key: PINATA_API_KEY,
+          pinata_secret_api_key: PINATA_SECRET_KEY,
+        },
+        body: formData,
       },
-      body: formData,
-    })
+    )
 
     const responseText = await response.text()
-    
+
     if (!response.ok) {
       console.error('Pinata metadata response:', responseText)
-      throw new Error(`Metadata upload failed: ${response.status} ${response.statusText}`)
+      throw new Error(
+        `Metadata upload failed: ${response.status} ${response.statusText}`,
+      )
     }
 
     const result = JSON.parse(responseText)
     return result.IpfsHash
   }
 
-  const handleDragOver = (e) => {
+  const handleDragOver = (e: React.DragEvent) => {
     e.preventDefault()
     setIsDragging(true)
   }
 
-  const handleDragLeave = (e) => {
+  const handleDragLeave = (e: React.DragEvent) => {
     e.preventDefault()
     setIsDragging(false)
   }
 
-  const handleDrop = (e, type) => {
+  const handleDrop = (e: React.DragEvent, type: 'before' | 'after') => {
     e.preventDefault()
     setIsDragging(false)
-    
+
     if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
       const file = e.dataTransfer.files[0]
       if (validateImageFile(file)) {
@@ -202,7 +228,10 @@ const ImageUploadModal = ({
     }
   }
 
-  const handleFileSelect = (e, type) => {
+  const handleFileSelect = (
+    e: React.ChangeEvent<HTMLInputElement>,
+    type: 'before' | 'after',
+  ) => {
     if (e.target.files && e.target.files.length > 0) {
       const file = e.target.files[0]
       if (validateImageFile(file)) {
@@ -221,7 +250,7 @@ const ImageUploadModal = ({
       setUploadStatus({
         status: 'error',
         message: 'Please accept the social consent checkbox',
-        progress: 0
+        progress: 0,
       })
       return
     }
@@ -230,7 +259,7 @@ const ImageUploadModal = ({
       setUploadStatus({
         status: 'error',
         message: 'Please provide both before and after photos',
-        progress: 0
+        progress: 0,
       })
       return
     }
@@ -239,7 +268,7 @@ const ImageUploadModal = ({
       setUploadStatus({
         status: 'error',
         message: 'Please provide the cleanup date and time',
-        progress: 0
+        progress: 0,
       })
       return
     }
@@ -247,52 +276,56 @@ const ImageUploadModal = ({
     setUploadStatus({
       status: 'uploading',
       message: 'Testing connection...',
-      progress: 5
+      progress: 5,
     })
 
     try {
       // Test Pinata connection first
       const connectionTest = await testPinataConnection()
       if (!connectionTest) {
-        throw new Error('Failed to connect to Pinata. Please check your API keys.')
+        throw new Error(
+          'Failed to connect to Pinata. Please check your API keys.',
+        )
       }
 
       setUploadStatus({
         status: 'uploading',
         message: 'Uploading before image...',
-        progress: 20
+        progress: 20,
       })
 
       // Upload before image
       const beforeImageHash = await uploadSingleFile(
-        beforeImage, 
-        `before_${Date.now()}.${beforeImage.name.split('.').pop()}`
+        beforeImage,
+        `before_${Date.now()}.${beforeImage.name.split('.').pop()}`,
       )
 
       setUploadStatus({
         status: 'uploading',
         message: 'Uploading after image...',
-        progress: 50
+        progress: 50,
       })
 
       // Upload after image
       const afterImageHash = await uploadSingleFile(
-        afterImage, 
-        `after_${Date.now()}.${afterImage.name.split('.').pop()}`
+        afterImage,
+        `after_${Date.now()}.${afterImage.name.split('.').pop()}`,
       )
 
       setUploadStatus({
         status: 'uploading',
         message: 'Creating metadata...',
-        progress: 80
+        progress: 80,
       })
 
       // Create comprehensive metadata
       const submissionTimestamp = new Date().toISOString()
-      const cleanupDateTime = new Date(`${cleanupDate}T${cleanupTime}`).toISOString()
-      
+      const cleanupDateTime = new Date(
+        `${cleanupDate}T${cleanupTime}`,
+      ).toISOString()
+
       const metadata = {
-        userAddress,
+        userAddress: userAddress || address,
         submissionTimestamp,
         cleanupDateTime,
         images: {
@@ -301,43 +334,55 @@ const ImageUploadModal = ({
             ipfsUri: `ipfs://${beforeImageHash}`,
             name: beforeImage.name,
             size: beforeImage.size,
-            type: beforeImage.type
+            type: beforeImage.type,
           },
           after: {
             hash: afterImageHash,
             ipfsUri: `ipfs://${afterImageHash}`,
             name: afterImage.name,
             size: afterImage.size,
-            type: afterImage.type
-          }
+            type: afterImage.type,
+          },
         },
         version: '1.0',
-        platform: 'cleanup-app'
+        platform: 'cleanup-app',
       }
 
       // Upload metadata
       const metadataHash = await uploadMetadata(metadata)
+      const ipfsUri = `ipfs://${metadataHash}`
+
+      setUploadStatus({
+        status: 'uploading',
+        message: 'Submitting to blockchain...',
+        progress: 90,
+      })
+
+      // Submit to blockchain using the submission hook
+      if (createSubmission) {
+        const tx = await createSubmission(ipfsUri)
+        console.log('Submission transaction:', tx)
+      }
 
       setUploadStatus({
         status: 'success',
-        message: 'Upload successful!',
-        progress: 100
+        message: 'Upload and submission successful!',
+        progress: 100,
       })
 
       // Submit the metadata IPFS URI (which contains links to both images)
-      onSubmit(`ipfs://${metadataHash}`)
+      onSubmit(ipfsUri)
 
       // Reset form
       setTimeout(() => {
         handleClose()
       }, 1500)
-
     } catch (error) {
       console.error('Upload error:', error)
       setUploadStatus({
         status: 'error',
         message: `Upload failed: ${error instanceof Error ? error.message : 'Unknown error'}`,
-        progress: 0
+        progress: 0,
       })
     }
   }
@@ -353,109 +398,138 @@ const ImageUploadModal = ({
     onClose()
   }
 
-  const ImageUploader = ({ image, onImageChange, label, type, stepNumber }) => (
-    <div className="w-full max-w-sm mx-auto">
-      <div className="mb-4">
-        <div className="flex items-center gap-2 mb-2">
-          <div className="w-6 h-6 bg-black text-white rounded-full flex items-center justify-center text-sm font-bold">
+  const ImageUploader = ({
+    image,
+    onImageChange,
+    label,
+    type,
+    stepNumber,
+  }: {
+    image: File | null
+    onImageChange: (file: File | null) => void
+    label: string
+    type: 'before' | 'after'
+    stepNumber: number
+  }) => (
+    <div className='mx-auto w-full max-w-sm'>
+      <div className='mb-4'>
+        <div className='mb-2 flex items-center gap-2'>
+          <div className='flex h-6 w-6 items-center justify-center rounded-full bg-black text-sm font-bold text-white'>
             {stepNumber}
           </div>
-          <h3 className="font-semibold text-gray-900">{stepNumber === 1 ? 'Before' : 'After'}</h3>
+          <h3 className='font-semibold text-gray-900'>
+            {stepNumber === 1 ? 'Before' : 'After'}
+          </h3>
         </div>
-        <p className="text-sm text-gray-600 leading-relaxed">{label}</p>
+        <p className='text-sm leading-relaxed text-gray-600'>{label}</p>
       </div>
 
       <div
-        className={`relative border-2 border-dashed rounded-xl p-6 transition-all duration-300 ${
-          isDragging 
-            ? 'border-black bg-[#FAFF00] bg-opacity-20' 
-            : image 
-            ? 'border-black bg-[#FAFF00] bg-opacity-10' 
-            : 'border-gray-300 hover:border-gray-400 bg-gray-50'
+        className={`relative rounded-xl border-2 border-dashed p-6 transition-all duration-300 ${
+          isDragging
+            ? 'border-black bg-[#FAFF00] bg-opacity-20'
+            : image
+              ? 'border-black bg-[#FAFF00] bg-opacity-10'
+              : 'border-gray-300 bg-gray-50 hover:border-gray-400'
         }`}
         onDragOver={handleDragOver}
         onDragLeave={handleDragLeave}
-        onDrop={(e) => handleDrop(e, type)}
+        onDrop={e => handleDrop(e, type)}
       >
         {image ? (
-          <div className="text-center">
-            <div className="relative mx-auto mb-4 w-32 h-32 rounded-lg overflow-hidden">
+          <div className='text-center'>
+            <div className='relative mx-auto mb-4 h-32 w-32 overflow-hidden rounded-lg'>
               <img
                 src={URL.createObjectURL(image)}
                 alt={`${type} preview`}
-                className="w-full h-full object-cover"
+                className='h-full w-full object-cover'
               />
               <button
                 onClick={() => onImageChange(null)}
-                className="absolute top-1 right-1 bg-red-500 text-white rounded-full p-1 hover:bg-red-600 transition-colors"
+                className='absolute right-1 top-1 rounded-full bg-red-500 p-1 text-white transition-colors hover:bg-red-600'
               >
                 <X size={12} />
               </button>
             </div>
-            <div className="flex items-center justify-center gap-2 text-black">
+            <div className='flex items-center justify-center gap-2 text-black'>
               <CheckCircle size={16} />
-              <span className="text-sm font-medium">Image uploaded</span>
+              <span className='text-sm font-medium'>Image uploaded</span>
             </div>
-            <p className="text-xs text-gray-500 mt-1">{image.name}</p>
+            <p className='mt-1 text-xs text-gray-500'>{image.name}</p>
           </div>
         ) : (
-          <div className="text-center">
-            <div className="mx-auto mb-4 w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center">
-              <Camera size={24} className="text-gray-400" />
+          <div className='text-center'>
+            <div className='mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-gray-200'>
+              <Camera size={24} className='text-gray-400' />
             </div>
-            <p className="text-gray-600 mb-2">
+            <p className='mb-2 text-gray-600'>
               <strong>Click to upload</strong> or drag and drop
             </p>
-            <p className="text-xs text-gray-500">PNG, JPG, GIF up to 10MB</p>
+            <p className='text-xs text-gray-500'>PNG, JPG, GIF up to 10MB</p>
           </div>
         )}
-        
+
         <input
-          type="file"
-          accept="image/*"
-          onChange={(e) => handleFileSelect(e, type)}
-          className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+          type='file'
+          accept='image/*'
+          onChange={e => handleFileSelect(e, type)}
+          className='absolute inset-0 h-full w-full cursor-pointer opacity-0'
         />
       </div>
     </div>
   )
 
   const ProgressBar = () => (
-    <div className="flex items-center justify-center mb-6">
-      <div className="flex items-center">
-        <div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold ${
-          step >= 1 ? 'bg-black text-[#FAFF00]' : 'bg-gray-200 text-gray-600'
-        }`}>
+    <div className='mb-6 flex items-center justify-center'>
+      <div className='flex items-center'>
+        <div
+          className={`flex h-8 w-8 items-center justify-center rounded-full text-sm font-bold ${
+            step >= 1 ? 'bg-black text-[#FAFF00]' : 'bg-gray-200 text-gray-600'
+          }`}
+        >
           {beforeImage ? <CheckCircle size={16} /> : '1'}
         </div>
-        <div className={`w-16 h-1 mx-2 ${step >= 2 ? 'bg-black' : 'bg-gray-200'}`} />
-        <div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold ${
-          step >= 2 ? 'bg-black text-[#FAFF00]' : 'bg-gray-200 text-gray-600'
-        }`}>
+        <div
+          className={`mx-2 h-1 w-16 ${step >= 2 ? 'bg-black' : 'bg-gray-200'}`}
+        />
+        <div
+          className={`flex h-8 w-8 items-center justify-center rounded-full text-sm font-bold ${
+            step >= 2 ? 'bg-black text-[#FAFF00]' : 'bg-gray-200 text-gray-600'
+          }`}
+        >
           {afterImage ? <CheckCircle size={16} /> : '2'}
         </div>
-        <div className={`w-16 h-1 mx-2 ${beforeImage && afterImage && checkBox ? 'bg-black' : 'bg-gray-200'}`} />
-        <div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold ${
-          beforeImage && afterImage && checkBox ? 'bg-black text-[#FAFF00]' : 'bg-gray-200 text-gray-600'
-        }`}>
+        <div
+          className={`mx-2 h-1 w-16 ${beforeImage && afterImage && checkBox ? 'bg-black' : 'bg-gray-200'}`}
+        />
+        <div
+          className={`flex h-8 w-8 items-center justify-center rounded-full text-sm font-bold ${
+            beforeImage && afterImage && checkBox
+              ? 'bg-black text-[#FAFF00]'
+              : 'bg-gray-200 text-gray-600'
+          }`}
+        >
           <Send size={16} />
         </div>
       </div>
     </div>
   )
 
-  const isFormValid = beforeImage && afterImage && cleanupDate && cleanupTime && checkBox
+  const isFormValid =
+    beforeImage && afterImage && cleanupDate && cleanupTime && checkBox
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-60 backdrop-blur-sm">
-      <div className="relative w-full max-w-6xl mx-4 bg-white rounded-2xl shadow-2xl overflow-hidden">
+    <div className='fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-60 backdrop-blur-sm'>
+      <div className='relative mx-4 w-full max-w-6xl overflow-hidden rounded-2xl bg-white shadow-2xl'>
         {/* Header */}
-        <div className="bg-black px-6 py-4">
-          <div className="flex items-center justify-between">
-            <h2 className="text-2xl font-bold text-[#FAFF00]">Share Your Cleanup Impact</h2>
+        <div className='bg-black px-6 py-4'>
+          <div className='flex items-center justify-between'>
+            <h2 className='text-2xl font-bold text-[#FAFF00]'>
+              Share Your Cleanup Impact
+            </h2>
             <button
               onClick={handleClose}
-              className="text-[#FAFF00] hover:bg-[#FAFF00] hover:bg-opacity-20 rounded-full p-2 transition-colors"
+              className='rounded-full p-2 text-[#FAFF00] transition-colors hover:bg-[#FAFF00] hover:bg-opacity-20'
               disabled={uploadStatus.status === 'uploading'}
             >
               <X size={24} />
@@ -464,57 +538,67 @@ const ImageUploadModal = ({
         </div>
 
         {/* Content */}
-        <div className="p-6">
+        <div className='p-6'>
           <ProgressBar />
 
           {/* Desktop view */}
-          <div className="hidden md:block">
-            <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8">
+          <div className='hidden md:block'>
+            <div className='mb-8 grid grid-cols-1 gap-8 lg:grid-cols-3'>
               <ImageUploader
                 image={beforeImage}
                 onImageChange={setBeforeImage}
-                label="Snap a photo of the area before you start. Show the impact your cleanup will make!"
-                type="before"
+                label='Snap a photo of the area before you start. Show the impact your cleanup will make!'
+                type='before'
                 stepNumber={1}
               />
-              
+
               <ImageUploader
                 image={afterImage}
                 onImageChange={setAfterImage}
-                label="Capture the transformed space! Upload your after photo to complete your submission and earn rewards."
-                type="after"
+                label='Capture the transformed space! Upload your after photo to complete your submission and earn rewards.'
+                type='after'
                 stepNumber={2}
               />
 
               {/* Right sidebar for desktop */}
-              <div className="flex flex-col justify-between">
+              <div className='flex flex-col justify-between'>
                 {/* Date and Time Fields */}
-                <div className="mb-6 space-y-4">
-                  <h3 className="text-lg font-semibold text-black">Cleanup Details</h3>
-                  
+                <div className='mb-6 space-y-4'>
+                  <h3 className='text-lg font-semibold text-black'>
+                    Cleanup Details
+                  </h3>
+
                   <div>
-                    <label className="block text-sm font-medium text-black mb-1">
+                    <label
+                      htmlFor='cleanup-date'
+                      className='mb-1 block text-sm font-medium text-black'
+                    >
                       Cleanup Date *
                     </label>
                     <input
-                      type="date"
+                      id='cleanup-date'
+                      type='date'
                       value={cleanupDate}
-                      onChange={(e) => setCleanupDate(e.target.value)}
-                      className="w-full p-2 border border-gray-300 rounded bg-white text-black"
+                      onChange={e => setCleanupDate(e.target.value)}
+                      className='w-full rounded border border-gray-300 bg-white p-2 text-black'
                       max={new Date().toISOString().split('T')[0]}
                       required
                     />
                   </div>
-                  
+
                   <div>
-                    <label className="block text-sm font-medium text-black mb-1">
+                    <label
+                      htmlFor='cleanup-time'
+                      className='mb-1 block text-sm font-medium text-black'
+                    >
                       Cleanup Time *
                     </label>
                     <input
-                      type="time"
+                      id='cleanup-time'
+                      type='time'
                       value={cleanupTime}
-                      onChange={(e) => setCleanupTime(e.target.value)}
-                      className="w-full p-2 border border-gray-300 rounded bg-white text-black"
+                      onChange={e => setCleanupTime(e.target.value)}
+                      className='w-full rounded border border-gray-300 bg-white p-2 text-black'
                       required
                     />
                   </div>
@@ -522,30 +606,34 @@ const ImageUploadModal = ({
 
                 {/* Upload Status */}
                 {uploadStatus.status !== 'idle' && (
-                  <div className="mb-4 p-3 rounded-lg bg-gray-50 border">
-                    <div className="flex items-center space-x-2 mb-2">
+                  <div className='mb-4 rounded-lg border bg-gray-50 p-3'>
+                    <div className='mb-2 flex items-center space-x-2'>
                       {uploadStatus.status === 'uploading' && (
-                        <Upload className="w-5 h-5 text-blue-600 animate-spin" />
+                        <Upload className='h-5 w-5 animate-spin text-blue-600' />
                       )}
                       {uploadStatus.status === 'success' && (
-                        <CheckCircle className="w-5 h-5 text-green-600" />
+                        <CheckCircle className='h-5 w-5 text-green-600' />
                       )}
                       {uploadStatus.status === 'error' && (
-                        <AlertCircle className="w-5 h-5 text-red-600" />
+                        <AlertCircle className='h-5 w-5 text-red-600' />
                       )}
-                      <span className={`text-sm font-medium ${
-                        uploadStatus.status === 'success' ? 'text-green-700' :
-                        uploadStatus.status === 'error' ? 'text-red-700' :
-                        'text-blue-700'
-                      }`}>
+                      <span
+                        className={`text-sm font-medium ${
+                          uploadStatus.status === 'success'
+                            ? 'text-green-700'
+                            : uploadStatus.status === 'error'
+                              ? 'text-red-700'
+                              : 'text-blue-700'
+                        }`}
+                      >
                         {uploadStatus.message}
                       </span>
                     </div>
-                    
+
                     {uploadStatus.status === 'uploading' && (
-                      <div className="w-full bg-gray-200 rounded-full h-2">
+                      <div className='h-2 w-full rounded-full bg-gray-200'>
                         <div
-                          className="bg-blue-600 h-2 rounded-full transition-all duration-300"
+                          className='h-2 rounded-full bg-blue-600 transition-all duration-300'
                           style={{ width: `${uploadStatus.progress}%` }}
                         />
                       </div>
@@ -557,44 +645,54 @@ const ImageUploadModal = ({
           </div>
 
           {/* Mobile view */}
-          <div className="md:hidden mb-6">
+          <div className='mb-6 md:hidden'>
             {step === 1 ? (
               <div>
                 <ImageUploader
                   image={beforeImage}
                   onImageChange={setBeforeImage}
-                  label="Snap a photo of the area before you start. Show the impact your cleanup will make!"
-                  type="before"
+                  label='Snap a photo of the area before you start. Show the impact your cleanup will make!'
+                  type='before'
                   stepNumber={1}
                 />
-                
+
                 {/* Date and Time Fields for mobile */}
-                <div className="mt-6 space-y-4">
-                  <h3 className="text-lg font-semibold text-black">Cleanup Details</h3>
-                  
+                <div className='mt-6 space-y-4'>
+                  <h3 className='text-lg font-semibold text-black'>
+                    Cleanup Details
+                  </h3>
+
                   <div>
-                    <label className="block text-sm font-medium text-black mb-1">
+                    <label
+                      htmlFor='cleanup-date-mobile'
+                      className='mb-1 block text-sm font-medium text-black'
+                    >
                       Cleanup Date *
                     </label>
                     <input
-                      type="date"
+                      id='cleanup-date-mobile'
+                      type='date'
                       value={cleanupDate}
-                      onChange={(e) => setCleanupDate(e.target.value)}
-                      className="w-full p-2 border border-gray-300 rounded bg-white text-black"
+                      onChange={e => setCleanupDate(e.target.value)}
+                      className='w-full rounded border border-gray-300 bg-white p-2 text-black'
                       max={new Date().toISOString().split('T')[0]}
                       required
                     />
                   </div>
-                  
+
                   <div>
-                    <label className="block text-sm font-medium text-black mb-1">
+                    <label
+                      htmlFor='cleanup-time-mobile'
+                      className='mb-1 block text-sm font-medium text-black'
+                    >
                       Cleanup Time *
                     </label>
                     <input
-                      type="time"
+                      id='cleanup-time-mobile'
+                      type='time'
                       value={cleanupTime}
-                      onChange={(e) => setCleanupTime(e.target.value)}
-                      className="w-full p-2 border border-gray-300 rounded bg-white text-black"
+                      onChange={e => setCleanupTime(e.target.value)}
+                      className='w-full rounded border border-gray-300 bg-white p-2 text-black'
                       required
                     />
                   </div>
@@ -604,38 +702,42 @@ const ImageUploadModal = ({
               <ImageUploader
                 image={afterImage}
                 onImageChange={setAfterImage}
-                label="Capture the transformed space! Upload your after photo to complete your submission and earn rewards."
-                type="after"
+                label='Capture the transformed space! Upload your after photo to complete your submission and earn rewards.'
+                type='after'
                 stepNumber={2}
               />
             )}
 
             {/* Upload Status for mobile */}
             {uploadStatus.status !== 'idle' && (
-              <div className="mt-4 p-3 rounded-lg bg-gray-50 border">
-                <div className="flex items-center space-x-2 mb-2">
+              <div className='mt-4 rounded-lg border bg-gray-50 p-3'>
+                <div className='mb-2 flex items-center space-x-2'>
                   {uploadStatus.status === 'uploading' && (
-                    <Upload className="w-5 h-5 text-blue-600 animate-spin" />
+                    <Upload className='h-5 w-5 animate-spin text-blue-600' />
                   )}
                   {uploadStatus.status === 'success' && (
-                    <CheckCircle className="w-5 h-5 text-green-600" />
+                    <CheckCircle className='h-5 w-5 text-green-600' />
                   )}
                   {uploadStatus.status === 'error' && (
-                    <AlertCircle className="w-5 h-5 text-red-600" />
+                    <AlertCircle className='h-5 w-5 text-red-600' />
                   )}
-                  <span className={`text-sm font-medium ${
-                    uploadStatus.status === 'success' ? 'text-green-700' :
-                    uploadStatus.status === 'error' ? 'text-red-700' :
-                    'text-blue-700'
-                  }`}>
+                  <span
+                    className={`text-sm font-medium ${
+                      uploadStatus.status === 'success'
+                        ? 'text-green-700'
+                        : uploadStatus.status === 'error'
+                          ? 'text-red-700'
+                          : 'text-blue-700'
+                    }`}
+                  >
                     {uploadStatus.message}
                   </span>
                 </div>
-                
+
                 {uploadStatus.status === 'uploading' && (
-                  <div className="w-full bg-gray-200 rounded-full h-2">
+                  <div className='h-2 w-full rounded-full bg-gray-200'>
                     <div
-                      className="bg-blue-600 h-2 rounded-full transition-all duration-300"
+                      className='h-2 rounded-full bg-blue-600 transition-all duration-300'
                       style={{ width: `${uploadStatus.progress}%` }}
                     />
                   </div>
@@ -645,27 +747,29 @@ const ImageUploadModal = ({
           </div>
 
           {/* Social consent */}
-          <div className="bg-gray-50 rounded-lg p-4 mb-6">
-            <label className="flex items-start gap-3 cursor-pointer">
+          <div className='mb-6 rounded-lg bg-gray-50 p-4'>
+            <label className='flex cursor-pointer items-start gap-3'>
               <input
-                type="checkbox"
+                type='checkbox'
                 checked={checkBox}
-                onChange={(e) => setCheckBox(e.target.checked)}
-                className="mt-1 w-4 h-4 text-blue-600 rounded focus:ring-blue-500"
+                onChange={e => setCheckBox(e.target.checked)}
+                className='mt-1 h-4 w-4 rounded text-blue-600 focus:ring-blue-500'
               />
-              <div className="text-sm text-gray-700">
-                <strong>Social media consent:</strong> I agree to let this organization share my cleanup photos on social media to inspire others and showcase community impact.
+              <div className='text-sm text-gray-700'>
+                <strong>Social media consent:</strong> I agree to let this
+                organization share my cleanup photos on social media to inspire
+                others and showcase community impact.
               </div>
             </label>
           </div>
 
           {/* Action buttons */}
-          <div className="flex gap-3">
+          <div className='flex gap-3'>
             {/* Desktop buttons */}
-            <div className="hidden md:flex gap-3 w-full">
+            <div className='hidden w-full gap-3 md:flex'>
               <button
                 onClick={handleClose}
-                className="flex-1 px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
+                className='flex-1 rounded-lg border border-gray-300 px-6 py-3 text-gray-700 transition-colors hover:bg-gray-50'
                 disabled={uploadStatus.status === 'uploading'}
               >
                 Cancel
@@ -673,39 +777,45 @@ const ImageUploadModal = ({
               <button
                 onClick={handleSubmit}
                 disabled={!isFormValid || uploadStatus.status === 'uploading'}
-                className="flex-1 px-6 py-3 bg-black text-[#FAFF00] rounded-lg hover:bg-gray-800 disabled:opacity-50 disabled:cursor-not-allowed transition-all flex items-center justify-center gap-2"
+                className='flex flex-1 items-center justify-center gap-2 rounded-lg bg-black px-6 py-3 text-[#FAFF00] transition-all hover:bg-gray-800 disabled:cursor-not-allowed disabled:opacity-50'
               >
                 <Send size={18} />
-                {uploadStatus.status === 'uploading' ? 'Uploading...' : 'Submit Cleanup'}
+                {uploadStatus.status === 'uploading'
+                  ? 'Uploading...'
+                  : 'Submit Cleanup'}
               </button>
             </div>
 
             {/* Mobile buttons */}
-            <div className="md:hidden w-full">
+            <div className='w-full md:hidden'>
               {step === 1 ? (
                 <button
                   onClick={() => setStep(2)}
                   disabled={!beforeImage || !cleanupDate || !cleanupTime}
-                  className="w-full px-6 py-4 bg-black text-[#FAFF00] rounded-lg hover:bg-gray-800 disabled:opacity-50 disabled:cursor-not-allowed transition-all flex items-center justify-center gap-2"
+                  className='flex w-full items-center justify-center gap-2 rounded-lg bg-black px-6 py-4 text-[#FAFF00] transition-all hover:bg-gray-800 disabled:cursor-not-allowed disabled:opacity-50'
                 >
                   Next Step
                   <ArrowRight size={18} />
                 </button>
               ) : (
-                <div className="flex gap-3">
+                <div className='flex gap-3'>
                   <button
                     onClick={() => setStep(1)}
-                    className="flex-1 px-4 py-4 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
+                    className='flex-1 rounded-lg border border-gray-300 px-4 py-4 text-gray-700 transition-colors hover:bg-gray-50'
                   >
                     Back
                   </button>
                   <button
                     onClick={handleSubmit}
-                    disabled={!isFormValid || uploadStatus.status === 'uploading'}
-                    className="flex-1 px-4 py-4 bg-black text-[#FAFF00] rounded-lg hover:bg-gray-800 disabled:opacity-50 disabled:cursor-not-allowed transition-all flex items-center justify-center gap-2"
+                    disabled={
+                      !isFormValid || uploadStatus.status === 'uploading'
+                    }
+                    className='flex flex-1 items-center justify-center gap-2 rounded-lg bg-black px-4 py-4 text-[#FAFF00] transition-all hover:bg-gray-800 disabled:cursor-not-allowed disabled:opacity-50'
                   >
                     <Send size={18} />
-                    {uploadStatus.status === 'uploading' ? 'Uploading...' : 'Submit'}
+                    {uploadStatus.status === 'uploading'
+                      ? 'Uploading...'
+                      : 'Submit'}
                   </button>
                 </div>
               )}
@@ -717,4 +827,4 @@ const ImageUploadModal = ({
   )
 }
 
-export default ImageUploadModal
\ No newline at end of file
+export default ImageUploadModal
diff --git a/src/contracts/abis/Submission.json b/src/contracts/abis/Submission.json
new file mode 100644
index 0000000..0519ecb
--- /dev/null
+++ b/src/contracts/abis/Submission.json
@@ -0,0 +1 @@
+ 
\ No newline at end of file
diff --git a/src/contracts/config.ts b/src/contracts/config.ts
new file mode 100644
index 0000000..0519ecb
--- /dev/null
+++ b/src/contracts/config.ts
@@ -0,0 +1 @@
+ 
\ No newline at end of file
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
deleted file mode 100644
index 828e497..0000000
--- a/src/hooks/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-// Custom hooks
-export { default as useDeCleanupContracts } from './useDeCleanupContracts'
-export { default as useMobile } from './use-mobile'
diff --git a/src/hooks/use-mobile.tsx b/src/hooks/use-mobile.tsx
deleted file mode 100644
index 4331d5c..0000000
--- a/src/hooks/use-mobile.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import * as React from 'react'
-
-const MOBILE_BREAKPOINT = 768
-
-export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
-
-  React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    }
-    mql.addEventListener('change', onChange)
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    return () => mql.removeEventListener('change', onChange)
-  }, [])
-
-  return !!isMobile
-}
diff --git a/src/hooks/useContract.ts b/src/hooks/useContract.ts
new file mode 100644
index 0000000..cc8dfdd
--- /dev/null
+++ b/src/hooks/useContract.ts
@@ -0,0 +1,125 @@
+import { useMemo } from 'react'
+import { useChainId, usePublicClient, useWalletClient } from 'wagmi'
+import { getContract } from 'viem'
+import { DCUContracts, Networks } from '@decleanup/contracts'
+
+export function useContracts() {
+  const chainId = useChainId()
+  const publicClient = usePublicClient()
+  const walletClient = useWalletClient()
+
+  return useMemo(() => {
+    const network =
+      chainId === 421614 ? Networks.ARBITRUM_SEPOLIA : Networks.ARBITRUM
+
+    if (!network) {
+      console.warn(`Unsupported chain ID: ${chainId}`)
+      return null
+    }
+
+    if (!publicClient) {
+      console.warn('Public client not available')
+      return null
+    }
+
+    const contractConfigs = new DCUContracts(network)
+
+    console.log('useContract', { chainId, publicClient, walletClient })
+
+    // Create actual contract instances for reading
+    const readContracts = {
+      DCUToken: getContract({
+        address: contractConfigs.DCUToken.address as `0x${string}`,
+        abi: contractConfigs.DCUToken.abi,
+        client: publicClient,
+      }),
+      RewardLogic: getContract({
+        address: contractConfigs.RewardLogic.address as `0x${string}`,
+        abi: contractConfigs.RewardLogic.abi,
+        client: publicClient,
+      }),
+      DCUAccounting: getContract({
+        address: contractConfigs.DCUAccounting.address as `0x${string}`,
+        abi: contractConfigs.DCUAccounting.abi,
+        client: publicClient,
+      }),
+      DCUStorage: getContract({
+        address: contractConfigs.DCUStorage.address as `0x${string}`,
+        abi: contractConfigs.DCUStorage.abi,
+        client: publicClient,
+      }),
+      DCURewardManager: getContract({
+        address: contractConfigs.DCURewardManager.address as `0x${string}`,
+        abi: contractConfigs.DCURewardManager.abi,
+        client: publicClient,
+      }),
+      DipNft: getContract({
+        address: contractConfigs.DipNft.address as `0x${string}`,
+        abi: contractConfigs.DipNft.abi,
+        client: publicClient,
+      }),
+      NFTCollection: getContract({
+        address: contractConfigs.NFTCollection.address as `0x${string}`,
+        abi: contractConfigs.NFTCollection.abi,
+        client: publicClient,
+      }),
+      Submission: getContract({
+        address: contractConfigs.Submission.address as `0x${string}`,
+        abi: contractConfigs.Submission.abi,
+        client: publicClient,
+      }),
+    }
+
+    return {
+      ...readContracts,
+
+      getWriteContracts: () => {
+        if (!walletClient?.data) return null
+
+        // Create contract instances for writing
+        return {
+          token: getContract({
+            address: contractConfigs.DCUToken.address as `0x${string}`,
+            abi: contractConfigs.DCUToken.abi,
+            client: walletClient.data,
+          }),
+          rewardManager: getContract({
+            address: contractConfigs.DCURewardManager.address as `0x${string}`,
+            abi: contractConfigs.DCURewardManager.abi,
+            client: walletClient.data,
+          }),
+          dipNft: getContract({
+            address: contractConfigs.DipNft.address as `0x${string}`,
+            abi: contractConfigs.DipNft.abi,
+            client: walletClient.data,
+          }),
+          submission: getContract({
+            address: contractConfigs.Submission.address as `0x${string}`,
+            abi: contractConfigs.Submission.abi,
+            client: walletClient.data,
+          }),
+          accounting: getContract({
+            address: contractConfigs.DCUAccounting.address as `0x${string}`,
+            abi: contractConfigs.DCUAccounting.abi,
+            client: walletClient.data,
+          }),
+          storage: getContract({
+            address: contractConfigs.DCUStorage.address as `0x${string}`,
+            abi: contractConfigs.DCUStorage.abi,
+            client: walletClient.data,
+          }),
+          rewardLogic: getContract({
+            address: contractConfigs.RewardLogic.address as `0x${string}`,
+            abi: contractConfigs.RewardLogic.abi,
+            client: walletClient.data,
+          }),
+          nftCollection: getContract({
+            address: contractConfigs.NFTCollection.address as `0x${string}`,
+            abi: contractConfigs.NFTCollection.abi,
+            client: walletClient.data,
+          }),
+        }
+      },
+    }
+  }, [chainId, publicClient, walletClient])
+}
diff --git a/src/hooks/useDeCleanupContracts.ts b/src/hooks/useDeCleanupContracts.ts
deleted file mode 100644
index aa97f0a..0000000
--- a/src/hooks/useDeCleanupContracts.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import { DCUContracts, getContractAbi } from '../lib/decleanup-contracts'
-import { getContract } from 'viem'
-
-import { useMemo } from 'react'
-import { usePublicClient, useWalletClient } from 'wagmi'
-
-export function useDeCleanupContracts() {
-  const { data: walletClient } = useWalletClient()
-  const publicClient = usePublicClient()
-
-  return useMemo(async () => {
-    if (!walletClient || !publicClient) return null
-
-    const contracts = new DCUContracts('ARBITRUM_SEPOLIA')
-
-    const [
-      tokenAbi,
-      rewardLogicAbi,
-      accountingAbi,
-      storageAbi,
-      rewardManagerAbi,
-      dipNftAbi,
-    ] = await Promise.all([
-      getContractAbi.DCUToken(),
-      getContractAbi.RewardLogic(),
-      getContractAbi.DCUAccounting(),
-      getContractAbi.DCUStorage(),
-      getContractAbi.DCURewardManager(),
-      getContractAbi.DipNft(),
-    ])
-
-    return {
-      token: getContract({
-        address: contracts.DCUToken.address,
-        abi: tokenAbi,
-        client: walletClient,
-      }),
-      rewardLogic: getContract({
-        address: contracts.RewardLogic.address,
-        abi: rewardLogicAbi,
-        client: walletClient,
-      }),
-      accounting: getContract({
-        address: contracts.DCUAccounting.address,
-        abi: accountingAbi,
-        client: walletClient,
-      }),
-      storage: getContract({
-        address: contracts.DCUStorage.address,
-        abi: storageAbi,
-        client: walletClient,
-      }),
-      rewardManager: getContract({
-        address: contracts.DCURewardManager.address,
-        abi: rewardManagerAbi,
-        client: walletClient,
-      }),
-      dipNft: getContract({
-        address: contracts.DipNft.address,
-        abi: dipNftAbi,
-        client: walletClient,
-      }),
-    }
-  }, [walletClient, publicClient])
-}
diff --git a/src/hooks/useRewardOperation.ts b/src/hooks/useRewardOperation.ts
new file mode 100644
index 0000000..175f3a4
--- /dev/null
+++ b/src/hooks/useRewardOperation.ts
@@ -0,0 +1,58 @@
+// src/hooks/useRewardOperations.ts
+import { useState, useCallback } from 'react'
+import { useAccount } from 'wagmi'
+import { parseUnits } from 'viem'
+import { useContracts } from './useContract'
+
+export function useRewardOperations() {
+  const { address } = useAccount()
+  const contracts = useContracts()
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const getPendingRewards = useCallback(async () => {
+    if (!contracts?.DCURewardManager || !address) return null
+
+    try {
+      const rewards =
+        await contracts.DCURewardManager.getPendingRewards(address)
+      return rewards
+    } catch (err) {
+      console.error('Error getting pending rewards:', err)
+      return null
+    }
+  }, [contracts, address])
+
+  const claimRewards = useCallback(
+    async (amount: string) => {
+      if (!contracts) return null
+
+      const writeContracts = contracts.getWriteContracts()
+      if (!writeContracts) throw new Error('Wallet not connected')
+
+      setIsLoading(true)
+      setError(null)
+
+      try {
+        const parsedAmount = parseUnits(amount, 18)
+        const tx = await writeContracts.rewardManager.claimRewards(parsedAmount)
+        await tx.wait()
+        return tx
+      } catch (err: unknown) {
+        const errorMessage = err instanceof Error ? err.message : 'Claim failed'
+        setError(errorMessage)
+        throw err
+      } finally {
+        setIsLoading(false)
+      }
+    },
+    [contracts],
+  )
+
+  return {
+    getPendingRewards,
+    claimRewards,
+    isLoading,
+    error,
+  }
+}
diff --git a/src/hooks/useSubmissionOperation.ts b/src/hooks/useSubmissionOperation.ts
new file mode 100644
index 0000000..59c7dd2
--- /dev/null
+++ b/src/hooks/useSubmissionOperation.ts
@@ -0,0 +1,214 @@
+// src/hooks/useSubmissionOperation.ts
+import { useState, useCallback } from 'react'
+import { useAccount } from 'wagmi'
+import { useContracts } from './useContract'
+
+export function useSubmissionOperations() {
+  const { address } = useAccount()
+  const contracts = useContracts()
+  const [isLoading, setIsLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  const createSubmission = useCallback(
+    async (dataURI: string) => {
+      if (!contracts) return null
+
+      const writeContracts = contracts.getWriteContracts()
+      if (!writeContracts) throw new Error('Wallet not connected')
+
+      setIsLoading(true)
+      setError(null)
+
+      try {
+        // Use viem's writeContract method
+        const txHash = await writeContracts.submission.write.createSubmission([
+          dataURI,
+        ])
+        return txHash
+      } catch (err: unknown) {
+        const errorMessage =
+          err instanceof Error ? err.message : 'Submission creation failed'
+        setError(errorMessage)
+        throw err
+      } finally {
+        setIsLoading(false)
+      }
+    },
+    [contracts],
+  )
+
+  const getSubmissionDetails = useCallback(
+    async (submissionId: number) => {
+      if (!contracts?.Submission) return null
+
+      try {
+        const submission = await contracts.Submission.read.getSubmissionDetails(
+          [submissionId],
+        )
+        return submission
+      } catch (err) {
+        console.error('Error getting submission details:', err)
+        return null
+      }
+    },
+    [contracts],
+  )
+
+  const getSubmissionsByUser = useCallback(
+    async (userAddress?: string) => {
+      if (!contracts?.Submission) return null
+
+      const targetAddress = userAddress || address
+      if (!targetAddress) return null
+
+      try {
+        const submissionIds =
+          await contracts.Submission.read.getSubmissionsByUser([targetAddress])
+        return submissionIds
+      } catch (err) {
+        console.error('Error getting user submissions:', err)
+        return null
+      }
+    },
+    [contracts, address],
+  )
+
+  const getSubmissionBatch = useCallback(
+    async (startIndex: number, batchSize: number) => {
+      if (!contracts?.Submission) return null
+
+      try {
+        const submissions = await contracts.Submission.read.getSubmissionBatch([
+          startIndex,
+          batchSize,
+        ])
+        return submissions
+      } catch (err) {
+        console.error('Error getting submission batch:', err)
+        return null
+      }
+    },
+    [contracts],
+  )
+
+  const getSubmissionCount = useCallback(async () => {
+    if (!contracts?.Submission) return null
+
+    try {
+      const count = await contracts.Submission.read.submissionCount([])
+      return count
+    } catch (err) {
+      console.error('Error getting submission count:', err)
+      return null
+    }
+  }, [contracts])
+
+  const getClaimableRewards = useCallback(
+    async (userAddress?: string) => {
+      if (!contracts?.Submission) return null
+
+      const targetAddress = userAddress || address
+      if (!targetAddress) return null
+
+      try {
+        const rewards = await contracts.Submission.read.getClaimableRewards([
+          targetAddress,
+        ])
+        return rewards
+      } catch (err) {
+        console.error('Error getting claimable rewards:', err)
+        return null
+      }
+    },
+    [contracts, address],
+  )
+
+  const claimRewards = useCallback(async () => {
+    if (!contracts) return null
+
+    const writeContracts = contracts.getWriteContracts()
+    if (!writeContracts) throw new Error('Wallet not connected')
+
+    setIsLoading(true)
+    setError(null)
+
+    try {
+      const txHash = await writeContracts.submission.write.claimRewards([])
+      return txHash
+    } catch (err: unknown) {
+      const errorMessage = err instanceof Error ? err.message : 'Claim failed'
+      setError(errorMessage)
+      throw err
+    } finally {
+      setIsLoading(false)
+    }
+  }, [contracts])
+
+  const approveSubmission = useCallback(
+    async (submissionId: number) => {
+      if (!contracts) return null
+
+      const writeContracts = contracts.getWriteContracts()
+      if (!writeContracts) throw new Error('Wallet not connected')
+
+      setIsLoading(true)
+      setError(null)
+
+      try {
+        const txHash = await writeContracts.submission.write.approveSubmission([
+          submissionId,
+        ])
+        return txHash
+      } catch (err: unknown) {
+        const errorMessage =
+          err instanceof Error ? err.message : 'Approval failed'
+        setError(errorMessage)
+        throw err
+      } finally {
+        setIsLoading(false)
+      }
+    },
+    [contracts],
+  )
+
+  const rejectSubmission = useCallback(
+    async (submissionId: number) => {
+      if (!contracts) return null
+
+      const writeContracts = contracts.getWriteContracts()
+      if (!writeContracts) throw new Error('Wallet not connected')
+
+      setIsLoading(true)
+      setError(null)
+
+      try {
+        const txHash = await writeContracts.submission.write.rejectSubmission([
+          submissionId,
+        ])
+        return txHash
+      } catch (err: unknown) {
+        const errorMessage =
+          err instanceof Error ? err.message : 'Rejection failed'
+        setError(errorMessage)
+        throw err
+      } finally {
+        setIsLoading(false)
+      }
+    },
+    [contracts],
+  )
+
+  return {
+    createSubmission,
+    getSubmissionDetails,
+    getSubmissionsByUser,
+    getSubmissionBatch,
+    getSubmissionCount,
+    getClaimableRewards,
+    claimRewards,
+    approveSubmission,
+    rejectSubmission,
+    isLoading,
+    error,
+  }
+}
diff --git a/src/services/index.ts b/src/services/index.ts
index 24a5cd5..bf8c625 100644
--- a/src/services/index.ts
+++ b/src/services/index.ts
@@ -1,6 +1,2 @@
 // API services
 export * from './api'
-
-// Web3 services
-export * from './web3/contracts'
-export * from './web3/decleanup-contracts'
diff --git a/src/services/web3/contracts.ts b/src/services/web3/contracts.ts
deleted file mode 100644
index 98348f4..0000000
--- a/src/services/web3/contracts.ts
+++ /dev/null
@@ -1,107 +0,0 @@
-import { DCUContracts, getContractAbi } from './decleanup-contracts'
-import { PublicClient, WalletClient, getContract } from 'viem'
-
-// Get contract addresses and ABIs
-const contracts = new DCUContracts('ARBITRUM_SEPOLIA')
-
-export async function getDeCleanupReadContracts(publicClient: PublicClient) {
-  const [
-    tokenAbi,
-    rewardLogicAbi,
-    accountingAbi,
-    storageAbi,
-    rewardManagerAbi,
-    dipNftAbi,
-  ] = await Promise.all([
-    getContractAbi.DCUToken(),
-    getContractAbi.RewardLogic(),
-    getContractAbi.DCUAccounting(),
-    getContractAbi.DCUStorage(),
-    getContractAbi.DCURewardManager(),
-    getContractAbi.DipNft(),
-  ])
-
-  return {
-    token: getContract({
-      address: contracts.DCUToken.address,
-      abi: tokenAbi,
-      client: publicClient,
-    }),
-    rewardLogic: getContract({
-      address: contracts.RewardLogic.address,
-      abi: rewardLogicAbi,
-      client: publicClient,
-    }),
-    accounting: getContract({
-      address: contracts.DCUAccounting.address,
-      abi: accountingAbi,
-      client: publicClient,
-    }),
-    storage: getContract({
-      address: contracts.DCUStorage.address,
-      abi: storageAbi,
-      client: publicClient,
-    }),
-    rewardManager: getContract({
-      address: contracts.DCURewardManager.address,
-      abi: rewardManagerAbi,
-      client: publicClient,
-    }),
-    dipNft: getContract({
-      address: contracts.DipNft.address,
-      abi: dipNftAbi,
-      client: publicClient,
-    }),
-  }
-}
-
-export async function getDeCleanupWriteContracts(walletClient: WalletClient) {
-  const [
-    tokenAbi,
-    rewardLogicAbi,
-    accountingAbi,
-    storageAbi,
-    rewardManagerAbi,
-    dipNftAbi,
-  ] = await Promise.all([
-    getContractAbi.DCUToken(),
-    getContractAbi.RewardLogic(),
-    getContractAbi.DCUAccounting(),
-    getContractAbi.DCUStorage(),
-    getContractAbi.DCURewardManager(),
-    getContractAbi.DipNft(),
-  ])
-
-  return {
-    token: getContract({
-      address: contracts.DCUToken.address,
-      abi: tokenAbi,
-      client: walletClient,
-    }),
-    rewardLogic: getContract({
-      address: contracts.RewardLogic.address,
-      abi: rewardLogicAbi,
-      client: walletClient,
-    }),
-    accounting: getContract({
-      address: contracts.DCUAccounting.address,
-      abi: accountingAbi,
-      client: walletClient,
-    }),
-    storage: getContract({
-      address: contracts.DCUStorage.address,
-      abi: storageAbi,
-      client: walletClient,
-    }),
-    rewardManager: getContract({
-      address: contracts.DCURewardManager.address,
-      abi: rewardManagerAbi,
-      client: walletClient,
-    }),
-    dipNft: getContract({
-      address: contracts.DipNft.address,
-      abi: dipNftAbi,
-      client: walletClient,
-    }),
-  }
-}
diff --git a/src/services/web3/decleanup-contracts.ts b/src/services/web3/decleanup-contracts.ts
deleted file mode 100644
index 89b3b54..0000000
--- a/src/services/web3/decleanup-contracts.ts
+++ /dev/null
@@ -1,108 +0,0 @@
-// DeCleanup Contracts Configuration
-// This file provides a clean interface to the DeCleanup contracts
-// without importing the problematic TypeScript files from the package
-
-export const Networks = {
-  ARBITRUM_SEPOLIA: 'arbitrum-sepolia',
-  ARBITRUM: 'arbitrum',
-} as const
-
-// Contract addresses for Arbitrum Sepolia
-const ARBITRUM_SEPOLIA_CONFIG = {
-  chainId: 421614,
-  DCUToken: '0xEaD63c05aAaF85f52391dA6e6B16DDE49464dc47' as `0x${string}`,
-  RewardLogic: '0xA2F29E577728aD6bB0AF74b4B3Af8bd5Ba3095B4' as `0x${string}`,
-  DCUAccounting: '0xf8D1949db87a26d5e783A6801c97107106f060Da' as `0x${string}`,
-  DCUStorage: '0x12851591e04d263c1fC77737f7533145dB984537' as `0x${string}`,
-  DCURewardManager:
-    '0x876d3E39F21780E387a6391Eba370268E94b566E' as `0x${string}`,
-  DipNft: '0x9d42D04d8DFc172f532d02faC5821eaC1E733A8d' as `0x${string}`,
-}
-
-export class DCUContracts {
-  private config: typeof ARBITRUM_SEPOLIA_CONFIG
-
-  constructor(network: keyof typeof Networks) {
-    if (network === 'ARBITRUM_SEPOLIA') {
-      this.config = ARBITRUM_SEPOLIA_CONFIG
-    } else {
-      throw new Error(`Network ${network} not supported yet`)
-    }
-  }
-
-  get DCUToken() {
-    return {
-      address: this.config.DCUToken,
-      network: 'arbitrum-sepolia' as const,
-      chainId: this.config.chainId,
-    }
-  }
-
-  get RewardLogic() {
-    return {
-      address: this.config.RewardLogic,
-      network: 'arbitrum-sepolia' as const,
-      chainId: this.config.chainId,
-    }
-  }
-
-  get DCUAccounting() {
-    return {
-      address: this.config.DCUAccounting,
-      network: 'arbitrum-sepolia' as const,
-      chainId: this.config.chainId,
-    }
-  }
-
-  get DCUStorage() {
-    return {
-      address: this.config.DCUStorage,
-      network: 'arbitrum-sepolia' as const,
-      chainId: this.config.chainId,
-    }
-  }
-
-  get DCURewardManager() {
-    return {
-      address: this.config.DCURewardManager,
-      network: 'arbitrum-sepolia' as const,
-      chainId: this.config.chainId,
-    }
-  }
-
-  get DipNft() {
-    return {
-      address: this.config.DipNft,
-      network: 'arbitrum-sepolia' as const,
-      chainId: this.config.chainId,
-    }
-  }
-}
-
-// Export ABI getters
-export const getContractAbi = {
-  DCUToken: () =>
-    import(
-      '@decleanup/contracts/arbitrum-sepolia/artifacts/DCUToken/abi.json'
-    ).then(m => m.default),
-  RewardLogic: () =>
-    import(
-      '@decleanup/contracts/arbitrum-sepolia/artifacts/RewardLogic/abi.json'
-    ).then(m => m.default),
-  DCUAccounting: () =>
-    import(
-      '@decleanup/contracts/arbitrum-sepolia/artifacts/DCUAccounting/abi.json'
-    ).then(m => m.default),
-  DCUStorage: () =>
-    import(
-      '@decleanup/contracts/arbitrum-sepolia/artifacts/DCUStorage/abi.json'
-    ).then(m => m.default),
-  DCURewardManager: () =>
-    import(
-      '@decleanup/contracts/arbitrum-sepolia/artifacts/DCURewardManager/abi.json'
-    ).then(m => m.default),
-  DipNft: () =>
-    import(
-      '@decleanup/contracts/arbitrum-sepolia/artifacts/DipNft/abi.json'
-    ).then(m => m.default),
-}
diff --git a/src/services/web3/index.ts b/src/services/web3/index.ts
deleted file mode 100644
index 493ef5e..0000000
--- a/src/services/web3/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-// Web3 service exports
-export * from './contracts'
-export * from './decleanup-contracts'
diff --git a/yarn.lock b/yarn.lock
index df02c58..1ae553a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -102,10 +102,10 @@
     eventemitter3 "^5.0.1"
     preact "^10.24.2"
 
-"@decleanup/contracts@^1.0.3":
-  version "1.0.3"
-  resolved "https://registry.npmjs.org/@decleanup/contracts/-/contracts-1.0.3.tgz"
-  integrity sha512-K2ZhGOca1l1UmEkKo46R0jcu2F9QY0Vq/2PH++R2CjzAAtUc5SusRopA8D6sjRYbM34CYOkPeN63dq7E1e8h9w==
+"@decleanup/contracts@^1.0.4":
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/@decleanup/contracts/-/contracts-1.0.4.tgz"
+  integrity sha512-tKciIO28NMM9Lsg6df+DTCO7wiDIs/qxHq1POUZPndiiEXqg0fVSW2+h1UjmunshLh+i0ZLB6kecboIEHDJn/w==
   dependencies:
     ethers "^5.7.2"
 
@@ -300,7 +300,6 @@
     ethereum-cryptography "^2.0.0"
     micro-ftch "^0.3.1"
 
-
 "@ethersproject/abi@^5.8.0", "@ethersproject/abi@5.8.0":
   version "5.8.0"
   resolved "https://registry.npmjs.org/@ethersproject/abi/-/abi-5.8.0.tgz"
@@ -1919,8 +1918,6 @@
   integrity sha512-lX7HFZeHf4QG/J7tBZqrCAXwz9J5RD56Y6MpP0eJkka8p+K0RY/yBTW7CYFJ4VGCclxqOLKmiGP5juQc6MKgcw==
   dependencies:
     undici-types "~6.21.0"
-  dependencies:
-    undici-types "~6.21.0"
 
 "@types/node@22.7.5":
   version "22.7.5"
@@ -2426,10 +2423,6 @@
     "@walletconnect/logger" "2.1.2"
     events "3.3.0"
 
-"@walletconnect/types@2.20.0":
-  version "2.20.0"
-  resolved "https://registry.npmjs.org/@walletconnect/types/-/types-2.20.0.tgz"
-  integrity sha512-oFGHRL/yQbZqBiTA8yvV+PGJYBU/laDAQWFiJZ9Xlv+qN5EzHipW39Ru6qyp8P4DGnbQI6bHPs9bizJ7hkDRKA==
 "@walletconnect/types@2.20.1":
   version "2.20.1"
   resolved "https://registry.npmjs.org/@walletconnect/types/-/types-2.20.1.tgz"
@@ -2442,49 +2435,10 @@
     "@walletconnect/logger" "2.1.2"
     events "3.3.0"
 
-"@walletconnect/types@2.20.1":
-  version "2.20.1"
-  resolved "https://registry.npmjs.org/@walletconnect/types/-/types-2.20.1.tgz"
-  integrity sha512-HM0YZxT+wNqskoZkuju5owbKTlqUXNKfGlJk/zh9pWaVWBR2QamvQ+47Cx09OoGPRQjQH0JmgRiUV4bOwWNeHg==
 "@walletconnect/universal-provider@2.19.2":
   version "2.19.2"
   resolved "https://registry.npmjs.org/@walletconnect/universal-provider/-/universal-provider-2.19.2.tgz"
   integrity sha512-LkKg+EjcSUpPUhhvRANgkjPL38wJPIWumAYD8OK/g4OFuJ4W3lS/XTCKthABQfFqmiNbNbVllmywiyE44KdpQg==
-  dependencies:
-    "@walletconnect/events" "1.0.1"
-    "@walletconnect/heartbeat" "1.2.2"
-    "@walletconnect/jsonrpc-types" "1.0.4"
-    "@walletconnect/keyvaluestorage" "1.1.1"
-    "@walletconnect/logger" "2.1.2"
-
-    "@walletconnect/sign-client" "2.19.2"
-    "@walletconnect/types" "2.19.2"
-    "@walletconnect/utils" "2.19.2"
-    es-toolkit "1.33.0"
-    events "3.3.0"
-
-"@walletconnect/universal-provider@2.20.0":
-  version "2.20.0"
-  resolved "https://registry.npmjs.org/@walletconnect/universal-provider/-/universal-provider-2.20.0.tgz"
-  integrity sha512-kzMWXao+RyWfv46nS/owJ99/QhObGkYHhpMxdzl4bae98JXdQ0xhmov3Rvy3GRt5csgJXldoM2VO44B/Fsuj4Q==
-  dependencies:
-    "@walletconnect/events" "1.0.1"
-    "@walletconnect/jsonrpc-http-connection" "1.0.8"
-    "@walletconnect/jsonrpc-provider" "1.0.14"
-    "@walletconnect/jsonrpc-types" "1.0.4"
-    "@walletconnect/jsonrpc-utils" "1.0.8"
-    "@walletconnect/keyvaluestorage" "1.1.1"
-    "@walletconnect/logger" "2.1.2"
-    "@walletconnect/sign-client" "2.20.0"
-    "@walletconnect/types" "2.20.0"
-    "@walletconnect/utils" "2.20.0"
-    es-toolkit "1.33.0"
-    events "3.3.0"
-
-"@walletconnect/universal-provider@2.20.1":
-  version "2.20.1"
-  resolved "https://registry.npmjs.org/@walletconnect/universal-provider/-/universal-provider-2.20.1.tgz"
-  integrity sha512-0WfO4Unb+8UMEUr65vrVjd/a/3tF5059KLP7gX2kaDFjXXOma1/cjq/9/STd3hbHB8LKfxpXvOty97vuD8xfWQ==
   dependencies:
     "@walletconnect/events" "1.0.1"
     "@walletconnect/jsonrpc-http-connection" "1.0.8"
@@ -2493,35 +2447,12 @@
     "@walletconnect/jsonrpc-utils" "1.0.8"
     "@walletconnect/keyvaluestorage" "1.1.1"
     "@walletconnect/logger" "2.1.2"
-    "@walletconnect/sign-client" "2.20.1"
-    "@walletconnect/types" "2.20.1"
-    "@walletconnect/utils" "2.20.1"
+    "@walletconnect/sign-client" "2.19.2"
+    "@walletconnect/types" "2.19.2"
+    "@walletconnect/utils" "2.19.2"
     es-toolkit "1.33.0"
     events "3.3.0"
 
-"@walletconnect/utils@2.19.2":
-  version "2.19.2"
-  resolved "https://registry.npmjs.org/@walletconnect/utils/-/utils-2.19.2.tgz"
-  integrity sha512-VU5CcUF4sZDg8a2/ov29OJzT3KfLuZqJUM0GemW30dlipI5fkpb0VPenZK7TcdLPXc1LN+Q+7eyTqHRoAu/BIA==
-  dependencies:
-    "@noble/ciphers" "1.2.1"
-    "@noble/curves" "1.8.1"
-    "@noble/hashes" "1.7.1"
-    "@walletconnect/jsonrpc-utils" "1.0.8"
-    "@walletconnect/keyvaluestorage" "1.1.1"
-    "@walletconnect/relay-api" "1.0.11"
-    "@walletconnect/relay-auth" "1.1.0"
-    "@walletconnect/safe-json" "1.0.2"
-    "@walletconnect/time" "1.0.2"
-    "@walletconnect/types" "2.19.2"
-    "@walletconnect/window-getters" "1.0.1"
-    "@walletconnect/window-metadata" "1.0.1"
-    bs58 "6.0.0"
-    detect-browser "5.3.0"
-    query-string "7.1.3"
-    uint8arrays "3.1.0"
-    viem "2.23.2"
-
 "@walletconnect/universal-provider@2.20.0":
   version "2.20.0"
   resolved "https://registry.npmjs.org/@walletconnect/universal-provider/-/universal-provider-2.20.0.tgz"
@@ -2979,6 +2910,11 @@ binary-extensions@^2.0.0:
   resolved "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz"
   integrity sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==
 
+bn.js@^4.11.9:
+  version "4.12.2"
+  resolved "https://registry.npmjs.org/bn.js/-/bn.js-4.12.2.tgz"
+  integrity sha512-n4DSx829VRTRByMRGdjQ9iqsN0Bh4OolPsFnaZBLcbi8iXcB+kJ9s7EnRt4wILZNV3kPLHkRVfOc/HvhC3ovDw==
+
 bn.js@^5.2.1:
   version "5.2.2"
   resolved "https://registry.npmjs.org/bn.js/-/bn.js-5.2.2.tgz"
@@ -4892,7 +4828,6 @@ gopd@^1.0.1, gopd@^1.2.0:
   resolved "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz"
   integrity sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==
 
-
 graceful-fs@^4.1.2, graceful-fs@^4.1.6:
   version "4.2.11"
   resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz"
@@ -5046,7 +4981,6 @@ hast-util-whitespace@^3.0.0:
   dependencies:
     "@types/hast" "^3.0.0"
 
-
 hmac-drbg@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz"
@@ -5131,7 +5065,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.3, inherits@2:
+inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.3, inherits@2:
   version "2.0.4"
   resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -6384,6 +6318,16 @@ mimic-function@^5.0.0:
   resolved "https://registry.npmjs.org/mimic-function/-/mimic-function-5.0.1.tgz"
   integrity sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==
 
+minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz"
+  integrity sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==
+
+minimalistic-crypto-utils@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz"
+  integrity sha512-JIYlbt6g8i5jKfJ3xz7rF0LXmv2TkDxBLUkiBeZ7bAx4GnnNMr8xFpGnOxn6GhTEHx3SjRrZEoU+j04prX1ktg==
+
 minimatch@^10.0.0:
   version "10.0.1"
   resolved "https://registry.npmjs.org/minimatch/-/minimatch-10.0.1.tgz"
@@ -8381,9 +8325,6 @@ synckit@^0.11.0:
   dependencies:
     "@pkgr/core" "^0.2.3"
     tslib "^2.8.1"
-  dependencies:
-    "@pkgr/core" "^0.2.3"
-    tslib "^2.8.1"
 
 table-layout@^1.0.2:
   version "1.0.2"
@@ -8676,10 +8617,6 @@ typedarray@^0.0.6:
   resolved "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz"
   integrity sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==
 
-typescript@^5.5.3, typescript@^5.7.2, typescript@>=3.3.1, typescript@>=4.2.0, typescript@>=5.0.4, typescript@>=5.4.0:
-  version "5.8.3"
-  resolved "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz"
-  integrity sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==
 typescript@^5.5.3, typescript@^5.7.2, typescript@>=3.3.1, typescript@>=3.7.0, typescript@>=4.2.0, typescript@>=4.3.0, typescript@>=5.0.4, typescript@>=5.4.0:
   version "5.8.3"
   resolved "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz"
@@ -8957,16 +8894,16 @@ use-sidecar@^1.1.2, use-sidecar@^1.1.3:
     detect-node-es "^1.1.0"
     tslib "^2.0.0"
 
-use-sync-external-store@>=1.2.0, use-sync-external-store@1.4.0:
-  version "1.4.0"
-  resolved "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.4.0.tgz"
-  integrity sha512-9WXSPC5fMv61vaupRkCKCxsPxBocVnwakBEkMIHHpkTTg6icbJtg6jzgtLDm4bl3cSHAca52rYWih0k4K3PfHw==
-
-use-sync-external-store@1.2.0:
+use-sync-external-store@>=1.2.0, use-sync-external-store@1.2.0:
   version "1.2.0"
   resolved "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz"
   integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
 
+use-sync-external-store@1.4.0:
+  version "1.4.0"
+  resolved "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.4.0.tgz"
+  integrity sha512-9WXSPC5fMv61vaupRkCKCxsPxBocVnwakBEkMIHHpkTTg6icbJtg6jzgtLDm4bl3cSHAca52rYWih0k4K3PfHw==
+
 utf-8-validate@^5.0.2, utf-8-validate@>=5.0.2:
   version "5.0.10"
   resolved "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.10.tgz"
@@ -9281,7 +9218,6 @@ wrappy@1:
   resolved "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz"
   integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
 
-ws@*, ws@^7.5.1:
 ws@*, ws@~8.17.1, ws@8.17.1:
   version "8.17.1"
   resolved "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz"
@@ -9292,12 +9228,6 @@ ws@^7.5.1:
   resolved "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz"
   integrity sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==
 
-ws@~8.17.1:
-  version "8.17.1"
-  resolved "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz"
-  integrity sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==
-
-
 ws@8.18.0:
   version "8.18.0"
   resolved "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz"