✈️ Clean CounterValue & RequestAmount components. Add tests.

src/__mocks__/storybook-state.js

@@ -2,8 +2,13 @@ export default {
   counterValues: {
     BTC: {
       USD: {
-        '2018-01-09': 5000e3,
-        latest: 7000e2,
+        '2018-01-09': 0.00795978,
+        '2018-03-29': 0.007106619999999999,
+        '2018-03-30': 0.0068537599999999995,
+        '2018-03-31': 0.00694377,
+        '2018-04-01': 0.00683584,
+        '2018-04-02': 0.007061689999999999,
+        latest: 0.00706156,
       },
     },
   },

src/components/CounterValue/__tests__/CounterValue.test.js

@@ -1,7 +1,6 @@
 // @flow
 
 import React from 'react'
-import { getDefaultUnitByCoinType } from '@ledgerhq/currencies'
 
 import render from '__mocks__/render'
 import CounterValue from '..'
@@ -10,16 +9,14 @@ describe('components', () => {
   describe('CounterValue', () => {
     it('basic', () => {
       const state = { counterValues: { BTC: { USD: { latest: 10e2 } } } }
-      const unit = getDefaultUnitByCoinType(1)
-      const component = <CounterValue ticker="BTC" unit={unit} value={1} />
+      const component = <CounterValue ticker="BTC" value={1} />
       const tree = render(component, state)
       expect(tree).toMatchSnapshot()
     })
 
     it('specifying ticker different from default', () => {
       const state = { counterValues: { LOL: { USD: { latest: 5e2 } } } }
-      const unit = getDefaultUnitByCoinType(1)
-      const component = <CounterValue ticker="LOL" unit={unit} value={1} />
+      const component = <CounterValue ticker="LOL" value={1} />
       const tree = render(component, state)
       expect(tree).toMatchSnapshot()
     })
@@ -31,36 +28,31 @@ describe('components', () => {
           counterValue: 'EUR',
         },
       }
-      const unit = getDefaultUnitByCoinType(1)
-      const component = <CounterValue ticker="BTC" unit={unit} value={1} />
+      const component = <CounterValue ticker="BTC" value={1} />
       const tree = render(component, state)
       expect(tree).toMatchSnapshot()
     })
 
     it('without countervalues populated', () => {
       const state = { counterValues: {} }
-      const unit = getDefaultUnitByCoinType(1)
-      const component = <CounterValue ticker="BTC" unit={unit} value={1} />
+      const component = <CounterValue ticker="BTC" value={1} />
       const tree = render(component, state)
       expect(tree).toMatchSnapshot()
     })
 
     it('with time travel whith date in countervalues', () => {
       const state = { counterValues: { BTC: { USD: { '2018-01-01': 20e2 } } } }
-      const unit = getDefaultUnitByCoinType(1)
 
       const date = new Date('2018-01-01')
-      const component = <CounterValue ticker="BTC" unit={unit} value={1} date={date} />
+      const component = <CounterValue ticker="BTC" value={1} date={date} />
       const tree = render(component, state)
       expect(tree).toMatchSnapshot()
     })
 
     it('with time travel whith date not in countervalues', () => {
       const state = { counterValues: { BTC: { USD: { '2018-01-01': 20e2 } } } }
-      const unit = getDefaultUnitByCoinType(1)
-
       const date = new Date('2018-01-02')
-      const component = <CounterValue ticker="BTC" unit={unit} value={1} date={date} />
+      const component = <CounterValue ticker="BTC" value={1} date={date} />
       const tree = render(component, state)
 
       // TODO: actually it returns 0 when date is not in countervalues

src/components/CounterValue/index.js

@@ -3,7 +3,6 @@
 import React, { PureComponent } from 'react'
 import { connect } from 'react-redux'
 import { getFiatUnit } from '@ledgerhq/currencies'
-import type { Unit } from '@ledgerhq/currencies'
 
 import { getCounterValueCode } from 'reducers/settings'
 import { calculateCounterValueSelector } from 'reducers/counterValues'
@@ -14,15 +13,12 @@ type Props = {
   // wich market to query
   ticker: string,
 
-  // when? if not given: take latest
-  date?: Date,
-
-  // in which unit we want it to render
-  unit: Unit,
-
   // the value :)
   value: number,
 
+  // when? if not given: take latest
+  date?: Date,
+
   // from reducers
   counterValueCode: string,
   getCounterValue: Function,

src/components/CounterValue/stories.js

@@ -1,7 +1,7 @@
 // @flow
 
 import React from 'react'
-import { getCurrencyByCoinType, getDefaultUnitByCoinType } from '@ledgerhq/currencies'
+import { getCurrencyByCoinType } from '@ledgerhq/currencies'
 import { storiesOf } from '@storybook/react'
 import { number } from '@storybook/addon-knobs'
 
@@ -10,12 +10,7 @@ import CounterValue from 'components/CounterValue'
 const stories = storiesOf('Components', module)
 
 const currency = getCurrencyByCoinType(0)
-const unit = getDefaultUnitByCoinType(0)
 
 stories.add('CounterValue', () => (
-  <CounterValue
-    ticker={currency.units[0].code}
-    unit={unit}
-    value={Number(number('value', 3) || 0)}
-  />
+  <CounterValue ticker={currency.units[0].code} value={Number(number('value', 100000000) || 0)} />
 ))

src/components/OperationsList/index.js

@@ -192,9 +192,8 @@ const Operation = ({
           <CounterValue
             color="grey"
             fontSize={3}
-            date={time}
+            date={time.toDate()}
             ticker={currency.units[0].code}
-            unit={unit}
             value={op.amount}
           />
         </Box>

src/components/RequestAmount/index.js

@@ -79,7 +79,11 @@ export class RequestAmount extends PureComponent<Props, State> {
 
     const { account, rightUnit, value, getCounterValue } = this.props
 
-    const rawRightValue = getCounterValue(account.currency, rightUnit)(value)
+    // @TODO forced to do those horrible and redondant calculations in order
+    // to make `getCounterValue` works. `getCounterValue` should take ticker code,
+    // and the both units in parameter. Not "a currency and a unit".
+    const rawLeftValue = value * 10 ** account.unit.magnitude
+    const rawRightValue = getCounterValue(account.currency, rightUnit)(rawLeftValue)
     const rightValue = rawRightValue / 10 ** rightUnit.magnitude
 
     this.state = {
@@ -99,12 +103,21 @@ export class RequestAmount extends PureComponent<Props, State> {
   handleChangeAmount = (changedField: string) => (val: number) => {
     const { getCounterValue, getReverseCounterValue, account, max, onChange } = this.props
     const { rightUnit } = this.state
+
+    // @TODO forced to do those horrible and redondant calculations in order
+    // to make `getCounterValue` works. `getCounterValue` should take ticker code,
+    // and the both units in parameter. Not "a currency and a unit".
+
     if (changedField === 'left') {
-      const leftValue = val > max ? max : val
-      const rawRightValue = getCounterValue(account.currency, rightUnit)(leftValue)
+      let rawLeftValue = val * 10 ** account.unit.magnitude
+      if (rawLeftValue > max) {
+        rawLeftValue = max
+      }
+      const leftValue = rawLeftValue / 10 ** account.unit.magnitude
+      const rawRightValue = getCounterValue(account.currency, rightUnit)(rawLeftValue)
       const rightValue = rawRightValue / 10 ** rightUnit.magnitude
       this.setState({ rightValue, leftValue })
-      onChange({ left: leftValue, right: rawRightValue })
+      onChange({ left: rawLeftValue, right: rawRightValue })
     } else if (changedField === 'right') {
       let rawRightValue = val * 10 ** rightUnit.magnitude
       let rawLeftValue = getReverseCounterValue(account.currency, rightUnit)(rawRightValue)
@@ -113,7 +126,7 @@ export class RequestAmount extends PureComponent<Props, State> {
         rawRightValue = getCounterValue(account.currency, rightUnit)(rawLeftValue)
       }
       const rightValue = rawRightValue / 10 ** rightUnit.magnitude
-      const leftValue = rawLeftValue
+      const leftValue = rawLeftValue / 10 ** account.unit.magnitude
       this.setState({ rightValue, leftValue })
       onChange({ left: rawLeftValue, right: rawRightValue })
     }

src/components/modals/OperationDetails.js

@@ -91,7 +91,6 @@ const OperationDetails = ({ t }: { t: T }) => (
                     fontSize={5}
                     style={{ lineHeight: 1 }}
                     date={date}
-                    unit={unit}
                     ticker={currency.units[0].code}
                     value={amount}
                   />