chore: rename Explore directory to Tokens (#4388)

* rename

* move file

src/components/Explore/TokenDetails/LoadingTokenDetail.tsx → src/components/Tokens/TokenDetails/LoadingTokenDetail.tsx

 import styled, { useTheme } from 'styled-components/macro'
 
-import { DeltaContainer, TokenPrice } from '../../Charts/PriceChart'
 import { LoadingBubble } from '../loading'
+import { DeltaContainer, TokenPrice } from './PriceChart'
 import {
   AboutHeader,
   AboutSection,

src/components/Charts/PriceChart.tsx → src/components/Tokens/TokenDetails/PriceChart.tsx

@@ -3,7 +3,7 @@ import { localPoint } from '@visx/event'
 import { EventType } from '@visx/event/lib/types'
 import { GlyphCircle } from '@visx/glyph'
 import { Line } from '@visx/shape'
-import { filterTimeAtom } from 'components/Explore/state'
+import { filterTimeAtom } from 'components/Tokens/state'
 import { bisect, curveBasis, NumberValue, scaleLinear } from 'd3'
 import { useActiveLocale } from 'hooks/useActiveLocale'
 import { TimePeriod } from 'hooks/useExplorePageQuery'
@@ -22,8 +22,8 @@ import {
   weekFormatter,
 } from 'utils/formatChartTimes'
 
-import data from './data.json'
-import LineChart from './LineChart'
+import data from '../../Charts/data.json'
+import LineChart from '../../Charts/LineChart'
 
 // TODO: This should be combined with the logic in TimeSelector.
 const TIME_DISPLAYS: [TimePeriod, string][] = [

src/components/Explore/TokenDetails/TokenDetail.tsx → src/components/Tokens/TokenDetails/TokenDetail.tsx

 import { Trans } from '@lingui/macro'
 import { ParentSize } from '@visx/responsive'
-import PriceChart from 'components/Charts/PriceChart'
 import CurrencyLogo from 'components/CurrencyLogo'
+import PriceChart from 'components/Tokens/TokenDetails/PriceChart'
 import { VerifiedIcon } from 'components/TokenSafety/TokenSafetyIcon'
 import TokenSafetyModal from 'components/TokenSafety/TokenSafetyModal'
 import { getChainInfo } from 'constants/chainInfo'

src/components/Explore/TokenTable/TokenTable.tsx → src/components/Tokens/TokenTable/TokenTable.tsx

@@ -5,7 +5,7 @@ import {
   showFavoritesAtom,
   sortCategoryAtom,
   sortDirectionAtom,
-} from 'components/Explore/state'
+} from 'components/Tokens/state'
 import { useAllTokens } from 'hooks/Tokens'
 import { TimePeriod, TokenData } from 'hooks/useExplorePageQuery'
 import { useAtomValue } from 'jotai/utils'

src/pages/App.tsx

@@ -29,7 +29,6 @@ import { RedirectDuplicateTokenIds } from './AddLiquidity/redirects'
 import { RedirectDuplicateTokenIdsV2 } from './AddLiquidityV2/redirects'
 import Earn from './Earn'
 import Manage from './Earn/Manage'
-import Explore from './Explore'
 import MigrateV2 from './MigrateV2'
 import MigrateV2Pair from './MigrateV2/MigrateV2Pair'
 import Pool from './Pool'
@@ -40,6 +39,7 @@ import RemoveLiquidity from './RemoveLiquidity'
 import RemoveLiquidityV3 from './RemoveLiquidity/V3'
 import Swap from './Swap'
 import { OpenClaimAddressModalAndRedirectToSwap, RedirectPathToSwapOnly, RedirectToSwap } from './Swap/redirects'
+import Tokens from './Tokens'
 
 const TokenDetails = lazy(() => import('./TokenDetails'))
 const Vote = lazy(() => import('./Vote'))
@@ -158,7 +158,7 @@ export default function App() {
                 <Routes>
                   {tokensFlag === TokensVariant.Enabled && (
                     <>
-                      <Route path="/tokens" element={<Explore />} />
+                      <Route path="/tokens" element={<Tokens />} />
                       <Route path="/tokens/:tokenAddress" element={<TokenDetails />} />
                     </>
                   )}

src/pages/TokenDetails/index.tsx

@@ -5,12 +5,12 @@ import {
   MAX_WIDTH_MEDIA_BREAKPOINT,
   MOBILE_MEDIA_BREAKPOINT,
   SMALL_MEDIA_BREAKPOINT,
-} from 'components/Explore/constants'
-import BalanceSummary from 'components/Explore/TokenDetails/BalanceSummary'
-import FooterBalanceSummary from 'components/Explore/TokenDetails/FooterBalanceSummary'
-import LoadingTokenDetail from 'components/Explore/TokenDetails/LoadingTokenDetail'
-import NetworkBalance from 'components/Explore/TokenDetails/NetworkBalance'
-import TokenDetail from 'components/Explore/TokenDetails/TokenDetail'
+} from 'components/Tokens/constants'
+import BalanceSummary from 'components/Tokens/TokenDetails/BalanceSummary'
+import FooterBalanceSummary from 'components/Tokens/TokenDetails/FooterBalanceSummary'
+import LoadingTokenDetail from 'components/Tokens/TokenDetails/LoadingTokenDetail'
+import NetworkBalance from 'components/Tokens/TokenDetails/NetworkBalance'
+import TokenDetail from 'components/Tokens/TokenDetails/TokenDetail'
 import TokenSafetyMessage from 'components/TokenSafety/TokenSafetyMessage'
 import { getChainInfo } from 'constants/chainInfo'
 import { L1_CHAIN_IDS, L2_CHAIN_IDS, SupportedChainId, TESTNET_CHAIN_IDS } from 'constants/chains'

src/pages/Explore/index.tsx → src/pages/Tokens/index.tsx

 import { PageName } from 'components/AmplitudeAnalytics/constants'
 import { Trace } from 'components/AmplitudeAnalytics/Trace'
-import { MAX_WIDTH_MEDIA_BREAKPOINT, MEDIUM_MEDIA_BREAKPOINT } from 'components/Explore/constants'
-import { favoritesAtom, filterStringAtom } from 'components/Explore/state'
-import FavoriteButton from 'components/Explore/TokenTable/FavoriteButton'
-import NetworkFilter from 'components/Explore/TokenTable/NetworkFilter'
-import SearchBar from 'components/Explore/TokenTable/SearchBar'
-import TimeSelector from 'components/Explore/TokenTable/TimeSelector'
-import TokenTable from 'components/Explore/TokenTable/TokenTable'
+import { MAX_WIDTH_MEDIA_BREAKPOINT, MEDIUM_MEDIA_BREAKPOINT } from 'components/Tokens/constants'
+import { favoritesAtom, filterStringAtom } from 'components/Tokens/state'
+import FavoriteButton from 'components/Tokens/TokenTable/FavoriteButton'
+import NetworkFilter from 'components/Tokens/TokenTable/NetworkFilter'
+import SearchBar from 'components/Tokens/TokenTable/SearchBar'
+import TimeSelector from 'components/Tokens/TokenTable/TimeSelector'
+import TokenTable from 'components/Tokens/TokenTable/TokenTable'
 import useExplorePageQuery from 'hooks/useExplorePageQuery'
 import { useAtomValue, useResetAtom } from 'jotai/utils'
 import { useEffect } from 'react'
@@ -58,7 +58,7 @@ const FiltersWrapper = styled.div`
   }
 `
 
-const Explore = () => {
+const Tokens = () => {
   const favoriteTokens = useAtomValue<string[]>(favoritesAtom)
   const { data, error, loading } = useExplorePageQuery(favoriteTokens)
   const resetFilterString = useResetAtom(filterStringAtom)
@@ -90,4 +90,4 @@ const Explore = () => {
   )
 }
 
-export default Explore
+export default Tokens

src/theme/components.tsx

 import { Trans } from '@lingui/macro'
 import { outboundLink } from 'components/analytics'
-import { MOBILE_MEDIA_BREAKPOINT } from 'components/Explore/constants'
+import { MOBILE_MEDIA_BREAKPOINT } from 'components/Tokens/constants'
 import useCopyClipboard from 'hooks/useCopyClipboard'
 import React, { forwardRef, HTMLProps, ReactNode, useCallback, useImperativeHandle } from 'react'
 import {