Consistent locale on claim (#2240)

* New utils format fn formatSmartLocaleAware forcing locale and thousands * Replacing formatSmart with formatSmartLocaleAware on all claim stuff * Made all amounts use the same # of decimals * Using the same pattern for when formatSmart returns a falsy value * Missed one spot without formatSmart Co-authored-by: Leandro <[email protected]>
gnosis · Jan 21, 2022 · a76e668 · a76e668
1 parent 7b5ed4f
commit a76e668
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 24 deletions.
diff --git 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
         <div>
           <ClaimTotal>
             {totalAvailableText && <b>{totalAvailableText}</b>}
-            <p>
-              {formatSmart(totalAvailableAmount, AMOUNT_PRECISION, { thousandSeparator: true, isLocaleAware: true })}{' '}
-              vCOW
-            </p>
+            <p> {formatSmartLocaleAware(totalAvailableAmount, AMOUNT_PRECISION) || '0'} vCOW</p>
           </ClaimTotal>
         </div>
       )}

diff --git 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() {
       </ConfirmedIcon>
       <h3>{isConfirmed ? 'Claimed!' : 'Claiming'}</h3>
       {/* TODO: fix this in new pr */}
-      {!isConfirmed && <Trans>{/* formatSmart(claimedAmount) || 0 */} vCOW</Trans>}
+      {!isConfirmed && <Trans>{/* formatSmartLocationAware(claimedAmount) || '0' */} vCOW</Trans>}
 
       {isConfirmed && (
         <>
@@ -49,7 +49,7 @@ export default function ClaimingStatus() {
           </Trans>
           <Trans>
             {/* TODO: fix this in new pr */}
-            <p>{/* formatSmart(claimedAmount) || 0 */} vCOW</p>
+            <p>{/* formatSmartLocationAware(claimedAmount) || '0' */} vCOW</p>
           </Trans>
           <Trans>
             <span role="img" aria-label="party-hat">

diff --git 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 && <i>with {currencyAmount?.currency?.symbol}</i>}
         </span>
       </td>
-      <td>{formatSmart(claimAmount) || 0} vCOW</td>
+      <td>{formatSmartLocaleAware(claimAmount, AMOUNT_PRECISION) || 0} vCOW</td>
       <td>
         {!isFree ||
           (price && (
             <span>
-              Price: <b>{`${formatSmart(price) || 0} vCoW per ${currencyAmount?.currency?.symbol}`}</b>
+              Price: <b>{`${formatSmartLocaleAware(price) || 0} vCoW per ${currencyAmount?.currency?.symbol}`}</b>
             </span>
           ))}
         <span>
@@ -99,7 +100,7 @@ const ClaimsTableRow = ({
             {isFree ? (
               <span className="green">Free!</span>
             ) : (
-              `${formatSmart(cost) || 0} ${currencyAmount?.currency?.symbol}`
+              `${formatSmartLocaleAware(cost, AMOUNT_PRECISION) || 0} ${currencyAmount?.currency?.symbol}`
             )}
           </b>
         </span>

diff --git 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
           <span>
             <b>Price</b>{' '}
             <i>
-              {formatSmart(price)} vCoW per {currencyAmount?.currency?.symbol}
+              {formatSmartLocaleAware(price) || '0'} vCoW per {currencyAmount?.currency?.symbol}
             </i>
           </span>
 
           <span>
             <b>Max. investment available</b>{' '}
             <i>
-              {maxCost?.toExact() || '0'} {currencyAmount?.currency?.symbol}
+              {formatSmartLocaleAware(maxCost, AMOUNT_PRECISION) || '0'} {currencyAmount?.currency?.symbol}
             </i>
           </span>
 
@@ -234,7 +234,7 @@ export default function InvestOption({ approveData, claim, optionIndex }: Invest
               <span>
                 <b>Balance:</b>
                 <i>
-                  {formatSmart(balance) || 0} {currencyAmount?.currency?.symbol}
+                  {formatSmartLocaleAware(balance, AMOUNT_PRECISION) || 0} {currencyAmount?.currency?.symbol}
                 </i>
                 {/* 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
               />
               <b>{currencyAmount?.currency?.symbol}</b>
             </label>
-            <i>Receive: {formatSmart(vCowAmount) || 0} vCOW</i>
+            <i>Receive: {formatSmartLocaleAware(vCowAmount, AMOUNT_PRECISION) || 0} vCOW</i>
             {/* Insufficient balance validation error */}
             {inputError ? <small>{inputError}</small> : ''}
           </div>
@@ -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
@@ -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 {
       </td>
 
       <td>
-        <i>{formatSmart(vCowAmount) || '0'} vCOW</i>
+        <i>{formatSmartLocaleAware(vCowAmount, AMOUNT_PRECISION) || '0'} vCOW</i>
 
         {!isFree && (
           <span>
@@ -67,7 +66,7 @@ export function InvestSummaryRow(props: Props): JSX.Element | null {
           <span>
             <b>Price:</b>{' '}
             <i>
-              {formatSmart(price) || '0'} vCoW per {symbol}
+              {formatSmartLocaleAware(price) || '0'} vCoW per {symbol}
             </i>
           </span>
         )}

diff --git a/src/custom/utils/format.ts b/src/custom/utils/format.ts
@@ -139,6 +139,11 @@ export function formatSmart(
   })
 }
 
+export function formatSmartLocaleAware(...params: Parameters<typeof formatSmart>): ReturnType<typeof formatSmart> {
+  const [value, decimalsToShow, options = {}] = params
+  return formatSmart(value, decimalsToShow, { ...options, isLocaleAware: true, thousandSeparator: true })
+}
+
 /**
  * Formats Fraction with max precision
  *