Skip to content

I
interface
Commit 46f539c6 authored by Justin Domingue's avatar Justin Domingue Committed by GitHub
Browse files
Options

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

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

* cleanup

* synced

* regenerated locales
parent ad65b638
Expand all Show whitespace changes
Inline Side-by-side
Showing with 13024 additions and 392 deletions
src/components/AccountDetails/Copy.tsx
View file @ 46f539c6
......@@ -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
View file @ 46f539c6
......@@ -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
View file @ 46f539c6
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
View file @ 46f539c6
......@@ -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
View file @ 46f539c6
......@@ -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
<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
<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
View file @ 46f539c6
......@@ -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
View file @ 46f539c6
......@@ -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
View file @ 46f539c6
......@@ -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
View file @ 46f539c6
......@@ -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
View file @ 46f539c6
......@@ -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
View file @ 46f539c6
......@@ -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
View file @ 46f539c6
......@@ -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}`}
>
<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
View file @ 46f539c6
......@@ -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 '}{' '}
<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 '}{' '}
<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
View file @ 46f539c6
......@@ -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
View file @ 46f539c6
......@@ -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
View file @ 46f539c6
......@@ -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
View file @ 46f539c6
......@@ -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>
<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
View file @ 46f539c6
......@@ -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
View file @ 46f539c6
......@@ -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}>
<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
View file @ 46f539c6
......@@ -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}>
<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}>
<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}>
<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
View file @ 46f539c6
......@@ -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}>
<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">
<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 />
<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,13 +194,16 @@ export default function ClaimModal() {
</TYPE.largeHeader>
{!claimConfirmed && (
<Text fontSize={36} color={'#ff007a'} fontWeight={800}>
<Trans id="claim.labels.tokenAmount">
{unclaimedAmount?.toFixed(0, { groupSeparator: ',' } ?? '-')} UNI
</Trans>
</Text>
)}
</AutoColumn>
{claimConfirmed && (
<>
<TYPE.subHeader fontWeight={500} color="black">
<Trans id="claim.labels.welcome">
<span role="img" aria-label="party-hat">
🎉{' '}
</span>
......@@ -189,18 +211,21 @@ export default function ClaimModal() {
<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
View file @ 46f539c6
......@@ -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' }}>
<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
View file @ 46f539c6
......@@ -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
View file @ 46f539c6
......@@ -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: ',' })}{' '}
<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
View file @ 46f539c6
......@@ -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' }}>
<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
View file @ 46f539c6
......@@ -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 `}
<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.'}
</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 `}
<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.'}
</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>
<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
View file @ 46f539c6
......@@ -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}>
<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
View file @ 46f539c6
......@@ -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>
<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
View file @ 46f539c6
......@@ -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/locales/de.po
View file @ 46f539c6
This diff is collapsed.
src/locales/en.po
View file @ 46f539c6
This diff is collapsed.
src/locales/es-AR.po
View file @ 46f539c6
This diff is collapsed.
src/locales/es-US.po
View file @ 46f539c6
This diff is collapsed.
src/locales/it-IT.po
View file @ 46f539c6
This diff is collapsed.
src/locales/iw.po
View file @ 46f539c6
This diff is collapsed.
src/locales/pseudo-en.po
View file @ 46f539c6
This diff is collapsed.
src/locales/ro.po
View file @ 46f539c6
This diff is collapsed.
src/locales/ru.po
View file @ 46f539c6
This diff is collapsed.
src/locales/vi.po
View file @ 46f539c6
This diff is collapsed.
src/locales/zh-CN.po
View file @ 46f539c6
This diff is collapsed.
src/locales/zh-TW.po
View file @ 46f539c6
This diff is collapsed.
src/pages/AddLiquidityV2/ConfirmAddModalBottom.tsx
View file @ 46f539c6
......@@ -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
View file @ 46f539c6
......@@ -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)} ${
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}`
} 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'}>
<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
View file @ 46f539c6
......@@ -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 }}>
<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>
<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>
<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
View file @ 46f539c6
......@@ -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}>
<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
View file @ 46f539c6
......@@ -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">
<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?'}{' '}
<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.'}
Import it.
</StyledInternalLink>
</Trans>
</Text>
</AutoColumn>
</AutoColumn>
......
src/pages/Pool/v2.tsx
View file @ 46f539c6
......@@ -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>
<Trans id="pools.buttons.accountAnalytics">
<ExternalLink href={'https://v2.info.uniswap.org/account/' + account}>
Account analytics and accrued fees
</ExternalLink>
<span> ↗</span>
<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
View file @ 46f539c6
......@@ -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
View file @ 46f539c6
......@@ -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">
<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>
<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>
<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
View file @ 46f539c6
......@@ -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}>
<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">
<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">
<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">
<Trans id="vote.hints.submissionThreshold">
A minimum threshold of 1% of the total UNI supply is required to submit proposals
</Trans>
</TYPE.subHeader>
</PageWrapper>
)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment