Added full amounts on hover for all claims values

gnosis · Jan 25, 2022 · 4f91d42 · 4f91d42
1 parent b1335dc
commit 4f91d42
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 19 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 { 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
         <div>
           <ClaimTotal>
             {totalAvailableText && <b>{totalAvailableText}</b>}
-            <p> {formatSmartLocaleAware(totalAvailableAmount, AMOUNT_PRECISION) || '0'} vCOW</p>
+            <p title={`${formatMax(totalAvailableAmount, totalAvailableAmount.currency.decimals)} vCOW`}>
+              {' '}
+              {formatSmartLocaleAware(totalAvailableAmount, AMOUNT_PRECISION) || '0'} vCOW
+            </p>
           </ClaimTotal>
         </div>
       )}

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 { 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 && <i>with {currencyAmount?.currency?.symbol}</i>}
         </span>
       </td>
-      <td>{formatSmartLocaleAware(claimAmount, AMOUNT_PRECISION) || 0} vCOW</td>
+      <td title={`${formatMax(claimAmount, claimAmount.currency.decimals)} vCOW`}>
+        {formatSmartLocaleAware(claimAmount, AMOUNT_PRECISION) || 0} vCOW
+      </td>
       <td>
         {!isFree ||
           (price && (
             <span>
-              Price: <b>{`${formatSmartLocaleAware(price) || 0} vCoW per ${currencyAmount?.currency?.symbol}`}</b>
+              Price:{' '}
+              <b title={formatMax(price)}>{`${formatSmartLocaleAware(price) || 0} vCoW per ${
+                currencyAmount?.currency?.symbol
+              }`}</b>
             </span>
           ))}
         <span>
           Cost:{' '}
-          <b>
+          <b title={cost && `${formatMax(cost, cost.currency.decimals)} ${cost.currency.symbol}`}>
             {' '}
             {isFree ? (
               <span className="green">Free!</span>
             ) : (
-              `${formatSmartLocaleAware(cost, AMOUNT_PRECISION) || 0} ${currencyAmount?.currency?.symbol}`
+              `${formatSmartLocaleAware(cost, AMOUNT_PRECISION) || 0} ${cost?.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 { 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
         <InvestSummary>
           <span>
             <b>Price</b>{' '}
-            <i>
+            <i title={formatMax(price)}>
               {formatSmartLocaleAware(price) || '0'} vCoW per {currencyAmount?.currency?.symbol}
             </i>
           </span>
 
           <span>
             <b>Max. investment available</b>{' '}
-            <i>
-              {formatSmartLocaleAware(maxCost, AMOUNT_PRECISION) || '0'} {currencyAmount?.currency?.symbol}
+            <i title={maxCost && `${formatMax(maxCost, maxCost.currency.decimals)} ${maxCost.currency.symbol}`}>
+              {formatSmartLocaleAware(maxCost, AMOUNT_PRECISION) || '0'} {maxCost?.currency?.symbol}
             </i>
           </span>
 
@@ -286,8 +286,8 @@ export default function InvestOption({ approveData, claim, optionIndex }: Invest
             <label>
               <span>
                 <b>Balance:</b>
-                <i>
-                  {formatSmartLocaleAware(balance, AMOUNT_PRECISION) || 0} {currencyAmount?.currency?.symbol}
+                <i title={balance && `${formatMax(balance, balance.currency.decimals)} ${balance.currency.symbol}`}>
+                  {formatSmartLocaleAware(balance, AMOUNT_PRECISION) || 0} {balance?.currency?.symbol}
                 </i>
                 {/* Button should use the max possible amount the user can invest, considering their balance + max investment allowed */}
                 {!noBalance && isSelfClaiming && (
@@ -305,7 +305,9 @@ export default function InvestOption({ approveData, claim, optionIndex }: Invest
               />
               <b>{currencyAmount?.currency?.symbol}</b>
             </label>
-            <i>Receive: {formatSmartLocaleAware(vCowAmount, AMOUNT_PRECISION) || 0} vCOW</i>
+            <i title={vCowAmount && `${formatMax(vCowAmount, vCowAmount.currency.decimals)} vCOW`}>
+              Receive: {formatSmartLocaleAware(vCowAmount, AMOUNT_PRECISION) || 0} vCOW
+            </i>
             {/* Insufficient balance validation error */}
             {inputError && <small>{inputError}</small>}
             {inputWarning && <small className="warn">{inputWarning}</small>}

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 { 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 {
       </td>
 
       <td>
-        <i>{formatSmartLocaleAware(vCowAmount, AMOUNT_PRECISION) || '0'} vCOW</i>
+        <i title={`${formatMax(vCowAmount, vCowAmount?.currency.decimals)} vCOW`}>
+          {formatSmartLocaleAware(vCowAmount, AMOUNT_PRECISION) || '0'} vCOW
+        </i>
 
         {!isFree && (
           <span>
             <b>Investment amount:</b>{' '}
-            <i>
+            <i title={formattedCostMaxPrecision}>
               {formattedCost} {symbol}
             </i>
             <InvestAvailableBar percentage={Number(percentage?.toFixed(2))} />
@@ -65,13 +70,13 @@ export function InvestSummaryRow(props: Props): JSX.Element | null {
         {!isFree && (
           <span>
             <b>Price:</b>{' '}
-            <i>
+            <i title={formatMax(price)}>
               {formatSmartLocaleAware(price) || '0'} vCoW per {symbol}
             </i>
           </span>
         )}
         <span>
-          <b>Cost:</b> <i>{isFree ? 'Free!' : `${formattedCost} ${symbol}`}</i>
+          <b>Cost:</b> <i title={formattedCostMaxPrecision}>{isFree ? 'Free!' : `${formattedCost} ${symbol}`}</i>
         </span>
         <span>
           <b>Vesting:</b>