fixes
This commit is contained in:
32
app/page.tsx
32
app/page.tsx
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user