chore: remove more unused exports (#5515)

* chore: remove more unused exports

* remove surveypopup

* rm NewMenu

cypress/support/ethereum.ts

@@ -12,12 +12,7 @@ import { Wallet } from '@ethersproject/wallet'
 const TEST_PRIVATE_KEY = '0xe580410d7c37d26c6ad1a837bbae46bc27f9066a466fb3a66e770523b4666d19'
 
 // address of the above key
-export const TEST_ADDRESS_NEVER_USE = new Wallet(TEST_PRIVATE_KEY).address
-
-export const TEST_ADDRESS_NEVER_USE_SHORTENED = `${TEST_ADDRESS_NEVER_USE.substr(
-  0,
-  6
-)}...${TEST_ADDRESS_NEVER_USE.substr(-4, 4)}`
+const TEST_ADDRESS_NEVER_USE = new Wallet(TEST_PRIVATE_KEY).address
 
 const provider = new JsonRpcProvider('https://goerli.infura.io/v3/4bf032f2d38a4ed6bb975b80d6340847', 4)
 const signer = new Wallet(TEST_PRIVATE_KEY, provider)

src/components/Button/index.tsx

@@ -7,7 +7,7 @@ import { RowBetween } from '../Row'
 
 type ButtonProps = Omit<ButtonPropsOriginal, 'css'>
 
-export const BaseButton = styled(RebassButton)<
+const BaseButton = styled(RebassButton)<
   {
     padding?: string
     width?: string

src/components/DowntimeWarning/index.tsx

-import { Trans } from '@lingui/macro'
-import { useWeb3React } from '@web3-react/core'
-import { SupportedChainId } from 'constants/chains'
-import { AlertOctagon } from 'react-feather'
-import styled from 'styled-components/macro'
-import { ExternalLink } from 'theme'
-
-import { isL2ChainId } from '../../utils/chains'
-
-const Root = styled.div`
-  background-color: ${({ theme }) => (theme.darkMode ? '#888D9B' : '#CED0D9')};
-  border-radius: 18px;
-  color: black;
-  display: flex;
-  flex-direction: row;
-  font-size: 14px;
-  margin: 12px auto;
-  padding: 16px;
-  width: 100%;
-  max-width: 880px;
-`
-const WarningIcon = styled(AlertOctagon)`
-  margin: auto 16px auto 0;
-  min-height: 22px;
-  min-width: 22px;
-`
-const ReadMoreLink = styled(ExternalLink)`
-  color: black;
-  text-decoration: underline;
-`
-
-function Wrapper({ children }: { children: React.ReactNode }) {
-  return (
-    <Root>
-      <WarningIcon />
-      <div>{children}</div>
-    </Root>
-  )
-}
-
-/**
- * Shows a downtime warning for the network if it's relevant
- */
-export default function DowntimeWarning() {
-  const { chainId } = useWeb3React()
-  if (!isL2ChainId(chainId)) {
-    return null
-  }
-
-  switch (chainId) {
-    case SupportedChainId.OPTIMISM:
-    case SupportedChainId.OPTIMISM_GOERLI:
-      return (
-        <Wrapper>
-          <Trans>
-            Optimism is in Beta and may experience downtime. Optimism expects planned downtime to upgrade the network in
-            the near future. During downtime, your position will not earn fees and you will be unable to remove
-            liquidity.{' '}
-            <ReadMoreLink href="https://help.uniswap.org/en/articles/5406082-what-happens-if-the-optimistic-ethereum-network-experiences-downtime">
-              Read more.
-            </ReadMoreLink>
-          </Trans>
-        </Wrapper>
-      )
-    case SupportedChainId.ARBITRUM_ONE:
-    case SupportedChainId.ARBITRUM_RINKEBY:
-      return (
-        <Wrapper>
-          <Trans>
-            Arbitrum is in Beta and may experience downtime. During downtime, your position will not earn fees and you
-            will be unable to remove liquidity.{' '}
-            <ReadMoreLink href="https://help.uniswap.org/en/articles/5576122-arbitrum-network-downtime">
-              Read more.
-            </ReadMoreLink>
-          </Trans>
-        </Wrapper>
-      )
-
-    default:
-      return null
-  }
-}

src/components/LiquidityChartRangeInput/Chart.tsx

@@ -9,8 +9,8 @@ import { Line } from './Line'
 import { ChartEntry, LiquidityChartRangeInputProps } from './types'
 import Zoom, { ZoomOverlay } from './Zoom'
 
-export const xAccessor = (d: ChartEntry) => d.price0
-export const yAccessor = (d: ChartEntry) => d.activeLiquidity
+const xAccessor = (d: ChartEntry) => d.price0
+const yAccessor = (d: ChartEntry) => d.activeLiquidity
 
 export function Chart({
   id = 'liquidityChartRangeInput',

src/components/LiquidityChartRangeInput/types.ts

@@ -5,12 +5,12 @@ export interface ChartEntry {
   price0: number
 }
 
-export interface Dimensions {
+interface Dimensions {
   width: number
   height: number
 }
 
-export interface Margins {
+interface Margins {
   top: number
   right: number
   bottom: number

src/components/Logo/AssetLogo.tsx

@@ -3,7 +3,7 @@ import useTokenLogoSource from 'hooks/useAssetLogoSource'
 import React from 'react'
 import styled from 'styled-components/macro'
 
-export const MissingImageLogo = styled.div<{ size?: string }>`
+const MissingImageLogo = styled.div<{ size?: string }>`
   --size: ${({ size }) => size};
   border-radius: 100px;
   color: ${({ theme }) => theme.textPrimary};

src/components/Menu/index.tsx

-// eslint-disable-next-line no-restricted-imports
-import { t, Trans } from '@lingui/macro'
-import { useWeb3React } from '@web3-react/core'
-import FeatureFlagModal from 'components/FeatureFlagModal/FeatureFlagModal'
-import { PrivacyPolicyModal } from 'components/PrivacyPolicy'
-import { L2_CHAIN_IDS } from 'constants/chains'
-import { LOCALE_LABEL, SUPPORTED_LOCALES, SupportedLocale } from 'constants/locales'
-import { useActiveLocale } from 'hooks/useActiveLocale'
-import { useLocationLinkProps } from 'hooks/useLocationLinkProps'
-import { FunctionComponent, PropsWithChildren, useEffect, useRef, useState } from 'react'
-import {
-  BookOpen,
-  Check,
-  ChevronLeft,
-  Coffee,
-  FileText,
-  Flag,
-  Globe,
-  HelpCircle,
-  Info,
-  MessageCircle,
-  Moon,
-  Sun,
-} from 'react-feather'
+import { FunctionComponent, PropsWithChildren, useRef } from 'react'
 import { Link } from 'react-router-dom'
-import { useDarkModeManager } from 'state/user/hooks'
 import styled, { css } from 'styled-components/macro'
-import { isDevelopmentEnv, isStagingEnv } from 'utils/env'
 
 import { ReactComponent as MenuIcon } from '../../assets/images/menu.svg'
 import { useOnClickOutside } from '../../hooks/useOnClickOutside'
 import { useModalIsOpen, useToggleModal } from '../../state/application/hooks'
 import { ApplicationModal } from '../../state/application/reducer'
 import { ExternalLink } from '../../theme'
-import { ButtonPrimary } from '../Button'
 
 export enum FlyoutAlignment {
   LEFT = 'LEFT',
@@ -45,37 +19,6 @@ const StyledMenuIcon = styled(MenuIcon)`
   }
 `
 
-const StyledMenuButton = styled.button`
-  width: 100%;
-  height: 100%;
-  border: none;
-  background-color: transparent;
-  margin: 0;
-  padding: 0;
-  height: 40px;
-  background-color: ${({ theme }) => theme.deprecated_bg0};
-  border: 1px solid ${({ theme }) => theme.deprecated_bg0};
-  padding: 0.15rem 0.5rem;
-  border-radius: 16px;
-
-  :hover,
-  :focus {
-    cursor: pointer;
-    outline: none;
-    border: 1px solid ${({ theme }) => theme.deprecated_bg3};
-  }
-
-  svg {
-    margin-top: 2px;
-  }
-`
-
-const UNIbutton = styled(ButtonPrimary)`
-  background-color: ${({ theme }) => theme.deprecated_bg3};
-  background: radial-gradient(174.47% 188.91% at 1.84% 0%, #ff007a 0%, #2172e5 100%), #edeef2;
-  border: none;
-`
-
 const StyledMenu = styled.div`
   display: flex;
   justify-content: center;
@@ -136,6 +79,8 @@ const InternalMenuItem = styled(Link)`
   flex: 1;
   padding: 0.5rem 0.5rem;
   color: ${({ theme }) => theme.deprecated_text2};
+  width: max-content;
+  text-decoration: none;
   :hover {
     color: ${({ theme }) => theme.deprecated_text1};
     cursor: pointer;
@@ -146,180 +91,7 @@ const InternalMenuItem = styled(Link)`
   }
 `
 
-const InternalLinkMenuItem = styled(InternalMenuItem)`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 0.5rem 0.5rem;
-  justify-content: space-between;
-  text-decoration: none;
-  :hover {
-    color: ${({ theme }) => theme.deprecated_text1};
-    cursor: pointer;
-    text-decoration: none;
-  }
-`
-
-const ToggleMenuItem = styled.button`
-  background-color: transparent;
-  margin: 0;
-  padding: 0;
-  border: none;
-  display: flex;
-  flex: 1;
-  flex-direction: row;
-  align-items: center;
-  padding: 0.5rem 0.5rem;
-  justify-content: space-between;
-  font-size: 1rem;
-  font-weight: 500;
-  color: ${({ theme }) => theme.deprecated_text2};
-  :hover {
-    color: ${({ theme }) => theme.deprecated_text1};
-    cursor: pointer;
-    text-decoration: none;
-  }
-`
-
-function LanguageMenuItem({ locale, active, key }: { locale: SupportedLocale; active: boolean; key: string }) {
-  const { to, onClick } = useLocationLinkProps(locale)
-
-  if (!to) return null
-
-  return (
-    <InternalLinkMenuItem onClick={onClick} key={key} to={to}>
-      <div>{LOCALE_LABEL[locale]}</div>
-      {active && <Check opacity={0.6} size={16} />}
-    </InternalLinkMenuItem>
-  )
-}
-
-function LanguageMenu({ close }: { close: () => void }) {
-  const activeLocale = useActiveLocale()
-
-  return (
-    <MenuFlyout>
-      <ToggleMenuItem onClick={close}>
-        <ChevronLeft size={16} />
-      </ToggleMenuItem>
-      {SUPPORTED_LOCALES.map((locale) => (
-        <LanguageMenuItem locale={locale} active={activeLocale === locale} key={locale} />
-      ))}
-    </MenuFlyout>
-  )
-}
-
-export default function Menu() {
-  const { account, chainId } = useWeb3React()
-
-  const node = useRef<HTMLDivElement>()
-  const open = useModalIsOpen(ApplicationModal.MENU)
-  const toggleMenu = useToggleModal(ApplicationModal.MENU)
-  useOnClickOutside(node, open ? toggleMenu : undefined)
-  const togglePrivacyPolicy = useToggleModal(ApplicationModal.PRIVACY_POLICY)
-  const openFeatureFlagsModal = useToggleModal(ApplicationModal.FEATURE_FLAGS)
-  const openClaimModal = useToggleModal(ApplicationModal.ADDRESS_CLAIM)
-  const showUNIClaimOption = Boolean(!!account && !!chainId && !L2_CHAIN_IDS.includes(chainId))
-
-  const [darkMode, toggleDarkMode] = useDarkModeManager()
-
-  const [menu, setMenu] = useState<'main' | 'lang'>('main')
-
-  useEffect(() => {
-    setMenu('main')
-  }, [open])
-
-  return (
-    <>
-      {/* // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/30451 */}
-      <StyledMenu ref={node as any}>
-        <StyledMenuButton onClick={toggleMenu} aria-label={t`Menu`}>
-          <StyledMenuIcon />
-        </StyledMenuButton>
-
-        {open &&
-          (() => {
-            switch (menu) {
-              case 'lang':
-                return <LanguageMenu close={() => setMenu('main')} />
-              case 'main':
-              default:
-                return (
-                  <MenuFlyout>
-                    <MenuItem href="https://uniswap.org/">
-                      <div>
-                        <Trans>About</Trans>
-                      </div>
-                      <Info opacity={0.6} size={16} />
-                    </MenuItem>
-                    <MenuItem href="https://help.uniswap.org/">
-                      <div>
-                        <Trans>Help Center</Trans>
-                      </div>
-                      <HelpCircle opacity={0.6} size={16} />
-                    </MenuItem>
-                    <MenuItem href="https://uniswap.canny.io/feature-requests">
-                      <div>
-                        <Trans>Request Features</Trans>
-                      </div>
-                      <Coffee opacity={0.6} size={16} />
-                    </MenuItem>
-                    <MenuItem href="https://discord.gg/FCfyBSbCU5">
-                      <div>
-                        <Trans>Discord</Trans>
-                      </div>
-                      <MessageCircle opacity={0.6} size={16} />
-                    </MenuItem>
-                    <ToggleMenuItem onClick={() => setMenu('lang')}>
-                      <div>
-                        <Trans>Language</Trans>
-                      </div>
-                      <Globe opacity={0.6} size={16} />
-                    </ToggleMenuItem>
-                    <ToggleMenuItem onClick={() => toggleDarkMode()}>
-                      <div>{darkMode ? <Trans>Light Theme</Trans> : <Trans>Dark Theme</Trans>}</div>
-                      {darkMode ? <Sun opacity={0.6} size={16} /> : <Moon opacity={0.6} size={16} />}
-                    </ToggleMenuItem>
-                    <MenuItem href="https://docs.uniswap.org/">
-                      <div>
-                        <Trans>Docs</Trans>
-                      </div>
-                      <BookOpen opacity={0.6} size={16} />
-                    </MenuItem>
-                    <ToggleMenuItem onClick={() => togglePrivacyPolicy()}>
-                      <div>
-                        <Trans>Legal & Privacy</Trans>
-                      </div>
-                      <FileText opacity={0.6} size={16} />
-                    </ToggleMenuItem>
-                    {(isDevelopmentEnv() || isStagingEnv()) && (
-                      <ToggleMenuItem onClick={openFeatureFlagsModal}>
-                        Feature Flags <Flag opacity={0.6} size={16} />
-                      </ToggleMenuItem>
-                    )}
-                    {showUNIClaimOption && (
-                      <UNIbutton
-                        onClick={openClaimModal}
-                        padding="8px 16px"
-                        width="100%"
-                        $borderRadius="12px"
-                        mt="0.5rem"
-                      >
-                        <Trans>Claim UNI</Trans>
-                      </UNIbutton>
-                    )}
-                  </MenuFlyout>
-                )
-            }
-          })()}
-      </StyledMenu>
-      <PrivacyPolicyModal />
-      <FeatureFlagModal />
-    </>
-  )
-}
-
-interface NewMenuProps {
+interface MenuProps {
   flyoutAlignment?: FlyoutAlignment
   ToggleUI?: FunctionComponent<PropsWithChildren<unknown>>
   menuItems: {
@@ -329,20 +101,12 @@ interface NewMenuProps {
   }[]
 }
 
-const NewMenuFlyout = styled(MenuFlyout)`
-  top: 3rem !important;
-`
-const NewMenuItem = styled(InternalMenuItem)`
-  width: max-content;
-  text-decoration: none;
-`
-
 const ExternalMenuItem = styled(MenuItem)`
   width: max-content;
   text-decoration: none;
 `
 
-export const NewMenu = ({ flyoutAlignment = FlyoutAlignment.RIGHT, ToggleUI, menuItems, ...rest }: NewMenuProps) => {
+export const Menu = ({ flyoutAlignment = FlyoutAlignment.RIGHT, ToggleUI, menuItems, ...rest }: MenuProps) => {
   const node = useRef<HTMLDivElement>()
   const open = useModalIsOpen(ApplicationModal.POOL_OVERVIEW_OPTIONS)
   const toggle = useToggleModal(ApplicationModal.POOL_OVERVIEW_OPTIONS)
@@ -352,19 +116,19 @@ export const NewMenu = ({ flyoutAlignment = FlyoutAlignment.RIGHT, ToggleUI, men
     <StyledMenu ref={node as any} {...rest}>
       <ToggleElement onClick={toggle} />
       {open && (
-        <NewMenuFlyout flyoutAlignment={flyoutAlignment}>
+        <MenuFlyout flyoutAlignment={flyoutAlignment}>
           {menuItems.map(({ content, link, external }, i) =>
             external ? (
               <ExternalMenuItem href={link} key={i}>
                 {content}
               </ExternalMenuItem>
             ) : (
-              <NewMenuItem to={link} key={i}>
+              <InternalMenuItem to={link} key={i}>
                 {content}
-              </NewMenuItem>
+              </InternalMenuItem>
             )
           )}
-        </NewMenuFlyout>
+        </MenuFlyout>
       )}
     </StyledMenu>
   )

src/components/NavBar/SearchBarDropdown.tsx

@@ -34,7 +34,7 @@ interface SearchBarDropdownSectionProps {
   eventProperties: Record<string, unknown>
 }
 
-export const SearchBarDropdownSection = ({
+const SearchBarDropdownSection = ({
   toggleOpen,
   suggestions,
   header,

src/components/NetworkAlert/NetworkAlert.tsx

@@ -15,13 +15,6 @@ const L2Icon = styled.img`
   margin-right: 16px;
 `
 
-export const Controls = styled.div`
-  align-items: center;
-  display: flex;
-  justify-content: flex-start;
-  padding: 0 20px 20px 20px;
-`
-
 const BodyText = styled.div`
   color: ${({ color }) => color};
   display: flex;
@@ -46,7 +39,7 @@ const SHOULD_SHOW_ALERT = {
   [SupportedChainId.CELO_ALFAJORES]: true,
 }
 
-export type NetworkAlertChains = keyof typeof SHOULD_SHOW_ALERT
+type NetworkAlertChains = keyof typeof SHOULD_SHOW_ALERT
 
 const BG_COLORS_BY_DARK_MODE_AND_CHAIN_ID: {
   [darkMode in 'dark' | 'light']: { [chainId in NetworkAlertChains]: string }

src/components/Popups/SurveyPopup.tsx

-import { Trans } from '@lingui/macro'
-import { sendEvent } from 'components/analytics'
-import { AutoColumn } from 'components/Column'
-import { RowFixed } from 'components/Row'
-import useCurrentBlockTimestamp from 'hooks/useCurrentBlockTimestamp'
-import { useEffect } from 'react'
-import { MessageCircle, X } from 'react-feather'
-import { useShowSurveyPopup } from 'state/user/hooks'
-import styled, { useTheme } from 'styled-components/macro'
-import { ExternalLink, ThemedText } from 'theme'
-import { Z_INDEX } from 'theme/zIndex'
-
-import BGImage from '../../assets/images/survey-orb.svg'
-
-const Wrapper = styled(AutoColumn)`
-  background: #edeef2;
-  position: relative;
-  border-radius: 12px;
-  padding: 18px;
-  max-width: 360px;
-  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
-  color: ${({ theme }) => theme.deprecated_text1};
-  overflow: hidden;
-
-  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
-    max-width: 100%;
-  `}
-`
-
-const BGOrb = styled.img`
-  position: absolute;
-  right: -64px;
-  top: -64px;
-  width: 180px;
-  z-index: ${Z_INDEX.sticky};
-`
-
-const WrappedCloseIcon = styled(X)`
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  width: 20px;
-  height: 20px;
-  stroke: #7c7c80;
-  z-index: ${Z_INDEX.fixed};
-  :hover {
-    cursor: pointer;
-    opacity: 0.8;
-  }
-`
-
-const END_TIMESTAMP = 1642272346 // Jan 15th
-
-export default function SurveyPopup() {
-  const theme = useTheme()
-  const [showPopup, setShowSurveyPopup] = useShowSurveyPopup()
-
-  // show popup to 1% of users
-  useEffect(() => {
-    // has not visited page during A/B testing if undefined
-    if (showPopup === undefined) {
-      if (Math.random() < 0.01) {
-        setShowSurveyPopup(true)
-        // log a case of succesful view
-        sendEvent({
-          category: 'Survey',
-          action: 'Saw Survey',
-        })
-      }
-    }
-  }, [setShowSurveyPopup, showPopup])
-
-  // limit survey to 24 hours based on timestamps
-  const timestamp = useCurrentBlockTimestamp()
-  const durationOver = timestamp ? timestamp.toNumber() > END_TIMESTAMP : false
-
-  return (
-    <>
-      {!showPopup || durationOver ? null : (
-        <Wrapper gap="10px">
-          <WrappedCloseIcon
-            onClick={() => {
-              sendEvent({
-                category: 'Survey',
-                action: 'Clicked Survey Link',
-              })
-              setShowSurveyPopup(false)
-            }}
-          />
-          <BGOrb src={BGImage} />
-          <ExternalLink href="https://www.surveymonkey.com/r/YGWV9VD">
-            <RowFixed>
-              <MessageCircle stroke={theme.deprecated_black} size="20px" strokeWidth="1px" />
-              <ThemedText.DeprecatedWhite fontWeight={600} color={theme.deprecated_black} ml="6px">
-                <Trans>Tell us what you think ↗</Trans>
-              </ThemedText.DeprecatedWhite>
-            </RowFixed>
-          </ExternalLink>
-          <ThemedText.DeprecatedBlack
-            style={{ zIndex: Z_INDEX.fixed }}
-            fontWeight={400}
-            fontSize="12px"
-            color={theme.deprecated_black}
-          >
-            <Trans>Take a 10 minute survey to help us improve your experience in the Uniswap app.</Trans>
-          </ThemedText.DeprecatedBlack>
-        </Wrapper>
-      )}
-    </>
-  )
-}

src/components/Popups/TransactionPopup.tsx

-import { useWeb3React } from '@web3-react/core'
-import { AlertCircle, CheckCircle } from 'react-feather'
-import styled, { useTheme } from 'styled-components/macro'
-
-import { useTransaction } from '../../state/transactions/hooks'
-import { ThemedText } from '../../theme'
-import { ExternalLink } from '../../theme'
-import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
-import { TransactionSummary } from '../AccountDetails/TransactionSummary'
-import { AutoColumn } from '../Column'
-import { AutoRow } from '../Row'
-
-const RowNoFlex = styled(AutoRow)`
-  flex-wrap: nowrap;
-`
-
-export default function TransactionPopup({ hash }: { hash: string }) {
-  const { chainId } = useWeb3React()
-
-  const tx = useTransaction(hash)
-  const theme = useTheme()
-
-  if (!tx) return null
-  const success = Boolean(tx.receipt && tx.receipt.status === 1)
-
-  return (
-    <RowNoFlex>
-      <div style={{ paddingRight: 16 }}>
-        {success ? (
-          <CheckCircle color={theme.deprecated_green1} size={24} />
-        ) : (
-          <AlertCircle color={theme.deprecated_red1} size={24} />
-        )}
-      </div>
-      <AutoColumn gap="8px">
-        <ThemedText.DeprecatedBody fontWeight={500}>
-          <TransactionSummary info={tx.info} />
-        </ThemedText.DeprecatedBody>
-        {chainId && (
-          <ExternalLink href={getExplorerLink(chainId, hash, ExplorerDataType.TRANSACTION)}>
-            View on Explorer
-          </ExternalLink>
-        )}
-      </AutoColumn>
-    </RowNoFlex>
-  )
-}

src/pages/Pool/index.tsx

@@ -4,7 +4,7 @@ import { BrowserEvent, ElementName, EventName, PageName } from '@uniswap/analyti
 import { useWeb3React } from '@web3-react/core'
 import { ButtonGray, ButtonPrimary, ButtonText } from 'components/Button'
 import { AutoColumn } from 'components/Column'
-import { FlyoutAlignment, NewMenu } from 'components/Menu'
+import { FlyoutAlignment, Menu } from 'components/Menu'
 import PositionList from 'components/PositionList'
 import { RowBetween, RowFixed } from 'components/Row'
 import { SwitchLocaleLink } from 'components/SwitchLocaleLink'
@@ -63,7 +63,7 @@ const ButtonRow = styled(RowFixed)`
     flex-direction: row-reverse;
   `};
 `
-const Menu = styled(NewMenu)`
+const PoolMenu = styled(Menu)`
   margin-left: 0;
   ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
     flex: 1 1 auto;
@@ -75,7 +75,7 @@ const Menu = styled(NewMenu)`
     width: 100%;
   }
 `
-const MenuItem = styled.div`
+const PoolMenuItem = styled.div`
   align-items: center;
   display: flex;
   justify-content: space-between;
@@ -221,40 +221,40 @@ export default function Pool() {
   const menuItems = [
     {
       content: (
-        <MenuItem>
+        <PoolMenuItem>
           <Trans>Create a pool</Trans>
           <PlusCircle size={16} />
-        </MenuItem>
+        </PoolMenuItem>
       ),
       link: '/add/ETH',
       external: false,
     },
     {
       content: (
-        <MenuItem>
+        <PoolMenuItem>
           <Trans>Migrate</Trans>
           <ChevronsRight size={16} />
-        </MenuItem>
+        </PoolMenuItem>
       ),
       link: '/migrate/v2',
       external: false,
     },
     {
       content: (
-        <MenuItem>
+        <PoolMenuItem>
           <Trans>V2 liquidity</Trans>
           <Layers size={16} />
-        </MenuItem>
+        </PoolMenuItem>
       ),
       link: '/pool/v2',
       external: false,
     },
     {
       content: (
-        <MenuItem>
+        <PoolMenuItem>
           <Trans>Learn</Trans>
           <BookOpen size={16} />
-        </MenuItem>
+        </PoolMenuItem>
       ),
       link: 'https://docs.uniswap.org/',
       external: true,
@@ -273,7 +273,7 @@ export default function Pool() {
                 </ThemedText.LargeHeader>
                 <ButtonRow>
                   {showV2Features && (
-                    <Menu
+                    <PoolMenu
                       menuItems={menuItems}
                       flyoutAlignment={FlyoutAlignment.LEFT}
                       ToggleUI={(props: any) => (