networkcontext.tsx
1 "use client" 2 import { createContext, useContext, useState, useEffect, ReactNode } from 'react' 3 import { getNetworkConfig, getDefaultNetwork, type NetworkType, type NetworkConfig } from '@/lib/config' 4 interface NetCtx { 5 currentNetwork: NetworkType; 6 networkInfo: NetworkConfig; 7 switchNetwork: (network: NetworkType) => void; 8 isMainnet: boolean; 9 isTestnet: boolean; 10 } 11 12 const NetContext = createContext<NetCtx | undefined>(undefined) 13 14 interface NetProviderProps { 15 children: ReactNode 16 } 17 18 export function NetworkProvider({ children }: NetProviderProps) { 19 // Always start with default to avoid hydration mismatch 20 const [currentNetwork, setCurrentNetwork] = useState<NetworkType>(getDefaultNetwork()); 21 const [isClient, setIsClient] = useState(false); 22 23 // Restore from localStorage after mount (client-side only) 24 useEffect(() => { 25 setIsClient(true); 26 if (typeof window !== 'undefined') { 27 const saved = localStorage.getItem('espresso-network'); 28 if (saved === 'mainnet' || saved === 'testnet') { 29 setCurrentNetwork(saved as NetworkType); 30 // Notify services of restored network 31 import('@/services/api/main').then(m => m.setCurrentNetwork(saved as NetworkType)); 32 import('@/services/api/discovery').then(m => m.setCurrentNetwork(saved as NetworkType)); 33 } 34 } 35 }, []); 36 37 const networkInfo = getNetworkConfig(currentNetwork); 38 const isMainnet = currentNetwork === 'mainnet'; 39 const isTestnet = currentNetwork === 'testnet'; 40 41 const switchNetwork = async (network: NetworkType) => { 42 console.log(`Switching from ${currentNetwork} to ${network}`); 43 44 // CRITICAL: Update service layers FIRST before changing UI state 45 // This ensures any API calls use the correct network 46 await Promise.all([ 47 import('@/services/api/main').then(m => m.setCurrentNetwork(network)), 48 import('@/services/api/discovery').then(m => m.setCurrentNetwork(network)) 49 ]); 50 51 // Now update the UI state 52 setCurrentNetwork(network); 53 54 if (typeof window !== 'undefined') { 55 localStorage.setItem('espresso-network', network); 56 } 57 58 // Emit event for WebSocket and data refetch 59 if (typeof window !== 'undefined') { 60 window.dispatchEvent(new CustomEvent('network-changed', { 61 detail: { network, config: getNetworkConfig(network) } 62 })); 63 } 64 }; 65 66 useEffect(() => { 67 console.log('Network:', currentNetwork, networkInfo); 68 }, [currentNetwork]); 69 70 return ( 71 <NetContext.Provider value={{ 72 currentNetwork, 73 networkInfo, 74 switchNetwork, 75 isMainnet, 76 isTestnet 77 }}> 78 {children} 79 </NetContext.Provider> 80 ); 81 } 82 83 export function useNetwork(): NetCtx { 84 const context = useContext(NetContext) 85 if (context === undefined) { 86 throw new Error('useNetwork must be used within NetworkProvider'); 87 } 88 return context; 89 } 90 91 export type { NetworkType, NetworkConfig };