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} -
{content}
-
+
{content}
+
) } 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 ( -