From 0de99692a44e2cabfe6ef8665695c0ab514ff974 Mon Sep 17 00:00:00 2001
From: Cheslav Zhuravsky <happylolonly@gmail.com>
Date: Thu, 30 May 2024 12:13:30 +0700
Subject: [PATCH] updates

---
 front/src/components/common/Header.tsx | 12 +++--
 front/src/hooks/useCyberPassport.tsx   |  9 ++--
 front/src/pages/Main/Main.tsx          | 69 +++++++++++++++++++-------
 3 files changed, 63 insertions(+), 27 deletions(-)

diff --git a/front/src/components/common/Header.tsx b/front/src/components/common/Header.tsx
index 496d1eda..6ee71fb6 100644
--- a/front/src/components/common/Header.tsx
+++ b/front/src/components/common/Header.tsx
@@ -38,7 +38,9 @@ const Header = (props: HeaderProps) => {
     <>
       {isOpenModal && <Modal handleModalState={handleModalState} />}
       <HeaderWrapper $isOpen={isOpen} $backgroundType={backgroundType}>
-        <HeaderTitle onClick={() => navigate("/")}>{text}</HeaderTitle>
+        <HeaderTitle onClick={() => navigate("/")}>
+          cyber <br /> ton
+        </HeaderTitle>
 
         <HeaderRightBox>
           {address && trimString(address, 6, 4)}
@@ -99,9 +101,9 @@ const DisconnectButton = styled.button<{ $connect: boolean }>`
   justify-content: center;
   align-items: center;
 
-  width: 4.4rem;
-  height: 4.4rem;
-  padding: 1.2rem;
+  width: 2.4rem;
+  height: 2.4rem;
+  padding: 0.8rem;
 
   color: #36d6ae;
   border: none;
@@ -112,7 +114,7 @@ const DisconnectButton = styled.button<{ $connect: boolean }>`
       ? `#2F3038`
       : `linear-gradient(160deg, #f3f6fc 11.73%, #e6e7f7 98.61%)`}; */
 
-  cursor: pointer;
+  /* cursor: pointer; */
 `;
 
 const MenuButton = styled.button<{ $isOpen: boolean }>`
diff --git a/front/src/hooks/useCyberPassport.tsx b/front/src/hooks/useCyberPassport.tsx
index 43a2b9b8..6ec77062 100644
--- a/front/src/hooks/useCyberPassport.tsx
+++ b/front/src/hooks/useCyberPassport.tsx
@@ -4,6 +4,7 @@ import { toAscii, toBase64 } from "@cosmjs/encoding";
 
 import axios from "axios";
 import { useQuery } from "@tanstack/react-query";
+import { useQueryClientPussy } from "@/queryClientPussy";
 
 export async function getPassport(query) {
   const response = await axios.get(
@@ -14,21 +15,23 @@ export async function getPassport(query) {
   return response.data.data;
 }
 
-function useCyberPassport({ nickname }) {
+function useCyberPassport({ nickname, publicKey }) {
   const [data, setData] = useState();
 
   //  const data =  useQuery("passport", fetchData, {
   //     enabled: false,
   //   });
 
+  console.log(nickname);
+
   useEffect(() => {
     setData(null);
   }, [nickname]);
 
-  function fetchData() {
+  function fetchData(n) {
     const query = {
       passport_by_nickname: {
-        nickname: nickname,
+        nickname: n || nickname,
       },
     };
 
diff --git a/front/src/pages/Main/Main.tsx b/front/src/pages/Main/Main.tsx
index 0fa2e83d..307c9fd0 100644
--- a/front/src/pages/Main/Main.tsx
+++ b/front/src/pages/Main/Main.tsx
@@ -20,6 +20,8 @@ import { sendProof } from "@/api/cyber";
 import { trimString } from "@/utils/trimString";
 import styles from "./Main.module.scss";
 import Posts from "./Posts/Posts";
+import { useQueryClientPussy } from "@/queryClientPussy";
+import { useQuery } from "@tanstack/react-query";
 
 const tele = (window as any).Telegram.WebApp;
 
@@ -31,8 +33,6 @@ enum Steps {
   TX,
 }
 
-const LS_KEY = "lastPassport";
-
 const Main = () => {
   const { address, tonConnectUI, wallet, connected } = useTonConnect();
 
@@ -44,10 +44,28 @@ const Main = () => {
 
   const [message, setMessage] = useState("");
 
+  const client = useQueryClientPussy();
+
+  const publicKey = wallet?.account?.publicKey;
+  const contractQuery = useQuery({
+    queryKey: ["passport", publicKey],
+    // refetchInterval: 10 * 1000,
+    queryFn: async () => {
+      return client!.queryContractSmart(
+        "pussy15s8v0pa5g60uhvmjpfj73p6nem6t597e8qnkgpsuck5tje3se7ps3ll7kl",
+        {
+          get_nickname: {
+            pubkey: publicKey,
+          },
+        }
+      );
+    },
+    enabled: !!publicKey,
+  });
+
   const [txHash, setTxHash] = useState();
 
-  const lastPassport = localStorage.getItem(LS_KEY) || "";
-  const [nickname, setNickname] = useState(lastPassport);
+  const [nickname, setNickname] = useState();
 
   console.log(wallet);
   console.log("PK", wallet?.account?.publicKey);
@@ -115,30 +133,43 @@ const Main = () => {
     nickname,
   });
 
-  const passport = dat2 as Citizenship;
-
   useEffect(() => {
-    if (lastPassport) {
-      if (!(passport && passport.extension.nickname === lastPassport)) {
-        fetchData();
-      }
-
-      if (passport) {
-        setStep(Steps.ENTER_MESSAGE);
+    if (contractQuery.data) {
+      const nick = contractQuery.data;
+      if (nick !== nickname) {
+        setNickname(nick);
+
+        setTimeout(() => {
+          fetchData(nick);
+        }, 1000);
       }
 
-      return;
+      setStep(Steps.ENTER_MESSAGE);
     }
+  }, [contractQuery.data, nickname, fetchData]);
 
-    if (passport) {
-      setStep(Steps.ADD_PASSPORT);
-    }
-  }, [lastPassport, passport]);
+  const passport = dat2 as Citizenship;
+
+  console.log(passport);
+
+  // useEffect(() => {
+  //   if (lastPassport) {
+
+  //     if (passport) {
+  //       setStep(Steps.ENTER_MESSAGE);
+  //     }
+
+  //     return;
+  //   }
+
+  //   if (passport) {
+  //     setStep(Steps.ADD_PASSPORT);
+  //   }
+  // }, [lastPassport, passport]);
 
   useEffect(() => {
     if (passportProof) {
       setStep(Steps.ENTER_MESSAGE);
-      localStorage.setItem(LS_KEY, passport.extension.nickname);
     }
   }, [passportProof, passport]);