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/ClaimingStatus.tsx b/src/custom/pages/Claim/ClaimingStatus.tsx index 3ea91a056..967a07bc6 100644 --- a/src/custom/pages/Claim/ClaimingStatus.tsx +++ b/src/custom/pages/Claim/ClaimingStatus.tsx @@ -1,3 +1,4 @@ +import { CurrencyAmount } from '@uniswap/sdk-core' import { Trans } from '@lingui/macro' import { ConfirmOrLoadingWrapper, ConfirmedIcon, AttemptFooter, CowSpinner } from 'pages/Claim/styled' import { ClaimStatus } from 'state/claim/actions' @@ -12,6 +13,8 @@ import { EnhancedTransactionLink } from 'components/EnhancedTransactionLink' import { ExplorerDataType } from 'utils/getExplorerLink' import { V_COW } from 'constants/tokens' import AddToMetamask from 'components/AddToMetamask' +import { formatMax, formatSmartLocaleAware } from 'utils/format' +import { AMOUNT_PRECISION } from 'constants/index' export default function ClaimingStatus() { const { chainId, account } = useActiveWeb3React() @@ -33,6 +36,11 @@ export default function ClaimingStatus() { const currency = chainId ? V_COW[chainId] : undefined + const vCowAmount = currency && CurrencyAmount.fromRawAmount(currency, claimedAmount) + + const formattedVCowAmount = formatSmartLocaleAware(vCowAmount, AMOUNT_PRECISION) + const formattedMaxVCowAmount = vCowAmount?.greaterThan('0') ? formatMax(vCowAmount, currency?.decimals) : '' + return ( @@ -45,7 +53,11 @@ export default function ClaimingStatus() { )}

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

- {!isConfirmed && {claimedAmount} vCOW} + {!isConfirmed && ( + + {formattedVCowAmount} vCOW + + )} {isConfirmed && ( <> @@ -53,7 +65,7 @@ export default function ClaimingStatus() {

You have successfully claimed

-

{claimedAmount} vCOW

+

{formattedVCowAmount} vCOW

diff --git a/src/custom/pages/Claim/ClaimsTable.tsx b/src/custom/pages/Claim/ClaimsTable.tsx index c4e3f8c4e..412772293 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 acfe1df63..ba3385a7a 100644 --- a/src/custom/pages/Claim/InvestmentFlow/InvestOption.tsx +++ b/src/custom/pages/Claim/InvestmentFlow/InvestOption.tsx @@ -4,7 +4,7 @@ import { BigNumber } from '@ethersproject/bignumber' import CowProtocolLogo from 'components/CowProtocolLogo' import { InvestTokenGroup, TokenLogo, InvestSummary, InvestInput, InvestAvailableBar, UnderlineButton } 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 { InvestmentFlowProps } from '.' @@ -163,7 +163,7 @@ export default function InvestOption({ claim, optionIndex, openModal, closeModal } finally { setApproving(false) } - }, [handleCloseError, handleSetError, revokeApprovalCallback, token?.symbol]) + }, [handleCloseError, handleSetError, revokeApprovalCallback, token?.symbol]) */ const vCowAmount = useMemo( @@ -270,15 +270,15 @@ export default function InvestOption({ claim, optionIndex, openModal, closeModal 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} @@ -320,7 +320,7 @@ export default function InvestOption({ claim, optionIndex, openModal, closeModal )} )} - {/* + {/* // CURRENTLY TEST ONLY approveState === ApprovalState.APPROVED && ( @@ -343,8 +343,8 @@ export default function InvestOption({ claim, optionIndex, openModal, closeModal - 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 57255fcbf..21fb641dc 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: diff --git a/src/custom/state/claim/hooks/index.ts b/src/custom/state/claim/hooks/index.ts index c55782caf..a88beb543 100644 --- a/src/custom/state/claim/hooks/index.ts +++ b/src/custom/state/claim/hooks/index.ts @@ -560,7 +560,7 @@ export function useClaimCallback(account: string | null | undefined): { summary: `Claim ${formattedVCowAmount} vCOW`, claim: { recipient: account, indices: args[0] as number[] }, }) - return formattedVCowAmount + return vCowAmount.quotient.toString() }) }, [account, addTransaction, chainId, connectedAccount, estimateGasCallback, getClaimArgs, vCowContract, vCowToken]