poanetwork
/
poa-dapps-keys-generation
mirror of https://github.com/poanetwork/poa-dapps-keys-generation.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

(add) loading component - (fix) key blocks styles mixins

This commit is contained in:
Gabriel Rodriguez Alsina 2018-12-13 23:49:21 -03:00
parent 094f34794a
commit d0b7ca0c55
16 changed files with 265 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/App.js
View File

@ -2,7 +2,6 @@ import FileSaver from 'file-saver'
import JSzip from 'jszip'
import Keys from './components/Keys'
import KeysManager from './utils/keysManager'
import Loading from './components/Loading'
import React, { Component } from 'react'
import addressGenerator from './utils/addressGenerator'
import getWeb3 from './utils/getWeb3'
@ -11,8 +10,10 @@ import swal from 'sweetalert'
import { Footer } from './components/Footer'
import { Header } from './components/Header'
import { Home } from './components/Home'
import { Loading } from './components/Loading'
import { constants } from './utils/constants'
import { getNetworkBranch } from './utils/utils'
import './assets/stylesheets/index.css'
function generateElement(msg) {
@ -200,12 +201,12 @@ class App extends Component {
}
render() {
let loader = this.state.loading ? <Loading netId={this.state.web3Config.netId} /> : ''
const loader = this.state.loading ? <Loading networkBranch={this.state.networkBranch} /> : null
return (
<div className="lo-App">
<Header networkBranch={this.state.networkBranch} />
{loader}
<Header networkBranch={this.state.networkBranch} />
<section className="lo-App_Content">
{this.state.keysGenerated ? (
<Keys

2
src/assets/stylesheets/components/_ButtonDownload.scss
View File

@ -7,7 +7,7 @@ $sw-ButtonDownload-height: 44px !default;
@include button-disabled($poa-purple);
@include button-shadow($poa-purple);
&#{ & }-poa {
&#{ & }-core {
background-color: $poa-purple;
@include button-focus-active-hover($poa-purple);
@include button-shadow($poa-purple);

2
src/assets/stylesheets/components/_ButtonGenerate.scss
View File

@ -7,7 +7,7 @@ $sw-ButtonGenerate-height: 44px !default;
@include button-disabled($poa-purple);
@include button-shadow($poa-purple);
&#{ & }-poa {
&#{ & }-core {
background-color: $poa-purple;
@include button-focus-active-hover($poa-purple);
@include button-shadow($poa-purple);

2
src/assets/stylesheets/components/_Footer.scss
View File

@ -10,7 +10,7 @@
transition: background-color 0.25s ease-out;
width: 100%;
&#{ & }-poa {
&#{ & }-core {
background-color: $poa-purple;
}

2
src/assets/stylesheets/components/_Header.scss
View File

@ -9,7 +9,7 @@
transition: background-color 0.25s ease-out;
width: 100%;
&#{ & }-poa {
&#{ & }-core {
background-color: $poa-purple;
}

38
src/assets/stylesheets/components/_Keys.scss
View File

@ -1,17 +1,33 @@
$ky-Keys-gap: 40px;
@mixin keys-color-variants-base($property) {
&#{ & }-core {
#{ $property }: $poa-purple;
}
&#{ & }-sokol {
#{ $property }: $sokol-cyan;
}
}
@mixin keys-color-variants($property) {
&#{ & }-poa {
#{ $property }: $poa-purple;
}
@include keys-color-variants-base($property);
&#{ & }-dai {
#{ $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;
}
@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;
text-align: left;
@include keys-color-variants('color');
@include keys-color-variants-dai-dark('color');
}
.ky-Keys_HashContainer {
@ -69,7 +85,7 @@ $ky-Keys-gap: 40px;
text-align: left;
word-break: break-word;
@include keys-color-variants('color');
@include keys-color-variants-dai-dark('color');
}
.ky-Keys_Copy {
@ -81,7 +97,7 @@ $ky-Keys-gap: 40px;
height: 20px;
width: 20px;
&#{ & }-poa {
&#{ & }-core {
background-image: url('#{ $base-images-path }/Keys/poa.svg');
}
@ -143,14 +159,14 @@ $ky-Keys-gap: 40px;
}
.ky-Keys_Warning {
color: #777;
color: $poa-purple;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
margin: 0;
text-align: left;
@include keys-color-variants('color');
@include keys-color-variants-dai-dark('color');
}
.ky-Keys_WarningIcon {

79
src/assets/stylesheets/components/_Loading.scss Normal file
View File

@ -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);
}
}

