Add component for display counter value of specific coin/unit

src/components/CounterValue/index.js

@@ -0,0 +1,54 @@
+// @flow
+
+import React, { PureComponent } from 'react'
+import { connect } from 'react-redux'
+import moment from 'moment'
+
+import isNaN from 'lodash/isNaN'
+
+import type { Unit } from '@ledgerhq/currencies'
+
+import { getCounterValue } from 'reducers/settings'
+
+import FormattedVal from 'components/base/FormattedVal'
+
+const mapStateToProps = state => ({
+  counterValue: getCounterValue(state),
+  counterValues: state.counterValues,
+})
+
+type Props = {
+  formatValue: boolean,
+  counterValue: string,
+  counterValues: Object,
+  time?: Date | string | number,
+  unit: Unit,
+  value: number,
+}
+
+export class CounterValue extends PureComponent<Props> {
+  static defaultProps = {
+    formatValue: true,
+    value: 0,
+    time: undefined,
+  }
+
+  render() {
+    const { formatValue, value, unit, counterValue, counterValues, time, ...props } = this.props
+
+    const cValues = counterValues[`${unit.code}-${counterValue}`]
+
+    const v = isNaN(Number(value))
+      ? 0
+      : (time ? cValues.byDate[moment(time).format('YYYY-MM-DD')] : cValues.list[0][1]) *
+        (value / 10 ** unit.magnitude)
+
+    return formatValue ? (
+      <FormattedVal val={v} fiat={counterValue} showCode alwaysShowSign {...props} />
+    ) : (
+      v
+    )
+  }
+}
+
+export default connect(mapStateToProps)(CounterValue)

src/components/CounterValue/stories.js

@@ -0,0 +1,32 @@
+// @flow
+
+import React from 'react'
+import { getDefaultUnitByCoinType } from '@ledgerhq/currencies'
+import { storiesOf } from '@storybook/react'
+import { boolean, text } from '@storybook/addon-knobs'
+
+import { CounterValue } from 'components/CounterValue'
+
+const stories = storiesOf('Components', module)
+
+const unit = getDefaultUnitByCoinType(0)
+
+const counterValue = 'USD'
+const counterValues = {
+  'BTC-USD': {
+    byDate: {
+      '2018-01-09': 10000,
+    },
+    list: [['2018-01-09', 10000]],
+  },
+}
+
+stories.add('CounterValue', () => (
+  <CounterValue
+    counterValue={counterValue}
+    counterValues={counterValues}
+    unit={unit}
+    formatValue={boolean('formatValue', true)}
+    value={Number(text('value', '100000000'))}
+  />
+))

src/components/OperationsList/index.js

@@ -7,9 +7,7 @@ import { connect } from 'react-redux'
 import { compose } from 'redux'
 import { translate } from 'react-i18next'
 import { getIconByCoinType } from '@ledgerhq/currencies/react'
-import { getDefaultUnitByCoinType } from '@ledgerhq/currencies'
 
-import get from 'lodash/get'
 import noop from 'lodash/noop'
 import isEqual from 'lodash/isEqual'
 
@@ -17,15 +15,16 @@ import type { Account, Operation as OperationType, T } from 'types/common'
 
 import { MODAL_OPERATION_DETAILS } from 'constants'
 
-import { getCounterValue } from 'reducers/settings'
 import { openModal } from 'reducers/modals'
 
 import IconAngleDown from 'icons/AngleDown'
 
 import Box, { Card } from 'components/base/Box'
+import CounterValue from 'components/CounterValue'
 import Defer from 'components/base/Defer'
 import FormattedVal from 'components/base/FormattedVal'
 import Text from 'components/base/Text'
+
 import ConfirmationCheck from './ConfirmationCheck'
 
 const DATE_COL_SIZE = 100
