+
+ );
+}
+
+export default App;
diff --git a/other/ton-telegram-example/src/assets/TelegramLogo.svg b/other/ton-telegram-example/src/assets/TelegramLogo.svg
new file mode 100644
index 000000000..c67526fde
--- /dev/null
+++ b/other/ton-telegram-example/src/assets/TelegramLogo.svg
@@ -0,0 +1,16 @@
+
+
\ No newline at end of file
diff --git a/other/ton-telegram-example/src/assets/spinner.svg b/other/ton-telegram-example/src/assets/spinner.svg
new file mode 100644
index 000000000..2f7819563
--- /dev/null
+++ b/other/ton-telegram-example/src/assets/spinner.svg
@@ -0,0 +1,52 @@
+
+
\ No newline at end of file
diff --git a/other/ton-telegram-example/src/assets/web3AuthLogoDark.png b/other/ton-telegram-example/src/assets/web3AuthLogoDark.png
new file mode 100644
index 000000000..cd4b904f5
Binary files /dev/null and b/other/ton-telegram-example/src/assets/web3AuthLogoDark.png differ
diff --git a/other/ton-telegram-example/src/assets/web3AuthLogoDark.svg b/other/ton-telegram-example/src/assets/web3AuthLogoDark.svg
new file mode 100644
index 000000000..8d925fc61
--- /dev/null
+++ b/other/ton-telegram-example/src/assets/web3AuthLogoDark.svg
@@ -0,0 +1,6 @@
+
diff --git a/other/ton-telegram-example/src/assets/web3AuthLogoLight.png b/other/ton-telegram-example/src/assets/web3AuthLogoLight.png
new file mode 100644
index 000000000..66788c11d
Binary files /dev/null and b/other/ton-telegram-example/src/assets/web3AuthLogoLight.png differ
diff --git a/other/ton-telegram-example/src/assets/web3AuthLogoLight.svg b/other/ton-telegram-example/src/assets/web3AuthLogoLight.svg
new file mode 100644
index 000000000..d3744ebcd
--- /dev/null
+++ b/other/ton-telegram-example/src/assets/web3AuthLogoLight.svg
@@ -0,0 +1,6 @@
+
diff --git a/other/ton-telegram-example/src/components/DarkModeToggle.tsx b/other/ton-telegram-example/src/components/DarkModeToggle.tsx
new file mode 100644
index 000000000..ca9bbab0a
--- /dev/null
+++ b/other/ton-telegram-example/src/components/DarkModeToggle.tsx
@@ -0,0 +1,19 @@
+import { Sun, Moon } from 'lucide-react';
+
+const DarkModeToggle = ({ isDark, onToggle }) => {
+ return (
+
+ );
+};
+
+export default DarkModeToggle;
\ No newline at end of file
diff --git a/other/ton-telegram-example/src/components/Loading.tsx b/other/ton-telegram-example/src/components/Loading.tsx
new file mode 100644
index 000000000..91e3ad536
--- /dev/null
+++ b/other/ton-telegram-example/src/components/Loading.tsx
@@ -0,0 +1,9 @@
+import loader from "../assets/spinner.svg"; // Tell webpack this JS file uses this image
+
+const Loading = () => (
+
+
+ {isLoggingIn ? (
+
+ 
+
+
+
+
+
+ Web3Auth Telegram MiniApp
+
+
+ + Seamless wallet access on any chain with Telegram. Just one click, + and you're in! +
+
+ {isLoggedIn && (
+ <>
+
+ )}
+
+
+
+ })
{
+ const target = e.target as HTMLImageElement;
+ target.src = generateGenericAvatarUrl(
+ userData?.firstName || userData?.username || "User"
+ );
+ }}
+ />
+
+
+
+
+ 
+
+ + ID: {userData?.id} +
++ Username: {userData?.username} +
++ Name: {userData?.firstName}{" "} + {userData?.lastName || ""} +
+
+ copyToClipboard(tonAccountAddress || "", "account")
+ }>
+
+
+
+ + TON Account: + {tonAccountAddress} +
+ {copiedStates.account ? ( + copyToClipboard(signedMessage || "", "message")}>
+
+
+ )}
+
+
+ + Signed Message: + {signedMessage} +
+ {copiedStates.message ? ( +
+ 
+
+);
+
+export default Loading;
diff --git a/other/ton-telegram-example/src/hooks/useClientOnce.ts b/other/ton-telegram-example/src/hooks/useClientOnce.ts
new file mode 100644
index 000000000..1294086df
--- /dev/null
+++ b/other/ton-telegram-example/src/hooks/useClientOnce.ts
@@ -0,0 +1,9 @@
+import { useRef } from 'react';
+
+export function useClientOnce(fn: () => void): void {
+ const canCall = useRef(true);
+ if (typeof window !== 'undefined' && canCall.current) {
+ canCall.current = false;
+ fn();
+ }
+}
diff --git a/other/ton-telegram-example/src/hooks/useMockTelegramInitData.ts b/other/ton-telegram-example/src/hooks/useMockTelegramInitData.ts
new file mode 100644
index 000000000..59f0eb101
--- /dev/null
+++ b/other/ton-telegram-example/src/hooks/useMockTelegramInitData.ts
@@ -0,0 +1,66 @@
+/* eslint-disable camelcase */
+import { mockTelegramEnv, parseInitData, retrieveLaunchParams } from '@telegram-apps/sdk-react';
+
+/**
+ * Mocks Telegram environment in development mode.
+ */
+export function useTelegramMock(): void {
+ if (process.env.NODE_ENV !== "development") return; // Only run in development mode
+
+ let shouldMock: boolean;
+
+ try {
+ retrieveLaunchParams();
+ shouldMock = !!sessionStorage.getItem('____mocked');
+ } catch (e) {
+ shouldMock = true;
+ }
+
+ if (shouldMock) {
+ const randomId = Math.floor(Math.random() * 1000000000); // Generate a random id between 0 and 1 billion
+
+ const initDataRaw = new URLSearchParams([
+ [
+ 'user',
+ JSON.stringify({
+ id: randomId, // Randomized user ID
+ first_name: 'Andrew',
+ last_name: 'Rogue',
+ username: 'rogue',
+ language_code: 'en',
+ is_premium: true,
+ allows_write_to_pm: true,
+ }),
+ ],
+ ["hash", "89d6079ad6762351f38c6dbbc41bb53048019256a9443988af7a48bcad16ba31"],
+ ["auth_date", "1716922846"], // Use a fixed or provided auth_date
+ ["start_param", "debug"],
+ ["chat_type", "sender"],
+ ["chat_instance", "8428209589180549439"],
+ ]).toString();
+
+ mockTelegramEnv({
+ themeParams: {
+ accentTextColor: '#6ab2f2',
+ bgColor: '#17212b',
+ buttonColor: '#5288c1',
+ buttonTextColor: '#ffffff',
+ destructiveTextColor: '#ec3942',
+ headerBgColor: '#17212b',
+ hintColor: '#708499',
+ linkColor: "#6ab3f3",
+ secondaryBgColor: "#232e3c",
+ sectionBgColor: "#17212b",
+ sectionHeaderTextColor: "#6ab3f3",
+ subtitleTextColor: "#708499",
+ textColor: "#f5f5f5",
+ },
+ initData: parseInitData(initDataRaw),
+ initDataRaw,
+ version: "7.7",
+ platform: "tdesktop",
+ });
+
+ sessionStorage.setItem("____mocked", "1");
+ }
+}
diff --git a/other/ton-telegram-example/src/index.css b/other/ton-telegram-example/src/index.css
new file mode 100644
index 000000000..ec2585e8c
--- /dev/null
+++ b/other/ton-telegram-example/src/index.css
@@ -0,0 +1,13 @@
+body {
+ margin: 0;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+ 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+ sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+ font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+ monospace;
+}
diff --git a/other/ton-telegram-example/src/index.tsx b/other/ton-telegram-example/src/index.tsx
new file mode 100644
index 000000000..ea4e551a1
--- /dev/null
+++ b/other/ton-telegram-example/src/index.tsx
@@ -0,0 +1,13 @@
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
+import { useTelegramMock } from "./hooks/useMockTelegramInitData";
+const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
+useTelegramMock();
+root.render(