2
src/assets/stylesheets/components/_MainImage.scss
View File

@ -17,7 +17,7 @@
width: 520px;
&,
&#{ & }-poa {
&#{ & }-core {
@include image-retina('#{ $base-images-path }/MainImage/poa/image', 'png');
}

1
src/assets/stylesheets/components/_index.scss
View File

@ -9,6 +9,7 @@
@import "IconTelegram";
@import "IconTwitter";
@import "Keys";
@import "Loading";
@import "LogoPOA";
@import "LogoSokol";
@import "MainImage";

114
src/assets/stylesheets/index.css
View File

@ -624,12 +624,12 @@ body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
.sw-ButtonDownload[disabled] {
cursor: not-allowed;
opacity: 0.7; }
.sw-ButtonDownload.sw-ButtonDownload-poa {
.sw-ButtonDownload.sw-ButtonDownload-core {
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 {
.sw-ButtonDownload.sw-ButtonDownload-core:focus, .sw-ButtonDownload.sw-ButtonDownload-core:active, .sw-ButtonDownload.sw-ButtonDownload-core: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 {
.sw-ButtonDownload.sw-ButtonDownload-core[disabled]:focus, .sw-ButtonDownload.sw-ButtonDownload-core[disabled].active, .sw-ButtonDownload.sw-ButtonDownload-core[disabled]:hover {
background-color: #5a2da5; }
.sw-ButtonDownload.sw-ButtonDownload-sokol {
background-color: #8ce1d7;
@ -688,12 +688,12 @@ body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
.sw-ButtonGenerate[disabled] {
cursor: not-allowed;
opacity: 0.7; }
.sw-ButtonGenerate.sw-ButtonGenerate-poa {
.sw-ButtonGenerate.sw-ButtonGenerate-core {
background-color: #5a2da5;
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; }
.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; }
.sw-ButtonGenerate.sw-ButtonGenerate-sokol {
background-color: #8ce1d7;
@ -741,7 +741,7 @@ body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
padding: 16px 0;
transition: background-color 0.25s ease-out;
width: 100%; }
.sw-Footer.sw-Footer-poa {
.sw-Footer.sw-Footer-core {
background-color: #5a2da5; }
.sw-Footer.sw-Footer-sokol {
background-color: #8ce1d7; }
@ -795,7 +795,7 @@ body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
overflow: hidden;
transition: background-color 0.25s ease-out;
width: 100%; }
.sw-Header.sw-Header-poa {
.sw-Header.sw-Header-core {
background-color: #5a2da5; }
.sw-Header.sw-Header-sokol {
background-color: #8ce1d7; }
@ -918,10 +918,8 @@ body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
@media (min-width: 768px) {
.ky-Keys_Block {
margin-bottom: 0; } }
.ky-Keys_Block.ky-Keys_Block-poa {
.ky-Keys_Block.ky-Keys_Block-core {
border-color: #5a2da5; }
.ky-Keys_Block.ky-Keys_Block-dai {
border-color: #fec042; }
.ky-Keys_Block.ky-Keys_Block-sokol {
border-color: #8ce1d7; }
@ -932,12 +930,12 @@ body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
line-height: 1.2;
margin: 0 0 25px;
text-align: left; }
.ky-Keys_BlockTitle.ky-Keys_BlockTitle-poa {
.ky-Keys_BlockTitle.ky-Keys_BlockTitle-core {
color: #5a2da5; }
.ky-Keys_BlockTitle.ky-Keys_BlockTitle-dai {
color: #fec042; }
.ky-Keys_BlockTitle.ky-Keys_BlockTitle-sokol {
color: #8ce1d7; }
.ky-Keys_BlockTitle.ky-Keys_BlockTitle-dai {
color: #333; }
.ky-Keys_HashContainer {
display: flex;
@ -951,12 +949,12 @@ body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
margin: 0;
text-align: left;
word-break: break-word; }
.ky-Keys_Hash.ky-Keys_Hash-poa {
.ky-Keys_Hash.ky-Keys_Hash-core {
color: #5a2da5; }
.ky-Keys_Hash.ky-Keys_Hash-dai {
color: #fec042; }
.ky-Keys_Hash.ky-Keys_Hash-sokol {
color: #8ce1d7; }
.ky-Keys_Hash.ky-Keys_Hash-dai {
color: #333; }
.ky-Keys_Copy {
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;
height: 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"); }
.ky-Keys_Copy.ky-Keys_Copy-sokol {
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; }
.ky-Keys_Warning {
color: #777;
color: #5a2da5;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
margin: 0;
text-align: left; }
.ky-Keys_Warning.ky-Keys_Warning-poa {
.ky-Keys_Warning.ky-Keys_Warning-core {
color: #5a2da5; }
.ky-Keys_Warning.ky-Keys_Warning-dai {
color: #fec042; }
.ky-Keys_Warning.ky-Keys_Warning-sokol {
color: #8ce1d7; }
.ky-Keys_Warning.ky-Keys_Warning-dai {
color: #333; }
.ky-Keys_WarningIcon {
height: 48px;
margin-bottom: 30px;
width: 48px; }
.ky-Keys_WarningIconPath.ky-Keys_WarningIconPath-poa {
.ky-Keys_WarningIconPath.ky-Keys_WarningIconPath-core {
fill: #5a2da5; }
.ky-Keys_WarningIconPath.ky-Keys_WarningIconPath-sokol {
fill: #8ce1d7; }
.ky-Keys_WarningIconPath.ky-Keys_WarningIconPath-dai {
fill: #fec042; }
.ky-Keys_WarningIconPath.ky-Keys_WarningIconPath-sokol {
fill: #8ce1d7; }
.ld-Loading {
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 {
display: block;
@ -1095,13 +1153,13 @@ body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
position: absolute;
right: 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"); }
@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"); } }
@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"); } }
.hm-MainImage_Img.hm-MainImage_Img-sokol {
background-image: url("../../assets/images/MainImage/sokol/image.png"); }

3
src/components/Loading/core.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 654 B

52
src/components/Loading/index.js
View File

@ -1,30 +1,30 @@
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 core = {
backgroundColor: 'rgba(35, 29, 115, 0.8)'
}
const sokol = {
backgroundColor: 'rgba(47, 109, 99, 0.8)'
}
if (netId in constants.NETWORKS) {
return constants.NETWORKS[netId].TESTNET ? sokol : core
}
return core
const getLogoSrc = networkBranch => {
return (
{
core: poaLogo,
sokol: sokolLogo,
dai: xDaiLogo
}[networkBranch] || poaLogo
)
}
const Loading = ({ netId }) => (
<div className="loading-container" style={styles(netId)}>
<div className="loading">
<div className="loading-i" />
<div className="loading-i" />
<div className="loading-i" />
<div className="loading-i" />
<div className="loading-i" />
<div className="loading-i" />
export const Loading = ({ networkBranch }) => {
return (
<div className={`ld-Loading ld-Loading-${networkBranch}`}>
<img className={`ld-Loading_Image ld-Loading_Image-${networkBranch}`} src={getLogoSrc(networkBranch)} alt="" />
<div className="ld-Loading_Animation">
<div className="ld-Loading_AnimationItem" />
<div className="ld-Loading_AnimationItem" />
<div className="ld-Loading_AnimationItem" />
<div className="ld-Loading_AnimationItem" />
<div className="ld-Loading_AnimationItem" />
<div className="ld-Loading_AnimationItem" />
</div>
</div>
</div>
)
export default Loading
)
}

3
src/components/Loading/sokol.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 766 B

24
src/components/Loading/xdai.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

12
src/components/SocialIcons/index.js
View File

@ -31,22 +31,22 @@ export const SocialIcons = ({ extraClass = '', networkBranch = '' }) => {
return (
<div className={`ft-SocialIcons ${extraClass}`}>
<IconTwitter
backgroundColor={backgroundColor}
color={iconColor}
text="POA Twitter"
url="https://twitter.com/poanetwork"
backgroundColor={backgroundColor}
color={iconColor}
/>
<IconTelegram
backgroundColor={backgroundColor}
color={iconColor}
text="POA Telegram"
url="https://t.me/oraclesnetwork"
backgroundColor={backgroundColor}
color={iconColor}
/>
<IconGithub
text="POA Github"
url="https://github.com/poanetwork"
backgroundColor={backgroundColor}
color={iconColor}
text="POA Github"
url="https://github.com/poanetwork"
/>
<IconPOA text="POA Network" url="'https://poa.network" backgroundColor={backgroundColor} color={iconColor} />
</div>

1
src/utils/constants.js
View File

@ -1,4 +1,5 @@
let constants = {}
constants.organization = 'poanetwork'
constants.repoName = 'poa-chain-spec'
constants.addressesSourceFile = 'contracts.json'