updates

cybercongress · May 30, 2024 · 7deead1 · 7deead1
1 parent b54ef03
commit 7deead1
Show file tree

Hide file tree

Showing 9 changed files with 123 additions and 50 deletions.
diff --git a/front/index.html b/front/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <!-- Google Tag Manager -->
-    <script>
+    <!-- <script>
       (function (w, d, s, l, i) {
         w[l] = w[l] || [];
         w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
@@ -13,10 +13,10 @@
         j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
         f.parentNode.insertBefore(j, f);
       })(window, document, "script", "dataLayer", "GTM-5Q7QQTKF");
-    </script>
+    </script> -->
     <!-- End Google Tag Manager -->
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/png" href="/logo.png" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1.0,maximum-scale=1, user-scalable=no"

diff --git a/front/public/logo.png b/front/public/logo.png
diff --git a/front/src/components/common/Header.tsx b/front/src/components/common/Header.tsx
@@ -38,7 +38,7 @@ const Header = (props: HeaderProps) => {
       <HeaderWrapper $isOpen={isOpen} $backgroundType={backgroundType}>
         <HeaderTitle onClick={() => navigate("/")}>{text}</HeaderTitle>
         <HeaderRightBox>
-          {pathname === "/" && (
+          {/* {pathname === "/" && (
             <DisconnectButton $connect={connected}>
               {connected ? (
                 <img
@@ -54,7 +54,7 @@ const Header = (props: HeaderProps) => {
                 />
               )}
             </DisconnectButton>
-          )}
+          )} */}
           <MenuButton onClick={handleRouter} $isOpen={isOpen}>
             <span></span>
             <span></span>
@@ -118,10 +118,11 @@ const MenuButton = styled.button<{ $isOpen: boolean }>`
 
   border: none;
   border-radius: 1.8rem;
-  background: linear-gradient(160deg, #f3f6fc 11.73%, #e6e7f7 98.61%);
+  /* background: linear-gradient(160deg, #f3f6fc 11.73%, #e6e7f7 98.61%); */
+  background: transparent;
 
   span {
-    background-color: #333;
+    background-color: var(--primary-color);
     display: block;
     position: absolute;
     height: 0.2rem;
@@ -159,7 +160,8 @@ const HeaderTitle = styled.div`
   gap: 0.6rem;
   color: #36d6ae;
   /* color: #2c3542; */
-  ${({ theme }) => theme.fonts.Nexton_Title_Medium};
+  font-size: 40px;
+  /* ${({ theme }) => theme.fonts.Nexton_Title_Medium}; */
 
   cursor: pointer;
 `;
diff --git a/front/src/components/main/Menu/JoinCommunity.tsx b/front/src/components/main/Menu/JoinCommunity.tsx
@@ -12,7 +12,7 @@ const JoinCommunity = () => {
 
   return (
     <JoinCommunityWrapper>
-      <JoinCommunityTitle>Join in our community</JoinCommunityTitle>
+      <JoinCommunityTitle>Join our cyber 👾 community</JoinCommunityTitle>
       <JoinCommunityButtonList>
         <JoinCommunityButton
           onClick={() => handleNewTap("https://twitter.com/cyber_devs")}
@@ -41,6 +41,15 @@ const JoinCommunity = () => {
           </div>
           <img src={IcNftMoreArrow} alt="moreArrow_disabled" width={10} />
         </JoinCommunityButton>
+        <JoinCommunityButton
+          onClick={() => handleNewTap("https://cyb.ai/social")}
+        >
+          <div>
+            {/* <img src={IcMenuDiscord} alt="discord_disabled" /> */}
+            More contacts
+          </div>
+          <img src={IcNftMoreArrow} alt="moreArrow_disabled" width={10} />
+        </JoinCommunityButton>
       </JoinCommunityButtonList>
     </JoinCommunityWrapper>
   );
@@ -50,7 +59,8 @@ export default JoinCommunity;
 
 const JoinCommunityWrapper = styled.div`
   width: 100%;
-  padding: 0 1.5rem;
+  background-color: black;
+  /* padding: 0 1.5rem; */
 `;
 
 const JoinCommunityTitle = styled.div`
@@ -65,8 +75,8 @@ const JoinCommunityTitle = styled.div`
 const JoinCommunityButtonList = styled.div`
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  align-items: center;
+  justify-content: flex-start;
+  align-items: flex-start;
   gap: 0.6rem;
 
   width: 100%;
@@ -75,15 +85,21 @@ const JoinCommunityButtonList = styled.div`
 
 const JoinCommunityButton = styled.button<{ $inactive?: boolean }>`
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
   align-items: center;
 
-  width: 100%;
+  /* width: 100%; */
   padding: 1.7rem 2rem;
-
-  border: ${({ $inactive }) => ($inactive ? "0.1rem solid #E1E4E6" : "0.1rem solid #d1d1d6")};
+  border: none;
+  /* 
+  border: ${({ $inactive }) =>
+    $inactive ? "0.1rem solid #E1E4E6" : "0.1rem solid #d1d1d6"}; */
   border-radius: 2rem;
-  background-color: #f2f2f7;
+  background-color: transparent;
+
+  &:hover {
+    opacity: 0.8;
+  }
 
   cursor: ${({ $inactive }) => ($inactive ? "default" : "pointer")};
 
@@ -93,7 +109,9 @@ const JoinCommunityButton = styled.button<{ $inactive?: boolean }>`
     align-items: center;
     gap: 2.2rem;
 
-    color: ${({ $inactive }) => ($inactive ? "#E1E4E6" : "#2f3038")};
-    ${({ theme }) => theme.fonts.Nexton_Body_Text_Medium};
+    /* color: ${({ $inactive }) => ($inactive ? "#E1E4E6" : "#2f3038")}; */
+    color: #36d6ae;
+    padding-right: 1rem;
+    /* ${({ theme }) => theme.fonts.Nexton_Body_Text_Medium}; */
   }
 `;
diff --git a/front/src/hooks/useCyberPassport.tsx b/front/src/hooks/useCyberPassport.tsx
@@ -3,6 +3,7 @@ import React, { useEffect, useState } from "react";
 import { toAscii, toBase64 } from "@cosmjs/encoding";
 
 import axios from "axios";
+import { useQuery } from "@tanstack/react-query";
 
 export async function getPassport(query) {
   const response = await axios.get(
@@ -16,6 +17,14 @@ export async function getPassport(query) {
 function useCyberPassport({ nickname }) {
   const [data, setData] = useState();
 
+  //  const data =  useQuery("passport", fetchData, {
+  //     enabled: false,
+  //   });
+
+  useEffect(() => {
+    setData(null);
+  }, [nickname]);
+
   function fetchData() {
     const query = {
       passport_by_nickname: {

diff --git a/front/src/pages/Main/Main.module.scss b/front/src/pages/Main/Main.module.scss
@@ -0,0 +1,15 @@
+.passportHeader {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.resetBtn {
+  color: var(--primary-color);
+  background-color: transparent;
+  border: none;
+
+  &:hover {
+    opacity: 0.8;
+  }
+}
diff --git a/front/src/pages/Main/Main.tsx b/front/src/pages/Main/Main.tsx
@@ -18,6 +18,7 @@ import Passport from "./Passport/Passport";
 import ActionBar from "@/components/ActionBar/ActionBar";
 import { sendProof } from "@/api/cyber";
 import { trimString } from "@/utils/trimString";
+import styles from "./Main.module.scss";
 
 const tele = (window as any).Telegram.WebApp;
 
@@ -28,6 +29,8 @@ enum Steps {
   ENTER_MESSAGE,
 }
 
+const LS_KEY = "lastPassport";
+
 const Main = () => {
   const { address, tonConnectUI, wallet, connected } = useTonConnect();
 
@@ -38,7 +41,8 @@ const Main = () => {
 
   const [message, setMessage] = useState("");
 
-  const [nickname, setNickname] = useState("congress");
+  const lastPassport = localStorage.getItem(LS_KEY) || "";
+  const [nickname, setNickname] = useState(lastPassport);
 
   console.log(wallet);
   console.log("PK", wallet?.account?.publicKey);
@@ -105,16 +109,29 @@ const Main = () => {
   const passport = dat2 as Citizenship;
 
   useEffect(() => {
+    if (lastPassport) {
+      if (!(passport && passport.extension.nickname === lastPassport)) {
+        fetchData();
+      }
+
+      if (passport) {
+        setStep(Steps.ENTER_MESSAGE);
+      }
+
+      return;
+    }
+
     if (passport) {
       setStep(Steps.ADD_PASSPORT);
     }
-  }, [passport]);
+  }, [lastPassport, passport]);
 
   useEffect(() => {
     if (passportProof) {
       setStep(Steps.ENTER_MESSAGE);
+      localStorage.setItem(LS_KEY, passport.extension.nickname);
     }
-  }, [passportProof]);
+  }, [passportProof, passport]);
 
   useEffect(() => {
     if (tele) {
@@ -132,21 +149,7 @@ const Main = () => {
       </Button>
     );
 
-    centerContent = (
-      <>
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus
-        doloremque quos cum, itaque soluta suscipit totam minima, nemo impedit
-        provident iure deserunt ducimus fugiat velit ex mollitia repellat
-        tempora. Illo qui praesentium ducimus consequuntur nemo nihil! Ex ipsum
-        natus vitae vel maxime impedit fuga tempore architecto quae minima omnis
-        eius possimus quis quos tempora repudiandae veniam, optio provident
-        nesciunt dolore iusto eligendi. Sunt, similique? Ullam atque repellat
-        itaque vel illum! Totam corporis aliquam dicta expedita doloribus qui id
-        nisi quisquam tempore perferendis, praesentium alias quia dignissimos
-        facilis rem sequi, quae ratione consequuntur itaque. Itaque id illum
-        quisquam, reprehenderit harum consequatur.
-      </>
-    );
+    centerContent = <>hi to user, what is passport, what to do here</>;
   } else if (step === Steps.ENTER_PASSPORT) {
     actionBarContent = (
       <>
@@ -170,9 +173,9 @@ const Main = () => {
   } else if (step === Steps.ADD_PASSPORT) {
     actionBarContent = (
       <>
-        your passport is {trimString(passport?.owner)}
+        {/* your passport is {trimString(passport?.owner, 6, 6)} */}
         <TonWallet nickname={nickname} type="passport" />
-        {passportProof && (
+        {/* {passportProof && (
           <div
             style={{
               fontSize: 14,
@@ -181,7 +184,7 @@ const Main = () => {
             <br />
             {JSON.stringify(passportProof)}
           </div>
-        )}
+        )} */}
       </>
     );
   } else if (step === Steps.ENTER_MESSAGE) {
@@ -212,14 +215,37 @@ const Main = () => {
         <Stars />
         <Header isOpen={false} text="CYBER-TON" backgroundType={false} />
 
-        <Button onClick={() => setStep(Steps.ENTER_MESSAGE)}>
-          To cyberlink step
-        </Button>
-
-        {centerContent}
+        <div
+          style={{
+            zIndex: 1,
+          }}
+        >
+          {centerContent}
+        </div>
 
         {passport && (
-          <Display title={<DisplayTitle title="moon passport" />}>
+          <Display
+            title={
+              <DisplayTitle
+                title={
+                  <div className={styles.passportHeader}>
+                    moon passport
+                    <button
+                      className={styles.resetBtn}
+                      onClick={() => {
+                        setStep(Steps.INITIAL);
+                        setNickname("");
+                        localStorage.removeItem(LS_KEY);
+                      }}
+                      title="reset passport"
+                    >
+                      reset passport
+                    </button>
+                  </div>
+                }
+              />
+            }
+          >
             <div
               style={{
                 fontSize: 14,

diff --git a/front/src/pages/Menu/Menu.tsx b/front/src/pages/Menu/Menu.tsx
@@ -4,6 +4,7 @@ import { styled } from "styled-components";
 
 import Header from "@/components/common/Header";
 import JoinCommunity from "@/components/main/Menu/JoinCommunity";
+import MainContainer from "@/components/MainContainer";
 
 const tele = (window as any).Telegram.WebApp;
 
@@ -24,10 +25,12 @@ const Menu = () => {
     };
   }, []);
   return (
-    <MenuWrapper>
+    <MainContainer>
+      {/* <MenuWrapper> */}
       <Header isOpen={true} text="CYBER-TON" backgroundType={true} />
       <JoinCommunity />
-    </MenuWrapper>
+      {/* </MenuWrapper> */}
+    </MainContainer>
   );
 };
 
@@ -38,5 +41,5 @@ const MenuWrapper = styled.div`
   height: auto;
   min-height: 100%;
 
-  background-color: #f2f2f7;
+  background-color: black;
 `;
diff --git a/front/src/styles/globalStyles.ts b/front/src/styles/globalStyles.ts
@@ -154,7 +154,7 @@ ${reset}
     -ms-overflow-style: none; /* 인터넷 익스플로러 */
     scrollbar-width: none; /* 파이어폭스 */
 
-    background-color: transparent;
+    background-color: black;
 
     -webkit-tap-highlight-color: rgba(0,0,0,0);