Add loop to listen to provider updates

src/components/Header/actions.js

@@ -1,12 +1,14 @@
 // @flow
-import { fetchProvider, removeProvider } from '~/logic/wallets/store/actions'
+import { fetchProvider, recurrentFetchProvider, removeProvider } from '~/logic/wallets/store/actions'
 
 export type Actions = {
   fetchProvider: typeof fetchProvider,
+  recurrentFetchProvider: typeof recurrentFetchProvider,
   removeProvider: typeof removeProvider,
 }
 
 export default {
   fetchProvider,
+  recurrentFetchProvider,
   removeProvider,
 }

src/components/Header/index.jsx

@@ -26,20 +26,39 @@ class HeaderComponent extends React.PureComponent<Props, State> {
     hasError: false,
   }
 
-  componentDidMount() {
-    this.onConnect()
+  async componentDidMount() {
+    const { fetchProvider, recurrentFetchProvider } = this.props
+  
+    let currentProvider: ProviderProps = await fetchProvider(this.props.openSnackbar)
+    this.providerListener = setInterval(async () => {
+      console.log('loop')
+      currentProvider = await recurrentFetchProvider(currentProvider, this.props.openSnackbar)
+    }, 2000)
+  }
+
+  componentDidCatch(error: Error, info: Info) {
+    this.setState({ hasError: true })
+    this.props.openSnackbar(WALLET_ERROR_MSG, 'error')
+
+    logComponentStack(error, info)
   }
 
   onDisconnect = () => {
-    const { removeProvider, openSnackbar } = this.props
+    clearInterval(this.providerListener)
 
-    removeProvider(openSnackbar)
+    this.props.removeProvider(this.props.openSnackbar)
   }
 
-  onConnect = () => {
-    const { fetchProvider, openSnackbar } = this.props
+  onConnect = async () => {
+    const { fetchProvider, recurrentFetchProvider } = this.props
   
-    fetchProvider(openSnackbar)
+    clearInterval(this.providerListener)
+    console.log('onConnect')
+    let currentProvider: ProviderProps = await fetchProvider(this.props.openSnackbar)
+    this.providerListener = setInterval(async () => {
+      console.log('loopConnect')
+      currentProvider = await recurrentFetchProvider(currentProvider, this.props.openSnackbar)
+    }, 2000)
   }
 
   getProviderInfoBased = () => {
@@ -76,14 +95,6 @@ class HeaderComponent extends React.PureComponent<Props, State> {
     )
   }
 
-  componentDidCatch(error: Error, info: Info) {
-    const { openSnackbar } = this.props
-    this.setState({ hasError: true })
-    openSnackbar(WALLET_ERROR_MSG, 'error')
-
-    logComponentStack(error, info)
-  }
-
   render() {
     const info = this.getProviderInfoBased()
     const details = this.getProviderDetailsBased()

src/logic/wallets/store/actions/fetchProvider.js

@@ -44,10 +44,26 @@ const handleProviderNotification = (openSnackbar: Function, provider: ProviderPr
   openSnackbar(msg, variant)
 }
 
+export const recurrentFetchProvider = (currentProvider: ProviderProps, openSnackbar: Function) => async (dispatch: ReduxDispatch<*>) => {
+  const newProvider: ProviderProps = await getProviderInfo()
+
+  if (JSON.stringify(currentProvider) !== JSON.stringify(newProvider)) {
+    console.log('provider updated')
+    console.log(JSON.stringify(currentProvider))
+    console.log(JSON.stringify(newProvider))
+    handleProviderNotification(openSnackbar, newProvider)
+    processProviderResponse(dispatch, newProvider)
+  }
+
+  return newProvider
+}
+
 export default (openSnackbar: Function) => async (dispatch: ReduxDispatch<*>) => {
   const provider: ProviderProps = await getProviderInfo()
-
+  console.log('initial provider', provider)
   handleProviderNotification(openSnackbar, provider)
 
   processProviderResponse(dispatch, provider)
+
+  return provider
 }