Agent: use formatTokenAmount() and add rounding tooltip (#1148)

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

Hide file tree

Showing 9 changed files with 225 additions and 179 deletions.
diff --git a/apps/agent/app/package.json b/apps/agent/app/package.json
@@ -7,7 +7,7 @@
     "@aragon/api": "^2.0.0-beta.9",
     "@aragon/api-react": "^2.0.0-beta.9",
     "@aragon/templates-tokens": "^1.2.0",
-    "@aragon/ui": "^1.3.0",
+    "@aragon/ui": "^1.4.0",
     "@babel/polyfill": "^7.8.3",
     "date-fns": "2.0.0-alpha.22",
     "file-saver": "^2.0.2",

diff --git a/apps/agent/app/src/app-state-reducer.js b/apps/agent/app/src/app-state-reducer.js
@@ -22,36 +22,29 @@ function appStateReducer(state) {
       ...balance,
       amount: new BN(balance.amount),
       decimals: new BN(balance.decimals),
-
-      // Note that numbers in `numData` are not safe for accurate
-      // computations (but are useful for making divisions easier).
-      numData: {
-        amount: parseInt(balance.amount, 10),
-        decimals: parseInt(balance.decimals, 10),
-      },
     }))
     .sort(compareBalancesByEthAndSymbol)
 
   const transactionsBn = transactions.map(transaction => ({
     ...transaction,
-    onlyOne: transaction.tokenTransfers.length === 1,
     isIncoming: transaction.tokenTransfers.some(({ from }) => !!from),
     isOutgoing: transaction.tokenTransfers.some(({ to }) => !!to),
+    tokenTransfers: transaction.tokenTransfers.map(transfer => ({
+      ...transfer,
+      amount: new BN(transfer.amount),
+    })),
   }))
 
   return {
     ...state,
 
-    tokens: balancesBn.map(
-      ({ address, name, symbol, numData: { amount, decimals }, verified }) => ({
-        address,
-        amount,
-        decimals,
-        name,
-        symbol,
-        verified,
-      })
-    ),
+    tokens: balancesBn.map(({ address, decimals, name, symbol, verified }) => ({
+      address,
+      decimals: decimals.toNumber(),
+      name,
+      symbol,
+      verified,
+    })),
 
     // Filter out empty balances
     balances: balancesBn.filter(balance => !balance.amount.isZero()),

diff --git a/apps/agent/app/src/components/BalanceToken.js b/apps/agent/app/src/components/BalanceToken.js
@@ -1,31 +1,37 @@
 import React from 'react'
-import { textStyle, useTheme } from '@aragon/ui'
+import PropTypes from 'prop-types'
+import BN from 'bn.js'
+import { GU, Help, formatTokenAmount, textStyle, useTheme } from '@aragon/ui'
 import { useNetwork } from '@aragon/api-react'
 import { tokenIconUrl } from '../lib/icon-utils'
-import { formatTokenAmount } from '../lib/utils'
-
 function BalanceToken({
-  address = '',
+  address,
   amount,
+  compact,
+  convertedAmount,
+  decimals,
   symbol,
   verified,
-  convertedAmount = -1,
 }) {
   const theme = useTheme()
   const network = useNetwork()
+  const amountFormatted = formatTokenAmount(amount, decimals, {
+    digits: decimals,
+  })
+  const amountFormattedRounded = formatTokenAmount(amount, decimals, {
+    digits: 3,
+  })
+  const amountWasRounded = amountFormatted !== amountFormattedRounded
   return (
-    <React.Fragment>
+    <div css="display: inline-block">
       <div
         title={symbol || 'Unknown symbol'}
         css={`
           display: flex;
           align-items: center;
-          text-transform: uppercase;
-          img {
-            margin-right: 10px;
-          }
           color: ${theme.surfaceContentSecondary};
           ${textStyle('body2')}
+          text-transform: uppercase;
         `}
       >
         {verified && address && (
@@ -34,6 +40,9 @@ function BalanceToken({
             width="20"
             height="20"
             src={tokenIconUrl(address, symbol, network && network.type)}
+            css={`
+              margin-right: ${0.75 * GU}px;
+            `}
           />
         )}
         {symbol || '?'}
@@ -42,33 +51,69 @@ function BalanceToken({
         <div
           css={`
             ${textStyle('title2')}
+            margin: ${(compact ? 1 : 1.5) * GU}px 0;
+            display: flex;
           `}
         >
-          <SplitAmount amount={amount.toFixed(3)} />
+          {amountWasRounded && '~'}
+          <SplitAmount amountFormatted={amountFormattedRounded} />
+          {amountWasRounded && (
+            <div
+              css={`
+                display: flex;
+                align-items: center;
+                margin-left: ${1 * GU}px;
+              `}
+            >
+              <Help hint="This is an approximation, see the complete amount">
+                Total: {amountFormatted} {symbol}
+              </Help>
+            </div>
+          )}
         </div>
         <div
           css={`
             color: ${theme.surfaceContentSecondary};
             ${textStyle('body2')}
           `}
         >
-          {convertedAmount >= 0
-            ? `$${formatTokenAmount(convertedAmount.toFixed(2))}`
-            : '−'}
+          {convertedAmount.isNeg()
+            ? '−'
+            : `$${formatTokenAmount(convertedAmount, decimals)}`}
         </div>
       </div>
-    </React.Fragment>
+    </div>
   )
 }
 
-function SplitAmount({ amount }) {
-  const [integer, fractional] = formatTokenAmount(amount).split('.')
+BalanceToken.defaultProps = {
+  convertedAmount: new BN(-1),
+}
+
+BalanceToken.propTypes = {
+  address: PropTypes.string.isRequired,
+  amount: PropTypes.instanceOf(BN).isRequired,
+  compact: PropTypes.bool.isRequired,
+  convertedAmount: PropTypes.instanceOf(BN),
+  decimals: PropTypes.instanceOf(BN).isRequired,
+  symbol: PropTypes.string.isRequired,
+  verified: PropTypes.bool.isRequired,
+}
+function SplitAmount({ amountFormatted }) {
+  const [integer, fractional] = amountFormatted.split('.')
   return (
     <span>
       <span>{integer}</span>
-      {fractional && <span css="font-size: 14px;">.{fractional}</span>}
+      {fractional && (
+        <span
+          css={`
+            ${textStyle('body3')}
+          `}
+        >
+          .{fractional}
+        </span>
+      )}
     </span>
   )
 }
-
 export default BalanceToken