DeCleanup-Network · JamesVictor-O · Jun 29, 2025 · May 5, 2025 · Jun 29, 2025 · Jun 29, 2025
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     ]
   },
   "dependencies": {
+    "@decleanup/contracts": "^1.0.3",
     "@radix-ui/react-collapsible": "^1.1.2",
     "@radix-ui/react-dialog": "^1.1.3",
     "@radix-ui/react-dropdown-menu": "^2.1.3",
@@ -29,6 +30,7 @@
     "@tanstack/react-query": "^5.72.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "ethers": "^6.14.1",
     "framer-motion": "^12.4.7",
     "gray-matter": "^4.0.3",
     "install": "^0.13.0",
@@ -44,6 +46,7 @@
     "tailwind-merge": "^2.5.5",
     "tailwindcss-animate": "^1.0.7",
     "thirdweb": "^5.0.3",
+    "typechain": "^8.3.2",
     "viem": "^2.26.2",
     "wagmi": "^2.14.16"
   },

diff --git a/src/app/client.ts b/src/app/client.ts
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -20,7 +20,7 @@ export default function RootLayout({
     <html lang='en' className='h-full'>
       <body className='h-full'>
         <div className='flex h-screen flex-col border-black md:border-8'>
-          <ThirdwebProvider>
+            <Providers>
             <ContextProvider>
                 <Header />
                 <main className='md:overflow-y-none flex-1 bg-[#58B12F] overflow-x-hidden md:overflow-hidden  '>
@@ -29,7 +29,7 @@ export default function RootLayout({
                 </main>
                 <Footer />
             </ContextProvider>
-          </ThirdwebProvider>
+            </Providers>
         </div>
       </body>
     </html>

diff --git a/src/app/leaderboard/components/Table.tsx b/src/app/leaderboard/components/Table.tsx
@@ -22,7 +22,7 @@ export default function Table() {
   })
   const [loading, setLoading] = useState<boolean>(true)
   const [currentPage, setCurrentPage] = useState<number>(1)
-  const itemsPerPage = 8
+  const itemsPerPage = 10
 
   useEffect(() => {
     setTimeout(() => {

diff --git a/src/app/provider.tsx b/src/app/provider.tsx
@@ -3,13 +3,13 @@ import { WagmiProvider } from 'wagmi'
 import '@rainbow-me/rainbowkit/styles.css'
 import { getDefaultConfig, RainbowKitProvider } from '@rainbow-me/rainbowkit'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { mainnet, sepolia } from 'wagmi/chains'
+import { sepolia, arbitrumSepolia } from 'wagmi/chains'
 
 const queryClient = new QueryClient()
 const config = getDefaultConfig({
   appName: 'My RainbowKit App',
   projectId: 'YOUR_PROJECT_ID',
-  chains: [mainnet, sepolia],
+  chains: [sepolia, arbitrumSepolia],
 })
 
 export function Providers({ children }: { children: React.ReactNode }) {

diff --git a/src/components/ContractInfo.tsx b/src/components/ContractInfo.tsx
@@ -0,0 +1,15 @@
+import { DCUContracts } from '../lib/decleanup-contracts'
+
+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/Footer.tsx b/src/components/Footer.tsx
@@ -1,37 +1,28 @@
 import React from 'react'
 import Image from 'next/image'
+
 import StellarIcon from '@/public/stellar.png'
 
 const Footer: React.FC = () => {
   return (
-    <div className='border-t border-black bg-[#58B12F] px-5 py-5 font-bebas text-2xl'>
-
-      {/* Desktop layout */}
-      <div className='hidden items-center justify-between sm:flex'>
-        <p>2025©</p>
-        <div className='flex space-x-3'>
-          <a href='' className='block'>TELEGRAM</a>
-          <a href='' className='block'>GITHUB</a>
-          <a href='' className='block'>LITEPAPER</a>
-          <a href='' className='block'>BUG REPORT</a>
-        </div>
-        <div>
-          <Image src={StellarIcon} alt='Logo' />
-        </div>
+    <div className='flex flex-row items-start justify-between gap-2 md:gap-5 border-t border-black bg-[#58B12F] px-5 py-3 font-sans text-2xl xs:text-sm sm:text-lg sm:font-semibold md:flex-row'>
+      <p>2025©</p>
+      <div className='flex flex-wrap justify-center gap-3 font-normal'>
+        <a href='#!' className=''>
+          TELEGRAM
+        </a>
+        <a href='#!' className=''>
+          GITHUB
+        </a>
+        <a href='#!' className=''>
+          LITEPAPER
+        </a>
+        <a href='#!' className='whitespace-nowrap'>
+          BUG REPORT
+        </a>
       </div>
-
-      {/* Mobile layout */}
-      <div className='flex flex-col sm:hidden'>
-        <div className='flex flex-col space-y-2'>
-          <a href='' className='block'>TELEGRAM</a>
-          <a href='' className='block'>GITHUB</a>
-          <a href='' className='block'>LITEPAPER</a>
-          <div className='flex items-center justify-between'>
-            <a href='' className='block'>BUG REPORT</a>
-            <Image src={StellarIcon} alt='Logo' />
-          </div>
-        </div>
-        <p className='mt-4 text-center'>2025©</p>
+      <div>
+        <Image src={StellarIcon} alt='' className='w-28 md:w-auto' />
       </div>
     </div>
   )

diff --git a/src/components/Login.tsx b/src/components/Login.tsx
@@ -1,14 +1,17 @@
 'use client'
 import { useState } from 'react'
-import { ConnectButton } from 'thirdweb/react'
-import { client } from '@/app/client'
-import { useActiveAccount } from 'thirdweb/react';
+import { ConnectButton } from '@rainbow-me/rainbowkit'
+import { ContractInfo } from './ContractInfo';
+import { useAccount } from 'wagmi';
 import Link from 'next/link'
 
 const Login: React.FC = () => {
   const [isConnecting, setIsConnecting] = useState(false)
-  const account = useActiveAccount();
-
+  const { isConnected, } = useAccount();
+  const truncateAddress = (addr?: string) => {
+    if (!addr) return "";
+    return `${addr.slice(0, 6)}...${addr.slice(-4)}`;
+  };
 
   const lines = ['FIRST DAPP TO SELF-TOKENIZE ENVIRONMENTAL', 'CLEANUP EFFORTS']
   const linesMd = [
@@ -19,7 +22,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 */}
@@ -75,23 +78,45 @@ const Login: React.FC = () => {
         <hr className='my-6 w-full border-t-2 border-black' />
 
 
-        <div className='w-full px-4 py-4'>
-        {account?.address ? (
+        <div className='w-full px-4 h-36 py-4'>
+        {isConnected ? (
           <Link href="/dashboard" passHref>
             <div className='flex h-24 w-full items-center font-bebas text-4xl justify-center rounded bg-black py-3 font-bold text-[#FAFF00] transition-all hover:bg-gray-800 cursor-pointer'>
               GO TO DASHBOARD
             </div>
           </Link>
         ) : (
-          <div className='flex h-24 w-full items-center justify-center rounded bg-black py-3 font-bold text-[#FAFF00] transition-all hover:bg-gray-800'>
-            <ConnectButton
-              client={client}
-              appMetadata={{
-                name: 'Example App',
-                url: 'https://example.com',
-              }}
-            />
-          </div>
+          <div className="bg-black h-full items-center text-white px-8 py-3 flex justify-center rounded-lg hover:bg-emerald-600 transition-all shadow-lg">
+          <ConnectButton.Custom>
+            {({ account, openAccountModal, openConnectModal, mounted }) => {
+              const connected = mounted && account;
+
+              return (
+                <div>
+                  {connected ? (
+                    <button
+                      onClick={openAccountModal}
+                      className="flex items-center"
+                    >
+                      <span className="text-white font-medium">
+                        {truncateAddress(account.address)}
+                      </span>
+                    </button>
+                  ) : (
+                    <button
+                      onClick={openConnectModal}
+                      className="flex items-center"
+                    >
+                      <span className="text-white font-medium">
+                        Connect Wallet
+                      </span>
+                    </button>
+                  )}
+                </div>
+              );
+            }}
+          </ConnectButton.Custom>
+        </div>
         )}
       </div>
       </div>

diff --git a/src/hooks/useDeCleanupContracts.ts b/src/hooks/useDeCleanupContracts.ts
@@ -0,0 +1,65 @@
+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])
+}