diff --git a/src/App.js b/src/App.js
index 404f4f5..25293f4 100644
--- a/src/App.js
+++ b/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
@@ -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 ? : ''
let createKeyBtn = (
@@ -206,17 +217,19 @@ class App extends Component {
)
let content
+
if (this.state.keysGenerated) {
content =
} else {
content = createKeyBtn
}
+
return (
-
-
+
+
{loader}
-
-
+
+
)
}
diff --git a/src/assets/images/SocialIcons/github.png b/src/assets/images/SocialIcons/github.png
new file mode 100644
index 0000000..2fd000b
Binary files /dev/null and b/src/assets/images/SocialIcons/github.png differ
diff --git a/src/assets/images/SocialIcons/poa.png b/src/assets/images/SocialIcons/poa.png
new file mode 100644
index 0000000..40095d7
Binary files /dev/null and b/src/assets/images/SocialIcons/poa.png differ
diff --git a/src/assets/images/SocialIcons/telegram.png b/src/assets/images/SocialIcons/telegram.png
new file mode 100644
index 0000000..9001aee
Binary files /dev/null and b/src/assets/images/SocialIcons/telegram.png differ
diff --git a/src/assets/images/SocialIcons/twitter.png b/src/assets/images/SocialIcons/twitter.png
new file mode 100644
index 0000000..39ad2b2
Binary files /dev/null and b/src/assets/images/SocialIcons/twitter.png differ
diff --git a/src/assets/stylesheets/components/_App.scss b/src/assets/stylesheets/components/_App.scss
new file mode 100644
index 0000000..605270d
--- /dev/null
+++ b/src/assets/stylesheets/components/_App.scss
@@ -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;
+}
\ No newline at end of file
diff --git a/src/assets/stylesheets/components/_Footer.scss b/src/assets/stylesheets/components/_Footer.scss
new file mode 100644
index 0000000..6fff506
--- /dev/null
+++ b/src/assets/stylesheets/components/_Footer.scss
@@ -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;
+ }
+}
\ No newline at end of file
diff --git a/src/assets/stylesheets/components/_Header.scss b/src/assets/stylesheets/components/_Header.scss
new file mode 100644
index 0000000..ddae39a
--- /dev/null
+++ b/src/assets/stylesheets/components/_Header.scss
@@ -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();
+}
\ No newline at end of file
diff --git a/src/assets/stylesheets/components/_LogoPOA.scss b/src/assets/stylesheets/components/_LogoPOA.scss
new file mode 100644
index 0000000..7f2f51b
--- /dev/null
+++ b/src/assets/stylesheets/components/_LogoPOA.scss
@@ -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%;
+}
\ No newline at end of file
diff --git a/src/assets/stylesheets/components/_LogoSokol.scss b/src/assets/stylesheets/components/_LogoSokol.scss
new file mode 100644
index 0000000..c7492b8
--- /dev/null
+++ b/src/assets/stylesheets/components/_LogoSokol.scss
@@ -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%;
+}
\ No newline at end of file
diff --git a/src/assets/stylesheets/components/_SocialIcons.scss b/src/assets/stylesheets/components/_SocialIcons.scss
new file mode 100644
index 0000000..cec53c4
--- /dev/null
+++ b/src/assets/stylesheets/components/_SocialIcons.scss
@@ -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');
+ }
+}
\ No newline at end of file
diff --git a/src/assets/stylesheets/components/_index.scss b/src/assets/stylesheets/components/_index.scss
index e69de29..017f303 100644
--- a/src/assets/stylesheets/components/_index.scss
+++ b/src/assets/stylesheets/components/_index.scss
@@ -0,0 +1,6 @@
+@import "App";
+@import "Footer";
+@import "Header";
+@import "LogoPOA";
+@import "LogoSokol";
+@import "SocialIcons";
\ No newline at end of file
diff --git a/src/assets/stylesheets/helpers/_content-layout.scss b/src/assets/stylesheets/helpers/_content-layout.scss
new file mode 100644
index 0000000..fbddab1
--- /dev/null
+++ b/src/assets/stylesheets/helpers/_content-layout.scss
@@ -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;
+ }
+}
\ No newline at end of file
diff --git a/src/assets/stylesheets/helpers/_index.scss b/src/assets/stylesheets/helpers/_index.scss
index 00dd107..815ddb3 100644
--- a/src/assets/stylesheets/helpers/_index.scss
+++ b/src/assets/stylesheets/helpers/_index.scss
@@ -1,3 +1,5 @@
@import 'variables';
@import 'mixins';
-@import 'typography';
\ No newline at end of file
+@import 'typography';
+
+@import 'content-layout';
\ No newline at end of file
diff --git a/src/assets/stylesheets/helpers/_variables.scss b/src/assets/stylesheets/helpers/_variables.scss
index 34c86f0..3b9374c 100644
--- a/src/assets/stylesheets/helpers/_variables.scss
+++ b/src/assets/stylesheets/helpers/_variables.scss
@@ -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;
@@ -25,16 +28,4 @@ $breakpoint-xxl: 1280px;
$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;
\ No newline at end of file
+$z-index-max: 12345678;
\ No newline at end of file
diff --git a/src/assets/stylesheets/index.css b/src/assets/stylesheets/index.css
index 3838960..5eb3398 100644
--- a/src/assets/stylesheets/index.css
+++ b/src/assets/stylesheets/index.css
@@ -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"); }
diff --git a/src/assets/stylesheets/layout/_base.scss b/src/assets/stylesheets/layout/_base.scss
index e69de29..baf5226 100644
--- a/src/assets/stylesheets/layout/_base.scss
+++ b/src/assets/stylesheets/layout/_base.scss
@@ -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;
+}
\ No newline at end of file
diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js
index 7ae506c..e29a076 100644
--- a/src/components/Footer/index.js
+++ b/src/components/Footer/index.js
@@ -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 (
-