CityOfZion · comountainclimber · Aug 3, 2021 · Aug 3, 2021 · Aug 3, 2021 · Aug 3, 2021
diff --git a/__tests__/components/Modals/__snapshots__/ConfirmModal.test.js.snap b/__tests__/components/Modals/__snapshots__/ConfirmModal.test.js.snap
@@ -111,6 +111,8 @@ exports[`ConfirmModal should render without crashing 1`] = `
               "--button-secondary-background": "#fff",
               "--button-secondary-hover": "#F1F5FC",
               "--button-secondary-text": "#394152",
+              "--chain-switch-background": "#eaf2f7",
+              "--chain-switch-text": "#3D4D56",
               "--contacts-delete-contact-name": "#394152",
               "--contacts-group-header-background": "#F1F5FC",
               "--contacts-group-header-text": "#394152",
@@ -249,6 +251,8 @@ exports[`ConfirmModal should render without crashing 1`] = `
               "--button-secondary-background": "#fff",
               "--button-secondary-hover": "#F1F5FC",
               "--button-secondary-text": "#394152",
+              "--chain-switch-background": "#eaf2f7",
+              "--chain-switch-text": "#3D4D56",
               "--contacts-delete-contact-name": "#394152",
               "--contacts-group-header-background": "#F1F5FC",
               "--contacts-group-header-text": "#394152",
@@ -479,6 +483,8 @@ exports[`ConfirmModal should render without crashing 1`] = `
                   "--button-secondary-background": "#fff",
                   "--button-secondary-hover": "#F1F5FC",
                   "--button-secondary-text": "#394152",
+                  "--chain-switch-background": "#eaf2f7",
+                  "--chain-switch-text": "#3D4D56",
                   "--contacts-delete-contact-name": "#394152",
                   "--contacts-group-header-background": "#F1F5FC",
                   "--contacts-group-header-text": "#394152",
@@ -617,6 +623,8 @@ exports[`ConfirmModal should render without crashing 1`] = `
                   "--button-secondary-background": "#fff",
                   "--button-secondary-hover": "#F1F5FC",
                   "--button-secondary-text": "#394152",
+                  "--chain-switch-background": "#eaf2f7",
+                  "--chain-switch-text": "#3D4D56",
                   "--contacts-delete-contact-name": "#394152",
                   "--contacts-group-header-background": "#F1F5FC",
                   "--contacts-group-header-text": "#394152",
@@ -755,6 +763,8 @@ exports[`ConfirmModal should render without crashing 1`] = `
                   "--button-secondary-background": "#fff",
                   "--button-secondary-hover": "#F1F5FC",
                   "--button-secondary-text": "#394152",
+                  "--chain-switch-background": "#eaf2f7",
+                  "--chain-switch-text": "#3D4D56",
                   "--contacts-delete-contact-name": "#394152",
                   "--contacts-group-header-background": "#F1F5FC",
                   "--contacts-group-header-text": "#394152",
@@ -898,6 +908,8 @@ exports[`ConfirmModal should render without crashing 1`] = `
                     "--button-secondary-background": "#fff",
                     "--button-secondary-hover": "#F1F5FC",
                     "--button-secondary-text": "#394152",
+                    "--chain-switch-background": "#eaf2f7",
+                    "--chain-switch-text": "#3D4D56",
                     "--contacts-delete-contact-name": "#394152",
                     "--contacts-group-header-background": "#F1F5FC",
                     "--contacts-group-header-text": "#394152",
@@ -1050,6 +1062,8 @@ exports[`ConfirmModal should render without crashing 1`] = `
                       "--button-secondary-background": "#fff",
                       "--button-secondary-hover": "#F1F5FC",
                       "--button-secondary-text": "#394152",
+                      "--chain-switch-background": "#eaf2f7",
+                      "--chain-switch-text": "#3D4D56",
                       "--contacts-delete-contact-name": "#394152",
                       "--contacts-group-header-background": "#F1F5FC",
                       "--contacts-group-header-text": "#394152",

diff --git a/__tests__/components/__snapshots__/NetworkConfigurationTooltip.test.js.snap b/__tests__/components/__snapshots__/NetworkConfigurationTooltip.test.js.snap
@@ -1060,6 +1060,8 @@ exports[`Sidebar renders without crashing 1`] = `
                                               "--button-secondary-background": "#fff",
                                               "--button-secondary-hover": "#F1F5FC",
                                               "--button-secondary-text": "#394152",
