ff

pages/dashboard.tsx

@@ -1,6 +1,6 @@
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
-import { getAccessToken, usePrivy, useWallets } from "@privy-io/react-auth";
+import { getAccessToken, getEmbeddedConnectedWallet, usePrivy, useWallets } from "@privy-io/react-auth";
 import Head from "next/head";
 import { useBalance } from 'wagmi';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -26,7 +26,7 @@ export default function DashboardPage() {
   const [vaultData, setVaultData] = useState({ prehp: "0", vc: "0" });
   const router = useRouter();
 
-  const { ready, authenticated, user, logout,connectWallet, exportWallet, unlinkWallet, linkDiscord, unlinkDiscord, linkTwitter, unlinkTwitter,linkGoogle, unlinkGoogle } = usePrivy();
+  const { ready, authenticated, user, logout,exportWallet, linkWallet,unlinkWallet, linkDiscord, unlinkDiscord, linkTwitter, unlinkTwitter,linkGoogle, unlinkGoogle } = usePrivy();
   const { wallets } = useWallets();
   const { data: balanceData } = useBalance({
     address: user?.wallet?.address as `0x${string}`,
@@ -38,7 +38,13 @@ export default function DashboardPage() {
     if (ready && !authenticated) {
       router.push("/");
     }
-  }, [ready, authenticated, router]);
+    if(ready){
+      if(username == "-1"){
+        router.push("/logincomplete"); 
+      }
+    }
+    
+  }, [ready, authenticated, router, username]);
 
   useEffect(() => {
     async function fetchUsername() {
@@ -128,8 +134,8 @@ export default function DashboardPage() {
                 <h1 className="text-4xl flex justify-center">{vaultData.vc || "0"} VC</h1>
               </div>
               <div className="items-center justify-center p-20">
-                <h1 className="text-xs">{user?.wallet?.address}</h1>
-                <h1 className="text-4xl flex justify-center">{balance || 0} {token}</h1>
+                {/* <h1 className="text-xs">{user?.wallet?.address}</h1>
+                <h1 className="text-4xl flex justify-center">{balance || 0} {token}</h1> */}
               </div>
               <div className="items-center justify-center p-20">
                 <h1 className="text-s">Pre-hunt Points</h1>
@@ -138,7 +144,7 @@ export default function DashboardPage() {
             </div>
 
             <div className="grid grid-cols-2 gap-10 ">
-              <div className="bg-white rounded-3xl h-[250px] itmes-center justify-center p-5 grid ">
+              <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>
 
@@ -150,7 +156,7 @@ export default function DashboardPage() {
                     <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}>
+                  <button className={`rounded-full ${user?.twitter ? "bg-red-700" : "bg-green-700"} px-4 py-1`} onClick={ToggleTwitter}>
                     {user?.twitter ? "Unlink" : "Link"}
                   </button>
                 </div>
@@ -162,7 +168,7 @@ export default function DashboardPage() {
                     <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}>
+                  <button className={`rounded-full ${user?.discord ? "bg-red-700" : "bg-green-700"} px-4 py-1`} onClick={ToggleDiscord}>
                     {user?.discord ? "Unlink" : "Link"}
                   </button>
                 </div>
@@ -174,23 +180,45 @@ export default function DashboardPage() {
                     <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}>
+                  <button className={`rounded-full ${user?.google ? "bg-red-700" : "bg-green-700"} 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">
+              <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 bg-gray-600 rounded-full py-2 px-20 items-center h-20`}>
+                      <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>
+                  </div>
+                </div>
+                <div className="h-7"></div>
                 <div className="grid gap-2 p-2">
                   {
                     wallets.map((wallet)=>{
+                      if(wallet.connectorType == "embedded"){return "";}
                       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}/>
+                          <div className={`grid grid-cols-6 ${wallet.linked ? "bg-gray-800" : "bg-gray-900 bg-opacity-30 text-gray-600"} rounded-full py-2 px-20 items-center h-20`}>
+                            <button className="w-8">
+                              <FontAwesomeIcon icon={faWallet}/>
                             </button>
                             <div className="grid col-span-4">
                               <p className="flex justify-center items-center">{wallet.walletClientType}</p>
@@ -198,12 +226,12 @@ export default function DashboardPage() {
                               <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>)}
+                            { 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>
                         </div>
                       );
@@ -211,13 +239,13 @@ export default function DashboardPage() {
                   }
                 </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">
+                <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
+                      + Connect New Wallet
                     </div>
                   </div>
                 </button>

pages/logincomplete.tsx

@@ -0,0 +1,71 @@
+import { usePrivy } from "@privy-io/react-auth";
+import Head from "next/head";
+import { useRouter } from "next/router";
+import { SetStateAction, useState } from "react";
+
+export default function LoginComplete() {
+  const [username, setUsername] = useState("");
+  const [error, setError] = useState(""); 
+  const {ready, user} = usePrivy();
+  const router = useRouter();
+  const handleUsernameChange = (e: { target: { value: SetStateAction<string>; }; }) => {
+    setUsername(e.target.value);
+    setError("");
+  };
+
+  const handleClaim = async () => {
+    try {
+      const response = await fetch(
+        `https://vps.playpoolstudios.com/metahunt/api/web/validate_username.php?username=${username}`
+      );
+      const data = await response.text();
+
+      if (data === "0") {
+        await fetch(
+          `https://vps.playpoolstudios.com/metahunt/api/web/set_username.php?id=${user?.id}&username=${username}`
+        );
+        // Optionally, handle successful username set
+        console.log("Username successfully set!");
+        router.push("/dashboard");
+      } else {
+        setUsername("");
+        setError(`Sorry, ${username} is not available`);
+      }
+    } catch (error) {
+      console.error("Error:", error);
+      setError("An error occurred. Please try again.");
+    }
+  };
+
+  return (
+    <>
+      <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">
+            <input
+              type="text"
+              name="username"
+              value={username}
+              onChange={handleUsernameChange}
+              placeholder="ex: John123"
+              className="bg-gray-900 rounded-full w-96 my-2"
+            />
+          </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>
+    </>
+  );
+}