Currency rework

app/App/Account/Account/Balances/Balance/index.js

@@ -1,13 +1,14 @@
 import React from 'react'
 import Restore from 'react-restore'
 
+import { DisplayFiatPrice, DisplayValue } from '../../../../../../resources/Components/DisplayValue'
 import RingIcon from '../../../../../../resources/Components/RingIcon'
 
-import svg from '../../../../../../resources/svg'
 class Balance extends React.Component {
   render () {
     const { symbol, balance, i, scanning, chainId } = this.props
-    const change = parseFloat(balance.priceChange)
+    const { priceChange, decimals, balance: balanceValue, usdRate: currencyRate, logoURI, price, displayBalance = '0' } = balance
+    const change = parseFloat(priceChange)
     const direction = change < 0 ? -1 : change > 0 ? 1 : 0
     let priceChangeClass = 'signerBalanceCurrentPriceChange'
     if (direction !== 0) {
@@ -20,14 +21,14 @@ class Balance extends React.Component {
     let name = balance.name
     if (name.length > 19) name = name.substr(0, 17) + '..'
 
-    const priceChange = () => {
-      if (!balance.priceChange) {
+    const displayPriceChange = () => {
+      if (!priceChange) {
         return ''
       }
-      return `(${direction === 1 ? '+' : ''}${balance.priceChange}%)`
+      return `(${direction === 1 ? '+' : ''}${priceChange}%)`
     }
     const chain = this.store('main.networks.ethereum', chainId)
-    const chainName = chain ? chain.name : ''
+    const { name: chainName = '', isTestnet = false } = chain
     const chainColor = this.store('main.networksMeta.ethereum', chainId, 'primaryColor')
 
     return (
@@ -36,7 +37,7 @@ class Balance extends React.Component {
         <div className='signerBalanceInner' style={{ opacity: !scanning ? 1 : 0 }}>
           <div className='signerBalanceIcon'>
             <RingIcon 
-              img={symbol.toUpperCase() !== 'ETH' && balance.logoURI}
+              img={symbol.toUpperCase() !== 'ETH' && logoURI}
               alt={symbol.toUpperCase()}
               color={chainColor ? `var(--${chainColor})` : ''}
             />
@@ -50,30 +51,24 @@ class Balance extends React.Component {
           <div className='signerBalanceCurrency'>
             {name}
           </div>
-          <div className='signerBalanceValue' style={(balance.displayBalance || '0').length >= 12 ? { fontSize: '15px', top: '10px' } : {}}>
-            <span 
-              className='signerBalanceSymbol'
-            >
-              {symbol}
-            </span>
-            <span
-              style={(balance.displayBalance || '0').length >= 12 ? { marginTop: '-3px' } : {}}
-            >
-              {balance.displayBalance}
-            </span>
+          <div className='signerBalanceValue'>
+            <DisplayValue 
+              type='ether' 
+              value={balanceValue} 
+              valueDataParams={{ decimals }} 
+              currencySymbol={symbol}
+            />
           </div>
           <div className='signerBalancePrice'>
             <div className='signerBalanceOk'>
               <span className='signerBalanceCurrentPrice'>
-                {svg.usd(10)}{balance.price}
+                <DisplayFiatPrice decimals={decimals} currencyRate={currencyRate} isTestnet={isTestnet} />
               </span>
               <span className={priceChangeClass}>
-                <span>{priceChange()}</span>
+                <span>{displayPriceChange()}</span>
               </span>
             </div>
-            <div className='signerBalanceCurrentValue'>
-              {svg.usd(10)}{balance.displayValue}
-            </div>
+            <DisplayValue type='fiat' value={balanceValue} valueDataParams={{ decimals, currencyRate, isTestnet }} currencySymbol='$' displayDecimals={false} />
           </div>
         </div>
       </div>

app/App/Account/Account/Balances/BalancesPreview/index.js

@@ -76,13 +76,13 @@ class BalancesPreview extends React.Component {
     const { balances: allBalances, totalDisplayValue, totalValue } = this.getBalances(storedBalances, rates)
 
     // if filter only show balances that match filter
-    const filteredBlanaces = allBalances.filter(balance => {
+    const filteredBalances = allBalances.filter(balance => {
       const { filter = ''} =  this.props
       const chainName = this.store('main.networks.ethereum', balance.chainId, 'name')
       return matchFilter(filter, [chainName, balance.name, balance.symbol])
     })
 
-    const balances = filteredBlanaces.slice(0, 4)
+    const balances = filteredBalances.slice(0, 4)
 
     const lastBalanceUpdate = this.store('main.accounts', address, 'balances.lastUpdated')
 

app/App/Account/Account/Balances/style/index.styl

@@ -220,9 +220,9 @@
   .signerBalanceCurrency
     position absolute
     left 62px
-    top 25px
+    top 26px
     right 135px
-    font-size 15px
+    font-size 14px
     display flex
     align-items center
     font-weight 400
@@ -339,25 +339,23 @@
   .signerBalanceValue
     position absolute
     right 12px
-    top 23px
-    font-size 19px
+    top 24px
+    font-size 16px
     text-align center
     display flex
     align-items center
     font-family 'FiraCode'
-    letter-spacing -1px
-    font-weight 250
+    font-weight 400
 
-    .signerBalanceSymbol
+    .displayValueSymbol
       font-family 'MainFont'
       font-weight 500
-      font-size 13px
+      font-size 0.75em
       line-height 13px
       position relative
-      top -0.5px
       letter-spacing 0.5px
       color var(--outerspace)
-      padding 3px 6px
+      padding 3px 4px
       border-radius 6px
 
   .signerBalanceEquivalent

app/App/Account/Account/Requests/TransactionRequest/TxAction/index.js

@@ -1,12 +1,13 @@
 import React from 'react'
 import Restore from 'react-restore'
-import svg from '../../../../../../../resources/svg'
-import link from '../../../../../../../resources/link'
 import BigNumber from 'bignumber.js'
 
+import svg from '../../../../../../../resources/svg'
+import link from '../../../../../../../resources/link'
 import { ClusterBox, Cluster, ClusterRow, ClusterValue } from '../../../../../../../resources/Components/Cluster'
 import { formatDisplayInteger, isUnlimited } from '../../../../../../../resources/utils/numbers'
-import {getAddress} from '../../../../../../../resources/utils'
+import { DisplayValue } from '../../../../../../../resources/Components/DisplayValue'
+import { getAddress } from '../../../../../../../resources/utils'
 
 class TxSending extends React.Component {
   constructor (...args) {
@@ -35,27 +36,26 @@ class TxSending extends React.Component {
         const { amount, decimals, name, recipient: recipientAddress, symbol, recipientType, recipientEns } = action.data || {}
         const address = getAddress(recipientAddress)
         const ensName = recipientEns
+
+        // const ensName = (recipientEns && recipientEns.length < 25) ? recipientEns : ''
         const value = new BigNumber(amount) 
         const displayValue = value.dividedBy('1e' + decimals).decimalPlaces(6).toFormat()
 
         const isTestnet = this.store('main.networks', this.props.chain.type, this.props.chain.id, 'isTestnet')    
         const rate = this.store('main.rates', contract)
-        const rateUSD = rate && rate.usd && !isTestnet ? rate.usd.price : 0
 
         return (
           <ClusterBox title={`Sending ${symbol}`} subtitle={name} animationSlot={this.props.i}>
             <Cluster>
               <ClusterRow>
                 <ClusterValue grow={2}>
                   <div className='txSendingValue'>
-                    <span className='txSendingValueSymbol'>{symbol}</span>
-                    <span className='txSendingValueAmount'>{displayValue}</span>
+                    <DisplayValue type='ether' value={amount} valueDataParams={{ decimals }} currencySymbol={symbol} />
                   </div>
                 </ClusterValue>
                 <ClusterValue>
                   <span className='_txMainTransferringEq'>{'≈'}</span>
-                  <span className='_txMainTransferringEqSymbol'>{'$'}</span>
-                  <span className='_txMainTransferringEqAmount'>{!rateUSD ? '?' : (displayValue * rateUSD).toFixed(2)}</span>
+                  <DisplayValue type='fiat' value={amount} valueDataParams={{ currencyRate: rate && rate.usd, isTestnet }} currencySymbol='$' />
                 </ClusterValue>
               </ClusterRow>
               {address && recipientType === 'contract' ? (
@@ -102,10 +102,9 @@ class TxSending extends React.Component {
         )
       } else if (actionType === 'approve') {
         const { amount, decimals, spender: recipientAddress, symbol, spenderEns } = action.data || {}
-        const address = getAddress(recipientAddress)
+        const address = recipientAddress
         const ensName = spenderEns
-        const value = new BigNumber(amount) 
-
+        const value = new BigNumber(amount)
         const revoke = value.eq(0)
         const displayAmount = isUnlimited(this.state.amount) ? 'unlimited' : formatDisplayInteger(amount, decimals)
 

app/App/Account/Account/Requests/TransactionRequest/TxFeeNew/index.js

@@ -2,38 +2,19 @@ import React from 'react'
 import Restore from 'react-restore'
 import BigNumber from 'bignumber.js'
 
-import { usesBaseFee, GasFeesSource } from '../../../../../../../resources/domain/transaction'
+import { DisplayValue } from '../../../../../../../resources/Components/DisplayValue'
+import { GasFeesSource, usesBaseFee } from '../../../../../../../resources/domain/transaction'
+import { displayValueData } from '../../../../../../../resources/utils/displayValue'
 import link from '../../../../../../../resources/link'
-
 import { ClusterBox, Cluster, ClusterRow, ClusterColumn, ClusterValue } from '../../../../../../../resources/Components/Cluster'
 
 const FEE_WARNING_THRESHOLD_USD = 50
 
-function toDisplayUSD (bn) {
-  const usd = bn.decimalPlaces(2, BigNumber.ROUND_FLOOR)
-  return usd.isZero() ? '< $0.01' : `$${usd.toFormat()}`
-}
-
-function toDisplayEther (bn) {
-  const ether = bn.shiftedBy(-18).decimalPlaces(6, BigNumber.ROUND_FLOOR)
-
-  return ether.isZero() ? '< 0.000001' : ether.toFormat()
-}
-
-function toDisplayGwei (bn) {
-  const gwei = bn.shiftedBy(-9).decimalPlaces(6, BigNumber.ROUND_FLOOR)
-
-  return gwei.isZero() ? '' : gwei.toFormat()
-}
-
-function toDisplayWei (bn) {
-  return bn.toFormat(0)
-}
-
 const GasDisplay = ({ maxFeePerGas }) => {
-  const gweiDisplayValue = toDisplayGwei(maxFeePerGas)
-  const displayValue = gweiDisplayValue || toDisplayWei(maxFeePerGas)
-  const displayLabel = !!gweiDisplayValue ? 'Gwei' : 'Wei'
+  const { displayValue: gweiDisplayValue } = maxFeePerGas.gwei()
+  const shouldDisplayWei = gweiDisplayValue === '0'
+  const displayValue = shouldDisplayWei ? maxFeePerGas.wei().displayValue : gweiDisplayValue
+  const displayLabel = shouldDisplayWei ? 'Wei' : 'Gwei'
 
   return (
     <div data-testid='gas-display' className='_txFeeGwei'>
@@ -43,31 +24,22 @@ const GasDisplay = ({ maxFeePerGas }) => {
   )
 }     
 
-const USDEstimateDisplay = ({ maxFeePerGas, maxGas, maxFeeUSD, nativeUSD, symbol }) => {
-  // accounts for two potential 12.5% block fee increases
-  const reduceFactor = BigNumber(9).dividedBy(8)
-  const minFeePerGas = maxFeePerGas.dividedBy(reduceFactor).dividedBy(reduceFactor)
-
-  // accounts for the 50% padding in the gas estimate in the provider
-  const minGas = maxGas.dividedBy(BigNumber(1.5))
-
-  const minFee = minFeePerGas.multipliedBy(minGas)
-  const minFeeUSD = minFee.shiftedBy(-18).multipliedBy(nativeUSD)
-  const displayMinFeeUSD = toDisplayUSD(minFeeUSD)
-  const displayMaxFeeUSD = toDisplayUSD(maxFeeUSD)
+const USDEstimateDisplay = ({ minFee, maxFee, nativeCurrency }) => {
+  const { value: maxFeeValue, approximationSymbol: maxFeeApproximation } = maxFee.fiat()
+  const displayMaxFeeWarning = maxFeeValue > FEE_WARNING_THRESHOLD_USD
 
   return <div data-testid='usd-estimate-display' className='clusterTag'>
-    <div className={maxFeeUSD.toNumber() > FEE_WARNING_THRESHOLD_USD ? '_txFeeValueDefault _txFeeValueDefaultWarn' : '_txFeeValueDefault'}>
+    <div className={`_txFeeValueDefault${displayMaxFeeWarning ? ' _txFeeValueDefaultWarn' : ''}`}>
       <span>{'≈'}</span>
-      {displayMaxFeeUSD === '< $0.01' ? 
-      <span>{displayMaxFeeUSD}</span> : 
-      <>      
-        <span>{displayMinFeeUSD}</span>
-        <span>{'-'}</span>
-        <span>{displayMaxFeeUSD}</span>
-      </>
+      {maxFeeApproximation === '<' ? 
+        <DisplayValue type='fiat' valueData={maxFee} currencySymbol='$' /> : 
+        <>      
+          <DisplayValue type='fiat' valueData={minFee} currencySymbol='$' />
+          <span>{'-'}</span>
+          <DisplayValue type='fiat' valueData={maxFee} currencySymbol='$' />
+        </>
       }
-      <span>{`in ${symbol}`}</span>
+      <span>{`in ${nativeCurrency.symbol}`}</span>
     </div>
   </div>
 }
@@ -79,52 +51,50 @@ class TxFee extends React.Component {
 
   render () {
     const req = this.props.req
-
     const chain = { 
       type: 'ethereum', 
       id: parseInt(req.data.chainId, 16)
     }
-
     const { isTestnet } = this.store('main.networks', chain.type, chain.id)
-    const {nativeCurrency, nativeCurrency: {symbol}} = this.store('main.networksMeta', chain.type, chain.id,)
-    const nativeUSD = nativeCurrency && nativeCurrency.usd && !isTestnet ? nativeCurrency.usd.price : 0
-
-    let maxFeePerGas, maxFee, maxFeeUSD
+    const { nativeCurrency } = this.store('main.networksMeta', chain.type, chain.id)
 
     const maxGas = BigNumber(req.data.gasLimit, 16)
+    const maxFeePerGas = BigNumber(req.data[usesBaseFee(req.data) ? 'maxFeePerGas' : 'gasPrice'])
+    const maxFee = displayValueData(
+      maxFeePerGas.multipliedBy(maxGas), 
+      { currencyRate: nativeCurrency.usd, isTestnet }
+    )
 
-    if (usesBaseFee(req.data)) {
-      maxFeePerGas = BigNumber(req.data.maxFeePerGas, 16)
-      maxFee = maxFeePerGas.multipliedBy(maxGas)
-      maxFeeUSD = maxFee.shiftedBy(-18).multipliedBy(nativeUSD)
-    } else {
-      maxFeePerGas = BigNumber(req.data.gasPrice, 16)
-      maxFee = maxFeePerGas.multipliedBy(maxGas)
-      maxFeeUSD = maxFee.shiftedBy(-18).multipliedBy(nativeUSD)
-    }
-
-    const displayEther = toDisplayEther(maxFee)
+    // accounts for two potential 12.5% block fee increases
+    const reduceFactor = BigNumber(9).dividedBy(8)
+    const minFeePerGas = maxFeePerGas.dividedBy(reduceFactor).dividedBy(reduceFactor)
 
+    // accounts for the 50% padding in the gas estimate in the provider
+    const minGas = maxGas.dividedBy(BigNumber(1.5))
+    const minFee = displayValueData(
+      minFeePerGas.multipliedBy(minGas), 
+      { currencyRate: nativeCurrency.usd, isTestnet }
+    )
+
     return (
-      <ClusterBox title={'fee'} animationSlot={this.props.i}>
+      <ClusterBox title='fee' animationSlot={this.props.i}>
         <Cluster>
           <ClusterRow>
             <ClusterColumn>
               <ClusterValue onClick={() => {
                 link.send('nav:update', 'panel', { data: { step: 'adjustFee' } })
               }}>
-                <GasDisplay maxFeePerGas={maxFeePerGas} />
+                <GasDisplay maxFeePerGas={displayValueData(maxFeePerGas)} />
               </ClusterValue>
             </ClusterColumn>
             <ClusterColumn grow={2}>
               <ClusterValue>
                 <div className='txSendingValue'>
-                  <span className='txSendingValueSymbol'>{symbol}</span>
-                  <span className='txSendingValueAmount'>{displayEther}</span>
+                  <DisplayValue type='ether' valueData={maxFee} currencySymbol={nativeCurrency.symbol} />
                 </div>
               </ClusterValue>
               <ClusterValue>
-                <USDEstimateDisplay maxFeePerGas={maxFeePerGas} maxGas={maxGas} maxFeeUSD={maxFeeUSD} nativeUSD={nativeUSD} symbol={symbol} />
+                <USDEstimateDisplay minFee={minFee} maxFee={maxFee} nativeCurrency={nativeCurrency} />
               </ClusterValue>
             </ClusterColumn>
           </ClusterRow>