(add) keys section's styles

2018-12-13 19:01:06 -03:00 · 2018-12-13 19:01:06 -03:00 · 094f34794a
parent 344aa98a16
commit 094f34794a
18 changed files with 1113 additions and 242 deletions
--- a/src/App.js
+++ b/src/App.js
@ -201,20 +201,6 @@ class App extends Component {

  render() {
    let loader = this.state.loading ? <Loading netId={this.state.web3Config.netId} /> : ''
-    // let createKeyBtn = (
-    //   <div className="create-keys">
-    //     <h1>Create keys from initial key</h1>
-    //     <h2>
-    //       In this application, you will create mining, payout and voting keys. The app will make your initial key
-    //       unusable after the process. Please proceed with care, don't lose your keys and follow instructions.
-    //     </h2>
-    //     <div className="create-keys-button-container">
-    //       <button className="create-keys-button" onClick={this.onClick} disabled={this.state.isDisabledBtn}>
-    //         Generate keys
-    //       </button>
-    //     </div>
-    //   </div>
-    // )

    return (
      <div className="lo-App">
@ -222,7 +208,12 @@ class App extends Component {
        {loader}
        <section className="lo-App_Content">
          {this.state.keysGenerated ? (
-            <Keys mining={this.state.mining} voting={this.state.voting} payout={this.state.payout} />
+            <Keys
+              mining={this.state.mining}
+              networkBranch={this.state.networkBranch}
+              payout={this.state.payout}
+              voting={this.state.voting}
+            />
          ) : (
            <Home onClick={this.onClick} disabled={this.state.isDisabledBtn} networkBranch={this.state.networkBranch} />
          )}
--- a/src/assets/images/Keys/dai.svg
+++ b/src/assets/images/Keys/dai.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14">
+    <path fill="#fec042" fill-rule="evenodd" d="M13 10a1 1 0 0 1-1-1V2H5a1 1 0 0 1 0-2h8a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1zm-3-5v8a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1zM8 6H2v6h6V6z"/>
+</svg>
--- a/src/assets/images/Keys/poa.svg
+++ b/src/assets/images/Keys/poa.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14">
+    <path fill="#5C34A2" fill-rule="evenodd" d="M13 10a1 1 0 0 1-1-1V2H5a1 1 0 0 1 0-2h8a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1zm-3-5v8a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1zM8 6H2v6h6V6z"/>
+</svg>
--- a/src/assets/images/Keys/sokol.svg
+++ b/src/assets/images/Keys/sokol.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14">
+    <path fill="#8ce1d7" fill-rule="evenodd" d="M13 10a1 1 0 0 1-1-1V2H5a1 1 0 0 1 0-2h8a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1zm-3-5v8a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1zM8 6H2v6h6V6z"/>
+</svg>
--- a/src/assets/stylesheets/components/_ButtonDownload.scss
+++ b/src/assets/stylesheets/components/_ButtonDownload.scss
@ -0,0 +1,48 @@
+$sw-ButtonDownload-height: 44px !default;
+
+.sw-ButtonDownload {
+
+    @include button-base($poa-purple, $sw-ButtonDownload-height);
+    @include button-focus-active-hover($poa-purple);
+    @include button-disabled($poa-purple);
+    @include button-shadow($poa-purple);
+
+    &#{ & }-poa {
+        background-color: $poa-purple;
+        @include button-focus-active-hover($poa-purple);
+        @include button-shadow($poa-purple);
+    }
+
+    &#{ & }-sokol {
+        background-color: $sokol-cyan;
+        @include button-focus-active-hover($sokol-cyan);
+        @include button-shadow($sokol-cyan);
+    }
+
+    &#{ & }-dai {
+        background-color: $xdai-orange;
+        @include button-focus-active-hover($xdai-orange);
+        @include button-shadow($xdai-orange);
+    }
+
+    .ky-Keys_Block & {
+        margin-top: auto;
+
+        @media (min-width: $breakpoint-lg) {
+            max-width: fit-content;
+        }
+    }
+}
+
+.sw-ButtonDownload_Text {
+
+    @include button-text(#fff, 16px);
+    margin-right: 65px;
+
+}
+
+.sw-ButtonDownload_Icon {
+    display: block;
+    height: 16px;
+    width: 18px;
+}
--- a/src/assets/stylesheets/components/_Keys.scss
+++ b/src/assets/stylesheets/components/_Keys.scss
@ -0,0 +1,164 @@
+$ky-Keys-gap: 40px;
+
+@mixin keys-color-variants($property) {
+
+    &#{ & }-poa {
+        #{ $property }: $poa-purple;
+    }
+
+    &#{ & }-dai {
+        #{ $property }: $xdai-orange;
+    }
+
+    &#{ & }-sokol {
+        #{ $property }: $sokol-cyan;
+    }
+
+}
+
+.ky-Keys {
+    padding-bottom: $ky-Keys-gap;
+    padding-top: $ky-Keys-gap;
+
+    @media (min-width: $breakpoint-md) {
+        display: grid;
+        grid-column-gap: $ky-Keys-gap;
+        grid-row-gap: $ky-Keys-gap;
+        grid-template-columns: 1fr 1fr;
+    }
+}
+
+.ky-Keys_Block {
+    border-radius: 10px;
+    border: 1px solid $base-border-color;
+    display: flex;
+    flex-direction: column;
+    margin-bottom: $ky-Keys-gap;
+    padding: 30px 35px 30px 30px;
+
+    @media (min-width: $breakpoint-md) {
+        margin-bottom: 0;
+    }
+
+    @include keys-color-variants('border-color');
+
+}
+
+.ky-Keys_BlockTitle {
+    color: #333;
+    font-size: 18px;
+    font-weight: 400;
+    line-height: 1.2;
+    margin: 0 0 25px;
+    text-align: left;
+
+    @include keys-color-variants('color');
+}
+
+.ky-Keys_HashContainer {
+    display: flex;
+    margin-bottom: 15px;
+}
+
+.ky-Keys_Hash {
+    color: $poa-purple;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 1.2;
+    margin: 0;
+    text-align: left;
+    word-break: break-word;
+
+    @include keys-color-variants('color');
+}
+
+.ky-Keys_Copy {
+    background-image: url('#{ $base-images-path }/Keys/poa.svg');
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    background-size: 14px 14px;
+    cursor: pointer;
+    height: 20px;
+    width: 20px;
+
+    &#{ & }-poa {
+        background-image: url('#{ $base-images-path }/Keys/poa.svg');
+    }
+
+    &#{ & }-sokol {
+        background-image: url('#{ $base-images-path }/Keys/sokol.svg');
+    }
+
+    &#{ & }-dai {
+        background-image: url('#{ $base-images-path }/Keys/dai.svg');
+    }
+
+    .ky-Keys_HashContainer & {
+        margin-left: 3px;
+        margin-top: -4px;
+    }
+
+    .ky-Keys_PasswordContainer & {
+        margin-left: 3px;
+    }
+}
+
+.ky-Keys_PasswordContainer {
+    align-items: center;
+    display: flex;
+    margin-bottom: 25px;
+}
+
+.ky-Keys_PasswordLabel {
+    color: #333;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 1.2;
+    text-align: left;
+
+    .ky-Keys_PasswordContainer & {
+        margin-right: 5px;
+    }
+}
+
+.ky-Keys_PasswordInput {
+    background-color: transparent;
+    border: none;
+    color: #333;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 1.2;
+    margin: 0;
+    padding: 0;
+    text-align: left;
+}
+
+.ky-Keys_Description {
+    color: #777;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 1.5;
+    margin: 0 0 25px;
+    text-align: left;
+}
+
+.ky-Keys_Warning {
+    color: #777;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 1.5;
+    margin: 0;
+    text-align: left;
+
+    @include keys-color-variants('color');
+}
+
+.ky-Keys_WarningIcon {
+    height: 48px;
+    margin-bottom: 30px;
+    width: 48px;
+}
+
+.ky-Keys_WarningIconPath {
+    @include keys-color-variants('fill');
+}
--- a/src/assets/stylesheets/components/_index.scss
+++ b/src/assets/stylesheets/components/_index.scss
@ -1,4 +1,5 @@
@import "App";
+@import "ButtonDownload";
@import "ButtonGenerate";
@import "Footer";
@import "Header";
@ -7,6 +8,7 @@
@import "IconPOA";
@import "IconTelegram";
@import "IconTwitter";
+@import "Keys";
@import "LogoPOA";
@import "LogoSokol";
@import "MainImage";
--- a/src/assets/stylesheets/helpers/_button-mixins.scss
+++ b/src/assets/stylesheets/helpers/_button-mixins.scss
@ -10,6 +10,7 @@
    line-height: $button-height;
    outline: none;
    padding: 0 15px;
