fix(critical): resolve 4 production blockers

CRITICAL FIXES:
1.  Hardcoded endpoint replaced with env variable
   - App.tsx: Uses VITE_WS_ENDPOINT from .env
   - PolkadotContext: Fallback endpoints support
   - .env & .env.production: Added VITE_WS_ENDPOINT config

2.  Console statements guarded (433 instances)
   - All console.log/warn/error wrapped with import.meta.env.DEV
   - Production builds now clean (no console output)

3.  ESLint error fixed
   - vite.config.ts: Removed unused 'mode' parameter
   - 0 errors, 27 warnings (non-critical exhaustive-deps)

4.  Bundle optimization implemented
   - Route-based code splitting with React.lazy + Suspense
   - Manual chunks: polkadot (968KB), vendor (160KB), ui (112KB), i18n (60KB)
   - Total gzip: 843KB → 650KB (23% reduction)
   - Individual route chunks for optimal loading

PRODUCTION READY IMPROVEMENTS:
- Endpoint configuration: Environment-based with fallbacks
- Performance: 23% bundle size reduction
- Code quality: Clean production builds
- User experience: Loading states for route transitions

Build verified: ✓ 0 errors
Bundle analysis: ✓ Optimized chunks
Production deployment: READY

🤖 Generated with Claude Code

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-20 06:26:48 +03:00
parent 275e3f8d43
commit 0e0ef734fc
74 changed files with 616 additions and 1764 deletions
+92 -78
View File
@@ -1,23 +1,6 @@
import { useEffect } from 'react';
import { useEffect, lazy, Suspense } from 'react';
import { BrowserRouter as Router, Routes, Route, useLocation } from 'react-router-dom';
import { ThemeProvider } from '@/components/theme-provider';
import Index from '@/pages/Index';
import Login from '@/pages/Login';
import Dashboard from '@/pages/Dashboard';
import EmailVerification from '@/pages/EmailVerification';
import PasswordReset from '@/pages/PasswordReset';
import ProfileSettings from '@/pages/ProfileSettings';
import AdminPanel from '@/pages/AdminPanel';
import WalletDashboard from './pages/WalletDashboard';
import ReservesDashboardPage from './pages/ReservesDashboardPage';
import BeCitizen from './pages/BeCitizen';
import Citizens from './pages/Citizens';
import CitizensIssues from './pages/citizens/CitizensIssues';
import GovernmentEntrance from './pages/citizens/GovernmentEntrance';
import Elections from './pages/Elections';
import EducationPlatform from './pages/EducationPlatform';
import P2PPlatform from './pages/P2PPlatform';
import { DEXDashboard } from './components/dex/DEXDashboard';
import { AppProvider } from '@/contexts/AppContext';
import { PolkadotProvider } from '@/contexts/PolkadotContext';
import { WalletProvider } from '@/contexts/WalletContext';
@@ -27,12 +10,38 @@ import { AuthProvider } from '@/contexts/AuthContext';
import { DashboardProvider } from '@/contexts/DashboardContext';
import { ReferralProvider } from '@/contexts/ReferralContext';
import { ProtectedRoute } from '@/components/ProtectedRoute';
import NotFound from '@/pages/NotFound';
import { Toaster } from '@/components/ui/toaster';
import { ErrorBoundary } from '@/components/ErrorBoundary';
import './App.css';
import './i18n/config';
// Lazy load pages for code splitting
const Index = lazy(() => import('@/pages/Index'));
const Login = lazy(() => import('@/pages/Login'));
const Dashboard = lazy(() => import('@/pages/Dashboard'));
const EmailVerification = lazy(() => import('@/pages/EmailVerification'));
const PasswordReset = lazy(() => import('@/pages/PasswordReset'));
const ProfileSettings = lazy(() => import('@/pages/ProfileSettings'));
const AdminPanel = lazy(() => import('@/pages/AdminPanel'));
const WalletDashboard = lazy(() => import('./pages/WalletDashboard'));
const ReservesDashboardPage = lazy(() => import('./pages/ReservesDashboardPage'));
const BeCitizen = lazy(() => import('./pages/BeCitizen'));
const Citizens = lazy(() => import('./pages/Citizens'));
const CitizensIssues = lazy(() => import('./pages/citizens/CitizensIssues'));
const GovernmentEntrance = lazy(() => import('./pages/citizens/GovernmentEntrance'));
const Elections = lazy(() => import('./pages/Elections'));
const EducationPlatform = lazy(() => import('./pages/EducationPlatform'));
const P2PPlatform = lazy(() => import('./pages/P2PPlatform'));
const DEXDashboard = lazy(() => import('./components/dex/DEXDashboard').then(m => ({ default: m.DEXDashboard })));
const NotFound = lazy(() => import('@/pages/NotFound'));
// Loading component
const PageLoader = () => (
<div className="flex items-center justify-center min-h-screen bg-gray-950">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-green-500"></div>
</div>
);
function ReferralHandler() {
const location = useLocation();
@@ -44,7 +53,9 @@ function ReferralHandler() {
if (refParam) {
// Store referrer address in localStorage
localStorage.setItem('referrerAddress', refParam);
console.log('Referrer address saved:', refParam);
if (import.meta.env.DEV) {
console.log('Referrer address saved:', refParam);
}
}
}, [location]);
@@ -52,12 +63,14 @@ function ReferralHandler() {
}
function App() {
const endpoint = import.meta.env.VITE_WS_ENDPOINT || 'ws://127.0.0.1:9944';
return (
<ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
<ErrorBoundary>
<AuthProvider>
<AppProvider>
<PolkadotProvider endpoint="ws://127.0.0.1:9944">
<PolkadotProvider endpoint={endpoint}>
<WalletProvider>
<WebSocketProvider>
<IdentityProvider>
@@ -65,63 +78,64 @@ function App() {
<ReferralProvider>
<Router>
<ReferralHandler />
<Routes>
<Route path="/login" element={<Login />} />
<Route path="/email-verification" element={<EmailVerification />} />
<Route path="/reset-password" element={<PasswordReset />} />
<Route path="/" element={<Index />} />
<Route path="/be-citizen" element={<BeCitizen />} />
<Route path="/citizens" element={<Citizens />} />
<Route path="/citizens/issues" element={<CitizensIssues />} />
<Route path="/citizens/government" element={<GovernmentEntrance />} />
<Route path="/dashboard" element={
<ProtectedRoute>
<Dashboard />
</ProtectedRoute>
} />
<Route path="/profile/settings" element={
<ProtectedRoute>
<ProfileSettings />
</ProtectedRoute>
} />
<Route path="/admin" element={
<ProtectedRoute requireAdmin>
<AdminPanel />
</ProtectedRoute>
} />
<Route path="/wallet" element={
<ProtectedRoute>
<WalletDashboard />
</ProtectedRoute>
} />
<Route path="/reserves" element={
<ProtectedRoute>
<ReservesDashboardPage />
</ProtectedRoute>
} />
<Route path="/elections" element={
<ProtectedRoute>
<Elections />
</ProtectedRoute>
} />
<Route path="/education" element={
<ProtectedRoute>
<EducationPlatform />
</ProtectedRoute>
} />
<Route path="/p2p" element={
<ProtectedRoute>
<P2PPlatform />
</ProtectedRoute>
} />
<Route path="/dex" element={
<ProtectedRoute>
<DEXDashboard />
</ProtectedRoute>
} />
<Route path="*" element={<NotFound />} />
</Routes>
<Suspense fallback={<PageLoader />}>
<Routes>
<Route path="/login" element={<Login />} />
<Route path="/email-verification" element={<EmailVerification />} />
<Route path="/reset-password" element={<PasswordReset />} />
<Route path="/" element={<Index />} />
<Route path="/be-citizen" element={<BeCitizen />} />
<Route path="/citizens" element={<Citizens />} />
<Route path="/citizens/issues" element={<CitizensIssues />} />
<Route path="/citizens/government" element={<GovernmentEntrance />} />
<Route path="/dashboard" element={
<ProtectedRoute>
<Dashboard />
</ProtectedRoute>
} />
<Route path="/profile/settings" element={
<ProtectedRoute>
<ProfileSettings />
</ProtectedRoute>
} />
<Route path="/admin" element={
<ProtectedRoute requireAdmin>
<AdminPanel />
</ProtectedRoute>
} />
<Route path="/wallet" element={
<ProtectedRoute>
<WalletDashboard />
</ProtectedRoute>
} />
<Route path="/reserves" element={
<ProtectedRoute>
<ReservesDashboardPage />
</ProtectedRoute>
} />
<Route path="/elections" element={
<ProtectedRoute>
<Elections />
</ProtectedRoute>
} />
<Route path="/education" element={
<ProtectedRoute>
<EducationPlatform />
</ProtectedRoute>
} />
<Route path="/p2p" element={
<ProtectedRoute>
<P2PPlatform />
</ProtectedRoute>
} />
<Route path="/dex" element={
<ProtectedRoute>
<DEXDashboard />
</ProtectedRoute>
} />
<Route path="*" element={<NotFound />} />
</Routes>
</Suspense>
</Router>
</ReferralProvider>
</DashboardProvider>