Merge pull request #447 from gre/countervalue-intermediary

Use intermediary for calculating countervalue

package.json

@@ -42,7 +42,7 @@
     "@ledgerhq/hw-transport": "^4.12.0",
     "@ledgerhq/hw-transport-node-hid": "^4.12.0",
     "@ledgerhq/ledger-core": "1.4.5",
-    "@ledgerhq/live-common": "2.26.0",
+    "@ledgerhq/live-common": "2.27.0",
     "axios": "^0.18.0",
     "babel-runtime": "^6.26.0",
     "bcryptjs": "^2.4.3",

src/components/CalculateBalance.js

@@ -7,7 +7,12 @@ import { connect } from 'react-redux'
 import type { Account } from '@ledgerhq/live-common/lib/types'
 import { getBalanceHistorySum } from '@ledgerhq/live-common/lib/helpers/account'
 import CounterValues from 'helpers/countervalues'
-import { exchangeSettingsForAccountSelector, counterValueCurrencySelector } from 'reducers/settings'
+import {
+  exchangeSettingsForAccountSelector,
+  counterValueCurrencySelector,
+  counterValueExchangeSelector,
+  intermediaryCurrency,
+} from 'reducers/settings'
 import type { State } from 'reducers'
 
 type OwnProps = {
@@ -31,6 +36,7 @@ type Props = OwnProps & {
 
 const mapStateToProps = (state: State, props: OwnProps) => {
   const counterValueCurrency = counterValueCurrencySelector(state)
+  const counterValueExchange = counterValueExchangeSelector(state)
   let isAvailable = true
 
   // create array of original values, used to reconciliate
@@ -43,14 +49,20 @@ const mapStateToProps = (state: State, props: OwnProps) => {
     (account, value, date) => {
       // keep track of original value
       originalValues.push(value)
+      const fromExchange = exchangeSettingsForAccountSelector(state, { account })
 
-      const cv = CounterValues.calculateSelector(state, {
+      const cv =
-        value,
+        fromExchange &&
-        date,
+        counterValueExchange &&
-        to: counterValueCurrency,
+        CounterValues.calculateWithIntermediarySelector(state, {
-        from: account.currency,
+          value,
-        exchange: exchangeSettingsForAccountSelector(state, { account }),
+          date,
-      })
+          from: account.currency,
+          fromExchange,
+          intermediary: intermediaryCurrency,
+          toExchange: counterValueExchange,
+          to: counterValueCurrency,
+        })
       if (!cv && cv !== 0) {
         isAvailable = false
         return 0

src/components/CounterValue/index.js

@@ -4,8 +4,13 @@ import React, { PureComponent } from 'react'
 import { connect } from 'react-redux'
 import type { Currency } from '@ledgerhq/live-common/lib/types'
 
-import { counterValueCurrencySelector } from 'reducers/settings'
+import {
-import { calculateCounterValueSelector } from 'reducers/counterValues'
+  counterValueCurrencySelector,
+  currencySettingsSelector,
+  counterValueExchangeSelector,
+  intermediaryCurrency,
+} from 'reducers/settings'
+import CounterValues from 'helpers/countervalues'
 
 import FormattedVal from 'components/base/FormattedVal'
 
@@ -14,7 +19,6 @@ import type { State } from 'reducers'
 type OwnProps = {
   // wich market to query
   currency: Currency,
-  exchange: string,
 
   // when? if not given: take latest
   date?: Date,
@@ -31,17 +35,23 @@ type Props = OwnProps & {
 }
 
 const mapStateToProps = (state: State, props: OwnProps) => {
-  const { currency, value, date, exchange } = props
+  const { currency, value, date } = props
-  if (__DEV__) {
-    if (!exchange) console.warn('CounterValue: exchange is required')
-    if (!currency) console.warn('CounterValue: currency is required')
-  }
   const counterValueCurrency = counterValueCurrencySelector(state)
-  const counterValue = calculateCounterValueSelector(state)(
+  const fromExchange = currencySettingsSelector(state, { currency }).exchange
-    currency,
+  const toExchange = counterValueExchangeSelector(state)
-    counterValueCurrency,
+  const counterValue =
-    exchange,
+    fromExchange &&
-  )(value, date)
+    toExchange &&
+    CounterValues.calculateWithIntermediarySelector(state, {
+      from: currency,
+      fromExchange,
+      intermediary: intermediaryCurrency,
+      toExchange,
+      to: counterValueCurrency,
+      value,
+      date,
+    })
+
   return {
     counterValueCurrency,
     value: counterValue,

src/components/OperationsList/Operation.js

@@ -211,7 +211,6 @@ class OperationComponent extends PureComponent<Props> {
               date={time.toDate()}
               currency={currency}
               value={amount}
-              exchange={currencySettings.exchange}
             />
           </Box>
         </Cell>

src/components/RequestAmount/index.js

@@ -4,18 +4,23 @@ import React, { PureComponent } from 'react'
 import { compose } from 'redux'
 import { translate } from 'react-i18next'
 import styled from 'styled-components'
-import { createStructuredSelector } from 'reselect'
 import { connect } from 'react-redux'
 import type { Currency, Account } from '@ledgerhq/live-common/lib/types'
 
 import type { T } from 'types/common'
 
-import { counterValueCurrencySelector, exchangeSettingsForAccountSelector } from 'reducers/settings'
+import {
-import { calculateCounterValueSelector, reverseCounterValueSelector } from 'reducers/counterValues'
+  counterValueCurrencySelector,
+  currencySettingsSelector,
+  counterValueExchangeSelector,
+  intermediaryCurrency,
+} from 'reducers/settings'
+import CounterValues from 'helpers/countervalues'
 
 import InputCurrency from 'components/base/InputCurrency'
 import Button from 'components/base/Button'
 import Box from 'components/base/Box'
+import type { State } from 'reducers'
 
 const InputRight = styled(Box).attrs({
   ff: 'Rubik',
@@ -35,15 +40,7 @@ const InputCenter = styled(Box).attrs({
   width: 30px;
 `
 
-const mapStateToProps = createStructuredSelector({
+type OwnProps = {
-  exchange: exchangeSettingsForAccountSelector,
-  // $FlowFixMe
-  rightCurrency: counterValueCurrencySelector,
-  getCounterValue: calculateCounterValueSelector,
-  getReverseCounterValue: reverseCounterValueSelector,
-})
-
-type Props = {
   // translation
   t: T,
 
@@ -58,21 +55,59 @@ type Props = {
   // change handler
   onChange: number => void,
 
-  exchange: string,
-
   // used to determine the left input unit
   account: Account,
 
+  // display max button
+  withMax: boolean,
+}
+
+type Props = OwnProps & {
   // used to determine the right input unit
   // retrieved via selector (take the chosen countervalue unit)
   rightCurrency: Currency,
 
   // used to calculate the opposite field value (right & left)
-  getCounterValue: *,
+  getCounterValue: number => ?number,
-  getReverseCounterValue: *,
+  getReverseCounterValue: number => ?number,
+}
 
-  // display max button
+const mapStateToProps = (state: State, props: OwnProps) => {
-  withMax: boolean,
+  const {
+    account: { currency },
+  } = props
+  const counterValueCurrency = counterValueCurrencySelector(state)
+  const fromExchange = currencySettingsSelector(state, { currency }).exchange
+  const toExchange = counterValueExchangeSelector(state)
+  const getCounterValue = value =>
+    fromExchange &&
+    toExchange &&
+    CounterValues.calculateWithIntermediarySelector(state, {
+      from: currency,
+      fromExchange,
+      intermediary: intermediaryCurrency,
+      toExchange,
+      to: counterValueCurrency,
+      value,
+    })
+
+  const getReverseCounterValue = value =>
+    fromExchange &&
+    toExchange &&
+    CounterValues.reverseWithIntermediarySelector(state, {
+      from: currency,
+      fromExchange,
+      intermediary: intermediaryCurrency,
+      toExchange,
+      to: counterValueCurrency,
+      value,
+    })
+
+  return {
+    rightCurrency: counterValueCurrency,
+    getCounterValue,
+    getReverseCounterValue,
+  }
 }
 
 export class RequestAmount extends PureComponent<Props> {
@@ -90,18 +125,18 @@ export class RequestAmount extends PureComponent<Props> {
   }
 
   handleChangeAmount = (changedField: string) => (val: number) => {
-    const { rightCurrency, getReverseCounterValue, account, max, onChange, exchange } = this.props
+    const { getReverseCounterValue, max, onChange } = this.props
     if (changedField === 'left') {
       onChange(val > max ? max : val)
     } else if (changedField === 'right') {
-      const leftVal = getReverseCounterValue(account.currency, rightCurrency, exchange)(val) || 0
+      const leftVal = getReverseCounterValue(val) || 0
       onChange(leftVal > max ? max : leftVal)
     }
   }
 
   renderInputs(containerProps: Object) {
-    const { value, account, rightCurrency, getCounterValue, exchange, canBeSpent } = this.props
+    const { value, account, rightCurrency, getCounterValue, canBeSpent } = this.props
-    const right = getCounterValue(account.currency, rightCurrency, exchange)(value) || 0
+    const right = getCounterValue(value) || 0
     const rightUnit = rightCurrency.units[0]
     return (
       <Box horizontal grow shrink>

src/components/SelectExchange.js

@@ -12,7 +12,7 @@ class ExchangeSelect extends Component<
   {
     from: Currency,
     to: Currency,
-    exchangeId: string,
+    exchangeId: ?string,
     onChange: (?Exchange) => void,
     style?: *,
   },

src/components/SettingsPage/sections/Currencies.js

@@ -10,10 +10,10 @@ import React, { PureComponent } from 'react'
 import { connect } from 'react-redux'
 import { createStructuredSelector } from 'reselect'
 
-import type { CryptoCurrency, Currency } from '@ledgerhq/live-common/lib/types'
+import type { CryptoCurrency } from '@ledgerhq/live-common/lib/types'
 import type { T } from 'types/common'
 
-import { counterValueCurrencySelector, currencySettingsLocaleSelector } from 'reducers/settings'
+import { intermediaryCurrency, currencySettingsLocaleSelector } from 'reducers/settings'
 import type { SettingsState } from 'reducers/settings'
 import { currenciesSelector } from 'reducers/accounts'
 import { currencySettingsDefaults } from 'helpers/SettingsDefaults'
@@ -32,7 +32,6 @@ import {
 } from '../SettingsSection'
 
 type Props = {
-  counterValueCurrency: Currency,
   currencies: CryptoCurrency[],
   settings: SettingsState,
   saveSettings: ($Shape<SettingsState>) => void,
@@ -44,7 +43,6 @@ type State = {
 }
 
 const mapStateToProps = createStructuredSelector({
-  counterValueCurrency: counterValueCurrencySelector,
   currencies: currenciesSelector,
 })
 
@@ -61,7 +59,7 @@ class TabCurrencies extends PureComponent<Props, State> {
   handleChangeConfirmationsNb = (nb: number) => this.updateCurrencySettings('confirmationsNb', nb)
 
   handleChangeExchange = exchange =>
-    this.updateCurrencySettings('exchange', exchange ? exchange.id : '')
+    this.updateCurrencySettings('exchange', exchange ? exchange.id : null)
 
   updateCurrencySettings = (key: string, val: *) => {
     // FIXME this really should be a dedicated action
@@ -91,7 +89,7 @@ class TabCurrencies extends PureComponent<Props, State> {
   render() {
     const { currency } = this.state
     if (!currency) return null // this case means there is no accounts
-    const { t, currencies, counterValueCurrency, settings } = this.props
+    const { t, currencies, settings } = this.props
     const { confirmationsNb, exchange } = currencySettingsLocaleSelector(settings, currency)
     const defaults = currencySettingsDefaults(currency)
     return (
@@ -112,11 +110,14 @@ class TabCurrencies extends PureComponent<Props, State> {
           }
         />
         <Body>
-          <Row title="Exchange" desc="The exchange to use">
+          <Row
+            title={`Exchange (${currency.ticker}${intermediaryCurrency.ticker})`}
+            desc="The exchange to use"
+          >
             <ExchangeSelect
               small
               from={currency}
-              to={counterValueCurrency}
+              to={intermediaryCurrency}
               exchangeId={exchange}
               onChange={this.handleChangeExchange}
               minWidth={200}

src/components/SettingsPage/sections/Display.js

@@ -4,9 +4,16 @@ import React, { PureComponent } from 'react'
 import moment from 'moment'
 import { listFiatCurrencies } from '@ledgerhq/live-common/lib/helpers/currencies'
 
+import {
+  intermediaryCurrency,
+  counterValueCurrencyLocalSelector,
+  counterValueExchangeLocalSelector,
+} from 'reducers/settings'
+
 import type { SettingsState as Settings } from 'reducers/settings'
 import type { T } from 'types/common'
 
+import ExchangeSelect from 'components/SelectExchange'
 import Select from 'components/base/Select'
 import RadioGroup from 'components/base/RadioGroup'
 import IconDisplay from 'icons/Display'
@@ -108,8 +115,11 @@ class TabProfile extends PureComponent<Props, State> {
     })
   }
 
+  handleChangeExchange = (exchange: *) =>
+    this.props.saveSettings({ counterValueExchange: exchange ? exchange.id : null })
+
   render() {
-    const { t } = this.props
+    const { t, settings } = this.props
     const {
       cachedMarketIndicator,
       cachedLanguageKey,
@@ -117,6 +127,9 @@ class TabProfile extends PureComponent<Props, State> {
       cachedRegion,
     } = this.state
 
+    const counterValueCurrency = counterValueCurrencyLocalSelector(settings)
+    const counterValueExchange = counterValueExchangeLocalSelector(settings)
+
     const languages = languageKeys.map(key => ({ value: key, label: t(`language:${key}`) }))
     const currentLanguage = languages.find(l => l.value === cachedLanguageKey)
     const regionsFiltered = regions.filter(({ language }) => cachedLanguageKey === language)
@@ -149,6 +162,19 @@ class TabProfile extends PureComponent<Props, State> {
               value={cvOption}
             />
           </Row>
+          <Row
+            title={`Exchange (${intermediaryCurrency.ticker}${counterValueCurrency.ticker})`}
+            desc="The exchange to use for countervalue conversion"
+          >
+            <ExchangeSelect
+              small
+              from={intermediaryCurrency}
+              to={counterValueCurrency}
+              exchangeId={counterValueExchange}
+              onChange={this.handleChangeExchange}
+              minWidth={200}
+            />
+          </Row>
           <Row title={t('settings:display.language')} desc={t('settings:display.languageDesc')}>
             <Select
               small

src/components/modals/OperationDetails.js

@@ -107,7 +107,6 @@ const OperationDetails = connect(mapStateToProps)((props: Props) => {
                 date={date}
                 currency={currency}
                 value={amount}
-                exchange={currencySettings.exchange}
               />
             </Box>
           </Box>

src/components/modals/Send/Footer.js

@@ -2,9 +2,6 @@
 
 import React, { PureComponent } from 'react'
 import type { Account } from '@ledgerhq/live-common/lib/types'
-import { createStructuredSelector } from 'reselect'
-import { connect } from 'react-redux'
-import { exchangeSettingsForAccountSelector } from 'reducers/settings'
 
 import type { T } from 'types/common'
 
@@ -23,15 +20,10 @@ type Props = {
   bridge: WalletBridge<*>,
   transaction: *,
   onNext: () => void,
-  canNext: boolean,
+  canNext: ?boolean,
   showTotal: boolean,
-  exchange: string,
 }
 
-const mapStateToProps = createStructuredSelector({
-  exchange: exchangeSettingsForAccountSelector,
-})
-
 class Footer extends PureComponent<
   Props,
   {
@@ -46,7 +38,7 @@ class Footer extends PureComponent<
   componentDidMount() {
     this.resync()
   }
-  componentDidUpdate(nextProps) {
+  componentDidUpdate(nextProps: Props) {
     if (
       nextProps.account !== this.props.account ||
       nextProps.transaction !== this.props.transaction
@@ -66,7 +58,7 @@ class Footer extends PureComponent<
     this.setState({ totalSpent, canBeSpent })
   }
   render() {
-    const { exchange, account, t, onNext, canNext, showTotal } = this.props
+    const { account, t, onNext, canNext, showTotal } = this.props
     const { totalSpent, canBeSpent } = this.state
     return (
       <ModalFooter>
@@ -87,7 +79,6 @@ class Footer extends PureComponent<
                     {'('}
                   </Text>
                   <CounterValue
-                    exchange={exchange}
                     currency={account.currency}
                     value={totalSpent}
                     disableRounding
@@ -112,4 +103,4 @@ class Footer extends PureComponent<
   }
 }
 
-export default connect(mapStateToProps)(Footer)
+export default Footer

src/helpers/countervalues.js

@@ -4,18 +4,28 @@ import { createSelector } from 'reselect'
 import createCounterValues from '@ledgerhq/live-common/lib/countervalues'
 import { setExchangePairsAction } from 'actions/settings'
 import { currenciesSelector } from 'reducers/accounts'
-import { counterValueCurrencySelector, currencySettingsSelector } from 'reducers/settings'
+import {
+  counterValueCurrencySelector,
+  counterValueExchangeSelector,
+  currencySettingsSelector,
+  intermediaryCurrency,
+} from 'reducers/settings'
 
 const pairsSelector = createSelector(
   currenciesSelector,
   counterValueCurrencySelector,
+  counterValueExchangeSelector,
   state => state,
-  (currencies, counterValueCurrency, state) =>
+  (currencies, counterValueCurrency, counterValueExchange, state) =>
-    currencies.map(currency => ({
+    [
-      from: currency,
+      { from: intermediaryCurrency, to: counterValueCurrency, exchange: counterValueExchange },
-      to: counterValueCurrency,
+    ].concat(
-      exchange: currencySettingsSelector(state, { currency }).exchange,
+      currencies.map(currency => ({
-    })),
+        from: currency,
+        to: intermediaryCurrency,
+        exchange: currencySettingsSelector(state, { currency }).exchange,
+      })),
+    ),
 )
 
 const addExtraPollingHooks = (schedulePoll, cancelPoll) => {
@@ -39,7 +49,7 @@ const addExtraPollingHooks = (schedulePoll, cancelPoll) => {
 }
 
 const CounterValues = createCounterValues({
-  log: (...args) => console.log('CounterValues:', ...args),
+  log: (...args) => console.log('CounterValues:', ...args), // eslint-disable-line no-console
   getAPIBaseURL: () => 'https://ledger-countervalue-poc.herokuapp.com',
   storeSelector: state => state.countervalues,
   pairsSelector,

src/reducers/counterValues.js

@@ -1,22 +0,0 @@
-// @flow
-
-import CounterValues from 'helpers/countervalues'
-
-import type { Currency } from '@ledgerhq/live-common/lib/types'
-import type { State } from 'reducers'
-
-// FIXME DEPRECATED approach. we will move to use calculateSelector everywhere.. it's just easier to process for now.
-
-export const calculateCounterValueSelector = (state: State) => (
-  from: Currency,
-  to: Currency,
-  exchange: string,
-) => (value: number, date?: Date, disableRounding?: boolean): ?number =>
-  CounterValues.calculateSelector(state, { from, to, exchange, value, date, disableRounding })
-
-export const reverseCounterValueSelector = (state: State) => (
-  from: Currency,
-  to: Currency,
-  exchange: string,
-) => (value: number, date?: Date, disableRounding?: boolean): ?number =>
-  CounterValues.reverseSelector(state, { from, to, exchange, value, date, disableRounding })

src/reducers/settings.js

@@ -3,6 +3,7 @@
 import { handleActions } from 'redux-actions'
 import {
   findCurrencyByTicker,
+  getCryptoCurrencyById,
   getFiatCurrencyByTicker,
   listCryptoCurrencies,
 } from '@ledgerhq/live-common/lib/helpers/currencies'
@@ -15,10 +16,13 @@ import { currencySettingsDefaults } from 'helpers/SettingsDefaults'
 import type { CurrencySettings } from 'types/common'
 import type { State } from 'reducers'
 
+export const intermediaryCurrency = getCryptoCurrencyById('bitcoin')
+
 export type SettingsState = {
   loaded: boolean, // is the settings loaded from db (it not we don't save them)
   hasCompletedOnboarding: boolean,
   counterValue: string,
+  counterValueExchange: ?string,
   language: string,
   orderAccounts: string,
   password: {
@@ -55,6 +59,7 @@ const defaultsForCurrency: CryptoCurrency => CurrencySettings = crypto => {
 const INITIAL_STATE: SettingsState = {
   hasCompletedOnboarding: false,
   counterValue: 'USD',
+  counterValueExchange: null,
   language,
   orderAccounts: 'balance|asc',
   password: {
@@ -93,11 +98,13 @@ const handlers: Object = {
     copy.currenciesSettings = { ...copy.currenciesSettings }
     for (const { to, from, exchange } of pairs) {
       const fromCrypto = asCryptoCurrency(from)
-      if (to === counterValueCurrency && fromCrypto) {
+      if (fromCrypto && to === intermediaryCurrency) {
         copy.currenciesSettings[fromCrypto.id] = {
           ...copy.currenciesSettings[fromCrypto.id],
           exchange,
         }
+      } else if (from === intermediaryCurrency && to === counterValueCurrency) {
+        copy.counterValueExchange = exchange
       }
     }
     return copy
@@ -131,7 +138,7 @@ export const hasPassword = (state: State): boolean => state.settings.password.is
 
 export const getCounterValueCode = (state: State) => state.settings.counterValue
 
-const counterValueCurrencyLocalSelector = (state: SettingsState): Currency =>
+export const counterValueCurrencyLocalSelector = (state: SettingsState): Currency =>
   findCurrencyByTicker(state.counterValue) || getFiatCurrencyByTicker('USD')
 
 export const counterValueCurrencySelector = createSelector(
@@ -139,6 +146,13 @@ export const counterValueCurrencySelector = createSelector(
   counterValueCurrencyLocalSelector,
 )
 
+export const counterValueExchangeLocalSelector = (s: SettingsState) => s.counterValueExchange
+
+export const counterValueExchangeSelector = createSelector(
+  storeSelector,
+  counterValueExchangeLocalSelector,
+)
+
 export const developerModeSelector = (state: State): boolean => state.settings.developerMode
 
 export const availableCurrencies = createSelector(developerModeSelector, listCryptoCurrencies)
@@ -167,9 +181,11 @@ export const currencySettingsLocaleSelector = (
 
 type CSS = Selector<*, { currency: CryptoCurrency }, CurrencySettings>
 
+export const currencyPropExtractor = (_: *, { currency }: *) => currency
+
 export const currencySettingsSelector: CSS = createSelector(
   storeSelector,
-  (_, { currency }) => currency,
+  currencyPropExtractor,
   currencySettingsLocaleSelector,
 )
 
@@ -178,7 +194,7 @@ export const currencySettingsForAccountSelector = (
   { account }: { account: Account },
 ) => currencySettingsSelector(state, { currency: account.currency })
 
-type ESFAS = Selector<*, { account: Account }, string>
+type ESFAS = Selector<*, { account: Account }, ?string>
 export const exchangeSettingsForAccountSelector: ESFAS = createSelector(
   currencySettingsForAccountSelector,
   settings => settings.exchange,

src/types/common.js

@@ -12,7 +12,7 @@ export type Device = {
 
 export type CurrencySettings = {
   confirmationsNb: number,
-  exchange: string,
+  exchange: ?string,
 }
 
 export type CurrenciesSettings = {

yarn.lock

@@ -1495,9 +1495,9 @@
     npm "^5.7.1"
     prebuild-install "^2.2.2"
 
-"@ledgerhq/live-common@2.26.0":
+"@ledgerhq/live-common@2.27.0":
-  version "2.26.0"
+  version "2.27.0"
-  resolved "https://registry.yarnpkg.com/@ledgerhq/live-common/-/live-common-2.26.0.tgz#2dde8da97ef28b9326f1b060e8db9033ad788efe"
+  resolved "https://registry.yarnpkg.com/@ledgerhq/live-common/-/live-common-2.27.0.tgz#342478f7b85607a11f20803e2f2862394b6f2bbe"
   dependencies:
     axios "^0.18.0"
     invariant "^2.2.2"