diff --git a/src/custom/pages/Claim/ClaimSummary.tsx b/src/custom/pages/Claim/ClaimSummary.tsx index f485ea2df..702f8fed2 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 { formatSmartLocaleAware } from 'utils/format' +import { formatMax, formatSmartLocaleAware } from 'utils/format' import { useClaimState } from 'state/claim/hooks' import { ClaimSummary as ClaimSummaryWrapper, ClaimSummaryTitle, ClaimTotal } from './styled' import { ClaimCommonTypes } from './types' @@ -49,7 +49,10 @@ export function ClaimSummaryView({ showClaimText, totalAvailableText, totalAvail
{totalAvailableText && {totalAvailableText}} -

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

+

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

)} diff --git a/src/custom/pages/Claim/ClaimsTable.tsx b/src/custom/pages/Claim/ClaimsTable.tsx index f068863c7..ebfa82b71 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 { formatSmartLocaleAware } from 'utils/format' +import { formatMax, formatSmartLocaleAware } from 'utils/format' import { EnhancedUserClaimData } from './types' import { useAllClaimingTransactionIndices } from 'state/enhancedTransactions/hooks' import { useUserEnhancedClaimData } from 'state/claim/hooks' @@ -85,22 +85,27 @@ const ClaimsTableRow = ({ {!isFree && with {currencyAmount?.currency?.symbol}} - {formatSmartLocaleAware(claimAmount, AMOUNT_PRECISION) || 0} vCOW + + {formatSmartLocaleAware(claimAmount, AMOUNT_PRECISION) || 0} vCOW + {!isFree || (price && ( - Price: {`${formatSmartLocaleAware(price) || 0} vCoW per ${currencyAmount?.currency?.symbol}`} + Price:{' '} + {`${formatSmartLocaleAware(price) || 0} vCoW per ${ + currencyAmount?.currency?.symbol + }`} ))} Cost:{' '} - + {' '} {isFree ? ( Free! ) : ( - `${formatSmartLocaleAware(cost, AMOUNT_PRECISION) || 0} ${currencyAmount?.currency?.symbol}` + `${formatSmartLocaleAware(cost, AMOUNT_PRECISION) || 0} ${cost?.currency?.symbol}` )} diff --git a/src/custom/pages/Claim/InvestmentFlow/InvestOption.tsx b/src/custom/pages/Claim/InvestmentFlow/InvestOption.tsx index 958054cc4..90ceabcba 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 { formatSmartLocaleAware } from 'utils/format' +import { formatMax, formatSmartLocaleAware } from 'utils/format' import Row from 'components/Row' import CheckCircle from 'assets/cow-swap/check.svg' import { InvestOptionProps } from '.' @@ -221,15 +221,15 @@ export default function InvestOption({ approveData, claim, optionIndex }: Invest Price{' '} - + {formatSmartLocaleAware(price) || '0'} vCoW per {currencyAmount?.currency?.symbol} Max. investment available{' '} - - {formatSmartLocaleAware(maxCost, AMOUNT_PRECISION) || '0'} {currencyAmount?.currency?.symbol} + + {formatSmartLocaleAware(maxCost, AMOUNT_PRECISION) || '0'} {maxCost?.currency?.symbol} @@ -286,8 +286,8 @@ export default function InvestOption({ approveData, claim, optionIndex }: Invest - Receive: {formatSmartLocaleAware(vCowAmount, AMOUNT_PRECISION) || 0} vCOW + + Receive: {formatSmartLocaleAware(vCowAmount, AMOUNT_PRECISION) || 0} vCOW + {/* Insufficient balance validation error */} {inputError && {inputError}} {inputWarning && {inputWarning}} diff --git a/src/custom/pages/Claim/InvestmentFlow/InvestSummaryRow.tsx b/src/custom/pages/Claim/InvestmentFlow/InvestSummaryRow.tsx index 8ee6269d9..4be45faf8 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 { formatSmartLocaleAware } from 'utils/format' +import { formatMax, formatSmartLocaleAware } from 'utils/format' import { ONE_HUNDRED_PERCENT } from 'constants/misc' import { AMOUNT_PRECISION } from 'constants/index' @@ -17,6 +17,9 @@ export function InvestSummaryRow(props: Props): JSX.Element | null { const symbol = isFree ? '' : (currencyAmount?.currency?.symbol as string) const formattedCost = formatSmartLocaleAware(investmentCost, AMOUNT_PRECISION) || '0' + const formattedCostMaxPrecision = investmentCost + ? `${formatMax(investmentCost, currencyAmount?.currency?.decimals)} ${symbol}` + : '' const percentage = investmentCost && cost && calculatePercentage(investmentCost, cost) @@ -43,12 +46,14 @@ export function InvestSummaryRow(props: Props): JSX.Element | null { - {formatSmartLocaleAware(vCowAmount, AMOUNT_PRECISION) || '0'} vCOW + + {formatSmartLocaleAware(vCowAmount, AMOUNT_PRECISION) || '0'} vCOW + {!isFree && ( Investment amount:{' '} - + {formattedCost} {symbol} @@ -65,13 +70,13 @@ export function InvestSummaryRow(props: Props): JSX.Element | null { {!isFree && ( Price:{' '} - + {formatSmartLocaleAware(price) || '0'} vCoW per {symbol} )} - Cost: {isFree ? 'Free!' : `${formattedCost} ${symbol}`} + Cost: {isFree ? 'Free!' : `${formattedCost} ${symbol}`} Vesting: