Timed leaderboards
This commit is contained in:
parent
ce3dfabfd0
commit
fda61a38ce
|
|
@ -8,14 +8,20 @@ interface Detail {
|
|||
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
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen && item) {
|
||||
const fetchDetails = async () => {
|
||||
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) {
|
||||
throw new Error('Network response was not ok');
|
||||
}
|
||||
|
|
|
|||
203
app/page.tsx
203
app/page.tsx
|
|
@ -5,12 +5,10 @@ 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';
|
||||
import CalloutModal from './callout';
|
||||
|
||||
import Modal from './modal';
|
||||
import CalloutModal from './callout';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
|
||||
// Helper functions to generate pseudo data
|
||||
const generateRandomName = () => {
|
||||
const names = ["Alice", "Bob", "Charlie", "David", "Eva", "Frank", "Grace", "Hannah", "Ivan", "Judy"];
|
||||
|
|
@ -30,13 +28,16 @@ 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
|
||||
const [walletConnected, setWalletConnected] = useState(false); // State to track Wallet connection
|
||||
const [twitterConnected, setTwitterConnected] = useState(false);
|
||||
const [walletConnected, setWalletConnected] = useState(false);
|
||||
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
|
||||
const [newCallModalOpen, setNewCallModalOpen] = useState(false);
|
||||
const [selectedItem, setSelectedItem] = useState(null);
|
||||
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
|
||||
const openModal = (item) => {
|
||||
|
|
@ -71,24 +72,35 @@ function Home() {
|
|||
}
|
||||
}, [darkMode]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const response = await fetch('https://api.callfi.io/get_leaderboard.php');
|
||||
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);
|
||||
let fetchData = async () => {
|
||||
try {
|
||||
let urlAddition = "";
|
||||
if(selectedPeriod == "Weekly"){
|
||||
urlAddition = "_weekly";
|
||||
} else if(selectedPeriod == "Monthly"){
|
||||
urlAddition = "_monthly";
|
||||
}
|
||||
};
|
||||
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();
|
||||
|
||||
}, [selectedPeriod])
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
// Set up the interval to fetch data every 5 seconds
|
||||
const intervalId = setInterval(() => {
|
||||
setIncrementNumber((prevNumber) => prevNumber + 1);
|
||||
|
|
@ -97,7 +109,7 @@ function Home() {
|
|||
|
||||
// Clean up the interval on component unmount
|
||||
return () => clearInterval(intervalId);
|
||||
}, []);
|
||||
}, [selectedPeriod]);
|
||||
|
||||
const toggleDarkMode = () => {
|
||||
setDarkMode(!darkMode);
|
||||
|
|
@ -114,20 +126,19 @@ 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
|
||||
setTwitterConnected(true);
|
||||
} catch (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 responseTxt = await response.text();
|
||||
if(responseTxt == "1"){
|
||||
if (responseTxt == "1") {
|
||||
setIsJoined(true);
|
||||
}
|
||||
|
||||
}catch(error){
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error checking user approval:', error);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -137,21 +148,19 @@ function Home() {
|
|||
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
|
||||
const walletStatus = user.wallet;
|
||||
if (walletStatus) {
|
||||
setWalletConnected(true);
|
||||
}
|
||||
}
|
||||
}, [ready, user]);
|
||||
|
||||
|
||||
return (
|
||||
// ${darkMode ? "bg-black text-white" : "bg-white text-black"}
|
||||
<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">
|
||||
<h1 className="text-xl font-bold">CallFi</h1>
|
||||
<div className="flex items-center">
|
||||
|
||||
{ready && user ? (
|
||||
<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}>
|
||||
|
|
@ -179,89 +188,89 @@ function Home() {
|
|||
)}
|
||||
</div>
|
||||
</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 &&(
|
||||
<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" onClick={openNewCallModal}>
|
||||
CALL OUT!
|
||||
</button>
|
||||
</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">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 && (
|
||||
<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}>
|
||||
{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" onClick={openNewCallModal}>
|
||||
CALL OUT!
|
||||
</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>
|
||||
</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>
|
||||
</button>
|
||||
)}
|
||||
|
||||
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
{/* Leaderboard */}
|
||||
<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">
|
||||
{leaderboardData.map((item) => (
|
||||
<motion.div key="id" whileHover={{ scale: 1.1, transition: { duration: 0.2 } }}>
|
||||
<div
|
||||
key={item["id"]}
|
||||
className={`leaderboard-card glassmorphism ${item["points"] >= 0 ? 'positive' : 'negative'} mx-auto mb-4`}
|
||||
onClick={() => openModal(item)}
|
||||
>
|
||||
<div className="flex items-center space-x-4">
|
||||
<img
|
||||
src={item["img_url"]}
|
||||
alt={`${item["username"]}'s profile`}
|
||||
className="w-12 h-12 rounded-full mr-4"
|
||||
/>
|
||||
<div>
|
||||
<p className="text-center font-bold">{item["username"]}</p>
|
||||
<p className="text-center">{parseFloat(item["points"]).toFixed(2)}x</p>
|
||||
<div
|
||||
key={item["id"]}
|
||||
className={`leaderboard-card glassmorphism ${item["points"] >= 0 ? 'positive' : 'negative'} mx-auto mb-4`}
|
||||
onClick={() => openModal(item)}
|
||||
>
|
||||
<div className="flex items-center space-x-4">
|
||||
<img
|
||||
src={item["img_url"]}
|
||||
alt={`${item["username"]}'s profile`}
|
||||
className="w-12 h-12 rounded-full mr-4"
|
||||
/>
|
||||
<div>
|
||||
<p className="text-center font-bold">{item["username"]}</p>
|
||||
<p className="text-center">{parseFloat(item["points"]).toFixed(2)}x</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.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">
|
||||
<p>© 2024 CallFi. All rights reserved.</p>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user