/ src / contexts / networkcontext.tsx
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 };