This commit is contained in:
root
2024-06-18 14:13:30 +08:00
parent 1ab1d887c5
commit 696cf2a517

View File

@@ -37,7 +37,7 @@ const generateTableData = (rows) => {
const tableData = generateTableData(10); const tableData = generateTableData(10);
function Home() { function Home() {
const { login, user, ready, logout, linkTwitter, unlinkTwitter } = 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); // State to track Twitter connection
const [walletConnected, setWalletConnected] = useState(false); // State to track Wallet connection const [walletConnected, setWalletConnected] = useState(false); // State to track Wallet connection
@@ -108,33 +108,35 @@ function Home() {
<button onClick={toggleDarkMode} className="bg-gray-700 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded mr-2"> <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" />} {darkMode ? <SunIcon className="h-5 w-5 text-white" /> : <MoonIcon className="h-5 w-5 text-white" />}
</button> </button>
{ready && user ? (
<div className="flex items-center bg-white bg-opacity-20 rounded-full px-4 py-2"> <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 }>
<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={twitterConnected ? unlinkTwitter : linkTwitter}>
<FaTwitter className="h-5 w-5 text-white" /> <FaTwitter className="h-5 w-5 text-white" />
{twitterConnected && ( {twitterConnected && (
<CheckIcon className="absolute top-0 right-0 h-4 w-4 text-green-500" /> <CheckIcon className="absolute top-0 right-0 h-4 w-4 text-green-500" />
)} )}
</button> </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`}> <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` } onClick={walletConnected ? unlinkWallet : linkWallet}>
<FaWallet className="h-5 w-5 text-white" /> <FaWallet className="h-5 w-5 text-white" />
{walletConnected && ( {walletConnected && (
<CheckIcon className="absolute top-0 right-0 h-4 w-4 text-green-500" /> <CheckIcon className="absolute top-0 right-0 h-4 w-4 text-green-500" />
)} )}
</button> </button>
{!ready ? (
<p>Loading...</p>
) : user ? (
<button onClick={logout} className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"> <button onClick={logout} className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
Logout Logout
</button> </button>
) : ( </div>
<button onClick={login} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"> ):
!ready ? (
<p>Loading...</p>
) : <button onClick={login} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Login Login
</button> </button>
)} } </div>
</div> </header>
</div>
</header>
<div className="flex-grow flex flex-col items-center justify-center w-full p-4"> <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> <h2 className="text-2xl font-bold mb-4">Leaderboard </h2>
<div className="w-full max-w-4xl"> <div className="w-full max-w-4xl">
@@ -147,9 +149,9 @@ function Home() {
</thead> </thead>
<tbody> <tbody>
{leaderboardData.map((item, index) => ( {leaderboardData.map((item, index) => (
<tr key={item.id} className={`${index % 2 === 0 ? (darkMode ? "bg-gray-700" : "bg-gray-100") : (darkMode ? "bg-gray-600" : "bg-gray-200")}`}> <tr key={item["id"]} className={`${index % 2 === 0 ? (darkMode ? "bg-gray-700" : "bg-gray-100") : (darkMode ? "bg-gray-600" : "bg-gray-200")}`}>
<td className="py-2 px-4 text-center">{item.username}</td> <td className="py-2 px-4 text-center">{item["username"]}</td>
<td className="py-2 px-4 text-center">{item.points}</td> <td className="py-2 px-4 text-center">{parseFloat(item["points"]).toFixed(2)}x</td>
</tr> </tr>
))} ))}
</tbody> </tbody>