update

front/src/components/common/Header.tsx

@@ -20,13 +20,6 @@ const Header = (props: HeaderProps) => {
   const navigate = useNavigate();
   const { pathname } = useLocation();
 
-  tonConnectUI.setConnectRequestParameters({
-    state: "ready",
-    value: {
-      tonProof: "<your-proof-payload>",
-    },
-  });
-
   const handleModalState = () => {
     setIsOpenModal(!isOpenModal);
   };

front/src/components/main/TonWallet.tsx

@@ -5,22 +5,37 @@ import IcWalletConnect from "../../assets/icons/Landing/ic_wallet_connect.svg";
 import IcWalletDisconnect from "../../assets/icons/Landing/ic_wallet_disconnect.svg";
 
 import useTonConnect from "./../../hooks/contract/useTonConnect";
+import { toBase64, fromBase64, fromAscii, toAscii } from "@cosmjs/encoding";
 
-const TonWallet = () => {
+const TonWallet = ({ nickname, message }) => {
   const { connected, tonConnectUI } = useTonConnect();
 
   const handleSwitchWalletFunction = () => {
     if (connected) {
       console.log(">>> Send message to bacend");
     } else {
+      const dat = JSON.stringify([{ nickname }, { post: message }]);
+      const t = toBase64(toAscii(dat));
+
+      tonConnectUI.setConnectRequestParameters({
+        state: "ready",
+        value: {
+          tonProof: t,
+        },
+      });
+
       tonConnectUI.connectWallet();
     }
   };
 
   return (
     <TonWalletWrapper onClick={handleSwitchWalletFunction}>
       <TonConnectStatusBox>
-        {connected ? <img src={IcWalletConnect} alt="connect" /> : <img src={IcWalletDisconnect} alt="disconnect" />}
+        {connected ? (
+          <img src={IcWalletConnect} alt="connect" />
+        ) : (
+          <img src={IcWalletDisconnect} alt="disconnect" />
+        )}
       </TonConnectStatusBox>
       {connected ? (
         <TonConnectCenterBox> Create link</TonConnectCenterBox>

front/src/pages/Main/Main.tsx

@@ -5,11 +5,14 @@ import Header from "@/components/common/Header";
 import TonWallet from "@/components/main/TonWallet";
 import useTonConnect from "@/hooks/contract/useTonConnect";
 import useCyberPassport from "@/hooks/useCyberPassport";
+import { fromAscii, fromBase64 } from "@cosmjs/encoding";
 
 const tele = (window as any).Telegram.WebApp;
 
 const Main = () => {
-  const { address, tonConnectUI, wallet } = useTonConnect();
+  const { address, tonConnectUI, wallet, connected } = useTonConnect();
+
+  const [message, setMessage] = useState("");
 
   const [nickname, setNickname] = useState("congress");
 
@@ -30,8 +33,18 @@ const Main = () => {
     <>
       <MainWrapper>
         <Header isOpen={false} text="CYBER-TON" backgroundType={false} />
-        <Input placeholder="enter message..." />
-        <TonWallet />
+        <Input
+          placeholder="enter message..."
+          value={message}
+          onChange={(e) => {
+            if (connected) {
+              tonConnectUI.disconnect();
+            }
+
+            setMessage(e.target.value);
+          }}
+        />
+        <TonWallet message={message} nickname={nickname} />
 
         <br />
 
@@ -41,6 +54,10 @@ const Main = () => {
           onChange={(e) => {
             const value = e.target.value;
 
+            if (connected) {
+              tonConnectUI.disconnect();
+            }
+
             setNickname(value);
           }}
         />
@@ -64,6 +81,9 @@ const Main = () => {
               fontSize: 14,
             }}
           >
+            {fromAscii(fromBase64(tonProof?.proof?.payload))}
+
+            <br />
             {JSON.stringify(tonProof)}
           </div>
         )}