feat(testnets): add toggle for testnets (#6786)

* feat(testnets): add toggle for testnets

* e2e test

* update toggle syntax and fix a bug

* simplify list calculation per eddie's input

* add all testnets

* clean up the styles

* Update src/components/NavBar/ChainSelector.tsx

* fix lint

cypress/e2e/wallet-dropdown.test.ts

@@ -41,6 +41,23 @@ describe('Wallet Dropdown', () => {
     itShouldChangeTheLanguage()
   })
 
+  describe('testnet toggle', () => {
+    beforeEach(() => {
+      cy.visit('/swap')
+    })
+    it('should toggle testnet visibility', () => {
+      cy.get(getTestSelector('chain-selector')).last().click()
+      cy.get(getTestSelector('chain-selector-options')).should('not.contain.text', 'Sepolia')
+
+      cy.get(getTestSelector('web3-status-connected')).click()
+      cy.get(getTestSelector('wallet-settings')).click()
+      cy.get('#testnets-toggle').click()
+      cy.get(getTestSelector('close-account-drawer')).click()
+      cy.get(getTestSelector('chain-selector')).last().click()
+      cy.get(getTestSelector('chain-selector-options')).should('contain.text', 'Sepolia')
+    })
+  })
+
   describe('disconnected', () => {
     beforeEach(() => {
       cy.visit('/')

src/components/AccountDrawer/SettingsMenu.tsx

@@ -11,6 +11,7 @@ import ThemeToggle from 'theme/components/ThemeToggle'
 import { GitVersionRow } from './GitVersionRow'
 import { SlideOutMenu } from './SlideOutMenu'
 import { SmallBalanceToggle } from './SmallBalanceToggle'
+import { TestnetsToggle } from './TestnetsToggle'
 
 const InternalLinkMenuItem = styled(Link)`
   ${ClickableStyle}
@@ -44,13 +45,11 @@ const SectionTitle = styled(ThemedText.SubHeader)`
   padding-bottom: 24px;
 `
 
-const ThemeToggleContainer = styled.div`
-  margin: 0 0 6px;
-`
-
-const BalanceToggleContainer = styled.div`
-  padding: 16px 0;
-  margin-bottom: 26px;
+const ToggleWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  margin-bottom: 24px;
 `
 
 export default function SettingsMenu({ onClose }: { onClose: () => void }) {
@@ -61,12 +60,11 @@ export default function SettingsMenu({ onClose }: { onClose: () => void }) {
       <SectionTitle>
         <Trans>Preferences</Trans>
       </SectionTitle>
-      <ThemeToggleContainer>
+      <ToggleWrapper>
         <ThemeToggle />
-      </ThemeToggleContainer>
-      <BalanceToggleContainer>
         <SmallBalanceToggle />
-      </BalanceToggleContainer>
+        <TestnetsToggle />
+      </ToggleWrapper>
 
       <SectionTitle data-testid="wallet-header">
         <Trans>Language</Trans>

src/components/AccountDrawer/TestnetsToggle.tsx

+import { Trans } from '@lingui/macro'
+import Row from 'components/Row'
+import Toggle from 'components/Toggle'
+import { useAtom } from 'jotai'
+import { atomWithStorage } from 'jotai/utils'
+import { ThemedText } from 'theme'
+
+export const showTestnetsAtom = atomWithStorage<boolean>('showTestnets', false)
+
+export function TestnetsToggle() {
+  const [showTestnets, updateShowTestnets] = useAtom(showTestnetsAtom)
+
+  return (
+    <Row align="center">
+      <Row width="50%">
+        <ThemedText.SubHeaderSmall color="primary">
+          <Trans>Show testnets</Trans>
+        </ThemedText.SubHeaderSmall>
+      </Row>
+      <Row width="50%" justify="flex-end">
+        <Toggle
+          id="testnets-toggle"
+          isActive={showTestnets}
+          toggle={() => {
+            updateShowTestnets(!showTestnets)
+          }}
+        />
+      </Row>
+    </Row>
+  )
+}

src/components/NavBar/ChainSelector.tsx

 import { t } from '@lingui/macro'
 import { useWeb3React } from '@web3-react/core'
 import { WalletConnect } from '@web3-react/walletconnect-v2'
+import { showTestnetsAtom } from 'components/AccountDrawer/TestnetsToggle'
 import { MouseoverTooltip } from 'components/Tooltip'
 import { getConnection } from 'connection'
 import { ConnectionType } from 'connection/types'
 import { getChainInfo } from 'constants/chainInfo'
-import { SupportedChainId, UniWalletSupportedChains } from 'constants/chains'
+import { L1_CHAIN_IDS, L2_CHAIN_IDS, SupportedChainId, TESTNET_SET, UniWalletSupportedChains } from 'constants/chains'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
 import useSelectChain from 'hooks/useSelectChain'
 import useSyncChainQuery from 'hooks/useSyncChainQuery'
+import { useAtomValue } from 'jotai/utils'
 import { Box } from 'nft/components/Box'
 import { Portal } from 'nft/components/common/Portal'
 import { Column, Row } from 'nft/components/Flex'
@@ -16,24 +18,12 @@ import { useIsMobile } from 'nft/hooks'
 import { useCallback, useRef, useState } from 'react'
 import { AlertTriangle, ChevronDown, ChevronUp } from 'react-feather'
 import { useTheme } from 'styled-components/macro'
-import { isProductionEnv } from 'utils/env'
 
 import * as styles from './ChainSelector.css'
 import ChainSelectorRow from './ChainSelectorRow'
 import { NavDropdown } from './NavDropdown'
 
-const NETWORK_SELECTOR_CHAINS = [
-  SupportedChainId.MAINNET,
-  SupportedChainId.POLYGON,
-  SupportedChainId.OPTIMISM,
-  SupportedChainId.ARBITRUM_ONE,
-  SupportedChainId.CELO,
-  SupportedChainId.BNB,
-]
-
-if (!isProductionEnv()) {
-  NETWORK_SELECTOR_CHAINS.push(SupportedChainId.SEPOLIA)
-}
+const NETWORK_SELECTOR_CHAINS = [...L1_CHAIN_IDS, ...L2_CHAIN_IDS]
 
 interface ChainSelectorProps {
   leftAlign?: boolean
@@ -72,6 +62,11 @@ export const ChainSelector = ({ leftAlign }: ChainSelectorProps) => {
 
   const theme = useTheme()
 
+  const showTestnets = useAtomValue(showTestnetsAtom)
+  const chains = showTestnets
+    ? NETWORK_SELECTOR_CHAINS
+    : NETWORK_SELECTOR_CHAINS.filter((chain) => !TESTNET_SET.has(chain))
+
   const ref = useRef<HTMLDivElement>(null)
   const modalRef = useRef<HTMLDivElement>(null)
   useOnClickOutside(ref, () => setIsOpen(false), [modalRef])
@@ -103,8 +98,8 @@ export const ChainSelector = ({ leftAlign }: ChainSelectorProps) => {
 
   const dropdown = (
     <NavDropdown top="56" left={leftAlign ? '0' : 'auto'} right={leftAlign ? 'auto' : '0'} ref={modalRef}>
-      <Column paddingX="8">
-        {NETWORK_SELECTOR_CHAINS.map((selectorChain: SupportedChainId) => (
+      <Column paddingX="8" data-testid="chain-selector-options">
+        {chains.map((selectorChain: SupportedChainId) => (
           <ChainSelectorRow
             disabled={!walletSupportsChain.includes(selectorChain)}
             onSelectChain={onSelectChain}
@@ -127,6 +122,7 @@ export const ChainSelector = ({ leftAlign }: ChainSelectorProps) => {
     <Box position="relative" ref={ref}>
       <MouseoverTooltip text={t`Your wallet's current network is unsupported.`} disabled={isSupported}>
         <Row
+          data-testid="chain-selector"
           as="button"
           gap="8"
           className={styles.ChainSelector}

src/constants/chains.ts

@@ -87,6 +87,16 @@ export const TESTNET_CHAIN_IDS = [
   SupportedChainId.OPTIMISM_GOERLI,
 ] as const
 
+export const TESTNET_SET = new Set([
+  SupportedChainId.GOERLI,
+  SupportedChainId.SEPOLIA,
+  SupportedChainId.ARBITRUM_GOERLI,
+  SupportedChainId.OPTIMISM_GOERLI,
+  SupportedChainId.POLYGON_MUMBAI,
+  SupportedChainId.POLYGON_MUMBAI,
+  SupportedChainId.CELO_ALFAJORES,
+])
+
 export type SupportedTestnetChainId = typeof TESTNET_CHAIN_IDS[number]
 
 /**