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
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
*
|