diff --git a/src/custom/pages/Claim/ClaimSummary.tsx b/src/custom/pages/Claim/ClaimSummary.tsx index f3db4fa16..f485ea2df 100644 --- a/src/custom/pages/Claim/ClaimSummary.tsx +++ b/src/custom/pages/Claim/ClaimSummary.tsx @@ -1,7 +1,7 @@ import { Trans } from '@lingui/macro' import { CurrencyAmount, Currency } from '@uniswap/sdk-core' import CowProtocolLogo from 'components/CowProtocolLogo' -import { formatSmart } from 'utils/format' +import { formatSmartLocaleAware } from 'utils/format' import { useClaimState } from 'state/claim/hooks' import { ClaimSummary as ClaimSummaryWrapper, ClaimSummaryTitle, ClaimTotal } from './styled' import { ClaimCommonTypes } from './types' @@ -49,10 +49,7 @@ export function ClaimSummaryView({ showClaimText, totalAvailableText, totalAvail
{totalAvailableText && {totalAvailableText}} -

- {formatSmart(totalAvailableAmount, AMOUNT_PRECISION, { thousandSeparator: true, isLocaleAware: true })}{' '} - vCOW -

+

{formatSmartLocaleAware(totalAvailableAmount, AMOUNT_PRECISION) || '0'} vCOW

)} diff --git a/src/custom/pages/Claim/ClaimingStatus.tsx b/src/custom/pages/Claim/ClaimingStatus.tsx index e5d1e6919..62a5e4f59 100644 --- a/src/custom/pages/Claim/ClaimingStatus.tsx +++ b/src/custom/pages/Claim/ClaimingStatus.tsx @@ -8,7 +8,7 @@ import CowProtocolLogo from 'components/CowProtocolLogo' import { ExplorerDataType, getExplorerLink } from 'utils/getExplorerLink' import { useAllClaimingTransactions } from 'state/enhancedTransactions/hooks' import { useMemo } from 'react' -// import { formatSmart } from 'utils/format' +// import { formatSmartLocationAware } from 'utils/format' export default function ClaimingStatus() { const { chainId } = useActiveWeb3React() @@ -40,7 +40,7 @@ export default function ClaimingStatus() {

{isConfirmed ? 'Claimed!' : 'Claiming'}

