get user name

rosticom · Jun 27, 2024 · 19cc673 · 19cc673
1 parent 933100d
commit 19cc673
Show file tree

Hide file tree

Showing 10 changed files with 120 additions and 93 deletions.
diff --git a/docs/assets/index-B3_cuzQP.css b/docs/assets/index-B3_cuzQP.css
diff --git a/docs/assets/index-CvwEH28t.js → docs/assets/index-Da8V65LC.js b/docs/assets/index-CvwEH28t.js → docs/assets/index-Da8V65LC.js
diff --git a/docs/assets/index-Dh_EqXUg.css b/docs/assets/index-Dh_EqXUg.css
diff --git a/docs/index.html b/docs/index.html
@@ -1,14 +1,14 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="./vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Coobot</title>
-    <script type="module" crossorigin src="./assets/index-CvwEH28t.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/index-B3_cuzQP.css">
-  </head>
-  <body>
-    <div id="root"></div>
-  </body>
-</html>
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="./vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Coobot</title>
+    <script type="module" crossorigin src="./assets/index-Da8V65LC.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/index-Dh_EqXUg.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "coobot-merkaba",
   "private": true,
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
   "scripts": {
     "dev": "vite",

diff --git a/src/App.tsx b/src/App.tsx
@@ -3,7 +3,7 @@
 import { THEME, TonConnectUIProvider } from "@tonconnect/ui-react";
 import { Footer } from "./components/Footer/Footer";
 import { Header } from "./components/Header/Header";
-import { TxForm } from "./components/TxForm/TxForm";
+// import { TxForm } from "./components/TxForm/TxForm";
 
 // import { useState } from 'react'
 // import reactLogo from './assets/merkaba_tv.jpg'
@@ -59,9 +59,9 @@ function App() {
       }}
     >
       <div className="app">
-        <Header />
+        <Header /> 
         {/* <TxForm /> */}
-        {/*<TonProofDemo />*/}
+        {/* <TonProofDemo /> */}
 
         <div>
           <a href="https://t.me/+JuO8mZMYOnRmN2Ux">

diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -1,4 +1,5 @@
-// import {BorderRadius, Locales, ReturnStrategy, Theme, THEME, useTonConnectUI} from "@tonconnect/ui-react";
+// import {Locales, ReturnStrategy, Theme, THEME, useTonConnectUI} from "@tonconnect/ui-react";
+// import {BorderRadius} from "@tonconnect/ui-react";
 import {useTonConnectUI} from "@tonconnect/ui-react";
 import './footer.scss';
 // import {useEffect, useState} from "react";
@@ -29,7 +30,9 @@ export const Footer = () => {
     //     setOptions({uiPreferences: {borderRadius: borders as BorderRadius}})
     // }
 
-    setOptions({uiPreferences: {borderRadius: 's'}}) // or 'm'
+    setOptions({uiPreferences: {borderRadius: 'm'}}) // or 's'
+
+    // console.log("hi!");
 
     // const onCheckboxChange = (position: number) => {
     //     setCheckboxes(state => state.map((item, index) => index === position ? !item : item ));

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -8,13 +8,37 @@ declare global {
     }
   }
 
+  import { useEffect, useState } from 'react';
+
+// const TelegramUserInfo = () => {
+// }
+
 export const Header = () => {
-    // const userName = Telegram.WebApp.initDataUnsafe.user.id
-    window.Telegram.WebApp.HapticFeedback.notificationOccurred("success");
+  const [userName, setUserName] = useState('');
+
+  useEffect(() => {
+    const tg = window.Telegram.WebApp;
+
+    if (tg) {
+      tg.ready();
+      const user = tg.initDataUnsafe.user;
+      if (user) {
+        setUserName(user.first_name + (user.last_name ? ' ' + user.last_name : ''));
+      }
+    }
+  }, []); 
+    // const userName = Telegram.WebApp.initDataUnsafe.user.id;
+    // const userName = window.Telegram.WebApp.initDataUnsafe.user?.username;
+    // window.Telegram.WebApp.HapticFeedback.notificationOccurred("success");
+    console.log("user name: ", userName);
 
     return <header>
-        <div id="wallet-connect-button-wrapper">
-            <TonConnectButton /> 
+        <div id="header-row">
+
+            <div id="wallet-connect-button-wrapper">
+                <TonConnectButton /> 
+            </div>
+            <div id="user-name">{userName}</div>
         </div>
         {/* <TonConnectButton /> */}
         {/* <span>My App with React UI</span> */}

diff --git a/src/components/Header/header.scss b/src/components/Header/header.scss
@@ -11,7 +11,7 @@
 header {
   // display: flex;
   align-items: right;
-  // justify-content: space-between;
+  justify-content: space-between;
   // padding: 10px 25px;
 
   > span {

diff --git a/src/components/TxForm/TxForm.tsx b/src/components/TxForm/TxForm.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback, useState} from 'react';
+import {useCallback, useState} from 'react';
 import JsonView from 'react18-json-view';
 import './style.scss';
 import {SendTransactionRequest, useTonConnectUI, useTonWallet} from "@tonconnect/ui-react";