chore: remove navBarFlag (#4941)

* chore: remove navBarFlag

* move Polling

src/components/Header/HolidayOrnament.tsx

-import { ReactElement } from 'react'
-import styled from 'styled-components/macro'
-
-import SantaHat from '../../assets/images/santa-hat.png'
-
-const SantaHatImage = styled.img`
-  position: absolute;
-  top: -4px;
-  right: -4px;
-  height: 18px;
-`
-
-const Christmas = <SantaHatImage src={SantaHat} alt="Santa hat" />
-
-const DATE_TO_ORNAMENT: { [date: string]: ReactElement } = {
-  '12-24': Christmas,
-  '12-25': Christmas,
-}
-
-const HolidayOrnament = () => {
-  // months in javascript are 0 indexed...
-  const today = `${new Date().getMonth() + 1}-${new Date().getDate()}`
-  return DATE_TO_ORNAMENT[today] || null
-}
-
-export default HolidayOrnament

src/components/Header/NetworkSelector.tsx

-import { Trans } from '@lingui/macro'
-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'
-import { useCloseModal, useModalIsOpen, useOpenModal, useToggleModal } from 'state/application/hooks'
-import { ApplicationModal } from 'state/application/reducer'
-import styled from 'styled-components/macro'
-import { ExternalLink, MEDIA_WIDTHS } from 'theme'
-import { isMobile } from 'utils/userAgent'
-
-const ActiveRowLinkList = styled.div`
-  display: flex;
-  flex-direction: column;
-  padding: 0 8px;
-  & > a {
-    align-items: center;
-    color: ${({ theme }) => theme.deprecated_text2};
-    display: flex;
-    flex-direction: row;
-    font-size: 14px;
-    font-weight: 500;
-    justify-content: space-between;
-    padding: 8px 0 4px;
-    text-decoration: none;
-  }
-  & > a:first-child {
-    margin: 0;
-    margin-top: 0px;
-    padding-top: 10px;
-  }
-`
-const ActiveRowWrapper = styled.div`
-  background-color: ${({ theme }) => theme.deprecated_bg1};
-  border-radius: 8px;
-  cursor: pointer;
-  padding: 8px;
-  width: 100%;
-`
-const FlyoutHeader = styled.div`
-  color: ${({ theme }) => theme.deprecated_text2};
-  cursor: default;
-  font-weight: 400;
-`
-const FlyoutMenu = styled.div`
-  position: absolute;
-  top: 54px;
-  width: 272px;
-  z-index: 99;
-  padding-top: 10px;
-  @media screen and (min-width: ${MEDIA_WIDTHS.deprecated_upToSmall}px) {
-    top: 40px;
-  }
-`
-const FlyoutMenuContents = styled.div`
-  align-items: flex-start;
-  background-color: ${({ theme }) => theme.deprecated_bg0};
-  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04),
-    0px 24px 32px rgba(0, 0, 0, 0.01);
-  border-radius: 20px;
-  display: flex;
-  flex-direction: column;
-  font-size: 16px;
-  overflow: auto;
-  padding: 16px;
-  & > *:not(:last-child) {
-    margin-bottom: 12px;
-  }
-`
-const FlyoutRow = styled.div<{ active: boolean }>`
-  align-items: center;
-  background-color: ${({ active, theme }) => (active ? theme.deprecated_bg1 : 'transparent')};
-  border-radius: 8px;
-  cursor: pointer;
-  display: flex;
-  font-weight: 500;
-  justify-content: space-between;
-  padding: 6px 8px;
-  text-align: left;
-  width: 100%;
-`
-const FlyoutRowActiveIndicator = styled.div`
-  background-color: ${({ theme }) => theme.deprecated_green1};
-  border-radius: 50%;
-  height: 9px;
-  width: 9px;
-`
-
-const CircleContainer = styled.div`
-  width: 20px;
-  display: flex;
-  justify-content: center;
-`
-
-const LinkOutCircle = styled(ArrowDownCircle)`
-  transform: rotate(230deg);
-  width: 16px;
-  height: 16px;
-`
-const Logo = styled.img`
-  height: 20px;
-  width: 20px;
-  margin-right: 8px;
-`
-const NetworkLabel = styled.div`
-  flex: 1 1 auto;
-`
-const SelectorLabel = styled(NetworkLabel)`
-  display: none;
-  @media screen and (min-width: ${MEDIA_WIDTHS.deprecated_upToSmall}px) {
-    display: block;
-    margin-right: 8px;
-  }
-`
-const NetworkAlertLabel = styled(NetworkLabel)`
-  display: none;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  margin: 0 0.5rem 0 0.4rem;
-  font-size: 1rem;
-  width: fit-content;
-  font-weight: 500;
-  @media screen and (min-width: ${MEDIA_WIDTHS.deprecated_upToSmall}px) {
-    display: block;
-  }
-`
-const SelectorControls = styled.div<{ supportedChain: boolean }>`
-  align-items: center;
-  background-color: ${({ theme }) => theme.deprecated_bg0};
-  border: 2px solid ${({ theme }) => theme.deprecated_bg0};
-  border-radius: 16px;
-  color: ${({ theme }) => theme.deprecated_text1};
-  display: flex;
-  font-weight: 500;
-  justify-content: space-between;
-  padding: 6px 8px;
-  ${({ supportedChain, theme }) =>
-    !supportedChain &&
-    `
-    color: ${theme.deprecated_white};
-    background-color: ${theme.deprecated_red1};
-    border: 2px solid ${theme.deprecated_red1};
-  `}
-  cursor: default;
-  :focus {
-    background-color: ${({ theme }) => darken(0.1, theme.deprecated_red1)};
-  }
-`
-const SelectorLogo = styled(Logo)`
-  @media screen and (min-width: ${MEDIA_WIDTHS.deprecated_upToSmall}px) {
-    margin-right: 8px;
-  }
-`
-const SelectorWrapper = styled.div`
-  @media screen and (min-width: ${MEDIA_WIDTHS.deprecated_upToSmall}px) {
-    position: relative;
-  }
-`
-const StyledChevronDown = styled(ChevronDown)`
-  width: 16px;
-`
-
-const NetworkIcon = styled(AlertTriangle)`
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
-  width: 16px;
-  height: 16px;
-`
-
-const BridgeLabel = ({ chainId }: { chainId: SupportedChainId }) => {
-  switch (chainId) {
-    case SupportedChainId.ARBITRUM_ONE:
-    case SupportedChainId.ARBITRUM_RINKEBY:
-      return <Trans>Arbitrum Bridge</Trans>
-    case SupportedChainId.OPTIMISM:
-    case SupportedChainId.OPTIMISM_GOERLI:
-      return <Trans>Optimism Bridge</Trans>
-    case SupportedChainId.POLYGON:
-    case SupportedChainId.POLYGON_MUMBAI:
-      return <Trans>Polygon Bridge</Trans>
-    case SupportedChainId.CELO:
-    case SupportedChainId.CELO_ALFAJORES:
-      return <Trans>Portal Bridge</Trans>
-    default:
-      return <Trans>Bridge</Trans>
-  }
-}
-const ExplorerLabel = ({ chainId }: { chainId: SupportedChainId }) => {
-  switch (chainId) {
-    case SupportedChainId.ARBITRUM_ONE:
-    case SupportedChainId.ARBITRUM_RINKEBY:
-      return <Trans>Arbiscan</Trans>
-    case SupportedChainId.OPTIMISM:
-    case SupportedChainId.OPTIMISM_GOERLI:
-      return <Trans>Optimistic Etherscan</Trans>
-    case SupportedChainId.POLYGON:
-    case SupportedChainId.POLYGON_MUMBAI:
-      return <Trans>Polygonscan</Trans>
-    case SupportedChainId.CELO:
-    case SupportedChainId.CELO_ALFAJORES:
-      return <Trans>Blockscout</Trans>
-    default:
-      return <Trans>Etherscan</Trans>
-  }
-}
-
-function Row({
-  targetChain,
-  onSelectChain,
-}: {
-  targetChain: SupportedChainId
-  onSelectChain: (targetChain: number) => void
-}) {
-  const { provider, chainId } = useWeb3React()
-  if (!provider || !chainId) {
-    return null
-  }
-  const active = chainId === targetChain
-  const { helpCenterUrl, explorer, bridge, label, logoUrl } = getChainInfo(targetChain)
-
-  const rowContent = (
-    <FlyoutRow onClick={() => onSelectChain(targetChain)} active={active}>
-      <Logo src={logoUrl} />
-      <NetworkLabel>{label}</NetworkLabel>
-      {chainId === targetChain && (
-        <CircleContainer>
-          <FlyoutRowActiveIndicator />
-        </CircleContainer>
-      )}
-    </FlyoutRow>
-  )
-
-  if (active) {
-    return (
-      <ActiveRowWrapper>
-        {rowContent}
-        <ActiveRowLinkList>
-          {bridge && (
-            <ExternalLink href={bridge}>
-              <BridgeLabel chainId={chainId} />
-              <CircleContainer>
-                <LinkOutCircle />
-              </CircleContainer>
-            </ExternalLink>
-          )}
-          {explorer && (
-            <ExternalLink href={explorer}>
-              <ExplorerLabel chainId={chainId} />
-              <CircleContainer>
-                <LinkOutCircle />
-              </CircleContainer>
-            </ExternalLink>
-          )}
-          {helpCenterUrl && (
-            <ExternalLink href={helpCenterUrl}>
-              <Trans>Help Center</Trans>
-              <CircleContainer>
-                <LinkOutCircle />
-              </CircleContainer>
-            </ExternalLink>
-          )}
-        </ActiveRowLinkList>
-      </ActiveRowWrapper>
-    )
-  }
-  return rowContent
-}
-
-const NETWORK_SELECTOR_CHAINS = [
-  SupportedChainId.MAINNET,
-  SupportedChainId.POLYGON,
-  SupportedChainId.OPTIMISM,
-  SupportedChainId.ARBITRUM_ONE,
-  SupportedChainId.CELO,
-]
-
-export default function NetworkSelector() {
-  const { chainId, provider } = useWeb3React()
-
-  const node = useRef<HTMLDivElement>(null)
-  const isOpen = useModalIsOpen(ApplicationModal.NETWORK_SELECTOR)
-  const openModal = useOpenModal(ApplicationModal.NETWORK_SELECTOR)
-  const closeModal = useCloseModal(ApplicationModal.NETWORK_SELECTOR)
-  const toggleModal = useToggleModal(ApplicationModal.NETWORK_SELECTOR)
-
-  const info = getChainInfo(chainId)
-
-  const selectChain = useSelectChain()
-  useSyncChainQuery()
-
-  if (!chainId || !provider) {
-    return null
-  }
-
-  const onSupportedChain = info !== undefined
-
-  return (
-    <SelectorWrapper
-      ref={node}
-      onMouseEnter={openModal}
-      onMouseLeave={closeModal}
-      onClick={isMobile ? toggleModal : undefined}
-    >
-      <SelectorControls supportedChain={onSupportedChain}>
-        {onSupportedChain ? (
-          <>
-            <SelectorLogo src={info.logoUrl} />
-            <SelectorLabel>{info.label}</SelectorLabel>
-            <StyledChevronDown />
-          </>
-        ) : (
-          <>
-            <NetworkIcon />
-            <NetworkAlertLabel>Switch Network</NetworkAlertLabel>
-            <StyledChevronDown />
-          </>
-        )}
-      </SelectorControls>
-      {isOpen && (
-        <FlyoutMenu>
-          <FlyoutMenuContents>
-            <FlyoutHeader>
-              <Trans>Select a {!onSupportedChain ? ' supported ' : ''}network</Trans>
-            </FlyoutHeader>
-            {NETWORK_SELECTOR_CHAINS.map((chainId: SupportedChainId) => (
-              <Row
-                onSelectChain={async (targetChainId: SupportedChainId) => {
-                  await selectChain(targetChainId)
-                  closeModal()
-                }}
-                targetChain={chainId}
-                key={chainId}
-              />
-            ))}
-          </FlyoutMenuContents>
-        </FlyoutMenu>
-      )}
-    </SelectorWrapper>
-  )
-}

src/components/Identicon/StatusIcon.tsx

 import { useWeb3React } from '@web3-react/core'
 import { ConnectionType } from 'connection'
-import { NavBarVariant, useNavBarFlag } from 'featureFlags/flags/navBar'
 import useENSAvatar from 'hooks/useENSAvatar'
 import styled from 'styled-components/macro'
 
@@ -53,9 +52,8 @@ const Socks = () => {
 const useIcon = (connectionType: ConnectionType) => {
   const { account } = useWeb3React()
   const { avatar } = useENSAvatar(account ?? undefined)
-  const isNavbarEnabled = useNavBarFlag() === NavBarVariant.Enabled
 
-  if ((isNavbarEnabled && avatar) || connectionType === ConnectionType.INJECTED) {
+  if (avatar || connectionType === ConnectionType.INJECTED) {
     return <Identicon />
   } else if (connectionType === ConnectionType.WALLET_CONNECT) {
     return <img src={WalletConnectIcon} alt="WalletConnect" />
@@ -68,12 +66,11 @@ const useIcon = (connectionType: ConnectionType) => {
 
 export default function StatusIcon({ connectionType, size }: { connectionType: ConnectionType; size?: number }) {
   const hasSocks = useHasSocks()
-  const isNavbarEnabled = useNavBarFlag() === NavBarVariant.Enabled
   const icon = useIcon(connectionType)
 
   return (
     <IconWrapper size={size ?? 16}>
-      {isNavbarEnabled && hasSocks && <Socks />}
+      {hasSocks && <Socks />}
       {icon}
     </IconWrapper>
   )

src/components/Identicon/index.tsx

 import jazzicon from '@metamask/jazzicon'
 import { useWeb3React } from '@web3-react/core'
-import { NavBarVariant, useNavBarFlag } from 'featureFlags/flags/navBar'
 import useENSAvatar from 'hooks/useENSAvatar'
 import { useLayoutEffect, useMemo, useRef, useState } from 'react'
 import styled from 'styled-components/macro'
@@ -23,8 +22,7 @@ export default function Identicon({ size }: { size?: number }) {
   const { account } = useWeb3React()
   const { avatar } = useENSAvatar(account ?? undefined)
   const [fetchable, setFetchable] = useState(true)
-  const isNavbarEnabled = useNavBarFlag() === NavBarVariant.Enabled
-  const iconSize = size ? size : isNavbarEnabled ? 24 : 16
+  const iconSize = size ?? 24
 
   const icon = useMemo(() => account && jazzicon(iconSize, parseInt(account.slice(2, 10), 16)), [account, iconSize])
   const iconRef = useRef<HTMLDivElement>(null)

src/components/Popups/PopupItem.tsx

-import { NavBarVariant, useNavBarFlag } from 'featureFlags/flags/navBar'
 import { useCallback, useEffect } from 'react'
 import { X } from 'react-feather'
 import { animated } from 'react-spring'
@@ -8,7 +7,6 @@ import styled, { useTheme } from 'styled-components/macro'
 import { useRemovePopup } from '../../state/application/hooks'
 import { PopupContent } from '../../state/application/reducer'
 import FailedNetworkSwitchPopup from './FailedNetworkSwitchPopup'
-import TransactionPopup from './TransactionPopup'
 
 const StyledClose = styled(X)`
   position: absolute;
@@ -58,7 +56,6 @@ export default function PopupItem({
   popKey: string
 }) {
   const removePopup = useRemovePopup()
-  const navbarFlag = useNavBarFlag()
   const removeThisPopup = useCallback(() => removePopup(popKey), [popKey, removePopup])
   useEffect(() => {
     if (removeAfterMs === null) return undefined
@@ -80,14 +77,7 @@ export default function PopupItem({
   })
 
   let popupContent
-  if ('txn' in content) {
-    const {
-      txn: { hash },
-    } = content
-    if (navbarFlag === NavBarVariant.Enabled) return null
-
-    popupContent = <TransactionPopup hash={hash} />
-  } else if ('failedSwitchNetwork' in content) {
+  if ('failedSwitchNetwork' in content) {
     popupContent = <FailedNetworkSwitchPopup chainId={content.failedSwitchNetwork} />
   }
 

src/components/Web3Status/index.tsx

-// eslint-disable-next-line no-restricted-imports
-import { t, Trans } from '@lingui/macro'
+import { Trans } from '@lingui/macro'
 import { useWeb3React } from '@web3-react/core'
 import { ElementName, Event, EventName } from 'analytics/constants'
 import { TraceEvent } from 'analytics/TraceEvent'
 import WalletDropdown from 'components/WalletDropdown'
 import { getConnection } from 'connection/utils'
-import { NavBarVariant, useNavBarFlag } from 'featureFlags/flags/navBar'
 import { Portal } from 'nft/components/common/Portal'
 import { getIsValidSwapQuote } from 'pages/Swap'
 import { darken } from 'polished'
@@ -13,10 +11,9 @@ import { useMemo, useRef } from 'react'
 import { AlertTriangle, ChevronDown, ChevronUp } from 'react-feather'
 import { useAppSelector } from 'state/hooks'
 import { useDerivedSwapInfo } from 'state/swap/hooks'
-import styled, { css, useTheme } from 'styled-components/macro'
+import styled, { useTheme } from 'styled-components/macro'
 
 import { useOnClickOutside } from '../../hooks/useOnClickOutside'
-import { useHasSocks } from '../../hooks/useSocksBalance'
 import {
   useCloseModal,
   useModalIsOpen,
@@ -95,33 +92,6 @@ const Web3StatusConnectWrapper = styled.div<{ faded?: boolean }>`
   }
 `
 
-const Web3StatusConnect = styled(Web3StatusGeneric)<{ faded?: boolean }>`
-  background-color: ${({ theme }) => theme.deprecated_primary4};
-  border: none;
-  color: ${({ theme }) => theme.deprecated_primaryText1};
-  font-weight: 500;
-
-  :hover,
-  :focus {
-    border: 1px solid ${({ theme }) => darken(0.05, theme.deprecated_primary4)};
-    color: ${({ theme }) => theme.deprecated_primaryText1};
-  }
-
-  ${({ faded }) =>
-    faded &&
-    css`
-      background-color: ${({ theme }) => theme.deprecated_primary5};
-      border: 1px solid ${({ theme }) => theme.deprecated_primary5};
-      color: ${({ theme }) => theme.deprecated_primaryText1};
-
-      :hover,
-      :focus {
-        border: 1px solid ${({ theme }) => darken(0.05, theme.deprecated_primary4)};
-        color: ${({ theme }) => darken(0.05, theme.deprecated_primaryText1)};
-      }
-    `}
-`
-
 const Web3StatusConnected = styled(Web3StatusGeneric)<{ pending?: boolean }>`
   background-color: ${({ pending, theme }) => (pending ? theme.deprecated_primary1 : theme.deprecated_bg1)};
   border: 1px solid ${({ pending, theme }) => (pending ? theme.deprecated_primary1 : theme.deprecated_bg1)};
@@ -162,14 +132,6 @@ function newTransactionsFirst(a: TransactionDetails, b: TransactionDetails) {
   return b.addedTime - a.addedTime
 }
 
-function Sock() {
-  return (
-    <span role="img" aria-label={t`has socks emoji`} style={{ marginTop: -4, marginBottom: -4 }}>
-      🧦
-    </span>
-  )
-}
-
 const VerticalDivider = styled.div`
   height: 20px;
   margin: 0px;
@@ -217,11 +179,10 @@ function Web3StatusInner() {
     inputError: swapInputError,
   } = useDerivedSwapInfo()
   const validSwapQuote = getIsValidSwapQuote(trade, tradeState, swapInputError)
-  const navbarFlagEnabled = useNavBarFlag() === NavBarVariant.Enabled
   const theme = useTheme()
   const toggleWalletDropdown = useToggleWalletDropdown()
   const toggleWalletModal = useToggleWalletModal()
-  const walletIsOpen = useIsOpen()
+  const walletIsOpen = useModalIsOpen(ApplicationModal.WALLET_DROPDOWN)
 
   const error = useAppSelector((state) => state.connection.errorByConnectionType[getConnection(connector).type])
 
@@ -235,8 +196,7 @@ function Web3StatusInner() {
   const pending = sortedRecentTransactions.filter((tx) => !tx.receipt).map((tx) => tx.hash)
 
   const hasPendingTransactions = !!pending.length
-  const hasSocks = useHasSocks()
-  const toggleWallet = navbarFlagEnabled ? toggleWalletDropdown : toggleWalletModal
+  const toggleWallet = toggleWalletDropdown
 
   if (!chainId) {
     return null
@@ -256,7 +216,7 @@ function Web3StatusInner() {
     }
     return (
       <Web3StatusConnected data-testid="web3-status-connected" onClick={toggleWallet} pending={hasPendingTransactions}>
-        {navbarFlagEnabled && !hasPendingTransactions && <StatusIcon size={24} connectionType={connectionType} />}
+        {!hasPendingTransactions && <StatusIcon size={24} connectionType={connectionType} />}
         {hasPendingTransactions ? (
           <RowBetween>
             <Text>
@@ -266,18 +226,10 @@ function Web3StatusInner() {
           </RowBetween>
         ) : (
           <>
-            {hasSocks && !navbarFlagEnabled ? <Sock /> : null}
             <Text>{ENSName || shortenAddress(account)}</Text>
-            {navbarFlagEnabled ? (
-              walletIsOpen ? (
-                <ChevronUp {...chevronProps} />
-              ) : (
-                <ChevronDown {...chevronProps} />
-              )
-            ) : null}
+            {walletIsOpen ? <ChevronUp {...chevronProps} /> : <ChevronDown {...chevronProps} />}
           </>
         )}
-        {!navbarFlagEnabled && !hasPendingTransactions && <StatusIcon connectionType={connectionType} />}
       </Web3StatusConnected>
     )
   } else {
@@ -293,35 +245,20 @@ function Web3StatusInner() {
         properties={{ received_swap_quote: validSwapQuote }}
         element={ElementName.CONNECT_WALLET_BUTTON}
       >
-        {navbarFlagEnabled ? (
-          <Web3StatusConnectWrapper faded={!account}>
-            <StyledConnectButton data-testid="navbar-connect-wallet" onClick={toggleWalletModal}>
-              <Trans>Connect</Trans>
-            </StyledConnectButton>
-            <VerticalDivider />
-            <ChevronWrapper onClick={toggleWalletDropdown}>
-              {walletIsOpen ? <ChevronUp {...chevronProps} /> : <ChevronDown {...chevronProps} />}
-            </ChevronWrapper>
-          </Web3StatusConnectWrapper>
-        ) : (
-          <Web3StatusConnect onClick={toggleWallet} faded={!account}>
-            <Text>
-              <Trans>Connect Wallet</Trans>
-            </Text>
-          </Web3StatusConnect>
-        )}
+        <Web3StatusConnectWrapper faded={!account}>
+          <StyledConnectButton data-testid="navbar-connect-wallet" onClick={toggleWalletModal}>
+            <Trans>Connect</Trans>
+          </StyledConnectButton>
+          <VerticalDivider />
+          <ChevronWrapper onClick={toggleWalletDropdown}>
+            {walletIsOpen ? <ChevronUp {...chevronProps} /> : <ChevronDown {...chevronProps} />}
+          </ChevronWrapper>
+        </Web3StatusConnectWrapper>
       </TraceEvent>
     )
   }
 }
 
-const useIsOpen = () => {
-  const walletDropdownOpen = useModalIsOpen(ApplicationModal.WALLET_DROPDOWN)
-  const navbarFlag = useNavBarFlag()
-
-  return useMemo(() => navbarFlag === NavBarVariant.Enabled && walletDropdownOpen, [navbarFlag, walletDropdownOpen])
-}
-
 export default function Web3Status() {
   const { ENSName } = useWeb3React()
 
@@ -329,7 +266,7 @@ export default function Web3Status() {
   const ref = useRef<HTMLDivElement>(null)
   const walletRef = useRef<HTMLDivElement>(null)
   const closeModal = useCloseModal(ApplicationModal.WALLET_DROPDOWN)
-  const isOpen = useIsOpen()
+  const isOpen = useModalIsOpen(ApplicationModal.WALLET_DROPDOWN)
 
   useOnClickOutside(ref, isOpen ? closeModal : undefined, [walletRef])
 

src/components/swap/styleds.tsx

@@ -8,17 +8,17 @@ import { Z_INDEX } from 'theme/zIndex'
 
 import { AutoColumn } from '../Column'
 
-export const PageWrapper = styled.div<{ redesignFlag: boolean; navBarFlag: boolean }>`
-  padding: ${({ navBarFlag }) => (navBarFlag ? '68px 8px 0px' : '0px 8px')};
+export const PageWrapper = styled.div<{ redesignFlag: boolean }>`
+  padding: 68px 8px 0px;
   max-width: 480px;
   width: 100%;
 
   @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.md}px`}) {
-    padding-top: ${({ navBarFlag }) => (navBarFlag ? '48px' : '0px')};
+    padding-top: 48px;
   }
 
   @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) {
-    padding-top: ${({ navBarFlag }) => (navBarFlag ? '20px' : '0px')};
+    padding-top: 20px;
   }
 `
 

src/featureFlags/flags/navBar.ts

-import { BaseVariant } from '../index'
-
-export function useNavBarFlag(): BaseVariant {
-  return BaseVariant.Enabled
-}
-
-export { BaseVariant as NavBarVariant }

src/pages/AddLiquidity/index.tsx

@@ -8,7 +8,6 @@ import { ElementName, Event, EventName } from 'analytics/constants'
 import { TraceEvent } from 'analytics/TraceEvent'
 import { sendEvent } from 'components/analytics'
 import UnsupportedCurrencyFooter from 'components/swap/UnsupportedCurrencyFooter'
-import { NavBarVariant, useNavBarFlag } from 'featureFlags/flags/navBar'
 import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
 import useParsedQueryString from 'hooks/useParsedQueryString'
 import { useCallback, useEffect, useState } from 'react'
@@ -80,8 +79,6 @@ import {
 const DEFAULT_ADD_IN_RANGE_SLIPPAGE_TOLERANCE = new Percent(50, 10_000)
 
 export default function AddLiquidity() {
-  const navBarFlag = useNavBarFlag()
-  const navBarFlagEnabled = navBarFlag === NavBarVariant.Enabled
   const navigate = useNavigate()
   const {
     currencyIdA,
@@ -514,7 +511,7 @@ export default function AddLiquidity() {
 
   return (
     <>
-      <ScrollablePage navBarFlag={navBarFlagEnabled}>
+      <ScrollablePage>
         <TransactionConfirmationModal
           isOpen={showConfirm}
           onDismiss={handleDismissConfirmation}

src/pages/AddLiquidity/styled.tsx

@@ -29,8 +29,8 @@ export const Wrapper = styled.div`
 `};
 `
 
-export const ScrollablePage = styled.div<{ navBarFlag: boolean }>`
-  padding: ${({ navBarFlag }) => (navBarFlag ? '68px 8px 0px' : '0px')};
+export const ScrollablePage = styled.div`
+  padding: 68px 8px 0px;
   position: relative;
   display: flex;
   flex-direction: column;
@@ -41,11 +41,11 @@ export const ScrollablePage = styled.div<{ navBarFlag: boolean }>`
   `};
 
   @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.md}px`}) {
-    padding: ${({ navBarFlag }) => (navBarFlag ? '48px 8px 0px' : '0px 8px 0px')};
+    padding: 48px 8px 0px;
   }
 
   @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) {
-    padding-top: ${({ navBarFlag }) => (navBarFlag ? '20px' : '0px')};
+    padding-top: 20px;
   }
 `
 

src/pages/App.tsx

@@ -4,7 +4,6 @@ import { Trace } from 'analytics/Trace'
 import Loader from 'components/Loader'
 import TopLevelModals from 'components/TopLevelModals'
 import { useFeatureFlagsIsLoaded } from 'featureFlags'
-import { NavBarVariant, useNavBarFlag } from 'featureFlags/flags/navBar'
 import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
 import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
 import ApeModeQueryParamReader from 'hooks/useApeModeQueryParamReader'
@@ -19,9 +18,8 @@ import { getCLS, getFCP, getFID, getLCP, Metric } from 'web-vitals'
 
 import { useAnalyticsReporter } from '../components/analytics'
 import ErrorBoundary from '../components/ErrorBoundary'
-import Header from '../components/Header'
-import Polling from '../components/Header/Polling'
 import NavBar from '../components/NavBar'
+import Polling from '../components/Polling'
 import Popups from '../components/Popups'
 import { LoadingTokenDetails } from '../components/Tokens/TokenDetails/LoadingTokenDetails'
 import { useIsExpertMode } from '../state/user/hooks'
@@ -58,11 +56,11 @@ const AppWrapper = styled.div<{ redesignFlagEnabled: boolean }>`
     redesignFlagEnabled ? undefined : "'ss01' on, 'ss02' on, 'cv01' on, 'cv03' on"};
 `
 
-const BodyWrapper = styled.div<{ navBarFlag: NavBarVariant }>`
+const BodyWrapper = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
-  padding: ${({ navBarFlag }) => (navBarFlag === NavBarVariant.Enabled ? `72px 0px 0px 0px` : `120px 0px 0px 0px`)};
+  padding: 72px 0px 0px 0px;
   align-items: center;
   flex: 1;
   ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToSmall`
@@ -114,7 +112,6 @@ const LazyLoadSpinner = () => (
 
 export default function App() {
   const isLoaded = useFeatureFlagsIsLoaded()
-  const navBarFlag = useNavBarFlag()
   const nftFlag = useNftFlag()
   const redesignFlagEnabled = useRedesignFlag() === RedesignVariant.Enabled
 
@@ -156,8 +153,10 @@ export default function App() {
       <ApeModeQueryParamReader />
       <AppWrapper redesignFlagEnabled={redesignFlagEnabled}>
         <Trace page={currentPage}>
-          <HeaderWrapper>{navBarFlag === NavBarVariant.Enabled ? <NavBar /> : <Header />}</HeaderWrapper>
-          <BodyWrapper navBarFlag={navBarFlag}>
+          <HeaderWrapper>
+            <NavBar />
+          </HeaderWrapper>
+          <BodyWrapper>
             <Popups />
             <Polling />
             <TopLevelModals />

src/pages/CreateProposal/index.tsx

@@ -8,7 +8,6 @@ import { Trace } from 'analytics/Trace'
 import { ButtonError } from 'components/Button'
 import { BlueCard } from 'components/Card'
 import { AutoColumn } from 'components/Column'
-import { NavBarVariant, useNavBarFlag } from 'featureFlags/flags/navBar'
 import JSBI from 'jsbi'
 import tryParseCurrencyAmount from 'lib/utils/tryParseCurrencyAmount'
 import { Wrapper } from 'pages/Pool/styleds'
@@ -34,15 +33,15 @@ import { ProposalAction, ProposalActionSelector, ProposalActionSelectorModal } f
 import { ProposalEditor } from './ProposalEditor'
 import { ProposalSubmissionModal } from './ProposalSubmissionModal'
 
-const PageWrapper = styled(AutoColumn)<{ navBarFlag: boolean }>`
-  padding: ${({ navBarFlag }) => (navBarFlag ? '68px 8px 0px' : '0px')};
+const PageWrapper = styled(AutoColumn)`
+  padding: 68px 8px 0px;
 
   @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.md}px`}) {
-    padding: ${({ navBarFlag }) => (navBarFlag ? '48px 8px 0px' : '0px 8px 0px')};
+    padding: 48px 8px 0px;
   }
 
   @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) {
-    padding-top: ${({ navBarFlag }) => (navBarFlag ? '20px' : '0px')};
+    padding-top: 20px;
   }
 `
 
@@ -101,8 +100,6 @@ const AutonomousProposalCTA = styled.div`
 `
 
 export default function CreateProposal() {
-  const navBarFlag = useNavBarFlag()
-  const navBarFlagEnabled = navBarFlag === NavBarVariant.Enabled
   const { account, chainId } = useWeb3React()
 
   const latestProposalId = useLatestProposalId(account ?? undefined) ?? '0'
@@ -243,7 +240,7 @@ ${bodyValue}
 
   return (
     <Trace page={PageName.VOTE_PAGE} shouldLogImpression>
-      <PageWrapper navBarFlag={navBarFlagEnabled}>
+      <PageWrapper>
         <AppBody {...{ maxWidth: '800px' }}>
           <CreateProposalTabs />
           <CreateProposalWrapper>

src/pages/Earn/Manage.tsx

 import { Trans } from '@lingui/macro'
 import { CurrencyAmount, Token } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
-import { NavBarVariant, useNavBarFlag } from 'featureFlags/flags/navBar'
 import JSBI from 'jsbi'
 import { useCallback, useState } from 'react'
 import { Link, useParams } from 'react-router-dom'
@@ -29,17 +28,17 @@ import { useStakingInfo } from '../../state/stake/hooks'
 import { ThemedText } from '../../theme'
 import { currencyId } from '../../utils/currencyId'
 
-const PageWrapper = styled(AutoColumn)<{ navBarFlag: boolean }>`
-  padding: ${({ navBarFlag }) => (navBarFlag ? '68px 8px 0px' : '0px')};
+const PageWrapper = styled(AutoColumn)`
+  padding: 68px 8px 0px;
   max-width: 640px;
   width: 100%;
 
   @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.md}px`}) {
-    padding: ${({ navBarFlag }) => (navBarFlag ? '48px 8px 0px' : '0px 8px 0px')};
+    padding: 48px 8px 0px;
   }
 
   @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) {
-    padding-top: ${({ navBarFlag }) => (navBarFlag ? '20px' : '0px')};
+    padding-top: 20px;
   }
 `
 
@@ -98,8 +97,6 @@ const DataRow = styled(RowBetween)`
 `
 
 export default function Manage() {
-  const navBarFlag = useNavBarFlag()
-  const navBarFlagEnabled = navBarFlag === NavBarVariant.Enabled
   const { currencyIdA, currencyIdB } = useParams<{ currencyIdA: string; currencyIdB: string }>()
   const { account } = useWeb3React()
 
@@ -163,7 +160,7 @@ export default function Manage() {
   }, [account, toggleWalletModal])
 
   return (
-    <PageWrapper gap="lg" justify="center" navBarFlag={navBarFlagEnabled}>
+    <PageWrapper gap="lg" justify="center">
       <RowBetween style={{ gap: '24px' }}>
         <ThemedText.DeprecatedMediumHeader style={{ margin: 0 }}>
           <Trans>

src/pages/Earn/index.tsx

 import { Trans } from '@lingui/macro'
 import { useWeb3React } from '@web3-react/core'
-import { NavBarVariant, useNavBarFlag } from 'featureFlags/flags/navBar'
 import JSBI from 'jsbi'
 import styled, { useTheme } from 'styled-components/macro'
 
@@ -15,17 +14,17 @@ import { STAKING_REWARDS_INFO, useStakingInfo } from '../../state/stake/hooks'
 import { ExternalLink, ThemedText } from '../../theme'
 import { Countdown } from './Countdown'
 
-const PageWrapper = styled(AutoColumn)<{ navBarFlag: boolean }>`
-  padding: ${({ navBarFlag }) => (navBarFlag ? '68px 8px 0px' : '0px')};
+const PageWrapper = styled(AutoColumn)`
+  padding: 68px 8px 0px;
   max-width: 640px;
   width: 100%;
 
   @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.md}px`}) {
-    padding: ${({ navBarFlag }) => (navBarFlag ? '48px 8px 0px' : '0px 8px 0px')};
+    padding: 48px 8px 0px;
   }
 
   @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) {
-    padding-top: ${({ navBarFlag }) => (navBarFlag ? '20px' : '0px')};
+    padding-top: 20px;
   }
 `
 
@@ -50,8 +49,6 @@ flex-direction: column;
 `
 
 export default function Earn() {
-  const navBarFlag = useNavBarFlag()
-  const navBarFlagEnabled = navBarFlag === NavBarVariant.Enabled
   const theme = useTheme()
   const { chainId } = useWeb3React()
 
@@ -68,7 +65,7 @@ export default function Earn() {
   const stakingRewardsExist = Boolean(typeof chainId === 'number' && (STAKING_REWARDS_INFO[chainId]?.length ?? 0) > 0)
 
   return (
-    <PageWrapper gap="lg" justify="center" navBarFlag={navBarFlagEnabled}>
+    <PageWrapper gap="lg" justify="center">
       <TopSection gap="md">
         <DataCard>
           <CardBGImage />

src/pages/Pool/PositionPage.tsx

@@ -18,7 +18,6 @@ import { RowBetween, RowFixed } from 'components/Row'
 import { Dots } from 'components/swap/styleds'
 import Toggle from 'components/Toggle'
 import TransactionConfirmationModal, { ConfirmationModalContent } from 'components/TransactionConfirmationModal'
-import { NavBarVariant, useNavBarFlag } from 'featureFlags/flags/navBar'
 import { useToken } from 'hooks/Tokens'
 import { useV3NFTPositionManagerContract } from 'hooks/useContract'
 import useIsTickAtLimit from 'hooks/useIsTickAtLimit'
@@ -49,18 +48,18 @@ import { calculateGasMargin } from '../../utils/calculateGasMargin'
 import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
 import { LoadingRows } from './styleds'
 
-const PageWrapper = styled.div<{ navBarFlag: boolean }>`
-  padding: ${({ navBarFlag }) => (navBarFlag ? '68px 8px 0px' : '0px')};
+const PageWrapper = styled.div`
+  padding: 68px 8px 0px;
 
   min-width: 800px;
   max-width: 960px;
 
   @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.md}px`}) {
-    padding: ${({ navBarFlag }) => (navBarFlag ? '48px 8px 0px' : '0px 8px 0px')};
+    padding: 48px 8px 0px;
   }
 
   @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) {
-    padding-top: ${({ navBarFlag }) => (navBarFlag ? '20px' : '0px')};
+    padding-top: 20px;
   }
 
   ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
@@ -326,8 +325,6 @@ const useInverter = ({
 }
 
 export function PositionPage() {
-  const navBarFlag = useNavBarFlag()
-  const navBarFlagEnabled = navBarFlag === NavBarVariant.Enabled
   const { tokenId: tokenIdFromUrl } = useParams<{ tokenId?: string }>()
   const { chainId, account, provider } = useWeb3React()
   const theme = useTheme()
@@ -586,7 +583,7 @@ export function PositionPage() {
   ) : (
     <Trace page={PageName.POOL_PAGE} shouldLogImpression>
       <>
-        <PageWrapper navBarFlag={navBarFlagEnabled}>
+        <PageWrapper>
           <TransactionConfirmationModal
             isOpen={showConfirm}
             onDismiss={() => setShowConfirm(false)}

src/pages/Pool/index.tsx

@@ -11,7 +11,6 @@ import PositionList from 'components/PositionList'
 import { RowBetween, RowFixed } from 'components/Row'
 import { SwitchLocaleLink } from 'components/SwitchLocaleLink'
 import { isSupportedChain } from 'constants/chains'
-import { NavBarVariant, useNavBarFlag } from 'featureFlags/flags/navBar'
 import { useV3Positions } from 'hooks/useV3Positions'
 import { AlertTriangle, BookOpen, ChevronDown, ChevronsRight, Inbox, Layers, PlusCircle } from 'react-feather'
 import { Link } from 'react-router-dom'
@@ -25,8 +24,8 @@ import { V2_FACTORY_ADDRESSES } from '../../constants/addresses'
 import CTACards from './CTACards'
 import { LoadingRows } from './styleds'
 
-const PageWrapper = styled(AutoColumn)<{ navBarFlag: boolean }>`
-  padding: ${({ navBarFlag }) => (navBarFlag ? '68px 8px 0px' : '0px')};
+const PageWrapper = styled(AutoColumn)`
+  padding: 68px 8px 0px;
   max-width: 870px;
   width: 100%;
 
@@ -39,11 +38,11 @@ const PageWrapper = styled(AutoColumn)<{ navBarFlag: boolean }>`
   `};
 
   @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.md}px`}) {
-    padding-top: ${({ navBarFlag }) => (navBarFlag ? '48px' : '0px')};
+    padding-top: 48px;
   }
 
   @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) {
-    padding-top: ${({ navBarFlag }) => (navBarFlag ? '20px' : '0px')};
+    padding-top: 20px;
   }
 `
 const TitleRow = styled(RowBetween)`
@@ -161,12 +160,10 @@ function PositionsLoadingPlaceholder() {
 }
 
 function WrongNetworkCard() {
-  const navBarFlag = useNavBarFlag()
-  const navBarFlagEnabled = navBarFlag === NavBarVariant.Enabled
   const theme = useTheme()
   return (
     <>
-      <PageWrapper navBarFlag={navBarFlagEnabled}>
+      <PageWrapper>
         <AutoColumn gap="lg" justify="center">
           <AutoColumn gap="lg" style={{ width: '100%' }}>
             <TitleRow padding={'0'}>
@@ -194,8 +191,6 @@ function WrongNetworkCard() {
 }
 
 export default function Pool() {
-  const navBarFlag = useNavBarFlag()
-  const navBarFlagEnabled = navBarFlag === NavBarVariant.Enabled
   const { account, chainId } = useWeb3React()
   const toggleWalletModal = useToggleWalletModal()
 
@@ -266,7 +261,7 @@ export default function Pool() {
   return (
     <Trace page={PageName.POOL_PAGE} shouldLogImpression>
       <>
-        <PageWrapper navBarFlag={navBarFlagEnabled}>
+        <PageWrapper>
           <AutoColumn gap="lg" justify="center">
             <AutoColumn gap="lg" style={{ width: '100%' }}>
               <TitleRow padding={'0'}>

src/pages/Swap/index.tsx

@@ -15,7 +15,6 @@ import UnsupportedCurrencyFooter from 'components/swap/UnsupportedCurrencyFooter
 import TokenSafetyModal from 'components/TokenSafety/TokenSafetyModal'
 import { MouseoverTooltip } from 'components/Tooltip'
 import { isSupportedChain } from 'constants/chains'
-import { NavBarVariant, useNavBarFlag } from 'featureFlags/flags/navBar'
 import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
 import { useSwapCallback } from 'hooks/useSwapCallback'
 import useTransactionDeadline from 'hooks/useTransactionDeadline'
@@ -152,8 +151,6 @@ const TRADE_STRING = 'SwapRouter'
 
 export default function Swap() {
   const navigate = useNavigate()
-  const navBarFlag = useNavBarFlag()
-  const navBarFlagEnabled = navBarFlag === NavBarVariant.Enabled
   const redesignFlag = useRedesignFlag()
   const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
   const { account, chainId } = useWeb3React()
@@ -531,7 +528,7 @@ export default function Swap() {
             onDismiss={handleDismissTokenWarning}
           />
         )}
-        <PageWrapper redesignFlag={redesignFlagEnabled} navBarFlag={navBarFlagEnabled}>
+        <PageWrapper redesignFlag={redesignFlagEnabled}>
           <SwapWrapper id="swap-page" redesignFlag={redesignFlagEnabled}>
             <SwapHeader allowedSlippage={allowedSlippage} />
             <ConfirmSwapModal

src/pages/Vote/Landing.tsx

@@ -13,7 +13,6 @@ import { SwitchLocaleLink } from 'components/SwitchLocaleLink'
 import Toggle from 'components/Toggle'
 import DelegateModal from 'components/vote/DelegateModal'
 import ProposalEmptyState from 'components/vote/ProposalEmptyState'
-import { NavBarVariant, useNavBarFlag } from 'featureFlags/flags/navBar'
 import JSBI from 'jsbi'
 import { darken } from 'polished'
 import { useState } from 'react'
@@ -33,15 +32,15 @@ import { ZERO_ADDRESS } from '../../constants/misc'
 import { UNI } from '../../constants/tokens'
 import { ProposalStatus } from './styled'
 
-const PageWrapper = styled(AutoColumn)<{ navBarFlag: boolean }>`
-  padding-top: ${({ navBarFlag }) => (navBarFlag ? '68px' : '0px')};
+const PageWrapper = styled(AutoColumn)`
+  padding-top: 68px;
 
   @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.md}px`}) {
-    padding: ${({ navBarFlag }) => (navBarFlag ? '48px 8px 0px' : '0px 8px 0px')};
+    padding: 48px 8px 0px;
   }
 
   @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) {
-    padding-top: ${({ navBarFlag }) => (navBarFlag ? '20px' : '0px')};
+    padding-top: 20px;
   }
 `
 
@@ -120,8 +119,6 @@ const StyledExternalLink = styled(ExternalLink)`
 `
 
 export default function Landing() {
-  const navBarFlag = useNavBarFlag()
-  const navBarFlagEnabled = navBarFlag === NavBarVariant.Enabled
   const theme = useTheme()
   const { account, chainId } = useWeb3React()
 
@@ -149,7 +146,7 @@ export default function Landing() {
   return (
     <>
       <Trace page={PageName.VOTE_PAGE} shouldLogImpression>
-        <PageWrapper gap="lg" justify="center" navBarFlag={navBarFlagEnabled}>
+        <PageWrapper gap="lg" justify="center">
           <DelegateModal
             isOpen={showDelegateModal}
             onDismiss={toggleDelegateModal}

src/pages/Vote/VotePage.tsx

@@ -6,7 +6,6 @@ import { PageName } from 'analytics/constants'
 import { Trace } from 'analytics/Trace'
 import ExecuteModal from 'components/vote/ExecuteModal'
 import QueueModal from 'components/vote/QueueModal'
-import { NavBarVariant, useNavBarFlag } from 'featureFlags/flags/navBar'
 import { useActiveLocale } from 'hooks/useActiveLocale'
 import useCurrentBlockTimestamp from 'hooks/useCurrentBlockTimestamp'
 import JSBI from 'jsbi'
@@ -56,16 +55,16 @@ import { isAddress } from '../../utils'
 import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
 import { ProposalStatus } from './styled'
 
-const PageWrapper = styled(AutoColumn)<{ navBarFlag: boolean }>`
-  padding-top: ${({ navBarFlag }) => (navBarFlag ? '68px' : '0px')};
+const PageWrapper = styled(AutoColumn)`
+  padding-top: 68px;
   width: 100%;
 
   @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.md}px`}) {
-    padding: ${({ navBarFlag }) => (navBarFlag ? '48px 8px 0px' : '0px 8px 0px')};
+    padding: 48px 8px 0px;
   }
 
   @media only screen and (max-width: ${({ theme }) => `${theme.breakpoint.sm}px`}) {
-    padding-top: ${({ navBarFlag }) => (navBarFlag ? '20px' : '0px')};
+    padding-top: 20px;
   }
 `
 
@@ -163,8 +162,6 @@ function getDateFromBlock(
 }
 
 export default function VotePage() {
-  const navBarFlag = useNavBarFlag()
-  const navBarFlagEnabled = navBarFlag === NavBarVariant.Enabled
   // see https://github.com/remix-run/react-router/issues/8200#issuecomment-962520661
   const { governorIndex, id } = useParams() as { governorIndex: string; id: string }
   const parsedGovernorIndex = Number.parseInt(governorIndex)
@@ -276,7 +273,7 @@ export default function VotePage() {
   return (
     <Trace page={PageName.VOTE_PAGE} shouldLogImpression>
       <>
-        <PageWrapper gap="lg" justify="center" navBarFlag={navBarFlagEnabled}>
+        <PageWrapper gap="lg" justify="center">
           <VoteModal
             isOpen={showVoteModal}
             onDismiss={toggleVoteModal}