refactor: move useSyncChainQuery to NetworkSelector (#4353)

src/components/Header/NetworkSelector.tsx

@@ -3,6 +3,7 @@ import { useWeb3React } from '@web3-react/core'
 import { getChainInfo } from 'constants/chainInfo'
 import { SupportedChainId } from 'constants/chains'
 import useSelectChain from 'hooks/useSelectChain'
+import useSyncChainQuery from 'hooks/useSyncChainQuery'
 import { darken } from 'polished'
 import { useRef } from 'react'
 import { AlertTriangle, ArrowDownCircle, ChevronDown } from 'react-feather'
@@ -291,6 +292,7 @@ export default function NetworkSelector() {
   const info = getChainInfo(chainId)
 
   const selectChain = useSelectChain()
+  useSyncChainQuery()
 
   if (!chainId || !provider) {
     return null

src/pages/App.tsx

@@ -6,7 +6,6 @@ import TopLevelModals from 'components/TopLevelModals'
 import { useFeatureFlagsIsLoaded } from 'featureFlags'
 import { ExploreVariant, useExploreFlag } from 'featureFlags/flags/explore'
 import ApeModeQueryParamReader from 'hooks/useApeModeQueryParamReader'
-import useSyncChainQuery from 'hooks/useSyncChainQuery'
 import { lazy, Suspense, useEffect } from 'react'
 import { Navigate, Route, Routes, useLocation } from 'react-router-dom'
 import { useIsDarkMode } from 'state/user/hooks'
@@ -115,8 +114,6 @@ export default function App() {
   useAnalyticsReporter()
   initializeAnalytics()
 
-  useSyncChainQuery()
-
   useEffect(() => {
     window.scrollTo(0, 0)
   }, [pathname])