warlock/callfi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Timed leaderboards

Browse Source
This commit is contained in:
sewmina7@gmail.com 2024-06-25 17:51:32 +05:30
parent ce3dfabfd0
commit fda61a38ce
2 changed files with 114 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/modal.tsx
View File

@ -8,14 +8,20 @@ interface Detail {
price_now: number; price_now: number;
} }
const Modal: React.FC<{ isOpen: boolean; onClose: () => void; item: { username: string; points: number } }> = ({ isOpen, onClose, item }) => { const Modal: React.FC<{ isOpen: boolean; onClose: () => void; item: { username: string; points: number }; period:string; }> = ({ isOpen, onClose, item, period }) => {
const [details, setDetails] = useState<Detail[] | null>(null); // Specify null as the initial type const [details, setDetails] = useState<Detail[] | null>(null); // Specify null as the initial type
useEffect(() => { useEffect(() => {
if (isOpen && item) { if (isOpen && item) {
const fetchDetails = async () => { const fetchDetails = async () => {
try { try {
const response = await fetch(`https://api.callfi.io/get_user_callouts.php?tag=${item.username}`); let urlAddition = "";
if(period == "Weekly"){
urlAddition = "_weekly";
}else if(period == "Monthly"){
urlAddition = "_monthly";
}
const response = await fetch(`https://api.callfi.io/get_user_callouts${urlAddition}.php?tag=${item.username}`);
if (!response.ok) { if (!response.ok) {
throw new Error('Network response was not ok'); throw new Error('Network response was not ok');
} }

197
app/page.tsx
View File

@ -7,10 +7,8 @@ import { FaTwitter, FaWallet } from "react-icons/fa";
import { CheckIcon } from "@heroicons/react/outline"; import { CheckIcon } from "@heroicons/react/outline";
import Modal from './modal'; import Modal from './modal';
import CalloutModal from './callout'; import CalloutModal from './callout';
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
// Helper functions to generate pseudo data // Helper functions to generate pseudo data
const generateRandomName = () => { const generateRandomName = () => {
const names = ["Alice", "Bob", "Charlie", "David", "Eva", "Frank", "Grace", "Hannah", "Ivan", "Judy"]; const names = ["Alice", "Bob", "Charlie", "David", "Eva", "Frank", "Grace", "Hannah", "Ivan", "Judy"];
@ -30,13 +28,16 @@ function Home() {
const [modalOpen, setModalOpen] = useState(false); const [modalOpen, setModalOpen] = useState(false);
const { login, user, ready, logout, linkTwitter, unlinkTwitter, linkWallet, unlinkWallet } = usePrivy(); const { login, user, ready, logout, linkTwitter, unlinkTwitter, linkWallet, unlinkWallet } = usePrivy();
const [darkMode, setDarkMode] = useState(true); const [darkMode, setDarkMode] = useState(true);
const [twitterConnected, setTwitterConnected] = useState(false); // State to track Twitter connection const [twitterConnected, setTwitterConnected] = useState(false);
const [walletConnected, setWalletConnected] = useState(false); // State to track Wallet connection const [walletConnected, setWalletConnected] = useState(false);
const [incrementNumber, setIncrementNumber] = useState(1); const [incrementNumber, setIncrementNumber] = useState(1);
const [leaderboardData, setLeaderboardData] = useState([]); const [leaderboardData, setLeaderboardData] = useState([]);
const [isJoined, setIsJoined] = useState(false); const [isJoined, setIsJoined] = useState(false);
const [selectedItem, setSelectedItem] = useState(null); // State to store selected leaderboard item const [selectedItem, setSelectedItem] = useState(null);
const [newCallModalOpen, setNewCallModalOpen] = useState(false); const [newCallModalOpen, setNewCallModalOpen] = useState(false);
const [selectedPeriod, setSelectedPeriod] = useState('All Time');
const periods = ['All Time', 'Weekly', 'Monthly'];
// Function to handle opening modal and setting selected item // Function to handle opening modal and setting selected item
const openModal = (item) => { const openModal = (item) => {
@ -71,24 +72,35 @@ function Home() {
} }
}, [darkMode]); }, [darkMode]);
useEffect(() => { let fetchData = async () => {
const fetchData = async () => { try {
try { let urlAddition = "";
const response = await fetch('https://api.callfi.io/get_leaderboard.php'); if(selectedPeriod == "Weekly"){
if (!response.ok) { urlAddition = "_weekly";
throw new Error('Network response was not ok'); } else if(selectedPeriod == "Monthly"){
} urlAddition = "_monthly";
const data = await response.json();
console.log('Leaderboard data:', data);
setLeaderboardData(data);
} catch (error) {
console.error('Failed to fetch leaderboard data:', error);
} }
}; const response = await fetch(`https://api.callfi.io/get_leaderboard${urlAddition}.php`);
console.log(urlAddition);
if (!response.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);
}
};
// Fetch data immediately on mount useEffect(()=>{
setLeaderboardData([]);
fetchData(); fetchData();
}, [selectedPeriod])
useEffect(() => {
fetchData();
// Set up the interval to fetch data every 5 seconds // Set up the interval to fetch data every 5 seconds
const intervalId = setInterval(() => { const intervalId = setInterval(() => {
setIncrementNumber((prevNumber) => prevNumber + 1); setIncrementNumber((prevNumber) => prevNumber + 1);
@ -97,7 +109,7 @@ function Home() {
// Clean up the interval on component unmount // Clean up the interval on component unmount
return () => clearInterval(intervalId); return () => clearInterval(intervalId);
}, []); }, [selectedPeriod]);
const toggleDarkMode = () => { const toggleDarkMode = () => {
setDarkMode(!darkMode); setDarkMode(!darkMode);
@ -114,20 +126,19 @@ function Home() {
const data = await response.json(); const data = await response.json();
console.log('API call successful:', data); console.log('API call successful:', data);
setTwitterConnected(true); // Set Twitter connection state to true on successful API call setTwitterConnected(true);
} catch (error) { } catch (error) {
console.error('Error during API call:', error); console.error('Error during API call:', error);
} }
try{ try {
const response = await fetch('https://api.callfi.io/check_user_approved.php?tag=' + usertag); const response = await fetch('https://api.callfi.io/check_user_approved.php?tag=' + usertag);
const responseTxt = await response.text(); const responseTxt = await response.text();
if(responseTxt == "1"){ if (responseTxt == "1") {
setIsJoined(true); setIsJoined(true);
} }
} catch (error) {
}catch(error){ console.error('Error checking user approval:', error);
} }
}; };
@ -137,21 +148,19 @@ function Home() {
if (username !== "@unknownUser") { if (username !== "@unknownUser") {
postLoginAPI(username); postLoginAPI(username);
} }
// Assume we have a way to check if the wallet is connected const walletStatus = user.wallet;
const walletStatus = user.wallet; // This is an assumption; replace it with actual wallet connection check
if (walletStatus) { if (walletStatus) {
setWalletConnected(true); setWalletConnected(true);
} }
} }
}, [ready, user]); }, [ready, user]);
return ( return (
// ${darkMode ? "bg-black text-white" : "bg-white text-black"}
<main className={`flex flex-col min-h-screen items-center justify-between text-white`}> <main className={`flex flex-col min-h-screen items-center justify-between text-white`}>
<header className="w-full flex justify-between items-center p-4 bg-gray-800 text-white glassmorphism"> <header className="w-full flex justify-between items-center p-4 bg-gray-800 text-white glassmorphism">
<h1 className="text-xl font-bold">CallFi</h1> <h1 className="text-xl font-bold">CallFi</h1>
<div className="flex items-center"> <div className="flex items-center">
{ready && user ? ( {ready && user ? (
<div className="flex items-center bg-white bg-opacity-20 rounded-full px-4 py-2 glassmorphism"> <div className="flex items-center bg-white bg-opacity-20 rounded-full px-4 py-2 glassmorphism">
<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 glassmorphism`} onClick={linkTwitter}> <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 glassmorphism`} onClick={linkTwitter}>
@ -179,89 +188,89 @@ function Home() {
)} )}
</div> </div>
</header> </header>
{/* Note card */}
{
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" target="_blank" rel="noopener noreferrer">Get Started</a>
</button>
</div>
</div>
)
}
{ {ready && user?.twitter && !isJoined && (
ready && user?.twitter && isJoined &&( <div className="note-card-container w-full p-4 flex flex-col items-center justify-center">
<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">
<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>
<h2 className="text-2xl font-bold mb-2">Feeling Lucky?</h2> <p className="text-lg mb-4">Get on the leaderboard by posting a tweet!</p>
<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">
<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded glassmorphism" onClick={openNewCallModal}> <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>
CALL OUT! </button>
</button>
</div>
</div> </div>
) </div>
} )}
{ {ready && user?.twitter && isJoined && (
ready && !user?.twitter && ( <div className="note-card-container w-full p-4 flex flex-col items-center justify-center">
<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">
<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>
<h2 className="text-2xl font-bold mb-2">Join the Leaderboard</h2> <p className="text-lg mb-4">Make a callout to a token you believe in!!</p>
<p className="text-lg mb-4">Start by linking your Twitter account!</p> <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded glassmorphism" onClick={openNewCallModal}>
{user ? ( CALL OUT!
<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded glassmorphism" onClick={linkTwitter}> </button>
</div>
</div>
)}
{ready && !user?.twitter && (
<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">Start by linking your Twitter account!</p>
{user ? (
<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded glassmorphism" onClick={linkTwitter}>
<a>Link X</a> <a>Link X</a>
</button> </button>
) : ( ) : (
<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded glassmorphism" onClick={login}> <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded glassmorphism" onClick={login}>
<a>Login</a> <a>Login</a>
</button> </button>
)} )}
</div>
</div> </div>
) </div>
} )}
{/* Leaderboard */}
<div className="w-full p-4 flex flex-col items-center justify-center"> <div className="w-full p-4 flex flex-col items-center justify-center">
<div className="tabs flex space-x-4 mb-4">
{periods.map((period) => (
<button
key={period}
className={`glassmorphism px-4 py-2 rounded ${selectedPeriod === period ? 'bg-black text-white' : 'bg-gray-700 text-gray-400'}`}
onClick={() => setSelectedPeriod(period)}
>
{period}
</button>
))}
</div>
<div className="w-full max-w-4xl"> <div className="w-full max-w-4xl">
{leaderboardData.map((item) => ( {leaderboardData.map((item) => (
<motion.div key="id" whileHover={{ scale: 1.1, transition: { duration: 0.2 } }}> <motion.div key="id" whileHover={{ scale: 1.1, transition: { duration: 0.2 } }}>
<div <div
key={item["id"]} key={item["id"]}
className={`leaderboard-card glassmorphism ${item["points"] >= 0 ? 'positive' : 'negative'} mx-auto mb-4`} className={`leaderboard-card glassmorphism ${item["points"] >= 0 ? 'positive' : 'negative'} mx-auto mb-4`}
onClick={() => openModal(item)} onClick={() => openModal(item)}
> >
<div className="flex items-center space-x-4"> <div className="flex items-center space-x-4">
<img <img
src={item["img_url"]} src={item["img_url"]}
alt={`${item["username"]}'s profile`} alt={`${item["username"]}'s profile`}
className="w-12 h-12 rounded-full mr-4" className="w-12 h-12 rounded-full mr-4"
/> />
<div> <div>
<p className="text-center font-bold">{item["username"]}</p> <p className="text-center font-bold">{item["username"]}</p>
<p className="text-center">{parseFloat(item["points"]).toFixed(2)}x</p> <p className="text-center">{parseFloat(item["points"]).toFixed(2)}x</p>
</div>
</div> </div>
</div> </div>
</div> </motion.div>
</motion.div>
))} ))}
</div> </div>
</div> </div>
{/* Modal */}
<Modal isOpen={modalOpen} onClose={closeModal} item={selectedItem ?? {username:"", points:2}} />
<CalloutModal isOpen={newCallModalOpen} onClose={closeNewCallModal} onSubmit={handleNewCallSubmit} />
{/* Rest of your Home component */} <Modal isOpen={modalOpen} onClose={closeModal} item={selectedItem ?? { username: "", points: 2 }} period={selectedPeriod} />
<CalloutModal isOpen={newCallModalOpen} onClose={closeNewCallModal} onSubmit={handleNewCallSubmit} />
<footer className="w-full p-4 bg-gray-800 text-white text-center glassmorphism"> <footer className="w-full p-4 bg-gray-800 text-white text-center glassmorphism">
<p>&copy; 2024 CallFi. All rights reserved.</p> <p>&copy; 2024 CallFi. All rights reserved.</p>