chore(i18n): wrapped English text around <Trans> component (#1714)

* feat(i18n): wrapped English text around <Trans> component

* cleanup

* synced

* regenerated locales

src/components/AccountDetails/Copy.tsx

@@ -4,6 +4,7 @@ import useCopyClipboard from '../../hooks/useCopyClipboard'
 
 import { LinkStyledButton } from '../../theme'
 import { CheckCircle, Copy } from 'react-feather'
+import { Trans } from '@lingui/macro'
 
 const CopyIcon = styled(LinkStyledButton)`
   color: ${({ theme }) => theme.text3};
@@ -33,7 +34,9 @@ export default function CopyHelper(props: { toCopy: string; children?: React.Rea
       {isCopied ? (
         <TransactionStatusText>
           <CheckCircle size={'16'} />
-          <TransactionStatusText>Copied</TransactionStatusText>
+          <TransactionStatusText>
+            <Trans id="common.copied">Copied</Trans>
+          </TransactionStatusText>
         </TransactionStatusText>
       ) : (
         <TransactionStatusText>

src/components/AccountDetails/index.tsx

@@ -21,6 +21,7 @@ import Identicon from '../Identicon'
 import { ButtonSecondary } from '../Button'
 import { ExternalLink as LinkIcon } from 'react-feather'
 import { ExternalLink, LinkStyledButton, TYPE } from '../../theme'
+import { Trans } from '@lingui/macro'
 
 const HeaderRow = styled.div`
   ${({ theme }) => theme.flexRowNoWrap};
@@ -237,7 +238,11 @@ export default function AccountDetails({
           SUPPORTED_WALLETS[k].connector === connector && (connector !== injected || isMetaMask === (k === 'METAMASK'))
       )
       .map((k) => SUPPORTED_WALLETS[k].name)[0]
-    return <WalletName>Connected with {name}</WalletName>
+    return (
+      <WalletName>
+        <Trans id="wallet.connectedWith">Connected with {name}</Trans>
+      </WalletName>
+    )
   }
 
   function getStatusIcon() {
@@ -250,32 +255,32 @@ export default function AccountDetails({
     } else if (connector === walletconnect) {
       return (
         <IconWrapper size={16}>
-          <img src={WalletConnectIcon} alt={'wallet connect logo'} />
+          <img src={WalletConnectIcon} alt={'WalletConnect logo'} />
         </IconWrapper>
       )
     } else if (connector === walletlink) {
       return (
         <IconWrapper size={16}>
-          <img src={CoinbaseWalletIcon} alt={'coinbase wallet logo'} />
+          <img src={CoinbaseWalletIcon} alt={'Coinbase Wallet logo'} />
         </IconWrapper>
       )
     } else if (connector === fortmatic) {
       return (
         <IconWrapper size={16}>
-          <img src={FortmaticIcon} alt={'fortmatic logo'} />
+          <img src={FortmaticIcon} alt={'Fortmatic logo'} />
         </IconWrapper>
       )
     } else if (connector === portis) {
       return (
         <>
           <IconWrapper size={16}>
-            <img src={PortisIcon} alt={'portis logo'} />
+            <img src={PortisIcon} alt={'Portis logo'} />
             <MainWalletAction
               onClick={() => {
                 portis.portis.showPortis()
               }}
             >
-              Show Portis
+              <Trans id="wallet.showPortis">Show Portis</Trans>
             </MainWalletAction>
           </IconWrapper>
         </>
@@ -294,7 +299,9 @@ export default function AccountDetails({
         <CloseIcon onClick={toggleWalletModal}>
           <CloseColor />
         </CloseIcon>
-        <HeaderRow>Account</HeaderRow>
+        <HeaderRow>
+          <Trans id="wallet.account">Account</Trans>
+        </HeaderRow>
         <AccountSection>
           <YourAccount>
             <InfoCard>
@@ -308,7 +315,7 @@ export default function AccountDetails({
                         ;(connector as any).close()
                       }}
                     >
-                      Disconnect
+                      <Trans id="wallet.disconnect">Disconnect</Trans>
                     </WalletAction>
                   )}
                   <WalletAction
@@ -317,7 +324,7 @@ export default function AccountDetails({
                       openOptions()
                     }}
                   >
-                    Change
+                    <Trans id="wallet.change">Change</Trans>
                   </WalletAction>
                 </div>
               </AccountGroupingRow>
@@ -347,7 +354,9 @@ export default function AccountDetails({
                       <div>
                         {account && (
                           <Copy toCopy={account}>
-                            <span style={{ marginLeft: '4px' }}>Copy Address</span>
+                            <span style={{ marginLeft: '4px' }}>
+                              <Trans id="wallet.copyAddress">Copy Address</Trans>
+                            </span>
                           </Copy>
                         )}
                         {chainId && account && (
@@ -357,7 +366,9 @@ export default function AccountDetails({
                             href={getExplorerLink(chainId, ENSName, ExplorerDataType.ADDRESS)}
                           >
                             <LinkIcon size={16} />
-                            <span style={{ marginLeft: '4px' }}>View on Etherscan</span>
+                            <span style={{ marginLeft: '4px' }}>
+                              <Trans id="wallet.viewOnEtherscan">View on Etherscan</Trans>
+                            </span>
                           </AddressLink>
                         )}
                       </div>
@@ -369,7 +380,9 @@ export default function AccountDetails({
                       <div>
                         {account && (
                           <Copy toCopy={account}>
-                            <span style={{ marginLeft: '4px' }}>Copy Address</span>
+                            <span style={{ marginLeft: '4px' }}>
+                              <Trans id="wallet.copyAddress">Copy Address</Trans>
+                            </span>
                           </Copy>
                         )}
                         {chainId && account && (
@@ -379,7 +392,9 @@ export default function AccountDetails({
                             href={getExplorerLink(chainId, account, ExplorerDataType.ADDRESS)}
                           >
                             <LinkIcon size={16} />
-                            <span style={{ marginLeft: '4px' }}>View on Etherscan</span>
+                            <span style={{ marginLeft: '4px' }}>
+                              <Trans id="wallet.viewOnEtherscan">View on Etherscan</Trans>
+                            </span>
                           </AddressLink>
                         )}
                       </div>
@@ -394,15 +409,21 @@ export default function AccountDetails({
       {!!pendingTransactions.length || !!confirmedTransactions.length ? (
         <LowerSection>
           <AutoRow mb={'1rem'} style={{ justifyContent: 'space-between' }}>
-            <TYPE.body>Recent Transactions</TYPE.body>
-            <LinkStyledButton onClick={clearAllTransactionsCallback}>(clear all)</LinkStyledButton>
+            <TYPE.body>
+              <Trans id="wallet.recentTransactions">Recent Transactions</Trans>
+            </TYPE.body>
+            <LinkStyledButton onClick={clearAllTransactionsCallback}>
+              <Trans id="wallet.clearAllTransactions">(clear all)</Trans>
+            </LinkStyledButton>
           </AutoRow>
           {renderTransactions(pendingTransactions)}
           {renderTransactions(confirmedTransactions)}
         </LowerSection>
       ) : (
         <LowerSection>
-          <TYPE.body color={theme.text1}>Your transactions will appear here...</TYPE.body>
+          <TYPE.body color={theme.text1}>
+            <Trans id="wallet.yourTransactionsWillAppearHere">Your transactions will appear here...</Trans>
+          </TYPE.body>
         </LowerSection>
       )}
     </>

src/components/Blocklist/index.tsx

 import React, { ReactNode, useMemo } from 'react'
 import { useActiveWeb3React } from '../../hooks/web3'
+import { Trans } from '@lingui/macro'
 
 // SDN OFAC addresses
 const BLOCKED_ADDRESSES: string[] = [
@@ -14,7 +15,11 @@ export default function Blocklist({ children }: { children: ReactNode }) {
   const { account } = useActiveWeb3React()
   const blocked: boolean = useMemo(() => Boolean(account && BLOCKED_ADDRESSES.indexOf(account) !== -1), [account])
   if (blocked) {
-    return <div>Blocked address</div>
+    return (
+      <div>
+        <Trans id="blocklist.labels.blockedAddress">Blocked address</Trans>
+      </div>
+    )
   }
   return <>{children}</>
 }

src/components/CurrencyInputPanel/FiatValue.tsx

@@ -4,6 +4,7 @@ import useTheme from '../../hooks/useTheme'
 import { TYPE } from '../../theme'
 import { warningSeverity } from '../../utils/prices'
 import HoverInlineText from 'components/HoverInlineText'
+import { Trans } from '@lingui/macro'
 
 export function FiatValue({
   fiatValue,
@@ -24,10 +25,18 @@ export function FiatValue({
 
   return (
     <TYPE.body fontSize={14} color={fiatValue ? theme.text2 : theme.text4}>
-      {fiatValue ? '~$' : ''}
-      <HoverInlineText text={fiatValue ? fiatValue?.toSignificant(6, { groupSeparator: ',' }) : ''} />{' '}
+      {fiatValue ? (
+        <Trans id="currencies.labels.fiatValue">
+          ~$ <HoverInlineText text={fiatValue?.toSignificant(6, { groupSeparator: ',' })} />
+        </Trans>
+      ) : (
+        ''
+      )}
       {priceImpact ? (
-        <span style={{ color: priceImpactColor }}> ({priceImpact.multiply(-1).toSignificant(3)}%)</span>
+        <span style={{ color: priceImpactColor }}>
+          {' '}
+          (<Trans id="numbers.valueWithPercent">{priceImpact.multiply(-1).toSignificant(3)}%</Trans>)
+        </span>
       ) : null}
     </TYPE.body>
   )

src/components/Header/URLWarning.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components/macro'
 import { AlertTriangle, X } from 'react-feather'
 import { useURLWarningToggle, useURLWarningVisible } from '../../state/user/hooks'
 import { isMobile } from 'react-device-detect'
+import { Trans } from '@lingui/macro'
 
 const PhishAlert = styled.div<{ isActive: any }>`
   width: 100%;
@@ -29,17 +30,23 @@ export default function URLWarning() {
   return isMobile ? (
     <PhishAlert isActive={showURLWarning}>
       <div style={{ display: 'flex' }}>
-        <AlertTriangle style={{ marginRight: 6 }} size={12} /> Make sure the URL is
-        <code style={{ padding: '0 4px', display: 'inline', fontWeight: 'bold' }}>app.uniswap.org</code>
+        <AlertTriangle style={{ marginRight: 6 }} size={12} />
+        <Trans id="phish.urlWarning">
+          Make sure the URL is
+          <code style={{ padding: '0 4px', display: 'inline', fontWeight: 'bold' }}>app.uniswap.org</code>
+        </Trans>
       </div>
       <StyledClose size={12} onClick={toggleURLWarning} />
     </PhishAlert>
   ) : window.location.hostname === 'app.uniswap.org' ? (
     <PhishAlert isActive={showURLWarning}>
       <div style={{ display: 'flex' }}>
-        <AlertTriangle style={{ marginRight: 6 }} size={12} /> Always make sure the URL is
-        <code style={{ padding: '0 4px', display: 'inline', fontWeight: 'bold' }}>app.uniswap.org</code> - bookmark it
-        to be safe.
+        <AlertTriangle style={{ marginRight: 6 }} size={12} />
+        <Trans id="phish.urlWarningLocationOk">
+          Always make sure the URL is
+          <code style={{ padding: '0 4px', display: 'inline', fontWeight: 'bold' }}>app.uniswap.org</code> - bookmark it
+          to be safe.
+        </Trans>
       </div>
       <StyledClose size={12} onClick={toggleURLWarning} />
     </PhishAlert>

src/components/Header/UniBalanceContent.tsx

@@ -16,6 +16,7 @@ import useUSDCPrice from '../../hooks/useUSDCPrice'
 import { AutoColumn } from '../Column'
 import { RowBetween } from '../Row'
 import { Break, CardBGImage, CardNoise, CardSection, DataCard } from '../earn/styled'
+import { Trans } from '@lingui/macro'
 
 const ContentWrapper = styled(AutoColumn)`
   width: 100%;
@@ -65,7 +66,9 @@ export default function UniBalanceContent({ setShowUniBalanceModal }: { setShowU
         <CardNoise />
         <CardSection gap="md">
           <RowBetween>
-            <TYPE.white color="white">Your UNI Breakdown</TYPE.white>
+            <TYPE.white color="white">
+              <Trans id="uni.yourUNIBreakdown">Your UNI Breakdown</Trans>
+            </TYPE.white>
             <StyledClose stroke="white" onClick={() => setShowUniBalanceModal(false)} />
           </RowBetween>
         </CardSection>
@@ -81,16 +84,20 @@ export default function UniBalanceContent({ setShowUniBalanceModal }: { setShowU
               </AutoColumn>
               <AutoColumn gap="md">
                 <RowBetween>
-                  <TYPE.white color="white">Balance:</TYPE.white>
+                  <TYPE.white color="white">
+                    <Trans id="claim.labels.balance">Balance:</Trans>
+                  </TYPE.white>
                   <TYPE.white color="white">{uniBalance?.toFixed(2, { groupSeparator: ',' })}</TYPE.white>
                 </RowBetween>
                 <RowBetween>
-                  <TYPE.white color="white">Unclaimed:</TYPE.white>
+                  <TYPE.white color="white">
+                    <Trans id="claim.unclaimed">Unclaimed:</Trans>
+                  </TYPE.white>
                   <TYPE.white color="white">
                     {uniToClaim?.toFixed(4, { groupSeparator: ',' })}{' '}
                     {uniToClaim && uniToClaim.greaterThan('0') && (
                       <StyledInternalLink onClick={() => setShowUniBalanceModal(false)} to="/uni">
-                        (claim)
+                        <Trans id="claim.labels.claim">(claim)</Trans>
                       </StyledInternalLink>
                     )}
                   </TYPE.white>
@@ -103,19 +110,27 @@ export default function UniBalanceContent({ setShowUniBalanceModal }: { setShowU
         <CardSection gap="sm">
           <AutoColumn gap="md">
             <RowBetween>
-              <TYPE.white color="white">UNI price:</TYPE.white>
+              <TYPE.white color="white">
+                <Trans id="uni.UNIPrice">UNI price:</Trans>
+              </TYPE.white>
               <TYPE.white color="white">${uniPrice?.toFixed(2) ?? '-'}</TYPE.white>
             </RowBetween>
             <RowBetween>
-              <TYPE.white color="white">UNI in circulation:</TYPE.white>
+              <TYPE.white color="white">
+                <Trans id="uni.inCirculation">UNI in circulation:</Trans>
+              </TYPE.white>
               <TYPE.white color="white">{circulation?.toFixed(0, { groupSeparator: ',' })}</TYPE.white>
             </RowBetween>
             <RowBetween>
-              <TYPE.white color="white">Total Supply</TYPE.white>
+              <TYPE.white color="white">
+                <Trans id="uni.totalSupply">Total Supply</Trans>
+              </TYPE.white>
               <TYPE.white color="white">{totalSupply?.toFixed(0, { groupSeparator: ',' })}</TYPE.white>
             </RowBetween>
             {uni && uni.chainId === 1 ? (
-              <ExternalLink href={`https://info.uniswap.org/token/${uni.address}`}>View UNI Analytics</ExternalLink>
+              <ExternalLink href={`https://info.uniswap.org/token/${uni.address}`}>
+                <Trans id="uni.viewAnalytics">View UNI Analytics</Trans>
+              </ExternalLink>
             ) : null}
           </AutoColumn>
         </CardSection>

src/components/InputStepCounter/InputStepCounter.tsx

@@ -8,6 +8,7 @@ import { AutoColumn } from 'components/Column'
 import { ButtonPrimary } from 'components/Button'
 import { FeeAmount } from '@uniswap/v3-sdk'
 import { formattedFeeAmount } from 'utils'
+import { Trans } from '@lingui/macro'
 
 const pulse = (color: string) => keyframes`
   0% {
@@ -139,16 +140,22 @@ const StepCounter = ({
           }}
         />
         <InputTitle fontSize={12} textAlign="center">
-          {tokenB + ' per ' + tokenA}
+          <Trans id="currencies.denominated">
+            {tokenB} per {tokenA}
+          </Trans>
         </InputTitle>
       </AutoColumn>
       {!locked ? (
         <RowBetween>
           <SmallButton onClick={handleDecrement}>
-            <TYPE.white fontSize="12px">-{feeAmountFormatted}%</TYPE.white>
+            <TYPE.white fontSize="12px">
+              <Trans id="inputs.feeAmount.minus">-{feeAmountFormatted}%</Trans>
+            </TYPE.white>
           </SmallButton>
           <SmallButton onClick={handleIncrement}>
-            <TYPE.white fontSize="12px">+{feeAmountFormatted}%</TYPE.white>
+            <TYPE.white fontSize="12px">
+              <Trans id="inputs.feeAmount.plus">+{feeAmountFormatted}%</Trans>
+            </TYPE.white>
           </SmallButton>
         </RowBetween>
       ) : null}

src/components/Menu/index.tsx

@@ -7,6 +7,7 @@ import { useActiveWeb3React } from '../../hooks/web3'
 import { useOnClickOutside } from '../../hooks/useOnClickOutside'
 import { ApplicationModal } from '../../state/application/actions'
 import { useModalOpen, useToggleModal } from '../../state/application/hooks'
+import { Trans } from '@lingui/macro'
 
 import { ExternalLink } from '../../theme'
 import { ButtonPrimary } from '../Button'
@@ -142,27 +143,37 @@ export default function Menu() {
         <MenuFlyout>
           <MenuItem href="https://uniswap.org/">
             <Info size={14} />
-            <div>About</div>
+            <div>
+              <Trans id="menu.about">About</Trans>
+            </div>
           </MenuItem>
           <MenuItem href="https://docs.uniswap.org/">
             <BookOpen size={14} />
-            <div>Docs</div>
+            <div>
+              <Trans id="menu.docs">Docs</Trans>
+            </div>
           </MenuItem>
           <MenuItem href={CODE_LINK}>
             <Code size={14} />
-            <div>Code</div>
+            <div>
+              <Trans id="menu.code">Code</Trans>
+            </div>
           </MenuItem>
           <MenuItem href="https://discord.gg/FCfyBSbCU5">
             <MessageCircle size={14} />
-            <div>Discord</div>
+            <div>
+              <Trans id="menu.discord">Discord</Trans>
+            </div>
           </MenuItem>
           <MenuItem href="https://info.uniswap.org/">
             <PieChart size={14} />
-            <div>Analytics</div>
+            <div>
+              <Trans id="menu.analytics">Analytics</Trans>
+            </div>
           </MenuItem>
           {account && (
             <UNIbutton onClick={openClaimModal} padding="8px 16px" width="100%" borderRadius="12px" mt="0.5rem">
-              Claim UNI
+              <Trans id="claim.buttons.claimUNI">Claim UNI</Trans>
             </UNIbutton>
           )}
         </MenuFlyout>

src/components/ModalViews/index.tsx

@@ -7,6 +7,7 @@ import styled, { ThemeContext } from 'styled-components'
 import { RowBetween } from '../Row'
 import { TYPE, CloseIcon, CustomLightSpinner } from '../../theme'
 import { ArrowUpCircle } from 'react-feather'
+import { Trans } from '@lingui/macro'
 
 import Circle from '../../assets/images/blue-loader.svg'
 import { ExternalLink } from '../../theme/components'
@@ -32,7 +33,9 @@ export function LoadingView({ children, onDismiss }: { children: any; onDismiss:
       </ConfirmedIcon>
       <AutoColumn gap="100px" justify={'center'}>
         {children}
-        <TYPE.subHeader>Confirm this transaction in your wallet</TYPE.subHeader>
+        <TYPE.subHeader>
+          <Trans id="wallet.confirmTransaction">Confirm this transaction in your wallet</Trans>
+        </TYPE.subHeader>
       </AutoColumn>
     </ConfirmOrLoadingWrapper>
   )
@@ -66,7 +69,9 @@ export function SubmittedView({
             href={getExplorerLink(chainId, hash, ExplorerDataType.TRANSACTION)}
             style={{ marginLeft: '4px' }}
           >
-            <TYPE.subHeader>View transaction on Etherscan</TYPE.subHeader>
+            <TYPE.subHeader>
+              <Trans id="transaction.viewOnEherscan">View transaction on Etherscan</Trans>
+            </TYPE.subHeader>
           </ExternalLink>
         )}
       </AutoColumn>

src/components/PositionCard/Sushi.tsx

@@ -3,6 +3,7 @@ import { Token } from '@uniswap/sdk-core'
 import { Link } from 'react-router-dom'
 import { Text } from 'rebass'
 import styled from 'styled-components/macro'
+import { Trans } from '@lingui/macro'
 
 import { unwrappedToken } from '../../utils/unwrappedToken'
 import { ButtonEmpty } from '../Button'
@@ -48,7 +49,13 @@ export default function SushiPositionCard({ tokenA, tokenB, liquidityToken, bord
           <AutoRow gap="8px">
             <DoubleCurrencyLogo currency0={currency0} currency1={currency1} size={20} />
             <Text fontWeight={500} fontSize={20}>
-              {!currency0 || !currency1 ? <Dots>Loading</Dots> : `${currency0.symbol}/${currency1.symbol}`}
+              {!currency0 || !currency1 ? (
+                <Dots>
+                  <Trans id="common.loading">Loading</Trans>
+                </Dots>
+              ) : (
+                `${currency0.symbol}/${currency1.symbol}`
+              )}
             </Text>
 
             <Badge variant={BadgeVariant.WARNING}>Sushi</Badge>
@@ -61,7 +68,7 @@ export default function SushiPositionCard({ tokenA, tokenB, liquidityToken, bord
               as={Link}
               to={`/migrate/v2/${liquidityToken.address}`}
             >
-              Migrate
+              <Trans id="pools.buttons.migrate">Migrate</Trans>
             </ButtonEmpty>
           </RowFixed>
         </FixedHeightRow>

src/components/PositionCard/V2.tsx

@@ -7,6 +7,7 @@ import { Link } from 'react-router-dom'
 import { Text } from 'rebass'
 import styled from 'styled-components/macro'
 import { useTotalSupply } from '../../hooks/useTotalSupply'
+import { Trans } from '@lingui/macro'
 
 import { useActiveWeb3React } from '../../hooks/web3'
 import { useTokenBalance } from '../../state/wallet/hooks'
@@ -85,7 +86,13 @@ export default function V2PositionCard({ pair, border, stakedBalance }: Position
           <AutoRow gap="8px">
             <DoubleCurrencyLogo currency0={currency0} currency1={currency1} size={20} />
             <Text fontWeight={500} fontSize={20}>
-              {!currency0 || !currency1 ? <Dots>Loading</Dots> : `${currency0.symbol}/${currency1.symbol}`}
+              {!currency0 || !currency1 ? (
+                <Dots>
+                  <Trans id="common.loading">Loading</Trans>
+                </Dots>
+              ) : (
+                `${currency0.symbol}/${currency1.symbol}`
+              )}
             </Text>
           </AutoRow>
           <RowFixed gap="8px">
@@ -97,12 +104,12 @@ export default function V2PositionCard({ pair, border, stakedBalance }: Position
             >
               {showMore ? (
                 <>
-                  Manage
+                  <Trans id="pools.buttons.manage">Manage</Trans>
                   <ChevronUp size="20" style={{ marginLeft: '10px' }} />
                 </>
               ) : (
                 <>
-                  Manage
+                  <Trans id="pools.buttons.manage">Manage</Trans>
                   <ChevronDown size="20" style={{ marginLeft: '10px' }} />
                 </>
               )}
@@ -114,7 +121,7 @@ export default function V2PositionCard({ pair, border, stakedBalance }: Position
           <AutoColumn gap="8px">
             <FixedHeightRow>
               <Text fontSize={16} fontWeight={500}>
-                Your total pool tokens:
+                <Trans id="pool.yourTotalPoolTokens">Your total pool tokens:</Trans>
               </Text>
               <Text fontSize={16} fontWeight={500}>
                 {userPoolBalance ? userPoolBalance.toSignificant(4) : '-'}
@@ -123,7 +130,7 @@ export default function V2PositionCard({ pair, border, stakedBalance }: Position
             {stakedBalance && (
               <FixedHeightRow>
                 <Text fontSize={16} fontWeight={500}>
-                  Pool tokens in rewards pool:
+                  <Trans id="pool.poolTokensInRewardsPool">Pool tokens in rewards pool:</Trans>
                 </Text>
                 <Text fontSize={16} fontWeight={500}>
                   {stakedBalance.toSignificant(4)}
@@ -133,7 +140,7 @@ export default function V2PositionCard({ pair, border, stakedBalance }: Position
             <FixedHeightRow>
               <RowFixed>
                 <Text fontSize={16} fontWeight={500}>
-                  Pooled {currency0.symbol}:
+                  <Trans id="pool.pooledCurrency">Pooled {currency0.symbol}:</Trans>
                 </Text>
               </RowFixed>
               {token0Deposited ? (
@@ -151,7 +158,7 @@ export default function V2PositionCard({ pair, border, stakedBalance }: Position
             <FixedHeightRow>
               <RowFixed>
                 <Text fontSize={16} fontWeight={500}>
-                  Pooled {currency1.symbol}:
+                  <Trans id="pool.pooledCurrency"></Trans>Pooled {currency1.symbol}:
                 </Text>
               </RowFixed>
               {token1Deposited ? (
@@ -168,7 +175,7 @@ export default function V2PositionCard({ pair, border, stakedBalance }: Position
 
             <FixedHeightRow>
               <Text fontSize={16} fontWeight={500}>
-                Your pool share:
+                <Trans id="pool.yourPoolShare">Your pool share:</Trans>
               </Text>
               <Text fontSize={16} fontWeight={500}>
                 {poolTokenPercentage
@@ -186,7 +193,7 @@ export default function V2PositionCard({ pair, border, stakedBalance }: Position
                   to={`/migrate/v2/${pair.liquidityToken.address}`}
                   width="64%"
                 >
-                  Migrate
+                  <Trans id="pools.buttons.migrate">Migrate</Trans>
                 </ButtonPrimary>
                 <ButtonSecondary
                   padding="8px"
@@ -195,7 +202,7 @@ export default function V2PositionCard({ pair, border, stakedBalance }: Position
                   width="32%"
                   to={`/remove/v2/${currencyId(currency0)}/${currencyId(currency1)}`}
                 >
-                  Remove
+                  <Trans id="butons.remove">Remove</Trans>
                 </ButtonSecondary>
               </RowBetween>
             )}

src/components/PositionCard/index.tsx

@@ -8,6 +8,7 @@ import { Link } from 'react-router-dom'
 import { Text } from 'rebass'
 import styled from 'styled-components/macro'
 import { useTotalSupply } from '../../hooks/useTotalSupply'
+import { Trans } from '@lingui/macro'
 
 import { useActiveWeb3React } from '../../hooks/web3'
 import { useTokenBalance } from '../../state/wallet/hooks'
@@ -91,7 +92,7 @@ export function MinimalPositionCard({ pair, showUnwrapped = false, border }: Pos
             <FixedHeightRow>
               <RowFixed>
                 <Text fontWeight={500} fontSize={16}>
-                  Your position
+                  <Trans id="pool.yourPosition">Your position</Trans>
                 </Text>
               </RowFixed>
             </FixedHeightRow>
@@ -111,7 +112,7 @@ export function MinimalPositionCard({ pair, showUnwrapped = false, border }: Pos
             <AutoColumn gap="4px">
               <FixedHeightRow>
                 <Text fontSize={16} fontWeight={500}>
-                  Your pool share:
+                  <Trans id="pool.yourPoolShare">Your pool share:</Trans>
                 </Text>
                 <Text fontSize={16} fontWeight={500}>
                   {poolTokenPercentage ? poolTokenPercentage.toFixed(6) + '%' : '-'}
@@ -154,8 +155,10 @@ export function MinimalPositionCard({ pair, showUnwrapped = false, border }: Pos
             <span role="img" aria-label="wizard-icon">
               ⭐️
             </span>{' '}
-            By adding liquidity you&apos;ll earn 0.3% of all trades on this pair proportional to your share of the pool.
-            Fees are added to the pool, accrue in real time and can be claimed by withdrawing your liquidity.
+            <Trans id="pool.noLiquidityHint">
+              By adding liquidity you&apos;ll earn 0.3% of all trades on this pair proportional to your share of the
+              pool. Fees are added to the pool, accrue in real time and can be claimed by withdrawing your liquidity.
+            </Trans>{' '}
           </TYPE.subHeader>
         </LightCard>
       )}
@@ -206,19 +209,25 @@ export default function FullPositionCard({ pair, border, stakedBalance }: Positi
           <AutoRow gap="8px" style={{ marginLeft: '8px' }}>
             <DoubleCurrencyLogo currency0={currency0} currency1={currency1} size={20} />
             <Text fontWeight={500} fontSize={20}>
-              {!currency0 || !currency1 ? <Dots>Loading</Dots> : `${currency0.symbol}/${currency1.symbol}`}
+              {!currency0 || !currency1 ? (
+                <Dots>
+                  <Trans id="common.loading">Loading</Trans>
+                </Dots>
+              ) : (
+                `${currency0.symbol}/${currency1.symbol}`
+              )}
             </Text>
           </AutoRow>
           <RowFixed gap="8px" style={{ marginRight: '4px' }}>
             <ButtonEmpty padding="6px 8px" borderRadius="12px" width="100%" onClick={() => setShowMore(!showMore)}>
               {showMore ? (
                 <>
-                  Manage
+                  <Trans id="pools.buttons.manage">Manage</Trans>
                   <ChevronUp size="20" style={{ marginLeft: '8px', height: '20px', minWidth: '20px' }} />
                 </>
               ) : (
                 <>
-                  Manage
+                  <Trans id="pools.buttons.manage">Manage</Trans>
                   <ChevronDown size="20" style={{ marginLeft: '8px', height: '20px', minWidth: '20px' }} />
                 </>
               )}
@@ -230,7 +239,7 @@ export default function FullPositionCard({ pair, border, stakedBalance }: Positi
           <AutoColumn gap="8px">
             <FixedHeightRow>
               <Text fontSize={16} fontWeight={500}>
-                Your total pool tokens:
+                <Trans id="pool.yourTotalPoolTokens">Your total pool tokens:</Trans>
               </Text>
               <Text fontSize={16} fontWeight={500}>
                 {userPoolBalance ? userPoolBalance.toSignificant(4) : '-'}
@@ -239,7 +248,7 @@ export default function FullPositionCard({ pair, border, stakedBalance }: Positi
             {stakedBalance && (
               <FixedHeightRow>
                 <Text fontSize={16} fontWeight={500}>
-                  Pool tokens in rewards pool:
+                  <Trans id="pool.poolTokensInRewardsPool">Pool tokens in rewards pool:</Trans>
                 </Text>
                 <Text fontSize={16} fontWeight={500}>
                   {stakedBalance.toSignificant(4)}
@@ -249,7 +258,7 @@ export default function FullPositionCard({ pair, border, stakedBalance }: Positi
             <FixedHeightRow>
               <RowFixed>
                 <Text fontSize={16} fontWeight={500}>
-                  Pooled {currency0.symbol}:
+                  <Trans id="pool.pooledCurrency">Pooled {currency0.symbol}:</Trans>
                 </Text>
               </RowFixed>
               {token0Deposited ? (
@@ -267,7 +276,7 @@ export default function FullPositionCard({ pair, border, stakedBalance }: Positi
             <FixedHeightRow>
               <RowFixed>
                 <Text fontSize={16} fontWeight={500}>
-                  Pooled {currency1.symbol}:
+                  <Trans id="pool.pooledCurrency">Pooled {currency1.symbol}:</Trans>
                 </Text>
               </RowFixed>
               {token1Deposited ? (
@@ -284,12 +293,16 @@ export default function FullPositionCard({ pair, border, stakedBalance }: Positi
 
             <FixedHeightRow>
               <Text fontSize={16} fontWeight={500}>
-                Your pool share:
+                <Trans id="pool.yourPoolShare">Your pool share:</Trans>
               </Text>
               <Text fontSize={16} fontWeight={500}>
-                {poolTokenPercentage
-                  ? (poolTokenPercentage.toFixed(2) === '0.00' ? '<0.01' : poolTokenPercentage.toFixed(2)) + '%'
-                  : '-'}
+                {poolTokenPercentage ? (
+                  <Trans id="numbers.valueWithPercent">
+                    {poolTokenPercentage.toFixed(2) === '0.00' ? '<0.01' : poolTokenPercentage.toFixed(2)} %
+                  </Trans>
+                ) : (
+                  '-'
+                )}
               </Text>
             </FixedHeightRow>
 
@@ -298,7 +311,9 @@ export default function FullPositionCard({ pair, border, stakedBalance }: Positi
                 style={{ width: '100%', textAlign: 'center' }}
                 href={`https://v2.info.uniswap.org/account/${account}`}
               >
-                View accrued fees and analytics<span style={{ fontSize: '11px' }}>↗</span>
+                <Trans id="links.viewAccruedFees">
+                  View accrued fees and analytics<span style={{ fontSize: '11px' }}>↗</span>
+                </Trans>
               </ExternalLink>
             </ButtonSecondary>
             {userDefaultPoolBalance && JSBI.greaterThan(userDefaultPoolBalance.quotient, BIG_INT_ZERO) && (
@@ -310,7 +325,7 @@ export default function FullPositionCard({ pair, border, stakedBalance }: Positi
                   to={`/migrate/v2/${pair.liquidityToken.address}`}
                   width="32%"
                 >
-                  Migrate
+                  <Trans id="pools.buttons.migrate">Migrate</Trans>
                 </ButtonPrimary>
                 <ButtonPrimary
                   padding="8px"
@@ -319,7 +334,7 @@ export default function FullPositionCard({ pair, border, stakedBalance }: Positi
                   to={`/add/v2/${currencyId(currency0)}/${currencyId(currency1)}`}
                   width="32%"
                 >
-                  Add
+                  <Trans id="pools.buttons.add">Add</Trans>
                 </ButtonPrimary>
                 <ButtonPrimary
                   padding="8px"
@@ -328,7 +343,7 @@ export default function FullPositionCard({ pair, border, stakedBalance }: Positi
                   width="32%"
                   to={`/remove/v2/${currencyId(currency0)}/${currencyId(currency1)}`}
                 >
-                  Remove
+                  <Trans id="butons.remove">Remove</Trans>
                 </ButtonPrimary>
               </RowBetween>
             )}
@@ -340,7 +355,7 @@ export default function FullPositionCard({ pair, border, stakedBalance }: Positi
                 to={`/uni/${currencyId(currency0)}/${currencyId(currency1)}`}
                 width="100%"
               >
-                Manage Liquidity in Rewards Pool
+                <Trans id="pools.buttons.manageLiquidityInRewardsPool">Manage Liquidity in Rewards Pool</Trans>
               </ButtonPrimary>
             )}
           </AutoColumn>

src/components/PositionListItem/index.tsx

@@ -16,6 +16,7 @@ import RangeBadge from 'components/Badge/RangeBadge'
 import { RowFixed } from 'components/Row'
 import HoverInlineText from 'components/HoverInlineText'
 import { DAI, USDC, USDT, WBTC } from '../../constants/tokens'
+import { Trans } from '@lingui/macro'
 
 const LinkRow = styled(Link)`
   align-items: center;
@@ -223,7 +224,9 @@ export default function PositionListItem({ positionDetails }: PositionListItemPr
           </DataText>
           &nbsp;
           <Badge>
-            <BadgeText>{new Percent(feeAmount, 1_000_000).toSignificant()}%</BadgeText>
+            <BadgeText>
+              <Trans id="numbers.valueWithPercent">{new Percent(feeAmount, 1_000_000).toSignificant()}%</Trans>
+            </BadgeText>
           </Badge>
         </PrimaryPositionIdData>
         <RangeBadge removed={removed} inRange={!outOfRange} />
@@ -232,9 +235,13 @@ export default function PositionListItem({ positionDetails }: PositionListItemPr
       {priceLower && priceUpper ? (
         <RangeLineItem>
           <RangeText>
-            <ExtentsText>Min: </ExtentsText>
-            {formatPrice(priceLower, 5)} <HoverInlineText text={currencyQuote?.symbol} /> {' per '}{' '}
-            <HoverInlineText text={currencyBase?.symbol ?? ''} />
+            <ExtentsText>
+              <Trans id="pools.labels.min">Min: </Trans>
+            </ExtentsText>
+            <Trans id="currencies.denominatedWithValue">
+              {formatPrice(priceLower, 5)} <HoverInlineText text={currencyQuote?.symbol} /> per{' '}
+              <HoverInlineText text={currencyBase?.symbol ?? ''} />
+            </Trans>
           </RangeText>{' '}
           <HideSmall>
             <DoubleArrow>⟷</DoubleArrow>{' '}
@@ -243,9 +250,13 @@ export default function PositionListItem({ positionDetails }: PositionListItemPr
             <DoubleArrow>↕</DoubleArrow>{' '}
           </SmallOnly>
           <RangeText>
-            <ExtentsText>Max:</ExtentsText>
-            {formatPrice(priceUpper, 5)} <HoverInlineText text={currencyQuote?.symbol} /> {' per '}{' '}
-            <HoverInlineText maxCharacters={10} text={currencyBase?.symbol} />
+            <ExtentsText>
+              <Trans id="pools.labels.max">Max:</Trans>
+            </ExtentsText>
+            <Trans id="currencies.denominatedWithValue">
+              {formatPrice(priceUpper, 5)} <HoverInlineText text={currencyQuote?.symbol} /> per{' '}
+              <HoverInlineText maxCharacters={10} text={currencyBase?.symbol} />
+            </Trans>
           </RangeText>
         </RangeLineItem>
       ) : (

src/components/SearchModal/ImportRow.tsx

@@ -11,6 +11,7 @@ import styled from 'styled-components/macro'
 import { useIsUserAddedToken, useIsTokenActive } from 'hooks/Tokens'
 import { CheckCircle } from 'react-feather'
 import { WrappedTokenInfo } from '../../state/lists/wrappedTokenInfo'
+import { Trans } from '@lingui/macro'
 
 const TokenSection = styled.div<{ dim?: boolean }>`
   padding: 4px 20px;
@@ -73,7 +74,7 @@ export default function ImportRow({
         {list && list.logoURI && (
           <RowFixed>
             <TYPE.small mr="4px" color={theme.text3}>
-              via {list.name}
+              <Trans id="tokenLists.via">via {list.name} </Trans>
             </TYPE.small>
             <ListLogo logoURI={list.logoURI} size="12px" />
           </RowFixed>
@@ -90,12 +91,14 @@ export default function ImportRow({
             showImportView()
           }}
         >
-          Import
+          <Trans id="tokensLists.buttons.import">Import</Trans>
         </ButtonPrimary>
       ) : (
         <RowFixed style={{ minWidth: 'fit-content' }}>
           <CheckIcon />
-          <TYPE.main color={theme.green1}>Active</TYPE.main>
+          <TYPE.main color={theme.green1}>
+            <Trans id="tokenLists.labels.active">Active</Trans>
+          </TYPE.main>
         </RowFixed>
       )}
     </TokenSection>

src/components/SearchModal/ManageLists.tsx

@@ -7,6 +7,7 @@ import styled from 'styled-components/macro'
 import { useFetchListCallback } from '../../hooks/useFetchListCallback'
 import { useOnClickOutside } from '../../hooks/useOnClickOutside'
 import { TokenList } from '@uniswap/token-lists'
+import { t, Trans } from '@lingui/macro'
 
 import useToggle from '../../hooks/useToggle'
 import { AppDispatch, AppState } from '../../state'
@@ -173,7 +174,7 @@ const ListRow = memo(function ListRow({ listUrl }: { listUrl: string }) {
         </Row>
         <RowFixed mt="4px">
           <StyledListUrlText active={isActive} mr="6px">
-            {list.tokens.length} tokens
+            <Trans id="tokenLists.numberOfTokens">{list.tokens.length} tokens</Trans>
           </StyledListUrlText>
           <StyledMenu ref={node as any}>
             <ButtonEmpty onClick={toggle} ref={setReferenceElement} padding="0">
@@ -183,12 +184,16 @@ const ListRow = memo(function ListRow({ listUrl }: { listUrl: string }) {
               <PopoverContainer show={true} ref={setPopperElement as any} style={styles.popper} {...attributes.popper}>
                 <div>{list && listVersionLabel(list.version)}</div>
                 <SeparatorDark />
-                <ExternalLink href={`https://tokenlists.org/token-list?url=${listUrl}`}>View list</ExternalLink>
+                <ExternalLink href={`https://tokenlists.org/token-list?url=${listUrl}`}>
+                  <Trans id="tokenLists.links.viewList">View list</Trans>
+                </ExternalLink>
                 <UnpaddedLinkStyledButton onClick={handleRemoveList} disabled={Object.keys(listsByUrl).length === 1}>
-                  Remove list
+                  <Trans id="tokenLists.buttons.removeList">Remove list</Trans>
                 </UnpaddedLinkStyledButton>
                 {pending && (
-                  <UnpaddedLinkStyledButton onClick={handleAcceptListUpdate}>Update list</UnpaddedLinkStyledButton>
+                  <UnpaddedLinkStyledButton onClick={handleAcceptListUpdate}>
+                    <Trans id="tokenLists.buttons.updateLists">Update list</Trans>
+                  </UnpaddedLinkStyledButton>
                 )}
               </PopoverContainer>
             )}
@@ -287,14 +292,15 @@ export function ManageLists({
     async function fetchTempList() {
       fetchList(listUrlInput, false)
         .then((list) => setTempList(list))
-        .catch(() => setAddError('Error importing list'))
+        .catch(() => setAddError(t({ id: 'tokenLists.errors.importingList', message: 'Error importing list' })))
     }
     // if valid url, fetch details for card
     if (validUrl) {
       fetchTempList()
     } else {
       setTempList(undefined)
-      listUrlInput !== '' && setAddError('Enter valid list location')
+      listUrlInput !== '' &&
+        setAddError(t({ id: 'tokenList.errors.invalidLocation', message: 'Enter valid list location' }))
     }
 
     // reset error
@@ -348,7 +354,9 @@ export function ManageLists({
                   <IconWrapper stroke={theme.text2} size="16px" marginRight={'10px'}>
                     <CheckCircle />
                   </IconWrapper>
-                  <TYPE.body color={theme.text2}>Loaded</TYPE.body>
+                  <TYPE.body color={theme.text2}>
+                    <Trans id="common.loaded">Loaded</Trans>
+                  </TYPE.body>
                 </RowFixed>
               ) : (
                 <ButtonPrimary
@@ -357,7 +365,7 @@ export function ManageLists({
                   width="fit-content"
                   onClick={handleImport}
                 >
-                  Import
+                  <Trans id="tokenLists.buttons.import">Import</Trans>
                 </ButtonPrimary>
               )}
             </RowBetween>

src/components/SearchModal/ManageTokens.tsx

@@ -14,6 +14,7 @@ import { useActiveWeb3React } from 'hooks/web3'
 import Card from 'components/Card'
 import ImportRow from './ImportRow'
 import useTheme from '../../hooks/useTheme'
+import { Trans } from '@lingui/macro'
 
 import { CurrencyModalView } from './CurrencySearchModal'
 
@@ -109,7 +110,11 @@ export default function ManageTokens({
               onChange={handleInput}
             />
           </Row>
-          {searchQuery !== '' && !isAddressSearch && <TYPE.error error={true}>Enter valid token address</TYPE.error>}
+          {searchQuery !== '' && !isAddressSearch && (
+            <TYPE.error error={true}>
+              <Trans id="tokenLists.input.enterValidAddress">Enter valid token address</Trans>
+            </TYPE.error>
+          )}
           {searchToken && (
             <Card backgroundColor={theme.bg2} padding="10px 0">
               <ImportRow
@@ -125,11 +130,14 @@ export default function ManageTokens({
         <PaddedColumn gap="lg" style={{ overflow: 'auto', marginBottom: '10px' }}>
           <RowBetween>
             <TYPE.main fontWeight={600}>
+              {/* TODO(judo): handle plural */}
               {userAddedTokens?.length} Custom {userAddedTokens.length === 1 ? 'Token' : 'Tokens'}
             </TYPE.main>
             {userAddedTokens.length > 0 && (
               <ButtonText onClick={handleRemoveAll}>
-                <TYPE.blue>Clear all</TYPE.blue>
+                <TYPE.blue>
+                  <Trans id="common.clearAll">Clear all</Trans>
+                </TYPE.blue>
               </ButtonText>
             )}
           </RowBetween>
@@ -137,7 +145,9 @@ export default function ManageTokens({
         </PaddedColumn>
       </Column>
       <Footer>
-        <TYPE.darkGray>Tip: Custom tokens are stored locally in your browser</TYPE.darkGray>
+        <TYPE.darkGray>
+          <Trans id="tokenLists.manageHint">Tip: Custom tokens are stored locally in your browser</Trans>
+        </TYPE.darkGray>
       </Footer>
     </Wrapper>
   )

src/components/TransactionConfirmationModal/index.tsx

@@ -14,6 +14,7 @@ import Circle from '../../assets/images/blue-loader.svg'
 import MetaMaskLogo from '../../assets/images/metamask.png'
 import { useActiveWeb3React } from '../../hooks/web3'
 import useAddTokenToMetamask from 'hooks/useAddTokenToMetamask'
+import { Trans } from '@lingui/macro'
 
 const Wrapper = styled.div`
   width: 100%;
@@ -61,7 +62,7 @@ export function ConfirmationPendingContent({
         </ConfirmedIcon>
         <AutoColumn gap="12px" justify={'center'}>
           <Text fontWeight={500} fontSize={20} textAlign="center">
-            Waiting For Confirmation
+            <Trans id="transactions.waitingForConfirmation">Waiting For Confirmation</Trans>
           </Text>
           <AutoColumn gap="12px" justify={'center'}>
             <Text fontWeight={600} fontSize={14} color="" textAlign="center">
@@ -69,7 +70,7 @@ export function ConfirmationPendingContent({
             </Text>
           </AutoColumn>
           <Text fontSize={12} color="#565A69" textAlign="center" marginBottom={12}>
-            Confirm this transaction in your wallet
+            <Trans id="transactions.confirmInWallet">Confirm this transaction in your wallet</Trans>
           </Text>
         </AutoColumn>
       </AutoColumn>
@@ -110,12 +111,12 @@ export function TransactionSubmittedContent({
         </ConfirmedIcon>
         <AutoColumn gap="12px" justify={'center'}>
           <Text fontWeight={500} fontSize={20} textAlign="center">
-            Transaction Submitted
+            <Trans id="transactions.submitted">Transaction Submitted</Trans>
           </Text>
           {chainId && hash && (
             <ExternalLink href={getExplorerLink(chainId, hash, ExplorerDataType.TRANSACTION)}>
               <Text fontWeight={500} fontSize={14} color={theme.primary1}>
-                View on Etherscan
+                <Trans id="wallet.viewOnEtherscan">View on Etherscan</Trans>
               </Text>
             </ExternalLink>
           )}
@@ -123,11 +124,13 @@ export function TransactionSubmittedContent({
             <ButtonLight mt="12px" padding="6px 12px" width="fit-content" onClick={addToken}>
               {!success ? (
                 <RowFixed>
-                  Add {currencyToAdd.symbol} to Metamask <StyledLogo src={MetaMaskLogo} />
+                  <Trans id="wallet.addTokenToMetamask">
+                    Add {currencyToAdd.symbol} to Metamask <StyledLogo src={MetaMaskLogo} />
+                  </Trans>
                 </RowFixed>
               ) : (
                 <RowFixed>
-                  Added {currencyToAdd.symbol}{' '}
+                  <Trans id="wallet.addedTokenToMetamask">Added {currencyToAdd.symbol} </Trans>
                   <CheckCircle size={'16px'} stroke={theme.green1} style={{ marginLeft: '6px' }} />
                 </RowFixed>
               )}
@@ -135,7 +138,7 @@ export function TransactionSubmittedContent({
           )}
           <ButtonPrimary onClick={onDismiss} style={{ margin: '20px 0 0 0' }}>
             <Text fontWeight={500} fontSize={20}>
-              {inline ? 'Return' : 'Close'}
+              {inline ? <Trans id="common.return">Return</Trans> : <Trans id="common.close">Close</Trans>}
             </Text>
           </ButtonPrimary>
         </AutoColumn>
@@ -195,7 +198,9 @@ export function TransactionErrorContent({ message, onDismiss }: { message: strin
         </AutoColumn>
       </Section>
       <BottomSection gap="12px">
-        <ButtonPrimary onClick={onDismiss}>Dismiss</ButtonPrimary>
+        <ButtonPrimary onClick={onDismiss}>
+          <Trans id="common.dismiss">Dismiss</Trans>
+        </ButtonPrimary>
       </BottomSection>
     </Wrapper>
   )

src/components/WalletModal/PendingView.tsx

@@ -6,6 +6,7 @@ import Option from './Option'
 import { injected } from '../../connectors'
 import { darken } from 'polished'
 import Loader from '../Loader'
+import { Trans } from '@lingui/macro'
 
 const PendingSection = styled.div`
   ${({ theme }) => theme.flexColumnNoWrap};
@@ -82,20 +83,22 @@ export default function PendingView({
         <LoadingWrapper>
           {error ? (
             <ErrorGroup>
-              <div>Error connecting.</div>
+              <div>
+                <Trans id="error.connecting">Error connecting</Trans>
+              </div>
               <ErrorButton
                 onClick={() => {
                   setPendingError(false)
                   connector && tryActivation(connector)
                 }}
               >
-                Try Again
+                <Trans id="error.tryAgain">Try Again</Trans>
               </ErrorButton>
             </ErrorGroup>
           ) : (
             <>
               <StyledLoader />
-              Initializing...
+              <Trans id="wallet.initializing">Initializing...</Trans>
             </>
           )}
         </LoadingWrapper>

src/components/WalletModal/index.tsx

@@ -16,6 +16,7 @@ import { ApplicationModal } from '../../state/application/actions'
 import { useModalOpen, useWalletModalToggle } from '../../state/application/hooks'
 import { ExternalLink, TYPE } from '../../theme'
 import AccountDetails from '../AccountDetails'
+import { t, Trans } from '@lingui/macro'
 
 import Modal from '../Modal'
 import Option from './Option'
@@ -239,7 +240,7 @@ export default function WalletModal({
                 id={`connect-${key}`}
                 key={key}
                 color={'#E8831D'}
-                header={'Install Metamask'}
+                header={t({ id: 'wallet.installMetamask', message: 'Install Metamask' })}
                 subheader={null}
                 link={'https://metamask.io/'}
                 icon={MetamaskIcon}
@@ -290,12 +291,20 @@ export default function WalletModal({
           <CloseIcon onClick={toggleWalletModal}>
             <CloseColor />
           </CloseIcon>
-          <HeaderRow>{error instanceof UnsupportedChainIdError ? 'Wrong Network' : 'Error connecting'}</HeaderRow>
+          <HeaderRow>
+            {error instanceof UnsupportedChainIdError ? (
+              <Trans id="error.wrongNetwork">Wrong Network</Trans>
+            ) : (
+              <Trans id="error.connecting">Error connecting</Trans>
+            )}
+          </HeaderRow>
           <ContentWrapper>
             {error instanceof UnsupportedChainIdError ? (
-              <h5>Please connect to the appropriate Ethereum network.</h5>
+              <h5>
+                <Trans id="wallet.connectToNetwork">Please connect to the appropriate Ethereum network.</Trans>
+              </h5>
             ) : (
-              'Error connecting. Try refreshing the page.'
+              <Trans id="error.connectingTryRefreshing">Error connecting. Try refreshing the page.</Trans>
             )}
           </ContentWrapper>
         </UpperSection>
@@ -325,12 +334,14 @@ export default function WalletModal({
                 setWalletView(WALLET_VIEWS.ACCOUNT)
               }}
             >
-              Back
+              <Trans id="common.back">Back</Trans>
             </HoverText>
           </HeaderRow>
         ) : (
           <HeaderRow>
-            <HoverText>Connect to a wallet</HoverText>
+            <HoverText>
+              <Trans id="wallet.connectLongForm">Connect to a wallet</Trans>
+            </HoverText>
           </HeaderRow>
         )}
 
@@ -338,10 +349,12 @@ export default function WalletModal({
           <LightCard style={{ marginBottom: '16px' }}>
             <AutoRow style={{ flexWrap: 'nowrap' }}>
               <TYPE.main fontSize={14}>
-                By connecting a wallet, you agree to Uniswap Labs’{' '}
-                <ExternalLink href="https://uniswap.org/terms-of-service/">Terms of Service</ExternalLink> and
-                acknowledge that you have read and understand the{' '}
-                <ExternalLink href="https://uniswap.org/disclaimer/">Uniswap protocol disclaimer</ExternalLink>.
+                <Trans id="wallet.connectAcknowledgement">
+                  By connecting a wallet, you agree to Uniswap Labs’{' '}
+                  <ExternalLink href="https://uniswap.org/terms-of-service/">Terms of Service</ExternalLink> and
+                  acknowledge that you have read and understand the{' '}
+                  <ExternalLink href="https://uniswap.org/disclaimer/">Uniswap protocol disclaimer</ExternalLink>.
+                </Trans>
               </TYPE.main>
             </AutoRow>
           </LightCard>

src/components/claim/AddressClaimModal.tsx

@@ -20,6 +20,7 @@ import { CardNoise, CardBGImage, CardBGImageSmaller } from '../earn/styled'
 import { useIsTransactionPending } from '../../state/transactions/hooks'
 import { CurrencyAmount, Token } from '@uniswap/sdk-core'
 import { shortenAddress } from '../../utils'
+import { Trans } from '@lingui/macro'
 
 const ContentWrapper = styled(AutoColumn)`
   width: 100%;
@@ -103,23 +104,31 @@ export default function AddressClaimModal({ isOpen, onDismiss }: { isOpen: boole
             <CardNoise />
             <CardSection gap="md">
               <RowBetween>
-                <TYPE.white fontWeight={500}>Claim UNI Token</TYPE.white>
+                <TYPE.white fontWeight={500}>
+                  <Trans id="claim.buttons.claimUNIToken">Claim UNI Token</Trans>
+                </TYPE.white>
                 <CloseIcon onClick={wrappedOnDismiss} style={{ zIndex: 99 }} stroke="white" />
               </RowBetween>
               <TYPE.white fontWeight={700} fontSize={36}>
-                {unclaimedAmount?.toFixed(0, { groupSeparator: ',' } ?? '-')} UNI
+                <Trans id="claim.labels.tokenAmount">
+                  {unclaimedAmount?.toFixed(0, { groupSeparator: ',' } ?? '-')} UNI
+                </Trans>
               </TYPE.white>
             </CardSection>
             <Break />
           </ModalUpper>
           <AutoColumn gap="md" style={{ padding: '1rem', paddingTop: '0' }} justify="center">
             <TYPE.subHeader fontWeight={500}>
-              Enter an address to trigger a UNI claim. If the address has any claimable UNI it will be sent to them on
-              submission.
+              <Trans id="claim.labels.enterAddress">
+                Enter an address to trigger a UNI claim. If the address has any claimable UNI it will be sent to them on
+                submission.
+              </Trans>
             </TYPE.subHeader>
             <AddressInputPanel value={typed} onChange={handleRecipientType} />
             {parsedAddress && !hasAvailableClaim && (
-              <TYPE.error error={true}>Address has no available claim</TYPE.error>
+              <TYPE.error error={true}>
+                <Trans id="claim.noAvailableClaim">Address has no available claim</Trans>
+              </TYPE.error>
             )}
             <ButtonPrimary
               disabled={!isAddress(parsedAddress ?? '') || !hasAvailableClaim}
@@ -129,7 +138,7 @@ export default function AddressClaimModal({ isOpen, onDismiss }: { isOpen: boole
               mt="1rem"
               onClick={onClaim}
             >
-              Claim UNI
+              <Trans id="claim.buttons.claimUNI">Claim UNI</Trans>
             </ButtonPrimary>
           </AutoColumn>
         </ContentWrapper>
@@ -146,22 +155,28 @@ export default function AddressClaimModal({ isOpen, onDismiss }: { isOpen: boole
             {!claimConfirmed ? (
               <CustomLightSpinner src={Circle} alt="loader" size={'90px'} />
             ) : (
-              <UniTokenAnimated width="72px" src={tokenLogo} />
+              <UniTokenAnimated width="72px" src={tokenLogo} alt="UNI logo" />
             )}
           </ConfirmedIcon>
           <AutoColumn gap="100px" justify={'center'}>
             <AutoColumn gap="12px" justify={'center'}>
               <TYPE.largeHeader fontWeight={600} color="black">
-                {claimConfirmed ? 'Claimed' : 'Claiming'}
+                {claimConfirmed ? (
+                  <Trans id="claim.label.statusClaimed">Claimed</Trans>
+                ) : (
+                  <Trans id="claim.label.statusClaiming">Claiming</Trans>
+                )}
               </TYPE.largeHeader>
               {!claimConfirmed && (
                 <Text fontSize={36} color={'#ff007a'} fontWeight={800}>
-                  {unclaimedAmount?.toFixed(0, { groupSeparator: ',' } ?? '-')} UNI
+                  <Trans id="claim.labels.tokenAmount">
+                    {unclaimedAmount?.toFixed(0, { groupSeparator: ',' } ?? '-')} UNI
+                  </Trans>
                 </Text>
               )}
               {parsedAddress && (
                 <TYPE.largeHeader fontWeight={600} color="black">
-                  for {shortenAddress(parsedAddress)}
+                  <Trans id="claim.labels.address">for {shortenAddress(parsedAddress)}</Trans>
                 </TYPE.largeHeader>
               )}
             </AutoColumn>
@@ -171,7 +186,7 @@ export default function AddressClaimModal({ isOpen, onDismiss }: { isOpen: boole
                   <span role="img" aria-label="party-hat">
                     🎉{' '}
                   </span>
-                  Welcome to team Unicorn :){' '}
+                  <Trans id="claim.labels.welcome">Welcome to team Unicorn :) </Trans>
                   <span role="img" aria-label="party-hat">
                     🎉
                   </span>
@@ -179,11 +194,13 @@ export default function AddressClaimModal({ isOpen, onDismiss }: { isOpen: boole
               </>
             )}
             {attempting && !hash && (
-              <TYPE.subHeader color="black">Confirm this transaction in your wallet</TYPE.subHeader>
+              <TYPE.subHeader color="black">
+                <Trans id="wallet.confirmTransaction">Confirm this transaction in your wallet</Trans>
+              </TYPE.subHeader>
             )}
             {attempting && hash && !claimConfirmed && chainId && hash && (
               <ExternalLink href={getExplorerLink(chainId, hash, ExplorerDataType.TRANSACTION)} style={{ zIndex: 99 }}>
-                View transaction on Etherscan
+                <Trans id="transaction.viewOnEherscan">View transaction on Etherscan</Trans>
               </ExternalLink>
             )}
           </AutoColumn>

src/components/claim/ClaimModal.tsx

@@ -17,6 +17,7 @@ import { ButtonPrimary } from '../Button'
 import { AutoColumn, ColumnCenter } from '../Column'
 import Confetti from '../Confetti'
 import { Break, CardBGImage, CardBGImageSmaller, CardNoise, CardSection, DataCard } from '../earn/styled'
+import { Trans } from '@lingui/macro'
 
 import Modal from '../Modal'
 import { RowBetween } from '../Row'
@@ -99,11 +100,15 @@ export default function ClaimModal() {
             <CardNoise />
             <CardSection gap="md">
               <RowBetween>
-                <TYPE.white fontWeight={500}>Claim UNI</TYPE.white>
+                <TYPE.white fontWeight={500}>
+                  <Trans id="claim.buttons.claimUNI">Claim UNI</Trans>
+                </TYPE.white>
                 <CloseIcon onClick={toggleClaimModal} style={{ zIndex: 99 }} color="white" />
               </RowBetween>
               <TYPE.white fontWeight={700} fontSize={36}>
-                {unclaimedAmount?.toFixed(0, { groupSeparator: ',' } ?? '-')} UNI
+                <Trans id="claim.labels.tokenAmount">
+                  {unclaimedAmount?.toFixed(0, { groupSeparator: ',' } ?? '-')} UNI
+                </Trans>
               </TYPE.white>
             </CardSection>
             <Break />
@@ -111,34 +116,48 @@ export default function ClaimModal() {
               {userClaimData?.flags?.isSOCKS && (
                 <RowBetween>
                   <TYPE.subHeader color="white">SOCKS</TYPE.subHeader>
-                  <TYPE.subHeader color="white">{SOCKS_AMOUNT} UNI</TYPE.subHeader>
+                  <TYPE.subHeader color="white">
+                    <Trans id="claim.labels.socksAmount">{SOCKS_AMOUNT} UNI</Trans>
+                  </TYPE.subHeader>
                 </RowBetween>
               )}
               {userClaimData?.flags?.isLP &&
                 unclaimedAmount &&
                 JSBI.greaterThanOrEqual(unclaimedAmount.quotient, nonLPAmount) && (
                   <RowBetween>
-                    <TYPE.subHeader color="white">Liquidity</TYPE.subHeader>
                     <TYPE.subHeader color="white">
-                      {unclaimedAmount
-                        .subtract(CurrencyAmount.fromRawAmount(unclaimedAmount.currency, nonLPAmount))
-                        .toFixed(0, { groupSeparator: ',' })}{' '}
-                      UNI
+                      <Trans id="common.liquidity">Liquidity</Trans>
+                    </TYPE.subHeader>
+                    <TYPE.subHeader color="white">
+                      <Trans id="claim.labels.tokenAmount">
+                        {unclaimedAmount
+                          .subtract(CurrencyAmount.fromRawAmount(unclaimedAmount.currency, nonLPAmount))
+                          .toFixed(0, { groupSeparator: ',' })}{' '}
+                        UNI
+                      </Trans>
                     </TYPE.subHeader>
                   </RowBetween>
                 )}
               {userClaimData?.flags?.isUser && (
                 <RowBetween>
-                  <TYPE.subHeader color="white">User</TYPE.subHeader>
-                  <TYPE.subHeader color="white">{USER_AMOUNT} UNI</TYPE.subHeader>
+                  <TYPE.subHeader color="white">
+                    <Trans id="common.user">User</Trans>
+                  </TYPE.subHeader>
+                  <TYPE.subHeader color="white">
+                    <Trans id="claim.userAmount">{USER_AMOUNT} UNI</Trans>
+                  </TYPE.subHeader>
                 </RowBetween>
               )}
             </CardSection>
           </ModalUpper>
           <AutoColumn gap="md" style={{ padding: '1rem', paddingTop: '0' }} justify="center">
             <TYPE.subHeader fontWeight={500}>
-              As a member of the Uniswap community you may claim UNI to be used for voting and governance. <br /> <br />
-              <ExternalLink href="https://uniswap.org/blog/uni">Read more about UNI</ExternalLink>
+              <Trans id="claim.hints.uniswapCommunityMember">
+                As a member of the Uniswap community you may claim UNI to be used for voting and governance.
+                <br />
+                <br />
+                <ExternalLink href="https://uniswap.org/blog/uni">Read more about UNI</ExternalLink>
+              </Trans>
             </TYPE.subHeader>
             <ButtonPrimary
               disabled={!isAddress(account ?? '')}
@@ -148,7 +167,7 @@ export default function ClaimModal() {
               mt="1rem"
               onClick={onClaim}
             >
-              Claim UNI
+              <Trans id="claim.buttons.claimUNI">Claim UNI</Trans>
             </ButtonPrimary>
           </AutoColumn>
         </ContentWrapper>
@@ -165,7 +184,7 @@ export default function ClaimModal() {
             {!claimConfirmed ? (
               <CustomLightSpinner src={Circle} alt="loader" size={'90px'} />
             ) : (
-              <UniTokenAnimated width="72px" src={tokenLogo} />
+              <UniTokenAnimated width="72px" src={tokenLogo} alt="UNI" />
             )}
           </ConfirmedIcon>
           <AutoColumn gap="100px" justify={'center'}>
@@ -175,32 +194,38 @@ export default function ClaimModal() {
               </TYPE.largeHeader>
               {!claimConfirmed && (
                 <Text fontSize={36} color={'#ff007a'} fontWeight={800}>
-                  {unclaimedAmount?.toFixed(0, { groupSeparator: ',' } ?? '-')} UNI
+                  <Trans id="claim.labels.tokenAmount">
+                    {unclaimedAmount?.toFixed(0, { groupSeparator: ',' } ?? '-')} UNI
+                  </Trans>
                 </Text>
               )}
             </AutoColumn>
             {claimConfirmed && (
               <>
                 <TYPE.subHeader fontWeight={500} color="black">
-                  <span role="img" aria-label="party-hat">
-                    🎉{' '}
-                  </span>
-                  Welcome to team Unicorn :){' '}
-                  <span role="img" aria-label="party-hat">
-                    🎉
-                  </span>
+                  <Trans id="claim.labels.welcome">
+                    <span role="img" aria-label="party-hat">
+                      🎉{' '}
+                    </span>
+                    Welcome to team Unicorn :){' '}
+                    <span role="img" aria-label="party-hat">
+                      🎉
+                    </span>
+                  </Trans>
                 </TYPE.subHeader>
               </>
             )}
             {attempting && !claimSubmitted && (
-              <TYPE.subHeader color="black">Confirm this transaction in your wallet</TYPE.subHeader>
+              <TYPE.subHeader color="black">
+                <Trans id="claim.labels.confirmTransactionInWallet">Confirm this transaction in your wallet</Trans>
+              </TYPE.subHeader>
             )}
             {attempting && claimSubmitted && !claimConfirmed && chainId && claimTxn?.hash && (
               <ExternalLink
                 href={getExplorerLink(chainId, claimTxn?.hash, ExplorerDataType.TRANSACTION)}
                 style={{ zIndex: 99 }}
               >
-                View transaction on Etherscan
+                <Trans id="transaction.viewOnEherscan">View transaction on Etherscan</Trans>
               </ExternalLink>
             )}
           </AutoColumn>

src/components/earn/ClaimRewardModal.tsx

@@ -11,6 +11,7 @@ import { SubmittedView, LoadingView } from '../ModalViews'
 import { TransactionResponse } from '@ethersproject/providers'
 import { useTransactionAdder } from '../../state/transactions/hooks'
 import { useActiveWeb3React } from '../../hooks/web3'
+import { t, Trans } from '@lingui/macro'
 
 const ContentWrapper = styled(AutoColumn)`
   width: 100%;
@@ -46,7 +47,10 @@ export default function ClaimRewardModal({ isOpen, onDismiss, stakingInfo }: Sta
         .getReward({ gasLimit: 350000 })
         .then((response: TransactionResponse) => {
           addTransaction(response, {
-            summary: `Claim accumulated UNI rewards`,
+            summary: t({
+              id: 'transactions.summary.claimAccumulatedUNIRewards',
+              message: 'Claim accumulated UNI rewards',
+            }),
           })
           setHash(response.hash)
         })
@@ -59,10 +63,10 @@ export default function ClaimRewardModal({ isOpen, onDismiss, stakingInfo }: Sta
 
   let error: string | undefined
   if (!account) {
-    error = 'Connect Wallet'
+    error = t({ id: 'wallet.connect' })
   }
   if (!stakingInfo?.stakedAmount) {
-    error = error ?? 'Enter an amount'
+    error = error ?? t({ id: 'earn.enterAmountError', message: 'Enter an amount' })
   }
 
   return (
@@ -70,7 +74,9 @@ export default function ClaimRewardModal({ isOpen, onDismiss, stakingInfo }: Sta
       {!attempting && !hash && (
         <ContentWrapper gap="lg">
           <RowBetween>
-            <TYPE.mediumHeader>Claim</TYPE.mediumHeader>
+            <TYPE.mediumHeader>
+              <Trans id="earn.claim.label">Claim</Trans>
+            </TYPE.mediumHeader>
             <CloseIcon onClick={wrappedOnDismiss} />
           </RowBetween>
           {stakingInfo?.earnedAmount && (
@@ -78,29 +84,39 @@ export default function ClaimRewardModal({ isOpen, onDismiss, stakingInfo }: Sta
               <TYPE.body fontWeight={600} fontSize={36}>
                 {stakingInfo?.earnedAmount?.toSignificant(6)}
               </TYPE.body>
-              <TYPE.body>Unclaimed UNI</TYPE.body>
+              <TYPE.body>
+                <Trans id="earn.claim.unclaimedUNI">Unclaimed UNI</Trans>
+              </TYPE.body>
             </AutoColumn>
           )}
           <TYPE.subHeader style={{ textAlign: 'center' }}>
-            When you claim without withdrawing your liquidity remains in the mining pool.
+            <Trans id="earn.claim.withoutWithdrawingHint">
+              When you claim without withdrawing your liquidity remains in the mining pool.
+            </Trans>
           </TYPE.subHeader>
           <ButtonError disabled={!!error} error={!!error && !!stakingInfo?.stakedAmount} onClick={onClaimReward}>
-            {error ?? 'Claim'}
+            {error ?? <Trans id="earn.claim.label">Claim</Trans>}
           </ButtonError>
         </ContentWrapper>
       )}
       {attempting && !hash && (
         <LoadingView onDismiss={wrappedOnDismiss}>
           <AutoColumn gap="12px" justify={'center'}>
-            <TYPE.body fontSize={20}>Claiming {stakingInfo?.earnedAmount?.toSignificant(6)} UNI</TYPE.body>
+            <TYPE.body fontSize={20}>
+              <Trans id="claim.labels.claimingAmount">Claiming {stakingInfo?.earnedAmount?.toSignificant(6)} UNI</Trans>
+            </TYPE.body>
           </AutoColumn>
         </LoadingView>
       )}
       {hash && (
         <SubmittedView onDismiss={wrappedOnDismiss} hash={hash}>
           <AutoColumn gap="12px" justify={'center'}>
-            <TYPE.largeHeader>Transaction Submitted</TYPE.largeHeader>
-            <TYPE.body fontSize={20}>Claimed UNI!</TYPE.body>
+            <TYPE.largeHeader>
+              <Trans id="transactions.submitted">Transaction Submitted</Trans>
+            </TYPE.largeHeader>
+            <TYPE.body fontSize={20}>
+              <Trans id="earn.claim.claimedUNI">Claimed UNI!</Trans>
+            </TYPE.body>
           </AutoColumn>
         </SubmittedView>
       )}

src/components/earn/PoolCard.tsx

@@ -16,6 +16,7 @@ import { useTotalSupply } from '../../hooks/useTotalSupply'
 import { useV2Pair } from '../../hooks/useV2Pairs'
 import useUSDCPrice from '../../hooks/useUSDCPrice'
 import { BIG_INT_SECONDS_IN_WEEK } from '../../constants/misc'
+import { Trans } from '@lingui/macro'
 
 const StatContainer = styled.div`
   display: flex;
@@ -120,30 +121,45 @@ export default function PoolCard({ stakingInfo }: { stakingInfo: StakingInfo })
 
         <StyledInternalLink to={`/uni/${currencyId(currency0)}/${currencyId(currency1)}`} style={{ width: '100%' }}>
           <ButtonPrimary padding="8px" borderRadius="8px">
-            {isStaking ? 'Manage' : 'Deposit'}
+            {isStaking ? <Trans id="earn.pool.manage">Manage</Trans> : <Trans id="earn.pool.deposit">Deposit</Trans>}
           </ButtonPrimary>
         </StyledInternalLink>
       </TopSection>
 
       <StatContainer>
         <RowBetween>
-          <TYPE.white> Total deposited</TYPE.white>
           <TYPE.white>
-            {valueOfTotalStakedAmountInUSDC
-              ? `$${valueOfTotalStakedAmountInUSDC.toFixed(0, { groupSeparator: ',' })}`
-              : `${valueOfTotalStakedAmountInWETH?.toSignificant(4, { groupSeparator: ',' }) ?? '-'} ETH`}
+            <Trans id="earn.pool.totalDeposited">Total deposited</Trans>
+          </TYPE.white>
+          <TYPE.white>
+            {valueOfTotalStakedAmountInUSDC ? (
+              <Trans id="earn.pool.valueInUSDC">
+                ${valueOfTotalStakedAmountInUSDC.toFixed(0, { groupSeparator: ',' })}
+              </Trans>
+            ) : (
+              <Trans id="earn.pool.valueInETH">
+                ${valueOfTotalStakedAmountInWETH?.toSignificant(4, { groupSeparator: ',' }) ?? '-'} ETH
+              </Trans>
+            )}
           </TYPE.white>
         </RowBetween>
         <RowBetween>
-          <TYPE.white> Pool rate </TYPE.white>
           <TYPE.white>
-            {stakingInfo
-              ? stakingInfo.active
-                ? `${stakingInfo.totalRewardRate
-                    ?.multiply(BIG_INT_SECONDS_IN_WEEK)
-                    ?.toFixed(0, { groupSeparator: ',' })} UNI / week`
-                : '0 UNI / week'
-              : '-'}
+            <Trans id="earn.pool.rate">Pool rate</Trans>
+          </TYPE.white>
+          <TYPE.white>
+            {stakingInfo ? (
+              stakingInfo.active ? (
+                <Trans id="earn.pool.rewardRate">
+                  {stakingInfo.totalRewardRate?.multiply(BIG_INT_SECONDS_IN_WEEK)?.toFixed(0, { groupSeparator: ',' })}{' '}
+                  UNI / week
+                </Trans>
+              ) : (
+                <Trans id="earn.pool.noRewardRate">0 UNI / week</Trans>
+              )
+            ) : (
+              '-'
+            )}
           </TYPE.white>
         </RowBetween>
       </StatContainer>
@@ -153,20 +169,29 @@ export default function PoolCard({ stakingInfo }: { stakingInfo: StakingInfo })
           <Break />
           <BottomSection showBackground={true}>
             <TYPE.black color={'white'} fontWeight={500}>
-              <span>Your rate</span>
+              <span>
+                <Trans id="earn.pool.yourRate">Your rate</Trans>
+              </span>
             </TYPE.black>
 
             <TYPE.black style={{ textAlign: 'right' }} color={'white'} fontWeight={500}>
               <span role="img" aria-label="wizard-icon" style={{ marginRight: '0.5rem' }}>
                 ⚡
               </span>
-              {stakingInfo
-                ? stakingInfo.active
-                  ? `${stakingInfo.rewardRate
+              {stakingInfo ? (
+                stakingInfo.active ? (
+                  <Trans id="earn.pool.rewardRate">
+                    {stakingInfo.rewardRate
                       ?.multiply(BIG_INT_SECONDS_IN_WEEK)
-                      ?.toSignificant(4, { groupSeparator: ',' })} UNI / week`
-                  : '0 UNI / week'
-                : '-'}
+                      ?.toSignificant(4, { groupSeparator: ',' })}{' '}
+                    UNI / week
+                  </Trans>
+                ) : (
+                  <Trans id="earn.pool.noRewardRate">0 UNI / week</Trans>
+                )
+              ) : (
+                '-'
+              )}
             </TYPE.black>
           </BottomSection>
         </>

src/components/earn/StakingModal.tsx

@@ -19,6 +19,7 @@ import { StakingInfo, useDerivedStakeInfo } from '../../state/stake/hooks'
 import { TransactionResponse } from '@ethersproject/providers'
 import { useTransactionAdder } from '../../state/transactions/hooks'
 import { LoadingView, SubmittedView } from '../ModalViews'
+import { t, Trans } from '@lingui/macro'
 
 const HypotheticalRewardRate = styled.div<{ dim: boolean }>`
   display: flex;
@@ -103,7 +104,7 @@ export default function StakingModal({ isOpen, onDismiss, stakingInfo, userLiqui
           )
           .then((response: TransactionResponse) => {
             addTransaction(response, {
-              summary: `Deposit liquidity`,
+              summary: t({ id: 'transactions.summary.depositLiquidity', message: 'Deposit liquidity' }),
             })
             setHash(response.hash)
           })
@@ -153,7 +154,9 @@ export default function StakingModal({ isOpen, onDismiss, stakingInfo, userLiqui
       {!attempting && !hash && (
         <ContentWrapper gap="lg">
           <RowBetween>
-            <TYPE.mediumHeader>Deposit</TYPE.mediumHeader>
+            <TYPE.mediumHeader>
+              <Trans id="common.deposit">Deposit</Trans>
+            </TYPE.mediumHeader>
             <CloseIcon onClick={wrappedOnDismiss} />
           </RowBetween>
           <CurrencyInputPanel
@@ -164,18 +167,24 @@ export default function StakingModal({ isOpen, onDismiss, stakingInfo, userLiqui
             currency={stakingInfo.stakedAmount.currency}
             pair={dummyPair}
             label={''}
-            customBalanceText={'Available to deposit: '}
+            customBalanceText={t({ id: 'earn.customBalanceText', message: 'Available to deposit: ' })}
             id="stake-liquidity-token"
           />
 
           <HypotheticalRewardRate dim={!hypotheticalRewardRate.greaterThan('0')}>
             <div>
-              <TYPE.black fontWeight={600}>Weekly Rewards</TYPE.black>
+              <TYPE.black fontWeight={600}>
+                <Trans id="earn.weeklyRewardsHeading">Weekly Rewards</Trans>
+              </TYPE.black>
             </div>
 
             <TYPE.black>
-              {hypotheticalRewardRate.multiply((60 * 60 * 24 * 7).toString()).toSignificant(4, { groupSeparator: ',' })}{' '}
-              UNI / week
+              <Trans id="earn.pool.rewardRate">
+                {hypotheticalRewardRate
+                  .multiply((60 * 60 * 24 * 7).toString())
+                  .toSignificant(4, { groupSeparator: ',' })}{' '}
+                UNI / week
+              </Trans>
             </TYPE.black>
           </HypotheticalRewardRate>
 
@@ -186,14 +195,14 @@ export default function StakingModal({ isOpen, onDismiss, stakingInfo, userLiqui
               confirmed={approval === ApprovalState.APPROVED || signatureData !== null}
               disabled={approval !== ApprovalState.NOT_APPROVED || signatureData !== null}
             >
-              Approve
+              <Trans id="common.approve">Approve</Trans>
             </ButtonConfirmed>
             <ButtonError
               disabled={!!error || (signatureData === null && approval !== ApprovalState.APPROVED)}
               error={!!error && !!parsedAmount}
               onClick={onStake}
             >
-              {error ?? 'Deposit'}
+              {error ?? <Trans id="common.deposit">Deposit</Trans>}
             </ButtonError>
           </RowBetween>
           <ProgressCircles steps={[approval === ApprovalState.APPROVED || signatureData !== null]} disabled={true} />
@@ -202,16 +211,24 @@ export default function StakingModal({ isOpen, onDismiss, stakingInfo, userLiqui
       {attempting && !hash && (
         <LoadingView onDismiss={wrappedOnDismiss}>
           <AutoColumn gap="12px" justify={'center'}>
-            <TYPE.largeHeader>Depositing Liquidity</TYPE.largeHeader>
-            <TYPE.body fontSize={20}>{parsedAmount?.toSignificant(4)} UNI-V2</TYPE.body>
+            <TYPE.largeHeader>
+              <Trans id="common.depositingLiquidity">Depositing Liquidity</Trans>
+            </TYPE.largeHeader>
+            <TYPE.body fontSize={20}>
+              <Trans id="currencies.amountUNIV2">{parsedAmount?.toSignificant(4)} UNI-V2</Trans>
+            </TYPE.body>
           </AutoColumn>
         </LoadingView>
       )}
       {attempting && hash && (
         <SubmittedView onDismiss={wrappedOnDismiss} hash={hash}>
           <AutoColumn gap="12px" justify={'center'}>
-            <TYPE.largeHeader>Transaction Submitted</TYPE.largeHeader>
-            <TYPE.body fontSize={20}>Deposited {parsedAmount?.toSignificant(4)} UNI-V2</TYPE.body>
+            <TYPE.largeHeader>
+              <Trans id="transactions.submitted">Transaction Submitted</Trans>
+            </TYPE.largeHeader>
+            <TYPE.body fontSize={20}>
+              <Trans id="currencies.depositedUNIV2">Deposited {parsedAmount?.toSignificant(4)} UNI-V2</Trans>
+            </TYPE.body>
           </AutoColumn>
         </SubmittedView>
       )}

src/components/earn/UnstakingModal.tsx

@@ -12,6 +12,7 @@ import { TransactionResponse } from '@ethersproject/providers'
 import { useTransactionAdder } from '../../state/transactions/hooks'
 import FormattedCurrencyAmount from '../FormattedCurrencyAmount'
 import { useActiveWeb3React } from '../../hooks/web3'
+import { t, Trans } from '@lingui/macro'
 
 const ContentWrapper = styled(AutoColumn)`
   width: 100%;
@@ -47,7 +48,10 @@ export default function UnstakingModal({ isOpen, onDismiss, stakingInfo }: Staki
         .exit({ gasLimit: 300000 })
         .then((response: TransactionResponse) => {
           addTransaction(response, {
-            summary: `Withdraw deposited liquidity`,
+            summary: t({
+              id: 'transactions.summary.withdrawDepositedLiquidity',
+              message: 'Withdraw deposited liquidity',
+            }),
           })
           setHash(response.hash)
         })
@@ -60,10 +64,10 @@ export default function UnstakingModal({ isOpen, onDismiss, stakingInfo }: Staki
 
   let error: string | undefined
   if (!account) {
-    error = 'Connect Wallet'
+    error = t({ id: 'wallet.connect', message: 'Connect a wallet' })
   }
   if (!stakingInfo?.stakedAmount) {
-    error = error ?? 'Enter an amount'
+    error = error ?? t({ id: 'earn.enterAnAmountError', message: 'Enter an amount' })
   }
 
   return (
@@ -71,7 +75,9 @@ export default function UnstakingModal({ isOpen, onDismiss, stakingInfo }: Staki
       {!attempting && !hash && (
         <ContentWrapper gap="lg">
           <RowBetween>
-            <TYPE.mediumHeader>Withdraw</TYPE.mediumHeader>
+            <TYPE.mediumHeader>
+              <Trans id="earn.unstake.withdraw">Withdraw</Trans>
+            </TYPE.mediumHeader>
             <CloseIcon onClick={wrappedOndismiss} />
           </RowBetween>
           {stakingInfo?.stakedAmount && (
@@ -79,7 +85,9 @@ export default function UnstakingModal({ isOpen, onDismiss, stakingInfo }: Staki
               <TYPE.body fontWeight={600} fontSize={36}>
                 {<FormattedCurrencyAmount currencyAmount={stakingInfo.stakedAmount} />}
               </TYPE.body>
-              <TYPE.body>Deposited liquidity:</TYPE.body>
+              <TYPE.body>
+                <Trans id="earn.unstake.depositedLiquidity">Deposited liquidity:</Trans>
+              </TYPE.body>
             </AutoColumn>
           )}
           {stakingInfo?.earnedAmount && (
@@ -87,31 +95,47 @@ export default function UnstakingModal({ isOpen, onDismiss, stakingInfo }: Staki
               <TYPE.body fontWeight={600} fontSize={36}>
                 {<FormattedCurrencyAmount currencyAmount={stakingInfo?.earnedAmount} />}
               </TYPE.body>
-              <TYPE.body>Unclaimed UNI</TYPE.body>
+              <TYPE.body>
+                <Trans id="earn.claim.unclaimedUNI">Unclaimed UNI</Trans>
+              </TYPE.body>
             </AutoColumn>
           )}
           <TYPE.subHeader style={{ textAlign: 'center' }}>
-            When you withdraw, your UNI is claimed and your liquidity is removed from the mining pool.
+            <Trans id="earn.unstake.hint">
+              When you withdraw, your UNI is claimed and your liquidity is removed from the mining pool.
+            </Trans>
           </TYPE.subHeader>
           <ButtonError disabled={!!error} error={!!error && !!stakingInfo?.stakedAmount} onClick={onWithdraw}>
-            {error ?? 'Withdraw & Claim'}
+            {error ?? <Trans id="earn.unstake.withdrawAndClaim">Withdraw & Claim</Trans>}
           </ButtonError>
         </ContentWrapper>
       )}
       {attempting && !hash && (
         <LoadingView onDismiss={wrappedOndismiss}>
           <AutoColumn gap="12px" justify={'center'}>
-            <TYPE.body fontSize={20}>Withdrawing {stakingInfo?.stakedAmount?.toSignificant(4)} UNI-V2</TYPE.body>
-            <TYPE.body fontSize={20}>Claiming {stakingInfo?.earnedAmount?.toSignificant(4)} UNI</TYPE.body>
+            <TYPE.body fontSize={20}>
+              <Trans id="earn.labels.withdrawingUNIV2">
+                Withdrawing {stakingInfo?.stakedAmount?.toSignificant(4)} UNI-V2
+              </Trans>
+            </TYPE.body>
+            <TYPE.body fontSize={20}>
+              <Trans id="earn.labels.claimingUNI">Claiming {stakingInfo?.earnedAmount?.toSignificant(4)} UNI</Trans>
+            </TYPE.body>
           </AutoColumn>
         </LoadingView>
       )}
       {hash && (
         <SubmittedView onDismiss={wrappedOndismiss} hash={hash}>
           <AutoColumn gap="12px" justify={'center'}>
-            <TYPE.largeHeader>Transaction Submitted</TYPE.largeHeader>
-            <TYPE.body fontSize={20}>Withdrew UNI-V2!</TYPE.body>
-            <TYPE.body fontSize={20}>Claimed UNI!</TYPE.body>
+            <TYPE.largeHeader>
+              <Trans id="transaction.submitted">Transaction Submitted</Trans>
+            </TYPE.largeHeader>
+            <TYPE.body fontSize={20}>
+              <Trans id="earn.labels.withdrewUNIV2">Withdrew UNI-V2!</Trans>
+            </TYPE.body>
+            <TYPE.body fontSize={20}>
+              <Trans id="earn.labels.claimedUNI">Claimed UNI!</Trans>
+            </TYPE.body>
           </AutoColumn>
         </SubmittedView>
       )}

src/components/swap/SwapModalHeader.tsx

@@ -15,6 +15,7 @@ import { FiatValue } from '../CurrencyInputPanel/FiatValue'
 import CurrencyLogo from '../CurrencyLogo'
 import { RowBetween, RowFixed } from '../Row'
 import { TruncatedText, SwapShowAcceptChanges } from './styleds'
+import { Trans } from '@lingui/macro'
 
 import { AdvancedSwapDetails } from './AdvancedSwapDetails'
 import { LightCard } from '../Card'
@@ -64,7 +65,7 @@ export default function SwapModalHeader({
         <AutoColumn gap={'8px'}>
           <RowBetween>
             <TYPE.body color={theme.text3} fontWeight={500} fontSize={14}>
-              From
+              <Trans id="swap.fromCurrency">From</Trans>
             </TYPE.body>
             <FiatValue fiatValue={fiatValueInput} />
           </RowBetween>
@@ -94,7 +95,7 @@ export default function SwapModalHeader({
         <AutoColumn gap={'8px'}>
           <RowBetween>
             <TYPE.body color={theme.text3} fontWeight={500} fontSize={14}>
-              To
+              <Trans id="swap.toCurrency">To</Trans>
             </TYPE.body>
             <TYPE.body fontSize={14} color={theme.text3}>
               <FiatValue
@@ -134,13 +135,15 @@ export default function SwapModalHeader({
           <RowBetween>
             <RowFixed>
               <AlertTriangle size={20} style={{ marginRight: '8px', minWidth: 24 }} />
-              <TYPE.main color={theme.primary1}> Price Updated</TYPE.main>
+              <TYPE.main color={theme.primary1}>
+                <Trans id="swap.priceUpdated">Price Updated</Trans>
+              </TYPE.main>
             </RowFixed>
             <ButtonPrimary
               style={{ padding: '.5rem', width: 'fit-content', fontSize: '0.825rem', borderRadius: '12px' }}
               onClick={onAcceptChanges}
             >
-              Accept
+              <Trans id="common.accept">Accept</Trans>
             </ButtonPrimary>
           </RowBetween>
         </SwapShowAcceptChanges>
@@ -149,27 +152,33 @@ export default function SwapModalHeader({
       <AutoColumn justify="flex-start" gap="sm" style={{ padding: '.75rem 1rem' }}>
         {trade.tradeType === TradeType.EXACT_INPUT ? (
           <TYPE.italic fontWeight={400} textAlign="left" style={{ width: '100%' }}>
-            {`Output is estimated. You will receive at least `}
-            <b>
-              {trade.minimumAmountOut(allowedSlippage).toSignificant(6)} {trade.outputAmount.currency.symbol}
-            </b>
-            {' or the transaction will revert.'}
+            <Trans id="swap.outputEstimatedHint">
+              Output is estimated. You will receive at least{' '}
+              <b>
+                {trade.minimumAmountOut(allowedSlippage).toSignificant(6)} {trade.outputAmount.currency.symbol}
+              </b>{' '}
+              or the transaction will revert.
+            </Trans>
           </TYPE.italic>
         ) : (
           <TYPE.italic fontWeight={400} textAlign="left" style={{ width: '100%' }}>
-            {`Input is estimated. You will sell at most `}
-            <b>
-              {trade.maximumAmountIn(allowedSlippage).toSignificant(6)} {trade.inputAmount.currency.symbol}
-            </b>
-            {' or the transaction will revert.'}
+            <Trans id="swap.inputEstimated.hint">
+              Input is estimated. You will sell at most{' '}
+              <b>
+                {trade.maximumAmountIn(allowedSlippage).toSignificant(6)} {trade.inputAmount.currency.symbol}
+              </b>{' '}
+              or the transaction will revert.
+            </Trans>
           </TYPE.italic>
         )}
       </AutoColumn>
       {recipient !== null ? (
         <AutoColumn justify="flex-start" gap="sm" style={{ padding: '12px 0 0 0px' }}>
           <TYPE.main>
-            Output will be sent to{' '}
-            <b title={recipient}>{isAddress(recipient) ? shortenAddress(recipient) : recipient}</b>
+            <Trans id="swap.outputRecipient">
+              Output will be sent to{' '}
+              <b title={recipient}>{isAddress(recipient) ? shortenAddress(recipient) : recipient}</b>
+            </Trans>
           </TYPE.main>
         </AutoColumn>
       ) : null}

src/components/swap/UnsupportedCurrencyFooter.tsx

@@ -11,6 +11,7 @@ import { useActiveWeb3React } from 'hooks/web3'
 import { Currency, Token } from '@uniswap/sdk-core'
 import { useUnsupportedTokens } from '../../hooks/Tokens'
 import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
+import { Trans } from '@lingui/macro'
 
 const DetailsFooter = styled.div<{ show: boolean }>`
   padding-top: calc(16px + 2rem);
@@ -62,7 +63,9 @@ export default function UnsupportedCurrencyFooter({
         <Card padding="2rem">
           <AutoColumn gap="lg">
             <RowBetween>
-              <TYPE.mediumHeader>Unsupported Assets</TYPE.mediumHeader>
+              <TYPE.mediumHeader>
+                <Trans id="errors.unsuportedAssets">Unsupported Assets</Trans>
+              </TYPE.mediumHeader>
               <CloseIcon onClick={() => setShowDetails(false)} />
             </RowBetween>
             {tokens.map((token) => {
@@ -88,15 +91,19 @@ export default function UnsupportedCurrencyFooter({
             })}
             <AutoColumn gap="lg">
               <TYPE.body fontWeight={500}>
-                Some assets are not available through this interface because they may not work well with the smart
-                contracts or we are unable to allow trading for legal reasons.
+                <Trans id="swap.unsupportedAssetsHint">
+                  Some assets are not available through this interface because they may not work well with the smart
+                  contracts or we are unable to allow trading for legal reasons.
+                </Trans>
               </TYPE.body>
             </AutoColumn>
           </AutoColumn>
         </Card>
       </Modal>
       <ButtonEmpty padding={'0'} onClick={() => setShowDetails(true)}>
-        <TYPE.blue>Read more about unsupported assets</TYPE.blue>
+        <TYPE.blue>
+          <Trans id="swap.buttons.readMoreUnsupportedAssets">Read more about unsupported assets</Trans>
+        </TYPE.blue>
       </ButtonEmpty>
     </DetailsFooter>
   )

src/components/vote/DelegateModal.tsx

@@ -16,6 +16,7 @@ import { useDelegateCallback } from '../../state/governance/hooks'
 import { useTokenBalance } from '../../state/wallet/hooks'
 import { LoadingView, SubmittedView } from '../ModalViews'
 import { formatTokenAmount } from 'utils/formatTokenAmount'
+import { Trans } from '@lingui/macro'
 
 const ContentWrapper = styled(AutoColumn)`
   width: 100%;
@@ -97,17 +98,31 @@ export default function DelegateModal({ isOpen, onDismiss, title }: VoteModalPro
               <TYPE.mediumHeader fontWeight={500}>{title}</TYPE.mediumHeader>
               <StyledClosed stroke="black" onClick={wrappedOndismiss} />
             </RowBetween>
-            <TYPE.body>Earned UNI tokens represent voting shares in Uniswap governance.</TYPE.body>
             <TYPE.body>
-              You can either vote on each proposal yourself or delegate your votes to a third party.
+              <Trans id="vote.delegate.hint1">Earned UNI tokens represent voting shares in Uniswap governance.</Trans>
+            </TYPE.body>
+            <TYPE.body>
+              <Trans id="vote.delegate.hint2">
+                You can either vote on each proposal yourself or delegate your votes to a third party.
+              </Trans>
             </TYPE.body>
             {usingDelegate && <AddressInputPanel value={typed} onChange={handleRecipientType} />}
             <ButtonPrimary disabled={!isAddress(parsedAddress ?? '')} onClick={onDelegate}>
-              <TYPE.mediumHeader color="white">{usingDelegate ? 'Delegate Votes' : 'Self Delegate'}</TYPE.mediumHeader>
+              <TYPE.mediumHeader color="white">
+                {usingDelegate ? (
+                  <Trans id="vote.delegate.delegateVotes">Delegate Votes</Trans>
+                ) : (
+                  <Trans id="vote.delegate.selfDelegate">Self Delegate</Trans>
+                )}
+              </TYPE.mediumHeader>
             </ButtonPrimary>
             <TextButton onClick={() => setUsingDelegate(!usingDelegate)}>
               <TYPE.blue>
-                {usingDelegate ? 'Remove' : 'Add'} Delegate {!usingDelegate && '+'}
+                {usingDelegate ? (
+                  <Trans id="common.remove">Remove Delegate</Trans>
+                ) : (
+                  <Trans id="common.add">Add Delegate +</Trans>
+                )}
               </TYPE.blue>
             </TextButton>
           </AutoColumn>
@@ -116,7 +131,13 @@ export default function DelegateModal({ isOpen, onDismiss, title }: VoteModalPro
       {attempting && !hash && (
         <LoadingView onDismiss={wrappedOndismiss}>
           <AutoColumn gap="12px" justify={'center'}>
-            <TYPE.largeHeader>{usingDelegate ? 'Delegating votes' : 'Unlocking Votes'}</TYPE.largeHeader>
+            <TYPE.largeHeader>
+              {usingDelegate ? (
+                <Trans id="vote.delegate.delegatingVotes">Delegating votes</Trans>
+              ) : (
+                <Trans id="vote.delegates.unlockingVotes">Unlocking Votes</Trans>
+              )}
+            </TYPE.largeHeader>
             <TYPE.main fontSize={36}> {formatTokenAmount(uniBalance, 4)}</TYPE.main>
           </AutoColumn>
         </LoadingView>
@@ -124,7 +145,9 @@ export default function DelegateModal({ isOpen, onDismiss, title }: VoteModalPro
       {hash && (
         <SubmittedView onDismiss={wrappedOndismiss} hash={hash}>
           <AutoColumn gap="12px" justify={'center'}>
-            <TYPE.largeHeader>Transaction Submitted</TYPE.largeHeader>
+            <TYPE.largeHeader>
+              <Trans id="transactions.submitted">Transaction Submitted</Trans>
+            </TYPE.largeHeader>
             <TYPE.main fontSize={36}>{formatTokenAmount(uniBalance, 4)}</TYPE.main>
           </AutoColumn>
         </SubmittedView>

src/components/vote/VoteModal.tsx

@@ -14,6 +14,7 @@ import { useVoteCallback, useUserVotes } from '../../state/governance/hooks'
 import { ExternalLink } from '../../theme/components'
 import { formatTokenAmount } from 'utils/formatTokenAmount'
 import { CurrencyAmount, Token } from '@uniswap/sdk-core'
+import { Trans } from '@lingui/macro'
 
 const ContentWrapper = styled(AutoColumn)`
   width: 100%;
@@ -88,16 +89,26 @@ export default function VoteModal({ isOpen, onDismiss, proposalId, support }: Vo
         <ContentWrapper gap="lg">
           <AutoColumn gap="lg" justify="center">
             <RowBetween>
-              <TYPE.mediumHeader fontWeight={500}>{`Vote ${
-                support ? 'for ' : 'against'
-              } proposal ${proposalId}`}</TYPE.mediumHeader>
+              <TYPE.mediumHeader fontWeight={500}>
+                {support ? (
+                  <Trans id="vote.support.for">Vote for proposal {proposalId}</Trans>
+                ) : (
+                  <Trans id="vote.support.against">Vote against proposal {proposalId}</Trans>
+                )}
+              </TYPE.mediumHeader>
               <StyledClosed stroke="black" onClick={wrappedOndismiss} />
             </RowBetween>
-            <TYPE.largeHeader>{formatTokenAmount(availableVotes, 4)} Votes</TYPE.largeHeader>
+            <TYPE.largeHeader>
+              <Trans id="vote.numVotes">{formatTokenAmount(availableVotes, 4)} Votes</Trans>
+            </TYPE.largeHeader>
             <ButtonPrimary onClick={onVote}>
-              <TYPE.mediumHeader color="white">{`Vote ${
-                support ? 'for ' : 'against'
-              } proposal  ${proposalId}`}</TYPE.mediumHeader>
+              <TYPE.mediumHeader color="white">
+                {support ? (
+                  <Trans id="vote.support.for">Vote for proposal {proposalId}</Trans>
+                ) : (
+                  <Trans id="vote.support.against">Vote against proposal {proposalId}</Trans>
+                )}
+              </TYPE.mediumHeader>
             </ButtonPrimary>
           </AutoColumn>
         </ContentWrapper>
@@ -113,9 +124,13 @@ export default function VoteModal({ isOpen, onDismiss, proposalId, support }: Vo
           </ConfirmedIcon>
           <AutoColumn gap="100px" justify={'center'}>
             <AutoColumn gap="12px" justify={'center'}>
-              <TYPE.largeHeader>Submitting Vote</TYPE.largeHeader>
+              <TYPE.largeHeader>
+                <Trans id="vote.submitting">Submitting Vote</Trans>
+              </TYPE.largeHeader>
             </AutoColumn>
-            <TYPE.subHeader>Confirm this transaction in your wallet</TYPE.subHeader>
+            <TYPE.subHeader>
+              <Trans id="vote.confirmInWallet">Confirm this transaction in your wallet</Trans>
+            </TYPE.subHeader>
           </AutoColumn>
         </ConfirmOrLoadingWrapper>
       )}
@@ -130,14 +145,18 @@ export default function VoteModal({ isOpen, onDismiss, proposalId, support }: Vo
           </ConfirmedIcon>
           <AutoColumn gap="100px" justify={'center'}>
             <AutoColumn gap="12px" justify={'center'}>
-              <TYPE.largeHeader>Transaction Submitted</TYPE.largeHeader>
+              <TYPE.largeHeader>
+                <Trans id="transactions.submitted">Transaction Submitted</Trans>
+              </TYPE.largeHeader>
             </AutoColumn>
             {chainId && (
               <ExternalLink
                 href={getExplorerLink(chainId, hash, ExplorerDataType.TRANSACTION)}
                 style={{ marginLeft: '4px' }}
               >
-                <TYPE.subHeader>View transaction on Etherscan</TYPE.subHeader>
+                <TYPE.subHeader>
+                  <Trans id="wallet.viewOnEtherscan">View transaction on Etherscan</Trans>
+                </TYPE.subHeader>
               </ExternalLink>
             )}
           </AutoColumn>

src/pages/AddLiquidityV2/ConfirmAddModalBottom.tsx

@@ -6,6 +6,7 @@ import { RowBetween, RowFixed } from '../../components/Row'
 import CurrencyLogo from '../../components/CurrencyLogo'
 import { Field } from '../../state/mint/actions'
 import { TYPE } from '../../theme'
+import { Trans } from '@lingui/macro'
 
 export function ConfirmAddModalBottom({
   noLiquidity,
@@ -25,21 +26,27 @@ export function ConfirmAddModalBottom({
   return (
     <>
       <RowBetween>
-        <TYPE.body>{currencies[Field.CURRENCY_A]?.symbol} Deposited</TYPE.body>
+        <TYPE.body>
+          <Trans id="currencies.depositedSymbol">{currencies[Field.CURRENCY_A]?.symbol} Deposited</Trans>
+        </TYPE.body>
         <RowFixed>
           <CurrencyLogo currency={currencies[Field.CURRENCY_A]} style={{ marginRight: '8px' }} />
           <TYPE.body>{parsedAmounts[Field.CURRENCY_A]?.toSignificant(6)}</TYPE.body>
         </RowFixed>
       </RowBetween>
       <RowBetween>
-        <TYPE.body>{currencies[Field.CURRENCY_B]?.symbol} Deposited</TYPE.body>
+        <TYPE.body>
+          <Trans id="currencies.depositedSymbol">{currencies[Field.CURRENCY_B]?.symbol} Deposited</Trans>
+        </TYPE.body>
         <RowFixed>
           <CurrencyLogo currency={currencies[Field.CURRENCY_B]} style={{ marginRight: '8px' }} />
           <TYPE.body>{parsedAmounts[Field.CURRENCY_B]?.toSignificant(6)}</TYPE.body>
         </RowFixed>
       </RowBetween>
       <RowBetween>
-        <TYPE.body>Rates</TYPE.body>
+        <TYPE.body>
+          <Trans id="currencies.rates">Rates</Trans>
+        </TYPE.body>
         <TYPE.body>
           {`1 ${currencies[Field.CURRENCY_A]?.symbol} = ${price?.toSignificant(4)} ${
             currencies[Field.CURRENCY_B]?.symbol
@@ -54,12 +61,20 @@ export function ConfirmAddModalBottom({
         </TYPE.body>
       </RowBetween>
       <RowBetween>
-        <TYPE.body>Share of Pool:</TYPE.body>
-        <TYPE.body>{noLiquidity ? '100' : poolTokenPercentage?.toSignificant(4)}%</TYPE.body>
+        <TYPE.body>
+          <Trans id="pool.shareOfPool">Share of Pool:</Trans>
+        </TYPE.body>
+        <TYPE.body>
+          <Trans id="number.valueWithPercent">{noLiquidity ? '100' : poolTokenPercentage?.toSignificant(4)}%</Trans>
+        </TYPE.body>
       </RowBetween>
       <ButtonPrimary style={{ margin: '20px 0 0 0' }} onClick={onAdd}>
         <Text fontWeight={500} fontSize={20}>
-          {noLiquidity ? 'Create Pool & Supply' : 'Confirm Supply'}
+          {noLiquidity ? (
+            <Trans id="pool.createPoolAndSupply">Create Pool & Supply</Trans>
+          ) : (
+            <Trans id="pool.confirmSupply">Confirm Supply</Trans>
+          )}
         </Text>
       </ButtonPrimary>
     </>

src/pages/AddLiquidityV2/index.tsx

@@ -41,6 +41,7 @@ import { ConfirmAddModalBottom } from './ConfirmAddModalBottom'
 import { currencyId } from '../../utils/currencyId'
 import { PoolPriceBar } from './PoolPriceBar'
 import UnsupportedCurrencyFooter from 'components/swap/UnsupportedCurrencyFooter'
+import { t, Trans } from '@lingui/macro'
 
 const DEFAULT_ADD_V2_SLIPPAGE_TOLERANCE = new Percent(50, 10_000)
 
@@ -184,15 +185,12 @@ export default function AddLiquidity({
           setAttemptingTxn(false)
 
           addTransaction(response, {
-            summary:
-              'Add ' +
-              parsedAmounts[Field.CURRENCY_A]?.toSignificant(3) +
-              ' ' +
-              currencies[Field.CURRENCY_A]?.symbol +
-              ' and ' +
-              parsedAmounts[Field.CURRENCY_B]?.toSignificant(3) +
-              ' ' +
-              currencies[Field.CURRENCY_B]?.symbol,
+            summary: t({
+              id: 'transactions.summary.addLiquidityWithValue',
+              message: `Add ${parsedAmounts[Field.CURRENCY_A]?.toSignificant(3)} ${
+                currencies[Field.CURRENCY_A]?.symbol
+              } and ${parsedAmounts[Field.CURRENCY_B]?.toSignificant(3)} ${currencies[Field.CURRENCY_B]?.symbol}`,
+            }),
           })
 
           setTxHash(response.hash)
@@ -247,9 +245,10 @@ export default function AddLiquidity({
           </Text>
         </Row>
         <TYPE.italic fontSize={12} textAlign="left" padding={'8px 0 0 0 '}>
-          {`Output is estimated. If the price changes by more than ${allowedSlippage.toSignificant(
-            4
-          )}% your transaction will revert.`}
+          <Trans id="swap.outputEstimatedHint">
+            Output is estimated. If the price changes by more than {allowedSlippage.toSignificant(4)}% your transaction
+            will revert.
+          </Trans>
         </TYPE.italic>
       </AutoColumn>
     )
@@ -268,9 +267,12 @@ export default function AddLiquidity({
     )
   }
 
-  const pendingText = `Supplying ${parsedAmounts[Field.CURRENCY_A]?.toSignificant(6)} ${
-    currencies[Field.CURRENCY_A]?.symbol
-  } and ${parsedAmounts[Field.CURRENCY_B]?.toSignificant(6)} ${currencies[Field.CURRENCY_B]?.symbol}`
+  const pendingText = t({
+    id: 'addLiquidity.confirmation.pendingV2',
+    message: `Supplying ${parsedAmounts[Field.CURRENCY_A]?.toSignificant(6)} ${
+      currencies[Field.CURRENCY_A]?.symbol
+    } and ${parsedAmounts[Field.CURRENCY_B]?.toSignificant(6)} ${currencies[Field.CURRENCY_B]?.symbol}`,
+  })
 
   const handleCurrencyASelect = useCallback(
     (currencyA: Currency) => {
@@ -324,7 +326,11 @@ export default function AddLiquidity({
             hash={txHash}
             content={() => (
               <ConfirmationModalContent
-                title={noLiquidity ? 'You are creating a pool' : 'You will receive'}
+                title={
+                  noLiquidity
+                    ? t({ id: 'pool.creatingPool', message: 'You are creating a pool' })
+                    : t({ id: 'pool.yourWillReceive', message: 'You will receive' })
+                }
                 onDismiss={handleDismissConfirmation}
                 topContent={modalHeader}
                 bottomContent={modalBottom}
@@ -340,13 +346,15 @@ export default function AddLiquidity({
                   <BlueCard>
                     <AutoColumn gap="10px">
                       <TYPE.link fontWeight={600} color={'primaryText1'}>
-                        You are the first liquidity provider.
+                        <Trans id="pool.firstLiquidityProvider">You are the first liquidity provider.</Trans>
                       </TYPE.link>
                       <TYPE.link fontWeight={400} color={'primaryText1'}>
-                        The ratio of tokens you add will set the price of this pool.
+                        <Trans id="pool.initialPriceHint">
+                          The ratio of tokens you add will set the price of this pool.
+                        </Trans>
                       </TYPE.link>
                       <TYPE.link fontWeight={400} color={'primaryText1'}>
-                        Once you are happy with the rate click supply to review.
+                        <Trans id="pool.reviewHint">Once you are happy with the rate click supply to review.</Trans>
                       </TYPE.link>
                     </AutoColumn>
                   </BlueCard>
@@ -356,9 +364,14 @@ export default function AddLiquidity({
                   <BlueCard>
                     <AutoColumn gap="10px">
                       <TYPE.link fontWeight={400} color={'primaryText1'}>
-                        <b>Tip:</b> When you add liquidity, you will receive pool tokens representing your position.
-                        These tokens automatically earn fees proportional to your share of the pool, and can be redeemed
-                        at any time.
+                        <Trans id="pool.addLiquidityLPHint">
+                          <b>
+                            <Trans id="">Tip:</Trans>
+                          </b>{' '}
+                          When you add liquidity, you will receive pool tokens representing your position. These tokens
+                          automatically earn fees proportional to your share of the pool, and can be redeemed at any
+                          time.
+                        </Trans>
                       </TYPE.link>
                     </AutoColumn>
                   </BlueCard>
@@ -396,7 +409,11 @@ export default function AddLiquidity({
                 <LightCard padding="0px" borderRadius={'20px'}>
                   <RowBetween padding="1rem">
                     <TYPE.subHeader fontWeight={500} fontSize={14}>
-                      {noLiquidity ? 'Initial prices' : 'Prices'} and pool share
+                      {noLiquidity ? (
+                        <Trans id="pool.prices.noLiquidity">Initial prices and pool share</Trans>
+                      ) : (
+                        <Trans id="pool.prices.withLiquidity">Prices and pool share</Trans>
+                      )}
                     </TYPE.subHeader>
                   </RowBetween>{' '}
                   <LightCard padding="1rem" borderRadius={'20px'}>
@@ -413,10 +430,14 @@ export default function AddLiquidity({
 
             {addIsUnsupported ? (
               <ButtonPrimary disabled={true}>
-                <TYPE.main mb="4px">Unsupported Asset</TYPE.main>
+                <TYPE.main mb="4px">
+                  <Trans id="error.unsupportedAsset">Unsupported Asset</Trans>
+                </TYPE.main>
               </ButtonPrimary>
             ) : !account ? (
-              <ButtonLight onClick={toggleWalletModal}>Connect Wallet</ButtonLight>
+              <ButtonLight onClick={toggleWalletModal}>
+                <Trans id="wallet.connect">Connect Wallet</Trans>
+              </ButtonLight>
             ) : (
               <AutoColumn gap={'md'}>
                 {(approvalA === ApprovalState.NOT_APPROVED ||
@@ -432,9 +453,15 @@ export default function AddLiquidity({
                           width={approvalB !== ApprovalState.APPROVED ? '48%' : '100%'}
                         >
                           {approvalA === ApprovalState.PENDING ? (
-                            <Dots>Approving {currencies[Field.CURRENCY_A]?.symbol}</Dots>
+                            <Dots>
+                              <Trans id="transactions.approvingCurrency">
+                                Approving {currencies[Field.CURRENCY_A]?.symbol}
+                              </Trans>
+                            </Dots>
                           ) : (
-                            'Approve ' + currencies[Field.CURRENCY_A]?.symbol
+                            <Trans id="transaction.approveCurrency">
+                              Approve {currencies[Field.CURRENCY_A]?.symbol}
+                            </Trans>
                           )}
                         </ButtonPrimary>
                       )}
@@ -445,9 +472,15 @@ export default function AddLiquidity({
                           width={approvalA !== ApprovalState.APPROVED ? '48%' : '100%'}
                         >
                           {approvalB === ApprovalState.PENDING ? (
-                            <Dots>Approving {currencies[Field.CURRENCY_B]?.symbol}</Dots>
+                            <Dots>
+                              <Trans id="transactions.approvingCurrency">
+                                Approving {currencies[Field.CURRENCY_B]?.symbol}
+                              </Trans>
+                            </Dots>
                           ) : (
-                            'Approve ' + currencies[Field.CURRENCY_B]?.symbol
+                            <Trans id="transaction.approveCurrency">
+                              Approve {currencies[Field.CURRENCY_B]?.symbol}
+                            </Trans>
                           )}
                         </ButtonPrimary>
                       )}
@@ -461,7 +494,7 @@ export default function AddLiquidity({
                   error={!isValid && !!parsedAmounts[Field.CURRENCY_A] && !!parsedAmounts[Field.CURRENCY_B]}
                 >
                   <Text fontSize={20} fontWeight={500}>
-                    {error ?? 'Supply'}
+                    {error ?? <Trans id="pool.buttons.supply">Supply</Trans>}
                   </Text>
                 </ButtonError>
               </AutoColumn>

src/pages/Earn/Manage.tsx

@@ -28,6 +28,7 @@ import { useV2Pair } from '../../hooks/useV2Pairs'
 import usePrevious from '../../hooks/usePrevious'
 import useUSDCPrice from '../../hooks/useUSDCPrice'
 import { BIG_INT_ZERO, BIG_INT_SECONDS_IN_WEEK } from '../../constants/misc'
+import { Trans } from '@lingui/macro'
 
 const PageWrapper = styled(AutoColumn)`
   max-width: 640px;
@@ -156,7 +157,9 @@ export default function Manage({
     <PageWrapper gap="lg" justify="center">
       <RowBetween style={{ gap: '24px' }}>
         <TYPE.mediumHeader style={{ margin: 0 }}>
-          {currencyA?.symbol}-{currencyB?.symbol} Liquidity Mining
+          <Trans id="earn.pool.liquidityMining">
+            {currencyA?.symbol}-{currencyB?.symbol} Liquidity Mining
+          </Trans>
         </TYPE.mediumHeader>
         <DoubleCurrencyLogo currency0={currencyA ?? undefined} currency1={currencyB ?? undefined} size={24} />
       </RowBetween>
@@ -164,7 +167,9 @@ export default function Manage({
       <DataRow style={{ gap: '24px' }}>
         <PoolData>
           <AutoColumn gap="sm">
-            <TYPE.body style={{ margin: 0 }}>Total deposits</TYPE.body>
+            <TYPE.body style={{ margin: 0 }}>
+              <Trans id="earn.pool.totalDeposits">Total deposits</Trans>
+            </TYPE.body>
             <TYPE.body fontSize={24} fontWeight={500}>
               {valueOfTotalStakedAmountInUSDC
                 ? `$${valueOfTotalStakedAmountInUSDC.toFixed(0, { groupSeparator: ',' })}`
@@ -174,14 +179,18 @@ export default function Manage({
         </PoolData>
         <PoolData>
           <AutoColumn gap="sm">
-            <TYPE.body style={{ margin: 0 }}>Pool Rate</TYPE.body>
+            <TYPE.body style={{ margin: 0 }}>
+              <Trans id="earn.pool.rate">Pool Rate</Trans>
+            </TYPE.body>
             <TYPE.body fontSize={24} fontWeight={500}>
-              {stakingInfo?.active
-                ? stakingInfo?.totalRewardRate
-                    ?.multiply(BIG_INT_SECONDS_IN_WEEK)
-                    ?.toFixed(0, { groupSeparator: ',' }) ?? '-'
-                : '0'}
-              {' UNI / week'}
+              {stakingInfo.active ? (
+                <Trans id="earn.pool.rewardRate">
+                  {stakingInfo.totalRewardRate?.multiply(BIG_INT_SECONDS_IN_WEEK)?.toFixed(0, { groupSeparator: ',' })}{' '}
+                  UNI / week
+                </Trans>
+              ) : (
+                <Trans id="earn.pool.noRewardRate">0 UNI / week</Trans>
+              )}
             </TYPE.body>
           </AutoColumn>
         </PoolData>
@@ -194,11 +203,16 @@ export default function Manage({
           <CardSection>
             <AutoColumn gap="md">
               <RowBetween>
-                <TYPE.white fontWeight={600}>Step 1. Get UNI-V2 Liquidity tokens</TYPE.white>
+                <TYPE.white fontWeight={600}>
+                  <Trans id="earn.instructions1.title">Step 1. Get UNI-V2 Liquidity tokens</Trans>
+                </TYPE.white>
               </RowBetween>
               <RowBetween style={{ marginBottom: '1rem' }}>
                 <TYPE.white fontSize={14}>
-                  {`UNI-V2 LP tokens are required. Once you've added liquidity to the ${currencyA?.symbol}-${currencyB?.symbol} pool you can stake your liquidity tokens on this page.`}
+                  <Trans id="earn.instructions1.hint">
+                    UNI-V2 LP tokens are required. Once you&apos;ve added liquidity to the {currencyA?.symbol}-
+                    {currencyB?.symbol} pool you can stake your liquidity tokens on this page.
+                  </Trans>
                 </TYPE.white>
               </RowBetween>
               <ButtonPrimary
@@ -208,7 +222,9 @@ export default function Manage({
                 as={Link}
                 to={`/add/${currencyA && currencyId(currencyA)}/${currencyB && currencyId(currencyB)}`}
               >
-                {`Add ${currencyA?.symbol}-${currencyB?.symbol} liquidity`}
+                <Trans id="earn.pool.addLiquidity">
+                  Add {currencyA?.symbol}-{currencyB?.symbol} liquidity
+                </Trans>
               </ButtonPrimary>
             </AutoColumn>
           </CardSection>
@@ -246,14 +262,18 @@ export default function Manage({
               <CardNoise />
               <AutoColumn gap="md">
                 <RowBetween>
-                  <TYPE.white fontWeight={600}>Your liquidity deposits</TYPE.white>
+                  <TYPE.white fontWeight={600}>
+                    <Trans id="earn.pool.liquidityDeposited">Your liquidity deposits</Trans>
+                  </TYPE.white>
                 </RowBetween>
                 <RowBetween style={{ alignItems: 'baseline' }}>
                   <TYPE.white fontSize={36} fontWeight={600}>
                     {stakingInfo?.stakedAmount?.toSignificant(6) ?? '-'}
                   </TYPE.white>
                   <TYPE.white>
-                    UNI-V2 {currencyA?.symbol}-{currencyB?.symbol}
+                    <Trans id="earn.claim.UNIV2">
+                      UNI-V2 {currencyA?.symbol}-{currencyB?.symbol}
+                    </Trans>
                   </TYPE.white>
                 </RowBetween>
               </AutoColumn>
@@ -265,7 +285,9 @@ export default function Manage({
             <AutoColumn gap="sm">
               <RowBetween>
                 <div>
-                  <TYPE.black>Your unclaimed UNI</TYPE.black>
+                  <TYPE.black>
+                    <Trans id="earn.claim.unclaimedUNI">Your unclaimed UNI</Trans>
+                  </TYPE.black>
                 </div>
                 {stakingInfo?.earnedAmount && JSBI.notEqual(BIG_INT_ZERO, stakingInfo?.earnedAmount?.quotient) && (
                   <ButtonEmpty
@@ -274,7 +296,7 @@ export default function Manage({
                     width="fit-content"
                     onClick={() => setShowClaimRewardModal(true)}
                   >
-                    Claim
+                    <Trans id="earn.claim.label">Claim</Trans>
                   </ButtonEmpty>
                 )}
               </RowBetween>
@@ -294,12 +316,15 @@ export default function Manage({
                   <span role="img" aria-label="wizard-icon" style={{ marginRight: '8px ' }}>
                     ⚡
                   </span>
-                  {stakingInfo?.active
-                    ? stakingInfo?.rewardRate
-                        ?.multiply(BIG_INT_SECONDS_IN_WEEK)
-                        ?.toSignificant(4, { groupSeparator: ',' }) ?? '-'
-                    : '0'}
-                  {' UNI / week'}
+
+                  {stakingInfo.active ? (
+                    <Trans id="earn.pool.rewardRate">
+                      {stakingInfo.rewardRate?.multiply(BIG_INT_SECONDS_IN_WEEK)?.toFixed(0, { groupSeparator: ',' })}{' '}
+                      UNI / week
+                    </Trans>
+                  ) : (
+                    <Trans id="earn.pool.noRewardRate">0 UNI / week</Trans>
+                  )}
                 </TYPE.black>
               </RowBetween>
             </AutoColumn>
@@ -309,14 +334,20 @@ export default function Manage({
           <span role="img" aria-label="wizard-icon" style={{ marginRight: '8px' }}>
             ⭐️
           </span>
-          When you withdraw, the contract will automagically claim UNI on your behalf!
+          <Trans id="earn.claim.withdrawingClaimsUNI">
+            When you withdraw, the contract will automagically claim UNI on your behalf!
+          </Trans>
         </TYPE.main>
 
         {!showAddLiquidityButton && (
           <DataRow style={{ marginBottom: '1rem' }}>
             {stakingInfo && stakingInfo.active && (
               <ButtonPrimary padding="8px" borderRadius="8px" width="160px" onClick={handleDepositClick}>
-                {stakingInfo?.stakedAmount?.greaterThan(JSBI.BigInt(0)) ? 'Deposit' : 'Deposit UNI-V2 LP Tokens'}
+                {stakingInfo?.stakedAmount?.greaterThan(JSBI.BigInt(0)) ? (
+                  <Trans id="common.deposit">Deposit</Trans>
+                ) : (
+                  <Trans id="earn.depositUNIVLP">Deposit UNI-V2 LP Tokens</Trans>
+                )}
               </ButtonPrimary>
             )}
 
@@ -328,14 +359,18 @@ export default function Manage({
                   width="160px"
                   onClick={() => setShowUnstakingModal(true)}
                 >
-                  Withdraw
+                  <Trans id="common.withdraw">Withdraw</Trans>
                 </ButtonPrimary>
               </>
             )}
           </DataRow>
         )}
         {!userLiquidityUnstaked ? null : userLiquidityUnstaked.equalTo('0') ? null : !stakingInfo?.active ? null : (
-          <TYPE.main>{userLiquidityUnstaked.toSignificant(6)} UNI-V2 LP tokens available</TYPE.main>
+          <TYPE.main>
+            <Trans id="earn.claim.UNIV2LPAvailable">
+              {userLiquidityUnstaked.toSignificant(6)} UNI-V2 LP tokens available
+            </Trans>
+          </TYPE.main>
         )}
       </PositionInfo>
     </PageWrapper>

src/pages/Earn/index.tsx

@@ -12,6 +12,7 @@ import Loader from '../../components/Loader'
 import { useActiveWeb3React } from '../../hooks/web3'
 import { BIG_INT_ZERO } from '../../constants/misc'
 import { OutlineCard } from '../../components/Card'
+import { Trans } from '@lingui/macro'
 
 const PageWrapper = styled(AutoColumn)`
   max-width: 640px;
@@ -62,11 +63,15 @@ export default function Earn() {
           <CardSection>
             <AutoColumn gap="md">
               <RowBetween>
-                <TYPE.white fontWeight={600}>Uniswap liquidity mining</TYPE.white>
+                <TYPE.white fontWeight={600}>
+                  <Trans id="earn.liquidityMining">Uniswap liquidity mining</Trans>
+                </TYPE.white>
               </RowBetween>
               <RowBetween>
                 <TYPE.white fontSize={14}>
-                  Deposit your Liquidity Provider tokens to receive UNI, the Uniswap protocol governance token.
+                  <Trans id="earn.depositLPHint">
+                    Deposit your Liquidity Provider tokens to receive UNI, the Uniswap protocol governance token.
+                  </Trans>
                 </TYPE.white>
               </RowBetween>{' '}
               <ExternalLink
@@ -74,7 +79,9 @@ export default function Earn() {
                 href="https://uniswap.org/blog/uni/"
                 target="_blank"
               >
-                <TYPE.white fontSize={14}>Read more about UNI</TYPE.white>
+                <TYPE.white fontSize={14}>
+                  <Trans id="uni.readMore">Read more about UNI</Trans>
+                </TYPE.white>
               </ExternalLink>
             </AutoColumn>
           </CardSection>
@@ -85,7 +92,9 @@ export default function Earn() {
 
       <AutoColumn gap="lg" style={{ width: '100%', maxWidth: '720px' }}>
         <DataRow style={{ alignItems: 'baseline' }}>
-          <TYPE.mediumHeader style={{ marginTop: '0.5rem' }}>Participating pools</TYPE.mediumHeader>
+          <TYPE.mediumHeader style={{ marginTop: '0.5rem' }}>
+            <Trans id="earn.participatingPools">Participating pools</Trans>
+          </TYPE.mediumHeader>
           <Countdown exactEnd={stakingInfos?.[0]?.periodFinish} />
         </DataRow>
 
@@ -93,9 +102,13 @@ export default function Earn() {
           {stakingRewardsExist && stakingInfos?.length === 0 ? (
             <Loader style={{ margin: 'auto' }} />
           ) : !stakingRewardsExist ? (
-            <OutlineCard>No active pools</OutlineCard>
+            <OutlineCard>
+              <Trans id="earn.noActivePools">No active pools</Trans>
+            </OutlineCard>
           ) : stakingInfos?.length !== 0 && stakingInfosWithBalance.length === 0 ? (
-            <OutlineCard>No active pools</OutlineCard>
+            <OutlineCard>
+              <Trans id="earn.noActivePools">No active pools</Trans>
+            </OutlineCard>
           ) : (
             stakingInfosWithBalance?.map((stakingInfo) => {
               // need to sort by added liquidity here

src/pages/MigrateV2/index.tsx

@@ -18,6 +18,7 @@ import MigrateSushiPositionCard from 'components/PositionCard/Sushi'
 import { PairState, useV2Pairs } from 'hooks/useV2Pairs'
 import { getCreate2Address } from '@ethersproject/address'
 import { pack, keccak256 } from '@ethersproject/solidity'
+import { t, Trans } from '@lingui/macro'
 
 function EmptyState({ message }: { message: string }) {
   return (
@@ -110,27 +111,40 @@ export default function MigrateV2() {
       <AutoColumn gap="16px">
         <AutoRow style={{ alignItems: 'center', justifyContent: 'space-between' }} gap="8px">
           <BackArrow to="/pool" />
-          <TYPE.mediumHeader>Migrate V2 Liquidity</TYPE.mediumHeader>
+          <TYPE.mediumHeader>
+            <Trans id="migrate.buttons.migrateV2Liquidity">Migrate V2 Liquidity</Trans>
+          </TYPE.mediumHeader>
           <div>
-            <QuestionHelper text="Migrate your liquidity tokens from Uniswap V2 to Uniswap V3." />
+            <QuestionHelper
+              text={t({
+                id: 'migrate.hint.migrateFromV2ToV3',
+                message: 'Migrate your liquidity tokens from Uniswap V2 to Uniswap V3.',
+              })}
+            />
           </div>
         </AutoRow>
 
         <TYPE.body style={{ marginBottom: 8, fontWeight: 400 }}>
-          For each pool shown below, click migrate to remove your liquidity from Uniswap V2 and deposit it into Uniswap
-          V3.
+          <Trans id="migrate.hint.clickToRemoveV2">
+            For each pool shown below, click migrate to remove your liquidity from Uniswap V2 and deposit it into
+            Uniswap V3.
+          </Trans>
         </TYPE.body>
 
         {!account ? (
           <LightCard padding="40px">
             <TYPE.body color={theme.text3} textAlign="center">
-              Connect to a wallet to view your V2 liquidity.
+              <Trans id="migrate.hint.connectWalltToViewV2Liquidity">
+                Connect to a wallet to view your V2 liquidity.
+              </Trans>
             </TYPE.body>
           </LightCard>
         ) : v2IsLoading ? (
           <LightCard padding="40px">
             <TYPE.body color={theme.text3} textAlign="center">
-              <Dots>Loading</Dots>
+              <Dots>
+                <Trans id="common.loading">Loading</Trans>
+              </Dots>
             </TYPE.body>
           </LightCard>
         ) : v2Pairs.filter(([, pair]) => !!pair).length > 0 ? (
@@ -158,10 +172,12 @@ export default function MigrateV2() {
 
         <AutoColumn justify={'center'} gap="md">
           <Text textAlign="center" fontSize={14} style={{ padding: '.5rem 0 .5rem 0' }}>
-            {'Don’t see one of your v2 positions?'}{' '}
-            <StyledInternalLink id="import-pool-link" to={'/find?origin=/migrate/v2'}>
-              {'Import it.'}
-            </StyledInternalLink>
+            <Trans id="migrate.hint.importV2Position">
+              Don’t see one of your v2 positions?{' '}
+              <StyledInternalLink id="import-pool-link" to={'/find?origin=/migrate/v2'}>
+                Import it.
+              </StyledInternalLink>
+            </Trans>
           </Text>
         </AutoColumn>
       </AutoColumn>

src/pages/Pool/v2.tsx

@@ -22,6 +22,7 @@ import { CardSection, DataCard, CardNoise, CardBGImage } from '../../components/
 import { useStakingInfo } from '../../state/stake/hooks'
 import { BIG_INT_ZERO } from '../../constants/misc'
 import { Pair } from '@uniswap/v2-sdk'
+import { Trans } from '@lingui/macro'
 
 const PageWrapper = styled(AutoColumn)`
   max-width: 640px;
@@ -135,11 +136,16 @@ export default function Pool() {
           <CardSection>
             <AutoColumn gap="md">
               <RowBetween>
-                <TYPE.white fontWeight={600}>Liquidity provider rewards</TYPE.white>
+                <TYPE.white fontWeight={600}>
+                  <Trans id="pools.labels.liquidityProviderRewards">Liquidity provider rewards</Trans>
+                </TYPE.white>
               </RowBetween>
               <RowBetween>
                 <TYPE.white fontSize={14}>
-                  {`Liquidity providers earn a 0.3% fee on all trades proportional to their share of the pool. Fees are added to the pool, accrue in real time and can be claimed by withdrawing your liquidity.`}
+                  <Trans id="pools.hints.liquidityProviderRewards">
+                    Liquidity providers earn a 0.3% fee on all trades proportional to their share of the pool. Fees are
+                    added to the pool, accrue in real time and can be claimed by withdrawing your liquidity.
+                  </Trans>
                 </TYPE.white>
               </RowBetween>
               <ExternalLink
@@ -147,7 +153,9 @@ export default function Pool() {
                 target="_blank"
                 href="https://uniswap.org/docs/v2/core-concepts/pools/"
               >
-                <TYPE.white fontSize={14}>Read more about providing liquidity</TYPE.white>
+                <TYPE.white fontSize={14}>
+                  <Trans id="pools.hints.readAboutProvidingLiquidity">Read more about providing liquidity</Trans>
+                </TYPE.white>
               </ExternalLink>
             </AutoColumn>
           </CardSection>
@@ -160,12 +168,12 @@ export default function Pool() {
             <TitleRow style={{ marginTop: '1rem' }} padding={'0'}>
               <HideSmall>
                 <TYPE.mediumHeader style={{ marginTop: '0.5rem', justifySelf: 'flex-start' }}>
-                  Your V2 liquidity
+                  <Trans id="pools.labels.yourV2Liquidity">Your V2 liquidity</Trans>
                 </TYPE.mediumHeader>
               </HideSmall>
               <ButtonRow>
                 <ResponsiveButtonSecondary as={Link} padding="6px 8px" to="/add/v2/ETH">
-                  Create a pair
+                  <Trans id="pools.buttons.createPair">Create a pair</Trans>
                 </ResponsiveButtonSecondary>
                 <ResponsiveButtonPrimary
                   id="join-pool-button"
@@ -175,7 +183,7 @@ export default function Pool() {
                   to="/add/v2/ETH"
                 >
                   <Text fontWeight={500} fontSize={16}>
-                    Add V2 Liquidity
+                    <Trans id="pools.buttons.addV2Liquidity">Add V2 Liquidity</Trans>
                   </Text>
                 </ResponsiveButtonPrimary>
               </ButtonRow>
@@ -184,23 +192,27 @@ export default function Pool() {
             {!account ? (
               <Card padding="40px">
                 <TYPE.body color={theme.text3} textAlign="center">
-                  Connect to a wallet to view your liquidity.
+                  <Trans id="wallet.connectWalletToViewLiquidity">Connect to a wallet to view your liquidity.</Trans>
                 </TYPE.body>
               </Card>
             ) : v2IsLoading ? (
               <EmptyProposals>
                 <TYPE.body color={theme.text3} textAlign="center">
-                  <Dots>Loading</Dots>
+                  <Dots>
+                    <Trans id="common.loading">Loading</Trans>
+                  </Dots>
                 </TYPE.body>
               </EmptyProposals>
             ) : allV2PairsWithLiquidity?.length > 0 || stakingPairs?.length > 0 ? (
               <>
                 <ButtonSecondary>
                   <RowBetween>
-                    <ExternalLink href={'https://v2.info.uniswap.org/account/' + account}>
-                      Account analytics and accrued fees
-                    </ExternalLink>
-                    <span> ↗</span>
+                    <Trans id="pools.buttons.accountAnalytics">
+                      <ExternalLink href={'https://v2.info.uniswap.org/account/' + account}>
+                        Account analytics and accrued fees
+                      </ExternalLink>
+                      <span> ↗ </span>
+                    </Trans>
                   </RowBetween>
                 </ButtonSecondary>
                 {v2PairsWithoutStakedAmount.map((v2Pair) => (
@@ -230,14 +242,14 @@ export default function Pool() {
                     }}
                   >
                     <ChevronsRight size={16} style={{ marginRight: '8px' }} />
-                    Migrate Liquidity to V3
+                    <Trans id="pools.buttons.migrateLiquidityToV3">Migrate Liquidity to V3</Trans>
                   </ButtonOutlined>
                 </RowFixed>
               </>
             ) : (
               <EmptyProposals>
                 <TYPE.body color={theme.text3} textAlign="center">
-                  No liquidity found.
+                  <Trans id="pools.labels.noLiquidityFound">No liquidity found.</Trans>
                 </TYPE.body>
               </EmptyProposals>
             )}

src/pages/Swap/index.tsx

@@ -478,7 +478,9 @@ export default function Swap({ history }: RouteComponentProps) {
                         marginLeft: '0.25rem',
                       }}
                     >
-                      <TYPE.black fontSize={12}>V3</TYPE.black>
+                      <TYPE.black fontSize={12}>
+                        <Trans id="swap.buttons.v3">V3</Trans>
+                      </TYPE.black>
                     </ButtonGray>
                   )}
                 </RowFixed>

src/pages/Vote/VotePage.tsx

@@ -38,6 +38,7 @@ import { ExternalLink, StyledInternalLink, TYPE } from '../../theme'
 import { isAddress } from '../../utils'
 import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
 import { ProposalStatus } from './styled'
+import { t, Trans } from '@lingui/macro'
 
 const PageWrapper = styled(AutoColumn)`
   width: 100%;
@@ -157,10 +158,14 @@ export default function VotePage({
 
   // get total votes and format percentages for UI
   const totalVotes: number | undefined = proposalData ? proposalData.forCount + proposalData.againstCount : undefined
-  const forPercentage: string =
-    proposalData && totalVotes ? ((proposalData.forCount * 100) / totalVotes).toFixed(0) + '%' : '0%'
-  const againstPercentage: string =
-    proposalData && totalVotes ? ((proposalData.againstCount * 100) / totalVotes).toFixed(0) + '%' : '0%'
+  const forPercentage: string = t({
+    id: 'currencies.valueWithPercent',
+    message: `${proposalData && totalVotes ? ((proposalData.forCount * 100) / totalVotes).toFixed(0) : '0'} %`,
+  })
+  const againstPercentage: string = t({
+    id: 'currencies.valueWithPercent',
+    message: `${proposalData && totalVotes ? ((proposalData.againstCount * 100) / totalVotes).toFixed(0) : '0'} %`,
+  })
 
   // only count available votes as of the proposal start block
   const availableVotes: CurrencyAmount<Token> | undefined = useUserVotesAsOfBlock(proposalData?.startBlock ?? undefined)
@@ -198,11 +203,17 @@ 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="Unlock Votes" />
+      <DelegateModal
+        isOpen={showDelegateModal}
+        onDismiss={toggleDelegateModal}
+        title={t({ id: 'vote.labels.unlockVotes', message: 'Unlock Votes' })}
+      />
       <ProposalInfo gap="lg" justify="start">
         <RowBetween style={{ width: '100%' }}>
           <ArrowWrapper to="/vote">
-            <ArrowLeft size={20} /> All Proposals
+            <Trans id="vote.labels.allProposals">
+              <ArrowLeft size={20} /> All Proposals
+            </Trans>
           </ArrowWrapper>
           {proposalData && (
             <ProposalStatus status={proposalData.status}>{ProposalState[proposalData.status]}</ProposalStatus>
@@ -212,21 +223,32 @@ export default function VotePage({
           <TYPE.largeHeader style={{ marginBottom: '.5rem' }}>{proposalData?.title}</TYPE.largeHeader>
           <RowBetween>
             <TYPE.main>
-              {endDate && endDate < now
-                ? 'Voting ended ' + (endDate && endDate.toLocaleString(DateTime.DATETIME_FULL))
-                : proposalData
-                ? 'Voting ends approximately ' + (endDate && endDate.toLocaleString(DateTime.DATETIME_FULL))
-                : ''}
+              {endDate && endDate < now ? (
+                <Trans id="vote.labels.votingEnded">
+                  Voting ended {endDate && endDate.toLocaleString(DateTime.DATETIME_FULL)}
+                </Trans>
+              ) : proposalData ? (
+                <Trans id="vote.labels.votingEndsApproximately">
+                  Voting ends approximately {endDate && endDate.toLocaleString(DateTime.DATETIME_FULL)}
+                </Trans>
+              ) : (
+                ''
+              )}
             </TYPE.main>
           </RowBetween>
           {proposalData && proposalData.status === ProposalState.Active && !showVotingButtons && (
             <GreyCard>
               <TYPE.black>
-                Only UNI votes that were self delegated or delegated to another address before block{' '}
-                {proposalData.startBlock} are eligible for voting.{' '}
+                <Trans id="vote.hint.votingEligibility">
+                  Only UNI votes that were self delegated or delegated to another address before block{' '}
+                  {proposalData.startBlock} are eligible for voting.{' '}
+                </Trans>
                 {showLinkForUnlock && (
                   <span>
-                    <StyledInternalLink to="/vote">Unlock voting</StyledInternalLink> to prepare for the next proposal.
+                    <Trans id="vote.hint.unlockVoting">
+                      <StyledInternalLink to="/vote">Unlock voting</StyledInternalLink> to prepare for the next
+                      proposal.
+                    </Trans>
                   </span>
                 )}
               </TYPE.black>
@@ -253,7 +275,7 @@ export default function VotePage({
                 toggleVoteModal()
               }}
             >
-              Vote Against
+              <Trans id="vote.buttons.voteAgainst">Vote Against</Trans>
             </ButtonPrimary>
           </RowFixed>
         ) : (
@@ -264,11 +286,15 @@ export default function VotePage({
             <CardSection>
               <AutoColumn gap="md">
                 <WrapSmall>
-                  <TYPE.black fontWeight={600}>For</TYPE.black>
-                  <TYPE.black fontWeight={600}>
-                    {' '}
-                    {proposalData?.forCount.toLocaleString(undefined, { maximumFractionDigits: 0 })}
-                  </TYPE.black>
+                  <Trans id="vote.labels.for">
+                    <TYPE.black fontWeight={600}>
+                      <Trans id="">For</Trans>
+                    </TYPE.black>
+                    <TYPE.black fontWeight={600}>
+                      {' '}
+                      {proposalData?.forCount.toLocaleString(undefined, { maximumFractionDigits: 0 })}
+                    </TYPE.black>
+                  </Trans>
                 </WrapSmall>
               </AutoColumn>
               <ProgressWrapper>
@@ -280,7 +306,9 @@ export default function VotePage({
             <CardSection>
               <AutoColumn gap="md">
                 <WrapSmall>
-                  <TYPE.black fontWeight={600}>Against</TYPE.black>
+                  <TYPE.black fontWeight={600}>
+                    <Trans id="vote.labels.against">Against</Trans>
+                  </TYPE.black>
                   <TYPE.black fontWeight={600}>
                     {proposalData?.againstCount.toLocaleString(undefined, { maximumFractionDigits: 0 })}
                   </TYPE.black>
@@ -293,7 +321,9 @@ export default function VotePage({
           </StyledDataCard>
         </CardWrapper>
         <AutoColumn gap="md">
-          <TYPE.mediumHeader fontWeight={600}>Details</TYPE.mediumHeader>
+          <TYPE.mediumHeader fontWeight={600}>
+            <Trans id="vote.labels.details">Details</Trans>
+          </TYPE.mediumHeader>
           {proposalData?.details?.map((d, i) => {
             return (
               <DetailText key={i}>
@@ -312,13 +342,17 @@ export default function VotePage({
           })}
         </AutoColumn>
         <AutoColumn gap="md">
-          <TYPE.mediumHeader fontWeight={600}>Description</TYPE.mediumHeader>
+          <TYPE.mediumHeader fontWeight={600}>
+            <Trans id="vote.labels.description">Description</Trans>
+          </TYPE.mediumHeader>
           <MarkDownWrapper>
             <ReactMarkdown source={proposalData?.description} />
           </MarkDownWrapper>
         </AutoColumn>
         <AutoColumn gap="md">
-          <TYPE.mediumHeader fontWeight={600}>Proposer</TYPE.mediumHeader>
+          <TYPE.mediumHeader fontWeight={600}>
+            <Trans id="vote.labels.proposer">Proposer</Trans>
+          </TYPE.mediumHeader>
           <ProposerAddressLink
             href={
               proposalData?.proposer && chainId

src/pages/Vote/index.tsx

@@ -29,6 +29,7 @@ import Loader from '../../components/Loader'
 import FormattedCurrencyAmount from '../../components/FormattedCurrencyAmount'
 import { useModalOpen, useToggleDelegateModal } from '../../state/application/hooks'
 import { ApplicationModal } from '../../state/application/actions'
+import { t, Trans } from '@lingui/macro'
 
 const PageWrapper = styled(AutoColumn)``
 
@@ -138,7 +139,11 @@ export default function Vote() {
       <DelegateModal
         isOpen={showDelegateModal}
         onDismiss={toggleDelegateModal}
-        title={showUnlockVoting ? 'Unlock Votes' : 'Update Delegation'}
+        title={
+          showUnlockVoting
+            ? t({ id: 'vote.delegates.unlockVotes', message: 'Unlock Votes' })
+            : t({ id: 'vote.delegates.update', message: 'Update Delegation' })
+        }
       />
       <TopSection gap="md">
         <VoteCard>
@@ -147,12 +152,16 @@ export default function Vote() {
           <CardSection>
             <AutoColumn gap="md">
               <RowBetween>
-                <TYPE.white fontWeight={600}>Uniswap Governance</TYPE.white>
+                <TYPE.white fontWeight={600}>
+                  <Trans id="vote.labels.uniswapGovernance">Uniswap Governance</Trans>
+                </TYPE.white>
               </RowBetween>
               <RowBetween>
                 <TYPE.white fontSize={14}>
-                  UNI tokens represent voting shares in Uniswap governance. You can vote on each proposal yourself or
-                  delegate your votes to a third party.
+                  <Trans id="vote.hints.votingShares">
+                    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>
               <ExternalLink
@@ -160,7 +169,9 @@ export default function Vote() {
                 href="https://uniswap.org/blog/uni"
                 target="_blank"
               >
-                <TYPE.white fontSize={14}>Read more about Uniswap governance</TYPE.white>
+                <TYPE.white fontSize={14}>
+                  <Trans id="vote.hints.readMoreUniswapGovernance">Read more about Uniswap governance</Trans>
+                </TYPE.white>
               </ExternalLink>
             </AutoColumn>
           </CardSection>
@@ -170,7 +181,9 @@ export default function Vote() {
       </TopSection>
       <TopSection gap="2px">
         <WrapSmall>
-          <TYPE.mediumHeader style={{ margin: '0.5rem 0.5rem 0.5rem 0', flexShrink: 0 }}>Proposals</TYPE.mediumHeader>
+          <TYPE.mediumHeader style={{ margin: '0.5rem 0.5rem 0.5rem 0', flexShrink: 0 }}>
+            <Trans id="vote.labels.proposals">Proposals</Trans>
+          </TYPE.mediumHeader>
           {(!allProposals || allProposals.length === 0) && !availableVotes && <Loader />}
           {showUnlockVoting ? (
             <ButtonPrimary
@@ -179,18 +192,22 @@ export default function Vote() {
               borderRadius="8px"
               onClick={toggleDelegateModal}
             >
-              Unlock Voting
+              <Trans id="vote.buttons.unlockVoting">Unlock Voting</Trans>
             </ButtonPrimary>
           ) : availableVotes && JSBI.notEqual(JSBI.BigInt(0), availableVotes?.quotient) ? (
             <TYPE.body fontWeight={500} mr="6px">
-              <FormattedCurrencyAmount currencyAmount={availableVotes} /> Votes
+              <Trans id="vote.labels.availableVotes">
+                <FormattedCurrencyAmount currencyAmount={availableVotes} /> Votes
+              </Trans>
             </TYPE.body>
           ) : uniBalance &&
             userDelegatee &&
             userDelegatee !== ZERO_ADDRESS &&
             JSBI.notEqual(JSBI.BigInt(0), uniBalance?.quotient) ? (
             <TYPE.body fontWeight={500} mr="6px">
-              <FormattedCurrencyAmount currencyAmount={uniBalance} /> Votes
+              <Trans id="vote.labels.availableVotes">
+                <FormattedCurrencyAmount currencyAmount={uniBalance} /> Votes
+              </Trans>
             </TYPE.body>
           ) : (
             ''
@@ -202,17 +219,21 @@ export default function Vote() {
             {userDelegatee && userDelegatee !== ZERO_ADDRESS ? (
               <RowFixed>
                 <TYPE.body fontWeight={500} mr="4px">
-                  Delegated to:
+                  <Trans id="vote.labels.delegatedTo">Delegated to:</Trans>
                 </TYPE.body>
                 <AddressButton>
                   <StyledExternalLink
                     href={getExplorerLink(1, userDelegatee, ExplorerDataType.ADDRESS)}
                     style={{ margin: '0 4px' }}
                   >
-                    {userDelegatee === account ? 'Self' : shortenAddress(userDelegatee)}
+                    {userDelegatee === account ? (
+                      <Trans id="vote.labels.self">Self</Trans>
+                    ) : (
+                      shortenAddress(userDelegatee)
+                    )}
                   </StyledExternalLink>
                   <TextButton onClick={toggleDelegateModal} style={{ marginLeft: '4px' }}>
-                    (edit)
+                    <Trans id="vote.buttons.edit">(edit)</Trans>
                   </TextButton>
                 </AddressButton>
               </RowFixed>
@@ -223,9 +244,15 @@ export default function Vote() {
         )}
         {allProposals?.length === 0 && (
           <EmptyProposals>
-            <TYPE.body style={{ marginBottom: '8px' }}>No proposals found.</TYPE.body>
+            <TYPE.body style={{ marginBottom: '8px' }}>
+              <Trans id="vote.labels.noProposalsFound">No proposals found.</Trans>
+            </TYPE.body>
             <TYPE.subHeader>
-              <i>Proposals submitted by community members will appear here.</i>
+              <i>
+                <Trans id="vote.hints.proposalSubmitted">
+                  Proposals submitted by community members will appear here.
+                </Trans>
+              </i>
             </TYPE.subHeader>
           </EmptyProposals>
         )}
@@ -240,7 +267,9 @@ export default function Vote() {
         })}
       </TopSection>
       <TYPE.subHeader color="text3">
-        A minimum threshold of 1% of the total UNI supply is required to submit proposals
+        <Trans id="vote.hints.submissionThreshold">
+          A minimum threshold of 1% of the total UNI supply is required to submit proposals
+        </Trans>
       </TYPE.subHeader>
     </PageWrapper>
   )