new network select component

src/assets/stylesheets/components/_IconNetwork.scss

@@ -0,0 +1,3 @@
+.nl-IconNetwork_Path {
+  @include menu-icon-colors();
+}

src/assets/stylesheets/components/_NetworkSelect.scss

@@ -0,0 +1,93 @@
+.NetworkSelect {
+	display: flex;
+	@media (min-width: $breakpoint-md) {
+		position: relative;
+		margin-left: 34px;
+		&:hover { 
+			.NetworkSelect_List {
+				display: block;
+			}
+		}
+	}
+}
+
+.sw-Header_Content .NetworkSelect {
+	display: none;
+	@media (min-width: $breakpoint-md) {
+		display: flex;
+	}
+}
+
+.NetworkSelect_Top {
+	display: flex;
+	align-items: center;
+	opacity: .7;
+	transition: .15s ease-in;
+	height: 50px;
+	width: 100%;
+	justify-content: center;
+	cursor: pointer;
+	&:hover {
+		opacity: 1;
+		@media (min-width: $breakpoint-md) {
+			.nl-IconNetwork_Arrow {
+				transform: rotate(180deg);
+			}
+		}
+	}
+}
+
+.nl-NavigationLinks_Link.opacityFull {
+	opacity: 1;
+	flex-direction: column;
+	height: auto !important;
+}
+
+.nl-IconNetwork_Arrow {
+	margin-left: 10px;
+	transition: .15s ease-in;
+	path {
+		fill: #fff;
+		opacity: .52;
+	}
+}
+
+.NetworkSelect_List {
+	font-size: 14px;
+	font-weight: 600;
+	list-style: none;
+	padding-left: 0;
+	width: 100%;
+	margin: 0;
+	@media (min-width: $breakpoint-md) {
+		display: none;
+		position: absolute;
+		top: 100%;
+		right: 0;
+		background-color: #fff;
+		width: 180px;
+		border-radius: 4px 0 4px 4px;
+		box-shadow: 0 5px 10px rgba(#000, .05);
+		padding-top: 8px;
+		padding-bottom: 8px;
+	}
+	a {
+		display: flex;
+		width: 100%;
+		align-items: center;
+		justify-content: center;
+		text-decoration: none;
+		color: #fff;
+		transition: .15s ease-in;
+		height: 50px;
+		@media (min-width: $breakpoint-md) {
+			padding: 8px 18px;
+			height: auto;
+			color: $base-text-color;
+			justify-content: flex-start;
+			&:hover {
+				background-color: #f7f7f7;
+			}
+		}
+	}
+}

src/assets/stylesheets/components/_index.scss

@@ -30,6 +30,7 @@
 @import "IconGithub";
 @import "IconLoadMore";
 @import "IconMobileMenu";
+@import "IconNetwork";
 @import "IconPOA";
 @import "IconTelegram";
 @import "IconToFinalize";
@@ -47,6 +48,7 @@
 @import "NewBallot";
 @import "NewBallotMenu";
 @import "NewBallotMenuInfo";
+@import "NetworkSelect";
 @import "SearchBar";
 @import "Select";
 @import "Separator";

src/components/Header/index.js

@@ -1,54 +1,31 @@
 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'
-
-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
-}
+import NetworkSelect from '../NetworkSelect'
 
 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}
+      {showMobileMenu ? (
+        <MobileMenuLinks networkBranch={networkBranch} onClick={onMenuToggle} onNetworkChange={onChange} />
+      ) : null}
       <div className="sw-Header_Content">
         <Logo networkBranch={networkBranch} href={baseRootPath} />
         <div className="sw-Header_Links">
           <NavigationLinks networkBranch={networkBranch} />
           <ButtonNewBallot networkBranch={networkBranch} />
         </div>
-        {networkSelect}
+        <NetworkSelect networkBranch={networkBranch} onChange={onChange} />
         <IconMobileMenu networkBranch={networkBranch} isOpen={showMobileMenu} onClick={onMenuToggle} />
       </div>
     </header>

src/components/MobileMenuLinks/index.js

@@ -1,12 +1,14 @@
 import React from 'react'
 import { ButtonNewBallot } from '../ButtonNewBallot'
 import { NavigationLinks } from '../NavigationLinks'
+import NetworkSelect from '../NetworkSelect'
 
-export const MobileMenuLinks = ({ onClick, networkBranch }) => {
+export const MobileMenuLinks = ({ onClick, networkBranch, onNetworkChange }) => {
   return (
     <div className={`hd-MobileMenuLinks hd-MobileMenuLinks-${networkBranch}`} onClick={onClick}>
       <NavigationLinks networkBranch={networkBranch} />
       <ButtonNewBallot networkBranch={networkBranch} />
+      <NetworkSelect networkBranch={networkBranch} onChange={onNetworkChange} />
     </div>
   )
 }

src/components/NetworkSelect/index.js

@@ -0,0 +1,55 @@
+import React, { Component } from 'react'
+import { constants } from '../../utils/constants'
+import helpers from '../../utils/helpers'
+
+export default class NetworkSelect extends Component {
+  changeNetworkRPC(e) {
+    e.preventDefault()
+    let getCurrentClickedLink = e.target.innerHTML
+    let getCurrentClickedLinkId = ''
+    for (const _netId in constants.NETWORKS) {
+      if (constants.NETWORKS[_netId].FULLNAME === getCurrentClickedLink) {
+        getCurrentClickedLinkId = helpers.netIdByName(constants.NETWORKS[_netId].BRANCH)
+      }
+    }
+    this.props.onChange({ value: getCurrentClickedLinkId })
+  }
+
+  render() {
+    let networkFullNames = []
+    let currentNetworkBranch = ''
+
+    for (const _netId in constants.NETWORKS) {
+      networkFullNames.push(constants.NETWORKS[_netId].FULLNAME)
+      if (constants.NETWORKS[_netId].NAME.toLowerCase() === this.props.networkBranch) {
+        currentNetworkBranch = constants.NETWORKS[_netId].FULLNAME
+      }
+    }
+    const listItems = networkFullNames.map(number => (
+      <li key={number.toString()}>
+        <a href="#" onClick={e => this.changeNetworkRPC(e)}>
+          {number}
+        </a>
+      </li>
+    ))
+    return (
+      <div className={`NetworkSelect nl-NavigationLinks_Link opacityFull`}>
+        <div className={`NetworkSelect_Top`}>
+          <svg className={`nl-IconNetwork`} xmlns="http://www.w3.org/2000/svg" width="18" height="18">
+            <path
+              className={`nl-IconNetwork_Path nl-IconNetwork_Path-${this.props.networkBranch}`}
+              d="M9 18a9 9 0 0 1-9-9 9 9 0 0 1 9-9 9 9 0 0 1 9 9 9 9 0 0 1-9 9zm6.923-8h-1.974c-.116 1.85-.525 3.539-1.167 4.876A6.993 6.993 0 0 0 15.923 10zM9 16c1.51 0 2.747-2.612 2.957-6H6.043c.21 3.388 1.447 6 2.957 6zm-3.782-1.124C4.576 13.539 4.167 11.85 4.051 10H2.077a6.993 6.993 0 0 0 3.141 4.876zM2.077 8h1.974c.116-1.85.525-3.538 1.167-4.876A6.993 6.993 0 0 0 2.077 8zM9 2C7.49 2 6.253 4.612 6.043 8h5.914C11.747 4.612 10.51 2 9 2zm3.782 1.124C13.424 4.462 13.833 6.15 13.949 8h1.974a6.993 6.993 0 0 0-3.141-4.876z"
+            />
+          </svg>
+          <span className={`nl-NavigationLinks_Text nl-NavigationLinks_Text-${this.props.networkBranch}`}>
+            {currentNetworkBranch}
+          </span>
+          <svg className={`nl-IconNetwork_Arrow`} xmlns="http://www.w3.org/2000/svg" width="8" height="4">
+            <path d="M0 0h8L4 4 0 0z" />
+          </svg>
+        </div>
+        <ul className={`NetworkSelect_List`}>{listItems}</ul>
+      </div>
+    )
+  }
+}

src/utils/constants.js

@@ -59,24 +59,28 @@ constants.KOVAN = 'kovan'
 constants.NETWORKS = {
   '42': {
     NAME: 'Kovan',
+    FULLNAME: 'Kovan',
     RPC: 'https://kovan.infura.io/v3/1125fe73d87c4e5396678f4e3089b3dd',
     BRANCH: constants.KOVAN,
     TESTNET: true
   },
   '77': {
     NAME: 'Sokol',
+    FULLNAME: 'Sokol',
     RPC: 'https://sokol.poa.network',
     BRANCH: constants.SOKOL,
     TESTNET: true
   },
   '99': {
     NAME: 'Core',
+    FULLNAME: 'POA Core Chain',
     RPC: 'https://core.poa.network',
     BRANCH: constants.CORE,
     TESTNET: false
   },
   '100': {
     NAME: 'Dai',
+    FULLNAME: 'xDai Stable Chain',
     RPC: 'https://dai.poa.network',
     BRANCH: constants.DAI,
     TESTNET: false