{/* TODO: fix this in new pr */} - {!isConfirmed && {/* formatSmart(claimedAmount) || 0 */} vCOW} + {!isConfirmed && {/* formatSmartLocationAware(claimedAmount) || '0' */} vCOW} {isConfirmed && ( <> @@ -49,7 +49,7 @@ export default function ClaimingStatus() { {/* TODO: fix this in new pr */} -

{/* formatSmart(claimedAmount) || 0 */} vCOW

+

{/* formatSmartLocationAware(claimedAmount) || '0' */} vCOW

diff --git a/src/custom/pages/Claim/ClaimsTable.tsx b/src/custom/pages/Claim/ClaimsTable.tsx index e3aa75f7d..f068863c7 100644 --- a/src/custom/pages/Claim/ClaimsTable.tsx +++ b/src/custom/pages/Claim/ClaimsTable.tsx @@ -4,7 +4,7 @@ import { ClaimTable, ClaimBreakdown, TokenLogo } from 'pages/Claim/styled' import CowProtocolLogo from 'components/CowProtocolLogo' import { ClaimStatus } from 'state/claim/actions' // import { UserClaimDataDetails } from './types' TODO: fix in another PR -import { formatSmart } from 'utils/format' +import { formatSmartLocaleAware } from 'utils/format' import { EnhancedUserClaimData } from './types' import { useAllClaimingTransactionIndices } from 'state/enhancedTransactions/hooks' import { useUserEnhancedClaimData } from 'state/claim/hooks' @@ -14,6 +14,7 @@ import Circle from 'assets/images/blue-loader.svg' import { Countdown } from 'pages/Claim/Countdown' import { getPaidClaims, getIndexes } from 'state/claim/hooks/utils' import { useEffect } from 'react' +import { AMOUNT_PRECISION } from 'constants/index' export type ClaimsTableProps = { isAirdropOnly: boolean @@ -84,12 +85,12 @@ const ClaimsTableRow = ({ {!isFree && with {currencyAmount?.currency?.symbol}} - {formatSmart(claimAmount) || 0} vCOW + {formatSmartLocaleAware(claimAmount, AMOUNT_PRECISION) || 0} vCOW {!isFree || (price && ( - Price: {`${formatSmart(price) || 0} vCoW per ${currencyAmount?.currency?.symbol}`} + Price: {`${formatSmartLocaleAware(price) || 0} vCoW per ${currencyAmount?.currency?.symbol}`} ))} @@ -99,7 +100,7 @@ const ClaimsTableRow = ({ {isFree ? ( Free! ) : ( - `${formatSmart(cost) || 0} ${currencyAmount?.currency?.symbol}` + `${formatSmartLocaleAware(cost, AMOUNT_PRECISION) || 0} ${currencyAmount?.currency?.symbol}` )} diff --git a/src/custom/pages/Claim/InvestmentFlow/InvestOption.tsx b/src/custom/pages/Claim/InvestmentFlow/InvestOption.tsx index a7c4b6a0f..2863fa21b 100644 --- a/src/custom/pages/Claim/InvestmentFlow/InvestOption.tsx +++ b/src/custom/pages/Claim/InvestmentFlow/InvestOption.tsx @@ -3,7 +3,7 @@ import { Percent } from '@uniswap/sdk-core' import CowProtocolLogo from 'components/CowProtocolLogo' import { InvestTokenGroup, TokenLogo, InvestSummary, InvestInput, InvestAvailableBar } from '../styled' -import { formatSmart } from 'utils/format' +import { formatSmartLocaleAware } from 'utils/format' import Row from 'components/Row' import CheckCircle from 'assets/cow-swap/check.svg' import { InvestOptionProps } from '.' @@ -19,7 +19,7 @@ import Loader from 'components/Loader' import { useErrorModal } from 'hooks/useErrorMessageAndModal' import { tryParseAmount } from 'state/swap/hooks' import { calculateInvestmentAmounts, calculatePercentage } from 'state/claim/hooks/utils' -import { PERCENTAGE_PRECISION } from 'constants/index' +import { AMOUNT_PRECISION, PERCENTAGE_PRECISION } from 'constants/index' enum ErrorMsgs { InsufficientBalance = 'Insufficient balance to cover investment amount', @@ -169,14 +169,14 @@ export default function InvestOption({ approveData, claim, optionIndex }: Invest Price{' '} - {formatSmart(price)} vCoW per {currencyAmount?.currency?.symbol} + {formatSmartLocaleAware(price) || '0'} vCoW per {currencyAmount?.currency?.symbol} Max. investment available{' '} - {maxCost?.toExact() || '0'} {currencyAmount?.currency?.symbol} + {formatSmartLocaleAware(maxCost, AMOUNT_PRECISION) || '0'} {currencyAmount?.currency?.symbol} @@ -234,7 +234,7 @@ export default function InvestOption({ approveData, claim, optionIndex }: Invest Balance: - {formatSmart(balance) || 0} {currencyAmount?.currency?.symbol} + {formatSmartLocaleAware(balance, AMOUNT_PRECISION) || 0} {currencyAmount?.currency?.symbol} {/* Button should use the max possible amount the user can invest, considering their balance + max investment allowed */} {!noBalance && isSelfClaiming && ( @@ -252,7 +252,7 @@ export default function InvestOption({ approveData, claim, optionIndex }: Invest /> {currencyAmount?.currency?.symbol} - Receive: {formatSmart(vCowAmount) || 0} vCOW + Receive: {formatSmartLocaleAware(vCowAmount, AMOUNT_PRECISION) || 0} vCOW {/* Insufficient balance validation error */} {inputError ? {inputError} : ''} @@ -263,5 +263,5 @@ export default function InvestOption({ approveData, claim, optionIndex }: Invest } function _formatPercentage(percentage: Percent): string { - return formatSmart(percentage, PERCENTAGE_PRECISION) || '0' + return formatSmartLocaleAware(percentage, PERCENTAGE_PRECISION) || '0' } diff --git a/src/custom/pages/Claim/InvestmentFlow/InvestSummaryRow.tsx b/src/custom/pages/Claim/InvestmentFlow/InvestSummaryRow.tsx index fe2217eeb..8ee6269d9 100644 --- a/src/custom/pages/Claim/InvestmentFlow/InvestSummaryRow.tsx +++ b/src/custom/pages/Claim/InvestmentFlow/InvestSummaryRow.tsx @@ -3,7 +3,7 @@ import { calculatePercentage } from 'state/claim/hooks/utils' import { TokenLogo, InvestAvailableBar } from 'pages/Claim/styled' import { ClaimWithInvestmentData } from 'pages/Claim/types' import CowProtocolLogo from 'components/CowProtocolLogo' -import { formatSmart } from 'utils/format' +import { formatSmartLocaleAware } from 'utils/format' import { ONE_HUNDRED_PERCENT } from 'constants/misc' import { AMOUNT_PRECISION } from 'constants/index' @@ -16,8 +16,7 @@ export function InvestSummaryRow(props: Props): JSX.Element | null { const symbol = isFree ? '' : (currencyAmount?.currency?.symbol as string) - const formattedCost = - formatSmart(investmentCost, AMOUNT_PRECISION, { thousandSeparator: true, isLocaleAware: true }) || '0' + const formattedCost = formatSmartLocaleAware(investmentCost, AMOUNT_PRECISION) || '0' const percentage = investmentCost && cost && calculatePercentage(investmentCost, cost) @@ -44,7 +43,7 @@ export function InvestSummaryRow(props: Props): JSX.Element | null { - {formatSmart(vCowAmount) || '0'} vCOW + {formatSmartLocaleAware(vCowAmount, AMOUNT_PRECISION) || '0'} vCOW {!isFree && ( @@ -67,7 +66,7 @@ export function InvestSummaryRow(props: Props): JSX.Element | null { Price:{' '} - {formatSmart(price) || '0'} vCoW per {symbol} + {formatSmartLocaleAware(price) || '0'} vCoW per {symbol} )} diff --git a/src/custom/utils/format.ts b/src/custom/utils/format.ts index b5e300368..3028feb3e 100644 --- a/src/custom/utils/format.ts +++ b/src/custom/utils/format.ts @@ -139,6 +139,11 @@ export function formatSmart( }) } +export function formatSmartLocaleAware(...params: Parameters): ReturnType { + const [value, decimalsToShow, options = {}] = params + return formatSmart(value, decimalsToShow, { ...options, isLocaleAware: true, thousandSeparator: true }) +} + /** * Formats Fraction with max precision *