updats

cybercongress · May 30, 2024 · 99c60ea · 99c60ea
1 parent 93d7c26
commit 99c60ea
Show file tree

Hide file tree

Showing 11 changed files with 185 additions and 38 deletions.
diff --git a/front/public/logo-black.png b/front/public/logo-black.png
diff --git a/front/public/tonconnect-manifest.json b/front/public/tonconnect-manifest.json
@@ -1,5 +1,5 @@
 {
   "url": "https://ton-wasm-cyber-hackathon.netlify.app/",
   "name": "Cyber",
-  "iconUrl": "https://ton-wasm-cyber-hackathon.netlify.app/logo.png"
+  "iconUrl": "https://ton-wasm-cyber-hackathon.netlify.app/logo-black.png"
 }
diff --git a/front/src/App.tsx b/front/src/App.tsx
@@ -6,6 +6,7 @@ import { network } from "@/hooks/contract/useTonClient";
 import GlobalStyle from "@/styles/globalStyles";
 import theme from "@/styles/theme";
 import QueryClientProvider2 from "./queryClient";
+import QueryClientProviderPussy from "./queryClientPussy";
 import "./styles/index.scss";
 
 import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
@@ -26,10 +27,12 @@ const App = () => {
     <ThemeProvider theme={theme}>
       <QueryClientProvider client={queryClient}>
         <QueryClientProvider2>
-          <RecoilRoot>
-            <GlobalStyle />
-            <Router />
-          </RecoilRoot>
+          <QueryClientProviderPussy>
+            <RecoilRoot>
+              <GlobalStyle />
+              <Router />
+            </RecoilRoot>
+          </QueryClientProviderPussy>
         </QueryClientProvider2>
       </QueryClientProvider>
     </ThemeProvider>

diff --git a/front/src/components/common/Header.tsx b/front/src/components/common/Header.tsx
@@ -6,6 +6,7 @@ import IcWalletConnect from "../../assets/icons/Landing/ic_landing_wallet.svg";
 import IcWalletDisconnect from "../../assets/icons/Landing/ic_landing_wallet_disconnect.svg";
 import useTonConnect from "../../hooks/contract/useTonConnect";
 import Modal from "../main/Modal/Modal";
+import { trimString } from "@/utils/trimString";
 
 interface HeaderProps {
   isOpen: boolean;
@@ -14,7 +15,7 @@ interface HeaderProps {
 }
 
 const Header = (props: HeaderProps) => {
-  const { connected, tonConnectUI } = useTonConnect();
+  const { connected, tonConnectUI, wallet } = useTonConnect();
   const { isOpen, text, backgroundType } = props;
   const [isOpenModal, setIsOpenModal] = useState(false);
   const navigate = useNavigate();
@@ -32,13 +33,16 @@ const Header = (props: HeaderProps) => {
     }
   };
 
+  const { address } = wallet?.account || {};
   return (
     <>
       {isOpenModal && <Modal handleModalState={handleModalState} />}
       <HeaderWrapper $isOpen={isOpen} $backgroundType={backgroundType}>
         <HeaderTitle onClick={() => navigate("/")}>{text}</HeaderTitle>
+
         <HeaderRightBox>
-          {/* {pathname === "/" && (
+          {address && trimString(address, 6, 4)}
+          {pathname === "/" && (
             <DisconnectButton $connect={connected}>
               {connected ? (
                 <img
@@ -54,7 +58,7 @@ const Header = (props: HeaderProps) => {
                 />
               )}
             </DisconnectButton>
-          )} */}
+          )}
           <MenuButton onClick={handleRouter} $isOpen={isOpen}>
             <span></span>
             <span></span>
@@ -99,12 +103,14 @@ const DisconnectButton = styled.button<{ $connect: boolean }>`
   height: 4.4rem;
   padding: 1.2rem;
 
+  color: #36d6ae;
   border: none;
   border-radius: 1.8rem;
-  background: ${({ $connect }) =>
+  background: transparent;
+  /* background: ${({ $connect }) =>
     $connect
       ? `#2F3038`
-      : `linear-gradient(160deg, #f3f6fc 11.73%, #e6e7f7 98.61%)`};
+      : `linear-gradient(160deg, #f3f6fc 11.73%, #e6e7f7 98.61%)`}; */
 
   cursor: pointer;
 `;

diff --git a/front/src/components/main/Modal/Modal.tsx b/front/src/components/main/Modal/Modal.tsx
@@ -2,6 +2,7 @@ import { styled } from "styled-components";
 
 import IcWalletDisconnect from "@/assets/icons/Landing/ic_landing_wallet_disconnect.svg";
 import ModalWrapper from "@/components/common/Modal/ModalWrapper";
+import Button from "../btnGrd";
 
 interface ModalProps {
   handleModalState: () => void;
@@ -27,12 +28,13 @@ const Modal = (props: ModalProps) => {
           <p>from CYBER-TON.</p>
         </ModalDesc>
         <ModalButtonWrapper>
-          <ModalButton type="yes" onClick={clearStorage}>
+          <Button type="yes" onClick={clearStorage}>
             Yes
-          </ModalButton>
-          <ModalButton type="no" onClick={handleModalState}>
+          </Button>
+
+          <Button type="no" onClick={handleModalState}>
             Not Now
-          </ModalButton>
+          </Button>
         </ModalButtonWrapper>
       </ModalWhiteBox>
     </ModalWrapper>

diff --git a/front/src/components/main/TonWallet.tsx b/front/src/components/main/TonWallet.tsx
@@ -30,6 +30,8 @@ const TonWallet = ({ nickname, message, type }) => {
     if (connected) {
       console.log(">>> Send message to bacend");
     } else {
+      tonConnectUI.disconnect();
+
       const d = toBase64(toAscii(data));
 
       tonConnectUI.setConnectRequestParameters({
@@ -53,7 +55,7 @@ const TonWallet = ({ nickname, message, type }) => {
     >
       <Button onClick={handleSwitchWalletFunction}>
         {/* <TonConnectCenterBox> */}
-        {isPassportType ? "Add passport" : "Cyberlink"}
+        {isPassportType ? "Link passport" : "Cyberlink"}
         {/* </TonConnectCenterBox> */}
       </Button>
       {/* <p

diff --git a/front/src/pages/Main/Main.module.scss b/front/src/pages/Main/Main.module.scss
@@ -13,3 +13,12 @@
     opacity: 0.8;
   }
 }
+
+.tx {
+  color: var(--primary-color);
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
diff --git a/front/src/pages/Main/Main.tsx b/front/src/pages/Main/Main.tsx
@@ -19,6 +19,7 @@ import ActionBar from "@/components/ActionBar/ActionBar";
 import { sendProof } from "@/api/cyber";
 import { trimString } from "@/utils/trimString";
 import styles from "./Main.module.scss";
+import Posts from "./Posts/Posts";
 
 const tele = (window as any).Telegram.WebApp;
 
@@ -27,6 +28,7 @@ enum Steps {
   ENTER_PASSPORT,
   ADD_PASSPORT,
   ENTER_MESSAGE,
+  TX,
 }
 
 const LS_KEY = "lastPassport";
@@ -41,6 +43,10 @@ const Main = () => {
 
   const [message, setMessage] = useState("");
 
+  const [txHash, setTxHash] = useState(
+    "0B95D616B429988F1E198F6AD99F9FA29E29A64C9E76E81992796F3F0E9D97B6"
+  );
+
   const lastPassport = localStorage.getItem(LS_KEY) || "";
   const [nickname, setNickname] = useState(lastPassport);
 
@@ -69,6 +75,9 @@ const Main = () => {
       const data = await sendProof(d);
 
       console.log(data.data);
+      const tx = data.data.tx.hash;
+
+      setTxHash(tx);
     } catch (error) {
       console.error(error);
     }
@@ -89,7 +98,6 @@ const Main = () => {
         ...tonProof,
         data: p,
       });
-      tonConnectUI.disconnect();
     }
 
     if (type === "add_post" && !textProof) {
@@ -98,7 +106,7 @@ const Main = () => {
         ...tonProof,
         data: p,
       });
-      tonConnectUI.disconnect();
+      setMessage("");
     }
   }
 
@@ -159,10 +167,6 @@ const Main = () => {
           onChange={(e) => {
             const value = e.target.value;
 
-            if (connected) {
-              tonConnectUI.disconnect();
-            }
-
             setNickname(value);
           }}
         />
@@ -188,23 +192,39 @@ const Main = () => {
       </>
     );
   } else if (step === Steps.ENTER_MESSAGE) {
-    actionBarContent = (
-      <>
-        <Input
-          color="pink"
-          placeholder="enter message..."
-          value={message}
-          onChange={(e) => {
-            if (connected) {
-              tonConnectUI.disconnect();
-            }
-
-            setMessage(e.target.value);
-          }}
-        />
-        <TonWallet message={message} nickname={nickname} type="text" />
-      </>
-    );
+    centerContent = <Posts publicKey={wallet?.account?.publicKey || ""} />;
+
+    if (txHash) {
+      actionBarContent = (
+        <>
+          <a
+            className={styles.tx}
+            target="_blank"
+            rel="noreferrer noopener"
+            href={"https://spacepussy.ai/network/bostrom/tx/" + txHash}
+          >
+            {" "}
+            {trimString(txHash, 6, 6)}
+          </a>
+
+          <Button onClick={() => setTxHash(null)}>Close</Button>
+        </>
+      );
+    } else {
+      actionBarContent = (
+        <>
+          <Input
+            color="pink"
+            placeholder="enter message..."
+            value={message}
+            onChange={(e) => {
+              setMessage(e.target.value);
+            }}
+          />
+          <TonWallet message={message} nickname={nickname} type="text" />
+        </>
+      );
+    }
   }
 
   console.log(step);

diff --git a/front/src/pages/Main/Posts/Posts.module.scss b/front/src/pages/Main/Posts/Posts.module.scss
@@ -0,0 +1,10 @@
+.wrapper {
+  display: grid;
+  gap: 20px 20px;
+
+  > div {
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: space-between;
+  }
+}
diff --git a/front/src/pages/Main/Posts/Posts.tsx b/front/src/pages/Main/Posts/Posts.tsx
@@ -0,0 +1,55 @@
+import Display from "@/components/common/containerGradient/Display/Display";
+import DisplayTitle from "@/components/common/containerGradient/DisplayTitle/DisplayTitle";
+import { useQueryClientPussy } from "@/queryClientPussy";
+import { useQuery } from "@tanstack/react-query";
+import React from "react";
+import styles from "./Posts.module.scss";
+
+function Posts({ publicKey }) {
+  const client = useQueryClientPussy();
+
+  const { data, isLoading, error } = useQuery({
+    queryKey: ["posts", publicKey],
+    refetchInterval: 10 * 1000,
+    queryFn: async () => {
+      return client!.queryContractSmart(
+        "pussy15s8v0pa5g60uhvmjpfj73p6nem6t597e8qnkgpsuck5tje3se7ps3ll7kl",
+        {
+          get_posts: {
+            pubkey: publicKey,
+          },
+        }
+      );
+    },
+  });
+
+  console.log(error);
+
+  return (
+    <Display title={<DisplayTitle title="Your posts" />}>
+      {isLoading && <div>Loading...</div>}
+
+      {!data && !isLoading && <div>No data</div>}
+
+      <div className={styles.wrapper}>
+        {data?.map((post: any) => (
+          <div key={post.timestamp}>
+            <div>
+              {Intl.DateTimeFormat("en-US", {
+                year: "numeric",
+                month: "long",
+                day: "2-digit",
+                hour: "2-digit",
+                minute: "2-digit",
+              }).format(post.timestamp * 1000)}
+            </div>
+
+            <p>{post.post}</p>
+          </div>
+        ))}
+      </div>
+    </Display>
+  );
+}
+
+export default Posts;
diff --git a/front/src/queryClientPussy.tsx b/front/src/queryClientPussy.tsx
@@ -0,0 +1,40 @@
+import React, { useContext } from "react";
+import { CyberClient } from "@cybercongress/cyber-js";
+import { Option } from "src/types";
+import { useQuery } from "@tanstack/react-query";
+// import { RPC_URL } from 'src/constants/config';
+
+const RPC_URL = "https://rpc.space-pussy.cybernode.ai";
+
+const QueryClientContext = React.createContext<Option<CyberClient>>(undefined);
+
+export function useQueryClientPussy() {
+  return useContext(QueryClientContext);
+}
+
+function QueryClientProvider({ children }: { children: React.ReactNode }) {
+  const { data, error, isFetching } = useQuery({
+    queryKey: ["cyberClient", "connect"],
+    queryFn: async () => {
+      return CyberClient.connect(RPC_URL);
+    },
+  });
+
+  if (isFetching) {
+    // return null;
+  }
+
+  if (error) {
+    console.error("Error queryClient connect: ", error.message);
+  }
+
+  console.log(data);
+
+  return (
+    <QueryClientContext.Provider value={data}>
+      {children}
+    </QueryClientContext.Provider>
+  );
+}
+
+export default QueryClientProvider;