Merge pull request #701 from gre/proposal-up-to-date

Add 'Outdated' concept

src/components/TopBar/ActivityIndicator.js

@@ -10,6 +10,7 @@ import type { T } from 'types/common'
 import type { AsyncState } from 'reducers/bridgeSync'
 
 import { globalSyncStateSelector } from 'reducers/bridgeSync'
+import { isUpToDateSelector } from 'reducers/accounts'
 import { BridgeSyncConsumer } from 'bridge/BridgeSyncContext'
 import CounterValues from 'helpers/countervalues'
 
@@ -24,78 +25,45 @@ import ItemContainer from './ItemContainer'
 
 const mapStateToProps = createStructuredSelector({
   globalSyncState: globalSyncStateSelector,
+  isUpToDate: isUpToDateSelector,
 })
 
 type Props = {
-  // FIXME: eslint should see that it is used in static method
-  isGlobalSyncStatePending: boolean, // eslint-disable-line react/no-unused-prop-types
-
   error: ?Error,
   isPending: boolean,
   isError: boolean,
+  isUpToDate: boolean,
   t: T,
   cvPoll: *,
   setSyncBehavior: *,
 }
 
-type State = {
+class ActivityIndicatorInner extends PureComponent<Props> {
-  hasClicked: boolean,
-  isGlobalSyncStatePending: boolean,
-  isFirstSync: boolean,
-}
-
-class ActivityIndicatorInner extends PureComponent<Props, State> {
-  state = {
-    hasClicked: false,
-    isFirstSync: true,
-
-    // FIXME: eslint should see that it is used in static method
-    isGlobalSyncStatePending: false, // eslint-disable-line react/no-unused-state
-  }
-
-  static getDerivedStateFromProps(nextProps: Props, prevState: State) {
-    const nextState = {
-      ...prevState,
-      isGlobalSyncStatePending: nextProps.isGlobalSyncStatePending,
-    }
-
-    if (prevState.isGlobalSyncStatePending && !nextProps.isGlobalSyncStatePending) {
-      nextState.isFirstSync = false
-      nextState.hasClicked = false
-    }
-
-    return nextState
-  }
-
   onClick = () => {
     this.props.cvPoll()
     this.props.setSyncBehavior({ type: 'SYNC_ALL_ACCOUNTS', priority: 5 })
   }
 
-  handleRefresh = () => {
-    this.setState({ hasClicked: true })
-    this.onClick()
-  }
-
   render() {
-    const { isPending, isError, error, t } = this.props
+    const { isUpToDate, isPending, isError, error, t } = this.props
-    const { hasClicked, isFirstSync } = this.state
+    const isDisabled = isError || isPending
-    const isDisabled = isError || (isPending && (isFirstSync || hasClicked))
+    const isRotating = isPending
-    const isRotating = isPending && (hasClicked || isFirstSync)
 
     const content = (
-      <ItemContainer disabled={isDisabled} onClick={isDisabled ? undefined : this.handleRefresh}>
+      <ItemContainer disabled={isDisabled} onClick={isDisabled ? undefined : this.onClick}>
         <Rotating
           size={16}
           isRotating={isRotating}
-          color={isError ? 'alertRed' : isRotating ? 'grey' : 'positiveGreen'}
+          color={isError ? 'alertRed' : isRotating ? 'grey' : isUpToDate ? 'positiveGreen' : 'grey'}
         >
           {isError ? (
             <IconExclamationCircle size={16} />
           ) : isRotating ? (
             <IconLoader size={16} />
-          ) : (
+          ) : isUpToDate ? (
             <IconCheckCircle size={16} />
+          ) : (
+            <IconExclamationCircle size={16} />
           )}
         </Rotating>
         <Box
@@ -115,19 +83,21 @@ class ActivityIndicatorInner extends PureComponent<Props, State> {
                 ml={2}
                 cursor="pointer"
                 style={{ textDecoration: 'underline', pointerEvents: 'all' }}
-                onClick={this.handleRefresh}
+                onClick={this.onClick}
               >
                 {t('app:common.sync.refresh')}
               </Box>
             </Fragment>
-          ) : (
+          ) : isUpToDate ? (
             t('app:common.sync.upToDate')
+          ) : (
+            t('app:common.sync.outdated')
           )}
         </Box>
       </ItemContainer>
     )
 
-    if (error) {
+    if (isError && error) {
       return (
         <Tooltip
           tooltipBg="alertRed"
@@ -146,7 +116,15 @@ class ActivityIndicatorInner extends PureComponent<Props, State> {
   }
 }
 
-const ActivityIndicator = ({ globalSyncState, t }: { globalSyncState: AsyncState, t: T }) => (
+const ActivityIndicator = ({
+  globalSyncState,
+  t,
+  isUpToDate,
+}: {
+  globalSyncState: AsyncState,
+  t: T,
+  isUpToDate: boolean,
+}) => (
   <BridgeSyncConsumer>
     {setSyncBehavior => (
       <CounterValues.PollingConsumer>
@@ -156,9 +134,9 @@ const ActivityIndicator = ({ globalSyncState, t }: { globalSyncState: AsyncState
           return (
             <ActivityIndicatorInner
               t={t}
+              isUpToDate={isUpToDate}
               isPending={isPending}
-              isGlobalSyncStatePending={globalSyncState.pending}
+              isError={!!isError && !isUpToDate} // we only show error if it's not up to date. this hide a bit error that happen from time to time
-              isError={!!isError}
               error={isError ? globalSyncState.error : null}
               cvPoll={cvPolling.poll}
               setSyncBehavior={setSyncBehavior}

src/config/constants.js

@@ -28,6 +28,7 @@ export const SYNC_BOOT_DELAY = 2 * 1000
 export const SYNC_ALL_INTERVAL = 120 * 1000
 export const GENUINE_TIMEOUT = intFromEnv('GENUINE_TIMEOUT', 120 * 1000)
 export const SYNC_TIMEOUT = intFromEnv('SYNC_TIMEOUT', 30 * 1000)
+export const OUTDATED_CONSIDERED_DELAY = intFromEnv('OUTDATED_CONSIDERED_DELAY', 5 * 60 * 1000)
 
 export const CHECK_APP_INTERVAL_WHEN_INVALID = 600
 export const CHECK_APP_INTERVAL_WHEN_VALID = 1200
@@ -65,6 +66,7 @@ export const DEBUG_ACTION = boolFromEnv('DEBUG_ACTION')
 export const DEBUG_TAB_KEY = boolFromEnv('DEBUG_TAB_KEY')
 export const DEBUG_LIBCORE = boolFromEnv('DEBUG_LIBCORE')
 export const DEBUG_WS = boolFromEnv('DEBUG_WS')
+export const DEBUG_SYNC = boolFromEnv('DEBUG_SYNC')
 export const LEDGER_RESET_ALL = boolFromEnv('LEDGER_RESET_ALL')
 export const LEDGER_DEBUG_ALL_LANGS = boolFromEnv('LEDGER_DEBUG_ALL_LANGS')
 export const SKIP_GENUINE = boolFromEnv('SKIP_GENUINE')

src/helpers/init-libcore.js

@@ -3,6 +3,7 @@
 import logger from 'logger'
 import invariant from 'invariant'
 import network from 'api/network'
+import { serializeError } from './errors'
 
 const lib = require('@ledgerhq/ledger-core')
 
@@ -96,7 +97,7 @@ const NJSHttpClient = new lib.NJSHttpClient({
       r.complete(urlConnection, null)
     } catch (err) {
       const urlConnection = createHttpConnection(res, err.message)
-      r.complete(urlConnection, { code: 0, message: err.message })
+      r.complete(urlConnection, { code: 0, message: JSON.stringify(serializeError(err)) })
     }
   },
 })

src/helpers/libcore.js

@@ -11,8 +11,7 @@ import type { NJSAccount, NJSOperation } from '@ledgerhq/ledger-core/src/ledgerc
 
 import { isSegwitAccount } from 'helpers/bip32'
 import * as accountIdHelper from 'helpers/accountId'
-import { createCustomErrorClass } from './errors'
+import { createCustomErrorClass, deserializeError } from './errors'
-
 import { getAccountPlaceholderName, getNewAccountPlaceholderName } from './accountName'
 
 const NoAddressesFound = createCustomErrorClass('NoAddressesFound')
@@ -158,7 +157,11 @@ const coreSyncAccount = (core, account) =>
           (payload && payload.getString('EV_SYNC_ERROR_MESSAGE')) ||
           'Sync failed'
         ).replace(' (EC_PRIV_KEY_INVALID_FORMAT)', '')
-        reject(new Error(message))
+        try {
+          reject(deserializeError(JSON.parse(message)))
+        } catch (e) {
+          reject(message)
+        }
         return
       }
       if (

src/reducers/accounts.js

@@ -4,8 +4,8 @@ import { createSelector } from 'reselect'
 import { handleActions } from 'redux-actions'
 import { createAccountModel } from '@ledgerhq/live-common/lib/models/account'
 import logger from 'logger'
-
 import type { Account, AccountRaw } from '@ledgerhq/live-common/lib/types'
+import { OUTDATED_CONSIDERED_DELAY, DEBUG_SYNC } from 'config/constants'
 
 export type AccountsState = Account[]
 const state: AccountsState = []
@@ -62,6 +62,20 @@ const handlers: Object = {
 
 export const accountsSelector = (state: { accounts: AccountsState }): Account[] => state.accounts
 
+export const isUpToDateSelector = createSelector(accountsSelector, accounts =>
+  accounts.every(a => {
+    const { lastSyncDate } = a
+    const { blockAvgTime } = a.currency
+    if (!blockAvgTime) return true
+    const outdated =
+      Date.now() - (lastSyncDate || 0) > blockAvgTime * 1000 + OUTDATED_CONSIDERED_DELAY
+    if (outdated && DEBUG_SYNC) {
+      logger.log('account not up to date', a)
+    }
+    return !outdated
+  }),
+)
+
 export const hasAccountsSelector = createSelector(accountsSelector, accounts => accounts.length > 0)
 
 export const currenciesSelector = createSelector(accountsSelector, accounts =>

static/i18n/en/app.yml

@@ -40,6 +40,7 @@ common:
   sync:
     syncing: Synchronizing...
     upToDate: Up to date
+    outdated: Outdated
     error: Synchronization error
     refresh: Refresh
     ago: Synced {{time}}