somethings
This commit is contained in:
@@ -1,8 +1,12 @@
|
||||
import { useRouter } from "next/router";
|
||||
import { useEffect, useState } from "react";
|
||||
import { getAccessToken, usePrivy } from "@privy-io/react-auth";
|
||||
import { getAccessToken, usePrivy, useWallets } from "@privy-io/react-auth";
|
||||
import Head from "next/head";
|
||||
import { useBalance } from 'wagmi';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import {faDiscord, faGoogle, faMeta, faTwitter, faXTwitter } from "@fortawesome/free-brands-svg-icons";
|
||||
import {faAdd, faFileExport, faLink, faTrash, faUnlink, faWallet } from "@fortawesome/free-solid-svg-icons";
|
||||
import { useSetActiveWallet } from "@privy-io/wagmi";
|
||||
|
||||
async function verifyToken() {
|
||||
const url = "/api/verify";
|
||||
@@ -22,7 +26,8 @@ export default function DashboardPage() {
|
||||
const [vaultData, setVaultData] = useState({ prehp: "0", vc: "0" });
|
||||
const router = useRouter();
|
||||
|
||||
const { ready, authenticated, user, logout, linkTwitter, unlinkTwitter, unlinkDiscord, linkDiscord, unlinkWallet, linkWallet } = usePrivy();
|
||||
const { ready, authenticated, user, logout,connectWallet, exportWallet, unlinkWallet, linkDiscord, unlinkDiscord, linkTwitter, unlinkTwitter,linkGoogle, unlinkGoogle } = usePrivy();
|
||||
const { wallets } = useWallets();
|
||||
const { data: balanceData } = useBalance({
|
||||
address: user?.wallet?.address as `0x${string}`,
|
||||
});
|
||||
@@ -75,6 +80,30 @@ export default function DashboardPage() {
|
||||
const twitterSubject = user?.twitter?.subject || null;
|
||||
const discordSubject = user?.discord?.subject || null;
|
||||
|
||||
function ToggleDiscord(){
|
||||
if(user?.discord){
|
||||
unlinkDiscord(user?.discord.subject);
|
||||
}else{
|
||||
linkDiscord();
|
||||
}
|
||||
}
|
||||
|
||||
function ToggleTwitter(){
|
||||
if(user?.twitter){
|
||||
unlinkTwitter(user?.twitter.subject);
|
||||
}else{
|
||||
linkTwitter();
|
||||
}
|
||||
}
|
||||
|
||||
function ToggleGoogle(){
|
||||
if(user?.google){
|
||||
unlinkGoogle(user?.google.subject);
|
||||
}else{
|
||||
linkGoogle();
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
@@ -107,28 +136,95 @@ export default function DashboardPage() {
|
||||
<h1 className="text-4xl flex justify-center">{vaultData.prehp || "0"} PHP</h1>
|
||||
</div>
|
||||
</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
|
||||
|
||||
<div className="grid grid-cols-2 gap-10 ">
|
||||
<div className="bg-white 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 bg-${user?.twitter ? "red" : "green"}-800 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 bg-${user?.discord ? "red" : "green"}-800 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 bg-${user?.google ? "red" : "green"}-800 px-4 py-1`} onClick={ToggleGoogle}>
|
||||
{user?.google ? "Unlink" : "Link"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-3xl itmes-center justify-center p-5 grid">
|
||||
<h1 className="text-xl flex justify-center mb-5">Wallets</h1>
|
||||
|
||||
<div className="grid gap-2 p-2">
|
||||
{
|
||||
wallets.map((wallet)=>{
|
||||
return (
|
||||
<div>
|
||||
<div className={`grid grid-cols-6 bg-${user?.wallet?.address == wallet.address ? "green" : "gray"}-800 rounded-full py-2 px-20 items-center h-20`}>
|
||||
<button className="">
|
||||
<FontAwesomeIcon icon={faLink}/>
|
||||
</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>
|
||||
{/* <button className="justify-center items-center flex bg-red-400 ml-8 rounded-full h-10" onClick={()=>{unlinkWallet(wallet.address)}}>
|
||||
<FontAwesomeIcon icon={faUnlink}/>
|
||||
</button> */}
|
||||
{wallet.connectorType == "embedded" && (<button className="justify-center items-center flex bg-purple-400 ml-8 rounded-full h-10" onClick={exportWallet}>
|
||||
<FontAwesomeIcon icon={faFileExport}/>
|
||||
</button>)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
<div className="h-5"></div>
|
||||
<button onClick={connectWallet} 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>
|
||||
) : (
|
||||
<button
|
||||
className="text-sm bg-violet-600 hover:bg-violet-700 py-2 px-4 rounded-md text-white"
|
||||
onClick={() => {
|
||||
linkTwitter();
|
||||
}}
|
||||
>
|
||||
Link Twitter
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className="mt-12 flex gap-4 flex-wrap">
|
||||
|
||||
|
||||
{discordSubject ? (
|
||||
<button
|
||||
@@ -171,7 +267,7 @@ export default function DashboardPage() {
|
||||
<button onClick={linkWallet}>
|
||||
Wallet
|
||||
</button>
|
||||
</div>
|
||||
</div> */}
|
||||
</>
|
||||
) : null}
|
||||
</main>
|
||||
|
||||
Reference in New Issue
Block a user