import React, { createContext, useContext, useEffect, useState } from 'react'; import { NetworksDataState } from '../types'; import { retrieveNetworksData, storeNetworkData } from '../utils/accounts'; import { DEFAULT_NETWORKS, EIP155 } from '../utils/constants'; const NetworksContext = createContext<{ networksData: NetworksDataState[]; setNetworksData: React.Dispatch>; networkType: string; setNetworkType: (networkType: string) => void; selectedNetwork?: NetworksDataState; setSelectedNetwork: React.Dispatch< React.SetStateAction >; }>({ networksData: [], setNetworksData: () => {}, networkType: '', setNetworkType: () => {}, selectedNetwork: {} as NetworksDataState, setSelectedNetwork: () => {}, }); const useNetworks = () => { const networksContext = useContext(NetworksContext); return networksContext; }; const NetworksProvider = ({ children }: { children: any }) => { const [networksData, setNetworksData] = useState([]); const [networkType, setNetworkType] = useState(EIP155); const [selectedNetwork, setSelectedNetwork] = useState(); useEffect(() => { const fetchData = async () => { const retrievedNetworks = await retrieveNetworksData(); if (retrievedNetworks.length === 0) { for (const defaultNetwork of DEFAULT_NETWORKS) { await storeNetworkData(defaultNetwork); } } const retrievedNewNetworks = await retrieveNetworksData(); setNetworksData(retrievedNewNetworks); setSelectedNetwork(retrievedNewNetworks[0]); }; if (networksData.length === 0) { fetchData(); } }, [networksData]); useEffect(() => { setSelectedNetwork(prevSelectedNetwork => { return networksData.find( networkData => networkData.networkId === prevSelectedNetwork?.networkId, ); }); }, [networksData]); return ( {children} ); }; export { useNetworks, NetworksProvider };