add prove

cybercongress · May 29, 2024 · c56bfa4 · c56bfa4
1 parent c9809df
commit c56bfa4
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 7 deletions.
diff --git a/front/prettierrc.json b/front/prettierrc.json
diff --git a/front/src/components/common/Header.tsx b/front/src/components/common/Header.tsx
@@ -20,6 +20,13 @@ const Header = (props: HeaderProps) => {
   const navigate = useNavigate();
   const { pathname } = useLocation();
 
+  tonConnectUI.setConnectRequestParameters({
+    state: "ready",
+    value: {
+      tonProof: "<your-proof-payload>",
+    },
+  });
+
   const handleModalState = () => {
     setIsOpenModal(!isOpenModal);
   };
@@ -41,9 +48,17 @@ const Header = (props: HeaderProps) => {
           {pathname === "/" && (
             <DisconnectButton $connect={connected}>
               {connected ? (
-                <img src={IcWalletDisconnect} alt="walletConnectDisconnect" onClick={handleModalState} />
+                <img
+                  src={IcWalletDisconnect}
+                  alt="walletConnectDisconnect"
+                  onClick={handleModalState}
+                />
               ) : (
-                <img src={IcWalletConnect} alt="walletConnect" onClick={() => tonConnectUI.connectWallet()} />
+                <img
+                  src={IcWalletConnect}
+                  alt="walletConnect"
+                  onClick={() => tonConnectUI.connectWallet()}
+                />
               )}
             </DisconnectButton>
           )}
@@ -71,7 +86,8 @@ const HeaderWrapper = styled.header<{
   width: 100%;
   padding: 2rem 1.5rem;
 
-  background-color: ${({ $backgroundType }) => ($backgroundType ? "#f2f2f7" : "#fff")};
+  background-color: ${({ $backgroundType }) =>
+    $backgroundType ? "#f2f2f7" : "#fff"};
 `;
 
 const HeaderRightBox = styled.div`
@@ -91,7 +107,10 @@ const DisconnectButton = styled.button<{ $connect: boolean }>`
 
   border: none;
   border-radius: 1.8rem;
-  background: ${({ $connect }) => ($connect ? `#2F3038` : `linear-gradient(160deg, #f3f6fc 11.73%, #e6e7f7 98.61%)`)};
+  background: ${({ $connect }) =>
+    $connect
+      ? `#2F3038`
+      : `linear-gradient(160deg, #f3f6fc 11.73%, #e6e7f7 98.61%)`};
 
   cursor: pointer;
 `;
@@ -119,7 +138,8 @@ const MenuButton = styled.button<{ $isOpen: boolean }>`
     &:nth-child(1) {
       top: ${({ $isOpen }) => ($isOpen ? "50%" : "35%")};
       left: 25%;
-      transform: ${({ $isOpen }) => ($isOpen ? "translateY(-50%) rotate(45deg)" : "none")};
+      transform: ${({ $isOpen }) =>
+        $isOpen ? "translateY(-50%) rotate(45deg)" : "none"};
     }
 
     &:nth-child(2) {
@@ -132,7 +152,8 @@ const MenuButton = styled.button<{ $isOpen: boolean }>`
     &:nth-child(3) {
       bottom: ${({ $isOpen }) => ($isOpen ? "50%" : "35%")};
       left: 25%;
-      transform: ${({ $isOpen }) => ($isOpen ? "translateY(50%) rotate(-45deg)" : "none")};
+      transform: ${({ $isOpen }) =>
+        $isOpen ? "translateY(50%) rotate(-45deg)" : "none"};
     }
   }
 

diff --git a/front/src/pages/Main/Main.tsx b/front/src/pages/Main/Main.tsx
@@ -8,7 +8,9 @@ import useTonConnect from "@/hooks/contract/useTonConnect";
 const tele = (window as any).Telegram.WebApp;
 
 const Main = () => {
-  const { address } = useTonConnect();
+  const { address, tonConnectUI, wallet } = useTonConnect();
+
+  const tonProof = wallet?.connectItems?.tonProof;
 
   useEffect(() => {
     if (tele) {
@@ -23,6 +25,18 @@ const Main = () => {
         <Header isOpen={false} text="CYBER-TON" backgroundType={false} />
         <Input placeholder="enter message..." />
         <TonWallet />
+
+        <br />
+
+        {tonProof && (
+          <div
+            style={{
+              fontSize: 14,
+            }}
+          >
+            {JSON.stringify(tonProof)}
+          </div>
+        )}
       </MainWrapper>
     </>
   );