somethings
This commit is contained in:
parent
c36083541b
commit
1317e8e4b7
111
package-lock.json
generated
111
package-lock.json
generated
|
|
@ -5,6 +5,10 @@
|
|||
"packages": {
|
||||
"": {
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-svg-core": "^6.6.0",
|
||||
"@fortawesome/free-brands-svg-icons": "^6.6.0",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.6.0",
|
||||
"@fortawesome/react-fontawesome": "^0.2.2",
|
||||
"@headlessui/react": "^1.7.3",
|
||||
"@heroicons/react": "^2.0.12",
|
||||
"@privy-io/react-auth": "^1.76.4",
|
||||
|
|
@ -1182,6 +1186,64 @@
|
|||
"@ethersproject/strings": "^5.7.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@fortawesome/fontawesome-common-types": {
|
||||
"version": "6.6.0",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.6.0.tgz",
|
||||
"integrity": "sha512-xyX0X9mc0kyz9plIyryrRbl7ngsA9jz77mCZJsUkLl+ZKs0KWObgaEBoSgQiYWAsSmjz/yjl0F++Got0Mdp4Rw==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/@fortawesome/fontawesome-svg-core": {
|
||||
"version": "6.6.0",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.6.0.tgz",
|
||||
"integrity": "sha512-KHwPkCk6oRT4HADE7smhfsKudt9N/9lm6EJ5BVg0tD1yPA5hht837fB87F8pn15D8JfTqQOjhKTktwmLMiD7Kg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-common-types": "6.6.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/@fortawesome/free-brands-svg-icons": {
|
||||
"version": "6.6.0",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.6.0.tgz",
|
||||
"integrity": "sha512-1MPD8lMNW/earme4OQi1IFHtmHUwAKgghXlNwWi9GO7QkTfD+IIaYpIai4m2YJEzqfEji3jFHX1DZI5pbY/biQ==",
|
||||
"license": "(CC-BY-4.0 AND MIT)",
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-common-types": "6.6.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/@fortawesome/free-solid-svg-icons": {
|
||||
"version": "6.6.0",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.6.0.tgz",
|
||||
"integrity": "sha512-IYv/2skhEDFc2WGUcqvFJkeK39Q+HyPf5GHUrT/l2pKbtgEIv1al1TKd6qStR5OIwQdN1GZP54ci3y4mroJWjA==",
|
||||
"license": "(CC-BY-4.0 AND MIT)",
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-common-types": "6.6.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/@fortawesome/react-fontawesome": {
|
||||
"version": "0.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz",
|
||||
"integrity": "sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"prop-types": "^15.8.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@fortawesome/fontawesome-svg-core": "~1 || ~6",
|
||||
"react": ">=16.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@headlessui/react": {
|
||||
"version": "1.7.19",
|
||||
"resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.19.tgz",
|
||||
|
|
@ -7537,7 +7599,6 @@
|
|||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
|
||||
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
|
|
@ -8123,7 +8184,6 @@
|
|||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
|
|
@ -8133,8 +8193,7 @@
|
|||
"node_modules/prop-types/node_modules/react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
|
||||
"dev": true
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
||||
},
|
||||
"node_modules/proxy-compare": {
|
||||
"version": "2.5.1",
|
||||
|
|
@ -10939,6 +10998,43 @@
|
|||
"@ethersproject/strings": "^5.7.0"
|
||||
}
|
||||
},
|
||||
"@fortawesome/fontawesome-common-types": {
|
||||
"version": "6.6.0",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.6.0.tgz",
|
||||
"integrity": "sha512-xyX0X9mc0kyz9plIyryrRbl7ngsA9jz77mCZJsUkLl+ZKs0KWObgaEBoSgQiYWAsSmjz/yjl0F++Got0Mdp4Rw=="
|
||||
},
|
||||
"@fortawesome/fontawesome-svg-core": {
|
||||
"version": "6.6.0",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.6.0.tgz",
|
||||
"integrity": "sha512-KHwPkCk6oRT4HADE7smhfsKudt9N/9lm6EJ5BVg0tD1yPA5hht837fB87F8pn15D8JfTqQOjhKTktwmLMiD7Kg==",
|
||||
"requires": {
|
||||
"@fortawesome/fontawesome-common-types": "6.6.0"
|
||||
}
|
||||
},
|
||||
"@fortawesome/free-brands-svg-icons": {
|
||||
"version": "6.6.0",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.6.0.tgz",
|
||||
"integrity": "sha512-1MPD8lMNW/earme4OQi1IFHtmHUwAKgghXlNwWi9GO7QkTfD+IIaYpIai4m2YJEzqfEji3jFHX1DZI5pbY/biQ==",
|
||||
"requires": {
|
||||
"@fortawesome/fontawesome-common-types": "6.6.0"
|
||||
}
|
||||
},
|
||||
"@fortawesome/free-solid-svg-icons": {
|
||||
"version": "6.6.0",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.6.0.tgz",
|
||||
"integrity": "sha512-IYv/2skhEDFc2WGUcqvFJkeK39Q+HyPf5GHUrT/l2pKbtgEIv1al1TKd6qStR5OIwQdN1GZP54ci3y4mroJWjA==",
|
||||
"requires": {
|
||||
"@fortawesome/fontawesome-common-types": "6.6.0"
|
||||
}
|
||||
},
|
||||
"@fortawesome/react-fontawesome": {
|
||||
"version": "0.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz",
|
||||
"integrity": "sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==",
|
||||
"requires": {
|
||||
"prop-types": "^15.8.1"
|
||||
}
|
||||
},
|
||||
"@headlessui/react": {
|
||||
"version": "1.7.19",
|
||||
"resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.19.tgz",
|
||||
|
|
@ -15596,8 +15692,7 @@
|
|||
"object-assign": {
|
||||
"version": "4.1.1",
|
||||
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
|
||||
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
|
||||
"dev": true
|
||||
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
|
||||
},
|
||||
"object-hash": {
|
||||
"version": "3.0.0",
|
||||
|
|
@ -16009,7 +16104,6 @@
|
|||
"version": "15.8.1",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
|
||||
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"loose-envify": "^1.4.0",
|
||||
"object-assign": "^4.1.1",
|
||||
|
|
@ -16019,8 +16113,7 @@
|
|||
"react-is": {
|
||||
"version": "16.13.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
|
||||
"dev": true
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -12,6 +12,10 @@
|
|||
"lint": "next lint && npx prettier --check \"{__tests__,components,pages,styles}/**/*.{ts,tsx,js,jsx}\" && npx tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-svg-core": "^6.6.0",
|
||||
"@fortawesome/free-brands-svg-icons": "^6.6.0",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.6.0",
|
||||
"@fortawesome/react-fontawesome": "^0.2.2",
|
||||
"@headlessui/react": "^1.7.3",
|
||||
"@heroicons/react": "^2.0.12",
|
||||
"@privy-io/react-auth": "^1.76.4",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user