add network select

src/App.js

@@ -102,8 +102,10 @@ class App extends Component {
         {commonStore.loading ? <Loading networkBranch={networkBranch} /> : null}
         <Header
           baseRootPath={commonStore.rootPath}
+          injectedWeb3={contractsStore.injectedWeb3}
           netId={contractsStore.netId}
           networkBranch={networkBranch}
+          onChange={this.props.onNetworkChange}
           onMenuToggle={this.toggleMobileMenu}
           showMobileMenu={this.state.showMobileMenu}
         />

src/assets/stylesheets/components/_Header.scss

@@ -7,7 +7,6 @@
     height: $header-height;
     justify-content: center;
     left: 0;
-    overflow: hidden;
     position: fixed;
     right: 0;
     top: 0;
@@ -58,4 +57,4 @@
     @media (min-width: $breakpoint-md) {
         display: flex;
     }
-}
+}

src/assets/stylesheets/components/_Select.scss

@@ -0,0 +1,8 @@
+.top-Select {
+  flex-grow: 1;
+  max-width: 140px;
+
+  @media (min-width: $breakpoint-xl) {
+      margin-left: 20px;
+  }
+}

src/assets/stylesheets/components/_index.scss

@@ -48,8 +48,9 @@
 @import "NewBallotMenu";
 @import "NewBallotMenuInfo";
 @import "SearchBar";
+@import "Select";
 @import "Separator";
 @import "SocialIcons";
 @import "Validator";
 @import "VoteProgressBar";
-@import "Votes";
+@import "Votes";

src/components/Header/index.js

@@ -1,11 +1,44 @@
 import React from 'react'
+import Select from 'react-select'
+
 import { ButtonNewBallot } from '../ButtonNewBallot'
 import { IconMobileMenu } from '../IconMobileMenu'
 import { Logo } from '../Logo'
 import { MobileMenuLinks } from '../MobileMenuLinks'
 import { NavigationLinks } from '../NavigationLinks'
 