+                                              "--chain-switch-background": "#eaf2f7",
+                                              "--chain-switch-text": "#3D4D56",
                                               "--contacts-delete-contact-name": "#394152",
                                               "--contacts-group-header-background": "#F1F5FC",
                                               "--contacts-group-header-text": "#394152",

diff --git a/app/components/ChainSwitch/ChainSwitch.jsx b/app/components/ChainSwitch/ChainSwitch.jsx
@@ -0,0 +1,68 @@
+// @flow
+import React from 'react'
+import Switch from 'react-switch'
+import classNames from 'classnames'
+
+import styles from './ChainSwitch.scss'
+import { imageMap } from '../../assets/nep5/svg'
+import OldNeoLogo from '../../assets/images/neo-logo.png'
+import { THEMES } from '../../core/constants'
+
+const NEO_IMAGE = imageMap.NEO
+
+type Props = {
+  chain: string,
+  updateChain: () => void,
+  theme: string,
+}
+
+export default class CloseButton extends React.Component<Props> {
+  render = () => {
+    const { chain, updateChain } = this.props
+
+    const { theme } = this.props
+    const onColor = theme === THEMES.LIGHT ? '#5c677f' : '#5c677f'
+    const offColor = theme === THEMES.LIGHT ? '#5c677f' : '#5c677f'
+
+    return (
+      <div className={styles.chainToggleContainer}>
+        <div
+          className={classNames({
+            [styles.labelContainer]: true,
+            [styles.disabled]: chain === 'neo3',
+          })}
+        >
+          <img src={OldNeoLogo} alt="legacy" />
+          <h5>LEGACY</h5>{' '}
+        </div>
+
+        <div>
+          <label htmlFor="neon-switch">
+            <Switch
+              checked={chain === 'neo3'}
+              onChange={updateChain}
+              onColor={onColor}
+              offColor={offColor}
+              handleDiameter={24}
+              uncheckedIcon={false}
+              checkedIcon={false}
+              height={22}
+              width={48}
+              className="neon-chain-switch"
+              id="neon-chain-switch"
+            />
+          </label>
+        </div>
+        <div
+          className={classNames({
+            [styles.labelContainer]: true,
+            [styles.disabled]: chain !== 'neo3',
+          })}
+        >
+          <img src={NEO_IMAGE} alt="n3" />
+          <h5>N3</h5>{' '}
+        </div>
+      </div>
+    )
+  }
+}
diff --git a/app/components/ChainSwitch/ChainSwitch.scss b/app/components/ChainSwitch/ChainSwitch.scss
@@ -0,0 +1,51 @@
+.chainToggleContainer {
+  margin-bottom: 12px;
+  margin-top: 8px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: var(--chain-switch-background);
+  height: 34px;
+  padding: 4px 12px;
+  border-radius: 20px;
+
+  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.21);
+
+  div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    font-size: 13px;
+    color: var(--chain-switch-text);
+    letter-spacing: 0.37px;
+    text-align: center;
+  }
+
+  .labelContainer {
+    min-width: 85px;
+  }
+
+  label {
+    margin: 0 24px;
+  }
+
+  h5 {
+    margin: 0;
+  }
+
+  img {
+    max-height: 24px;
+    margin-right: 8px;
+  }
+}
+
+.disabled {
+  opacity: 0.4;
+}
+
+.switch {
+  .react-switch-bg {
+    box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
+  }
+}
diff --git a/app/components/ChainSwitch/index.js b/app/components/ChainSwitch/index.js
@@ -0,0 +1,6 @@
+import { compose } from 'recompose'
+
+import withThemeData from '../../hocs/withThemeData'
+import ChainSwitch from './ChainSwitch'
+
+export default compose(withThemeData())(ChainSwitch)
diff --git a/app/containers/Home/Home.scss b/app/containers/Home/Home.scss
@@ -281,19 +281,3 @@ $navigation-margin: 20px;
 .centeredInput {
   margin-top: 20px;
 }
