282 lines
10 KiB
TypeScript
282 lines
10 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect } from "react";
|
|
import Link from 'next/link';
|
|
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 { motion } from 'framer-motion';
|
|
import UserDetailModal from "@/components/UserDetailsModal";
|
|
|
|
import Header from "@/components/Header";
|
|
import Footer from "@/components/Footer";
|
|
|
|
// Helper functions to generate pseudo data
|
|
const generateRandomName = () => {
|
|
const names = ["Alice", "Bob", "Charlie", "David", "Eva", "Frank", "Grace", "Hannah", "Ivan", "Judy"];
|
|
return names[Math.floor(Math.random() * names.length)];
|
|
};
|
|
|
|
const generateRandomCoin = () => {
|
|
const coins = ["Bitcoin", "Ethereum", "Litecoin", "Ripple", "Cardano", "Polkadot", "Solana", "Chainlink"];
|
|
return coins[Math.floor(Math.random() * coins.length)];
|
|
};
|
|
|
|
const generateRandomPoint = () => {
|
|
return Math.floor(Math.random() * (100 - 10 + 1)) + 10;
|
|
};
|
|
|
|
const Home: React.FC = () => {
|
|
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);
|
|
const [walletConnected, setWalletConnected] = useState(false);
|
|
const [incrementNumber, setIncrementNumber] = useState(1);
|
|
const [leaderboardData, setLeaderboardData] = useState([]);
|
|
const [isJoined, setIsJoined] = useState(false);
|
|
const [selectedItem, setSelectedItem] = useState(null);
|
|
const [newCallModalOpen, setNewCallModalOpen] = useState(false);
|
|
const [userDetailModalOpen, setUserDetailModalOpen] = 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) => {
|
|
setSelectedItem(item);
|
|
setModalOpen(true);
|
|
};
|
|
|
|
// Function to handle closing modal
|
|
const closeModal = () => {
|
|
setSelectedItem(null);
|
|
setModalOpen(false);
|
|
};
|
|
|
|
const openNewCallModal = () => {
|
|
setNewCallModalOpen(true);
|
|
};
|
|
|
|
const closeNewCallModal = () => {
|
|
setNewCallModalOpen(false);
|
|
};
|
|
|
|
// Function to handle opening user detail modal
|
|
const openUserDetailModal = (username) => {
|
|
setUserDetailModalOpen(true);
|
|
setTimeout(() => {
|
|
setModalOpen(false);
|
|
// Additional logic if needed to fetch user details
|
|
}, 10);
|
|
};
|
|
|
|
// Function to handle closing user detail modal
|
|
const closeUserDetailModal = () => {
|
|
setUserDetailModalOpen(false);
|
|
};
|
|
|
|
const handleNewCallSubmit = (tokenId, tokenContract, tokenName) => {
|
|
let twitterIntentURL = `https://x.com/intent/tweet?text=%24${tokenId}%20is%20Booming%20rn%21%20See%20ya%20on%20the%20moon%21%0A%0A%23CallFi%20%23CallingIt`;
|
|
if(tokenContract.length >0){
|
|
twitterIntentURL = `https://x.com/intent/tweet?text=%24${tokenId}%20%23${tokenName}%20is%20Going%20to%20the%20moon%21%0ACA%20%3A${tokenContract}%0A%0A%23CallFi%20%23CallingIt`;
|
|
}
|
|
window.open(twitterIntentURL, '_blank');
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (darkMode) {
|
|
document.documentElement.classList.add("dark");
|
|
} else {
|
|
document.documentElement.classList.remove("dark");
|
|
}
|
|
}, [darkMode]);
|
|
|
|
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);
|
|
}
|
|
};
|
|
|
|
useEffect(()=>{
|
|
setLeaderboardData([]);
|
|
fetchData();
|
|
|
|
}, [selectedPeriod])
|
|
|
|
useEffect(() => {
|
|
fetchData();
|
|
// Set up the interval to fetch data every 5 seconds
|
|
const intervalId = setInterval(() => {
|
|
setIncrementNumber((prevNumber) => prevNumber + 1);
|
|
fetchData();
|
|
}, 5000);
|
|
|
|
// Clean up the interval on component unmount
|
|
return () => clearInterval(intervalId);
|
|
}, [selectedPeriod]);
|
|
|
|
const toggleDarkMode = () => {
|
|
setDarkMode(!darkMode);
|
|
document.documentElement.classList.toggle("dark", !darkMode);
|
|
};
|
|
|
|
const postLoginAPI = async (usertag) => {
|
|
try {
|
|
const response = await fetch('https://api.callfi.io/register_twitter_user.php?tag=' + usertag);
|
|
|
|
if (!response.ok) {
|
|
throw new Error('Network response was not ok');
|
|
}
|
|
|
|
const data = await response.json();
|
|
console.log('API call successful:', data);
|
|
setTwitterConnected(true);
|
|
} 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) {
|
|
console.error('Error checking user approval:', error);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (ready && user) {
|
|
const username = user.twitter?.username ? `@${user.twitter.username}` : '@unknownUser';
|
|
if (username !== "@unknownUser") {
|
|
postLoginAPI(username);
|
|
}
|
|
const walletStatus = user.wallet;
|
|
if (walletStatus) {
|
|
setWalletConnected(true);
|
|
}
|
|
}
|
|
}, [ready, user]);
|
|
|
|
|
|
return (
|
|
<main className={`flex flex-col min-h-screen items-center justify-between text-white`}>
|
|
<Header/>
|
|
|
|
{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>
|
|
</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}>
|
|
<a>Login</a>
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<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={`px-4 py-2 rounded ${selectedPeriod === period ? 'bg-black text-white glassmorphism-dark' : 'bg-gray-700 text-gray-400 glassmorphism'}`}
|
|
onClick={() => setSelectedPeriod(period)}
|
|
>
|
|
{period}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
<div className="w-full max-w-4xl">
|
|
{leaderboardData.map((item) => (
|
|
<motion.div key="id" whileHover={{ scale: 1.05, transition: { duration: 0.15 } }}>
|
|
<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>
|
|
<Link href={`/users/${item["username"]}`}><p className="text-center font-bold">{item["username"]}</p></Link>
|
|
<p className="text-center">{parseFloat(item["points"]).toFixed(2)}x</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<Modal isOpen={modalOpen} onClose={closeModal} item={selectedItem ?? { username: "", points: 2, img_url: "" }} period={selectedPeriod} />
|
|
<CalloutModal isOpen={newCallModalOpen} onClose={closeNewCallModal} onSubmit={handleNewCallSubmit} />
|
|
<UserDetailModal isOpen={userDetailModalOpen} onClose={closeUserDetailModal} user={selectedItem ?? {username:""}} />
|
|
|
|
<Footer/>
|
|
</main>
|
|
);
|
|
}
|
|
|
|
export default function App() {
|
|
return (
|
|
<PrivyProvider appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID || 'clxc7nmy906ifhis11rkovoto'}>
|
|
<Home />
|
|
</PrivyProvider>
|
|
);
|
|
}
|