Tokens: Replace formatBalance for formatTokenAmount (#1158)

aragon · Jun 15, 2020 · a32a130 · a32a130
1 parent 4346806
commit a32a130
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 67 deletions.
diff --git a/apps/token-manager/app/src/components/InfoBoxes.js b/apps/token-manager/app/src/components/InfoBoxes.js
@@ -1,7 +1,14 @@
 import React, { useMemo } from 'react'
 import { useConnectedAccount, useNetwork } from '@aragon/api-react'
-import { Box, Distribution, GU, TokenBadge, useTheme } from '@aragon/ui'
-import { formatBalance, stakesPercentages } from '../utils'
+import {
+  Box,
+  Distribution,
+  formatTokenAmount,
+  GU,
+  TokenBadge,
+  useTheme,
+} from '@aragon/ui'
+import { stakesPercentages } from '../utils'
 import { addressesEqual } from '../web3-utils'
 import LocalIdentityBadge from './LocalIdentityBadge/LocalIdentityBadge'
 import You from './You'
@@ -32,7 +39,7 @@ function transferableLabel(transfersEnabled) {
 function InfoBoxes({
   holders,
   tokenAddress,
-  tokenDecimalsBase,
+  tokenDecimals,
   tokenName,
   tokenSupply,
   tokenSymbol,
@@ -54,7 +61,7 @@ function InfoBoxes({
           {[
             [
               'Total supply',
-              <strong>{formatBalance(tokenSupply, tokenDecimalsBase)}</strong>,
+              <strong>{formatTokenAmount(tokenSupply, tokenDecimals)}</strong>,
             ],
             [
               'Transferable',

diff --git a/apps/token-manager/app/src/components/UpdateTokenPanel/UpdateTokenPanel.js b/apps/token-manager/app/src/components/UpdateTokenPanel/UpdateTokenPanel.js
@@ -4,18 +4,14 @@ import BN from 'bn.js'
 import {
   Button,
   Field,
+  formatTokenAmount,
   GU,
   Info,
   SidePanel,
   useSidePanelFocusOnReady,
 } from '@aragon/ui'
 import { isAddress } from '../../web3-utils'
-import {
-  fromDecimals,
-  toDecimals,
-  formatBalance,
-  splitDecimalNumber,
-} from '../../utils'
+import { fromDecimals, toDecimals, splitDecimalNumber } from '../../utils'
 import LocalIdentitiesAutoComplete from '../LocalIdentitiesAutoComplete/LocalIdentitiesAutoComplete'
 import AmountInput from '../AmountInput'
 
@@ -105,11 +101,7 @@ function usePanelForm({
     value => {
       const maxAmount = getMaxAmountFromBalance(getHolderBalance(value.trim()))
 
-      const maxAmountLabel = formatBalance(
-        maxAmount,
-        tokenDecimalsBase,
-        tokenDecimals
-      )
+      const maxAmountLabel = formatTokenAmount(maxAmount, tokenDecimals)
 
       setHolderField(holderField => ({
         ...holderField,
@@ -125,7 +117,7 @@ function usePanelForm({
 
       setAmountField(amountField => ({
         ...amountField,
-        max: formatBalance(maxAmount, tokenDecimalsBase, tokenDecimals),
+        max: formatTokenAmount(maxAmount, tokenDecimals),
       }))
     },
     [
@@ -178,11 +170,9 @@ function usePanelForm({
             } an amount that is greater than the
              maximum amount of tokens that can be ${
                mode === 'assign' ? 'assigned' : 'removed'
-             } (${formatBalance(
-              maxAmount,
-              tokenDecimalsBase,
-              tokenDecimals
-            )} ${tokenSymbol}).`
+             } (${formatTokenAmount(maxAmount, tokenDecimals, {
+              symbol: tokenSymbol,
+            })} ).`
           : null,
       }))
     },
@@ -336,8 +326,6 @@ function TokenPanelContent({
       >
         <AmountInput
           ref={holderAddress ? amountInputRef : undefined}
-          max={amountField.max}
-          min={tokenStep}
           onChange={handleAmountChange}
           onMaxClick={() => updateAmount(amountField.max)}
           step={tokenStep}

diff --git a/apps/token-manager/app/src/screens/Holders.js b/apps/token-manager/app/src/screens/Holders.js
@@ -130,7 +130,7 @@ function Holders({
         <InfoBoxes
           holders={holders}
           tokenAddress={tokenAddress}
-          tokenDecimalsBase={tokenDecimalsBase}
+          tokenDecimals={tokenDecimals}
           tokenName={tokenName}
           tokenSupply={tokenSupply}
           tokenSymbol={tokenSymbol}

diff --git a/apps/token-manager/app/src/utils.js b/apps/token-manager/app/src/utils.js
@@ -74,29 +74,6 @@ export function toDecimals(num, decimals, { truncate = true } = {}) {
   return wholeWithBase
 }
 
-/**
- * Format the balance to a fixed number of decimals
- *
- * @param {BN} amount the total amount
- * @param {BN} base the decimals base
- * @param {number} precision number of decimals to format
- * @return {string} formatted balance
- */
-export function formatBalance(amount, base, precision = 2) {
-  const baseLength = base.toString().length
-
-  const whole = amount.div(base).toString()
-  let fraction = amount.mod(base).toString()
-  const zeros = '0'.repeat(Math.max(0, baseLength - fraction.length - 1))
-  fraction = `${zeros}${fraction}`.replace(/0+$/, '').slice(0, precision)
-
-  if (fraction === '' || parseInt(fraction, 10) === 0) {
-    return whole
-  }
-
-  return `${whole}.${fraction}`
-}
-
 /**
  * Calculates and returns stakes as percentages, adding a “rest” percentage for
  * values that are not included.

diff --git a/apps/token-manager/app/src/utils.test.js b/apps/token-manager/app/src/utils.test.js
@@ -1,10 +1,5 @@
 import BN from 'bn.js'
-import {
-  formatBalance,
-  fromDecimals,
-  stakesPercentages,
-  toDecimals,
-} from './utils'
+import { fromDecimals, stakesPercentages, toDecimals } from './utils'
 
 const bn = v => new BN(v)
 
@@ -119,20 +114,6 @@ describe('toDecimals', () => {
   })
 })
 
-describe('formatBalance', () => {
-  test('Should not display the decimals if they are 0', () => {
-    expect(formatBalance(bn(3000), bn(1000))).toBe('3')
-  })
-  test('Should display decimals correctly', () => {
-    expect(formatBalance(bn(3001), bn(1000), 3)).toBe('3.001')
-    expect(formatBalance(bn(3010), bn(1000), 3)).toBe('3.01')
-  })
-  test('Should adapt based on the precision', () => {
-    expect(formatBalance(bn(3001), bn(1000), 1)).toBe('3')
-    expect(formatBalance(bn(3101), bn(1000), 1)).toBe('3.1')
-  })
-})
-
 describe('stakePercentages()', () => {
   const totalPercentage = stakes =>
     stakes.reduce((total, stake) => total + stake.percentage, 0)