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

fixes

Browse Source
This commit is contained in:
root 2024-06-18 14:13:30 +08:00
parent 1ab1d887c5
commit 696cf2a517
1 changed files with 37 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
app/page.tsx
View File

@ -37,7 +37,7 @@ const generateTableData = (rows) => {
const tableData = generateTableData(10);
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 [twitterConnected, setTwitterConnected] = useState(false); // State to track Twitter connection
const [walletConnected, setWalletConnected] = useState(false); // State to track Wallet connection
@ -103,38 +103,40 @@ function Home() {
return (
<main className={`flex flex-col min-h-screen items-center justify-between ${darkMode ? "bg-gray-900 text-white" : "bg-white text-black"}`}>
<header className="w-full flex justify-between items-center p-4 bg-gray-800 text-white">
<h1 className="text-xl font-bold">CallFi</h1>
<div className="flex items-center">
<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" />}
</button>
<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 }>
<FaTwitter className="h-5 w-5 text-white" />
{twitterConnected && (
<CheckIcon className="absolute top-0 right-0 h-4 w-4 text-green-500" />
)}
</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`}>
<FaWallet className="h-5 w-5 text-white" />
{walletConnected && (
<CheckIcon className="absolute top-0 right-0 h-4 w-4 text-green-500" />
)}
</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">
Logout
</button>
) : (
<button onClick={login} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Login
</button>
<h1 className="text-xl font-bold">CallFi</h1>
<div className="flex items-center">
<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" />}
</button>
{ready && user ? (
<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={twitterConnected ? unlinkTwitter : linkTwitter}>
<FaTwitter className="h-5 w-5 text-white" />
{twitterConnected && (
<CheckIcon className="absolute top-0 right-0 h-4 w-4 text-green-500" />
)}
</div>
</div>
</header>
</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` } onClick={walletConnected ? unlinkWallet : linkWallet}>
<FaWallet className="h-5 w-5 text-white" />
{walletConnected && (
<CheckIcon className="absolute top-0 right-0 h-4 w-4 text-green-500" />
)}
</button>
<button onClick={logout} className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
Logout
</button>
</div>
):
!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
</button>
} </div>
</header>
<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>
<div className="w-full max-w-4xl">
@ -147,9 +149,9 @@ function Home() {
</thead>
<tbody>
{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")}`}>
<td className="py-2 px-4 text-center">{item.username}</td>
<td className="py-2 px-4 text-center">{item.points}</td>
<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">{parseFloat(item["points"]).toFixed(2)}x</td>
</tr>
))}
</tbody>