From 58a1be8421fc87ffeab0e20d6e8cd74930d254e3 Mon Sep 17 00:00:00 2001 From: Moody Salem Date: Sat, 29 May 2021 20:29:49 -0500 Subject: [PATCH] chore(i18n): add a few more translations --- src/components/CurrencyInputPanel/index.tsx | 23 +++++++++++-------- .../InputStepCounter/InputStepCounter.tsx | 4 ++-- src/components/PositionListItem/index.tsx | 2 +- src/components/RangeSelector/index.tsx | 5 ++-- src/components/earn/StakingModal.tsx | 3 ++- src/components/vote/DelegateModal.tsx | 6 ++--- src/components/vote/VoteModal.tsx | 4 ++-- src/pages/AddLiquidity/index.tsx | 18 ++++++++------- src/pages/MigrateV2/MigrateV2Pair.tsx | 9 ++++---- src/pages/Pool/PositionPage.tsx | 10 ++++---- ...TokenAmount.ts => formatCurrencyAmount.ts} | 2 +- 11 files changed, 47 insertions(+), 39 deletions(-) rename src/utils/{formatTokenAmount.ts => formatCurrencyAmount.ts} (85%) diff --git a/src/components/CurrencyInputPanel/index.tsx b/src/components/CurrencyInputPanel/index.tsx index 26956de938..529516c4ca 100644 --- a/src/components/CurrencyInputPanel/index.tsx +++ b/src/components/CurrencyInputPanel/index.tsx @@ -1,6 +1,6 @@ import { Pair } from '@uniswap/v2-sdk' import { Currency, CurrencyAmount, Percent, Token } from '@uniswap/sdk-core' -import React, { useState, useCallback } from 'react' +import React, { useState, useCallback, ReactNode } from 'react' import styled from 'styled-components/macro' import { darken } from 'polished' import { useCurrencyBalance } from '../../state/wallet/hooks' @@ -18,7 +18,7 @@ import useTheme from '../../hooks/useTheme' import { Lock } from 'react-feather' import { AutoColumn } from 'components/Column' import { FiatValue } from './FiatValue' -import { formatTokenAmount } from 'utils/formatTokenAmount' +import { formatCurrencyAmount } from 'utils/formatCurrencyAmount' const InputPanel = styled.div<{ hideInput?: boolean }>` ${({ theme }) => theme.flexColumnNoWrap} @@ -160,7 +160,7 @@ interface CurrencyInputPanelProps { priceImpact?: Percent id: string showCommonBases?: boolean - customBalanceText?: string + renderBalance?: (amount: CurrencyAmount) => ReactNode locked?: boolean } @@ -174,7 +174,7 @@ export default function CurrencyInputPanel({ otherCurrency, id, showCommonBases, - customBalanceText, + renderBalance, fiatValue, priceImpact, hideBalance = false, @@ -266,12 +266,15 @@ export default function CurrencyInputPanel({ fontSize={14} style={{ display: 'inline', cursor: 'pointer' }} > - {!hideBalance && !!currency && selectedCurrencyBalance - ? (customBalanceText ?? 'Balance: ') + - formatTokenAmount(selectedCurrencyBalance, 4) + - ' ' + - currency.symbol - : ''} + {!hideBalance && currency && selectedCurrencyBalance ? ( + renderBalance ? ( + renderBalance(selectedCurrencyBalance) + ) : ( + + Balance: {formatCurrencyAmount(selectedCurrencyBalance, 4)} {currency.symbol} + + ) + ) : null} {showMaxButton && selectedCurrencyBalance ? ( diff --git a/src/components/InputStepCounter/InputStepCounter.tsx b/src/components/InputStepCounter/InputStepCounter.tsx index e587954e0b..d7551bc0cf 100644 --- a/src/components/InputStepCounter/InputStepCounter.tsx +++ b/src/components/InputStepCounter/InputStepCounter.tsx @@ -1,4 +1,4 @@ -import React, { useState, useCallback, useEffect } from 'react' +import React, { useState, useCallback, useEffect, ReactNode } from 'react' import { LightCard } from 'components/Card' import { RowBetween } from 'components/Row' import { Input as NumericalInput } from '../NumericalInput' @@ -60,7 +60,7 @@ interface StepCounterProps { label?: string width?: string locked?: boolean // disable input - title: string + title: ReactNode tokenA: string | undefined tokenB: string | undefined } diff --git a/src/components/PositionListItem/index.tsx b/src/components/PositionListItem/index.tsx index 955d7686d6..7b3e78e6ab 100644 --- a/src/components/PositionListItem/index.tsx +++ b/src/components/PositionListItem/index.tsx @@ -9,7 +9,7 @@ import styled from 'styled-components/macro' import { HideSmall, MEDIA_WIDTHS, SmallOnly } from 'theme' import { PositionDetails } from 'types/position' import { WETH9, Price, Token, Percent } from '@uniswap/sdk-core' -import { formatPrice } from 'utils/formatTokenAmount' +import { formatPrice } from 'utils/formatCurrencyAmount' import Loader from 'components/Loader' import { unwrappedToken } from 'utils/unwrappedToken' import RangeBadge from 'components/Badge/RangeBadge' diff --git a/src/components/RangeSelector/index.tsx b/src/components/RangeSelector/index.tsx index 1956e6d3b3..3167c6ca2f 100644 --- a/src/components/RangeSelector/index.tsx +++ b/src/components/RangeSelector/index.tsx @@ -1,3 +1,4 @@ +import { Trans } from '@lingui/macro' import React from 'react' import { Currency, Price, Token } from '@uniswap/sdk-core' import StepCounter from 'components/InputStepCounter/InputStepCounter' @@ -46,7 +47,7 @@ export default function RangeSelector({ increment={isSorted ? getIncrementLower : getDecrementUpper} feeAmount={feeAmount} label={leftPrice ? `${currencyB?.symbol}` : '-'} - title={'Min Price'} + title={Min Price} tokenA={currencyA?.symbol} tokenB={currencyB?.symbol} /> @@ -60,7 +61,7 @@ export default function RangeSelector({ label={rightPrice ? `${currencyB?.symbol}` : '-'} tokenA={currencyA?.symbol} tokenB={currencyB?.symbol} - title={'Max Price'} + title={Max Price} /> ) diff --git a/src/components/earn/StakingModal.tsx b/src/components/earn/StakingModal.tsx index 58ae721df1..de5232a320 100644 --- a/src/components/earn/StakingModal.tsx +++ b/src/components/earn/StakingModal.tsx @@ -1,6 +1,7 @@ import React, { useState, useCallback } from 'react' import { useV2LiquidityTokenPermit } from '../../hooks/useERC20Permit' import useTransactionDeadline from '../../hooks/useTransactionDeadline' +import { formatCurrencyAmount } from '../../utils/formatCurrencyAmount' import Modal from '../Modal' import { AutoColumn } from '../Column' import styled from 'styled-components/macro' @@ -167,7 +168,7 @@ export default function StakingModal({ isOpen, onDismiss, stakingInfo, userLiqui currency={stakingInfo.stakedAmount.currency} pair={dummyPair} label={''} - customBalanceText={t`Available to deposit:`} + renderBalance={(amount) => Available to deposit: {formatCurrencyAmount(amount, 4)}} id="stake-liquidity-token" /> diff --git a/src/components/vote/DelegateModal.tsx b/src/components/vote/DelegateModal.tsx index 593c25821a..65ddb6584c 100644 --- a/src/components/vote/DelegateModal.tsx +++ b/src/components/vote/DelegateModal.tsx @@ -15,7 +15,7 @@ import useENS from '../../hooks/useENS' import { useDelegateCallback } from '../../state/governance/hooks' import { useTokenBalance } from '../../state/wallet/hooks' import { LoadingView, SubmittedView } from '../ModalViews' -import { formatTokenAmount } from 'utils/formatTokenAmount' +import { formatCurrencyAmount } from 'utils/formatCurrencyAmount' import { Trans } from '@lingui/macro' const ContentWrapper = styled(AutoColumn)` @@ -122,7 +122,7 @@ export default function DelegateModal({ isOpen, onDismiss, title }: VoteModalPro {usingDelegate ? Delegating votes : Unlocking Votes} - {formatTokenAmount(uniBalance, 4)} + {formatCurrencyAmount(uniBalance, 4)} )} @@ -132,7 +132,7 @@ export default function DelegateModal({ isOpen, onDismiss, title }: VoteModalPro Transaction Submitted - {formatTokenAmount(uniBalance, 4)} + {formatCurrencyAmount(uniBalance, 4)} )} diff --git a/src/components/vote/VoteModal.tsx b/src/components/vote/VoteModal.tsx index 25ba3a85b0..e1ed20832e 100644 --- a/src/components/vote/VoteModal.tsx +++ b/src/components/vote/VoteModal.tsx @@ -12,7 +12,7 @@ import { ButtonPrimary } from '../Button' import Circle from '../../assets/images/blue-loader.svg' import { useVoteCallback, useUserVotes } from '../../state/governance/hooks' import { ExternalLink } from '../../theme/components' -import { formatTokenAmount } from 'utils/formatTokenAmount' +import { formatCurrencyAmount } from 'utils/formatCurrencyAmount' import { CurrencyAmount, Token } from '@uniswap/sdk-core' import { Trans } from '@lingui/macro' @@ -99,7 +99,7 @@ export default function VoteModal({ isOpen, onDismiss, proposalId, support }: Vo - {formatTokenAmount(availableVotes, 4)} Votes + {formatCurrencyAmount(availableVotes, 4)} Votes diff --git a/src/pages/AddLiquidity/index.tsx b/src/pages/AddLiquidity/index.tsx index cc3224d412..cc8b444214 100644 --- a/src/pages/AddLiquidity/index.tsx +++ b/src/pages/AddLiquidity/index.tsx @@ -579,13 +579,15 @@ export default function AddLiquidity({ ) : null} - Your liquidity will only earn fees when the market price of the pair is within your range.{' '} - - Need help picking a range? - + + Your liquidity will only earn fees when the market price of the pair is within your range.{' '} + + Need help picking a range? + + - Current Price + Current Price - At least {formatTokenAmount(refund0, 4)} {token0.equals(WETH9[chainId]) ? 'ETH' : token0.symbol}{' '} - and {formatTokenAmount(refund1, 4)} {token1.equals(WETH9[chainId]) ? 'ETH' : token1.symbol} will - be refunded to your wallet due to selected price range. + At least {formatCurrencyAmount(refund0, 4)}{' '} + {token0.equals(WETH9[chainId]) ? 'ETH' : token0.symbol} and {formatCurrencyAmount(refund1, 4)}{' '} + {token1.equals(WETH9[chainId]) ? 'ETH' : token1.symbol} will be refunded to your wallet due to + selected price range. ) : null} diff --git a/src/pages/Pool/PositionPage.tsx b/src/pages/Pool/PositionPage.tsx index b19898b353..f54995d4fa 100644 --- a/src/pages/Pool/PositionPage.tsx +++ b/src/pages/Pool/PositionPage.tsx @@ -21,7 +21,7 @@ import { DarkCard, LightCard } from 'components/Card' import CurrencyLogo from 'components/CurrencyLogo' import { t, Trans } from '@lingui/macro' import { currencyId } from 'utils/currencyId' -import { formatTokenAmount } from 'utils/formatTokenAmount' +import { formatCurrencyAmount } from 'utils/formatCurrencyAmount' import { useV3PositionFees } from 'hooks/useV3PositionFees' import { BigNumber } from '@ethersproject/bignumber' import { Token, Currency, CurrencyAmount, Percent, Fraction, Price } from '@uniswap/sdk-core' @@ -456,14 +456,14 @@ export function PositionPage({ - {feeValueUpper ? formatTokenAmount(feeValueUpper, 4) : '-'} + {feeValueUpper ? formatCurrencyAmount(feeValueUpper, 4) : '-'} {feeValueUpper?.currency?.symbol} - {feeValueLower ? formatTokenAmount(feeValueLower, 4) : '-'} + {feeValueLower ? formatCurrencyAmount(feeValueLower, 4) : '-'} {feeValueLower?.currency?.symbol} @@ -708,7 +708,7 @@ export function PositionPage({ {feeValueUpper?.currency?.symbol} - {feeValueUpper ? formatTokenAmount(feeValueUpper, 4) : '-'} + {feeValueUpper ? formatCurrencyAmount(feeValueUpper, 4) : '-'} @@ -721,7 +721,7 @@ export function PositionPage({ {feeValueLower?.currency?.symbol} - {feeValueLower ? formatTokenAmount(feeValueLower, 4) : '-'} + {feeValueLower ? formatCurrencyAmount(feeValueLower, 4) : '-'} diff --git a/src/utils/formatTokenAmount.ts b/src/utils/formatCurrencyAmount.ts similarity index 85% rename from src/utils/formatTokenAmount.ts rename to src/utils/formatCurrencyAmount.ts index 5a3b0daab6..31853a677e 100644 --- a/src/utils/formatTokenAmount.ts +++ b/src/utils/formatCurrencyAmount.ts @@ -1,7 +1,7 @@ import { Price, CurrencyAmount, Currency, Fraction } from '@uniswap/sdk-core' import JSBI from 'jsbi' -export function formatTokenAmount(amount: CurrencyAmount | undefined, sigFigs: number) { +export function formatCurrencyAmount(amount: CurrencyAmount | undefined, sigFigs: number) { if (!amount) { return '-' }