Merge pull request #1956 from LiskHQ/1894-add-network-switcher-to-spl…

…ash-screen

Add network switcher to splash screen - Closes #1894

i18n/locales/en/common.json

@@ -98,7 +98,9 @@
   "Confirm your passphrase": "Confirm your passphrase",
   "Confirmation in the next step": "Confirmation in the next step",
   "Confirmations": "Confirmations",
+  "Connect": "Connect",
   "Connect your Hardware Wallet": "Connect your Hardware Wallet",
+  "Connected": "Connected",
   "Connected to ": "Connected to ",
   "Connected to:": "Connected to:",
   "Connecting to network": "Connecting to network",
@@ -491,8 +493,8 @@
   "Try using menu for navigation.": "Try using menu for navigation.",
   "Type": "Type",
   "Type at least 3 characters": "Type at least 3 characters",
-  "Unable to connect to the node": "Unable to connect to the node",
   "Unable to connect to the node, no response from the server.": "Unable to connect to the node, no response from the server.",
+  "Unable to connect to the node, please check the address and try again": "Unable to connect to the node, please check the address and try again",
   "Unable to detect the communication layer with your Hardware Wallet": "Unable to detect the communication layer with your Hardware Wallet",
   "Unable to detect the communication layer. Is ledger connected? Is Fido U2F Extension Installed?": "Unable to detect the communication layer. Is ledger connected? Is Fido U2F Extension Installed?",
   "Undo": "Undo",
@@ -586,6 +588,7 @@
   "checking availability": "checking availability",
   "for full access": "for full access",
   "from": "from",
+  "ie. 192.168.0.1": "ie. 192.168.0.1",
   "if the problem persists": "if the problem persists",
   "missed": "missed",
   "or": "or",

jest.config.js

@@ -19,6 +19,8 @@ module.exports = {
     'src/store/reducers/liskService.test.js',
     'src/store/middlewares/socket.test.js',
     'src/store/middlewares/peers.test.js',
+    'src/components/registerV2/registerV2.test.js',
+    'src/components/headerV2/headerV2.test.js',
   ],
   verbose: false,
   cache: false,
@@ -127,6 +129,8 @@ module.exports = {
     'src/components/hwWallet/trezorLogin.js',
     'src/components/loginV2/loginV2.js',
     'src/utils/hwWallet.js',
+    'src/components/headerV2/headerV2.js',
+    'src/components/registerV2/registerV2.js',
   ],
   coverageThreshold: {
     global: {

src/components/headerV2/headerV2.css

@@ -14,6 +14,12 @@
   &:global(.dark) {
     background: var(--color-maastricht-blue);
     border-bottom: 1px solid var(--light-border-color);
+
+    & .dropdownHandler {
+      background: var(--color-maastricht-blue);
+      color: var(--color-white);
+      border: 1px solid var(--light-border-color);
+    }
   }
 }
 
@@ -67,7 +73,7 @@
   height: var(--header-elements-height);
   justify-content: space-between;
   min-height: var(--header-elements-height);
-  min-width: 135px;
+  min-width: 241px;
   padding: 0 20px;
   position: relative;
   width: auto;
@@ -79,3 +85,96 @@
     content: '';
   }
 }
+
+.spanHolder {
+  min-height: var(--header-elements-height);
+  min-width: 241px;
+  padding: 0 20px;
+  position: relative;
+  width: auto;
+}
+
+.dropdown {
+  max-width: 241px;
+  right: auto;
+  top: calc(100% + -10px);
+}
+
+.button {
+  @mixin contentSmall bold;
+
+  margin-bottom: 5px;
+  height: 32px;
+  width: 100%;
+}
+
+.networkInput {
+  height: 32px !important;
+  margin: 10px 0;
+
+  & input {
+    height: 30px !important;
+  }
+}
+
+.networkSpan {
+  display: flex;
+  flex-direction: column;
+
+  & input {
+    @mixin contentNormal;
+
+    margin-top: 10px;
+    padding: 0 10px;
+  }
+}
+
+.feedbackMessage {
+  margin: 5px 0;
+  border-radius: var(--border-radius-standard);
+
+  & .error {
+    color: var(--color-white);
+    background: var(--color-burnt-sienna);
+  }
+}
+
+.feedbackError {
+  max-height: 140px !important;
+  margin: 10px 0;
+  padding: 0 10px;
+}
+
+.errorInput {
+  border-color: #ec6868 !important;
+  color: #ec6868 !important;
+}
+
+.activeDropdown {
+  background-color: blue;
+}
+
+.spinner {
+  color: var(--color-ultramarine-blue);
+  position: absolute;
+  right: 30px;
+  margin-top: -22px;
+  z-index: 50;
+}
+
+.show {
+  opacity: 1;
+  transition: opacity var(--animation-speed-fast) linear var(--animation-delay-standard);
+}
+
+.hide {
+  opacity: 0;
+  transition: opacity var(--animation-speed-fast) linear;
+}
+
+.icons img {
+  position: absolute;
+  right: 30px;
+  margin-top: -25px;
+  z-index: 50;
+}