main.tsx
1 import React from 'react' 2 import { createRoot } from 'react-dom/client' 3 import { QueryClient, QueryClientProvider } from '@tanstack/react-query' 4 import App from './App' 5 import i18n from './i18n/config' // Initialize i18n 6 import './index.css' 7 import { SpinnerWithScarlett } from './components/ui/spinner-with-scarlett' 8 import { WalletProvider } from './components/WalletProvider' 9 10 // Check if running as a Farcaster Mini App - ONLY via query param or path 11 const url = new URL(window.location.href) 12 const isMiniApp = url.pathname.startsWith('/mini') || url.searchParams.get('miniApp') === 'true' 13 14 // Dynamically import Farcaster SDK if running as Mini App 15 if (isMiniApp) { 16 import('@farcaster/miniapp-sdk').then(({ sdk }) => { 17 // Store SDK globally for use in components 18 window.farcasterSDK = sdk 19 console.log('🎯 Farcaster Mini App SDK loaded') 20 }).catch(err => { 21 console.error('Failed to load Farcaster SDK:', err) 22 }) 23 } 24 25 // Clear localStorage language cache for testing (remove this in production) 26 // localStorage.removeItem('i18nextLng') 27 28 // Version info for debugging - automatically pulled from package.json 29 const APP_VERSION = import.meta.env.VITE_APP_VERSION || 'development' 30 console.log(`📦 App Version: ${APP_VERSION}`) 31 console.log('🎯 Is Mini App:', isMiniApp) 32 33 // Log language detection info 34 console.log('🌐 Initial language detection:', { 35 browserLanguage: navigator.language, 36 browserLanguages: navigator.languages, 37 detectedLanguage: i18n.language, 38 availableLanguages: Object.keys(i18n.store.data), 39 localStorageLanguage: localStorage.getItem('i18nextLng') 40 }) 41 42 const queryClient = new QueryClient() 43 44 const root = createRoot(document.getElementById('root')!) 45 root.render( 46 <React.Suspense fallback={<div className="min-h-screen flex items-center justify-center bg-neutral-900"><SpinnerWithScarlett size="lg" /></div>}> 47 <QueryClientProvider client={queryClient}> 48 <WalletProvider isMiniApp={isMiniApp}> 49 <App /> 50 </WalletProvider> 51 </QueryClientProvider> 52 </React.Suspense> 53 )