(feature) header and footer styles, created individual components for logos and social icons.
This commit is contained in:
parent
47e8a1dacf
commit
a3131a6ee1
35
src/App.js
35
src/App.js
|
@ -1,7 +1,4 @@
|
|||
import './assets/stylesheets/index.css'
|
||||
import FileSaver from 'file-saver'
|
||||
import Footer from './components/Footer'
|
||||
import Header from './components/Header'
|
||||
import JSzip from 'jszip'
|
||||
import Keys from './components/Keys'
|
||||
import KeysManager from './utils/keysManager'
|
||||
|
@ -11,7 +8,12 @@ import addressGenerator from './utils/addressGenerator'
|
|||
import getWeb3 from './utils/getWeb3'
|
||||
import networkAddresses from './utils/addresses'
|
||||
import swal from 'sweetalert'
|
||||
import { Footer } from './components/Footer'
|
||||
import { Header } from './components/Header'
|
||||
import { constants } from './utils/constants'
|
||||
import { isTestnet } from './utils/utils'
|
||||
|
||||
import './assets/stylesheets/index.css'
|
||||
|
||||
function generateElement(msg) {
|
||||
let errorNode = document.createElement('div')
|
||||
|
@ -31,22 +33,28 @@ class App extends Component {
|
|||
this.state = {
|
||||
web3Config: {},
|
||||
mining: null,
|
||||
isDisabledBtn: props.generateKeysIsDisabled
|
||||
isDisabledBtn: props.generateKeysIsDisabled,
|
||||
isTestnet: false
|
||||
}
|
||||
this.keysManager = null
|
||||
|
||||
getWeb3()
|
||||
.then(async web3Config => {
|
||||
return networkAddresses(web3Config)
|
||||
})
|
||||
.then(async config => {
|
||||
const { web3Config, addresses } = config
|
||||
|
||||
this.keysManager = new KeysManager()
|
||||
await this.keysManager.init({
|
||||
web3: web3Config.web3Instance,
|
||||
netId: web3Config.netId,
|
||||
addresses
|
||||
})
|
||||
|
||||
console.log('culo ' + isTestnet(web3Config.netId))
|
||||
this.setState({
|
||||
isTestnet: isTestnet(web3Config.netId),
|
||||
isDisabledBtn: false,
|
||||
web3Config
|
||||
})
|
||||
|
@ -62,6 +70,7 @@ class App extends Component {
|
|||
}
|
||||
})
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (window.location.hash.indexOf('just-generate-keys') !== -1) {
|
||||
this.setState({ loading: true })
|
||||
|
@ -77,6 +86,7 @@ class App extends Component {
|
|||
}, 150)
|
||||
}
|
||||
}
|
||||
|
||||
async generateKeys(cb) {
|
||||
const mining = await addressGenerator()
|
||||
const voting = await addressGenerator()
|
||||
|
@ -93,6 +103,7 @@ class App extends Component {
|
|||
payout
|
||||
}
|
||||
}
|
||||
|
||||
async generateZip({ mining, voting, payout, netIdName }) {
|
||||
const zip = new JSzip()
|
||||
zip.file(`${netIdName}_keys/mining_key_${mining.jsonStore.address}.json`, JSON.stringify(mining.jsonStore))
|
||||
|
@ -107,6 +118,7 @@ class App extends Component {
|
|||
FileSaver.saveAs(blob, `poa_network_validator_keys.zip`)
|
||||
})
|
||||
}
|
||||
|
||||
async onClick() {
|
||||
this.setState({ loading: true })
|
||||
const initialKey = this.state.web3Config.defaultAccount
|
||||
|
@ -116,7 +128,7 @@ class App extends Component {
|
|||
} catch (e) {
|
||||
isValid = false
|
||||
}
|
||||
console.log(isValid)
|
||||
|
||||
if (Number(isValid) !== 1) {
|
||||
this.setState({ loading: false })
|
||||
const invalidKeyMsg = `The key is an invalid Initial key<br/>
|
||||
|
@ -142,7 +154,6 @@ class App extends Component {
|
|||
sender: initialKey
|
||||
})
|
||||
.then(async receipt => {
|
||||
console.log(receipt)
|
||||
if (receipt.status === true || receipt.status === '0x1') {
|
||||
this.setState({ loading: false })
|
||||
swal('Congratulations!', 'Your keys are generated!', 'success')
|
||||
|
@ -169,7 +180,6 @@ class App extends Component {
|
|||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error.message)
|
||||
this.setState({ loading: false, keysGenerated: false })
|
||||
let content = document.createElement('div')
|
||||
let msg
|
||||
|
@ -189,6 +199,7 @@ class App extends Component {
|
|||
})
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
let loader = this.state.loading ? <Loading netId={this.state.web3Config.netId} /> : ''
|
||||
let createKeyBtn = (
|
||||
|
@ -206,17 +217,19 @@ class App extends Component {
|
|||
</div>
|
||||
)
|
||||
let content
|
||||
|
||||
if (this.state.keysGenerated) {
|
||||
content = <Keys mining={this.state.mining} voting={this.state.voting} payout={this.state.payout} />
|
||||
} else {
|
||||
content = createKeyBtn
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="App">
|
||||
<Header netId={this.state.web3Config.netId} />
|
||||
<div className="lo-App">
|
||||
<Header isTestnet={this.state.isTestnet} />
|
||||
{loader}
|
||||
<section className="content">{content}</section>
|
||||
<Footer netId={this.state.web3Config.netId} />
|
||||
<section className="lo-App_Content">{content}</section>
|
||||
<Footer isTestnet={this.state.isTestnet} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
Binary file not shown.
After Width: | Height: | Size: 457 B |
Binary file not shown.
After Width: | Height: | Size: 309 B |
Binary file not shown.
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
After Width: | Height: | Size: 1.8 KiB |
|
@ -0,0 +1,12 @@
|
|||
.lo-App {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.lo-App_Content {
|
||||
@include content-layout-width();
|
||||
flex-grow: 1;
|
||||
}
|
|
@ -0,0 +1,44 @@
|
|||
.sw-Footer {
|
||||
align-items: center;
|
||||
background-color: $brand-primary;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
min-height: 50px;
|
||||
overflow: hidden;
|
||||
padding: 16px 0;
|
||||
transition: background-color 0.25s ease-out;
|
||||
width: 100%;
|
||||
|
||||
&.sw-Footer-test {
|
||||
background-color: $brand-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.sw-Footer_Content {
|
||||
@include content-layout-width();
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
@media (min-width: $breakpoint-md) {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.sw-Footer_Text {
|
||||
color: #fff;
|
||||
flex-grow: 1;
|
||||
font-size: 11px;
|
||||
font-weight: 300;
|
||||
line-height: 1.2;
|
||||
margin: 0;
|
||||
padding: 15px 0 0 0;
|
||||
text-align: center;
|
||||
|
||||
@media (min-width: $breakpoint-md) {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
|
@ -0,0 +1,19 @@
|
|||
.sw-Header {
|
||||
align-items: center;
|
||||
background-color: $brand-primary;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
height: 70px;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
transition: background-color 0.25s ease-out;
|
||||
width: 100%;
|
||||
|
||||
&.sw-Header-test {
|
||||
background-color: $brand-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.sw-Header_Content {
|
||||
@include content-layout-width();
|
||||
}
|
|
@ -0,0 +1,21 @@
|
|||
.sw-LogoPOA {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
|
||||
.sw-Header & {
|
||||
height: 26px;
|
||||
width: 167px;
|
||||
}
|
||||
|
||||
.sw-Footer & {
|
||||
height: 18px;
|
||||
width: 130px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.sw-LogoPOA_Image {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
|
@ -0,0 +1,21 @@
|
|||
.sw-LogoSokol {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
|
||||
.sw-Header & {
|
||||
height: 26px;
|
||||
width: 178px;
|
||||
}
|
||||
|
||||
.sw-Footer & {
|
||||
height: 18px;
|
||||
width: 123px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.sw-LogoSokol_Image {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
|
@ -0,0 +1,39 @@
|
|||
$ft-SocialIcons_Icon-dimensions: 30px !default;
|
||||
|
||||
.ft-SocialIcons {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: 15px;
|
||||
|
||||
@media (min-width: $breakpoint-md) {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ft-SocialIcons_Icon {
|
||||
background-color: #fff;
|
||||
border-radius: 3px;
|
||||
font-size: 0;
|
||||
height: $ft-SocialIcons_Icon-dimensions;
|
||||
line-height: 0;
|
||||
margin-right: 10px;
|
||||
width: $ft-SocialIcons_Icon-dimensions;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&#{ & }-github {
|
||||
mask-image: url('#{ $base-images-path }/SocialIcons/github.png');
|
||||
}
|
||||
&#{ & }-poa {
|
||||
mask-image: url('#{ $base-images-path }/SocialIcons/poa.png');
|
||||
}
|
||||
&#{ & }-telegram {
|
||||
mask-image: url('#{ $base-images-path }/SocialIcons/telegram.png');
|
||||
}
|
||||
&#{ & }-twitter {
|
||||
mask-image: url('#{ $base-images-path }/SocialIcons/twitter.png');
|
||||
}
|
||||
}
|
|
@ -0,0 +1,6 @@
|
|||
@import "App";
|
||||
@import "Footer";
|
||||
@import "Header";
|
||||
@import "LogoPOA";
|
||||
@import "LogoSokol";
|
||||
@import "SocialIcons";
|
|
@ -0,0 +1,16 @@
|
|||
@mixin content-layout-width() {
|
||||
max-width: $container-max-width;
|
||||
padding-left: $container-horizontal-padding-mobile;
|
||||
padding-right: $container-horizontal-padding-mobile;
|
||||
width: 100%;
|
||||
|
||||
@media (min-width: $breakpoint-md) {
|
||||
padding-left: $container-horizontal-padding-tablet;
|
||||
padding-right: $container-horizontal-padding-tablet;
|
||||
}
|
||||
|
||||
@media (min-width: $breakpoint-xl) {
|
||||
padding-left: $container-horizontal-padding-desktop;
|
||||
padding-right: $container-horizontal-padding-desktop;
|
||||
}
|
||||
}
|
|
@ -1,3 +1,5 @@
|
|||
@import 'variables';
|
||||
@import 'mixins';
|
||||
@import 'typography';
|
||||
|
||||
@import 'content-layout';
|
|
@ -2,19 +2,22 @@
|
|||
$brand-primary: #5a2da5;
|
||||
$brand-secondary: #8ce1d7;
|
||||
$base-border-color: #e9e9e9;
|
||||
$base-text-color: #4a4a4a;
|
||||
$base-title-color: #333;
|
||||
$base-text-color: #777;
|
||||
$base-text-color-light: #9b9b9b;
|
||||
$fullscreen-backdrop-color: rgba(78, 44, 137, 0.9);
|
||||
|
||||
// modal
|
||||
$sw-ModalWindow-horizontal-padding-xs: 8px;
|
||||
|
||||
// typography
|
||||
$base-font-size: 16px;
|
||||
$base-font-size: 14px;
|
||||
|
||||
// paths
|
||||
$base-images-path: '../../assets/images';
|
||||
|
||||
// layout
|
||||
$container-max-width: 1000px;
|
||||
$container-horizontal-padding-desktop: 20px;
|
||||
$container-horizontal-padding-tablet: 20px;
|
||||
$container-horizontal-padding-mobile: 10px;
|
||||
|
||||
// responsive breakpoints
|
||||
$breakpoint-xs: 320px;
|
||||
$breakpoint-sm: 480px;
|
||||
|
@ -26,15 +29,3 @@ $breakpoint-xxxl: 1366px;
|
|||
|
||||
// z-index
|
||||
$z-index-max: 12345678;
|
||||
|
||||
// grid gaps
|
||||
$grid-column-gap-md: 15px;
|
||||
$grid-column-gap-xl: 39px;
|
||||
$grid-column-gap-xxl: 74px;
|
||||
$grid-column-gap-xxl: 90px;
|
||||
|
||||
$grid-row-gap-md: 22px;
|
||||
$grid-row-gap-lg: 31px;
|
||||
|
||||
// home
|
||||
$hm-Home_Btn-width: 230px;
|
|
@ -349,6 +349,173 @@ template {
|
|||
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
color: #4a4a4a;
|
||||
color: #777;
|
||||
font-family: Nunito, sans-serif;
|
||||
font-size: 16px; }
|
||||
font-size: 14px; }
|
||||
|
||||
html,
|
||||
body,
|
||||
#root,
|
||||
html.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown),
|
||||
body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
|
||||
height: 100%; }
|
||||
|
||||
#root {
|
||||
display: flex;
|
||||
overflow: auto; }
|
||||
|
||||
.lo-App {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 100%; }
|
||||
|
||||
.lo-App_Content {
|
||||
max-width: 1000px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
width: 100%;
|
||||
flex-grow: 1; }
|
||||
@media (min-width: 768px) {
|
||||
.lo-App_Content {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px; } }
|
||||
@media (min-width: 1024px) {
|
||||
.lo-App_Content {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px; } }
|
||||
|
||||
.sw-Footer {
|
||||
align-items: center;
|
||||
background-color: #5a2da5;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
min-height: 50px;
|
||||
overflow: hidden;
|
||||
padding: 16px 0;
|
||||
transition: background-color 0.25s ease-out;
|
||||
width: 100%; }
|
||||
.sw-Footer.sw-Footer-test {
|
||||
background-color: #8ce1d7; }
|
||||
|
||||
.sw-Footer_Content {
|
||||
max-width: 1000px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center; }
|
||||
@media (min-width: 768px) {
|
||||
.sw-Footer_Content {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px; } }
|
||||
@media (min-width: 1024px) {
|
||||
.sw-Footer_Content {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px; } }
|
||||
@media (min-width: 768px) {
|
||||
.sw-Footer_Content {
|
||||
flex-direction: row;
|
||||
justify-content: space-between; } }
|
||||
|
||||
.sw-Footer_Text {
|
||||
color: #fff;
|
||||
flex-grow: 1;
|
||||
font-size: 11px;
|
||||
font-weight: 300;
|
||||
line-height: 1.2;
|
||||
margin: 0;
|
||||
padding: 15px 0 0 0;
|
||||
text-align: center; }
|
||||
@media (min-width: 768px) {
|
||||
.sw-Footer_Text {
|
||||
padding-top: 0; } }
|
||||
|
||||
.sw-Header {
|
||||
align-items: center;
|
||||
background-color: #5a2da5;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
height: 70px;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
transition: background-color 0.25s ease-out;
|
||||
width: 100%; }
|
||||
.sw-Header.sw-Header-test {
|
||||
background-color: #8ce1d7; }
|
||||
|
||||
.sw-Header_Content {
|
||||
max-width: 1000px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
width: 100%; }
|
||||
@media (min-width: 768px) {
|
||||
.sw-Header_Content {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px; } }
|
||||
@media (min-width: 1024px) {
|
||||
.sw-Header_Content {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px; } }
|
||||
|
||||
.sw-LogoPOA {
|
||||
display: block;
|
||||
text-decoration: none; }
|
||||
.sw-Header .sw-LogoPOA {
|
||||
height: 26px;
|
||||
width: 167px; }
|
||||
.sw-Footer .sw-LogoPOA {
|
||||
height: 18px;
|
||||
width: 130px; }
|
||||
|
||||
.sw-LogoPOA_Image {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%; }
|
||||
|
||||
.sw-LogoSokol {
|
||||
display: block;
|
||||
text-decoration: none; }
|
||||
.sw-Header .sw-LogoSokol {
|
||||
height: 26px;
|
||||
width: 178px; }
|
||||
.sw-Footer .sw-LogoSokol {
|
||||
height: 18px;
|
||||
width: 123px; }
|
||||
|
||||
.sw-LogoSokol_Image {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%; }
|
||||
|
||||
.ft-SocialIcons {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-top: 15px; }
|
||||
@media (min-width: 768px) {
|
||||
.ft-SocialIcons {
|
||||
padding-top: 0; } }
|
||||
|
||||
.ft-SocialIcons_Icon {
|
||||
background-color: #fff;
|
||||
border-radius: 3px;
|
||||
font-size: 0;
|
||||
height: 30px;
|
||||
line-height: 0;
|
||||
margin-right: 10px;
|
||||
width: 30px; }
|
||||
.ft-SocialIcons_Icon:last-child {
|
||||
margin-right: 0; }
|
||||
.ft-SocialIcons_Icon.ft-SocialIcons_Icon-github {
|
||||
mask-image: url("../../assets/images/SocialIcons/github.png"); }
|
||||
.ft-SocialIcons_Icon.ft-SocialIcons_Icon-poa {
|
||||
mask-image: url("../../assets/images/SocialIcons/poa.png"); }
|
||||
.ft-SocialIcons_Icon.ft-SocialIcons_Icon-telegram {
|
||||
mask-image: url("../../assets/images/SocialIcons/telegram.png"); }
|
||||
.ft-SocialIcons_Icon.ft-SocialIcons_Icon-twitter {
|
||||
mask-image: url("../../assets/images/SocialIcons/twitter.png"); }
|
||||
|
|
|
@ -0,0 +1,13 @@
|
|||
html,
|
||||
body,
|
||||
#root,
|
||||
html.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown),
|
||||
body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
|
||||
// swal2-shown above are for when sweet alert is showing
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#root {
|
||||
display: flex;
|
||||
overflow: auto;
|
||||
}
|
|
@ -1,32 +1,17 @@
|
|||
import React from 'react'
|
||||
import moment from 'moment'
|
||||
import { Logo } from '../Logo'
|
||||
import { SocialIcons } from '../SocialIcons'
|
||||
import { constants } from '../../utils/constants'
|
||||
|
||||
const Footer = ({ netId }) => {
|
||||
const footerClassName = netId in constants.NETWORKS && constants.NETWORKS[netId].TESTNET ? 'sokol' : ''
|
||||
|
||||
export const Footer = ({ extraClassName = '', isTestnet = false }) => {
|
||||
return (
|
||||
<footer className={`footer ${footerClassName}`}>
|
||||
<div className="container">
|
||||
<p className="footer-rights">{moment().format('YYYY')} POA Network. All rights reserved.</p>
|
||||
<a href="/poa-dapps-keys-generation" className="footer-logo" />
|
||||
<div className="socials">
|
||||
<a href="https://twitter.com/poanetwork" className="socials-i socials-i_twitter">
|
||||
Twitter
|
||||
</a>
|
||||
<a href="https://poa.network" className="socials-i socials-i_oracles">
|
||||
POA Network
|
||||
</a>
|
||||
<a href="https://t.me/oraclesnetwork" className="socials-i socials-i_telegram">
|
||||
Telegram
|
||||
</a>
|
||||
<a href="https://github.com/poanetwork/" className="socials-i socials-i_github">
|
||||
GitHub
|
||||
</a>
|
||||
</div>
|
||||
<footer className={`sw-Footer ${extraClassName} ${isTestnet ? 'sw-Footer-test' : ''}`}>
|
||||
<div className="sw-Footer_Content">
|
||||
<Logo isTestnet={isTestnet} href={constants.baseURL} />
|
||||
<p className="sw-Footer_Text">{moment().format('YYYY')} POA Network. All rights reserved.</p>
|
||||
<SocialIcons />
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
||||
export default Footer
|
||||
|
|
|
@ -1,17 +1,13 @@
|
|||
import React from 'react'
|
||||
import { constants } from '../../utils/constants'
|
||||
import { Logo } from '../Logo'
|
||||
|
||||
let Header = ({ netId }) => {
|
||||
const thisIsTestnet = netId in constants.NETWORKS && constants.NETWORKS[netId].TESTNET
|
||||
const headerClassName = thisIsTestnet ? 'sokol' : ''
|
||||
const logoClassName = thisIsTestnet ? 'header-logo-sokol' : 'header-logo'
|
||||
export const Header = ({ extraClassName = '', isTestnet = false }) => {
|
||||
return (
|
||||
<header className={`header ${headerClassName}`}>
|
||||
<div className="container">
|
||||
<a href="/poa-dapps-keys-generation" className={logoClassName} />
|
||||
<header className={`sw-Header ${extraClassName} ${isTestnet ? 'sw-Header-test' : ''}`}>
|
||||
<div className="sw-Header_Content">
|
||||
<Logo isTestnet={isTestnet} href={constants.baseURL} />
|
||||
</div>
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
||||
export default Header
|
||||
|
|
|
@ -0,0 +1,7 @@
|
|||
import React from 'react'
|
||||
import { LogoPOA } from '../LogoPOA'
|
||||
import { LogoSokol } from '../LogoSokol'
|
||||
|
||||
export const Logo = ({ href = null, extraClass = '', isTestnet = false }) => {
|
||||
return isTestnet ? <LogoSokol href={href} extraClass={extraClass} /> : <LogoPOA href={href} extraClass={extraClass} />
|
||||
}
|
|
@ -0,0 +1,10 @@
|
|||
import React from 'react'
|
||||
import logoPOA from './logo.svg'
|
||||
|
||||
export const LogoPOA = ({ href = null, extraClass = '' }) => {
|
||||
return (
|
||||
<a href={href} className={`sw-LogoPOA ${extraClass}`}>
|
||||
<img className="sw-LogoPOA_Image" src={logoPOA} alt="" />
|
||||
</a>
|
||||
)
|
||||
}
|
|
@ -0,0 +1,32 @@
|
|||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="167"
|
||||
height="26"
|
||||
>
|
||||
<defs>
|
||||
<style type="text/css">
|
||||
@import url('https://fonts.googleapis.com/css?family=Nunito:400');
|
||||
text {
|
||||
font-family: "Nunito", sans-serif;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<path
|
||||
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.812h.003L0 5.797C0 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"
|
||||
fill-rule="evenodd"
|
||||
fill="#FFF"
|
||||
/>
|
||||
<text
|
||||
fill="#fff"
|
||||
font-family="Nunito"
|
||||
font-size="14"
|
||||
font-weight="300"
|
||||
x="63"
|
||||
y="17"
|
||||
>Ceremony App</text>
|
||||
<path
|
||||
d="M166 0a1 1 0 0 1 1 1v24a1 1 0 0 1-2 0V1a1 1 0 0 1 1-1z"
|
||||
fill-rule="evenodd"
|
||||
fill="#60DB97"
|
||||
/>
|
||||
</svg>
|
After Width: | Height: | Size: 1.2 KiB |
|
@ -0,0 +1,10 @@
|
|||
import React from 'react'
|
||||
import logoSokol from './logo.svg'
|
||||
|
||||
export const LogoSokol = ({ href = null, extraClass = '' }) => {
|
||||
return (
|
||||
<a href={href} className={`sw-LogoSokol ${extraClass}`}>
|
||||
<img className="sw-LogoSokol_Image" src={logoSokol} alt="" />
|
||||
</a>
|
||||
)
|
||||
}
|
|
@ -0,0 +1,32 @@
|
|||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="178"
|
||||
height="26"
|
||||
>
|
||||
<defs>
|
||||
<style type="text/css">
|
||||
@import url('https://fonts.googleapis.com/css?family=Nunito:400');
|
||||
text {
|
||||
font-family: "Nunito", sans-serif;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<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.078l.003-.015H0V5.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-.049h12.969v.002h1.557L16.341 20H1.938v-.002L1.922 20A1.914 1.914 0 0 1 0 18.094v-1.188h.005c0-.006-.005-.01-.005-.015 0-.44.308-.793.719-.904z"
|
||||
/>
|
||||
<text
|
||||
fill="#fff"
|
||||
font-family="Nunito"
|
||||
font-size="14"
|
||||
font-weight="300"
|
||||
x="47"
|
||||
y="17"
|
||||
>Ceremony App</text>
|
||||
<path
|
||||
d="M166 0a1 1 0 0 1 1 1v24a1 1 0 0 1-2 0V1a1 1 0 0 1 1-1z"
|
||||
fill-rule="evenodd"
|
||||
fill="#fff"
|
||||
/>
|
||||
</svg>
|
After Width: | Height: | Size: 1.3 KiB |
|
@ -0,0 +1,45 @@
|
|||
import React from 'react'
|
||||
|
||||
const socialNetworks = [
|
||||
{
|
||||
tag: 'twitter',
|
||||
text: 'Twitter',
|
||||
url: 'https://twitter.com/poanetwork'
|
||||
},
|
||||
{
|
||||
tag: 'poa',
|
||||
text: 'POA Network',
|
||||
url: 'https://poa.network'
|
||||
},
|
||||
{
|
||||
tag: 'telegram',
|
||||
text: 'Telegram',
|
||||
url: 'https://t.me/oraclesnetwork'
|
||||
},
|
||||
{
|
||||
tag: 'github',
|
||||
text: 'GitHub',
|
||||
url: 'https://github.com/poanetwork/'
|
||||
}
|
||||
]
|
||||
|
||||
const getSocialNetworks = () => {
|
||||
return socialNetworks.map((item, index) => {
|
||||
return (
|
||||
<a
|
||||
className={`ft-SocialIcons_Icon ft-SocialIcons_Icon-${item.tag}`}
|
||||
href={item.url}
|
||||
key={index}
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
title={item.text}
|
||||
>
|
||||
{item.text}
|
||||
</a>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
export const SocialIcons = ({ extraClass = '' }) => {
|
||||
return <div className={`ft-SocialIcons ${extraClass}`}>{getSocialNetworks()}</div>
|
||||
}
|
|
@ -6,6 +6,7 @@ constants.ABIsSources = {
|
|||
KeysManager: 'KeysManager.abi.json'
|
||||
}
|
||||
constants.userDeniedTransactionPattern = 'User denied transaction'
|
||||
constants.baseURL = '/poa-dapps-keys-generation'
|
||||
|
||||
constants.NETWORKS = {
|
||||
'77': {
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
import { constants } from './constants'
|
||||
|
||||
export const isTestnet = netId => {
|
||||
return netId in constants.NETWORKS && constants.NETWORKS[netId].TESTNET
|
||||
}
|
Loading…
Reference in New Issue