diff --git a/app/layout.tsx b/app/layout.tsx index 71131c6..6186ff2 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -30,15 +30,32 @@ export default function RootLayout({ } return ( - - {children} - + + + + + + + {children} + + ); } diff --git a/app/page.tsx b/app/page.tsx index 5227f34..1d6e5ef 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -7,27 +7,82 @@ import { } from "../lib/dynamic"; import Spinner from "./Spinner"; +interface Window { + Telegram?: any; // You can specify a more specific type if you know the structure of Telegram +} export default function Main() { const { sdkHasLoaded, user } = useDynamicContext(); const { telegramSignIn } = useTelegramLogin(); const [isLoading, setIsLoading] = useState(true); + const [isTelegramContext, setIsTelegramContext] = useState(false); + + // useEffect(() => { + // if (!sdkHasLoaded) return; + + // const signIn = async () => { + // if (!user) { + // await telegramSignIn({ forceCreateUser: true }); + // } + // setIsLoading(false); + // }; + + // signIn(); + // }, [sdkHasLoaded]); useEffect(() => { - if (!sdkHasLoaded) return; + function isInTelegramContext() { + // Check for Telegram WebView environment + const isTelegramWebView = true; + // typeof window !== "undefined" && window.Telegram !== undefined; - const signIn = async () => { - if (!user) { - await telegramSignIn({ forceCreateUser: true }); + // You can also check the user agent to determine if it's Telegram's in-app browser + const userAgent = navigator.userAgent || navigator.vendor; + const isTelegramUserAgent = /Telegram/i.test(userAgent); + + console.log( + "check Telegram", + "isTelegramWebView", + isTelegramWebView, + "isTelegramUserAgent", + isTelegramUserAgent + ); + if (isTelegramWebView || isTelegramUserAgent) { + // Access the Telegram WebApp API + // const telegram = window.Telegram.WebApp; + } else { + console.log("not in context....."); } - setIsLoading(false); - }; - signIn(); - }, [sdkHasLoaded]); + return isTelegramWebView || isTelegramUserAgent; + } + + if (isInTelegramContext()) { + console.log("App is running inside Telegram context"); + setIsTelegramContext(true); + } else { + console.log("App is running outside Telegram context"); + setIsTelegramContext(false); + } + }, [sdkHasLoaded]); // Empty dependency array to run only on mount return ( -
+
+
+ {isTelegramContext ? ( +

Welcome! You are inside the Telegram app.

+ ) : ( +

You are not inside the Telegram app.

+ )} +
@@ -36,21 +91,34 @@ export default function Main() {
-

You got an auto-wallet!

+

+ You got an auto-wallet! +

{isLoading ? : }

- Zero clicks, one multi-chain wallet. We automatically created an embedded wallet for you. + Zero clicks, one multi-chain wallet. We automatically created an + embedded wallet for you.

How This works

  • We utilize the Telegram authentication token
  • Token is verified and used to create the end user wallet
    • -
  • The same wallet is accessible on desktop and mobile platforms
    • -
  • If the end user logs in with Telegram later on your site, your wallet is still available
    • +
  • + The same wallet is accessible on desktop and mobile platforms +
    • +
  • + If the end user logs in with Telegram later on your site, your + wallet is still available +
- + Learn More in Our Docs