(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 FileSaver from 'file-saver'
|
||||||
import Footer from './components/Footer'
|
|
||||||
import Header from './components/Header'
|
|
||||||
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'
|
||||||
|
@ -11,7 +8,12 @@ import addressGenerator from './utils/addressGenerator'
|
||||||
import getWeb3 from './utils/getWeb3'
|
import getWeb3 from './utils/getWeb3'
|
||||||
import networkAddresses from './utils/addresses'
|
import networkAddresses from './utils/addresses'
|
||||||
import swal from 'sweetalert'
|
import swal from 'sweetalert'
|
||||||
|
import { Footer } from './components/Footer'
|
||||||
|
import { Header } from './components/Header'
|
||||||
import { constants } from './utils/constants'
|
import { constants } from './utils/constants'
|
||||||
|
import { isTestnet } from './utils/utils'
|
||||||
|
|
||||||
|
import './assets/stylesheets/index.css'
|
||||||
|
|
||||||
function generateElement(msg) {
|
function generateElement(msg) {
|
||||||
let errorNode = document.createElement('div')
|
let errorNode = document.createElement('div')
|
||||||
|
@ -31,22 +33,28 @@ class App extends Component {
|
||||||
this.state = {
|
this.state = {
|
||||||
web3Config: {},
|
web3Config: {},
|
||||||
mining: null,
|
mining: null,
|
||||||
isDisabledBtn: props.generateKeysIsDisabled
|
isDisabledBtn: props.generateKeysIsDisabled,
|
||||||
|
isTestnet: false
|
||||||
}
|
}
|
||||||
this.keysManager = null
|
this.keysManager = null
|
||||||
|
|
||||||
getWeb3()
|
getWeb3()
|
||||||
.then(async web3Config => {
|
.then(async web3Config => {
|
||||||
return networkAddresses(web3Config)
|
return networkAddresses(web3Config)
|
||||||
})
|
})
|
||||||
.then(async config => {
|
.then(async config => {
|
||||||
const { web3Config, addresses } = config
|
const { web3Config, addresses } = config
|
||||||
|
|
||||||
this.keysManager = new KeysManager()
|
this.keysManager = new KeysManager()
|
||||||
await this.keysManager.init({
|
await this.keysManager.init({
|
||||||
web3: web3Config.web3Instance,
|
web3: web3Config.web3Instance,
|
||||||
netId: web3Config.netId,
|
netId: web3Config.netId,
|
||||||
addresses
|
addresses
|
||||||
})
|
})
|
||||||
|
|
||||||
|
console.log('culo ' + isTestnet(web3Config.netId))
|
||||||
this.setState({
|
this.setState({
|
||||||
|
isTestnet: isTestnet(web3Config.netId),
|
||||||
isDisabledBtn: false,
|
isDisabledBtn: false,
|
||||||
web3Config
|
web3Config
|
||||||
})
|
})
|
||||||
|
@ -62,6 +70,7 @@ class App extends Component {
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
if (window.location.hash.indexOf('just-generate-keys') !== -1) {
|
if (window.location.hash.indexOf('just-generate-keys') !== -1) {
|
||||||
this.setState({ loading: true })
|
this.setState({ loading: true })
|
||||||
|
@ -77,6 +86,7 @@ class App extends Component {
|
||||||
}, 150)
|
}, 150)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async generateKeys(cb) {
|
async generateKeys(cb) {
|
||||||
const mining = await addressGenerator()
|
const mining = await addressGenerator()
|
||||||
const voting = await addressGenerator()
|
const voting = await addressGenerator()
|
||||||
|
@ -93,6 +103,7 @@ class App extends Component {
|
||||||
payout
|
payout
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
async generateZip({ mining, voting, payout, netIdName }) {
|
async generateZip({ mining, voting, payout, netIdName }) {
|
||||||
const zip = new JSzip()
|
const zip = new JSzip()
|
||||||
zip.file(`${netIdName}_keys/mining_key_${mining.jsonStore.address}.json`, JSON.stringify(mining.jsonStore))
|
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`)
|
FileSaver.saveAs(blob, `poa_network_validator_keys.zip`)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
async onClick() {
|
async onClick() {
|
||||||
this.setState({ loading: true })
|
this.setState({ loading: true })
|
||||||
const initialKey = this.state.web3Config.defaultAccount
|
const initialKey = this.state.web3Config.defaultAccount
|
||||||
|
@ -116,7 +128,7 @@ class App extends Component {
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
isValid = false
|
isValid = false
|
||||||
}
|
}
|
||||||
console.log(isValid)
|
|
||||||
if (Number(isValid) !== 1) {
|
if (Number(isValid) !== 1) {
|
||||||
this.setState({ loading: false })
|
this.setState({ loading: false })
|
||||||
const invalidKeyMsg = `The key is an invalid Initial key<br/>
|
const invalidKeyMsg = `The key is an invalid Initial key<br/>
|
||||||
|
@ -142,7 +154,6 @@ class App extends Component {
|
||||||
sender: initialKey
|
sender: initialKey
|
||||||
})
|
})
|
||||||
.then(async receipt => {
|
.then(async receipt => {
|
||||||
console.log(receipt)
|
|
||||||
if (receipt.status === true || receipt.status === '0x1') {
|
if (receipt.status === true || receipt.status === '0x1') {
|
||||||
this.setState({ loading: false })
|
this.setState({ loading: false })
|
||||||
swal('Congratulations!', 'Your keys are generated!', 'success')
|
swal('Congratulations!', 'Your keys are generated!', 'success')
|
||||||
|
@ -169,7 +180,6 @@ class App extends Component {
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch(error => {
|
.catch(error => {
|
||||||
console.error(error.message)
|
|
||||||
this.setState({ loading: false, keysGenerated: false })
|
this.setState({ loading: false, keysGenerated: false })
|
||||||
let content = document.createElement('div')
|
let content = document.createElement('div')
|
||||||
let msg
|
let msg
|
||||||
|
@ -189,6 +199,7 @@ class App extends Component {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
let loader = this.state.loading ? <Loading netId={this.state.web3Config.netId} /> : ''
|
let loader = this.state.loading ? <Loading netId={this.state.web3Config.netId} /> : ''
|
||||||
let createKeyBtn = (
|
let createKeyBtn = (
|
||||||
|
@ -206,17 +217,19 @@ class App extends Component {
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
let content
|
let content
|
||||||
|
|
||||||
if (this.state.keysGenerated) {
|
if (this.state.keysGenerated) {
|
||||||
content = <Keys mining={this.state.mining} voting={this.state.voting} payout={this.state.payout} />
|
content = <Keys mining={this.state.mining} voting={this.state.voting} payout={this.state.payout} />
|
||||||
} else {
|
} else {
|
||||||
content = createKeyBtn
|
content = createKeyBtn
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="App">
|
<div className="lo-App">
|
||||||
<Header netId={this.state.web3Config.netId} />
|
<Header isTestnet={this.state.isTestnet} />
|
||||||
{loader}
|
{loader}
|
||||||
<section className="content">{content}</section>
|
<section className="lo-App_Content">{content}</section>
|
||||||
<Footer netId={this.state.web3Config.netId} />
|
<Footer isTestnet={this.state.isTestnet} />
|
||||||
</div>
|
</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 'variables';
|
||||||
@import 'mixins';
|
@import 'mixins';
|
||||||
@import 'typography';
|
@import 'typography';
|
||||||
|
|
||||||
|
@import 'content-layout';
|
|
@ -2,19 +2,22 @@
|
||||||
$brand-primary: #5a2da5;
|
$brand-primary: #5a2da5;
|
||||||
$brand-secondary: #8ce1d7;
|
$brand-secondary: #8ce1d7;
|
||||||
$base-border-color: #e9e9e9;
|
$base-border-color: #e9e9e9;
|
||||||
$base-text-color: #4a4a4a;
|
$base-title-color: #333;
|
||||||
|
$base-text-color: #777;
|
||||||
$base-text-color-light: #9b9b9b;
|
$base-text-color-light: #9b9b9b;
|
||||||
$fullscreen-backdrop-color: rgba(78, 44, 137, 0.9);
|
|
||||||
|
|
||||||
// modal
|
|
||||||
$sw-ModalWindow-horizontal-padding-xs: 8px;
|
|
||||||
|
|
||||||
// typography
|
// typography
|
||||||
$base-font-size: 16px;
|
$base-font-size: 14px;
|
||||||
|
|
||||||
// paths
|
// paths
|
||||||
$base-images-path: '../../assets/images';
|
$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
|
// responsive breakpoints
|
||||||
$breakpoint-xs: 320px;
|
$breakpoint-xs: 320px;
|
||||||
$breakpoint-sm: 480px;
|
$breakpoint-sm: 480px;
|
||||||
|
@ -26,15 +29,3 @@ $breakpoint-xxxl: 1366px;
|
||||||
|
|
||||||
// z-index
|
// z-index
|
||||||
$z-index-max: 12345678;
|
$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 {
|
body {
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
color: #4a4a4a;
|
color: #777;
|
||||||
font-family: Nunito, sans-serif;
|
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 React from 'react'
|
||||||
import moment from 'moment'
|
import moment from 'moment'
|
||||||
|
import { Logo } from '../Logo'
|
||||||
|
import { SocialIcons } from '../SocialIcons'
|
||||||
import { constants } from '../../utils/constants'
|
import { constants } from '../../utils/constants'
|
||||||
|
|
||||||
const Footer = ({ netId }) => {
|
export const Footer = ({ extraClassName = '', isTestnet = false }) => {
|
||||||
const footerClassName = netId in constants.NETWORKS && constants.NETWORKS[netId].TESTNET ? 'sokol' : ''
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<footer className={`footer ${footerClassName}`}>
|
<footer className={`sw-Footer ${extraClassName} ${isTestnet ? 'sw-Footer-test' : ''}`}>
|
||||||
<div className="container">
|
<div className="sw-Footer_Content">
|
||||||
<p className="footer-rights">{moment().format('YYYY')} POA Network. All rights reserved.</p>
|
<Logo isTestnet={isTestnet} href={constants.baseURL} />
|
||||||
<a href="/poa-dapps-keys-generation" className="footer-logo" />
|
<p className="sw-Footer_Text">{moment().format('YYYY')} POA Network. All rights reserved.</p>
|
||||||
<div className="socials">
|
<SocialIcons />
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Footer
|
|
||||||
|
|
|
@ -1,17 +1,13 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import { constants } from '../../utils/constants'
|
import { constants } from '../../utils/constants'
|
||||||
|
import { Logo } from '../Logo'
|
||||||
|
|
||||||
let Header = ({ netId }) => {
|
export const Header = ({ extraClassName = '', isTestnet = false }) => {
|
||||||
const thisIsTestnet = netId in constants.NETWORKS && constants.NETWORKS[netId].TESTNET
|
|
||||||
const headerClassName = thisIsTestnet ? 'sokol' : ''
|
|
||||||
const logoClassName = thisIsTestnet ? 'header-logo-sokol' : 'header-logo'
|
|
||||||
return (
|
return (
|
||||||
<header className={`header ${headerClassName}`}>
|
<header className={`sw-Header ${extraClassName} ${isTestnet ? 'sw-Header-test' : ''}`}>
|
||||||
<div className="container">
|
<div className="sw-Header_Content">
|
||||||
<a href="/poa-dapps-keys-generation" className={logoClassName} />
|
<Logo isTestnet={isTestnet} href={constants.baseURL} />
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</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'
|
KeysManager: 'KeysManager.abi.json'
|
||||||
}
|
}
|
||||||
constants.userDeniedTransactionPattern = 'User denied transaction'
|
constants.userDeniedTransactionPattern = 'User denied transaction'
|
||||||
|
constants.baseURL = '/poa-dapps-keys-generation'
|
||||||
|
|
||||||
constants.NETWORKS = {
|
constants.NETWORKS = {
|
||||||
'77': {
|
'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