From 7deead104d6f179f175b441e8ef7f44301386807 Mon Sep 17 00:00:00 2001 From: Cheslav Zhuravsky Date: Thu, 30 May 2024 10:00:14 +0700 Subject: [PATCH] updates --- front/index.html | 6 +- front/public/logo.png | Bin 0 -> 369 bytes front/src/components/common/Header.tsx | 12 +-- .../components/main/Menu/JoinCommunity.tsx | 40 ++++++--- front/src/hooks/useCyberPassport.tsx | 9 ++ front/src/pages/Main/Main.module.scss | 15 ++++ front/src/pages/Main/Main.tsx | 80 ++++++++++++------ front/src/pages/Menu/Menu.tsx | 9 +- front/src/styles/globalStyles.ts | 2 +- 9 files changed, 123 insertions(+), 50 deletions(-) create mode 100644 front/public/logo.png create mode 100644 front/src/pages/Main/Main.module.scss diff --git a/front/index.html b/front/index.html index 2ed23cb3..755d4931 100644 --- a/front/index.html +++ b/front/index.html @@ -2,7 +2,7 @@ - --> - + VL-k7 zB|(0{47)qtDTNx}o#}EWO>kAY_aVCspwvT87srr@!^sH}tcw#wdYS?axZDmhFm7Av zWzC)Nymy%<*ia{e#4fa9jnysr_a8`ipC z`tbiTiwgI@zopr01^S6{r~^~ literal 0 HcmV?d00001 diff --git a/front/src/components/common/Header.tsx b/front/src/components/common/Header.tsx index b0aa861a..469580b8 100644 --- a/front/src/components/common/Header.tsx +++ b/front/src/components/common/Header.tsx @@ -38,7 +38,7 @@ const Header = (props: HeaderProps) => { navigate("/")}>{text} - {pathname === "/" && ( + {/* {pathname === "/" && ( {connected ? ( { /> )} - )} + )} */} @@ -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 index 379e4495..45e401fd 100644 --- a/front/src/components/main/Menu/JoinCommunity.tsx +++ b/front/src/components/main/Menu/JoinCommunity.tsx @@ -12,7 +12,7 @@ const JoinCommunity = () => { return ( - Join in our community + Join our cyber πŸ‘Ύ community handleNewTap("https://twitter.com/cyber_devs")} @@ -41,6 +41,15 @@ const JoinCommunity = () => { moreArrow_disabled + handleNewTap("https://cyb.ai/social")} + > +
+ {/* discord_disabled */} + More contacts +
+ moreArrow_disabled + ); @@ -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 index 64cf40a5..43a2b9b8 100644 --- 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 new file mode 100644 index 00000000..1f9b1f34 --- /dev/null +++ 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 index 06b0bafc..f32ef0f2 100644 --- 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 = () => { ); - 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)} */} - {passportProof && ( + {/* {passportProof && (
{
{JSON.stringify(passportProof)}
- )} + )} */} ); } else if (step === Steps.ENTER_MESSAGE) { @@ -212,14 +215,37 @@ const Main = () => {
- - - {centerContent} +
+ {centerContent} +
{passport && ( - }> + + moon passport + + + } + /> + } + >
{ }; }, []); return ( - + + {/* */}
- + {/* */} + ); }; @@ -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 index 8b4bf0e0..547f634f 100644 --- 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);