Added full amounts on hover for all claims values (#2282)

* Added full amounts on hover for all claims values * Storing raw vCow amount rather than the formatted amount * Displaying the max amount on hover also on success view Co-authored-by: Leandro <[email protected]>
gnosis · Jan 25, 2022 · d1fbb50 · d1fbb50
1 parent 3bcd42f
commit d1fbb50
Show file tree

Hide file tree

Showing 6 changed files with 51 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 { 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/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 (
     <ConfirmOrLoadingWrapper activeBG={true}>
       <ConfirmedIcon>
@@ -45,15 +53,19 @@ export default function ClaimingStatus() {
         )}
       </ConfirmedIcon>
       <h3>{isConfirmed ? 'Claimed!' : 'Claiming'}</h3>
-      {!isConfirmed && <Trans>{claimedAmount} vCOW</Trans>}
+      {!isConfirmed && (
+        <Trans>
+          <span title={formattedMaxVCowAmount && `${formattedMaxVCowAmount} vCOW`}>{formattedVCowAmount} vCOW</span>
+        </Trans>
+      )}
 
       {isConfirmed && (
         <>
           <Trans>
             <h3>You have successfully claimed</h3>
           </Trans>
           <Trans>
-            <p>{claimedAmount} vCOW</p>
+            <p title={formattedMaxVCowAmount && `${formattedMaxVCowAmount} vCOW`}>{formattedVCowAmount} 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 { 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
@@ -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
         <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>
 
@@ -320,7 +320,7 @@ export default function InvestOption({ claim, optionIndex, openModal, closeModal
                 )}
               </ButtonConfirmed>
             )}
-            {/* 
+            {/*
               // CURRENTLY TEST ONLY
               approveState === ApprovalState.APPROVED && (
                 <UnderlineButton disabled={approving || isPendingApproval} onClick={handleRevokeApproval}>
@@ -343,8 +343,8 @@ export default function InvestOption({ claim, optionIndex, openModal, closeModal
             <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 && (
@@ -363,7 +363,9 @@ export default function InvestOption({ claim, optionIndex, openModal, closeModal
               />
               <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>

diff --git 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]