/ apps / web / src / main.tsx
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  )