new looks + tickets
This commit is contained in:
parent
c9898166e7
commit
c4a1bdd915
|
|
@ -54,24 +54,31 @@ const Home: React.FC = () => {
|
|||
}, [ready, user]);
|
||||
|
||||
return (
|
||||
<div className='flex items-center justify-center bg-black h-screen text-white'>
|
||||
<div className='flex items-center justify-center bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 h-screen text-white'>
|
||||
{user && ready ? (
|
||||
<div className='justify-center flex flex-col items-center'>
|
||||
<h1 className='neon-text mb-4 text-3xl'>Login Success. You may close this now.</h1>
|
||||
<div className='justify-center flex flex-col items-center bg-black bg-opacity-30 p-8 rounded-xl backdrop-blur-md shadow-lg'>
|
||||
<h1 className='text-4xl font-bold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-blue-500'>Login Successful!</h1>
|
||||
<p className='mb-6 text-lg text-gray-300'>Your W3B Launcher is now securely connected.</p>
|
||||
<Link href="/dashboard">
|
||||
<div className='bg-purple-700 px-10 py-2 items-center justify-center flex rounded-full '>Go to Dashboard</div>
|
||||
<div className='bg-gradient-to-r from-purple-500 to-indigo-600 px-10 py-3 items-center justify-center flex rounded-full text-lg font-semibold hover:from-purple-600 hover:to-indigo-700 transition duration-300 shadow-md hover:shadow-xl'>
|
||||
Enter Dashboard
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
) : (
|
||||
<>
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
<h1 className="neon-text mb-4 text-3xl">Complete W3B Wallet Login</h1>
|
||||
<button className="bg-green-700 rounded-full p-1 px-10 text-lg m-5 py-2" onClick={login}>Login</button>
|
||||
</div>
|
||||
|
||||
|
||||
</>
|
||||
<div className="flex flex-col items-center justify-center bg-black bg-opacity-30 p-10 rounded-xl backdrop-blur-md shadow-lg">
|
||||
<h1 className="text-4xl font-bold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500">Connect your W3B Games Launcher</h1>
|
||||
<p className="mb-6 text-lg text-gray-300">Connect your crypto wallet to access the W3B Games ecosystem</p>
|
||||
<button
|
||||
className="bg-gradient-to-r from-green-400 to-blue-500 hover:from-green-500 hover:to-blue-600 rounded-full px-10 py-3 text-lg font-semibold transition duration-300 shadow-md hover:shadow-xl flex items-center"
|
||||
onClick={login}
|
||||
>
|
||||
<svg className="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
||||
</svg>
|
||||
Secure Login
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -237,198 +237,197 @@ export default function DashboardPage() {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>W3B Games Dashboard</title>
|
||||
</Head>
|
||||
|
||||
<main className="flex flex-col min-h-screen px-4 sm:px-20 py-6 sm:py-10 bg-black text-white">
|
||||
<main className="flex flex-col min-h-screen px-4 sm:px-20 py-6 sm:py-10 bg-gradient-to-br from-purple-900 to-blue-900 text-white">
|
||||
{ready && authenticated ? (
|
||||
<>
|
||||
<div className="flex flex-row justify-between">
|
||||
<h1 className="text-2xl font-semibold text-white">Welcome {username || "User"},</h1>
|
||||
<div className="flex flex-row justify-between items-center mb-8">
|
||||
<h1 className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500">
|
||||
Welcome {username || "Crypto Warrior"},
|
||||
</h1>
|
||||
<button
|
||||
onClick={logout}
|
||||
className="text-sm bg-red-500 hover:bg-red-700 py-2 px-4 rounded-md text-violet-100"
|
||||
className="text-sm bg-gradient-to-r from-red-500 to-pink-500 hover:from-red-600 hover:to-pink-600 py-2 px-6 rounded-full text-white font-semibold transform hover:scale-105 transition duration-300 ease-in-out"
|
||||
>
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center justify-center">
|
||||
<div className="items-center justify-center p-20">
|
||||
<h1 className="text-s">Vault Credits</h1>
|
||||
<h1 className="text-4xl flex justify-center">{vaultData.vc || "0"} VC</h1>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<div className="bg-gradient-to-br from-purple-800 to-indigo-900 rounded-2xl p-6 shadow-lg hover:shadow-2xl transition duration-300 ease-in-out transform hover:-translate-y-1">
|
||||
<h2 className="text-lg font-semibold mb-2 text-purple-300">Vault Credits</h2>
|
||||
<p className="text-4xl font-bold text-white">{vaultData.vc || "0"} <span className="text-2xl text-purple-300">VC</span></p>
|
||||
</div>
|
||||
<div className="items-center justify-center p-20">
|
||||
<h1 className="text-xs">{activeWallet}</h1>
|
||||
<h1 className="text-4xl flex justify-center">{balance || 0} {token}</h1>
|
||||
<div className="bg-gradient-to-br from-blue-800 to-cyan-900 rounded-2xl p-6 shadow-lg hover:shadow-2xl transition duration-300 ease-in-out transform hover:-translate-y-1">
|
||||
<h2 className="text-lg font-semibold mb-2 text-blue-300">{token} Balance</h2>
|
||||
<p className="text-4xl font-bold text-white">{balance || 0} <span className="text-2xl text-blue-300">{token}</span></p>
|
||||
<p className="text-xs mt-2 text-blue-300 truncate">{activeWallet}</p>
|
||||
</div>
|
||||
<div className="items-center justify-center p-20">
|
||||
<h1 className="text-s">Hunt Tickets</h1>
|
||||
<h1 className="text-4xl flex justify-center">{ticketsCount || "0"}</h1>
|
||||
<button
|
||||
onClick={() => setShowPopup(true)}
|
||||
className="mt-2 bg-blue-500 hover:bg-blue-700 py-2 px-4 rounded-md text-white"
|
||||
>
|
||||
Buy Tickets
|
||||
</button>
|
||||
<div className="bg-gradient-to-br from-green-800 to-teal-900 rounded-2xl p-6 shadow-lg hover:shadow-2xl transition duration-300 ease-in-out transform hover:-translate-y-1 flex flex-col justify-between">
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold mb-2 text-green-300">Hunt Tickets</h2>
|
||||
<p className="text-4xl font-bold text-white">{ticketsCount || "0"}</p>
|
||||
</div>
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
onClick={() => setShowPopup(true)}
|
||||
className="bg-gradient-to-r from-green-500 to-teal-500 hover:from-green-600 hover:to-teal-600 py-2 px-4 rounded-full text-white font-semibold transform hover:scale-105 transition duration-300 ease-in-out"
|
||||
>
|
||||
Buy Tickets
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="items-center justify-center p-20">
|
||||
<h1 className="text-s">Pre-hunt Points</h1>
|
||||
<h1 className="text-4xl flex justify-center">{vaultData.prehp || "0"} PHP</h1>
|
||||
<div className="bg-gradient-to-br from-yellow-800 to-orange-900 rounded-2xl p-6 shadow-lg hover:shadow-2xl transition duration-300 ease-in-out transform hover:-translate-y-1">
|
||||
<h2 className="text-lg font-semibold mb-2 text-yellow-300">Pre-hunt Points</h2>
|
||||
<p className="text-4xl font-bold text-white">{vaultData.prehp || "0"} <span className="text-2xl text-yellow-300">PHP</span></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-10 ">
|
||||
<div className="bg-opacity-40 bg-gray-900 rounded-3xl h-[250px] itmes-center justify-center p-5 grid ">
|
||||
<h1 className="text-xl flex justify-center">Socials</h1>
|
||||
<div className="h-5"></div>
|
||||
|
||||
<div className="flex h-12 items-center">
|
||||
<FontAwesomeIcon className="p-2 w-12" icon={faXTwitter} size={'2x'} />
|
||||
<p className="w-16">Twitter</p>
|
||||
<div className="px-5"></div>
|
||||
<div className={`bg-gray-${user?.twitter ? "8" : "7"}00 rounded-xl items-center justify-center flex w-64 p-1`}>
|
||||
<p>{user?.twitter ? "@" + user?.twitter.username : "-"}</p>
|
||||
</div>
|
||||
<div className="p-5" />
|
||||
<button className={`rounded-full ${user?.twitter ? "bg-red-700" : "bg-green-700"} px-4 py-1`} onClick={ToggleTwitter}>
|
||||
{user?.twitter ? "Unlink" : "Link"}
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex h-12 items-center">
|
||||
<FontAwesomeIcon className="p-2 w-12" icon={faDiscord} size={'2x'} />
|
||||
<p className="w-16">Discord</p>
|
||||
<div className="px-5"></div>
|
||||
<div className={`bg-gray-${user?.discord ? "8" : "7"}00 rounded-xl items-center justify-center flex w-64 p-1`}>
|
||||
<p>{user?.discord ? "@" + user?.discord?.username : "-"}</p>
|
||||
</div>
|
||||
<div className="p-5" />
|
||||
<button className={`rounded-full ${user?.discord ? "bg-red-700" : "bg-green-700"} px-4 py-1`} onClick={ToggleDiscord}>
|
||||
{user?.discord ? "Unlink" : "Link"}
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex h-12 items-center">
|
||||
<FontAwesomeIcon className="p-2 w-12" icon={faGoogle} size={'2x'} />
|
||||
<p className="w-16">Google</p>
|
||||
<div className="px-5"></div>
|
||||
<div className={`bg-gray-${user?.google ? "8" : "7"}00 rounded-xl items-center justify-center flex w-64 p-1`}>
|
||||
<p>{user?.google ? "@" + user?.google?.email : "-"}</p>
|
||||
</div>
|
||||
<div className="p-5" />
|
||||
<button className={`rounded-full ${user?.google ? "bg-red-700" : "bg-green-700"} px-4 py-1`} onClick={ToggleGoogle}>
|
||||
{user?.google ? "Unlink" : "Link"}
|
||||
</button>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-10 mt-10">
|
||||
<div className="bg-gradient-to-br from-gray-900 to-gray-800 rounded-3xl shadow-xl p-8">
|
||||
<h2 className="text-2xl font-bold mb-6 text-center text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-500">Socials</h2>
|
||||
<div className="space-y-6">
|
||||
{[
|
||||
{ icon: faXTwitter, name: 'Twitter', user: user?.twitter, toggle: ToggleTwitter },
|
||||
{ icon: faDiscord, name: 'Discord', user: user?.discord, toggle: ToggleDiscord },
|
||||
{ icon: faGoogle, name: 'Google', user: user?.google, toggle: ToggleGoogle }
|
||||
].map((social) => (
|
||||
<div key={social.name} className="flex items-center justify-between bg-gray-800 rounded-xl p-4 hover:bg-gray-700 transition duration-300">
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="w-8 h-8 flex items-center justify-center">
|
||||
<FontAwesomeIcon icon={social.icon} size="2x" className="text-blue-400" />
|
||||
</div>
|
||||
<span className="font-medium">{social.name}</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<span className={`px-3 py-1 rounded-full ${social.user ? 'bg-green-900 text-green-300' : 'bg-gray-700 text-gray-400'}`}>
|
||||
{social.user ? `@${social.user.username || social.user.email}` : 'Not linked'}
|
||||
</span>
|
||||
<button
|
||||
onClick={social.toggle}
|
||||
className={`rounded-full px-4 py-2 font-semibold transition duration-300 ${
|
||||
social.user
|
||||
? 'bg-red-600 hover:bg-red-700 text-white'
|
||||
: 'bg-green-600 hover:bg-green-700 text-white'
|
||||
}`}
|
||||
>
|
||||
{social.user ? 'Unlink' : 'Link'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-opacity-40 bg-gray-900 rounded-3xl itmes-center justify-center p-5 grid">
|
||||
<h1 className="text-xl flex justify-center mb-5">Wallets</h1>
|
||||
<div>
|
||||
<div>
|
||||
<div className={`grid grid-cols-6 ${activeWallet == getEmbeddedConnectedWallet(wallets)?.address ? "bg-gray-600" : "bg-gray-800"} rounded-full py-2 px-20 items-center h-20`} onClick={() => { handleWalletClick(getEmbeddedConnectedWallet(wallets)?.address ?? ""); }}>
|
||||
<button className="w-12">
|
||||
<FontAwesomeIcon icon={faLink} />
|
||||
</button>
|
||||
<div className="grid col-span-4">
|
||||
<p className="flex justify-center items-center">W3B Wallet</p>
|
||||
<div className="h-2"></div>
|
||||
<p>{getEmbeddedConnectedWallet(wallets)?.address}</p>
|
||||
|
||||
</div>
|
||||
{/* <button className="justify-center items-center flex bg-red-400 ml-8 rounded-full h-10" onClick={()=>{unlinkWallet(wallet.address)}}>
|
||||
<FontAwesomeIcon icon={faUnlink}/>
|
||||
</button> */}
|
||||
<button className="justify-center items-center flex bg-purple-400 ml-8 rounded-full h-10" onClick={exportWallet}>
|
||||
<FontAwesomeIcon icon={faFileExport} className="w-6" />
|
||||
</button>
|
||||
<div className="bg-gradient-to-br from-gray-900 to-gray-800 rounded-3xl shadow-xl p-8">
|
||||
<h2 className="text-2xl font-bold mb-6 text-center text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-cyan-500">Wallets</h2>
|
||||
<div className="space-y-4">
|
||||
<div
|
||||
className={`grid grid-cols-6 ${
|
||||
activeWallet == getEmbeddedConnectedWallet(wallets)?.address
|
||||
? 'bg-gradient-to-r from-blue-700 to-purple-700'
|
||||
: 'bg-gray-800'
|
||||
} rounded-xl p-4 items-center cursor-pointer transition duration-300 hover:shadow-lg`}
|
||||
onClick={() => handleWalletClick(getEmbeddedConnectedWallet(wallets)?.address ?? "")}
|
||||
>
|
||||
<FontAwesomeIcon icon={faLink} className="text-cyan-400 w-8 h-8" />
|
||||
<div className="col-span-4">
|
||||
<p className="font-semibold">W3B Wallet</p>
|
||||
<p className="text-sm text-gray-400 truncate">
|
||||
{getEmbeddedConnectedWallet(wallets)?.address}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
className="justify-self-end bg-purple-600 hover:bg-purple-700 rounded-full p-2 transition duration-300"
|
||||
onClick={exportWallet}
|
||||
>
|
||||
<FontAwesomeIcon icon={faFileExport} className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-7"></div>
|
||||
<div className="grid gap-2 p-2">
|
||||
{
|
||||
wallets.map((wallet) => {
|
||||
if (wallet.connectorType == "embedded") { return ""; }
|
||||
const address = wallet.address;
|
||||
return (
|
||||
<div>
|
||||
<div className={`grid grid-cols-6 ${wallet.linked ? (address == activeWallet ? "bg-gray-600" : "bg-gray-800") : "bg-gray-900 bg-opacity-30 text-gray-600"} rounded-full py-2 px-20 items-center h-20`} onClick={() => { handleWalletClick(address) }}>
|
||||
<button className="w-8">
|
||||
<FontAwesomeIcon icon={faWallet} />
|
||||
</button>
|
||||
<div className="grid col-span-4">
|
||||
<p className="flex justify-center items-center">{wallet.walletClientType}</p>
|
||||
<div className="h-2"></div>
|
||||
<p>{wallet.address}</p>
|
||||
|
||||
</div>
|
||||
{wallet.linked ? <button className="justify-center items-center flex bg-red-400 ml-8 rounded-full h-10" onClick={() => { unlinkWallet(wallet.address) }}>
|
||||
<FontAwesomeIcon icon={faUnlink} className="w-6" />
|
||||
</button> :
|
||||
<FontAwesomeIcon icon={faUnlink} className="w-6 justify-center items-center flex ml-8 rounded-full h-10" />
|
||||
}
|
||||
|
||||
</div>
|
||||
{wallets.map((wallet) => {
|
||||
if (wallet.connectorType == "embedded") return null;
|
||||
const address = wallet.address;
|
||||
return (
|
||||
<div
|
||||
key={address}
|
||||
className={`grid grid-cols-6 ${
|
||||
wallet.linked
|
||||
? address == activeWallet
|
||||
? 'bg-gradient-to-r from-blue-700 to-purple-700'
|
||||
: 'bg-gray-800'
|
||||
: 'bg-gray-900 bg-opacity-30'
|
||||
} rounded-xl p-4 items-center cursor-pointer transition duration-300 hover:shadow-lg`}
|
||||
onClick={() => handleWalletClick(address)}
|
||||
>
|
||||
<FontAwesomeIcon icon={faWallet} className={`${wallet.linked ? 'text-yellow-400' : 'text-gray-600'} w-8 h-8`} />
|
||||
<div className="col-span-4">
|
||||
<p className={`font-semibold ${wallet.linked ? 'text-white' : 'text-gray-600'}`}>{wallet.walletClientType}</p>
|
||||
<p className={`text-sm ${wallet.linked ? 'text-gray-300' : 'text-gray-600'} truncate`}>{wallet.address}</p>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
}
|
||||
{wallet.linked ? (
|
||||
<button
|
||||
className="justify-self-end bg-red-600 hover:bg-red-700 rounded-full p-2 transition duration-300"
|
||||
onClick={() => unlinkWallet(wallet.address)}
|
||||
>
|
||||
<FontAwesomeIcon icon={faUnlink} className="w-4 h-4" />
|
||||
</button>
|
||||
) : (
|
||||
<FontAwesomeIcon icon={faUnlink} className="w-4 h-4 text-gray-600 justify-self-end" />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
<button
|
||||
onClick={linkWallet}
|
||||
className="bg-gradient-to-r from-green-500 to-blue-500 hover:from-green-600 hover:to-blue-600 text-white font-bold py-2 px-3 rounded-lg transition duration-300 ease-in-out flex items-center justify-center space-x-2 text-sm"
|
||||
>
|
||||
<FontAwesomeIcon icon={faAdd} className="w-4 h-4" />
|
||||
<span>Connect New Wallet</span>
|
||||
</button>
|
||||
</div>
|
||||
<div className="h-5"></div>
|
||||
<button onClick={linkWallet} className="justify-center bg-green-700 flex rounded-full w-96 h-10 items-center mx-auto">
|
||||
<div className="flex">
|
||||
<div className="">
|
||||
<FontAwesomeIcon icon={faAdd} />
|
||||
</div>
|
||||
<div className="px-10">
|
||||
+ Connect New Wallet
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showPopup && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-75 flex justify-center items-center">
|
||||
<div className="bg-gray-800 p-8 rounded-lg">
|
||||
<h2 className="text-xl mb-4">Enter Ticket Amount</h2>
|
||||
<div className="flex items-center">
|
||||
<div className="fixed inset-0 bg-black bg-opacity-75 flex justify-center items-center z-50">
|
||||
<div className="bg-gradient-to-br from-gray-900 to-gray-800 p-8 rounded-2xl shadow-2xl max-w-md w-full">
|
||||
<h2 className="text-2xl font-bold mb-6 text-center text-transparent bg-clip-text bg-gradient-to-r from-green-400 to-blue-500">Buy Hunt Tickets</h2>
|
||||
<div className="flex items-center justify-center space-x-4 mb-6">
|
||||
<button
|
||||
onClick={() => setTicketAmount(ticketAmount > 1 ? ticketAmount - 1 : 1)}
|
||||
className="text-lg bg-gray-600 hover:bg-gray-500 text-white py-1 px-3 rounded-l"
|
||||
onClick={() => setTicketAmount(Math.max(1, ticketAmount - 1))}
|
||||
className={`text-2xl bg-gray-700 hover:bg-gray-600 text-white w-12 h-12 rounded-full transition duration-300 ${ticketAmount <= 1 ? 'opacity-50 cursor-not-allowed' : ''}`}
|
||||
disabled={ticketAmount <= 1}
|
||||
>
|
||||
-
|
||||
</button>
|
||||
<input
|
||||
type="number"
|
||||
value={ticketAmount}
|
||||
onChange={(e) => setTicketAmount(Number(e.target.value))}
|
||||
className="w-16 text-center text-white bg-black appearance-none"
|
||||
style={{
|
||||
appearance: 'textfield',
|
||||
WebkitAppearance: 'none',
|
||||
MozAppearance: 'textfield',
|
||||
}}
|
||||
/>
|
||||
<div className="w-24 text-center text-2xl font-bold text-white bg-transparent border-b-2 border-blue-500">
|
||||
{ticketAmount}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setTicketAmount(ticketAmount + 1)}
|
||||
className="text-lg bg-gray-600 hover:bg-gray-500 text-white py-1 px-3 rounded-r"
|
||||
className="text-2xl bg-gray-700 hover:bg-gray-600 text-white w-12 h-12 rounded-full transition duration-300"
|
||||
>
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
<div className="mt-4 flex justify-between">
|
||||
<div className="flex justify-between space-x-4">
|
||||
<button
|
||||
onClick={() => buyTicket(ticketAmount)}
|
||||
className="bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded-md"
|
||||
className="flex-1 bg-gradient-to-r from-green-500 to-blue-500 hover:from-green-600 hover:to-blue-600 text-white font-bold py-3 px-6 rounded-full transition duration-300 ease-in-out transform hover:scale-105"
|
||||
>
|
||||
Buy
|
||||
Buy Tickets
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowPopup(false)}
|
||||
className="bg-red-600 hover:bg-red-700 text-white py-2 px-4 rounded-md"
|
||||
className="flex-1 bg-gradient-to-r from-red-500 to-pink-500 hover:from-red-600 hover:to-pink-600 text-white font-bold py-3 px-6 rounded-full transition duration-300 ease-in-out transform hover:scale-105"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
|
|
@ -438,7 +437,9 @@ export default function DashboardPage() {
|
|||
)}
|
||||
</>
|
||||
) : (
|
||||
<p>Loading...</p>
|
||||
<div className="flex justify-center items-center h-screen">
|
||||
<div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-blue-500"></div>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
//import Portal from "../components/graphics/portal";
|
||||
import { useLogin } from "@privy-io/react-auth";
|
||||
import { PrivyClient } from "@privy-io/server-auth";
|
||||
import { GetServerSideProps } from "next";
|
||||
import Head from "next/head";
|
||||
import { useRouter } from "next/router";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faCube, faRocket } from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
export const getServerSideProps: GetServerSideProps = async ({ req }) => {
|
||||
const cookieAuthToken = req.cookies["privy-token"];
|
||||
// If no cookie is found, skip any further checks
|
||||
if (!cookieAuthToken) return { props: {} };
|
||||
|
||||
const PRIVY_APP_ID = process.env.NEXT_PUBLIC_PRIVY_APP_ID;
|
||||
|
|
@ -16,8 +16,6 @@ export const getServerSideProps: GetServerSideProps = async ({ req }) => {
|
|||
|
||||
try {
|
||||
const claims = await client.verifyAuthToken(cookieAuthToken);
|
||||
// Use this result to pass props to a page for server rendering or to drive redirects!
|
||||
// ref https://nextjs.org/docs/pages/api-reference/functions/get-server-side-props
|
||||
console.log({ claims });
|
||||
|
||||
return {
|
||||
|
|
@ -38,21 +36,28 @@ export default function LoginPage() {
|
|||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Login · Privy</title>
|
||||
<title>MetaHunt · Web3 Adventure</title>
|
||||
</Head>
|
||||
|
||||
<main className="flex min-h-screen min-w-full">
|
||||
<div className="flex bg-black flex-1 p-6 justify-center items-center">
|
||||
<div>
|
||||
<div>
|
||||
{/* <Portal style={{ maxWidth: "100%", height: "auto" }} /> */}
|
||||
<main className="flex min-h-screen min-w-full bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900">
|
||||
<div className="flex flex-1 p-6 justify-center items-center">
|
||||
<div className="text-center">
|
||||
<div className="mb-10 h-96 flex justify-center">
|
||||
<FontAwesomeIcon icon={faCube} className="text-sm text-cyan-400 animate-pulse" />
|
||||
</div>
|
||||
<div className="mt-6 flex justify-center text-center">
|
||||
<h1 className="text-5xl font-bold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-purple-500">
|
||||
Welcome to W3B Game Dashboard
|
||||
</h1>
|
||||
<p className="text-xl mb-8 text-gray-300">
|
||||
Embark on a Web3 adventure like no other
|
||||
</p>
|
||||
<div className="mt-6 flex justify-center">
|
||||
<button
|
||||
className="bg-violet-600 hover:bg-violet-700 py-3 px-6 text-white rounded-lg"
|
||||
className="bg-gradient-to-r from-purple-500 to-cyan-500 hover:from-purple-600 hover:to-cyan-600 py-3 px-8 text-white rounded-full text-lg font-semibold transition duration-300 ease-in-out transform hover:scale-105 flex items-center shadow-lg hover:shadow-xl active:shadow-md active:translate-y-0.5"
|
||||
onClick={login}
|
||||
>
|
||||
Log in
|
||||
<FontAwesomeIcon icon={faRocket} className="mr-6 w-12 " />
|
||||
Login to Dashboard
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -48,28 +48,27 @@ export default function LoginComplete() {
|
|||
<Head>
|
||||
<title>Complete Login</title>
|
||||
</Head>
|
||||
<div className="bg-black h-screen text-white">
|
||||
<div className="flex justify-center items-center h-full flex-col">
|
||||
<p className="text-3xl pb-10">Let's Complete your Login</p>
|
||||
<p>Enter your unique username</p>
|
||||
<form className="flex flex-col">
|
||||
<div className="bg-gradient-to-br from-purple-600 to-blue-500 min-h-screen text-white flex items-center justify-center">
|
||||
<div className="bg-white/10 backdrop-blur-md rounded-xl p-8 shadow-lg max-w-md w-full">
|
||||
<h1 className="text-4xl font-bold mb-6 text-center text-yellow-300">Complete Your Login</h1>
|
||||
<p className="text-xl mb-4 text-center">Enter your unique username</p>
|
||||
<form className="flex flex-col items-center">
|
||||
<input
|
||||
type="text"
|
||||
name="username"
|
||||
value={username}
|
||||
onChange={handleUsernameChange}
|
||||
placeholder="ex: John123"
|
||||
className="bg-gray-900 rounded-full w-96 my-2"
|
||||
className="bg-white/20 rounded-full w-full py-3 px-4 mb-4 text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-yellow-300"
|
||||
/>
|
||||
{error && <p className="text-red-300 mb-4 text-center">{error}</p>}
|
||||
<button
|
||||
className="bg-yellow-400 hover:bg-yellow-500 text-purple-900 font-bold rounded-full py-3 px-8 transition-colors duration-200"
|
||||
onClick={handleClaim}
|
||||
>
|
||||
Claim Username
|
||||
</button>
|
||||
</form>
|
||||
{error && <p className="text-red-500 mt-4">{error}</p>}
|
||||
<button
|
||||
className="bg-green-700 rounded-full mx-10 h-12 w-48"
|
||||
onClick={handleClaim}
|
||||
>
|
||||
Claim
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user