Add SyncBackground component

closes #904

src/bridge/BridgeSyncContext.js

@@ -17,12 +17,7 @@ import { setAccountSyncState } from 'actions/bridgeSync'
 import { bridgeSyncSelector, syncStateLocalSelector } from 'reducers/bridgeSync'
 import type { BridgeSyncState } from 'reducers/bridgeSync'
 import { accountsSelector } from 'reducers/accounts'
-import {
+import { SYNC_MAX_CONCURRENT, SYNC_TIMEOUT } from 'config/constants'
-  SYNC_BOOT_DELAY,
-  SYNC_ALL_INTERVAL,
-  SYNC_MAX_CONCURRENT,
-  SYNC_TIMEOUT,
-} from 'config/constants'
 import { getBridgeForCurrency } from '.'
 
 type BridgeSyncProviderProps = {
@@ -151,19 +146,6 @@ class Provider extends Component<BridgeSyncProviderOwnProps, Sync> {
     this.api = sync
   }
 
-  componentDidMount() {
-    const syncLoop = async () => {
-      this.api({ type: 'BACKGROUND_TICK' })
-      this.syncTimeout = setTimeout(syncLoop, SYNC_ALL_INTERVAL)
-    }
-    this.syncTimeout = setTimeout(syncLoop, SYNC_BOOT_DELAY)
-  }
-
-  componentWillUnmount() {
-    clearTimeout(this.syncTimeout)
-  }
-
-  syncTimeout: *
   api: Sync
 
   render() {

src/components/SyncBackground.js

@@ -0,0 +1,36 @@
+// @flow
+
+import React, { PureComponent } from 'react'
+import { BridgeSyncConsumer } from 'bridge/BridgeSyncContext'
+import type { Sync } from 'bridge/BridgeSyncContext'
+
+import { SYNC_BOOT_DELAY, SYNC_ALL_INTERVAL } from 'config/constants'
+
+export class Effect extends PureComponent<{
+  sync: Sync,
+}> {
+  componentDidMount() {
+    const syncLoop = async () => {
+      const { sync } = this.props
+      sync({ type: 'BACKGROUND_TICK' })
+      this.syncTimeout = setTimeout(syncLoop, SYNC_ALL_INTERVAL)
+    }
+    this.syncTimeout = setTimeout(syncLoop, SYNC_BOOT_DELAY)
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this.syncTimeout)
+  }
+
+  syncTimeout: *
+
+  render() {
+    return null
+  }
+}
+
+const SyncBackground = () => (
+  <BridgeSyncConsumer>{sync => <Effect sync={sync} />}</BridgeSyncConsumer>
+)
+
+export default SyncBackground

src/components/layout/Default.js

@@ -31,6 +31,7 @@ import AppRegionDrag from 'components/AppRegionDrag'
 import IsUnlocked from 'components/IsUnlocked'
 import SideBar from 'components/MainSideBar'
 import TopBar from 'components/TopBar'
+import SyncBackground from 'components/SyncBackground'
 import SyncContinuouslyPendingOperations from '../SyncContinouslyPendingOperations'
 
 const Main = styled(GrowScroll).attrs({
@@ -94,6 +95,7 @@ class Default extends Component<Props> {
             ))}
 
             <SyncContinuouslyPendingOperations priority={20} interval={SYNC_PENDING_INTERVAL} />
+            <SyncBackground />
 
             <div id="sticky-back-to-top-root" />