diff --git a/src/components/Header/index.jsx b/src/components/Header/index.jsx index 83cefe88..d69651ad 100644 --- a/src/components/Header/index.jsx +++ b/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 { @@ -20,9 +23,18 @@ class Header extends React.PureComponent { } render() { - const { provider } = this.props + const { + provider, userAddress, network, connected, + } = this.props + return ( - + ) } } diff --git a/src/components/Header/selector.js b/src/components/Header/selector.js index 11b9dd34..2148b817 100644 --- a/src/components/Header/selector.js +++ b/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, }) diff --git a/src/logic/wallets/getWeb3.js b/src/logic/wallets/getWeb3.js index 9ffdcba1..87738771 100644 --- a/src/logic/wallets/getWeb3.js +++ b/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 => 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 => { 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 => { 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 => { available, loaded: true, account, + network, } }