added real ton proof

fixed timeout on splash screen

src/pages/root/steps/welcome-step/index.tsx

@@ -12,43 +12,41 @@ export const WelcomeStep = ({ nextStep }: WelcomeStepProps) => {
   const [tonConnectUI] = useTonConnectUI();
   const [isLoaded, setLoaded] = useState(false);
 
-console.log('💩💩💩 enter WelcomeStep');
+  console.log("💩💩💩 enter WelcomeStep");
 
   const auth = useAuth();
 
-  console.log('💩💩💩 after useAuth');
+  console.log("💩💩💩 after useAuth");
 
   const handleNextClick = async () => {
     if (tonConnectUI.connected) {
-      const res = await auth.mutateAsync();
+      await auth.mutateAsync();
-      sessionStorage.setItem("auth_v1_token", res.data.auth_v1_token);
-
       nextStep();
     } else {
       await tonConnectUI.openModal();
-
+      await auth.mutateAsync();
-      const res = await auth.mutateAsync();
-      sessionStorage.setItem("auth_v1_token", res.data.auth_v1_token);
     }
   };
 
   useEffect(() => {
-    setTimeout(async () => {
+    const first = setTimeout(async () => {
       console.log("💩💩💩 call auth");
-      const res = await auth.mutateAsync();
+      await auth.mutateAsync();
-      sessionStorage.setItem("auth_v1_token", res.data.auth_v1_token);
     }, 1000);
 
-    setTimeout(() => {
+    const second = setTimeout(() => {
       setLoaded(true);
-    }, 4000);
-  }, []);
 
-  useEffect(() => {
+      if (tonConnectUI.connected) {
-    if (tonConnectUI.connected) {
+        nextStep();
-      nextStep();
+      }
-    }
+    }, 4000);
-  }, [nextStep, tonConnectUI.connected]);
+
+    return () => {
+      clearTimeout(first);
+      clearTimeout(second);
+    };
+  }, [tonConnectUI.connected]);
 
   if (!isLoaded) {
     return (

src/shared/services/auth/index.ts

@@ -1,54 +1,92 @@
+import { useRef } from "react";
+import { useTonConnectUI, useTonWallet } from "@tonconnect/ui-react";
 import { useMutation } from "react-query";
+import { request } from "~/shared/libs";
 import { useWebApp } from "@vkruglikov/react-telegram-web-app";
 
-import { request } from "~/shared/libs";
+const sessionStorageKey = "auth_v1_token";
+const payloadTTLMS = 1000 * 60 * 20;
 
 export const useAuth = () => {
   const WebApp = useWebApp();
-  console.log("👀👀👀 webapp: ", WebApp);
+  const wallet = useTonWallet();
+  const [tonConnectUI] = useTonConnectUI();
+  const interval = useRef<ReturnType<typeof setInterval> | undefined>();
 
   return useMutation(["auth"], async () => {
-    console.log("👀👀👀 in mutation - auth");
+    clearInterval(interval.current);
 
-    const authV1Token = sessionStorage.getItem("auth_v1_token");
+    if (!wallet) {
+      sessionStorage.removeItem(sessionStorageKey);
 
-    let tonProof;
+      const refreshPayload = async () => {
-    if (authV1Token) {
+        tonConnectUI.setConnectRequestParameters({ state: "loading" });
-      try {
+
-        tonProof = await WebApp.initDataUnsafe.signData({
+        const value = await request
-          data: authV1Token,
+          .post<{
-        });
+            auth_v1_token: string;
-        console.log("👀👀👀 tonProof: ", tonProof);
+          }>("/auth.twa", {
-      } catch (error: any) {
+            twa_data: WebApp.initData,
-        console.error("👀👀👀 Error signing data: ", error);
+          })
-      }
+          .catch((error: any) => {
+            console.error("Error in authentication request: ", error);
+            throw new Error("Failed to authenticate.");
+          });
+        if (!value) {
+          tonConnectUI.setConnectRequestParameters(null);
+        } else {
+          tonConnectUI.setConnectRequestParameters({
+            state: "ready",
+            value: {
+              tonProof: value?.data?.auth_v1_token,
+            },
+          });
+        }
+      };
+
+      void refreshPayload();
+      setInterval(refreshPayload, payloadTTLMS);
+
+      return;
     }
 
-    return request.post<{
+    if (
-      connected_wallet: null | {
+      wallet.connectItems?.tonProof &&
-        version: string;
+      !("error" in wallet.connectItems.tonProof)
-        address: string;
+    ) {
-        ton_balance: string;
+      const tonProof = wallet.connectItems.tonProof.proof;
-      };
+
-      auth_v1_token: string;
+      console.log("DEBUG TON-PROOF", tonProof);
-    }>("/auth.twa", {
+
-      twa_data: WebApp.initData,
+      request
-      ton_proof: tonProof
+        .post<{
-        ? {
+          connected_wallet: null | {
-            account: {
+            version: string;
-              address: tonProof.address,
+            address: string;
-              // O.: add more as needed
+            ton_balance: string;
-            },
+          };
-            ton_proof: {
+          auth_v1_token: string;
-              signature: tonProof.signature,
+        }>("/auth.twa", {
-              payload: tonProof.payload,
+          twa_data: WebApp.initData,
-              // O.: add more as needed
+          ton_proof: {
-            },
+            account: wallet.account,
+            ton_proof: tonProof,
+          },
+        })
+        .then((res) => {
+          if (res?.data?.auth_v1_token) {
+            sessionStorage.setItem(sessionStorageKey, res?.data?.auth_v1_token);
+          } else {
+            alert("Please try another wallet");
+            tonConnectUI.disconnect();
           }
-        : undefined,
+        })
-    }).catch((error: any) => {
+        .catch((error: any) => {
-      console.error("Error in authentication request: ", error);
+          console.error("Error in authentication request: ", error);
-      throw new Error("Failed to authenticate.");
+          throw new Error("Failed to authenticate.");
-    });
+        });
+    } else {
+      void tonConnectUI.disconnect();
+    }
   });
 };