truncate and format large numbers (#1518)

* truncate and format large numbers

* update truncation shorthand

* update logic for detecting small amount

src/components/CurrencyInputPanel/index.tsx

@@ -18,6 +18,7 @@ import useTheme from '../../hooks/useTheme'
 import { Lock } from 'react-feather'
 import { AutoColumn } from 'components/Column'
 import { FiatValue } from './FiatValue'
+import { formatTokenAmount } from 'utils/formatTokenAmount'
 
 const InputPanel = styled.div<{ hideInput?: boolean }>`
   ${({ theme }) => theme.flexColumnNoWrap}
@@ -134,11 +135,7 @@ const StyledBalanceMax = styled.button<{ disabled?: boolean }>`
   pointer-events: ${({ disabled }) => (!disabled ? 'initial' : 'none')};
   margin-left: 0.25rem;
 
-  :hover {
-    /* border: 1px solid ${({ theme }) => theme.primary1}; */
-  }
   :focus {
-    /* border: 1px solid ${({ theme }) => theme.primary1}; */
     outline: none;
   }
 
@@ -273,7 +270,7 @@ export default function CurrencyInputPanel({
                   >
                     {!hideBalance && !!currency && selectedCurrencyBalance
                       ? (customBalanceText ?? 'Balance: ') +
-                        selectedCurrencyBalance?.toSignificant(4) +
+                        formatTokenAmount(selectedCurrencyBalance, 4) +
                         ' ' +
                         currency.symbol
                       : '-'}
@@ -285,7 +282,6 @@ export default function CurrencyInputPanel({
               ) : (
                 '-'
               )}
-
               <FiatValue fiatValue={fiatValue} priceImpact={priceImpact} />
             </RowBetween>
           </FiatRow>

src/components/vote/DelegateModal.tsx

@@ -15,6 +15,7 @@ import { useDelegateCallback } from '../../state/governance/hooks'
 import { useTokenBalance } from '../../state/wallet/hooks'
 import { UNI } from '../../constants'
 import { LoadingView, SubmittedView } from '../ModalViews'
+import { formatTokenAmount } from 'utils/formatTokenAmount'
 
 const ContentWrapper = styled(AutoColumn)`
   width: 100%;
@@ -116,7 +117,7 @@ export default function DelegateModal({ isOpen, onDismiss, title }: VoteModalPro
         <LoadingView onDismiss={wrappedOndismiss}>
           <AutoColumn gap="12px" justify={'center'}>
             <TYPE.largeHeader>{usingDelegate ? 'Delegating votes' : 'Unlocking Votes'}</TYPE.largeHeader>
-            <TYPE.main fontSize={36}>{uniBalance?.toSignificant(4)}</TYPE.main>
+            <TYPE.main fontSize={36}> {formatTokenAmount(uniBalance, 4)}</TYPE.main>
           </AutoColumn>
         </LoadingView>
       )}
@@ -124,7 +125,7 @@ export default function DelegateModal({ isOpen, onDismiss, title }: VoteModalPro
         <SubmittedView onDismiss={wrappedOndismiss} hash={hash}>
           <AutoColumn gap="12px" justify={'center'}>
             <TYPE.largeHeader>Transaction Submitted</TYPE.largeHeader>
-            <TYPE.main fontSize={36}>{uniBalance?.toSignificant(4)}</TYPE.main>
+            <TYPE.main fontSize={36}>{formatTokenAmount(uniBalance, 4)}</TYPE.main>
           </AutoColumn>
         </SubmittedView>
       )}

src/components/vote/VoteModal.tsx

@@ -12,6 +12,7 @@ import Circle from '../../assets/images/blue-loader.svg'
 import { useVoteCallback, useUserVotes } from '../../state/governance/hooks'
 import { getEtherscanLink } from '../../utils'
 import { ExternalLink } from '../../theme/components'
+import { formatTokenAmount } from 'utils/formatTokenAmount'
 import { CurrencyAmount, Token } from '@uniswap/sdk-core'
 
 const ContentWrapper = styled(AutoColumn)`
@@ -92,7 +93,7 @@ export default function VoteModal({ isOpen, onDismiss, proposalId, support }: Vo
               } proposal ${proposalId}`}</TYPE.mediumHeader>
               <StyledClosed stroke="black" onClick={wrappedOndismiss} />
             </RowBetween>
-            <TYPE.largeHeader>{availableVotes?.toSignificant(4)} Votes</TYPE.largeHeader>
+            <TYPE.largeHeader>{formatTokenAmount(availableVotes, 4)} Votes</TYPE.largeHeader>
             <ButtonPrimary onClick={onVote}>
               <TYPE.mediumHeader color="white">{`Vote ${
                 support ? 'for ' : 'against'

src/utils/formatTokenAmount.ts

-import { Price, CurrencyAmount, Currency } from '@uniswap/sdk-core'
+import { Price, CurrencyAmount, Currency, Fraction } from '@uniswap/sdk-core'
 import JSBI from 'jsbi'
 
 export function formatTokenAmount(amount: CurrencyAmount<Currency> | undefined, sigFigs: number) {
@@ -10,11 +10,11 @@ export function formatTokenAmount(amount: CurrencyAmount<Currency> | undefined,
     return '0'
   }
 
-  if (parseFloat(amount.toFixed(Math.min(sigFigs, amount.currency.decimals))) < 0.0001) {
-    return '<0.0001'
+  if (amount.divide(amount.decimalScale).lessThan(new Fraction(1, 100000))) {
+    return '<0.000001'
   }
 
-  return amount.toFixed(Math.min(sigFigs, amount.currency.decimals))
+  return amount.toSignificant(Math.min(sigFigs, amount.currency.decimals))
 }
 
 export function formatPrice(price: Price<Currency, Currency> | undefined, sigFigs: number) {