fix: add a link to switch the locale conditionally (#1776)

* add a link to switch the locale conditionally

* make it smaller

* add the locale labels

* language labels from the internet

* fix the heart in the claim popup

* undo the conditional change

* remove todo

* updated Chinese locale name to office-365 language ids

* added missing <Trans>
Co-authored-by: Justin Domingue <judo@uniswap.org>

src/components/Popups/ClaimPopup.tsx

+import { Trans } from '@lingui/macro'
 import { CurrencyAmount, Token } from '@uniswap/sdk-core'
 import React, { useCallback, useEffect } from 'react'
 import ReactGA from 'react-ga'
-import { X } from 'react-feather'
+import { Heart, X } from 'react-feather'
 import styled, { keyframes } from 'styled-components'
 import tokenLogo from '../../assets/images/token-logo.png'
 import { ButtonPrimary } from '../../components/Button'
@@ -104,18 +105,20 @@ export default function ClaimPopup() {
               <span role="img" aria-label="party">
                 🎉
               </span>{' '}
-              UNI has arrived{' '}
+              <Trans>UNI has arrived</Trans>{' '}
               <span role="img" aria-label="party">
                 🎉
               </span>
             </TYPE.white>
             <TYPE.subHeader style={{ paddingTop: '0.5rem', textAlign: 'center' }} color="white">
-              {`Thanks for being part of the Uniswap community <3`}
+              <Trans>
+                Thanks for being part of the Uniswap community <Heart size={12} />
+              </Trans>
             </TYPE.subHeader>
           </AutoColumn>
           <AutoColumn style={{ zIndex: 10 }} justify="center">
             <ButtonPrimary padding="8px" borderRadius="8px" width={'fit-content'} onClick={handleToggleSelfClaimModal}>
-              Claim your UNI tokens
+              <Trans>Claim your UNI tokens</Trans>
             </ButtonPrimary>
           </AutoColumn>
         </StyledClaimPopup>

src/components/SwitchLocaleLink/index.tsx

+import { Trans } from '@lingui/macro'
+import React, { useMemo } from 'react'
+import { useLocation } from 'react-router'
+import styled from 'styled-components/macro'
+import { DEFAULT_LOCALE, LOCALE_LABEL, SupportedLocale } from '../../constants/locales'
+import { navigatorLocale, useActiveLocale } from '../../hooks/useActiveLocale'
+import useParsedQueryString from '../../hooks/useParsedQueryString'
+import { StyledInternalLink, TYPE } from '../../theme'
+import { stringify } from 'qs'
+
+const Container = styled(TYPE.small)`
+  opacity: 0.6;
+  :hover {
+    opacity: 1;
+  }
+  margin-top: 1rem !important;
+`
+
+export function SwitchLocaleLink() {
+  const activeLocale = useActiveLocale()
+  const browserLocale = useMemo(() => navigatorLocale(), [])
+  const location = useLocation()
+  const qs = useParsedQueryString()
+
+  if (browserLocale && (browserLocale !== DEFAULT_LOCALE || activeLocale !== DEFAULT_LOCALE)) {
+    let targetLocale: SupportedLocale
+    if (activeLocale === browserLocale) {
+      targetLocale = DEFAULT_LOCALE
+    } else {
+      targetLocale = browserLocale
+    }
+
+    const target = {
+      ...location,
+      search: stringify({ ...qs, lng: targetLocale }),
+    }
+
+    return (
+      <Container>
+        <Trans>
+          Uniswap available in: {<StyledInternalLink to={target}>{LOCALE_LABEL[targetLocale]}</StyledInternalLink>}
+        </Trans>
+      </Container>
+    )
+  }
+  return null
+}

src/constants/locales.ts

@@ -35,7 +35,36 @@ export type SupportedLocale = typeof SUPPORTED_LOCALES[number]
 
 export const DEFAULT_LOCALE: SupportedLocale = 'en-US'
 
-// todo: fill this back out
-export const LOCALE_LABEL: { [locale in SupportedLocale]?: string } = {
+export const LOCALE_LABEL: { [locale in SupportedLocale]: string } = {
+  'af-ZA': 'Afrikaans',
+  'ar-SA': 'العربية',
+  'ca-ES': 'Català',
+  'cs-CZ': 'čeština',
+  'da-DK': 'dansk',
+  'de-DE': 'Deutsche',
+  'el-GR': 'ελληνικά',
   'en-US': 'English',
+  'es-ES': 'Español',
+  'fi-FI': 'Suomalainen',
+  'fr-FR': 'français',
+  'he-IL': 'עִברִית',
+  'hu-HU': 'Magyar',
+  'id-ID': 'bahasa Indonesia',
+  'it-IT': 'Italiano',
+  'ja-JP': '日本語',
+  'ko-KR': '한국어',
+  'nl-NL': 'Nederlands',
+  'no-NO': 'norsk',
+  'pl-PL': 'Polskie',
+  'pt-BR': 'português',
+  'pt-PT': 'português',
+  'ro-RO': 'Română',
+  'ru-RU': 'русский',
+  'sr-SP': 'Српски',
+  'sv-SE': 'svenska',
+  'tr-TR': 'Türkçe',
+  'uk-UA': 'Український',
+  'vi-VN': 'Tiếng Việt',
+  'zh-CN': '中文 ( 中国 )',
+  'zh-TW': '中文 ( 台灣 )',
 }

src/hooks/useActiveLocale.ts

@@ -17,7 +17,7 @@ function parseLocale(maybeSupportedLocale: string): SupportedLocale | undefined
 /**
  * Returns the supported locale read from the user agent (navigator)
  */
-function navigatorLocale(): SupportedLocale | undefined {
+export function navigatorLocale(): SupportedLocale | undefined {
   if (!navigator.language) return undefined
 
   const [language, region] = navigator.language.split('-')

src/pages/Pool/index.tsx

@@ -13,6 +13,7 @@ import { Link } from 'react-router-dom'
 import { useWalletModalToggle } from 'state/application/hooks'
 import styled, { ThemeContext } from 'styled-components'
 import { HideSmall, TYPE } from 'theme'
+import { SwitchLocaleLink } from '../../components/SwitchLocaleLink'
 import { LoadingRows } from './styleds'
 import Toggle from 'components/Toggle'
 import { useUserHideClosedPositions } from 'state/user/hooks'
@@ -295,6 +296,7 @@ export default function Pool() {
           </AutoColumn>
         </AutoColumn>
       </PageWrapper>
+      <SwitchLocaleLink />
     </>
   )
 }

src/pages/Swap/index.tsx

+import { Trans } from '@lingui/macro'
 import { Currency, CurrencyAmount, Token, TradeType } from '@uniswap/sdk-core'
 import { Trade as V2Trade } from '@uniswap/v2-sdk'
 import { Trade as V3Trade } from '@uniswap/v3-sdk'
@@ -6,7 +7,7 @@ import UnsupportedCurrencyFooter from 'components/swap/UnsupportedCurrencyFooter
 import { MouseoverTooltip, MouseoverTooltipContent } from 'components/Tooltip'
 import JSBI from 'jsbi'
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react'
-import { ArrowDown, CheckCircle, HelpCircle, Info, ArrowLeft } from 'react-feather'
+import { ArrowDown, ArrowLeft, CheckCircle, HelpCircle, Info } from 'react-feather'
 import ReactGA from 'react-ga'
 import { Link, RouteComponentProps } from 'react-router-dom'
 import { Text } from 'rebass'
@@ -26,8 +27,8 @@ import ConfirmSwapModal from '../../components/swap/ConfirmSwapModal'
 import { ArrowWrapper, BottomGrouping, Dots, SwapCallbackError, Wrapper } from '../../components/swap/styleds'
 import SwapHeader from '../../components/swap/SwapHeader'
 import TradePrice from '../../components/swap/TradePrice'
+import { SwitchLocaleLink } from '../../components/SwitchLocaleLink'
 import TokenWarningModal from '../../components/TokenWarningModal'
-import { useActiveWeb3React } from '../../hooks/web3'
 import { useAllTokens, useCurrency } from '../../hooks/Tokens'
 import { ApprovalState, useApproveCallbackFromTrade } from '../../hooks/useApproveCallback'
 import { V3TradeState } from '../../hooks/useBestV3Trade'
@@ -39,6 +40,7 @@ import { useSwapCallback } from '../../hooks/useSwapCallback'
 import useToggledVersion, { Version } from '../../hooks/useToggledVersion'
 import { useUSDCValue } from '../../hooks/useUSDCPrice'
 import useWrapCallback, { WrapType } from '../../hooks/useWrapCallback'
+import { useActiveWeb3React } from '../../hooks/web3'
 import { useWalletModalToggle } from '../../state/application/hooks'
 import { Field } from '../../state/swap/actions'
 import {
@@ -55,7 +57,6 @@ import { isTradeBetter } from '../../utils/isTradeBetter'
 import { maxAmountSpend } from '../../utils/maxAmountSpend'
 import { warningSeverity } from '../../utils/prices'
 import AppBody from '../AppBody'
-import { Trans } from '@lingui/macro'
 
 const StyledInfo = styled(Info)`
   opacity: 0.4;
@@ -658,6 +659,7 @@ export default function Swap({ history }: RouteComponentProps) {
           </AutoColumn>
         </Wrapper>
       </AppBody>
+      <SwitchLocaleLink />
       {!swapIsUnsupported ? null : (
         <UnsupportedCurrencyFooter show={swapIsUnsupported} currencies={[currencies.INPUT, currencies.OUTPUT]} />
       )}

src/pages/Vote/VotePage.tsx

@@ -14,6 +14,7 @@ import { GreyCard } from '../../components/Card'
 import { AutoColumn } from '../../components/Column'
 import { CardSection, DataCard } from '../../components/earn/styled'
 import { RowBetween, RowFixed } from '../../components/Row'
+import { SwitchLocaleLink } from '../../components/SwitchLocaleLink'
 import DelegateModal from '../../components/vote/DelegateModal'
 import VoteModal from '../../components/vote/VoteModal'
 import {
@@ -199,6 +200,7 @@ export default function VotePage({
   }
 
   return (
+    <>
       <PageWrapper gap="lg" justify="center">
         <VoteModal isOpen={showVoteModal} onDismiss={toggleVoteModal} proposalId={proposalData?.id} support={support} />
         <DelegateModal isOpen={showDelegateModal} onDismiss={toggleDelegateModal} title={<Trans>Unlock Votes</Trans>} />
@@ -255,7 +257,7 @@ export default function VotePage({
                   toggleVoteModal()
                 }}
               >
-              Vote For
+                <Trans>Vote For</Trans>
               </ButtonPrimary>
               <ButtonPrimary
                 padding="8px"
@@ -355,5 +357,7 @@ export default function VotePage({
           </AutoColumn>
         </ProposalInfo>
       </PageWrapper>
+      <SwitchLocaleLink />
+    </>
   )
 }

src/pages/Vote/index.tsx

 import React from 'react'
 import { AutoColumn } from '../../components/Column'
 import styled from 'styled-components/macro'
+import { SwitchLocaleLink } from '../../components/SwitchLocaleLink'
 import { UNI } from '../../constants/tokens'
 import { ExternalLink, TYPE } from '../../theme'
 import { RowBetween, RowFixed } from '../../components/Row'
@@ -135,6 +136,7 @@ export default function Vote() {
   )
 
   return (
+    <>
       <PageWrapper gap="lg" justify="center">
         <DelegateModal
           isOpen={showDelegateModal}
@@ -155,8 +157,8 @@ export default function Vote() {
                 <RowBetween>
                   <TYPE.white fontSize={14}>
                     <Trans>
-                    UNI tokens represent voting shares in Uniswap governance. You can vote on each proposal yourself or
-                    delegate your votes to a third party.
+                      UNI tokens represent voting shares in Uniswap governance. You can vote on each proposal yourself
+                      or delegate your votes to a third party.
                     </Trans>
                   </TYPE.white>
                 </RowBetween>
@@ -260,5 +262,7 @@ export default function Vote() {
           <Trans>A minimum threshold of 1% of the total UNI supply is required to submit proposals</Trans>
         </TYPE.subHeader>
       </PageWrapper>
+      <SwitchLocaleLink />
+    </>
   )
 }