feat: NavBar I18N (#4507)

* wrap tabs and searchbar

* wrap chain switcher and fix right align bug

* undo translate chains

* replace t with i18n

* revert i18n

Co-authored-by: Charlie <charlie@uniswap.org>

src/components/NavBar/ChainSwitcher.tsx

@@ -79,7 +79,7 @@ export const ChainSwitcher = ({ leftAlign }: ChainSwitcherProps) => {
   const isSupported = !!info
 
   const dropdown = (
-    <NavDropdown top="56" left="0">
+    <NavDropdown top="56" left={leftAlign ? '0' : 'auto'} right={leftAlign ? 'auto' : '0'}>
       <Column marginX="8">
         {NETWORK_SELECTOR_CHAINS.map((chainId: SupportedChainId) => (
           <ChainRow

src/components/NavBar/MenuDropdown.tsx

@@ -1,3 +1,4 @@
+import { Trans } from '@lingui/macro'
 import FeatureFlagModal from 'components/FeatureFlagModal/FeatureFlagModal'
 import { PrivacyPolicyModal } from 'components/PrivacyPolicy'
 import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
@@ -137,20 +138,26 @@ export const MenuDropdown = () => {
                     <Icon>
                       <ThinTagIcon width={24} height={24} />
                     </Icon>
-                    <PrimaryMenuRow.Text>Sell NFTs</PrimaryMenuRow.Text>
+                    <PrimaryMenuRow.Text>
+                      <Trans>Sell NFTs</Trans>
+                    </PrimaryMenuRow.Text>
                   </PrimaryMenuRow>
                 )}
                 <PrimaryMenuRow to="/vote" close={toggleOpen}>
                   <Icon>
                     <GovernanceIcon width={24} height={24} />
                   </Icon>
-                  <PrimaryMenuRow.Text>Vote in governance</PrimaryMenuRow.Text>
+                  <PrimaryMenuRow.Text>
+                    <Trans>Vote in governance</Trans>
+                  </PrimaryMenuRow.Text>
                 </PrimaryMenuRow>
                 <PrimaryMenuRow href="https://info.uniswap.org/#/">
                   <Icon>
                     <BarChartIcon width={24} height={24} />
                   </Icon>
-                  <PrimaryMenuRow.Text>View token analytics</PrimaryMenuRow.Text>
+                  <PrimaryMenuRow.Text>
+                    <Trans>View token analytics</Trans>
+                  </PrimaryMenuRow.Text>
                 </PrimaryMenuRow>
               </Column>
               <Separator />
@@ -161,16 +168,24 @@ export const MenuDropdown = () => {
                 alignItems={{ sm: 'center', md: 'flex-start' }}
                 paddingX="8"
               >
-                <SecondaryLinkedText href="https://help.uniswap.org/en/">Help center ↗</SecondaryLinkedText>
-                <SecondaryLinkedText href="https://docs.uniswap.org/">Documentation ↗</SecondaryLinkedText>
+                <SecondaryLinkedText href="https://help.uniswap.org/en/">
+                  <Trans>Help center</Trans> ↗
+                </SecondaryLinkedText>
+                <SecondaryLinkedText href="https://docs.uniswap.org/">
+                  <Trans>Documentation</Trans> ↗
+                </SecondaryLinkedText>
                 <SecondaryLinkedText
                   onClick={() => {
                     toggleOpen()
                     togglePrivacyPolicy()
                   }}
-                >{`Legal & Privacy ↗`}</SecondaryLinkedText>
+                >
+                  <Trans>Legal & Privacy</Trans> ↗
+                </SecondaryLinkedText>
                 {(isDevelopmentEnv() || isStagingEnv()) && (
-                  <SecondaryLinkedText onClick={openFeatureFlagsModal}>{`Feature Flags`}</SecondaryLinkedText>
+                  <SecondaryLinkedText onClick={openFeatureFlagsModal}>
+                    <Trans>Feature Flags</Trans>
+                  </SecondaryLinkedText>
                 )}
               </Box>
               <IconRow>

src/components/NavBar/Navbar.tsx

@@ -1,3 +1,4 @@
+import { Trans } from '@lingui/macro'
 import Web3Status from 'components/Web3Status'
 import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
 import { ReactNode } from 'react'
@@ -45,18 +46,18 @@ const PageTabs = () => {
   return (
     <>
       <MenuItem href="/swap" isActive={pathname.startsWith('/swap')}>
-        Swap
+        <Trans>Swap</Trans>
       </MenuItem>
       <MenuItem href="/tokens" isActive={pathname.startsWith('/tokens')}>
-        Tokens
+        <Trans>Tokens</Trans>
       </MenuItem>
       {nftFlag === NftVariant.Enabled && (
         <MenuItem href="/nfts" isActive={pathname.startsWith('/nfts')}>
-          NFTs
+          <Trans>NFTs</Trans>
         </MenuItem>
       )}
       <MenuItem href="/pool" id={'pool-nav-link'} isActive={isPoolActive}>
-        Pool
+        <Trans>Pool</Trans>
       </MenuItem>
     </>
   )

src/components/NavBar/SearchBar.tsx

@@ -1,3 +1,5 @@
+// eslint-disable-next-line no-restricted-imports
+import { t, Trans } from '@lingui/macro'
 import clsx from 'clsx'
 import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
 import useDebounce from 'hooks/useDebounce'
@@ -31,7 +33,7 @@ import { CollectionRow, SkeletonRow, TokenRow } from './SuggestionRow'
 interface SearchBarDropdownSectionProps {
   toggleOpen: () => void
   suggestions: (GenieCollection | FungibleToken)[]
-  header: string
+  header: JSX.Element
   headerIcon?: JSX.Element
   hoveredIndex: number | undefined
   startingIndex: number
@@ -105,10 +107,12 @@ export const SearchBarDropdown = ({ toggleOpen, tokens, collections, hasInput }:
         setHoveredIndex={setHoveredIndex}
         toggleOpen={toggleOpen}
         suggestions={tokens}
-        header={'Tokens'}
+        header={<Trans>Tokens</Trans>}
       />
     ) : (
-      <Box className={styles.notFoundContainer}>No tokens found.</Box>
+      <Box className={styles.notFoundContainer}>
+        <Trans>No tokens found.</Trans>
+      </Box>
     )
 
   const collectionSearchResults =
@@ -120,7 +124,7 @@ export const SearchBarDropdown = ({ toggleOpen, tokens, collections, hasInput }:
           setHoveredIndex={setHoveredIndex}
           toggleOpen={toggleOpen}
           suggestions={collections}
-          header={'NFT Collections'}
+          header={<Trans>NFT Collections</Trans>}
         />
       ) : (
         <Box className={styles.notFoundContainer}>No NFT collections found.</Box>
@@ -223,7 +227,7 @@ export const SearchBarDropdown = ({ toggleOpen, tokens, collections, hasInput }:
               setHoveredIndex={setHoveredIndex}
               toggleOpen={toggleOpen}
               suggestions={searchHistory}
-              header={'Recent searches'}
+              header={<Trans>Recent searches</Trans>}
               headerIcon={<ClockIcon />}
             />
           )}
@@ -234,7 +238,7 @@ export const SearchBarDropdown = ({ toggleOpen, tokens, collections, hasInput }:
               setHoveredIndex={setHoveredIndex}
               toggleOpen={toggleOpen}
               suggestions={trendingTokens ?? []}
-              header={'Popular tokens'}
+              header={<Trans>Popular tokens</Trans>}
               headerIcon={<TrendingArrow />}
             />
           )}
@@ -245,7 +249,7 @@ export const SearchBarDropdown = ({ toggleOpen, tokens, collections, hasInput }:
               setHoveredIndex={setHoveredIndex}
               toggleOpen={toggleOpen}
               suggestions={trendingCollections as unknown as GenieCollection[]}
-              header={'Popular NFT collections'}
+              header={<Trans>Popular NFT collections</Trans>}
               headerIcon={<TrendingArrow />}
             />
           )}
@@ -316,6 +320,8 @@ export const SearchBar = () => {
     setSearchValue('')
   }, [pathname])
 
+  const placeholderText = phase1Flag === NftVariant.Enabled ? t`Search tokens and NFT collections` : t`Search tokens`
+
   return (
     <>
       <Box
@@ -345,7 +351,7 @@ export const SearchBar = () => {
           </Box>
           <Box
             as="input"
-            placeholder={`Search tokens${phase1Flag === NftVariant.Enabled ? ' and NFT collections' : ''}`}
+            placeholder={placeholderText}
             width={isOpen || phase1Flag === NftVariant.Enabled ? 'full' : '120'}
             onChange={(event: ChangeEvent<HTMLInputElement>) => {
               !isOpen && toggleOpen()

src/components/Web3Status/index.tsx

@@ -18,8 +18,12 @@ import styled, { css } from 'styled-components/macro'
 
 import { useOnClickOutside } from '../../hooks/useOnClickOutside'
 import { useHasSocks } from '../../hooks/useSocksBalance'
-import { useModalIsOpen, useToggleWalletDropdown, useToggleWalletModal } from '../../state/application/hooks'
-import { useCloseModal } from '../../state/application/hooks'
+import {
+  useCloseModal,
+  useModalIsOpen,
+  useToggleWalletDropdown,
+  useToggleWalletModal,
+} from '../../state/application/hooks'
 import { ApplicationModal } from '../../state/application/reducer'
 import { isTransactionRecent, useAllTransactions } from '../../state/transactions/hooks'
 import { TransactionDetails } from '../../state/transactions/types'

src/constants/chainInfo.ts

@@ -2,8 +2,7 @@ import celoCircleLogoUrl from 'assets/images/celoCircle.png'
 import ethereumLogoUrl from 'assets/images/ethereum-logo.png'
 import optimismCircleLogoUrl from 'assets/images/optimismCircle.png'
 import polygonCircleLogoUrl from 'assets/images/polygonCircle.png'
-import arbitrumLogoUrl from 'assets/svg/arbitrum_logo.svg'
-import arbitrumCircleLogoUrl from 'assets/svg/arbitrum_logo.svg'
+import { default as arbitrumCircleLogoUrl, default as arbitrumLogoUrl } from 'assets/svg/arbitrum_logo.svg'
 import celoLogo from 'assets/svg/celo_logo.svg'
 import optimismLogoUrl from 'assets/svg/optimistic_ethereum.svg'
 import polygonMaticLogo from 'assets/svg/polygon-matic-logo.svg'