Fetch counterValues before connectDevice step, add translations

src/actions/counterValues.js

@@ -58,7 +58,9 @@ export const fetchCounterValues: FetchCounterValues = coinType => (dispatch, get
 
   Promise.all(coinTypes.map(fetchCounterValuesByCoinType)).then(result => {
     const newCounterValues = result.reduce((r, v) => {
-      r[v.symbol] = v.values
+      if (v.symbol) {
+        r[v.symbol] = v.values
+      }
       return r
     }, {})
     dispatch(updateCounterValues(newCounterValues))

src/components/AccountPage/index.js

@@ -131,12 +131,14 @@ class AccountPage extends PureComponent<Props, State> {
                 </Box>
                 <Box horizontal justifyContent="center" flow={7}>
                   <BalanceSincePercent
+                    t={t}
                     alignItems="center"
                     totalBalance={totalBalance}
                     sinceBalance={sinceBalance}
                     since={selectedTime}
                   />
                   <BalanceSinceDiff
+                    t={t}
                     fiat="USD"
                     alignItems="center"
                     totalBalance={totalBalance}

src/components/BalanceSummary/BalanceInfos.js

@@ -4,6 +4,7 @@ import React from 'react'
 import styled from 'styled-components'
 
 import type { Unit } from '@ledgerhq/currencies'
+import type { T } from 'types/common'
 
 import Box from 'components/base/Box'
 import Text from 'components/base/Text'
@@ -13,12 +14,15 @@ const Sub = styled(Text).attrs({
   ff: 'Open Sans',
   color: 'warnGrey',
   fontSize: 4,
-})``
+})`
+  text-transform: lowercase;
+`
 
 type BalanceSinceProps = {
   since: string,
   totalBalance: number,
   sinceBalance: number,
+  t: T,
 }
 
 type BalanceTotalProps = {
@@ -33,7 +37,7 @@ type Props = {
 } & BalanceSinceProps
 
 export function BalanceSincePercent(props: BalanceSinceProps) {
-  const { totalBalance, sinceBalance, since, ...otherProps } = props
+  const { t, totalBalance, sinceBalance, since, ...otherProps } = props
   return (
     <Box {...otherProps}>
       <FormattedVal
@@ -42,13 +46,13 @@ export function BalanceSincePercent(props: BalanceSinceProps) {
         alwaysShowSign
         fontSize={7}
       />
-      <Sub>since one {since}</Sub>
+      <Sub>{t('time:since', { since: t(`time:${since}`) })}</Sub>
     </Box>
   )
 }
 
 export function BalanceSinceDiff(props: Props) {
-  const { totalBalance, sinceBalance, since, fiat, ...otherProps } = props
+  const { t, totalBalance, sinceBalance, since, fiat, ...otherProps } = props
   return (
     <Box {...otherProps}>
       <FormattedVal
@@ -58,7 +62,7 @@ export function BalanceSinceDiff(props: Props) {
         val={totalBalance - sinceBalance}
         fontSize={7}
       />
-      <Sub>since one {since}</Sub>
+      <Sub>{t('time:since', { since: t(`time:${since}`) })}</Sub>
     </Box>
   )
 }
@@ -89,17 +93,18 @@ BalanceTotal.defaultProps = {
 }
 
 function BalanceInfos(props: Props) {
-  const { fiat, totalBalance, since, sinceBalance } = props
+  const { t, fiat, totalBalance, since, sinceBalance } = props
   return (
     <Box horizontal alignItems="flex-end" flow={7}>
       <BalanceTotal fiat={fiat} totalBalance={totalBalance}>
-        <Sub>{'Total balance'}</Sub>
+        <Sub>{t('dashboard:totalBalance')}</Sub>
       </BalanceTotal>
       <BalanceSincePercent
         alignItems="flex-end"
         totalBalance={totalBalance}
         sinceBalance={sinceBalance}
         since={since}
+        t={t}
       />
       <BalanceSinceDiff
         fiat="USD"
@@ -107,6 +112,7 @@ function BalanceInfos(props: Props) {
         totalBalance={totalBalance}
         sinceBalance={sinceBalance}
         since={since}
+        t={t}
       />
     </Box>
   )

src/components/DashboardPage/index.js

@@ -139,6 +139,7 @@ class DashboardPage extends PureComponent<Props, State> {
               daysCount={daysCount}
               renderHeader={({ totalBalance, selectedTime, sinceBalance }) => (
                 <BalanceInfos
+                  t={t}
                   fiat="USD"
                   totalBalance={totalBalance}
                   since={selectedTime}

src/components/base/GrowScroll/index.js

@@ -28,7 +28,7 @@ class GrowScroll extends PureComponent<Props> {
     this.handleUpdate(this.props)
 
     if (this._scrollbar) {
-      this._scrollbar.addListener(this.handleScroll)
+      this._scrollbar.addListener(this.props.onScroll)
     }
   }
 
@@ -38,7 +38,7 @@ class GrowScroll extends PureComponent<Props> {
 
   componentWillUnmount() {
     if (this._scrollbar) {
-      this._scrollbar.removeListener(this.handleScroll)
+      this._scrollbar.removeListener(this.props.onScroll)
     }
   }
 
@@ -48,8 +48,6 @@ class GrowScroll extends PureComponent<Props> {
     }
   }
 
-  handleScroll = this.props.onScroll
-
   _scrollbar = undefined
 
   render() {

src/components/modals/AddAccount/index.js

@@ -21,6 +21,7 @@ import { getCurrentDevice } from 'reducers/devices'
 import { sendEvent } from 'renderer/events'
 
 import { addAccount, updateAccount } from 'actions/accounts'
+import { fetchCounterValues } from 'actions/counterValues'
 
 import Box from 'components/base/Box'
 import Button from 'components/base/Button'
@@ -55,9 +56,13 @@ const Steps = {
           />
         </Box>
         <Box horizontal justifyContent="flex-end">
-          <Button primary type="submit">
+          {props.fetchingCounterValues ? (
-            {props.t('addAccount:title')}
+            'Fetching counterValues...'
-          </Button>
+          ) : (
+            <Button primary type="submit">
+              {props.t('addAccount:title')}
+            </Button>
+          )}
         </Box>
       </Box>
     </form>
@@ -113,41 +118,47 @@ const Steps = {
 type Step = 'chooseCurrency' | 'connectDevice' | 'inProgress' | 'listAccounts'
 
 type Props = {
-  t: T,
   accounts: Accounts,
-  archivedAccounts: Accounts,
   addAccount: Function,
-  updateAccount: Function,
+  archivedAccounts: Accounts,
   canCreateAccount: boolean,
   closeModal: Function,
+  counterValues: Object,
   currentDevice: Device | null,
+  fetchCounterValues: Function,
+  t: T,
+  updateAccount: Function,
 }
 
 type State = {
-  step: Step,
-  currency: Currency | null,
   accounts: Accounts,
+  currency: Currency | null,
+  fetchingCounterValues: boolean,
   progress: null | Object,
+  step: Step,
 }
 
 const mapStateToProps: MapStateToProps<*, *, *> = state => ({
   accounts: getAccounts(state),
   archivedAccounts: getArchivedAccounts(state),
   canCreateAccount: canCreateAccount(state),
+  counterValues: state.counterValues,
   currentDevice: getCurrentDevice(state),
 })
 
 const mapDispatchToProps = {
   addAccount,
-  updateAccount,
   closeModal,
+  fetchCounterValues,
+  updateAccount,
 }
 
 const defaultState = {
+  step: 'chooseCurrency',
+  progress: null,
+  fetchingCounterValues: false,
   currency: null,
   accounts: [],
-  progress: null,
-  step: 'chooseCurrency',
 }
 
 class AddAccountModal extends PureComponent<Props, State> {
@@ -160,11 +171,25 @@ class AddAccountModal extends PureComponent<Props, State> {
   }
 
   componentWillReceiveProps(nextProps) {
+    const { fetchingCounterValues, currency } = this.state
+
     if (nextProps.accounts) {
       this.setState(prev => ({
         accounts: differenceBy(prev.accounts, nextProps.accounts, 'id'),
       }))
     }
+
+    if (currency !== null && fetchingCounterValues) {
+      const { code } = getDefaultUnitByCoinType(currency.coinType)
+      const symbol = `${code.toString()}-USD`
+
+      if (nextProps.counterValues[symbol]) {
+        this.setState({
+          fetchingCounterValues: false,
+          step: 'connectDevice',
+        })
+      }
+    }
   }
 
   componentDidUpdate() {
@@ -200,16 +225,17 @@ class AddAccountModal extends PureComponent<Props, State> {
 
   getStepProps() {
     const { currentDevice, archivedAccounts, canCreateAccount, updateAccount, t } = this.props
-    const { currency, step, progress, accounts } = this.state
+    const { currency, step, progress, accounts, fetchingCounterValues } = this.state
 
     const props = (predicate, props) => (predicate ? props : {})
 
     return {
       ...props(step === 'chooseCurrency', {
-        t,
         currency,
+        fetchingCounterValues,
         onChangeCurrency: this.handleChangeCurrency,
         onSubmit: this.handleSubmit,
+        t,
       }),
       ...props(step === 'connectDevice', {
         t,
@@ -274,9 +300,16 @@ class AddAccountModal extends PureComponent<Props, State> {
   handleSubmit = (e: SyntheticEvent<HTMLFormElement>) => {
     e.preventDefault()
 
-    this.setState({
+    const { fetchCounterValues } = this.props
-      step: 'connectDevice',
+    const { currency } = this.state
-    })
+
+    if (currency !== null) {
+      this.setState({
+        fetchingCounterValues: true,
+      })
+
+      fetchCounterValues(currency.coinType)
+    }
   }
 
   handleClose = () => {

static/i18n/en/dashboard.yml

@@ -4,3 +4,4 @@ summary: here is the summary of your account
 summary_plural: 'here is the summary of your {{count}} accounts'
 noAccounts: no accounts
 recentActivity: Recent activity
+totalBalance: Total balance

static/i18n/en/time.yml

@@ -2,3 +2,5 @@ day: Day
 week: Week
 month: Month
 year: Year
+
+since: since one {{since}}