Add settings for change counterValue

src/actions/counterValues.js

@@ -8,21 +8,22 @@ import get from 'lodash/get'
 
 import db from 'helpers/db'
 
-type InitCounterValues = () => { type: string, payload: Object }
+export type InitCounterValues = () => { type: string, payload: Object }
 export const initCounterValues: InitCounterValues = () => ({
   type: 'UPDATE_COUNTER_VALUES',
   payload: db.get('counterValues'),
 })
 
-type UpdateCounterValues = Object => { type: string, payload: Object }
+export type UpdateCounterValues = Object => { type: string, payload: Object }
 export const updateCounterValues: UpdateCounterValues = payload => ({
   type: 'DB:UPDATE_COUNTER_VALUES',
   payload,
 })
 
-type FetchCounterValues = (?number) => (Dispatch<*>, Function) => Promise<any>
+export type FetchCounterValues = (?number) => (Dispatch<*>, Function) => Promise<any>
 export const fetchCounterValues: FetchCounterValues = coinType => (dispatch, getState) => {
-  const { accounts, counterValues } = getState()
+  const { accounts, counterValues, settings } = getState()
+  const { counterValue } = settings
 
   let coinTypes = []
 
@@ -36,7 +37,7 @@ export const fetchCounterValues: FetchCounterValues = coinType => (dispatch, get
 
   const fetchCounterValuesByCoinType = coinType => {
     const { code } = getDefaultUnitByCoinType(coinType)
-    const todayCounterValues = get(counterValues, `${code}-USD.${today}`, null)
+    const todayCounterValues = get(counterValues, `${code}-${counterValue}.${today}`, null)
 
     if (todayCounterValues !== null) {
       return null
@@ -44,10 +45,10 @@ export const fetchCounterValues: FetchCounterValues = coinType => (dispatch, get
 
     return axios
       .get(
-        `https://min-api.cryptocompare.com/data/histoday?&extraParams=ledger-test&fsym=${code}&tsym=USD&allData=1`,
+        `https://min-api.cryptocompare.com/data/histoday?&extraParams=ledger-test&fsym=${code}&tsym=${counterValue}&allData=1`,
       )
       .then(({ data }) => ({
-        symbol: `${code}-USD`,
+        symbol: `${code}-${counterValue}`,
         values: data.Data.reduce((result, d) => {
           const date = moment(d.time * 1000).format('YYYY-MM-DD')
           result[date] = d.close

src/components/AccountPage/index.js

@@ -11,6 +11,7 @@ import { MODAL_SEND, MODAL_RECEIVE, MODAL_SETTINGS_ACCOUNT } from 'constants'
 import type { T, Account } from 'types/common'
 
 import { getAccountById } from 'reducers/accounts'
+import { getCounterValue } from 'reducers/settings'
 import { openModal } from 'reducers/modals'
 
 import IconControls from 'icons/Controls'
@@ -33,6 +34,7 @@ import AccountHeader from './AccountHeader'
 
 const mapStateToProps = (state, props) => ({
   account: getAccountById(state, props.match.params.id),
+  counterValue: getCounterValue(state),
 })
 
 const mapDispatchToProps = {
@@ -40,6 +42,7 @@ const mapDispatchToProps = {
 }
 
 type Props = {
+  counterValue: string,
   t: T,
   account?: Account,
   openModal: Function,
@@ -63,7 +66,7 @@ class AccountPage extends PureComponent<Props, State> {
     })
 
   render() {
-    const { account, openModal, t } = this.props
+    const { account, openModal, t, counterValue } = this.props
     const { selectedTime, daysCount } = this.state
 
     // Don't even throw if we jumped in wrong account route
@@ -100,6 +103,7 @@ class AccountPage extends PureComponent<Props, State> {
         </Box>
         <Box mb={7}>
           <BalanceSummary
+            counterValue={counterValue}
             chartColor={account.currency.color}
             chartId={`account-chart-${account.id}`}
             accounts={[account]}
@@ -113,7 +117,7 @@ class AccountPage extends PureComponent<Props, State> {
                       <FormattedVal
                         alwaysShowSign={false}
                         color="warmGrey"
-                        fiat="USD"
+                        fiat={counterValue}
                         fontSize={6}
                         showCode
                         style={{ lineHeight: 1 }}
@@ -139,7 +143,7 @@ class AccountPage extends PureComponent<Props, State> {
                   />
                   <BalanceSinceDiff
                     t={t}
-                    fiat="USD"
+                    counterValue={counterValue}
                     alignItems="center"
                     totalBalance={totalBalance}
                     sinceBalance={sinceBalance}

src/components/BalanceSummary/BalanceInfos.js

@@ -28,13 +28,13 @@ type BalanceSinceProps = {
 
 type BalanceTotalProps = {
   children?: any,
-  fiat?: string,
+  counterValue?: string,
   totalBalance: number,
   unit?: Unit,
 }
 
 type Props = {
-  fiat: string,
+  counterValue: string,
 } & BalanceSinceProps
 
 export function BalanceSincePercent(props: BalanceSinceProps) {
@@ -53,11 +53,11 @@ export function BalanceSincePercent(props: BalanceSinceProps) {
 }
 
 export function BalanceSinceDiff(props: Props) {
-  const { t, totalBalance, sinceBalance, since, fiat, ...otherProps } = props
+  const { t, totalBalance, sinceBalance, since, counterValue, ...otherProps } = props
   return (
     <Box {...otherProps}>
       <FormattedVal
-        fiat={fiat}
+        fiat={counterValue}
         alwaysShowSign
         showCode
         val={totalBalance - sinceBalance}
@@ -69,13 +69,13 @@ export function BalanceSinceDiff(props: Props) {
 }
 
 export function BalanceTotal(props: BalanceTotalProps) {
-  const { fiat, totalBalance, children, unit } = props
+  const { counterValue, totalBalance, children, unit } = props
   return (
     <Box grow>
       <FormattedVal
         alwaysShowSign={false}
         color="dark"
-        fiat={fiat}
+        fiat={counterValue}
         fontSize={8}
         showCode
         style={{ lineHeight: 1 }}
@@ -88,16 +88,16 @@ export function BalanceTotal(props: BalanceTotalProps) {
 }
 
 BalanceTotal.defaultProps = {
-  fiat: undefined,
+  counterValue: undefined,
   children: null,
   unit: undefined,
 }
 
 function BalanceInfos(props: Props) {
-  const { t, fiat, totalBalance, since, sinceBalance, refBalance } = props
+  const { t, totalBalance, since, sinceBalance, refBalance, counterValue } = props
   return (
     <Box horizontal alignItems="flex-end" flow={7}>
-      <BalanceTotal fiat={fiat} totalBalance={totalBalance}>
+      <BalanceTotal counterValue={counterValue} totalBalance={totalBalance}>
         <Sub>{t('dashboard:totalBalance')}</Sub>
       </BalanceTotal>
       <BalanceSincePercent
@@ -109,7 +109,7 @@ function BalanceInfos(props: Props) {
         t={t}
       />
       <BalanceSinceDiff
-        fiat="USD"
+        counterValue={counterValue}
         alignItems="flex-end"
         totalBalance={totalBalance}
         sinceBalance={sinceBalance}

src/components/BalanceSummary/index.js

@@ -38,6 +38,7 @@ function renderTickX(selectedTime) {
 }
 
 type Props = {
+  counterValue: string,
   chartColor: string,
   chartId: string,
   accounts: Accounts,
@@ -47,6 +48,7 @@ type Props = {
 }
 
 const BalanceSummary = ({
+  counterValue,
   chartColor,
   chartId,
   accounts,
@@ -54,10 +56,11 @@ const BalanceSummary = ({
   daysCount,
   renderHeader,
 }: Props) => {
-  const unit = getFiatUnit('USD')
+  const unit = getFiatUnit(counterValue)
   return (
     <Card p={0} py={6}>
       <CalculateBalance
+        counterValue={counterValue}
         accounts={accounts}
         daysCount={daysCount}
         render={({ allBalances, totalBalance, sinceBalance, refBalance }) => (

src/components/CalculateBalance.js

@@ -15,7 +15,7 @@ const mapStateToProps = state => ({
   counterValues: state.counterValues,
 })
 
-function calculateBalance(props) {
+function calculateBalance(props: Object) {
   const interval = {
     start: moment()
       .subtract(props.daysCount, 'days')
@@ -24,7 +24,7 @@ function calculateBalance(props) {
   }
 
   const allBalances = getBalanceHistoryForAccounts({
-    fiat: 'USD',
+    counterValue: props.counterValue,
     accounts: props.accounts,
     counterValues: props.counterValues,
     interval,

src/components/DashboardPage/AccountCard.js

@@ -12,10 +12,12 @@ import CalculateBalance from 'components/CalculateBalance'
 import FormattedVal from 'components/base/FormattedVal'
 
 const AccountCard = ({
+  counterValue,
   account,
   onClick,
   daysCount,
 }: {
+  counterValue: string,
   account: Account,
   onClick: Function,
   daysCount: number,
@@ -57,6 +59,7 @@ const AccountCard = ({
         </Box>
       </Box>
       <CalculateBalance
+        counterValue={counterValue}
         accounts={[account]}
         daysCount={daysCount}
         render={({ allBalances, totalBalance, refBalance }) => (
@@ -64,7 +67,7 @@ const AccountCard = ({
             <Box flow={2} horizontal>
               <Box justifyContent="center">
                 <FormattedVal
-                  fiat="USD"
+                  fiat={counterValue}
                   val={totalBalance}
                   alwaysShowSign={false}
                   showCode

src/components/DashboardPage/index.js

@@ -13,6 +13,7 @@ import sortBy from 'lodash/sortBy'
 import type { Account, Accounts, T } from 'types/common'
 
 import { getVisibleAccounts } from 'reducers/accounts'
+import { getCounterValue } from 'reducers/settings'
 
 import { updateOrderAccounts } from 'actions/accounts'
 import { saveSettings } from 'actions/settings'
@@ -29,6 +30,7 @@ import AccountsOrder from './AccountsOrder'
 
 const mapStateToProps = state => ({
   accounts: getVisibleAccounts(state),
+  counterValue: getCounterValue(state),
 })
 
 const mapDispatchToProps = {
@@ -41,6 +43,7 @@ type Props = {
   t: T,
   accounts: Accounts,
   push: Function,
+  counterValue: string,
 }
 
 type State = {
@@ -106,7 +109,7 @@ class DashboardPage extends PureComponent<Props, State> {
     })
 
   render() {
-    const { push, accounts, t } = this.props
+    const { push, accounts, t, counterValue } = this.props
     const { accountsChunk, allTransactions, selectedTime, daysCount } = this.state
 
     const totalAccounts = accounts.length
@@ -131,6 +134,7 @@ class DashboardPage extends PureComponent<Props, State> {
         {totalAccounts > 0 && (
           <Fragment>
             <BalanceSummary
+              counterValue={counterValue}
               chartId="dashboard-chart"
               chartColor="#5286f7"
               accounts={accounts}
@@ -139,7 +143,7 @@ class DashboardPage extends PureComponent<Props, State> {
               renderHeader={({ totalBalance, selectedTime, sinceBalance, refBalance }) => (
                 <BalanceInfos
                   t={t}
-                  fiat="USD"
+                  counterValue={counterValue}
                   totalBalance={totalBalance}
                   since={selectedTime}
                   sinceBalance={sinceBalance}
@@ -173,6 +177,7 @@ class DashboardPage extends PureComponent<Props, State> {
                           />
                         ) : (
                           <AccountCard
+                            counterValue={counterValue}
                             account={account}
                             daysCount={daysCount}
                             key={account.id}

src/components/SettingsPage/Money.js

@@ -0,0 +1,88 @@
+// @flow
+
+import React, { PureComponent } from 'react'
+import { getFiatUnit } from '@ledgerhq/currencies'
+
+import type { SettingsMoney, T } from 'types/common'
+
+import Box, { Card } from 'components/base/Box'
+import Button from 'components/base/Button'
+import Label from 'components/base/Label'
+import Select from 'components/base/Select'
+
+const counterValues = ['USD', 'EUR', 'JPY', 'GBP'].sort().map(c => {
+  const { name } = getFiatUnit(c)
+  return {
+    key: c,
+    name,
+  }
+})
+
+type InputValue = SettingsMoney
+
+type Props = {
+  t: T,
+  settings: SettingsMoney,
+  onSaveSettings: Function,
+}
+
+type State = {
+  inputValue: InputValue,
+}
+
+class TabProfile extends PureComponent<Props, State> {
+  state = {
+    inputValue: {
+      counterValue: this.props.settings.counterValue,
+    },
+  }
+
+  handleChangeInput = (key: $Keys<InputValue>) => (value: $Values<InputValue>) =>
+    this.setState(prev => ({
+      inputValue: {
+        ...prev.inputValue,
+        [key]: value,
+      },
+    }))
+
+  handleSubmit = (e: SyntheticEvent<HTMLFormElement>) => {
+    e.preventDefault()
+
+    const { onSaveSettings } = this.props
+    const { inputValue } = this.state
+
+    onSaveSettings({
+      ...inputValue,
+    })
+  }
+
+  render() {
+    const { t } = this.props
+    const { inputValue } = this.state
+
+    const currentCounterValues = counterValues.find(l => l.key === inputValue.counterValue)
+
+    return (
+      <form onSubmit={this.handleSubmit}>
+        <Card flow={3}>
+          <Box flow={1}>
+            <Label>{t('settings:display.counterValue')}</Label>
+            <Select
+              onChange={item => this.handleChangeInput('counterValue')(item.key)}
+              renderSelected={item => item && item.name}
+              value={currentCounterValues}
+              items={counterValues}
+            />
+          </Box>
+          <Box horizontal justifyContent="flex-end">
+            <Button primary type="submit">
+              {t('common:save')}
+            </Button>
+          </Box>
+        </Card>
+      </form>
+    )
+  }
+}
+
+export default TabProfile

src/components/SettingsPage/index.js

@@ -7,8 +7,10 @@ import { translate } from 'react-i18next'
 
 import type { Settings, T } from 'types/common'
 import type { SaveSettings } from 'actions/settings'
+import type { FetchCounterValues } from 'actions/counterValues'
 
 import { saveSettings } from 'actions/settings'
+import { fetchCounterValues } from 'actions/counterValues'
 
 import Box from 'components/base/Box'
 import Text from 'components/base/Text'
@@ -16,12 +18,14 @@ import Tabs from 'components/base/Tabs'
 
 import TabDisplay from './Display'
 import TabProfile from './Profile'
+import TabMoney from './Money'
 
 const mapStateToProps = state => ({
   settings: state.settings,
 })
 
 const mapDispatchToProps = {
+  fetchCounterValues,
   saveSettings,
 }
 
@@ -29,6 +33,7 @@ type Props = {
   i18n: Object,
   saveSettings: SaveSettings,
   settings: Settings,
+  fetchCounterValues: FetchCounterValues,
   t: T,
 }
 
@@ -44,13 +49,17 @@ class SettingsPage extends PureComponent<Props, State> {
   handleChangeTab = (tab: number) => this.setState({ tab })
 
   handleSaveSettings = newSettings => {
-    const { saveSettings, i18n, settings } = this.props
+    const { fetchCounterValues, saveSettings, i18n, settings } = this.props
+
+    saveSettings(newSettings)
 
     if (newSettings.language !== settings.language) {
       i18n.changeLanguage(newSettings.language)
     }
 
-    saveSettings(newSettings)
+    if (newSettings.counterValue !== settings.counterValue) {
+      fetchCounterValues()
+    }
   }
 
   render() {
@@ -77,9 +86,8 @@ class SettingsPage extends PureComponent<Props, State> {
             },
             {
               key: 'money',
-              isDisabled: true,
               title: t('settings:tabs.money'),
-              render: () => <div>{'Monnaie'}</div>,
+              render: () => <TabMoney {...props} />,
             },
             {
               key: 'material',

src/helpers/__tests__/balance.test.js

@@ -27,7 +27,7 @@ describe('helpers > balance', () => {
       }
 
       const balances = getBalanceHistoryForAccount({
-        fiat: 'USD',
+        counterValue: 'USD',
         account,
         counterValues,
         interval,
@@ -54,7 +54,7 @@ describe('helpers > balance', () => {
       }
 
       const balances = getBalanceHistoryForAccount({
-        fiat: 'USD',
+        counterValue: 'USD',
         account,
         counterValues,
         interval,
@@ -81,7 +81,7 @@ describe('helpers > balance', () => {
       }
 
       const balances = getBalanceHistoryForAccount({
-        fiat: 'USD',
+        counterValue: 'USD',
         account,
         counterValues,
         interval,
@@ -118,7 +118,7 @@ describe('helpers > balance', () => {
       }
 
       const balances = getBalanceHistoryForAccounts({
-        fiat: 'USD',
+        counterValue: 'USD',
         accounts: [account1, account2],
         counterValues,
         interval,

src/helpers/balance.js

@@ -49,17 +49,17 @@ function getBalanceAtIntervalStart(account: Account, interval: DateInterval): nu
 
 export function getBalanceHistoryForAccount({
   account,
-  fiat,
+  counterValue,
   counterValues,
   interval,
 }: {
-  fiat: string,
+  counterValue: string,
   account: Account,
   counterValues: Object,
   interval: DateInterval,
 }): Array<BalanceHistoryDay> {
   const unit = getDefaultUnitByCoinType(account.coinType)
-  const counterVals = counterValues[`${unit.code}-${fiat}`]
+  const counterVals = counterValues[`${unit.code}-${counterValue}`]
   let lastBalance = getBalanceAtIntervalStart(account, interval)
   return mapInterval(interval, date => {
     let balance = 0
@@ -84,11 +84,11 @@ export function getBalanceHistoryForAccount({
 
 export function getBalanceHistoryForAccounts({
   accounts,
-  fiat,
+  counterValue,
   counterValues,
   interval,
 }: {
-  fiat: string,
+  counterValue: string,
   accounts: Accounts,
   counterValues: Object,
   interval: DateInterval,
@@ -96,7 +96,7 @@ export function getBalanceHistoryForAccounts({
   // calculate balance history for each account on the given interval
   const balances = accounts.map(account =>
     getBalanceHistoryForAccount({
-      fiat,
+      counterValue,
       account,
       counterValues,
       interval,

src/reducers/settings.js

@@ -8,7 +8,8 @@ import type { Settings } from 'types/common'
 
 export type SettingsState = Object
 
-const state: SettingsState = {
+const defaultState: SettingsState = {
+  counterValue: 'USD',
   language: 'en',
   orderAccounts: 'balance|desc',
   password: {
@@ -16,6 +17,10 @@ const state: SettingsState = {
   },
 }
 
+const state: SettingsState = {
+  ...defaultState,
+}
+
 const handlers: Object = {
   SAVE_SETTINGS: (state: SettingsState, { payload: settings }: { payload: Settings }) => ({
     ...state,
@@ -27,8 +32,12 @@ const handlers: Object = {
   }),
 }
 
-export const hasPassword = (state: Object) => get(state.settings, 'password.state', false)
+export const hasPassword = (state: Object) =>
-export const getLanguage = (state: Object) => get(state.settings, 'language', 'en')
+  get(state.settings, 'password.state', defaultState.password.state)
-export const getOrderAccounts = (state: Object) => get(state.settings, 'orderAccounts', 'balance')
+export const getCounterValue = (state: Object) =>
+  get(state.settings, 'counterValue', defaultState.counterValue)
+export const getLanguage = (state: Object) => get(state.settings, 'language', defaultState.language)
+export const getOrderAccounts = (state: Object) =>
+  get(state.settings, 'orderAccounts', defaultState.orderAccounts)
 
 export default handleActions(handlers, state)

src/types/common.js

@@ -60,6 +60,9 @@ export type SettingsProfile = {
 export type SettingsDisplay = {
   language: string,
 }
-export type Settings = SettingsProfile & SettingsDisplay
+export type SettingsMoney = {
+  counterValue: string,
+}
+export type Settings = SettingsProfile & SettingsDisplay & SettingsMoney
 
 export type T = (string, ?Object) => string

static/i18n/en/settings.yml

@@ -9,6 +9,7 @@ tabs:
   profile: Profile
 display:
   language: Language
+  counterValue: Counter Value
   orderAccounts: Order accounts
 profile:
   protectWithPassword: Protect local data with a password