hook nextjs

Wonkiest29

May 6th, 2025

207

Never

Add comment

Not a member of Pastebin yet? Sign Up, it unlocks many cool features!

TypeScript 4.15 KB | None | 0 0

raw download clone embed print report

"use client"
import { useEffect, useState } from "react";
import { useSignal, initData, init } from '@telegram-apps/sdk-react';
export function useTelegram() {
// SDK signals
const initDataRaw = useSignal(initData.raw);
const initDataState = useSignal(initData.state);
// State
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [tg, setTg] = useState<any>(null);
const [isBrowser, setIsBrowser] = useState(false);
const [fallbackUser, setFallbackUser] = useState<any>(undefined);
const user = initDataState?.user;
useEffect(() => {
// Initialize the SDK only on the client side
if (typeof window !== 'undefined') {
try {
setIsBrowser(true);
// Check if we're inside Telegram WebApp environment
if (!window.Telegram?.WebApp) {
console.warn('⚠️ Not running inside Telegram WebApp environment');
setError('Not in Telegram Web App');
setIsLoading(false);
return;
}
// Fix for URL parameters issue
try {
// Manual approach to get initData from URL if needed
const urlParams = new URLSearchParams(window.location.search);
const tgWebAppData = urlParams.get('tgWebAppData');
if (tgWebAppData && !window.Telegram.WebApp.initData) {
console.log('📝 Setting initData from URL parameter');
window.Telegram.WebApp.initData = tgWebAppData;
}
} catch (e) {
console.warn('Failed to parse URL params:', e);
}
// Initialize the SDK
init();
setTg(window.Telegram?.WebApp);
// Setup fallback user data
if (window.Telegram?.WebApp?.initDataUnsafe?.user) {
const telegramUser = window.Telegram.WebApp.initDataUnsafe.user;
setFallbackUser({
id: telegramUser.id,
firstName: telegramUser.first_name,
lastName: telegramUser.last_name,
username: telegramUser.username
});
}
// Debug logging
console.log('Telegram WebApp object:', window.Telegram?.WebApp ? 'Available ✓' : 'Not available ✗');
console.log('URL Search Params:', window.location.search);
console.log('InitData:', window.Telegram?.WebApp?.initData || 'Not available');
// Set a timeout to check if init data was loaded
const timeoutId = setTimeout(() => {
if (!initDataRaw && !initDataState?.user && !fallbackUser) {
console.error('❌ Failed to retrieve init data after timeout');
setError('LaunchParamsRetrieveError: Unable to retrieve launch parameters. Please open this app from Telegram.');
setIsLoading(false);
}
}, 1500);
return () => clearTimeout(timeoutId);
} catch (err) {
console.error('❌ Error initializing Telegram SDK:', err);
setError(err instanceof Error ? err.message : 'Unknown error initializing Telegram SDK');
setIsLoading(false);
}
}
}, []);
// Effect to process init data once available
useEffect(() => {
if (!isBrowser) return;
// Log when data changes
console.log('Init data updated:', {
hasInitDataRaw: !!initDataRaw,
hasUser: !!user,
hasFallbackUser: !!fallbackUser,
userDetails: user ? { id: user.id, firstName: user.firstName } : null
});
// Set loading/error states based on data
if (initDataRaw === null && !fallbackUser) {
// SDK has determined we're not in Telegram
setError('Not in Telegram Web App');
setIsLoading(false);
} else if (initDataState?.user || fallbackUser) {
// Successfully got user data
setIsLoading(false);
setError(null);
}
}, [initDataRaw, initDataState, user, fallbackUser, isBrowser]);
return {
tg,
// Use SDK user or fallback to our state-based user
user: user || fallbackUser,
initData: initDataState,
initDataRaw,
isLoading,
error
};
}

Add Comment

Please, Sign In to add comment