+    text-decoration: none;
    transition: background-color 0.25s ease-out;
 }

--- a/src/assets/stylesheets/helpers/_variables.scss
+++ b/src/assets/stylesheets/helpers/_variables.scss
@ -5,7 +5,7 @@ $xdai-orange: #fec042;
 $xdai-gray: #f2f6f8;

 // base colors
-$base-border-color: #e9e9e9;
+$base-border-color: #dfdfdf;
 $base-title-color: #333;
 $base-text-color: #777;
 $base-text-color-light: #9b9b9b;
--- a/src/assets/stylesheets/index.css
+++ b/src/assets/stylesheets/index.css
@ -23,6 +23,220 @@
 .text-center {
  text-align: center; }

+.rc-tooltip.rc-tooltip-zoom-enter,
+.rc-tooltip.rc-tooltip-zoom-leave {
+  display: block; }
+
+.rc-tooltip-zoom-enter,
+.rc-tooltip-zoom-appear {
+  opacity: 0;
+  -webkit-animation-duration: 0.3s;
+  animation-duration: 0.3s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+  -webkit-animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
+  animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
+  -webkit-animation-play-state: paused;
+  animation-play-state: paused; }
+
+.rc-tooltip-zoom-leave {
+  -webkit-animation-duration: 0.3s;
+  animation-duration: 0.3s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+  -webkit-animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05);
+  animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05);
+  -webkit-animation-play-state: paused;
+  animation-play-state: paused; }
+
+.rc-tooltip-zoom-enter.rc-tooltip-zoom-enter-active,
+.rc-tooltip-zoom-appear.rc-tooltip-zoom-appear-active {
+  -webkit-animation-name: rcToolTipZoomIn;
+  animation-name: rcToolTipZoomIn;
+  -webkit-animation-play-state: running;
+  animation-play-state: running; }
+
+.rc-tooltip-zoom-leave.rc-tooltip-zoom-leave-active {
+  -webkit-animation-name: rcToolTipZoomOut;
+  animation-name: rcToolTipZoomOut;
+  -webkit-animation-play-state: running;
+  animation-play-state: running; }
+
+@-webkit-keyframes rcToolTipZoomIn {
+  0% {
+    opacity: 0;
+    -webkit-transform-origin: 50% 50%;
+    transform-origin: 50% 50%;
+    -webkit-transform: scale(0, 0);
+    transform: scale(0, 0); }
+  100% {
+    opacity: 1;
+    -webkit-transform-origin: 50% 50%;
+    transform-origin: 50% 50%;
+    -webkit-transform: scale(1, 1);
+    transform: scale(1, 1); } }
+
+@keyframes rcToolTipZoomIn {
+  0% {
+    opacity: 0;
+    -webkit-transform-origin: 50% 50%;
+    transform-origin: 50% 50%;
+    -webkit-transform: scale(0, 0);
+    transform: scale(0, 0); }
+  100% {
+    opacity: 1;
+    -webkit-transform-origin: 50% 50%;
+    transform-origin: 50% 50%;
+    -webkit-transform: scale(1, 1);
+    transform: scale(1, 1); } }
+
+@-webkit-keyframes rcToolTipZoomOut {
+  0% {
+    opacity: 1;
+    -webkit-transform-origin: 50% 50%;
+    transform-origin: 50% 50%;
+    -webkit-transform: scale(1, 1);
+    transform: scale(1, 1); }
+  100% {
+    opacity: 0;
+    -webkit-transform-origin: 50% 50%;
+    transform-origin: 50% 50%;
+    -webkit-transform: scale(0, 0);
+    transform: scale(0, 0); } }
+
+@keyframes rcToolTipZoomOut {
+  0% {
+    opacity: 1;
+    -webkit-transform-origin: 50% 50%;
+    transform-origin: 50% 50%;
+    -webkit-transform: scale(1, 1);
+    transform: scale(1, 1); }
+  100% {
+    opacity: 0;
+    -webkit-transform-origin: 50% 50%;
+    transform-origin: 50% 50%;
+    -webkit-transform: scale(0, 0);
+    transform: scale(0, 0); } }
+
+.rc-tooltip {
+  position: absolute;
+  z-index: 1070;
+  display: block;
+  visibility: visible;
+  font-size: 12px;
+  line-height: 1.5;
+  opacity: 0.9; }
+
+.rc-tooltip-hidden {
+  display: none; }
+
+.rc-tooltip-placement-top,
+.rc-tooltip-placement-topLeft,
+.rc-tooltip-placement-topRight {
+  padding: 5px 0 9px 0; }
+
+.rc-tooltip-placement-right,
+.rc-tooltip-placement-rightTop,
+.rc-tooltip-placement-rightBottom {
+  padding: 0 5px 0 9px; }
+
+.rc-tooltip-placement-bottom,
+.rc-tooltip-placement-bottomLeft,
+.rc-tooltip-placement-bottomRight {
+  padding: 9px 0 5px 0; }
+
+.rc-tooltip-placement-left,
+.rc-tooltip-placement-leftTop,
+.rc-tooltip-placement-leftBottom {
+  padding: 0 9px 0 5px; }
+
+.rc-tooltip-inner {
+  padding: 8px 10px;
+  color: #fff;
+  text-align: left;
+  text-decoration: none;
+  background-color: #373737;
+  border-radius: 6px;
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.17);
+  min-height: 34px; }
+
+.rc-tooltip-arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid; }
+
+.rc-tooltip-placement-top .rc-tooltip-arrow,
+.rc-tooltip-placement-topLeft .rc-tooltip-arrow,
+.rc-tooltip-placement-topRight .rc-tooltip-arrow {
+  bottom: 4px;
+  margin-left: -5px;
+  border-width: 5px 5px 0;
+  border-top-color: #373737; }
+
+.rc-tooltip-placement-top .rc-tooltip-arrow {
+  left: 50%; }
+
+.rc-tooltip-placement-topLeft .rc-tooltip-arrow {
+  left: 15%; }
+
+.rc-tooltip-placement-topRight .rc-tooltip-arrow {
+  right: 15%; }
+
+.rc-tooltip-placement-right .rc-tooltip-arrow,
+.rc-tooltip-placement-rightTop .rc-tooltip-arrow,
+.rc-tooltip-placement-rightBottom .rc-tooltip-arrow {
+  left: 4px;
+  margin-top: -5px;
+  border-width: 5px 5px 5px 0;
+  border-right-color: #373737; }
+
+.rc-tooltip-placement-right .rc-tooltip-arrow {
+  top: 50%; }
+
+.rc-tooltip-placement-rightTop .rc-tooltip-arrow {
+  top: 15%;
+  margin-top: 0; }
+
+.rc-tooltip-placement-rightBottom .rc-tooltip-arrow {
+  bottom: 15%; }
+
+.rc-tooltip-placement-left .rc-tooltip-arrow,
+.rc-tooltip-placement-leftTop .rc-tooltip-arrow,
+.rc-tooltip-placement-leftBottom .rc-tooltip-arrow {
+  right: 4px;
+  margin-top: -5px;
+  border-width: 5px 0 5px 5px;
+  border-left-color: #373737; }
+
+.rc-tooltip-placement-left .rc-tooltip-arrow {
+  top: 50%; }
+
+.rc-tooltip-placement-leftTop .rc-tooltip-arrow {
+  top: 15%;
+  margin-top: 0; }
+
+.rc-tooltip-placement-leftBottom .rc-tooltip-arrow {
+  bottom: 15%; }
+
+.rc-tooltip-placement-bottom .rc-tooltip-arrow,
+.rc-tooltip-placement-bottomLeft .rc-tooltip-arrow,
+.rc-tooltip-placement-bottomRight .rc-tooltip-arrow {
+  top: 4px;
+  margin-left: -5px;
+  border-width: 0 5px 5px;
+  border-bottom-color: #373737; }
+
+.rc-tooltip-placement-bottom .rc-tooltip-arrow {
+  left: 50%; }
+
+.rc-tooltip-placement-bottomLeft .rc-tooltip-arrow {
+  left: 15%; }
+
+.rc-tooltip-placement-bottomRight .rc-tooltip-arrow {
+  right: 15%; }
+
 * {
  box-sizing: border-box; }

@ -388,6 +602,70 @@ body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
      padding-left: 20px;
      padding-right: 20px; } }

+.sw-ButtonDownload {
+  align-items: center;
+  background-color: #5a2da5;
+  border-radius: 5px;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  height: 44px;
+  justify-content: space-between;
+  line-height: 44px;
+  outline: none;
+  padding: 0 15px;
+  text-decoration: none;
+  transition: background-color 0.25s ease-out;
+  box-shadow: 0 5px 10px 0 rgba(90, 45, 165, 0.3); }
+  .sw-ButtonDownload:focus, .sw-ButtonDownload:active, .sw-ButtonDownload:hover {
+    background-color: #44227d; }
+  .sw-ButtonDownload[disabled]:focus, .sw-ButtonDownload[disabled].active, .sw-ButtonDownload[disabled]:hover {
+    background-color: #5a2da5; }
+  .sw-ButtonDownload[disabled] {
+    cursor: not-allowed;
+    opacity: 0.7; }
+  .sw-ButtonDownload.sw-ButtonDownload-poa {
+    background-color: #5a2da5;
+    box-shadow: 0 5px 10px 0 rgba(90, 45, 165, 0.3); }
+    .sw-ButtonDownload.sw-ButtonDownload-poa:focus, .sw-ButtonDownload.sw-ButtonDownload-poa:active, .sw-ButtonDownload.sw-ButtonDownload-poa:hover {
+      background-color: #44227d; }
+    .sw-ButtonDownload.sw-ButtonDownload-poa[disabled]:focus, .sw-ButtonDownload.sw-ButtonDownload-poa[disabled].active, .sw-ButtonDownload.sw-ButtonDownload-poa[disabled]:hover {
+      background-color: #5a2da5; }
+  .sw-ButtonDownload.sw-ButtonDownload-sokol {
+    background-color: #8ce1d7;
+    box-shadow: 0 5px 10px 0 rgba(140, 225, 215, 0.3); }
+    .sw-ButtonDownload.sw-ButtonDownload-sokol:focus, .sw-ButtonDownload.sw-ButtonDownload-sokol:active, .sw-ButtonDownload.sw-ButtonDownload-sokol:hover {
+      background-color: #64d6c9; }
+    .sw-ButtonDownload.sw-ButtonDownload-sokol[disabled]:focus, .sw-ButtonDownload.sw-ButtonDownload-sokol[disabled].active, .sw-ButtonDownload.sw-ButtonDownload-sokol[disabled]:hover {
+      background-color: #8ce1d7; }
+  .sw-ButtonDownload.sw-ButtonDownload-dai {
+    background-color: #fec042;
+    box-shadow: 0 5px 10px 0 rgba(254, 192, 66, 0.3); }
+    .sw-ButtonDownload.sw-ButtonDownload-dai:focus, .sw-ButtonDownload.sw-ButtonDownload-dai:active, .sw-ButtonDownload.sw-ButtonDownload-dai:hover {
+      background-color: #feaf0f; }
+    .sw-ButtonDownload.sw-ButtonDownload-dai[disabled]:focus, .sw-ButtonDownload.sw-ButtonDownload-dai[disabled].active, .sw-ButtonDownload.sw-ButtonDownload-dai[disabled]:hover {
+      background-color: #fec042; }
+  .ky-Keys_Block .sw-ButtonDownload {
+    margin-top: auto; }
+    @media (min-width: 992px) {
+      .ky-Keys_Block .sw-ButtonDownload {
+        max-width: fit-content; } }
+
+.sw-ButtonDownload_Text {
+  color: #fff;
+  display: block;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.2;
+  text-align: left;
+  white-space: nowrap;
+  margin-right: 65px; }
+
+.sw-ButtonDownload_Icon {
+  display: block;
+  height: 16px;
+  width: 18px; }
+
 .sw-ButtonGenerate {
  align-items: center;
  background-color: #5a2da5;
@ -400,6 +678,7 @@ body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
  line-height: 44px;
  outline: none;
  padding: 0 15px;
+  text-decoration: none;
  transition: background-color 0.25s ease-out;
  box-shadow: 0 5px 10px 0 rgba(90, 45, 165, 0.3); }
  .sw-ButtonGenerate:focus, .sw-ButtonGenerate:active, .sw-ButtonGenerate:hover {
@ -619,6 +898,147 @@ body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
  .ft-SocialIcons .sw-IconTwitter {
    margin-right: 10px; }

+.ky-Keys {
+  padding-bottom: 40px;
+  padding-top: 40px; }
+  @media (min-width: 768px) {
+    .ky-Keys {
+      display: grid;
+      grid-column-gap: 40px;
+      grid-row-gap: 40px;
+      grid-template-columns: 1fr 1fr; } }
+
+.ky-Keys_Block {
+  border-radius: 10px;
+  border: 1px solid #dfdfdf;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 40px;
+  padding: 30px 35px 30px 30px; }
+  @media (min-width: 768px) {
+    .ky-Keys_Block {
+      margin-bottom: 0; } }
+  .ky-Keys_Block.ky-Keys_Block-poa {
+    border-color: #5a2da5; }
+  .ky-Keys_Block.ky-Keys_Block-dai {
+    border-color: #fec042; }
+  .ky-Keys_Block.ky-Keys_Block-sokol {
+    border-color: #8ce1d7; }
+
+.ky-Keys_BlockTitle {
+  color: #333;
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 1.2;
+  margin: 0 0 25px;
+  text-align: left; }
+  .ky-Keys_BlockTitle.ky-Keys_BlockTitle-poa {
+    color: #5a2da5; }
+  .ky-Keys_BlockTitle.ky-Keys_BlockTitle-dai {
+    color: #fec042; }
+  .ky-Keys_BlockTitle.ky-Keys_BlockTitle-sokol {
+    color: #8ce1d7; }
+
+.ky-Keys_HashContainer {
+  display: flex;
+  margin-bottom: 15px; }
+
+.ky-Keys_Hash {
+  color: #5a2da5;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.2;
+  margin: 0;
+  text-align: left;
+  word-break: break-word; }
+  .ky-Keys_Hash.ky-Keys_Hash-poa {
+    color: #5a2da5; }
+  .ky-Keys_Hash.ky-Keys_Hash-dai {
+    color: #fec042; }
+  .ky-Keys_Hash.ky-Keys_Hash-sokol {
+    color: #8ce1d7; }
+
+.ky-Keys_Copy {
+  background-image: url("../../assets/images/Keys/poa.svg");
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  background-size: 14px 14px;
+  cursor: pointer;
+  height: 20px;
+  width: 20px; }
+  .ky-Keys_Copy.ky-Keys_Copy-poa {
+    background-image: url("../../assets/images/Keys/poa.svg"); }
+  .ky-Keys_Copy.ky-Keys_Copy-sokol {
+    background-image: url("../../assets/images/Keys/sokol.svg"); }
+  .ky-Keys_Copy.ky-Keys_Copy-dai {
+    background-image: url("../../assets/images/Keys/dai.svg"); }
+  .ky-Keys_HashContainer .ky-Keys_Copy {
+    margin-left: 3px;
+    margin-top: -4px; }
+  .ky-Keys_PasswordContainer .ky-Keys_Copy {
+    margin-left: 3px; }
+
+.ky-Keys_PasswordContainer {
+  align-items: center;
+  display: flex;
+  margin-bottom: 25px; }
+
+.ky-Keys_PasswordLabel {
+  color: #333;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.2;
+  text-align: left; }
+  .ky-Keys_PasswordContainer .ky-Keys_PasswordLabel {
+    margin-right: 5px; }
+
+.ky-Keys_PasswordInput {
+  background-color: transparent;
+  border: none;
+  color: #333;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.2;
+  margin: 0;
+  padding: 0;
+  text-align: left; }
+
+.ky-Keys_Description {
+  color: #777;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.5;
+  margin: 0 0 25px;
+  text-align: left; }
+
+.ky-Keys_Warning {
+  color: #777;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.5;
+  margin: 0;
+  text-align: left; }
+  .ky-Keys_Warning.ky-Keys_Warning-poa {
+    color: #5a2da5; }
+  .ky-Keys_Warning.ky-Keys_Warning-dai {
+    color: #fec042; }
+  .ky-Keys_Warning.ky-Keys_Warning-sokol {
+    color: #8ce1d7; }
+
+.ky-Keys_WarningIcon {
+  height: 48px;
+  margin-bottom: 30px;
+  width: 48px; }
+
+.ky-Keys_WarningIconPath.ky-Keys_WarningIconPath-poa {
+  fill: #5a2da5; }
+
+.ky-Keys_WarningIconPath.ky-Keys_WarningIconPath-dai {
+  fill: #fec042; }
+
+.ky-Keys_WarningIconPath.ky-Keys_WarningIconPath-sokol {
+  fill: #8ce1d7; }
+
 .sw-LogoPOA {
  display: block;
  text-decoration: none; }
--- a/src/assets/stylesheets/vendors/_index.scss
+++ b/src/assets/stylesheets/vendors/_index.scss
@ -0,0 +1 @@
+@import 'rc-tooltip.scss';
--- a/src/assets/stylesheets/vendors/rc-tooltip.scss
+++ b/src/assets/stylesheets/vendors/rc-tooltip.scss
@ -0,0 +1,222 @@
+.rc-tooltip.rc-tooltip-zoom-enter,
+.rc-tooltip.rc-tooltip-zoom-leave {
+  display: block;
+}
+.rc-tooltip-zoom-enter,
+.rc-tooltip-zoom-appear {
+  opacity: 0;
+  -webkit-animation-duration: 0.3s;
+          animation-duration: 0.3s;
+  -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
+  -webkit-animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
+          animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
+  -webkit-animation-play-state: paused;
+          animation-play-state: paused;
+}
+.rc-tooltip-zoom-leave {
+  -webkit-animation-duration: 0.3s;
+          animation-duration: 0.3s;
+  -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
+  -webkit-animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05);
+          animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05);
+  -webkit-animation-play-state: paused;
+          animation-play-state: paused;
+}
+.rc-tooltip-zoom-enter.rc-tooltip-zoom-enter-active,
+.rc-tooltip-zoom-appear.rc-tooltip-zoom-appear-active {
+  -webkit-animation-name: rcToolTipZoomIn;
+          animation-name: rcToolTipZoomIn;
+  -webkit-animation-play-state: running;
+          animation-play-state: running;
+}
+.rc-tooltip-zoom-leave.rc-tooltip-zoom-leave-active {
+  -webkit-animation-name: rcToolTipZoomOut;
+          animation-name: rcToolTipZoomOut;
+  -webkit-animation-play-state: running;
+          animation-play-state: running;
+}
+@-webkit-keyframes rcToolTipZoomIn {
+  0% {
+    opacity: 0;
+    -webkit-transform-origin: 50% 50%;
+            transform-origin: 50% 50%;
+    -webkit-transform: scale(0, 0);
+            transform: scale(0, 0);
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform-origin: 50% 50%;
+            transform-origin: 50% 50%;
+    -webkit-transform: scale(1, 1);
+            transform: scale(1, 1);
+  }
+}
+@keyframes rcToolTipZoomIn {
+  0% {
+    opacity: 0;
+    -webkit-transform-origin: 50% 50%;
+            transform-origin: 50% 50%;
+    -webkit-transform: scale(0, 0);
+            transform: scale(0, 0);
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform-origin: 50% 50%;
+            transform-origin: 50% 50%;
+    -webkit-transform: scale(1, 1);
+            transform: scale(1, 1);
+  }
+}
+@-webkit-keyframes rcToolTipZoomOut {
+  0% {
+    opacity: 1;
+    -webkit-transform-origin: 50% 50%;
+            transform-origin: 50% 50%;
+    -webkit-transform: scale(1, 1);
+            transform: scale(1, 1);
+  }
+  100% {
+    opacity: 0;
+    -webkit-transform-origin: 50% 50%;
+            transform-origin: 50% 50%;
+    -webkit-transform: scale(0, 0);
+            transform: scale(0, 0);
+  }
+}
+@keyframes rcToolTipZoomOut {
+  0% {
+    opacity: 1;
+    -webkit-transform-origin: 50% 50%;
+            transform-origin: 50% 50%;
+    -webkit-transform: scale(1, 1);
+            transform: scale(1, 1);
+  }
+  100% {
+    opacity: 0;
+    -webkit-transform-origin: 50% 50%;
+            transform-origin: 50% 50%;
+    -webkit-transform: scale(0, 0);
+            transform: scale(0, 0);
+  }
+}
+.rc-tooltip {
+  position: absolute;
+  z-index: 1070;
+  display: block;
+  visibility: visible;
+  font-size: 12px;
+  line-height: 1.5;
+  opacity: 0.9;
+}
+.rc-tooltip-hidden {
+  display: none;
+}
+.rc-tooltip-placement-top,
+.rc-tooltip-placement-topLeft,
+.rc-tooltip-placement-topRight {
+  padding: 5px 0 9px 0;
+}
+.rc-tooltip-placement-right,
+.rc-tooltip-placement-rightTop,
+.rc-tooltip-placement-rightBottom {
+  padding: 0 5px 0 9px;
+}
+.rc-tooltip-placement-bottom,
+.rc-tooltip-placement-bottomLeft,
+.rc-tooltip-placement-bottomRight {
+  padding: 9px 0 5px 0;
+}
+.rc-tooltip-placement-left,
+.rc-tooltip-placement-leftTop,
+.rc-tooltip-placement-leftBottom {
+  padding: 0 9px 0 5px;
+}
+.rc-tooltip-inner {
+  padding: 8px 10px;
+  color: #fff;
+  text-align: left;
+  text-decoration: none;
+  background-color: #373737;
+  border-radius: 6px;
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.17);
+  min-height: 34px;
+}
+.rc-tooltip-arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+}
+.rc-tooltip-placement-top .rc-tooltip-arrow,
+.rc-tooltip-placement-topLeft .rc-tooltip-arrow,
+.rc-tooltip-placement-topRight .rc-tooltip-arrow {
+  bottom: 4px;
+  margin-left: -5px;
+  border-width: 5px 5px 0;
+  border-top-color: #373737;
+}
+.rc-tooltip-placement-top .rc-tooltip-arrow {
+  left: 50%;
+}
+.rc-tooltip-placement-topLeft .rc-tooltip-arrow {
+  left: 15%;
+}
+.rc-tooltip-placement-topRight .rc-tooltip-arrow {
+  right: 15%;
+}
+.rc-tooltip-placement-right .rc-tooltip-arrow,
+.rc-tooltip-placement-rightTop .rc-tooltip-arrow,
+.rc-tooltip-placement-rightBottom .rc-tooltip-arrow {
+  left: 4px;
+  margin-top: -5px;
+  border-width: 5px 5px 5px 0;
+  border-right-color: #373737;
+}
+.rc-tooltip-placement-right .rc-tooltip-arrow {
+  top: 50%;
+}
+.rc-tooltip-placement-rightTop .rc-tooltip-arrow {
+  top: 15%;
+  margin-top: 0;
+}
+.rc-tooltip-placement-rightBottom .rc-tooltip-arrow {
+  bottom: 15%;
+}
+.rc-tooltip-placement-left .rc-tooltip-arrow,
+.rc-tooltip-placement-leftTop .rc-tooltip-arrow,
+.rc-tooltip-placement-leftBottom .rc-tooltip-arrow {
+  right: 4px;
+  margin-top: -5px;
+  border-width: 5px 0 5px 5px;
+  border-left-color: #373737;
+}
+.rc-tooltip-placement-left .rc-tooltip-arrow {
+  top: 50%;
+}
+.rc-tooltip-placement-leftTop .rc-tooltip-arrow {
+  top: 15%;
+  margin-top: 0;
+}
+.rc-tooltip-placement-leftBottom .rc-tooltip-arrow {
+  bottom: 15%;
+}
+.rc-tooltip-placement-bottom .rc-tooltip-arrow,
+.rc-tooltip-placement-bottomLeft .rc-tooltip-arrow,
+.rc-tooltip-placement-bottomRight .rc-tooltip-arrow {
+  top: 4px;
+  margin-left: -5px;
+  border-width: 0 5px 5px;
+  border-bottom-color: #373737;
+}
+.rc-tooltip-placement-bottom .rc-tooltip-arrow {
+  left: 50%;
+}
+.rc-tooltip-placement-bottomLeft .rc-tooltip-arrow {
+  left: 15%;
+}
+.rc-tooltip-placement-bottomRight .rc-tooltip-arrow {
+  right: 15%;
+}
--- a/src/components/ButtonDownload/icon.svg
+++ b/src/components/ButtonDownload/icon.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18">
+    <path fill="#FFF" fill-rule="evenodd" d="M17 18H1a1 1 0 0 1-1-1v-2a1 1 0 0 1 2 0v1h14v-1a1 1 0 0 1 2 0v2a1 1 0 0 1-1 1zm-7.134-4.332a1.08 1.08 0 0 1-.78.315C9.056 13.985 9.03 14 9 14c-.03 0-.056-.015-.086-.017a1.08 1.08 0 0 1-.78-.315L4.298 9.833a1.087 1.087 0 0 1 0-1.535 1.087 1.087 0 0 1 1.535 0L8 10.466V1a1 1 0 0 1 2 0v9.466l2.167-2.168a1.087 1.087 0 0 1 1.535 0 1.087 1.087 0 0 1 0 1.535l-3.836 3.835z"/>
+</svg>
--- a/src/components/ButtonDownload/index.js
+++ b/src/components/ButtonDownload/index.js
@ -0,0 +1,25 @@
+import React from 'react'
+import icon from './icon.svg'
+
+export const ButtonDownload = ({
+  download = undefined,
+  extraClassName = '',
+  href = '',
+  id = '',
+  networkBranch = '',
+  onClick = null,
+  text = 'Download'
+}) => {
+  return (
+    <a
+      className={`sw-ButtonDownload ${extraClassName} ${'sw-ButtonDownload-' + networkBranch}`}
+      download={download}
+      href={href}
+      id={id}
+      onClick={onClick}
+    >
+      <span className="sw-ButtonDownload_Text">{text}</span>
+      <img src={icon} alt="" className="sw-ButtonDownload_Icon" />
+    </a>
+  )
+}
--- a/src/components/Keys/index.js
+++ b/src/components/Keys/index.js
@ -1,7 +1,6 @@
 import React, { Component } from 'react'
 import Tooltip from 'rc-tooltip'
-// TODO: Check if this is worth it, or move it to vendors' folder
-import 'rc-tooltip/assets/bootstrap.css'
+import { ButtonDownload } from '../ButtonDownload'

 const encodeJson = json => {
  const encoded = window.encodeURIComponent(JSON.stringify(json))
@ -45,7 +44,7 @@ export default class Keys extends Component {
  componentWillUpdate(nextProps, nextState) {
    if (this.refs.miningKeyAddress) {
      const Clipboard = require('clipboard')
-      // this.clipboard = new Clipboard(this.refs.copyBtn);
+
      new Clipboard(this.refs.miningKeyAddress)
      new Clipboard(this.refs.miningKeyPass)
      new Clipboard(this.refs.payoutKeyAddress)
@ -55,15 +54,12 @@ export default class Keys extends Component {
    }
  }
  onVisibleChange(id) {
-    console.log(id)
    let copyBtns = this.state.copyBtns
    copyBtns[id].visible = !copyBtns[id].visible
    copyBtns[id].text = 'Copy'
    this.setState({
      copyBtns
    })
-
-    // const id = e.target.id;
  }
  onCopyBtnClick(e) {
    const id = e.target.id
@ -74,219 +70,221 @@ export default class Keys extends Component {
    })
  }
  render() {
+    const { networkBranch } = this.props
+
    return (
-      <div className="container">
-        <div className="keys">
-          <div className="keys-i">
-            <p className="keys-title">Mining key</p>
-            <div className="keys-hash-container">
-              <p className="keys-hash" id="miningKey">
-                0x
-                {this.props.mining.jsonStore.address}
-              </p>
-              <Tooltip
-                visible={this.state.copyBtns.copyMiningKey.visible}
-                animation="zoom"
-                trigger="hover"
-                onVisibleChange={() => {
-                  this.onVisibleChange('copyMiningKey')
-                }}
-                placement="right"
-                overlay={this.state.copyBtns.copyMiningKey.text}
-              >
-                <span
-                  id="copyMiningKey"
-                  onClick={this.onCopyBtnClick}
-                  className="copy"
-                  ref="miningKeyAddress"
-                  data-clipboard-text={'0x' + this.props.mining.jsonStore.address}
-                />
-              </Tooltip>
-            </div>
-            <p className="keys-hash">
-              <label className="password-label">Password:</label>
-              <input
-                disabled={true}
-                defaultValue={this.props.mining.password}
-                type="password"
-                id="miningKeyPass"
-                className="pass"
+      <div className={`ky-Keys`}>
+        <div className="ky-Keys_Block">
+          <h2 className="ky-Keys_BlockTitle">Mining key</h2>
+          <div className="ky-Keys_HashContainer">
+            <p className={`ky-Keys_Hash ky-Keys_Hash-${networkBranch}`} id="miningKey">
+              0x
+              {this.props.mining.jsonStore.address}
+            </p>
+            <Tooltip
+              visible={this.state.copyBtns.copyMiningKey.visible}
+              animation="zoom"
+              trigger="hover"
+              onVisibleChange={() => {
+                this.onVisibleChange('copyMiningKey')
+              }}
+              placement="right"
+              overlay={this.state.copyBtns.copyMiningKey.text}
+            >
+              <span
+                className={`ky-Keys_Copy ky-Keys_Copy-${networkBranch}`}
+                data-clipboard-text={'0x' + this.props.mining.jsonStore.address}
+                id="copyMiningKey"
+                onClick={this.onCopyBtnClick}
+                ref="miningKeyAddress"
              />
-              <Tooltip
-                visible={this.state.copyBtns.copyMiningPass.visible}
-                animation="zoom"
-                trigger="hover"
-                onVisibleChange={() => {
-                  this.onVisibleChange('copyMiningPass')
-                }}
-                placement="right"
-                overlay={this.state.copyBtns.copyMiningPass.text}
-              >
-                <span
-                  id="copyMiningPass"
-                  onClick={this.onCopyBtnClick}
-                  className="copy"
-                  ref="miningKeyPass"
-                  data-clipboard-text={this.props.mining.password}
-                />
-              </Tooltip>
-            </p>
-            <p className="keys-description">
-              Download this key and use it in your mining node to validate blocks in the network. Mined coins will be
-              deposited to your payout account.
-            </p>
-            <div className="keys-footer">
-              <a
-                className="keys-download"
-                id="miningKeyDownload"
-                href={encodeJson(this.props.mining.jsonStore)}
-                download={`mining_${this.props.mining.jsonStore.address}.json`}
-              >
-                Download Mining Key
-              </a>
-            </div>
+            </Tooltip>
          </div>
-          <div className="keys-i">
-            <p className="keys-title">Payout key</p>
-            <div className="keys-hash-container">
-              <p className="keys-hash" id="payoutKey">
-                0x
-                {this.props.payout.jsonStore.address}
-              </p>
-              <Tooltip
-                visible={this.state.copyBtns.copyPayoutKey.visible}
-                animation="zoom"
-                trigger="hover"
-                onVisibleChange={() => {
-                  this.onVisibleChange('copyPayoutKey')
-                }}
-                placement="right"
-                overlay={this.state.copyBtns.copyPayoutKey.text}
-              >
-                <span
-                  id="copyPayoutKey"
-                  onClick={this.onCopyBtnClick}
-                  className="copy"
-                  ref="payoutKeyAddress"
-                  data-clipboard-text={'0x' + this.props.payout.jsonStore.address}
-                />
-              </Tooltip>
-            </div>
-            <p className="keys-hash">
-              <label className="password-label">Password:</label>
-              <input
-                type="password"
-                disabled={true}
-                id="payoutKeyPass"
-                className="pass"
-                defaultValue={this.props.payout.password}
+          <div className="ky-Keys_PasswordContainer">
+            <label className="ky-Keys_PasswordLabel">Password:</label>
+            <input
+              className="ky-Keys_PasswordInput"
+              defaultValue={this.props.mining.password}
+              disabled={true}
+              id="miningKeyPass"
+              size={this.props.mining.password.length}
+              type="password"
+            />
+            <Tooltip
+              animation="zoom"
+              trigger="hover"
+              visible={this.state.copyBtns.copyMiningPass.visible}
+              onVisibleChange={() => {
+                this.onVisibleChange('copyMiningPass')
+              }}
+              placement="right"
+              overlay={this.state.copyBtns.copyMiningPass.text}
+            >
+              <span
+                id="copyMiningPass"
+                onClick={this.onCopyBtnClick}
+                className={`ky-Keys_Copy ky-Keys_Copy-${networkBranch}`}
+                ref="miningKeyPass"
+                data-clipboard-text={this.props.mining.password}
              />
-              <Tooltip
-                visible={this.state.copyBtns.copyPayoutPass.visible}
-                animation="zoom"
-                trigger="hover"
-                onVisibleChange={() => {
-                  this.onVisibleChange('copyPayoutPass')
-                }}
-                placement="right"
-                overlay={this.state.copyBtns.copyPayoutPass.text}
-              >
-                <span
-                  id="copyPayoutPass"
-                  onClick={this.onCopyBtnClick}
-                  className="copy"
-                  ref="payoutKeyPass"
-                  data-clipboard-text={this.props.payout.password}
-                />
-              </Tooltip>
-            </p>
-            <p className="keys-description">
-              Download this key and use it on your client node/wallet to spend earned coins.
-            </p>
-            <div className="keys-footer">
-              <a
-                className="keys-download"
-                id="payoutKeyDownload"
-                href={encodeJson(this.props.payout.jsonStore)}
-                download={`payout_${this.props.payout.jsonStore.address}.json`}
-              >
-                Download Payout Key
-              </a>
-            </div>
-          </div>
-          <div className="keys-i">
-            <p className="keys-title">Voting key</p>
-            <div className="keys-hash-container">
-              <p className="keys-hash" id="votingKey">
-                0x
-                {this.props.voting.jsonStore.address}
-              </p>
-              <Tooltip
-                visible={this.state.copyBtns.copyVotingKey.visible}
-                animation="zoom"
-                trigger="hover"
-                onVisibleChange={() => {
-                  this.onVisibleChange('copyVotingKey')
-                }}
-                placement="right"
-                overlay={this.state.copyBtns.copyVotingKey.text}
-              >
-                <span
-                  id="copyVotingKey"
-                  onClick={this.onCopyBtnClick}
-                  className="copy"
-                  ref="votingKeyAddress"
-                  data-clipboard-text={'0x' + this.props.voting.jsonStore.address}
-                />
-              </Tooltip>
-            </div>
-            <p className="keys-hash">
-              <label className="password-label">Password:</label>
-              <input
-                type="password"
-                disabled={true}
-                id="votingKeyPass"
-                className="pass"
-                defaultValue={this.props.voting.password}
-              />
-              <Tooltip
-                visible={this.state.copyBtns.copyVotingPass.visible}
-                animation="zoom"
-                trigger="hover"
-                onVisibleChange={() => {
-                  this.onVisibleChange('copyVotingPass')
-                }}
-                placement="right"
-                overlay={this.state.copyBtns.copyVotingPass.text}
-              >
-                <span
-                  id="copyVotingPass"
-                  onClick={this.onCopyBtnClick}
-                  className="copy"
-                  ref="votingKeyPass"
-                  data-clipboard-text={this.props.voting.password}
-                />
-              </Tooltip>
-            </p>
-            <p className="keys-description">
-              Download this key and use it on your client node to vote for necessary ballots, such as adding or removing
-              miners from the network.
-            </p>
-            <div className="keys-footer">
-              <a
-                className="keys-download"
-                id="votingKeyDownload"
-                href={encodeJson(this.props.voting.jsonStore)}
-                download={`voting_${this.props.voting.jsonStore.address}.json`}
-              >
-                Download Voting Key
-              </a>
-            </div>
+            </Tooltip>
          </div>
+          <p className="ky-Keys_Description">
+            Download this key and use it in your mining node to validate blocks in the network. Mined coins will be
+            deposited to your payout account.
+          </p>
+          <ButtonDownload
+            download={`mining_${this.props.mining.jsonStore.address}.json`}
+            href={encodeJson(this.props.mining.jsonStore)}
+            id="miningKeyDownload"
+            networkBranch={networkBranch}
+            text="Download Mining Key"
+          />
        </div>
-        <div className="keys-note">
-          <p className="keys-note-title">Important</p>
-          <p className="keys-note-description">
+        <div className="ky-Keys_Block">
+          <h2 className="ky-Keys_BlockTitle">Payout key</h2>
+          <div className="ky-Keys_HashContainer">
+            <p className={`ky-Keys_Hash ky-Keys_Hash-${networkBranch}`} id="payoutKey">
+              0x
+              {this.props.payout.jsonStore.address}
+            </p>
+            <Tooltip
+              visible={this.state.copyBtns.copyPayoutKey.visible}
+              animation="zoom"
+              trigger="hover"
+              onVisibleChange={() => {
+                this.onVisibleChange('copyPayoutKey')
+              }}
+              placement="right"
+              overlay={this.state.copyBtns.copyPayoutKey.text}
+            >
+              <span
+                className={`ky-Keys_Copy ky-Keys_Copy-${networkBranch}`}
+                data-clipboard-text={'0x' + this.props.payout.jsonStore.address}
+                id="copyPayoutKey"
+                onClick={this.onCopyBtnClick}
+                ref="payoutKeyAddress"
+              />
+            </Tooltip>
+          </div>
+          <div className="ky-Keys_PasswordContainer">
+            <label className="ky-Keys_PasswordLabel">Password:</label>
+            <input
+              className="ky-Keys_PasswordInput"
+              defaultValue={this.props.payout.password}
+              disabled={true}
+              id="payoutKeyPass"
+              size={this.props.payout.password.length}
+              type="password"
+            />
+            <Tooltip
+              visible={this.state.copyBtns.copyPayoutPass.visible}
+              animation="zoom"
+              trigger="hover"
+              onVisibleChange={() => {
+                this.onVisibleChange('copyPayoutPass')
+              }}
+              placement="right"
+              overlay={this.state.copyBtns.copyPayoutPass.text}
+            >
+              <span
+                id="copyPayoutPass"
+                onClick={this.onCopyBtnClick}
+                className={`ky-Keys_Copy ky-Keys_Copy-${networkBranch}`}
+                ref="payoutKeyPass"
+                data-clipboard-text={this.props.payout.password}
+              />
+            </Tooltip>
+          </div>
+          <p className="ky-Keys_Description">
+            Download this key and use it on your client node/wallet to spend earned coins.
+          </p>
+          <ButtonDownload
+            download={`payout_${this.props.payout.jsonStore.address}.json`}
+            href={encodeJson(this.props.payout.jsonStore)}
+            id="payoutKeyDownload"
+            networkBranch={networkBranch}
+            text="Download Payout Key"
+          />
+        </div>
+        <div className="ky-Keys_Block">
+          <h2 className="ky-Keys_BlockTitle">Voting key</h2>
+          <div className="ky-Keys_HashContainer">
+            <p className={`ky-Keys_Hash ky-Keys_Hash-${networkBranch}`} id="votingKey">
+              0x
+              {this.props.voting.jsonStore.address}
+            </p>
+            <Tooltip
+              visible={this.state.copyBtns.copyVotingKey.visible}
+              animation="zoom"
+              trigger="hover"
+              onVisibleChange={() => {
+                this.onVisibleChange('copyVotingKey')
+              }}
+              placement="right"
+              overlay={this.state.copyBtns.copyVotingKey.text}
+            >
+              <span
+                id="copyVotingKey"
+                onClick={this.onCopyBtnClick}
+                className={`ky-Keys_Copy ky-Keys_Copy-${networkBranch}`}
+                ref="votingKeyAddress"
+                data-clipboard-text={'0x' + this.props.voting.jsonStore.address}
+              />
+            </Tooltip>
+          </div>
+          <div className="ky-Keys_PasswordContainer">
+            <label className="ky-Keys_PasswordLabel">Password:</label>
+            <input
+              className="ky-Keys_PasswordInput"
+              defaultValue={this.props.voting.password}
+              disabled={true}
+              id="votingKeyPass"
+              size={this.props.voting.password.length}
+              type="password"
+            />
+            <Tooltip
+              visible={this.state.copyBtns.copyVotingPass.visible}
+              animation="zoom"
+              trigger="hover"
+              onVisibleChange={() => {
+                this.onVisibleChange('copyVotingPass')
+              }}
+              placement="right"
+              overlay={this.state.copyBtns.copyVotingPass.text}
+            >
+              <span
+                id="copyVotingPass"
+                onClick={this.onCopyBtnClick}
+                className={`ky-Keys_Copy ky-Keys_Copy-${networkBranch}`}
+                ref="votingKeyPass"
+                data-clipboard-text={this.props.voting.password}
+              />
+            </Tooltip>
+          </div>
+          <p className="ky-Keys_Description">
+            Download this key and use it on your client node to vote for necessary ballots, such as adding or removing
+            miners from the network.
+          </p>
+          <ButtonDownload
+            download={`voting_${this.props.voting.jsonStore.address}.json`}
+            href={encodeJson(this.props.voting.jsonStore)}
+            id="votingKeyDownload"
+            networkBranch={networkBranch}
+            text="Download Voting Key"
+          />
+        </div>
+        <div className={`ky-Keys_Block ky-Keys_Block-${networkBranch}`}>
+          <svg className="ky-Keys_WarningIcon" xmlns="http://www.w3.org/2000/svg" width="48" height="48">
+            <path
+              className={`ky-Keys_WarningIconPath ky-Keys_WarningIconPath-${networkBranch}`}
+              fill="#5C34A2"
+              fillRule="evenodd"
+              d="M24 48C10.745 48 0 37.255 0 24S10.745 0 24 0s24 10.745 24 24-10.745 24-24 24zm0-46C11.85 2 2 11.85 2 24s9.85 22 22 22 22-9.85 22-22S36.15 2 24 2zm0 35a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm0-6a1 1 0 0 1-1-1V12a1 1 0 0 1 2 0v18a1 1 0 0 1-1 1z"
+            />
+          </svg>
+          <h2 className={`ky-Keys_BlockTitle ky-Keys_BlockTitle-${networkBranch}`}>Important</h2>
+          <p className={`ky-Keys_Warning ky-Keys_Warning-${networkBranch}`}>
            Do not close this tab until you download all keys and save passwords. Keep keys secure and protected. If you
            lose your keys, you will need to get a new initial key using Voting DAPP.
          </p>
--- a/src/components/SocialIcons/git.svg
+++ b/src/components/SocialIcons/git.svg
@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
-    <path fill="#5C34A2" fill-rule="evenodd" d="M14.928 4.084a8.067 8.067 0 0 0-2.912-2.985A7.673 7.673 0 0 0 8-.001a7.67 7.67 0 0 0-4.016 1.1 8.06 8.06 0 0 0-2.912 2.985C.356 5.34-.001 6.712-.001 8.201c0 1.787.508 3.394 1.526 4.821 1.017 1.428 2.332 2.416 3.943 2.964.188.035.327.01.417-.075a.422.422 0 0 0 .135-.32l-.005-.577c-.003-.363-.005-.68-.005-.95l-.24.042a2.985 2.985 0 0 1-.578.038 4.418 4.418 0 0 1-.724-.075 1.6 1.6 0 0 1-.698-.32 1.359 1.359 0 0 1-.458-.657l-.105-.246a2.64 2.64 0 0 0-.328-.544c-.149-.2-.3-.335-.453-.406l-.073-.053a.78.78 0 0 1-.135-.129.572.572 0 0 1-.094-.15c-.021-.049-.004-.09.052-.122.056-.032.156-.048.302-.048l.209.032c.138.028.31.113.515.256.205.142.374.328.506.555.159.292.352.515.578.668.225.153.453.229.682.229.229 0 .427-.017.594-.053.167-.036.323-.089.469-.16.062-.477.232-.844.51-1.1a6.938 6.938 0 0 1-1.068-.193 4.188 4.188 0 0 1-.979-.416 2.828 2.828 0 0 1-.839-.716c-.222-.284-.404-.658-.547-1.121-.142-.463-.213-.997-.213-1.602 0-.862.274-1.595.823-2.2-.257-.648-.233-1.374.073-2.179.201-.064.5-.016.896.144.396.161.686.298.87.412.184.113.332.21.443.288a7.225 7.225 0 0 1 2-.278c.687 0 1.354.093 2.001.278l.395-.256a5.53 5.53 0 0 1 .959-.47c.368-.142.649-.182.844-.117.312.804.34 1.53.083 2.178.549.605.823 1.338.823 2.2 0 .605-.071 1.141-.213 1.607-.143.467-.327.84-.553 1.122a2.926 2.926 0 0 1-.843.71 4.194 4.194 0 0 1-.98.416c-.316.086-.672.15-1.068.193.362.32.542.826.542 1.516v2.253c0 .129.044.235.13.321.087.085.224.11.412.074 1.611-.548 2.926-1.536 3.943-2.963 1.018-1.427 1.526-3.035 1.526-4.822 0-1.488-.358-2.86-1.073-4.116z"/>
-</svg>
--- a/src/logo.svg
+++ b/src/logo.svg
@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
-    <g fill="#61DAFB">
-        <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
-        <circle cx="420.9" cy="296.5" r="45.7"/>
-        <path d="M520.5 78.1z"/>
-    </g>
-</svg>
--- a/src/utils/addresses.js
+++ b/src/utils/addresses.js
@ -1,8 +1,5 @@
 import { constants } from './constants'
 import helpers from './helpers'
-// const local = {
-//    "KEYS_MANAGER_ADDRESS": "0x3ef32bb244016ad9af8c8f45398511e7e551b581"
-// }
 // module.exports = {
 //   KEYS_MANAGER_ADDRESS: '0xfc90125492e58dbfe80c0bfb6a2a759c4f703ca8'
 // }