Injecting provider selectors in Header's layout

src/components/Header/index.jsx

@@ -8,6 +8,9 @@ import selector from './selector'
 type Props = {
   provider: string,
   fetchProvider: Function,
+  userAddress: string,
+  network: string,
+  connected: boolean,
 }
 
 class Header extends React.PureComponent<Props> {
@@ -20,9 +23,18 @@ class Header extends React.PureComponent<Props> {
   }
 
   render() {
-    const { provider } = this.props
+    const {
+      provider, userAddress, network, connected,
+    } = this.props
+
     return (
-      <Layout provider={provider} reloadWallet={this.reloadWallet} />
+      <Layout
+        provider={provider}
+        reloadWallet={this.reloadWallet}
+        userAddress={userAddress}
+        network={network}
+        connected={connected}
+      />
     )
   }
 }

src/components/Header/selector.js

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

src/logic/wallets/getWeb3.js

@@ -4,6 +4,36 @@ import Web3 from 'web3'
 import type { ProviderProps } from '~/logic/wallets/store/model/provider'
 import { promisify } from '~/utils/promisify'
 
+export const ETHEREUM_NETWORK = {
+  MAIN: 'MAIN',
+  MORDEN: 'MORDEN',
+  ROPSTEN: 'ROPSTEN',
+  RINKEBY: 'RINKEBY',
+  KOVAN: 'KOVAN',
+  UNKNOWN: 'UNKNOWN',
+}
+
+export const WALLET_PROVIDER = {
+  METAMASK: 'METAMASK',
+  PARITY: 'PARITY',
+  REMOTE: 'REMOTE',
+  UPORT: 'UPORT',
+}
+
+export const ETHEREUM_NETWORK_IDS = {
+  // $FlowFixMe
+  1: ETHEREUM_NETWORK.MAIN,
+  // $FlowFixMe
+  2: ETHEREUM_NETWORK.MORDEN,
+  // $FlowFixMe
+  3: ETHEREUM_NETWORK.ROPSTEN,
+  // $FlowFixMe
+  4: ETHEREUM_NETWORK.RINKEBY,
+  // $FlowFixMe
+  42: ETHEREUM_NETWORK.KOVAN,
+}
+
+
 let web3
 export const getWeb3 = () => web3 || new Web3(window.web3.currentProvider)
 
@@ -19,10 +49,16 @@ const getAccountFrom: Function = async (web3Provider): Promise<string | null> =>
   return accounts && accounts.length > 0 ? accounts[0] : null
 }
 
+const getNetworkIdFrom = async (web3Provider) => {
+  const networkId = await web3Provider.version.network
+
+  return networkId
+}
+
 export const getProviderInfo: Function = async (): Promise<ProviderProps> => {
   if (typeof window.web3 === 'undefined') {
     return {
-      name: '', available: false, loaded: false, account: '',
+      name: '', available: false, loaded: false, account: '', network: 0,
     }
   }
 
@@ -34,8 +70,10 @@ export const getProviderInfo: Function = async (): Promise<ProviderProps> => {
     console.log('Injected web3 detected.')
   }
 
-  const name = isMetamask(web3) ? 'METAMASK' : 'UNKNOWN'
+  const name = isMetamask(web3) ? WALLET_PROVIDER.METAMASK : 'UNKNOWN'
   const account = await getAccountFrom(web3)
+  const network = await getNetworkIdFrom(web3)
+
   const available = account !== null
 
   return {
@@ -43,6 +81,7 @@ export const getProviderInfo: Function = async (): Promise<ProviderProps> => {
     available,
     loaded: true,
     account,
+    network,
   }
 }