147 lines
4.6 KiB
TypeScript
147 lines
4.6 KiB
TypeScript
import { useRouter } from "next/router";
|
|
import { useEffect, useState } from "react";
|
|
import { getAccessToken, usePrivy } from "@privy-io/react-auth";
|
|
import Head from "next/head";
|
|
|
|
async function verifyToken() {
|
|
const url = "/api/verify";
|
|
const accessToken = await getAccessToken();
|
|
const result = await fetch(url, {
|
|
headers: {
|
|
...(accessToken ? { Authorization: `Bearer ${accessToken}` } : undefined),
|
|
},
|
|
});
|
|
|
|
return await result.json();
|
|
}
|
|
|
|
export default function DashboardPage() {
|
|
const [verifyResult, setVerifyResult] = useState();
|
|
const router = useRouter();
|
|
const {
|
|
ready,
|
|
authenticated,
|
|
user,
|
|
logout,
|
|
linkEmail,
|
|
linkWallet,
|
|
unlinkEmail,
|
|
linkPhone,
|
|
unlinkPhone,
|
|
unlinkWallet,
|
|
linkGoogle,
|
|
unlinkGoogle,
|
|
linkTwitter,
|
|
unlinkTwitter,
|
|
linkDiscord,
|
|
unlinkDiscord,
|
|
} = usePrivy();
|
|
|
|
useEffect(() => {
|
|
if (ready && !authenticated) {
|
|
router.push("/");
|
|
}
|
|
}, [ready, authenticated, router]);
|
|
|
|
const numAccounts = user?.linkedAccounts?.length || 0;
|
|
const canRemoveAccount = numAccounts > 1;
|
|
|
|
const email = user?.email;
|
|
const phone = user?.phone;
|
|
const wallet = user?.wallet;
|
|
|
|
const googleSubject = user?.google?.subject || null;
|
|
const twitterSubject = user?.twitter?.subject || null;
|
|
const discordSubject = user?.discord?.subject || null;
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>Account Settings</title>
|
|
</Head>
|
|
|
|
<main className="flex flex-col min-h-screen px-4 sm:px-20 py-6 sm:py-10 bg-black text-white">
|
|
{ready && authenticated ? (
|
|
<>
|
|
<div className="flex flex-row justify-between">
|
|
<h1 className="text-2xl font-semibold text-white">Welcome Warlock,</h1>
|
|
<button
|
|
onClick={logout}
|
|
className="text-sm bg-red-500 hover:bg-red-700 py-2 px-4 rounded-md text-violet-100"
|
|
>
|
|
Logout
|
|
</button>
|
|
</div>
|
|
<div className="items-center flex flex-wrap justify-center p-20">
|
|
<h1 className="text-4xl">$0.1</h1>
|
|
</div>
|
|
<div className="mt-12 flex gap-4 flex-wrap">
|
|
|
|
{twitterSubject ? (
|
|
<button
|
|
onClick={() => {
|
|
unlinkTwitter(twitterSubject);
|
|
}}
|
|
className="text-sm border border-violet-600 hover:border-violet-700 py-2 px-4 rounded-md text-violet-600 hover:text-violet-700 disabled:border-gray-500 disabled:text-gray-500 hover:disabled:text-gray-500"
|
|
disabled={!canRemoveAccount}
|
|
>
|
|
Unlink Twitter
|
|
</button>
|
|
) : (
|
|
<button
|
|
className="text-sm bg-violet-600 hover:bg-violet-700 py-2 px-4 rounded-md text-white"
|
|
onClick={() => {
|
|
linkTwitter();
|
|
}}
|
|
>
|
|
Link Twitter
|
|
</button>
|
|
)}
|
|
|
|
{discordSubject ? (
|
|
<button
|
|
onClick={() => {
|
|
unlinkDiscord(discordSubject);
|
|
}}
|
|
className="text-sm border border-violet-600 hover:border-violet-700 py-2 px-4 rounded-md text-violet-600 hover:text-violet-700 disabled:border-gray-500 disabled:text-gray-500 hover:disabled:text-gray-500"
|
|
disabled={!canRemoveAccount}
|
|
>
|
|
Unlink Discord
|
|
</button>
|
|
) : (
|
|
<button
|
|
className="text-sm bg-violet-600 hover:bg-violet-700 py-2 px-4 rounded-md text-white"
|
|
onClick={() => {
|
|
linkDiscord();
|
|
}}
|
|
>
|
|
Link Discord
|
|
</button>
|
|
)}
|
|
{wallet ? (
|
|
<button
|
|
onClick={() => {
|
|
unlinkWallet(wallet.address);
|
|
}}
|
|
className="text-sm border border-violet-600 hover:border-violet-700 py-2 px-4 rounded-md text-violet-600 hover:text-violet-700 disabled:border-gray-500 disabled:text-gray-500 hover:disabled:text-gray-500"
|
|
disabled={!canRemoveAccount}
|
|
>
|
|
Unlink wallet
|
|
</button>
|
|
) : (
|
|
<button
|
|
onClick={linkWallet}
|
|
className="text-sm bg-violet-600 hover:bg-violet-700 py-2 px-4 rounded-md text-white border-none"
|
|
>
|
|
Connect wallet
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
</>
|
|
) : null}
|
|
</main>
|
|
</>
|
|
);
|
|
}
|