fix: add redirect from /tokens to /tokens/ethereum (#4816)

src/pages/App.tsx

@@ -169,15 +169,17 @@ export default function App() {
                   {tokensFlag === TokensVariant.Enabled && (
                     <>
                       <Route
-                        path="/tokens/:chainName"
+                        path="tokens"
                         element={
                           <Suspense fallback={<LoadingTokens />}>
                             <Tokens />
                           </Suspense>
                         }
-                      />
+                      >
+                        <Route path=":chainName" />
+                      </Route>
                       <Route
-                        path="/tokens/:chainName/:tokenAddress"
+                        path="tokens/:chainName/:tokenAddress"
                         element={
                           <Suspense fallback={<LoadingTokenDetails />}>
                             <TokenDetails />

src/pages/Tokens/index.tsx

@@ -9,11 +9,11 @@ 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 } from 'graphql/data/util'
+import { isValidBackendChainName, useGlobalChainName } from 'graphql/data/util'
 import { useOnGlobalChainSwitch } from 'hooks/useGlobalChainSwitch'
 import { useResetAtom } from 'jotai/utils'
 import { useEffect } from 'react'
-import { useLocation, useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate, useParams } from 'react-router-dom'
 import styled from 'styled-components/macro'
 import { ThemedText } from 'theme'
 
@@ -70,13 +70,24 @@ const FiltersWrapper = styled.div`
 const Tokens = () => {
   const resetFilterString = useResetAtom(filterStringAtom)
   const location = useLocation()
+  const navigate = useNavigate()
+  const { chainName } = useParams<{ chainName?: string }>()
+  const globalChainName = useGlobalChainName()
+
   useEffect(() => {
     resetFilterString()
   }, [location, resetFilterString])
 
-  const navigate = useNavigate()
+  useEffect(() => {
+    if (!chainName) {
+      navigate(`/tokens/${globalChainName.toLowerCase()}`)
+    }
+  }, [chainName, globalChainName, navigate])
+
   useOnGlobalChainSwitch((chain) => {
-    if (isValidBackendChainName(chain)) navigate(`/tokens/${chain.toLowerCase()}`)
+    if (isValidBackendChainName(chain)) {
+      navigate(`/tokens/${chain.toLowerCase()}`)
+    }
   })
 
   return (