before leaderboard fetch

app/page.tsx

@@ -3,6 +3,8 @@
 import React, { useState, useEffect } from "react";
 import { SunIcon, MoonIcon } from "@heroicons/react/solid";
 import { PrivyProvider, usePrivy } from "@privy-io/react-auth";
+import { FaTwitter, FaWallet } from "react-icons/fa";
+import { CheckIcon } from "@heroicons/react/outline"; // For the check mark icon
 
 // Helper functions to generate pseudo data
 const generateRandomName = () => {
@@ -35,9 +37,11 @@ const generateTableData = (rows) => {
 const tableData = generateTableData(10);
 
 function Home() {
-  const { login, user, ready, logout } = usePrivy();
+  const { login, user, ready, logout, linkTwitter, unlinkTwitter } = usePrivy();
   const [darkMode, setDarkMode] = useState(true);
-
+  const [twitterConnected, setTwitterConnected] = useState(false); // State to track Twitter connection
+  const [walletConnected, setWalletConnected] = useState(false); // State to track Wallet connection
+  const [incrementNumber, setIncrementNumber] = useState(1);
   useEffect(() => {
     if (darkMode) {
       document.documentElement.classList.add("dark");
@@ -46,6 +50,13 @@ function Home() {
     }
   }, [darkMode]);
 
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      setIncrementNumber((prevNumber) => prevNumber + 1);
+    }, 5000);
+    return () => clearInterval(intervalId); // Clean up the interval on component unmount
+  }, []);
+
   const toggleDarkMode = () => {
     setDarkMode(!darkMode);
     document.documentElement.classList.toggle("dark", !darkMode);
@@ -61,6 +72,7 @@ function Home() {
 
       const data = await response.json();
       console.log('API call successful:', data);
+      setTwitterConnected(true); // Set Twitter connection state to true on successful API call
     } catch (error) {
       console.error('Error during API call:', error);
     }
@@ -68,11 +80,15 @@ function Home() {
 
   useEffect(() => {
     if (ready && user) {
-      // Assuming user object contains twitter handle at user.profile.twitter
       const username = user.twitter?.username ? `@${user.twitter.username}` : '@unknownUser';
-      if(username != "@unknownUser"){
+      if (username !== "@unknownUser") {
         postLoginAPI(username);
       }
+      // Assume we have a way to check if the wallet is connected
+      const walletStatus = user.wallet; // This is an assumption; replace it with actual wallet connection check
+      if (walletStatus) {
+        setWalletConnected(true);
+      }
     }
   }, [ready, user]);
 
@@ -84,6 +100,19 @@ function Home() {
           <button onClick={toggleDarkMode} className="bg-gray-700 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded mr-2">
             {darkMode ? <SunIcon className="h-5 w-5 text-white" /> : <MoonIcon className="h-5 w-5 text-white" />}
           </button>
+          <div className="flex items-center bg-white bg-opacity-20 rounded-full px-4 py-2">
+            <button className={`relative ${twitterConnected ? "bg-black" : "bg-gray-700"} hover:bg-gray-500 text-white font-bold py-2 px-4 rounded-full mr-2`} onClick={linkTwitter }>
+              <FaTwitter className="h-5 w-5 text-white" />
+              {twitterConnected && (
+                <CheckIcon className="absolute top-0 right-0 h-4 w-4 text-green-500" />
+              )}
+            </button>
+            <button className={`relative ${walletConnected ? "bg-black" : "bg-gray-700"} hover:bg-gray-500 text-white font-bold py-2 px-4 rounded-full mr-2`}>
+              <FaWallet className="h-5 w-5 text-white" />
+              {walletConnected && (
+                <CheckIcon className="absolute top-0 right-0 h-4 w-4 text-green-500" />
+              )}
+            </button>
             {!ready ? (
               <p>Loading...</p>
             ) : user ? (
@@ -96,6 +125,7 @@ function Home() {
               </button>
             )}
           </div>
+        </div>
       </header>
       <div className="flex-grow flex flex-col items-center justify-center w-full p-4">
         <h2 className="text-2xl font-bold mb-4">Leaderboard</h2>

package-lock.json

@@ -16,6 +16,7 @@
         "next": "14.2.4",
         "react": "^18",
         "react-dom": "^18",
+        "react-icons": "^5.2.1",
         "tailwind-merge": "^2.3.0",
         "tailwindcss-animate": "^1.0.7"
       },
@@ -7421,6 +7422,14 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz",
+      "integrity": "sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

package.json

@@ -17,6 +17,7 @@
     "next": "14.2.4",
     "react": "^18",
     "react-dom": "^18",
+    "react-icons": "^5.2.1",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7"
   },