fix: refactors the way chainId is accessed in some places (#4818)

fix: refactors the way some data is accessed

src/components/NavBar/SuggestionRow.tsx

+import { useWeb3React } from '@web3-react/core'
 import clsx from 'clsx'
 import { L2NetworkLogo, LogoContainer } from 'components/Tokens/TokenTable/TokenRow'
 import { VerifiedIcon } from 'components/TokenSafety/TokenSafetyIcon'
 import { getChainInfo } from 'constants/chainInfo'
-import { getTokenDetailsURL, useGlobalChainId } from 'graphql/data/util'
+import { getTokenDetailsURL } from 'graphql/data/util'
 import uriToHttp from 'lib/utils/uriToHttp'
 import { Box } from 'nft/components/Box'
 import { Column, Row } from 'nft/components/Flex'
@@ -103,10 +104,10 @@ export const CollectionRow = ({
 }
 
 function useBridgedAddress(token: FungibleToken): [string | undefined, number | undefined, string | undefined] {
-  const globalChainId = useGlobalChainId()
-  const bridgedAddress = globalChainId ? token.extensions?.bridgeInfo?.[globalChainId]?.tokenAddress : undefined
-  if (bridgedAddress && globalChainId) {
-    return [bridgedAddress, globalChainId, getChainInfo(globalChainId)?.circleLogoUrl]
+  const { chainId: connectedChainId } = useWeb3React()
+  const bridgedAddress = connectedChainId ? token.extensions?.bridgeInfo?.[connectedChainId]?.tokenAddress : undefined
+  if (bridgedAddress && connectedChainId) {
+    return [bridgedAddress, connectedChainId, getChainInfo(connectedChainId)?.circleLogoUrl]
   }
   return [undefined, undefined, undefined]
 }

src/components/NavBar/index.tsx

 import { Trans } from '@lingui/macro'
+import { useWeb3React } from '@web3-react/core'
 import Web3Status from 'components/Web3Status'
 import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
-import { useGlobalChainName } from 'graphql/data/util'
+import { chainIdToBackendName } from 'graphql/data/util'
 import { Box } from 'nft/components/Box'
 import { Row } from 'nft/components/Flex'
 import { UniIcon } from 'nft/components/icons'
@@ -37,7 +38,8 @@ const MenuItem = ({ href, id, isActive, children }: MenuItemProps) => {
 const PageTabs = () => {
   const { pathname } = useLocation()
   const nftFlag = useNftFlag()
-  const chainName = useGlobalChainName()
+  const { chainId: connectedChainId } = useWeb3React()
+  const chainName = chainIdToBackendName(connectedChainId)
 
   const isPoolActive =
     pathname.startsWith('/pool') ||

src/components/Tokens/TokensBanner.tsx

 import { Trans } from '@lingui/macro'
-import { useGlobalChainName } from 'graphql/data/util'
+import { useWeb3React } from '@web3-react/core'
+import { chainIdToBackendName } from 'graphql/data/util'
 import { X } from 'react-feather'
 import { Link, useNavigate } from 'react-router-dom'
 import { useShowTokensPromoBanner } from 'state/user/hooks'
@@ -62,7 +63,8 @@ export default function TokensBanner() {
   const theme = useTheme()
   const [showTokensPromoBanner, setShowTokensPromoBanner] = useShowTokensPromoBanner()
   const navigate = useNavigate()
-  const chainName = useGlobalChainName().toLowerCase()
+  const { chainId: connectedChainId } = useWeb3React()
+  const chainName = chainIdToBackendName(connectedChainId).toLowerCase()
 
   const navigateToExplorePage = () => {
     navigate(`/tokens/${chainName}`)

src/graphql/data/util.ts

 import { NATIVE_CHAIN_ID } from 'analytics/constants'
 import { SupportedChainId } from 'constants/chains'
 import { ZERO_ADDRESS } from 'constants/misc'
-import { useAppSelector } from 'state/hooks'
 
 import { Chain, HistoryDuration } from './__generated__/TokenQuery.graphql'
 
@@ -41,13 +40,10 @@ export const CHAIN_ID_TO_BACKEND_NAME: { [key: number]: Chain } = {
   [SupportedChainId.OPTIMISM_GOERLI]: 'OPTIMISM',
 }
 
-export function useGlobalChainId() {
-  return useAppSelector((state) => state.application.chainId)
-}
-
-export function useGlobalChainName() {
-  const chainId = useGlobalChainId()
-  return chainId && CHAIN_ID_TO_BACKEND_NAME[chainId] ? CHAIN_ID_TO_BACKEND_NAME[chainId] : 'ETHEREUM'
+export function chainIdToBackendName(chainId: number | undefined) {
+  return chainId && CHAIN_ID_TO_BACKEND_NAME[chainId]
+    ? CHAIN_ID_TO_BACKEND_NAME[chainId]
+    : CHAIN_ID_TO_BACKEND_NAME[SupportedChainId.MAINNET]
 }
 
 export const URL_CHAIN_PARAM_TO_BACKEND: { [key: string]: Chain } = {

src/hooks/useGlobalChainSwitch.ts

+import { useWeb3React } from '@web3-react/core'
 import { Chain } from 'graphql/data/__generated__/TokenQuery.graphql'
-import { useGlobalChainName } from 'graphql/data/util'
+import { chainIdToBackendName } from 'graphql/data/util'
 import { useEffect, useRef } from 'react'
 
 export const useOnGlobalChainSwitch = (callback: (chain: Chain) => void) => {
-  const globalChainName = useGlobalChainName()
+  const { chainId: connectedChainId } = useWeb3React()
+  const globalChainName = chainIdToBackendName(connectedChainId)
   const prevGlobalChainRef = useRef(globalChainName)
   useEffect(() => {
     if (prevGlobalChainRef.current !== globalChainName) {

src/pages/Tokens/index.tsx

 import { Trans } from '@lingui/macro'
+import { useWeb3React } from '@web3-react/core'
 import { PageName } from 'analytics/constants'
 import { Trace } from 'analytics/Trace'
 import { MAX_WIDTH_MEDIA_BREAKPOINT, MEDIUM_MEDIA_BREAKPOINT } from 'components/Tokens/constants'
@@ -9,7 +10,7 @@ import SearchBar from 'components/Tokens/TokenTable/SearchBar'
 import TimeSelector from 'components/Tokens/TokenTable/TimeSelector'
 import TokenTable, { LoadingTokenTable } from 'components/Tokens/TokenTable/TokenTable'
 import { FavoriteTokensVariant, useFavoriteTokensFlag } from 'featureFlags/flags/favoriteTokens'
-import { isValidBackendChainName, useGlobalChainName } from 'graphql/data/util'
+import { chainIdToBackendName, isValidBackendChainName } from 'graphql/data/util'
 import { useOnGlobalChainSwitch } from 'hooks/useGlobalChainSwitch'
 import { useResetAtom } from 'jotai/utils'
 import { useEffect } from 'react'
@@ -71,18 +72,19 @@ const Tokens = () => {
   const resetFilterString = useResetAtom(filterStringAtom)
   const location = useLocation()
   const navigate = useNavigate()
-  const { chainName } = useParams<{ chainName?: string }>()
-  const globalChainName = useGlobalChainName()
+  const { chainName: chainNameParam } = useParams<{ chainName?: string }>()
+  const { chainId: connectedChainId } = useWeb3React()
+  const connectedChainName = chainIdToBackendName(connectedChainId)
 
   useEffect(() => {
     resetFilterString()
   }, [location, resetFilterString])
 
   useEffect(() => {
-    if (!chainName) {
-      navigate(`/tokens/${globalChainName.toLowerCase()}`)
+    if (!chainNameParam) {
+      navigate(`/tokens/${connectedChainName.toLowerCase()}`)
     }
-  }, [chainName, globalChainName, navigate])
+  }, [chainNameParam, connectedChainName, navigate])
 
   useOnGlobalChainSwitch((chain) => {
     if (isValidBackendChainName(chain)) {