-export const Header = ({ baseRootPath = '', networkBranch = undefined, onMenuToggle, showMobileMenu = false }) => {
+import { constants } from '../../utils/constants'
+
+const getNetworkOptions = () => {
+  let selectOptions = []
+
+  for (const _netId in constants.NETWORKS) {
+    selectOptions.push({ value: _netId, label: `Network: ${constants.NETWORKS[_netId].NAME}` })
+  }
+
+  return selectOptions
+}
+
+export const Header = ({
+  baseRootPath = '',
+  injectedWeb3,
+  netId,
+  networkBranch = undefined,
+  onChange,
+  onMenuToggle,
+  showMobileMenu = false
+}) => {
+  let networkSelect = !injectedWeb3 ? (
+    <Select
+      className="top-Select"
+      clearable={false}
+      onChange={onChange}
+      options={getNetworkOptions()}
+      searchable={false}
+      value={netId}
+    />
+  ) : null
+
   return (
     <header className={`sw-Header sw-Header-${networkBranch} ${showMobileMenu ? 'sw-Header-menu-open' : ''}`}>
       {showMobileMenu ? <MobileMenuLinks networkBranch={networkBranch} onClick={onMenuToggle} /> : null}
@@ -15,6 +48,7 @@ export const Header = ({ baseRootPath = '', networkBranch = undefined, onMenuTog
           <NavigationLinks networkBranch={networkBranch} />
           <ButtonNewBallot networkBranch={networkBranch} />
         </div>
+        {networkSelect}
         <IconMobileMenu networkBranch={networkBranch} isOpen={showMobileMenu} onClick={onMenuToggle} />
       </div>
     </header>

src/index.js

@@ -7,7 +7,7 @@ import ballotsStore from './stores/BallotsStore'
 import commonStore from './stores/CommonStore'
 import contractsStore from './stores/ContractsStore'
 import createBrowserHistory from 'history/createBrowserHistory'
-import getWeb3 from './utils/getWeb3'
+import getWeb3, { changeNetwork } from './utils/getWeb3'
 import registerServiceWorker from './utils/registerServiceWorker'
 import swal from 'sweetalert2'
 import validatorStore from './stores/ValidatorStore'
@@ -34,54 +34,7 @@ class AppMainRouter extends Component {
 
     getWeb3()
       .then(async web3Config => {
-        await getContractsAddresses(constants.NETWORKS[web3Config.netId].BRANCH)
-
-        contractsStore.setWeb3Instance(web3Config)
-
-        const setPoaConsensus = contractsStore.setPoaConsensus(web3Config)
-        const setBallotsStorage = contractsStore.setBallotsStorage(web3Config)
-        const setKeysManager = contractsStore.setKeysManager(web3Config)
-        const setProxyStorage = contractsStore.setProxyStorage(web3Config)
-        const setVotingToChangeKeys = contractsStore.setVotingToChangeKeys(web3Config)
-        const setVotingToChangeMinThreshold = contractsStore.setVotingToChangeMinThreshold(web3Config)
-        const setVotingToChangeProxy = contractsStore.setVotingToChangeProxy(web3Config)
-        const setValidatorMetadata = contractsStore.setValidatorMetadata(web3Config)
-
-        let promises = [
-          setPoaConsensus,
-          setBallotsStorage,
-          setKeysManager,
-          setProxyStorage,
-          setVotingToChangeKeys,
-          setVotingToChangeMinThreshold,
-          setVotingToChangeProxy,
-          setValidatorMetadata
-        ]
-
-        const networkName = constants.NETWORKS[web3Config.netId].NAME.toLowerCase()
-        if (networkName === constants.CORE || networkName === constants.SOKOL) {
-          // if we're in Core or Sokol
-          promises.push(contractsStore.setEmissionFunds(web3Config))
-          promises.push(contractsStore.setVotingToManageEmissionFunds(web3Config))
-        }
-
-        await Promise.all(promises)
-
-        await contractsStore.setMiningKey(web3Config)
-        await contractsStore.setVotingKey(web3Config)
-
-        contractsStore.getKeysBallotThreshold()
-        contractsStore.getProxyBallotThreshold()
-        contractsStore.getBallotCancelingThreshold()
-
-        await contractsStore.getBallotsLimits()
-
-        await contractsStore.getAllValidatorMetadata()
-        await contractsStore.getAllBallots()
-
-        console.log('votingKey', contractsStore.votingKey)
-        console.log('miningKey', contractsStore.miningKey)
-
+        await this.initialize(web3Config)
         commonStore.hideLoading()
       })
       .catch(error => {
@@ -96,11 +49,75 @@ class AppMainRouter extends Component {
       })
   }
 
+  initialize = async web3Config => {
+    await getContractsAddresses(constants.NETWORKS[web3Config.netId].BRANCH)
+
+    contractsStore.setWeb3Instance(web3Config)
+
+    const setPoaConsensus = contractsStore.setPoaConsensus(web3Config)
+    const setBallotsStorage = contractsStore.setBallotsStorage(web3Config)
+    const setKeysManager = contractsStore.setKeysManager(web3Config)
+    const setProxyStorage = contractsStore.setProxyStorage(web3Config)
+    const setVotingToChangeKeys = contractsStore.setVotingToChangeKeys(web3Config)
+    const setVotingToChangeMinThreshold = contractsStore.setVotingToChangeMinThreshold(web3Config)
+    const setVotingToChangeProxy = contractsStore.setVotingToChangeProxy(web3Config)
+    const setValidatorMetadata = contractsStore.setValidatorMetadata(web3Config)
+
+    let promises = [
+      setPoaConsensus,
+      setBallotsStorage,
+      setKeysManager,
+      setProxyStorage,
+      setVotingToChangeKeys,
+      setVotingToChangeMinThreshold,
+      setVotingToChangeProxy,
+      setValidatorMetadata
+    ]
+
+    const networkName = constants.NETWORKS[web3Config.netId].NAME.toLowerCase()
+    if (networkName === constants.CORE || networkName === constants.SOKOL) {
+      // if we're in Core or Sokol
+      promises.push(contractsStore.setEmissionFunds(web3Config))
+      promises.push(contractsStore.setVotingToManageEmissionFunds(web3Config))
+    }
+
+    await Promise.all(promises)
+
+    await contractsStore.setMiningKey(web3Config)
+    await contractsStore.setVotingKey(web3Config)
+
+    contractsStore.getKeysBallotThreshold()
+    contractsStore.getProxyBallotThreshold()
+    contractsStore.getBallotCancelingThreshold()
+
+    await contractsStore.getBallotsLimits()
+
+    await contractsStore.getAllValidatorMetadata()
+    await contractsStore.getAllBallots()
+
+    console.log('votingKey', contractsStore.votingKey)
+    console.log('miningKey', contractsStore.miningKey)
+  }
+
+  onNetworkChange = async e => {
+    commonStore.showLoading()
+
+    const netId = e.value
+    const web3Config = changeNetwork(netId)
+
+    contractsStore.resetContracts()
+    ballotsStore.reset()
+
+    await this.initialize(web3Config)
+
+    commonStore.hideLoading()
+  }
+
   render() {
     return (
       <Provider {...stores}>
         <Router history={history}>
-          <Route component={App} />
+          <Route component={props => <App onNetworkChange={this.onNetworkChange} {...props} />} />
         </Router>
       </Provider>
     )

src/stores/BallotsStore.js

@@ -6,6 +6,10 @@ class BallotsStore {
   constructor() {
     this.ballotCards = []
   }
+
+  reset() {
+    this.ballotCards = []
+  }
 }
 
 const ballotsStore = new BallotsStore()

src/stores/ContractsStore.js

@@ -46,6 +46,7 @@ class ContractsStore {
   @observable minBallotDuration
   @observable validatorsMetadata
   @observable netId
+  @observable injectedWeb3
 
   constructor() {
     this.votingKey = null
@@ -53,6 +54,7 @@ class ContractsStore {
     this.validatorsMetadata = {}
     this.validatorLimits = { keys: null, minThreshold: null, proxy: null }
     this.minBallotDuration = { keys: 0, minThreshold: 0, proxy: 0 }
+    this.injectedWeb3 = true
   }
 
   @computed
@@ -84,6 +86,21 @@ class ContractsStore {
   setWeb3Instance = web3Config => {
     this.web3Instance = web3Config.web3Instance
     this.netId = web3Config.netId
+    this.injectedWeb3 = web3Config.injectedWeb3
+  }
+
+  @action('Reset contracts')
+  resetContracts = () => {
+    this.poaConsensus = null
+    this.ballotsStorage = null
+    this.emissionFunds = null
+    this.keysManager = null
+    this.proxyStorage = null
+    this.votingToChangeKeys = null
+    this.votingToChangeMinThreshold = null
+    this.votingToChangeProxy = null
+    this.votingToManageEmissionFunds = null
+    this.validatorMetadata = null
   }
 
   @action('Set PoA Consensus contract')

src/utils/getWeb3.js

@@ -29,6 +29,7 @@ let getWeb3 = () => {
       let netIdName
       let netId
       let defaultAccount = null
+      let injectedWeb3 = web3 !== null
 
       if (web3) {
         netId = await web3.eth.net.getId()
@@ -71,10 +72,24 @@ let getWeb3 = () => {
         web3Instance: web3,
         netIdName,
         netId,
-        defaultAccount
+        defaultAccount,
+        injectedWeb3
       })
     })
   })
 }
 
+export const changeNetwork = netId => {
+  const network = constants.NETWORKS[netId]
+  const provider = new Web3.providers.HttpProvider(network.RPC)
+  const web3Instance = new Web3(provider)
+  return {
+    web3Instance,
+    netIdName: network.NAME,
+    netId,
+    defaultAccount: null,
+    injectedWeb3: false
+  }
+}
+
 export default getWeb3