@@ -114,8 +113,6 @@ const Address = ({ value }: { value: string }) => {
 
 const Operation = ({
   account,
-  counterValue,
-  counterValues,
   minConfirmations,
   onAccountClick,
   onOperationClick,
@@ -124,8 +121,6 @@ const Operation = ({
   withAccount,
 }: {
   account: Account,
-  counterValue: string,
-  counterValues: Object | null,
   minConfirmations: number,
   onAccountClick: Function,
   onOperationClick: Function,
@@ -137,16 +132,9 @@ const Operation = ({
   const time = moment(tx.receivedAt)
   const Icon = getIconByCoinType(account.currency.coinType)
   const type = tx.amount > 0 ? 'from' : 'to'
-  const cValue = counterValues
-    ? counterValues[time.format('YYYY-MM-DD')] * (tx.amount / 10 ** unit.magnitude)
-    : null
 
   return (
-    <OperationRaw
+    <OperationRaw onClick={() => onOperationClick({ operation: tx, account, type })}>
-      onClick={() =>
-        onOperationClick({ operation: tx, account, type, counterValue: cValue, fiat: counterValue })
-      }
-    >
       <Cell size={CONFIRMATION_COL_SIZE} align="center" justify="flex-start">
         <ConfirmationCheck
           type={type}
@@ -200,16 +188,7 @@ const Operation = ({
             alwaysShowSign
             color={tx.amount < 0 ? 'smoke' : 'positiveGreen'}
           />
-          {cValue && (
+          <CounterValue color="grey" fontSize={3} time={time} unit={unit} value={tx.amount} />
-            <FormattedVal
-              val={cValue}
-              fiat={counterValue}
-              showCode
-              fontSize={3}
-              alwaysShowSign
-              color="grey"
-            />
-          )}
         </Box>
       </Cell>
     </OperationRaw>
@@ -222,11 +201,6 @@ Operation.defaultProps = {
   withAccount: false,
 }
 
-const mapStateToProps = state => ({
-  counterValue: getCounterValue(state),
-  counterValues: state.counterValues,
-})
-
 const mapDispatchToProps = {
   openModal,
 }
@@ -234,8 +208,6 @@ const mapDispatchToProps = {
 type Props = {
   account: Account,
   canShowMore: boolean,
-  counterValue: string,
-  counterValues: Object,
   onAccountClick?: Function,
   openModal: Function,
   operations: OperationType[],
@@ -279,17 +251,7 @@ export class OperationsList extends Component<Props> {
   _hashCache = null
 
   render() {
-    const {
+    const { account, canShowMore, onAccountClick, operations, t, title, withAccount } = this.props
-      account,
-      canShowMore,
-      counterValue,
-      counterValues,
-      onAccountClick,
-      operations,
-      t,
-      title,
-      withAccount,
-    } = this.props
 
     this._hashCache = this.getHashCache(operations)
 
@@ -300,14 +262,9 @@ export class OperationsList extends Component<Props> {
             <Box>
               {operations.map(tx => {
                 const acc = account || tx.account
-                const unit = getDefaultUnitByCoinType(acc.coinType)
-                const cValues = get(counterValues, `${unit.code}-${counterValue}.byDate`, null)
-
                 return (
                   <Operation
                     account={acc}
-                    counterValue={counterValue}
-                    counterValues={cValues}
                     key={`${tx.id}${acc ? `-${acc.id}` : ''}`}
                     minConfirmations={acc.settings.minConfirmations}
                     onAccountClick={onAccountClick}
@@ -332,4 +289,4 @@ export class OperationsList extends Component<Props> {
   }
 }
 
-export default compose(translate(), connect(mapStateToProps, mapDispatchToProps))(OperationsList)
+export default compose(translate(), connect(null, mapDispatchToProps))(OperationsList)

src/components/modals/OperationDetails.js

@@ -15,6 +15,8 @@ import Button from 'components/base/Button'
 import Bar from 'components/base/Bar'
 import FormattedVal from 'components/base/FormattedVal'
 import Modal, { ModalBody, ModalTitle, ModalFooter, ModalContent } from 'components/base/Modal'
+
+import CounterValue from 'components/CounterValue'
 import ConfirmationCheck from 'components/OperationsList/ConfirmationCheck'
 
 const Line = styled(Box).attrs({
@@ -50,7 +52,7 @@ const OperationDetails = ({ t }: { t: T }) => (
   <Modal
     name={MODAL_OPERATION_DETAILS}
     render={({ data, onClose }) => {
-      const { operation, account, type, counterValue, fiat } = data
+      const { operation, account, type } = data
 
       const { name, unit, settings: { minConfirmations } } = account
       const { id, amount, confirmations, receivedAt, from, to } = operation
@@ -84,14 +86,13 @@ const OperationDetails = ({ t }: { t: T }) => (
                   />
                 </Box>
                 <Box mt={1}>
-                  <FormattedVal
+                  <CounterValue
-                    val={counterValue}
-                    fiat={fiat}
-                    showCode
-                    fontSize={5}
-                    alwaysShowSign
                     color="grey"
+                    fontSize={5}
                     style={{ lineHeight: 1 }}
+                    time={receivedAt}
+                    unit={unit}
+                    value={amount}
                   />
                 </Box>
               </Box>
@@ -120,12 +121,28 @@ const OperationDetails = ({ t }: { t: T }) => (
             <B />
             <Line>
               <ColLeft>From</ColLeft>
-              <ColRight>{from.map(v => <CanSelect key={v}>{v}</CanSelect>)}</ColRight>
+              <ColRight>
+                {from.map((v, i) => (
+                  <CanSelect
+                    key={i} // eslint-disable-line react/no-array-index-key
+                  >
+                    {v}
+                  </CanSelect>
+                ))}
+              </ColRight>
             </Line>
             <B />
             <Line>
               <ColLeft>To</ColLeft>
-              <ColRight>{to.map(v => <CanSelect key={v}>{v}</CanSelect>)}</ColRight>
+              <ColRight>
+                {to.map((v, i) => (
+                  <CanSelect
+                    key={i} // eslint-disable-line react/no-array-index-key
+                  >
+                    {v}
+                  </CanSelect>
+                ))}
+              </ColRight>
             </Line>
             <B />
             <Line>