Added loaded and avaialble provider selector. Updated Header component

src/components/Header/index.jsx

@@ -15,13 +15,30 @@ type Props = {
   fetchProvider: Function,
   userAddress: string,
   network: string,
-  connected: boolean,
+  loaded: boolean,
+  available: boolean,
 }
 
 type State = {
   hasError: boolean,
 }
 
+const getProviderInfoBased = (hasError, loaded, available, provider, network, userAddress) => {
+  if (hasError || !loaded) {
+    return <ProviderDisconnected />
+  }
+
+  return <ProviderInfo provider={provider} network={network} userAddress={userAddress} connected={available} />
+}
+
+const getProviderDetailsBased = (hasError, loaded, available, provider, network, userAddress) => {
+  if (hasError || !loaded) {
+    return <ConnectDetails />
+  }
+
+  return <ProviderDetails provider={provider} network={network} userAddress={userAddress} connected={available} />
+}
+
 class Header extends React.PureComponent<Props, State> {
   state = {
     hasError: false,
@@ -37,46 +54,14 @@ class Header extends React.PureComponent<Props, State> {
     logComponentStack(error, info)
   }
 
-  getProviderInfoBased = (hasError, disconnected) => {
-    if (hasError) {
-      // return
-    }
-
-    if (disconnected) {
-      return <ProviderDisconnected />
-    }
-
-    const {
-      provider, network, userAddress, connected,
-    } = this.props
-
-    return <ProviderInfo provider={provider} network={network} userAddress={userAddress} connected={connected} />
-  }
-
-  getProviderDetailsBased = (hasError, disconnected) => {
-    if (hasError) {
-      // return
-    }
-
-    if (disconnected) {
-      return <ConnectDetails />
-    }
-
-    const {
-      provider, network, userAddress, connected,
-    } = this.props
-
-    return <ProviderDetails provider={provider} network={network} userAddress={userAddress} connected={connected} />
-  }
-
   render() {
-    const { connected } = this.props
-
     const { hasError } = this.state
-    const providerDisconnected = !hasError && !connected
+    const {
+      loaded, available, provider, network, userAddress,
+    } = this.props
 
-    const info = this.getProviderInfoBased(hasError, providerDisconnected)
+    const info = getProviderInfoBased(hasError, loaded, available, provider, network, userAddress)
-    const details = this.getProviderDetailsBased(hasError, providerDisconnected)
+    const details = getProviderDetailsBased(hasError, loaded, available, provider, network, userAddress)
 
     return <Layout providerInfo={info} providerDetails={details} />
   }

src/components/Header/selector.js

@@ -1,10 +1,11 @@
 // @flow
 import { createStructuredSelector } from 'reselect'
-import { providerNameSelector, userAccountSelector, networkSelector, connectedSelector } from '~/logic/wallets/store/selectors'
+import { providerNameSelector, userAccountSelector, networkSelector, availableSelector, loadedSelector } from '~/logic/wallets/store/selectors'
 
 export default createStructuredSelector({
   provider: providerNameSelector,
   userAddress: userAccountSelector,
   network: networkSelector,
-  connected: connectedSelector,
+  loaded: loadedSelector,
+  available: availableSelector,
 })

src/logic/wallets/store/selectors/index.js

@@ -36,7 +36,12 @@ export const networkSelector = createSelector(
   },
 )
 
-export const connectedSelector = createSelector(
+export const loadedSelector = createSelector(
   providerSelector,
-  (provider: Provider) => provider.get('loaded') && provider.get('available'),
+  (provider: Provider) => provider.get('loaded'),
+)
+
+export const availableSelector = createSelector(
+  providerSelector,
+  (provider: Provider) => provider.get('available'),
 )