diff --git a/src/App.tsx b/src/App.tsx index 0c7640e..c853945 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,6 +1,10 @@ import { useEffect, useState } from "react"; import litLogo from "./assets/lit.png"; -import { getSessionSignatures, connectToLitNodes, connectToLitContracts } from "./litConnections"; +import { + getSessionSignatures, + connectToLitNodes, + connectToLitContracts, +} from "./litConnections"; import { useSDK } from "@metamask/sdk-react"; import "./App.css"; @@ -15,7 +19,6 @@ interface TelegramWebApp { initDataUnsafe: any; } - declare global { interface Window { Telegram?: { @@ -27,13 +30,15 @@ declare global { function App() { const [webApp, setWebApp] = useState(null); const [account, setAccount] = useState(null); - const { sdk, connected, /*connecting, */provider /*chainId*/ } = useSDK(); + const { sdk, connected, /*connecting, */ provider /*chainId*/ } = useSDK(); const [pkp, setPkp] = useState<{ - tokenId: any - publicKey: string - ethAddress: string + tokenId: any; + publicKey: string; + ethAddress: string; } | null>(null); const [sessionSignatures, setSessionSignatures] = useState(null); + const [valid, setValid] = useState(null); + const [recent, setRecent] = useState(null); const [data, setData] = useState(null); useEffect(() => { @@ -43,50 +48,43 @@ function App() { setWebApp(tgApp); setData(tgApp.initData); - isRecent(tgApp.initData) - .then((isRecent) => { - console.log("isRecent:", isRecent); - }) + isRecent(tgApp.initData).then((isRecent) => { + setRecent(isRecent); + }); verifyInitData(tgApp.initData, import.meta.env.VITE_TELEGRAM_BOT_TOKEN) - .then(({ isVerified, urlParams }) => { - console.log("verified:", isVerified); - console.log("urlParams:", urlParams); + .then(( isVerified ) => { + setValid(isVerified); }) - .catch(error => { + .catch((error) => { console.error("Error verifying init data:", error); }); } }, []); - async function isRecent(telegramInitData: string){ + async function isRecent(telegramInitData: string) { const urlParams: URLSearchParams = new URLSearchParams(telegramInitData); - const auth_date = Number(urlParams.get('auth_date')); - console.log("auth_date:", auth_date); + const auth_date = Number(urlParams.get("auth_date")); const isRecent = Date.now() / 1000 - auth_date < 600; return isRecent; } - async function verifyInitData(telegramInitData: string, botToken: string): Promise<{ isVerified: boolean, urlParams: URLSearchParams }> { + async function verifyInitData( + telegramInitData: string, + botToken: string + ) { const urlParams: URLSearchParams = new URLSearchParams(telegramInitData); - - const hash = urlParams.get('hash'); - urlParams.delete('hash'); + + const hash = urlParams.get("hash"); + urlParams.delete("hash"); urlParams.sort(); - /* - const userParam = urlParams.get('user'); - const userData = JSON.parse(decodeURIComponent(userParam!)); - const id = userData.id; - console.log("id:", id); - */ - - let dataCheckString = ''; + let dataCheckString = ""; for (const [key, value] of urlParams.entries()) { dataCheckString += `${key}=${value}\n`; } dataCheckString = dataCheckString.slice(0, -1); - + const encoder = new TextEncoder(); const secretKey = await window.crypto.subtle.importKey( "raw", @@ -95,14 +93,13 @@ function App() { false, ["sign"] ); - console.log("secretKey:", secretKey); - + const botTokenKey = await window.crypto.subtle.sign( "HMAC", secretKey, encoder.encode(botToken) ); - + const calculatedHash = await window.crypto.subtle.sign( "HMAC", await window.crypto.subtle.importKey( @@ -114,25 +111,24 @@ function App() { ), encoder.encode(dataCheckString) ); - + const calculatedHashHex = Array.from(new Uint8Array(calculatedHash)) - .map(b => b.toString(16).padStart(2, '0')) - .join(''); + .map((b) => b.toString(16).padStart(2, "0")) + .join(""); const isVerified = hash === calculatedHashHex; - return { isVerified, urlParams }; + return isVerified; } const connect = async () => { try { const accounts = await sdk?.connect(); setAccount(accounts?.[0]); - webApp!.showPopup({ - title: "Connected", - message: `Connected to MetaMask with account: ${accounts[0]}`, - buttons: [{ text: "Close", type: "close" }], - }); - + webApp!.showPopup({ + title: "Connected", + message: `Connected to MetaMask with account: ${accounts[0]}`, + buttons: [{ text: "Close", type: "close" }], + }); } catch (err) { console.warn("failed to connect..", err); } @@ -143,7 +139,7 @@ function App() { const sessionSignatures = await getSessionSignatures( litNodeClient, pkp, - data, + data ); setSessionSignatures(sessionSignatures); }; @@ -151,7 +147,7 @@ function App() { const mintPkp = async () => { const pkp = await connectToLitContracts(provider); setPkp(pkp); - } + }; return (
@@ -159,16 +155,14 @@ function App() { logo

Telegram Mini App

- {( + {
-

Telegram User Data:

- 
{JSON.stringify(data, null, 2)}
+

Telegram User Data Validity:

+ 
 Recent: {JSON.stringify(recent, null, 2)}
+ 
 Valid: {JSON.stringify(valid, null, 2)}
- )} - {connected &&
{account && `Connected account: ${account}`}
} @@ -178,9 +172,13 @@ function App() { )} {sessionSignatures && ( -
-

Session Signatures:

- 
{JSON.stringify(sessionSignatures, null, 2)}
+
+
+

Session Signatures:

+ 
+              {JSON.stringify(sessionSignatures, null, 2)}
+
+
)} {connected && ( @@ -189,9 +187,13 @@ function App() { )} {pkp && ( -
-

PKP:

- 
{JSON.stringify(pkp, null, 2)}
+
+
+

PKP:

+ 
+              {JSON.stringify(pkp, null, 2)}
+
+
)}
diff --git a/src/index.css b/src/index.css index 6119ad9..3e46ddd 100644 --- a/src/index.css +++ b/src/index.css @@ -66,3 +66,27 @@ button:focus-visible { background-color: #f9f9f9; } } + +.boxed-code-display { + width: 100%; + overflow-x: auto; +} + +.boxed-code-display__container { + border: 1px solid #e2e8f0; + border-radius: 0.25rem; + padding: 1rem; + background-color: #010507; +} + +.boxed-code-display__title { + font-size: 1.125rem; + font-weight: 600; + margin-bottom: 0.5rem; +} + +.boxed-code-display__content { + white-space: pre-wrap; + word-break: break-all; + font-family: monospace; +} \ No newline at end of file diff --git a/src/litAction.ts b/src/litAction.ts index 5a37965..54715a7 100644 --- a/src/litAction.ts +++ b/src/litAction.ts @@ -63,8 +63,6 @@ const _litActionCode = async () => { }); } - console.log("Past validation"); - const auth_date = Number(urlParams.get('auth_date')); const isRecent = Date.now() / 1000 - auth_date < 600; if (!isRecent) { @@ -73,11 +71,11 @@ const _litActionCode = async () => { reason: "Authenticated Telegram user data is older than 10 minutes", }); } - console.log("Past Recent"); const userParam = urlParams.get('user'); const userData = JSON.parse(decodeURIComponent(userParam!)); const id = userData.id; + // Checking if usersAuthMethodId is a permitted Auth Method for pkpTokenId const usersAuthMethodId = ethers.utils.keccak256( ethers.utils.toUtf8Bytes(`telegram:${id}`)