(add) loading component - (fix) key blocks styles mixins
This commit is contained in:
parent
094f34794a
commit
d0b7ca0c55
|
@ -2,7 +2,6 @@ import FileSaver from 'file-saver'
|
||||||
import JSzip from 'jszip'
|
import JSzip from 'jszip'
|
||||||
import Keys from './components/Keys'
|
import Keys from './components/Keys'
|
||||||
import KeysManager from './utils/keysManager'
|
import KeysManager from './utils/keysManager'
|
||||||
import Loading from './components/Loading'
|
|
||||||
import React, { Component } from 'react'
|
import React, { Component } from 'react'
|
||||||
import addressGenerator from './utils/addressGenerator'
|
import addressGenerator from './utils/addressGenerator'
|
||||||
import getWeb3 from './utils/getWeb3'
|
import getWeb3 from './utils/getWeb3'
|
||||||
|
@ -11,8 +10,10 @@ import swal from 'sweetalert'
|
||||||
import { Footer } from './components/Footer'
|
import { Footer } from './components/Footer'
|
||||||
import { Header } from './components/Header'
|
import { Header } from './components/Header'
|
||||||
import { Home } from './components/Home'
|
import { Home } from './components/Home'
|
||||||
|
import { Loading } from './components/Loading'
|
||||||
import { constants } from './utils/constants'
|
import { constants } from './utils/constants'
|
||||||
import { getNetworkBranch } from './utils/utils'
|
import { getNetworkBranch } from './utils/utils'
|
||||||
|
|
||||||
import './assets/stylesheets/index.css'
|
import './assets/stylesheets/index.css'
|
||||||
|
|
||||||
function generateElement(msg) {
|
function generateElement(msg) {
|
||||||
|
@ -200,12 +201,12 @@ class App extends Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
let loader = this.state.loading ? <Loading netId={this.state.web3Config.netId} /> : ''
|
const loader = this.state.loading ? <Loading networkBranch={this.state.networkBranch} /> : null
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="lo-App">
|
<div className="lo-App">
|
||||||
<Header networkBranch={this.state.networkBranch} />
|
|
||||||
{loader}
|
{loader}
|
||||||
|
<Header networkBranch={this.state.networkBranch} />
|
||||||
<section className="lo-App_Content">
|
<section className="lo-App_Content">
|
||||||
{this.state.keysGenerated ? (
|
{this.state.keysGenerated ? (
|
||||||
<Keys
|
<Keys
|
||||||
|
|
|
@ -7,7 +7,7 @@ $sw-ButtonDownload-height: 44px !default;
|
||||||
@include button-disabled($poa-purple);
|
@include button-disabled($poa-purple);
|
||||||
@include button-shadow($poa-purple);
|
@include button-shadow($poa-purple);
|
||||||
|
|
||||||
&#{ & }-poa {
|
&#{ & }-core {
|
||||||
background-color: $poa-purple;
|
background-color: $poa-purple;
|
||||||
@include button-focus-active-hover($poa-purple);
|
@include button-focus-active-hover($poa-purple);
|
||||||
@include button-shadow($poa-purple);
|
@include button-shadow($poa-purple);
|
||||||
|
|
|
@ -7,7 +7,7 @@ $sw-ButtonGenerate-height: 44px !default;
|
||||||
@include button-disabled($poa-purple);
|
@include button-disabled($poa-purple);
|
||||||
@include button-shadow($poa-purple);
|
@include button-shadow($poa-purple);
|
||||||
|
|
||||||
&#{ & }-poa {
|
&#{ & }-core {
|
||||||
background-color: $poa-purple;
|
background-color: $poa-purple;
|
||||||
@include button-focus-active-hover($poa-purple);
|
@include button-focus-active-hover($poa-purple);
|
||||||
@include button-shadow($poa-purple);
|
@include button-shadow($poa-purple);
|
||||||
|
|
|
@ -10,7 +10,7 @@
|
||||||
transition: background-color 0.25s ease-out;
|
transition: background-color 0.25s ease-out;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
&#{ & }-poa {
|
&#{ & }-core {
|
||||||
background-color: $poa-purple;
|
background-color: $poa-purple;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
transition: background-color 0.25s ease-out;
|
transition: background-color 0.25s ease-out;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
&#{ & }-poa {
|
&#{ & }-core {
|
||||||
background-color: $poa-purple;
|
background-color: $poa-purple;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,17 +1,33 @@
|
||||||
$ky-Keys-gap: 40px;
|
$ky-Keys-gap: 40px;
|
||||||
|
|
||||||
|
@mixin keys-color-variants-base($property) {
|
||||||
|
|
||||||
|
&#{ & }-core {
|
||||||
|
#{ $property }: $poa-purple;
|
||||||
|
}
|
||||||
|
|
||||||
|
&#{ & }-sokol {
|
||||||
|
#{ $property }: $sokol-cyan;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
@mixin keys-color-variants($property) {
|
@mixin keys-color-variants($property) {
|
||||||
|
|
||||||
&#{ & }-poa {
|
@include keys-color-variants-base($property);
|
||||||
#{ $property }: $poa-purple;
|
|
||||||
}
|
|
||||||
|
|
||||||
&#{ & }-dai {
|
&#{ & }-dai {
|
||||||
#{ $property }: $xdai-orange;
|
#{ $property }: $xdai-orange;
|
||||||
}
|
}
|
||||||
|
|
||||||
&#{ & }-sokol {
|
}
|
||||||
#{ $property }: $sokol-cyan;
|
|
||||||
|
@mixin keys-color-variants-dai-dark($property) {
|
||||||
|
|
||||||
|
@include keys-color-variants-base($property);
|
||||||
|
|
||||||
|
&#{ & }-dai {
|
||||||
|
#{ $property }: #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -40,7 +56,7 @@ $ky-Keys-gap: 40px;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include keys-color-variants('border-color');
|
@include keys-color-variants-base('border-color');
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -52,7 +68,7 @@ $ky-Keys-gap: 40px;
|
||||||
margin: 0 0 25px;
|
margin: 0 0 25px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
|
||||||
@include keys-color-variants('color');
|
@include keys-color-variants-dai-dark('color');
|
||||||
}
|
}
|
||||||
|
|
||||||
.ky-Keys_HashContainer {
|
.ky-Keys_HashContainer {
|
||||||
|
@ -69,7 +85,7 @@ $ky-Keys-gap: 40px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
|
|
||||||
@include keys-color-variants('color');
|
@include keys-color-variants-dai-dark('color');
|
||||||
}
|
}
|
||||||
|
|
||||||
.ky-Keys_Copy {
|
.ky-Keys_Copy {
|
||||||
|
@ -81,7 +97,7 @@ $ky-Keys-gap: 40px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
|
|
||||||
&#{ & }-poa {
|
&#{ & }-core {
|
||||||
background-image: url('#{ $base-images-path }/Keys/poa.svg');
|
background-image: url('#{ $base-images-path }/Keys/poa.svg');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -143,14 +159,14 @@ $ky-Keys-gap: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ky-Keys_Warning {
|
.ky-Keys_Warning {
|
||||||
color: #777;
|
color: $poa-purple;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
|
||||||
@include keys-color-variants('color');
|
@include keys-color-variants-dai-dark('color');
|
||||||
}
|
}
|
||||||
|
|
||||||
.ky-Keys_WarningIcon {
|
.ky-Keys_WarningIcon {
|
||||||
|
|
|
@ -0,0 +1,79 @@
|
||||||
|
.ld-Loading {
|
||||||
|
align-items: center;
|
||||||
|
background-color: rgba($poa-purple, 0.5);
|
||||||
|
bottom: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
left: 0;
|
||||||
|
position: fixed;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
z-index: 1000000;
|
||||||
|
|
||||||
|
&#{ & }-core {
|
||||||
|
background-color: rgba($poa-purple, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
&#{ & }-sokol {
|
||||||
|
background-color: rgba($sokol-cyan, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
&#{ & }-dai {
|
||||||
|
background-color: rgba($xdai-orange, 0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ld-Loading_Animation {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 206px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ld-Loading_Image {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
width: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ld-Loading_AnimationItem {
|
||||||
|
animation-duration: 2s;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
animation-name: fadeOut;
|
||||||
|
animation-timing-function: linear;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 50%;
|
||||||
|
height: 9px;
|
||||||
|
opacity: .2;
|
||||||
|
width: 9px;
|
||||||
|
|
||||||
|
&:nth-child(2) {
|
||||||
|
animation-delay: .1s;
|
||||||
|
}
|
||||||
|
&:nth-child(3) {
|
||||||
|
animation-delay: .2s;
|
||||||
|
}
|
||||||
|
&:nth-child(4) {
|
||||||
|
animation-delay: .3s;
|
||||||
|
}
|
||||||
|
&:nth-child(5) {
|
||||||
|
animation-delay: .4s;
|
||||||
|
}
|
||||||
|
&:nth-child(6) {
|
||||||
|
animation-delay: .5s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeOut {
|
||||||
|
0% {
|
||||||
|
opacity: .2;
|
||||||
|
}
|
||||||
|
20% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: .2;
|
||||||
|
transform: scale(0.3);
|
||||||
|
}
|
||||||
|
}
|
|
@ -17,7 +17,7 @@
|
||||||
width: 520px;
|
width: 520px;
|
||||||
|
|
||||||
&,
|
&,
|
||||||
&#{ & }-poa {
|
&#{ & }-core {
|
||||||
@include image-retina('#{ $base-images-path }/MainImage/poa/image', 'png');
|
@include image-retina('#{ $base-images-path }/MainImage/poa/image', 'png');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -9,6 +9,7 @@
|
||||||
@import "IconTelegram";
|
@import "IconTelegram";
|
||||||
@import "IconTwitter";
|
@import "IconTwitter";
|
||||||
@import "Keys";
|
@import "Keys";
|
||||||
|
@import "Loading";
|
||||||
@import "LogoPOA";
|
@import "LogoPOA";
|
||||||
@import "LogoSokol";
|
@import "LogoSokol";
|
||||||
@import "MainImage";
|
@import "MainImage";
|
||||||
|
|
|
@ -624,12 +624,12 @@ body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
|
||||||
.sw-ButtonDownload[disabled] {
|
.sw-ButtonDownload[disabled] {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
opacity: 0.7; }
|
opacity: 0.7; }
|
||||||
.sw-ButtonDownload.sw-ButtonDownload-poa {
|
.sw-ButtonDownload.sw-ButtonDownload-core {
|
||||||
background-color: #5a2da5;
|
background-color: #5a2da5;
|
||||||
box-shadow: 0 5px 10px 0 rgba(90, 45, 165, 0.3); }
|
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 {
|
.sw-ButtonDownload.sw-ButtonDownload-core:focus, .sw-ButtonDownload.sw-ButtonDownload-core:active, .sw-ButtonDownload.sw-ButtonDownload-core:hover {
|
||||||
background-color: #44227d; }
|
background-color: #44227d; }
|
||||||
.sw-ButtonDownload.sw-ButtonDownload-poa[disabled]:focus, .sw-ButtonDownload.sw-ButtonDownload-poa[disabled].active, .sw-ButtonDownload.sw-ButtonDownload-poa[disabled]:hover {
|
.sw-ButtonDownload.sw-ButtonDownload-core[disabled]:focus, .sw-ButtonDownload.sw-ButtonDownload-core[disabled].active, .sw-ButtonDownload.sw-ButtonDownload-core[disabled]:hover {
|
||||||
background-color: #5a2da5; }
|
background-color: #5a2da5; }
|
||||||
.sw-ButtonDownload.sw-ButtonDownload-sokol {
|
.sw-ButtonDownload.sw-ButtonDownload-sokol {
|
||||||
background-color: #8ce1d7;
|
background-color: #8ce1d7;
|
||||||
|
@ -688,12 +688,12 @@ body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
|
||||||
.sw-ButtonGenerate[disabled] {
|
.sw-ButtonGenerate[disabled] {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
opacity: 0.7; }
|
opacity: 0.7; }
|
||||||
.sw-ButtonGenerate.sw-ButtonGenerate-poa {
|
.sw-ButtonGenerate.sw-ButtonGenerate-core {
|
||||||
background-color: #5a2da5;
|
background-color: #5a2da5;
|
||||||
box-shadow: 0 5px 10px 0 rgba(90, 45, 165, 0.3); }
|
box-shadow: 0 5px 10px 0 rgba(90, 45, 165, 0.3); }
|
||||||
.sw-ButtonGenerate.sw-ButtonGenerate-poa:focus, .sw-ButtonGenerate.sw-ButtonGenerate-poa:active, .sw-ButtonGenerate.sw-ButtonGenerate-poa:hover {
|
.sw-ButtonGenerate.sw-ButtonGenerate-core:focus, .sw-ButtonGenerate.sw-ButtonGenerate-core:active, .sw-ButtonGenerate.sw-ButtonGenerate-core:hover {
|
||||||
background-color: #44227d; }
|
background-color: #44227d; }
|
||||||
.sw-ButtonGenerate.sw-ButtonGenerate-poa[disabled]:focus, .sw-ButtonGenerate.sw-ButtonGenerate-poa[disabled].active, .sw-ButtonGenerate.sw-ButtonGenerate-poa[disabled]:hover {
|
.sw-ButtonGenerate.sw-ButtonGenerate-core[disabled]:focus, .sw-ButtonGenerate.sw-ButtonGenerate-core[disabled].active, .sw-ButtonGenerate.sw-ButtonGenerate-core[disabled]:hover {
|
||||||
background-color: #5a2da5; }
|
background-color: #5a2da5; }
|
||||||
.sw-ButtonGenerate.sw-ButtonGenerate-sokol {
|
.sw-ButtonGenerate.sw-ButtonGenerate-sokol {
|
||||||
background-color: #8ce1d7;
|
background-color: #8ce1d7;
|
||||||
|
@ -741,7 +741,7 @@ body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
|
||||||
padding: 16px 0;
|
padding: 16px 0;
|
||||||
transition: background-color 0.25s ease-out;
|
transition: background-color 0.25s ease-out;
|
||||||
width: 100%; }
|
width: 100%; }
|
||||||
.sw-Footer.sw-Footer-poa {
|
.sw-Footer.sw-Footer-core {
|
||||||
background-color: #5a2da5; }
|
background-color: #5a2da5; }
|
||||||
.sw-Footer.sw-Footer-sokol {
|
.sw-Footer.sw-Footer-sokol {
|
||||||
background-color: #8ce1d7; }
|
background-color: #8ce1d7; }
|
||||||
|
@ -795,7 +795,7 @@ body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transition: background-color 0.25s ease-out;
|
transition: background-color 0.25s ease-out;
|
||||||
width: 100%; }
|
width: 100%; }
|
||||||
.sw-Header.sw-Header-poa {
|
.sw-Header.sw-Header-core {
|
||||||
background-color: #5a2da5; }
|
background-color: #5a2da5; }
|
||||||
.sw-Header.sw-Header-sokol {
|
.sw-Header.sw-Header-sokol {
|
||||||
background-color: #8ce1d7; }
|
background-color: #8ce1d7; }
|
||||||
|
@ -918,10 +918,8 @@ body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
.ky-Keys_Block {
|
.ky-Keys_Block {
|
||||||
margin-bottom: 0; } }
|
margin-bottom: 0; } }
|
||||||
.ky-Keys_Block.ky-Keys_Block-poa {
|
.ky-Keys_Block.ky-Keys_Block-core {
|
||||||
border-color: #5a2da5; }
|
border-color: #5a2da5; }
|
||||||
.ky-Keys_Block.ky-Keys_Block-dai {
|
|
||||||
border-color: #fec042; }
|
|
||||||
.ky-Keys_Block.ky-Keys_Block-sokol {
|
.ky-Keys_Block.ky-Keys_Block-sokol {
|
||||||
border-color: #8ce1d7; }
|
border-color: #8ce1d7; }
|
||||||
|
|
||||||
|
@ -932,12 +930,12 @@ body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
margin: 0 0 25px;
|
margin: 0 0 25px;
|
||||||
text-align: left; }
|
text-align: left; }
|
||||||
.ky-Keys_BlockTitle.ky-Keys_BlockTitle-poa {
|
.ky-Keys_BlockTitle.ky-Keys_BlockTitle-core {
|
||||||
color: #5a2da5; }
|
color: #5a2da5; }
|
||||||
.ky-Keys_BlockTitle.ky-Keys_BlockTitle-dai {
|
|
||||||
color: #fec042; }
|
|
||||||
.ky-Keys_BlockTitle.ky-Keys_BlockTitle-sokol {
|
.ky-Keys_BlockTitle.ky-Keys_BlockTitle-sokol {
|
||||||
color: #8ce1d7; }
|
color: #8ce1d7; }
|
||||||
|
.ky-Keys_BlockTitle.ky-Keys_BlockTitle-dai {
|
||||||
|
color: #333; }
|
||||||
|
|
||||||
.ky-Keys_HashContainer {
|
.ky-Keys_HashContainer {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -951,12 +949,12 @@ body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
word-break: break-word; }
|
word-break: break-word; }
|
||||||
.ky-Keys_Hash.ky-Keys_Hash-poa {
|
.ky-Keys_Hash.ky-Keys_Hash-core {
|
||||||
color: #5a2da5; }
|
color: #5a2da5; }
|
||||||
.ky-Keys_Hash.ky-Keys_Hash-dai {
|
|
||||||
color: #fec042; }
|
|
||||||
.ky-Keys_Hash.ky-Keys_Hash-sokol {
|
.ky-Keys_Hash.ky-Keys_Hash-sokol {
|
||||||
color: #8ce1d7; }
|
color: #8ce1d7; }
|
||||||
|
.ky-Keys_Hash.ky-Keys_Hash-dai {
|
||||||
|
color: #333; }
|
||||||
|
|
||||||
.ky-Keys_Copy {
|
.ky-Keys_Copy {
|
||||||
background-image: url("../../assets/images/Keys/poa.svg");
|
background-image: url("../../assets/images/Keys/poa.svg");
|
||||||
|
@ -966,7 +964,7 @@ body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
width: 20px; }
|
width: 20px; }
|
||||||
.ky-Keys_Copy.ky-Keys_Copy-poa {
|
.ky-Keys_Copy.ky-Keys_Copy-core {
|
||||||
background-image: url("../../assets/images/Keys/poa.svg"); }
|
background-image: url("../../assets/images/Keys/poa.svg"); }
|
||||||
.ky-Keys_Copy.ky-Keys_Copy-sokol {
|
.ky-Keys_Copy.ky-Keys_Copy-sokol {
|
||||||
background-image: url("../../assets/images/Keys/sokol.svg"); }
|
background-image: url("../../assets/images/Keys/sokol.svg"); }
|
||||||
|
@ -1012,32 +1010,92 @@ body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
|
||||||
text-align: left; }
|
text-align: left; }
|
||||||
|
|
||||||
.ky-Keys_Warning {
|
.ky-Keys_Warning {
|
||||||
color: #777;
|
color: #5a2da5;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
text-align: left; }
|
text-align: left; }
|
||||||
.ky-Keys_Warning.ky-Keys_Warning-poa {
|
.ky-Keys_Warning.ky-Keys_Warning-core {
|
||||||
color: #5a2da5; }
|
color: #5a2da5; }
|
||||||
.ky-Keys_Warning.ky-Keys_Warning-dai {
|
|
||||||
color: #fec042; }
|
|
||||||
.ky-Keys_Warning.ky-Keys_Warning-sokol {
|
.ky-Keys_Warning.ky-Keys_Warning-sokol {
|
||||||
color: #8ce1d7; }
|
color: #8ce1d7; }
|
||||||
|
.ky-Keys_Warning.ky-Keys_Warning-dai {
|
||||||
|
color: #333; }
|
||||||
|
|
||||||
.ky-Keys_WarningIcon {
|
.ky-Keys_WarningIcon {
|
||||||
height: 48px;
|
height: 48px;
|
||||||
margin-bottom: 30px;
|
margin-bottom: 30px;
|
||||||
width: 48px; }
|
width: 48px; }
|
||||||
|
|
||||||
.ky-Keys_WarningIconPath.ky-Keys_WarningIconPath-poa {
|
.ky-Keys_WarningIconPath.ky-Keys_WarningIconPath-core {
|
||||||
fill: #5a2da5; }
|
fill: #5a2da5; }
|
||||||
|
|
||||||
|
.ky-Keys_WarningIconPath.ky-Keys_WarningIconPath-sokol {
|
||||||
|
fill: #8ce1d7; }
|
||||||
|
|
||||||
.ky-Keys_WarningIconPath.ky-Keys_WarningIconPath-dai {
|
.ky-Keys_WarningIconPath.ky-Keys_WarningIconPath-dai {
|
||||||
fill: #fec042; }
|
fill: #fec042; }
|
||||||
|
|
||||||
.ky-Keys_WarningIconPath.ky-Keys_WarningIconPath-sokol {
|
.ld-Loading {
|
||||||
fill: #8ce1d7; }
|
align-items: center;
|
||||||
|
background-color: rgba(90, 45, 165, 0.5);
|
||||||
|
bottom: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
left: 0;
|
||||||
|
position: fixed;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
z-index: 1000000; }
|
||||||
|
.ld-Loading.ld-Loading-core {
|
||||||
|
background-color: rgba(90, 45, 165, 0.5); }
|
||||||
|
.ld-Loading.ld-Loading-sokol {
|
||||||
|
background-color: rgba(140, 225, 215, 0.5); }
|
||||||
|
.ld-Loading.ld-Loading-dai {
|
||||||
|
background-color: rgba(254, 192, 66, 0.5); }
|
||||||
|
|
||||||
|
.ld-Loading_Animation {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 206px; }
|
||||||
|
|
||||||
|
.ld-Loading_Image {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
width: 120px; }
|
||||||
|
|
||||||
|
.ld-Loading_AnimationItem {
|
||||||
|
animation-duration: 2s;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
animation-name: fadeOut;
|
||||||
|
animation-timing-function: linear;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 50%;
|
||||||
|
height: 9px;
|
||||||
|
opacity: .2;
|
||||||
|
width: 9px; }
|
||||||
|
.ld-Loading_AnimationItem:nth-child(2) {
|
||||||
|
animation-delay: .1s; }
|
||||||
|
.ld-Loading_AnimationItem:nth-child(3) {
|
||||||
|
animation-delay: .2s; }
|
||||||
|
.ld-Loading_AnimationItem:nth-child(4) {
|
||||||
|
animation-delay: .3s; }
|
||||||
|
.ld-Loading_AnimationItem:nth-child(5) {
|
||||||
|
animation-delay: .4s; }
|
||||||
|
.ld-Loading_AnimationItem:nth-child(6) {
|
||||||
|
animation-delay: .5s; }
|
||||||
|
|
||||||
|
@keyframes fadeOut {
|
||||||
|
0% {
|
||||||
|
opacity: .2; }
|
||||||
|
20% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1); }
|
||||||
|
100% {
|
||||||
|
opacity: .2;
|
||||||
|
transform: scale(0.3); } }
|
||||||
|
|
||||||
.sw-LogoPOA {
|
.sw-LogoPOA {
|
||||||
display: block;
|
display: block;
|
||||||
|
@ -1095,13 +1153,13 @@ body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
top: 0; }
|
top: 0; }
|
||||||
.hm-MainImage_Img, .hm-MainImage_Img.hm-MainImage_Img-poa {
|
.hm-MainImage_Img, .hm-MainImage_Img.hm-MainImage_Img-core {
|
||||||
background-image: url("../../assets/images/MainImage/poa/image.png"); }
|
background-image: url("../../assets/images/MainImage/poa/image.png"); }
|
||||||
@media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
|
@media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
|
||||||
.hm-MainImage_Img, .hm-MainImage_Img.hm-MainImage_Img-poa {
|
.hm-MainImage_Img, .hm-MainImage_Img.hm-MainImage_Img-core {
|
||||||
background-image: url("../../assets/images/MainImage/poa/image@2x.png"); } }
|
background-image: url("../../assets/images/MainImage/poa/image@2x.png"); } }
|
||||||
@media (-webkit-min-device-pixel-ratio: 3), (-moz-min-device-pixel-ratio: 3), (min-resolution: 288dpi), (min-resolution: 3dppx) {
|
@media (-webkit-min-device-pixel-ratio: 3), (-moz-min-device-pixel-ratio: 3), (min-resolution: 288dpi), (min-resolution: 3dppx) {
|
||||||
.hm-MainImage_Img, .hm-MainImage_Img.hm-MainImage_Img-poa {
|
.hm-MainImage_Img, .hm-MainImage_Img.hm-MainImage_Img-core {
|
||||||
background-image: url("../../assets/images/MainImage/poa/image@3x.png"); } }
|
background-image: url("../../assets/images/MainImage/poa/image@3x.png"); } }
|
||||||
.hm-MainImage_Img.hm-MainImage_Img-sokol {
|
.hm-MainImage_Img.hm-MainImage_Img-sokol {
|
||||||
background-image: url("../../assets/images/MainImage/sokol/image.png"); }
|
background-image: url("../../assets/images/MainImage/sokol/image.png"); }
|
||||||
|
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 26">
|
||||||
|
<path fill="#FFF" fill-rule="evenodd" d="M8.938 17.812h-.813v2.376h-.003l.003.015c0 .44-.364.797-.812.797h-6.5A.805.805 0 0 1 0 20.203l.003-.015H0V5.813h.003c0-.006-.003-.011-.003-.016C0 5.357.364 5 .813 5h8.125c3.589 0 6.499 2.868 6.499 6.406s-2.91 6.406-6.499 6.406zM25.188 5c4.487 0 8.125 3.582 8.125 8s-3.638 8-8.125 8c-4.488 0-8.126-3.582-8.126-8s3.638-8 8.126-8zM52 20.493a.498.498 0 0 1-.503.494H33.064c-.022.003-.041.013-.064.013a.5.5 0 0 1-.5-.5c0-.109.042-.204.101-.286l-.009-.017 9.151-14.809h.02a.493.493 0 0 1 .965 0h.021L52 20.296l-.032.043c.017.05.032.1.032.154z"/>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 654 B |
|
@ -1,30 +1,30 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import { constants } from '../../utils/constants'
|
import xDaiLogo from './xdai.svg'
|
||||||
|
import poaLogo from './core.svg'
|
||||||
|
import sokolLogo from './sokol.svg'
|
||||||
|
|
||||||
const styles = netId => {
|
const getLogoSrc = networkBranch => {
|
||||||
const core = {
|
return (
|
||||||
backgroundColor: 'rgba(35, 29, 115, 0.8)'
|
{
|
||||||
}
|
core: poaLogo,
|
||||||
const sokol = {
|
sokol: sokolLogo,
|
||||||
backgroundColor: 'rgba(47, 109, 99, 0.8)'
|
dai: xDaiLogo
|
||||||
}
|
}[networkBranch] || poaLogo
|
||||||
|
)
|
||||||
if (netId in constants.NETWORKS) {
|
|
||||||
return constants.NETWORKS[netId].TESTNET ? sokol : core
|
|
||||||
}
|
|
||||||
|
|
||||||
return core
|
|
||||||
}
|
}
|
||||||
const Loading = ({ netId }) => (
|
|
||||||
<div className="loading-container" style={styles(netId)}>
|
export const Loading = ({ networkBranch }) => {
|
||||||
<div className="loading">
|
return (
|
||||||
<div className="loading-i" />
|
<div className={`ld-Loading ld-Loading-${networkBranch}`}>
|
||||||
<div className="loading-i" />
|
<img className={`ld-Loading_Image ld-Loading_Image-${networkBranch}`} src={getLogoSrc(networkBranch)} alt="" />
|
||||||
<div className="loading-i" />
|
<div className="ld-Loading_Animation">
|
||||||
<div className="loading-i" />
|
<div className="ld-Loading_AnimationItem" />
|
||||||
<div className="loading-i" />
|
<div className="ld-Loading_AnimationItem" />
|
||||||
<div className="loading-i" />
|
<div className="ld-Loading_AnimationItem" />
|
||||||
|
<div className="ld-Loading_AnimationItem" />
|
||||||
|
<div className="ld-Loading_AnimationItem" />
|
||||||
|
<div className="ld-Loading_AnimationItem" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)
|
||||||
)
|
}
|
||||||
export default Loading
|
|
||||||
|
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 26">
|
||||||
|
<path fill="#FFF" fill-rule="evenodd" d="M36.528 20H24.272c-.167 0-.334-.028-.499-.068l.018.068h-5.287l-1.607-5.969H.969A.96.96 0 0 1 0 13.078c0-.005.003-.01.003-.016H0V5.906C0 4.853.86 4 1.922 4l.016.002V4h30.275c1.061 0 2.153.855 2.437 1.91l3.285 12.18c.285 1.055-.345 1.91-1.407 1.91zM7.723 6.866H3.361l1.169 4.298h4.362L7.723 6.866zm7.209 0h-4.361l1.169 4.298h4.361l-1.169-4.298zm11.743 10.985h1.923l-.517-1.911h-1.922l.516 1.911zm5.201-10.985h-8.17l2.194 8.119h8.171l-2.195-8.119zm2.453 9.074h-1.922l.516 1.911h1.923l-.517-1.911zm-33.61.047v-.05h12.969v.003h1.557L16.342 20H1.938v-.002L1.922 20A1.914 1.914 0 0 1 0 18.094v-1.188h.005c0-.006-.005-.01-.005-.015 0-.439.308-.793.719-.904z"/>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 766 B |
|
@ -0,0 +1,24 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 52">
|
||||||
|
<defs>
|
||||||
|
<filter id="a" width="44" height="52" x="0" y="0" filterUnits="userSpaceOnUse">
|
||||||
|
<feOffset dy="3" in="SourceAlpha"/>
|
||||||
|
<feGaussianBlur result="blurOut" stdDeviation="2.449"/>
|
||||||
|
<feFlood flood-color="#D2D5D7" result="floodOut"/>
|
||||||
|
<feComposite in="floodOut" in2="blurOut" operator="atop"/>
|
||||||
|
<feComponentTransfer>
|
||||||
|
<feFuncA slope=".5" type="linear"/>
|
||||||
|
</feComponentTransfer>
|
||||||
|
<feMerge>
|
||||||
|
<feMergeNode/>
|
||||||
|
<feMergeNode in="SourceGraphic"/>
|
||||||
|
</feMerge>
|
||||||
|
</filter>
|
||||||
|
<linearGradient id="b" x1="0%" x2="0%" y1="100%" y2="0%">
|
||||||
|
<stop offset="0%" stop-color="#FFAD45"/>
|
||||||
|
<stop offset="100%" stop-color="#FFD342"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<path fill="#FFF" fill-rule="evenodd" d="M17.771 40.253c-3.368-2.101-9.884-6.163-10.841-6.762C5 32.154 5 30.021 5 30.021l.001-16.044S5 11.656 6.947 10.492l10.824-6.751c3.729-2.324 3.729-2.324 7.464.004l10.808 6.741c1.957 1.23 1.956 3.487 1.956 3.487v16.049s.001 2.235-1.956 3.485L25.232 40.25c-3.732 2.33-3.732 2.33-7.461.003z" filter="url(#a)"/>
|
||||||
|
<path fill="#FFF" fill-rule="evenodd" d="M30.055 13.884l-6.233 8.128 6.229 8.122h-4.644L21.5 25.039l-3.907 5.095h-4.644l6.229-8.122-6.233-8.128h4.644l3.911 5.1 3.911-5.1h4.644z"/>
|
||||||
|
<path fill="url(#b)" d="M30.055 13.884l-6.233 8.128 6.229 8.122h-4.644L21.5 25.039l-3.907 5.095h-4.644l6.229-8.122-6.233-8.128h4.644l3.911 5.1 3.911-5.1h4.644z"/>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 1.6 KiB |
|
@ -31,22 +31,22 @@ export const SocialIcons = ({ extraClass = '', networkBranch = '' }) => {
|
||||||
return (
|
return (
|
||||||
<div className={`ft-SocialIcons ${extraClass}`}>
|
<div className={`ft-SocialIcons ${extraClass}`}>
|
||||||
<IconTwitter
|
<IconTwitter
|
||||||
|
backgroundColor={backgroundColor}
|
||||||
|
color={iconColor}
|
||||||
text="POA Twitter"
|
text="POA Twitter"
|
||||||
url="https://twitter.com/poanetwork"
|
url="https://twitter.com/poanetwork"
|
||||||
backgroundColor={backgroundColor}
|
|
||||||
color={iconColor}
|
|
||||||
/>
|
/>
|
||||||
<IconTelegram
|
<IconTelegram
|
||||||
|
backgroundColor={backgroundColor}
|
||||||
|
color={iconColor}
|
||||||
text="POA Telegram"
|
text="POA Telegram"
|
||||||
url="https://t.me/oraclesnetwork"
|
url="https://t.me/oraclesnetwork"
|
||||||
backgroundColor={backgroundColor}
|
|
||||||
color={iconColor}
|
|
||||||
/>
|
/>
|
||||||
<IconGithub
|
<IconGithub
|
||||||
text="POA Github"
|
|
||||||
url="https://github.com/poanetwork"
|
|
||||||
backgroundColor={backgroundColor}
|
backgroundColor={backgroundColor}
|
||||||
color={iconColor}
|
color={iconColor}
|
||||||
|
text="POA Github"
|
||||||
|
url="https://github.com/poanetwork"
|
||||||
/>
|
/>
|
||||||
<IconPOA text="POA Network" url="'https://poa.network" backgroundColor={backgroundColor} color={iconColor} />
|
<IconPOA text="POA Network" url="'https://poa.network" backgroundColor={backgroundColor} color={iconColor} />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
let constants = {}
|
let constants = {}
|
||||||
|
|
||||||
constants.organization = 'poanetwork'
|
constants.organization = 'poanetwork'
|
||||||
constants.repoName = 'poa-chain-spec'
|
constants.repoName = 'poa-chain-spec'
|
||||||
constants.addressesSourceFile = 'contracts.json'
|
constants.addressesSourceFile = 'contracts.json'
|
||||||
|
|
Loading…
Reference in New Issue