webapp: revert old petra integration, fix signing, fix buttin display…

… logics
NetSepio · Nov 6, 2023 · 7d0d885 · 7d0d885
1 parent a1ce4ed
commit 7d0d885
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 65 deletions.
diff --git a/webapp/src/components/Header.tsx b/webapp/src/components/Header.tsx
@@ -4,7 +4,6 @@ import { AuthContext } from "../context/AuthContext";
 import { useAccount, useSignMessage, useNetwork } from "wagmi";
 import { getChallengeId, getToken } from "../modules/api";
 import { useWallet } from "@aptos-labs/wallet-adapter-react";
-import nacl from 'tweetnacl';
 
 const Header = () => {
   const navigate = useNavigate();
@@ -14,8 +13,6 @@ const Header = () => {
   const [challengeId, setChallengeId] = useState<string>("");
   const [signature, setSignature] = useState<string | undefined>();
   const { signMessageAsync } = useSignMessage();
-  const [profileId, setProfileId] = useState<string | null>(null);
-  const [userWallet, setUserWallet] = useState<string | null>(null);
 
   const {
     connect,
@@ -45,19 +42,26 @@ const Header = () => {
     let timeoutId: string | number | NodeJS.Timeout | null = null;
 
     const getSignMessage = async () => {
-      if (connected == false) {
+      if (localStorage.getItem("token") === "") {
         console.log("clearing localstorage")
         if (timeoutId !== null) {
           clearTimeout(timeoutId);
         }
-
+        if (account?.address){
+          const response = await getChallengeId(account?.address);
+          setMessage(response.data.eula);
+          setChallengeId(response.data.challangeId);
+          if (response.data.isAuthorized == true) {
+            authContext?.setIsAuthorized(true);
+          } else {
+            authContext?.setIsAuthorized(false);
+          }
+        }
         timeoutId = setTimeout(() => {
           signOut();
         }, 500);
-      } else if (!authContext?.isSignedIn) {
-        if (timeoutId !== null) {
-          clearTimeout(timeoutId);
-        }
+      } else {
+        wallets[0].connect()
       }
     };
 
@@ -70,54 +74,6 @@ const Header = () => {
     };
   }, [authContext?.isSignedIn, account?.address, connected]);
 
-  const getAptosWallet = () => {
-    if ('aptos' in window) {
-      return (window as any).aptos;
-    } else {
-      window.open('https://petra.app/', '_blank');
-    }
-  }
-  const connectWallet = async () => {
-    const wallet = getAptosWallet();
-    try {
-      const response = await wallet.connect();
-
-      const account = await wallet.account();
-      console.log("account",account)
-
-      const challangeIdResponse = await getChallengeId(account?.address);
-      if (challangeIdResponse.data.isAuthorized == true) {
-        authContext?.setIsAuthorized(true);
-      } else {
-        authContext?.setIsAuthorized(false);
-      }
-
-
-      const message = challangeIdResponse.data.eula;
-      const nonce = challangeIdResponse.data.challangeId;
-      const publicKey = account.publicKey;
-
-      const { signature, fullMessage } = await wallet.signMessage({
-        message,
-        nonce
-      });
-      console.log("sign", signature, "full message", fullMessage);
-
-      const getTokenResponse = await getToken(`0x${signature}`, nonce, publicKey);
-      if (getTokenResponse.data.token) {
-        sessionStorage.setItem("token", getTokenResponse.data.token);
-        localStorage.setItem("token", getTokenResponse.data.token);
-        authContext?.setIsSignedIn(true);
-      }
-
-      setProfileId("");
-      setUserWallet("");
-
-    } catch (err) {
-      console.log(err);
-    }
-  }
-
   const signOut = () => {
     sessionStorage.removeItem("token");
     localStorage.removeItem("token");
@@ -145,7 +101,7 @@ const Header = () => {
       const signres = await petraSignMesssage(payload);
       console.log("response", signres);
 
-      const response = await getToken(signres?.signature, challengeId, account?.publicKey);
+      const response = await getToken(`0x${signres?.signature}`, challengeId, account?.publicKey);
       if (response.data.token) {
         sessionStorage.setItem("token", response.data.token);
         localStorage.setItem("token", response.data.token);
@@ -179,18 +135,18 @@ const Header = () => {
                     </div>
                   </div>
               </li>
-              {(!account?.address || authContext?.isSignedIn) && (
+              {!(connected) && (
                 <li>
                   <button
-                    onClick={() => connectWallet()}
+                    onClick={() => connectPetra()}
                     className="border text-blue-200 border-blue hover:bg-blue-300 hover:border-black hover:text-black font-bold transition focus:ring focus:ring-blue-500 focus:ring-opacity-80"
                   >
                     <img src={`${wallets[0].icon}`} width={20}></img> Connect{" "}
                     {wallets[0].name}
                   </button>
                 </li>
               )}
-              {/* {!(connected && authContext?.isSignedIn) && (
+              {(connected) && !(authContext?.isSignedIn) && (
                   <li>
                     <button
                       onClick={petraSign}
@@ -199,14 +155,14 @@ const Header = () => {
                       Sign In
                     </button>
                   </li>
-                )} */}
-               {(authContext?.isSignedIn) && (
+                )}
+               {connected && (
                   <li>
                     <div
 
                       className="border text-blue-200 border-blue hover:bg-blue-300 hover:border-black hover:text-black font-bold transition focus:ring focus:ring-blue-500 focus:ring-opacity-80"
                     >
-                      Details
+                       Account: {account?.address.slice(0,8)}...
                     </div>
                   </li>
                 )}

diff --git a/webapp/src/pages/Server.tsx b/webapp/src/pages/Server.tsx
@@ -12,6 +12,7 @@ import NotSigned from "../components/NotSigned";
 import { AuthContext } from "../context/AuthContext";
 import NotAuthorized from "../components/NotAuthorized";
 import CustomTable from "../components/Server/CustomTable";
+import { useWallet } from "@aptos-labs/wallet-adapter-react";
 
 const NotConnected: React.FC = () => {
   return (
@@ -34,6 +35,18 @@ const ServerPage: React.FC = () => {
   const { address, isConnecting, isDisconnected } = useAccount();
   const authContext = useContext(AuthContext);
 
+  const {
+    connect,
+    wallets,
+    disconnect,
+    wallet,
+    account,
+    network,
+    connected,
+    signMessage: petraSignMesssage,
+    signMessageAndVerify,
+  } = useWallet();
+
   const handleDownload = async () => {
     try {
       const config = serverConfig;
@@ -60,7 +73,7 @@ const ServerPage: React.FC = () => {
     fetchData();
   }, []);
 
-  if (!address || isDisconnected) {
+  if (!connected) {
     return <NotConnected />;
   }