Modal started

app/globals.css

@@ -15,6 +15,7 @@ body {
 :root {
   
   --glassmorphism-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.1) 100%);
+  --glassmorphism-gradient-hover: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%);
   --glassmorphism-bg: rgba(255, 255, 255, 0.03);
   --glassmorphism-blur: 10px;
   --glassmorphism-border: rgba(255, 255, 255, 0.15);
@@ -26,7 +27,8 @@ body {
   border: 1px solid var(--glassmorphism-border);
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   position: relative;
-  overflow: hidden; /* Ensure noise texture covers the entire element */
+  overflow: hidden;
+  transition: background 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
 }
 .glassmorphism::before {
   content: "";
@@ -58,6 +60,12 @@ body {
   justify-content: center; /* Center vertically */
   align-items: center; /* Center horizontally */
   position: relative;
+  transition: background-image 0.3s ease, box-shadow 0.3s ease, border 0.3s ease, backdrop-filter 0.3s ease;
+
+}
+
+.leaderboard-card:hover{
+  background: var(--glassmorphism-gradient-hover), var(--glassmorphism-bg);
 }
 
 

app/modal.tsx

@@ -0,0 +1,33 @@
+// Modal.js
+
+import React from 'react';
+
+const Modal = ({ isOpen, onClose, item }) => {
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center overflow-x-hidden overflow-y-auto outline-none focus:outline-none">
+      <div className="relative w-auto max-w-3xl mx-auto my-6">
+        {/* Modal content */}
+        <div className="relative flex flex-col bg-white border-0 rounded-lg shadow-lg outline-none focus:outline-none">
+          {/* Header */}
+          <div className="flex items-start justify-between p-5 border-b border-solid rounded-t border-blueGray-200">
+            <h3 className="text-3xl font-semibold">{item.username}s Details</h3>
+            <button
+              className="p-1 ml-auto bg-transparent border-0 text-black float-right text-3xl leading-none font-semibold outline-none focus:outline-none"
+              onClick={onClose}
+            >
+              <span className="bg-transparent text-black h-6 w-6 text-2xl block outline-none focus:outline-none">×</span>
+            </button>
+          </div>
+          {/* Body */}
+          <div className="relative p-6 flex-auto">
+            <p className="my-4 text-blueGray-500 text-lg leading-relaxed">{item.username} has {item.points} points.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Modal;

app/page.tsx

@@ -5,6 +5,7 @@ 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";
+import Modal from './modal'; 
 
 // Helper functions to generate pseudo data
 const generateRandomName = () => {
@@ -22,6 +23,7 @@ const generateRandomPoint = () => {
 };
 
 function Home() {
+  const [modalOpen, setModalOpen] = useState(false);
   const { login, user, ready, logout, linkTwitter, unlinkTwitter, linkWallet, unlinkWallet } = usePrivy();
   const [darkMode, setDarkMode] = useState(true);
   const [twitterConnected, setTwitterConnected] = useState(false); // State to track Twitter connection
@@ -29,6 +31,19 @@ function Home() {
   const [incrementNumber, setIncrementNumber] = useState(1);
   const [leaderboardData, setLeaderboardData] = useState([]);
   const [isJoined, setIsJoined] = useState(false);
+  const [selectedItem, setSelectedItem] = useState(null); // State to store selected leaderboard item
+
+  // Function to handle opening modal and setting selected item
+  const openModal = (item) => {
+    setSelectedItem(item);
+    setModalOpen(true);
+  };
+
+  // Function to handle closing modal
+  const closeModal = () => {
+    setSelectedItem(null);
+    setModalOpen(false);
+  };
 
   useEffect(() => {
     if (darkMode) {
@@ -39,17 +54,31 @@ function Home() {
   }, [darkMode]);
 
   useEffect(() => {
-    const intervalId = setInterval(async () => {
+    const fetchData = async () => {
-      setIncrementNumber((prevNumber) => prevNumber + 1);
+      try {
-      const response = await fetch('https://api.callfi.io/get_leaderboard.php');
+        const response = await fetch('https://api.callfi.io/get_leaderboard.php');
-      if (!response.ok) {
+        if (!response.ok) {
-        throw new Error('Network response was not ok');
+          throw new Error('Network response was not ok');
+        }
+        const data = await response.json();
+        console.log('Leaderboard data:', data);
+        setLeaderboardData(data);
+      } catch (error) {
+        console.error('Failed to fetch leaderboard data:', error);
       }
-      const data = await response.json();
+    };
-      console.log('Leaderboard data:', data);
+
-      setLeaderboardData(data);
+    // Fetch data immediately on mount
+    fetchData();
+
+    // Set up the interval to fetch data every 5 seconds
+    const intervalId = setInterval(() => {
+      setIncrementNumber((prevNumber) => prevNumber + 1);
+      fetchData();
     }, 5000);
-    return () => clearInterval(intervalId); // Clean up the interval on component unmount
+
+    // Clean up the interval on component unmount
+    return () => clearInterval(intervalId);
   }, []);
 
   const toggleDarkMode = () => {
@@ -71,6 +100,17 @@ function Home() {
     } catch (error) {
       console.error('Error during API call:', error);
     }
+
+    try{
+      const response = await fetch('https://api.callfi.io/check_user_approved.php?tag=' + usertag);
+      const responseTxt = await response.text();
+      if(responseTxt == "1"){
+        setIsJoined(true);
+      }
+
+    }catch(error){
+
+    }
   };
 
   useEffect(() => {
@@ -123,18 +163,33 @@ function Home() {
       </header>
       {/* Note card */}
       {
-        ready && user?.twitter &&(
+        ready && user?.twitter && !isJoined &&(
           <div className="note-card-container w-full p-4 flex flex-col items-center justify-center">
             <div className="note-card glassmorphism mb-4 p-4 text-center rounded-lg px-20 py-5">
               <h2 className="text-2xl font-bold mb-2">Join the Leaderboard</h2>
               <p className="text-lg mb-4">Get on the leaderboard by posting a tweet!</p>
               <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded glassmorphism">
-                <a href="https://x.com/intent/post?text=I%27m+gonna+be+on+the+%23CallFi+leaderboards%21+Come+check+me+out+and+take+part+in+their+test%21+%0A%0Atest.callfi.io">Get Started</a>
+                <a href="https://x.com/intent/post?text=I%27m+gonna+be+on+the+%23CallFi+leaderboards%21+Come+check+me+out+and+take+part+in+their+test%21+%0A%0Atest.callfi.io" target="_blank" rel="noopener noreferrer">Get Started</a>
               </button>
             </div>
           </div>
         )
       }
+
+      {
+        ready && user?.twitter && isJoined &&(
+          <div className="note-card-container w-full p-4 flex flex-col items-center justify-center">
+            <div className="note-card glassmorphism mb-4 p-4 text-center rounded-lg px-20 py-5">
+              <h2 className="text-2xl font-bold mb-2">Feeling Lucky?</h2>
+              <p className="text-lg mb-4">Make a callout to a token you believe in!!</p>
+              <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded glassmorphism">
+                <a href="https://x.com/intent/tweet?text=%24COC%20is%20Booming%20rn%21%20See%20ya%20on%20the%20moon%21%0A%0A%23CallFi%20%23CallingIt" target="_blank" rel="noopener noreferrer">CALL OUT!</a>
+              </button>
+            </div>
+          </div>
+        )
+      }
+
       {
         ready && !user?.twitter && (
           <div className="note-card-container w-full p-4 flex flex-col items-center justify-center">
@@ -162,13 +217,17 @@ function Home() {
       <div className="w-full p-4 flex flex-col items-center justify-center">
         <div className="w-full max-w-4xl">
           {leaderboardData.map((item) => (
-            <div key={item["id"]} className={`leaderboard-card glassmorphism ${item["points"] >= 0 ? 'positive' : 'negative'} mx-auto mb-4`}>
+            <div key={item["id"]} className={`leaderboard-card glassmorphism ${item["points"] >= 0 ? 'positive' : 'negative'} mx-auto mb-4`} onClick={() => openModal(item)}>
               <p className="text-center font-bold">{item["username"]}</p>
               <p className="text-center">{parseFloat(item["points"]).toFixed(2)}x</p>
             </div>
           ))}
         </div>
       </div>
+      {/* Modal */}
+      <Modal isOpen={modalOpen} onClose={closeModal} item={selectedItem} />
+
+      {/* Rest of your Home component */}
 
       <footer className="w-full p-4 bg-gray-800 text-white text-center glassmorphism">
         <p>&copy; 2024 CallFi. All rights reserved.</p>