-
-.chainToggleContainer {
-  margin-bottom: 12px;
-  margin-top: 8px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  label {
-    margin: 0 24px;
-  }
-
-  h5 {
-    margin: 0;
-  }
-}
diff --git a/app/containers/Home/HomeLayout.jsx b/app/containers/Home/HomeLayout.jsx
@@ -11,7 +11,7 @@ import darkLogo from '../../assets/images/logo-dark.png'
 import withLanguageData from '../../hocs/withLanguageData'
 import { updateSettingsActions } from '../../actions/settingsActions'
 import LanguageSelect from '../../components/Inputs/LanguageSelect'
-import Switch from '../../components/Inputs/Switch'
+import ChainSwitch from '../../components/ChainSwitch'
 
 type Props = {
   children: React$Node,
@@ -44,6 +44,7 @@ class HomeLayout extends React.Component<Props, State> {
       theme,
       language,
       setLanguageSetting,
+      chain,
     } = this.props
     const dynamicImage = theme === 'Light' ? lightLogo : darkLogo
     const { languageMenuOpen } = this.state
@@ -57,16 +58,6 @@ class HomeLayout extends React.Component<Props, State> {
         }
       >
         <div className={styles.innerHomeContainer}>
-          <div className={styles.chainToggleContainer}>
-            <h5>NEO LEGACY</h5>
-            <Switch
-              checked={this.props.chain === 'neo3'}
-              handleCheck={this.updateChain}
-            />
-
-            <h5>N3</h5>
-          </div>
-
           {renderNavigation && renderNavigation()}
           <LanguageSelect
             setLanguageSetting={setLanguageSetting}
@@ -89,6 +80,7 @@ class HomeLayout extends React.Component<Props, State> {
           <div className={styles.loginHeader}>
             <FormattedMessage id="authLogin" />
           </div>
+          <ChainSwitch updateChain={this.updateChain} chain={chain} />
           {children}
         </div>
       </div>

diff --git a/app/styles/main.global.scss b/app/styles/main.global.scss
@@ -282,3 +282,14 @@ a {
     top: 40px !important;
   }
 }
+
+.neon-chain-switch {
+  margin-left: 6px;
+  .react-switch-bg {
+    box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.9);
+  }
+
+  .react-switch-handle {
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.5);
+  }
+}
diff --git a/app/themes/Dark.js b/app/themes/Dark.js
@@ -193,6 +193,11 @@ export const MOBILE = {
   '--mobile-header-instructions-icon': '#7E858D',
 }
 
+export const CHAIN_SWITCH = {
+  '---chain-switch-background': '#28313a',
+  '--chain-switch-text': '#00e599',
+}
+
 export default {
   ...NEWS,
   ...CONTACTS,
@@ -216,4 +221,5 @@ export default {
   ...NOTIFICATIONS,
   ...RELEASE_NOTES,
   ...MOBILE,
+  ...CHAIN_SWITCH,
 }
diff --git a/app/themes/Light.js b/app/themes/Light.js
@@ -200,6 +200,11 @@ export const MOBILE = {
   '--mobile-header-instructions-icon': '#282828',
 }
 
+export const CHAIN_SWITCH = {
+  '--chain-switch-background': '#eaf2f7',
+  '--chain-switch-text': '#3D4D56',
+}
+
 export default {
   ...NEWS,
   ...AMOUNTS_PANEL,
@@ -223,4 +228,5 @@ export default {
   ...NOTIFICATIONS,
   ...RELEASE_NOTES,
   ...MOBILE,
+  ...CHAIN_SWITCH,
 }