(add) keys radio buttons component
This commit is contained in:
parent
1b39f7b6dc
commit
744f3a1ff5
10
src/App.js
10
src/App.js
|
@ -90,12 +90,20 @@ class App extends Component {
|
||||||
return netId in constants.NETWORKS && constants.NETWORKS[netId].TESTNET ? 'sokol' : ''
|
return netId in constants.NETWORKS && constants.NETWORKS[netId].TESTNET ? 'sokol' : ''
|
||||||
}
|
}
|
||||||
|
|
||||||
|
isNewBallotPage() {
|
||||||
|
return `${constants.rootPath}/new` === this.props.location.pathname
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { commonStore, contractsStore } = this.props
|
const { commonStore, contractsStore } = this.props
|
||||||
const networkBranch = this.getVotingNetworkBranch()
|
const networkBranch = this.getVotingNetworkBranch()
|
||||||
|
|
||||||
return networkBranch ? (
|
return networkBranch ? (
|
||||||
<div className={`lo-App ${this.state.showMobileMenu ? 'lo-App-menu-open' : ''}`}>
|
<div
|
||||||
|
className={`lo-App ${this.isNewBallotPage() ? 'lo-App-no-search-bar' : ''} ${
|
||||||
|
this.state.showMobileMenu ? 'lo-App-menu-open' : ''
|
||||||
|
}`}
|
||||||
|
>
|
||||||
{commonStore.loading ? <Loading networkBranch={networkBranch} /> : null}
|
{commonStore.loading ? <Loading networkBranch={networkBranch} /> : null}
|
||||||
<Header
|
<Header
|
||||||
baseRootPath={commonStore.rootPath}
|
baseRootPath={commonStore.rootPath}
|
||||||
|
|
|
@ -31,15 +31,6 @@ a {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
hr {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
height: 1px;
|
|
||||||
margin: 10px 0 30px;
|
|
||||||
border: 0;
|
|
||||||
background-color: $base-border-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.center {
|
.center {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
@ -80,19 +71,3 @@ hr {
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
|
||||||
margin-top: 30px;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
color: #38454f;
|
|
||||||
font-size: 30px;
|
|
||||||
font-weight: normal;
|
|
||||||
|
|
||||||
@media screen and (max-width: $breakpoint-md) {
|
|
||||||
font-size: 28px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: $mobile-width) {
|
|
||||||
font-size: 26px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
@ -1,77 +1,5 @@
|
||||||
|
|
||||||
|
|
||||||
.radio-button {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&-label {
|
|
||||||
@include not-selectable-text();
|
|
||||||
border-radius: 3px;
|
|
||||||
border: 1px solid $base-border-color;
|
|
||||||
color: $gray-text-color;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 50px;
|
|
||||||
margin: 0;
|
|
||||||
outline: none;
|
|
||||||
padding: 0 15px;
|
|
||||||
text-decoration: none;
|
|
||||||
text-transform: capitalize;
|
|
||||||
text-align: center;
|
|
||||||
transition: 0.25s background-color;
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type='radio'] {
|
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
|
||||||
visibility: hidden;
|
|
||||||
width: 100%;
|
|
||||||
z-index: 12;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type='radio']:checked + &-label {
|
|
||||||
background-color: $poa-purple;
|
|
||||||
border-color: $poa-purple;
|
|
||||||
box-shadow: 0px 5px 10px 0 rgba(92, 52, 162, 0.3);
|
|
||||||
color: #fff;
|
|
||||||
.sokol & {
|
|
||||||
background-color: $sokol-cyan;
|
|
||||||
border-color: $sokol-cyan;
|
|
||||||
box-shadow: 0px 5px 10px 0 rgba(106, 201, 185, 0.3);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.keys-radio-button-tr {
|
|
||||||
display: flex;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
@media screen and (max-width: $breakpoint-md) {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.keys-radio-button-td {
|
|
||||||
min-width: 30%;
|
|
||||||
margin-right: 5%;
|
|
||||||
&:last-child {
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
.radio-button-label {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
@media screen and (max-width: $breakpoint-md) {
|
|
||||||
margin-bottom: 15px;
|
|
||||||
margin-right: 0;
|
|
||||||
min-width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// .form-el {
|
|
||||||
// margin-bottom: 30px;
|
|
||||||
// }
|
|
||||||
|
|
||||||
.hint {
|
.hint {
|
||||||
color: #777;
|
color: #777;
|
||||||
|
|
|
@ -1,52 +0,0 @@
|
||||||
.new {
|
|
||||||
&-form {
|
|
||||||
@extend %white-block;
|
|
||||||
display: flex;
|
|
||||||
overflow: hidden;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
@media screen and (max-width: $breakpoint-md) {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-side {
|
|
||||||
box-sizing: border-box;
|
|
||||||
padding-bottom: 30px;
|
|
||||||
padding-top: 30px;
|
|
||||||
|
|
||||||
@media screen and (max-width: $breakpoint-md) {
|
|
||||||
width: 100% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
&_left {
|
|
||||||
background-color: #f8f8f8;
|
|
||||||
padding-top: 0;
|
|
||||||
width: 30%;
|
|
||||||
|
|
||||||
@media screen and (max-width: $breakpoint-md) {
|
|
||||||
margin-bottom: 30px;
|
|
||||||
padding-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&_right {
|
|
||||||
border-left: 1px solid $base-border-color;
|
|
||||||
padding-left: 30px;
|
|
||||||
padding-right: 30px;
|
|
||||||
width: 70%;
|
|
||||||
|
|
||||||
@media screen and (max-width: $breakpoint-md) {
|
|
||||||
border: 0;
|
|
||||||
padding-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.add-ballot {
|
|
||||||
white-space: nowrap;
|
|
||||||
@media screen and (max-width: $mobile-width) {
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,11 +1,11 @@
|
||||||
.lo-FormElement {
|
.lo-FormElement {
|
||||||
margin-bottom: 30px;
|
margin-bottom: $base-grid-gap;
|
||||||
}
|
}
|
||||||
|
|
||||||
label {
|
label {
|
||||||
color: $gray-text-color;
|
color: $gray-text-color;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: 13px;
|
font-size: 14px;
|
||||||
line-height: 1.2;
|
line-height: 1.2;
|
||||||
margin-bottom: 15px;
|
margin-bottom: 15px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,6 +5,10 @@
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding-top: $header-height + $search-container-height;
|
padding-top: $header-height + $search-container-height;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
|
&#{ & }-no-search-bar {
|
||||||
|
padding-top: $header-height;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.lo-App_Content {
|
.lo-App_Content {
|
||||||
|
|
|
@ -0,0 +1,27 @@
|
||||||
|
.frm-FormHint {
|
||||||
|
color: #777;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 1.38;
|
||||||
|
margin: 0;
|
||||||
|
padding-top: 12px;
|
||||||
|
word-break: break-word;
|
||||||
|
|
||||||
|
&#{ & }-core {
|
||||||
|
a {
|
||||||
|
color: $poa-purple;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&#{ & }-sokol {
|
||||||
|
a {
|
||||||
|
color: $sokol-cyan;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&#{ & }-dai {
|
||||||
|
a {
|
||||||
|
color: $xdai-orange;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,97 @@
|
||||||
|
.frm-KeysTypes {
|
||||||
|
margin-bottom: $base-grid-gap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.frm-KeysTypes_Row {
|
||||||
|
margin-bottom: $base-grid-gap;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: $breakpoint-md) {
|
||||||
|
display: grid;
|
||||||
|
grid-column-gap: $base-grid-gap;
|
||||||
|
grid-template-columns: 1fr 1fr 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.frm-KeysTypes_Td {
|
||||||
|
margin-bottom: $base-grid-gap;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: $breakpoint-md) {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.frm-KeysTypes_Button {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.frm-KeysTypes_Label {
|
||||||
|
@include not-selectable-text();
|
||||||
|
border-radius: 3px;
|
||||||
|
border: 1px solid $base-border-color;
|
||||||
|
color: $gray-text-color;
|
||||||
|
cursor: pointer;
|
||||||
|
display: block;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 50px;
|
||||||
|
margin: 0;
|
||||||
|
outline: none;
|
||||||
|
padding: 0 15px;
|
||||||
|
text-decoration: none;
|
||||||
|
text-transform: capitalize;
|
||||||
|
text-align: center;
|
||||||
|
transition: 0.15s background-color ease-out, 0.15s border-color ease-out;
|
||||||
|
position: relative;
|
||||||
|
white-space: nowrap;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: darken($base-border-color, 15%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.frm-KeysTypes_Radio:checked + &#{ & }-core {
|
||||||
|
&,
|
||||||
|
&:hover {
|
||||||
|
background-color: $poa-purple;
|
||||||
|
border-color: $poa-purple;
|
||||||
|
box-shadow: 0 5px 10px 0 rgba($poa-purple, 0.3);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.frm-KeysTypes_Radio:checked + &#{ & }-sokol {
|
||||||
|
&,
|
||||||
|
&:hover {
|
||||||
|
background-color: $sokol-cyan;
|
||||||
|
border-color: $sokol-cyan;
|
||||||
|
box-shadow: 0 5px 10px 0 rgba($sokol-cyan, 0.3);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.frm-KeysTypes_Radio:checked + &#{ & }-dai {
|
||||||
|
&,
|
||||||
|
&:hover {
|
||||||
|
background-color: $xdai-orange;
|
||||||
|
border-color: $xdai-orange;
|
||||||
|
box-shadow: 0 5px 10px 0 rgba($xdai-orange, 0.3);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.frm-KeysTypes_Radio {
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
visibility: hidden;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 12;
|
||||||
|
}
|
|
@ -11,14 +11,9 @@
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: 30px;
|
line-height: 45px;
|
||||||
margin-bottom: 10px;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border-bottom-right-radius: 5px;
|
border-bottom-right-radius: 5px;
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
color: #333;
|
color: #333;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
margin-bottom: 30px;
|
margin: 0 0 30px;
|
||||||
padding-left: 25px;
|
padding-left: 25px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,8 @@
|
||||||
|
.sw-Separator {
|
||||||
|
background-color: $base-border-color;
|
||||||
|
border: 0;
|
||||||
|
display: block;
|
||||||
|
height: 1px;
|
||||||
|
margin: 30px 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
|
@ -12,6 +12,7 @@
|
||||||
@import "ButtonNewBallot";
|
@import "ButtonNewBallot";
|
||||||
@import "ButtonVoting";
|
@import "ButtonVoting";
|
||||||
@import "Footer";
|
@import "Footer";
|
||||||
|
@import "FormHint";
|
||||||
@import "Header";
|
@import "Header";
|
||||||
@import "IconActive";
|
@import "IconActive";
|
||||||
@import "IconAdd";
|
@import "IconAdd";
|
||||||
|
@ -24,6 +25,7 @@
|
||||||
@import "IconTelegram";
|
@import "IconTelegram";
|
||||||
@import "IconToFinalize";
|
@import "IconToFinalize";
|
||||||
@import "IconTwitter";
|
@import "IconTwitter";
|
||||||
|
@import "KeysTypes";
|
||||||
@import "LoadMore";
|
@import "LoadMore";
|
||||||
@import "Loading";
|
@import "Loading";
|
||||||
@import "LogoDai";
|
@import "LogoDai";
|
||||||
|
@ -36,6 +38,7 @@
|
||||||
@import "NewBallotMenu";
|
@import "NewBallotMenu";
|
||||||
@import "NewBallotMenuInfo";
|
@import "NewBallotMenuInfo";
|
||||||
@import "SearchBar";
|
@import "SearchBar";
|
||||||
|
@import "Separator";
|
||||||
@import "SocialIcons";
|
@import "SocialIcons";
|
||||||
@import "VoteProgressBar";
|
@import "VoteProgressBar";
|
||||||
@import "Votes";
|
@import "Votes";
|
||||||
|
|
|
@ -5,6 +5,7 @@
|
||||||
border: 1px solid $base-border-color;
|
border: 1px solid $base-border-color;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
color: $input-color;
|
color: $input-color;
|
||||||
|
display: block;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
outline: none;
|
outline: none;
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
|
|
|
@ -83,3 +83,6 @@ $voting-positive-sokol: #6ac9b9;
|
||||||
$voting-negative-dai: #f21b57;
|
$voting-negative-dai: #f21b57;
|
||||||
$voting-neutral-dai: #50bbda;
|
$voting-neutral-dai: #50bbda;
|
||||||
$voting-positive-dai: #60db97;
|
$voting-positive-dai: #60db97;
|
||||||
|
|
||||||
|
// grid stuff
|
||||||
|
$base-grid-gap: 30px;
|
File diff suppressed because one or more lines are too long
|
@ -8,4 +8,3 @@
|
||||||
// @import 'application/base';
|
// @import 'application/base';
|
||||||
// @import 'application/buttons';
|
// @import 'application/buttons';
|
||||||
@import 'application/controls';
|
@import 'application/controls';
|
||||||
@import 'application/new';
|
|
||||||
|
|
|
@ -0,0 +1,5 @@
|
||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
export const FormHint = ({ extraClassName = '', networkBranch, text }) => {
|
||||||
|
return <p className={`frm-FormHint frm-FormHint-${networkBranch} ${extraClassName}`}>{text}</p>
|
||||||
|
}
|
|
@ -1,113 +1,98 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import { inject, observer } from 'mobx-react'
|
import { inject, observer } from 'mobx-react'
|
||||||
|
import { FormHint } from '../FormHint'
|
||||||
|
|
||||||
@inject('ballotStore')
|
@inject('ballotStore')
|
||||||
@observer
|
@observer
|
||||||
export class KeysTypes extends React.Component {
|
export class KeysTypes extends React.Component {
|
||||||
render() {
|
render() {
|
||||||
const { ballotStore } = this.props
|
const { ballotStore, networkBranch } = this.props
|
||||||
|
const keyButtons = [
|
||||||
|
[
|
||||||
|
{
|
||||||
|
checked: ballotStore.isAddKeysBallotType,
|
||||||
|
hint: 'Add new key.',
|
||||||
|
id: 'add-key',
|
||||||
|
name: 'key-control',
|
||||||
|
onChange: e => ballotStore.changeKeysBallotType(e, ballotStore.KeysBallotType.add),
|
||||||
|
text: 'Add key',
|
||||||
|
value: ballotStore.KeysBallotType.add
|
||||||
|
},
|
||||||
|
{
|
||||||
|
checked: ballotStore.isRemoveKeysBallotType,
|
||||||
|
hint: 'Remove existing key.',
|
||||||
|
id: 'remove-key',
|
||||||
|
name: 'key-control',
|
||||||
|
onChange: e => ballotStore.changeKeysBallotType(e, ballotStore.KeysBallotType.remove),
|
||||||
|
text: 'Remove key',
|
||||||
|
value: ballotStore.KeysBallotType.remove
|
||||||
|
},
|
||||||
|
{
|
||||||
|
checked: ballotStore.isSwapKeysBallotType,
|
||||||
|
hint: 'Remove existing key and add new key.',
|
||||||
|
id: 'swap-key',
|
||||||
|
name: 'key-control',
|
||||||
|
onChange: e => ballotStore.changeKeysBallotType(e, ballotStore.KeysBallotType.swap),
|
||||||
|
text: 'Swap key',
|
||||||
|
value: ballotStore.KeysBallotType.swap
|
||||||
|
}
|
||||||
|
],
|
||||||
|
[
|
||||||
|
{
|
||||||
|
checked: ballotStore.isMiningKeyType,
|
||||||
|
hint: 'Mining key type.',
|
||||||
|
id: 'mining-key',
|
||||||
|
name: 'keys',
|
||||||
|
onChange: e => ballotStore.changeKeyType(e, ballotStore.KeyType.mining),
|
||||||
|
text: 'Mining Key',
|
||||||
|
value: ballotStore.KeyType.mining
|
||||||
|
},
|
||||||
|
{
|
||||||
|
checked: ballotStore.isPayoutKeyType,
|
||||||
|
hint: 'Payout key type.',
|
||||||
|
id: 'payout-key',
|
||||||
|
name: 'keys',
|
||||||
|
onChange: e => ballotStore.changeKeyType(e, ballotStore.KeyType.payout),
|
||||||
|
text: 'Payout Key',
|
||||||
|
value: ballotStore.KeyType.payout
|
||||||
|
},
|
||||||
|
{
|
||||||
|
checked: ballotStore.isVotingKeyType,
|
||||||
|
hint: 'Voting key type.',
|
||||||
|
id: 'voting-key',
|
||||||
|
name: 'keys',
|
||||||
|
onChange: e => ballotStore.changeKeyType(e, ballotStore.KeyType.voting),
|
||||||
|
text: 'Voting Key',
|
||||||
|
value: ballotStore.KeyType.voting
|
||||||
|
}
|
||||||
|
]
|
||||||
|
]
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="hidden">
|
<div className={`frm-KeysTypes frm-KeysTypes-${networkBranch}`}>
|
||||||
<div className="keys-radio-button-tr">
|
{keyButtons.map((row, index) => (
|
||||||
<div className="keys-radio-button-td">
|
<div className="frm-KeysTypes_Row" key={index}>
|
||||||
<div className="radio-button">
|
{row.map((item, index) => (
|
||||||
|
<div className="frm-KeysTypes_Td" key={index}>
|
||||||
|
<div className="frm-KeysTypes_Button">
|
||||||
<input
|
<input
|
||||||
|
checked={item.checked}
|
||||||
|
className="frm-KeysTypes_Radio"
|
||||||
|
id={item.id}
|
||||||
|
name={item.name}
|
||||||
|
onChange={item.onChange}
|
||||||
type="radio"
|
type="radio"
|
||||||
name="key-control"
|
value={item.value}
|
||||||
id="add-key"
|
|
||||||
value={ballotStore.KeysBallotType.add}
|
|
||||||
checked={ballotStore.isAddKeysBallotType}
|
|
||||||
onChange={e => ballotStore.changeKeysBallotType(e, ballotStore.KeysBallotType.add)}
|
|
||||||
/>
|
/>
|
||||||
<label className="radio-button-label" htmlFor="add-key">
|
<label className={`frm-KeysTypes_Label frm-KeysTypes_Label-${networkBranch}`} htmlFor={item.id}>
|
||||||
Add key
|
{item.text}
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<p className="hint">Add new key.</p>
|
<FormHint text={item.hint} networkBranch={networkBranch} />
|
||||||
</div>
|
|
||||||
<div className="keys-radio-button-td">
|
|
||||||
<div className="radio-button">
|
|
||||||
<input
|
|
||||||
type="radio"
|
|
||||||
name="key-control"
|
|
||||||
id="remove-key"
|
|
||||||
value={ballotStore.KeysBallotType.remove}
|
|
||||||
checked={ballotStore.isRemoveKeysBallotType}
|
|
||||||
onChange={e => ballotStore.changeKeysBallotType(e, ballotStore.KeysBallotType.remove)}
|
|
||||||
/>
|
|
||||||
<label className="radio-button-label" htmlFor="remove-key">
|
|
||||||
Remove key
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<p className="hint">Remove existing key.</p>
|
|
||||||
</div>
|
|
||||||
<div className="keys-radio-button-td">
|
|
||||||
<div className="radio-button">
|
|
||||||
<input
|
|
||||||
type="radio"
|
|
||||||
name="key-control"
|
|
||||||
id="swap-key"
|
|
||||||
value={ballotStore.KeysBallotType.swap}
|
|
||||||
checked={ballotStore.isSwapKeysBallotType}
|
|
||||||
onChange={e => ballotStore.changeKeysBallotType(e, ballotStore.KeysBallotType.swap)}
|
|
||||||
/>
|
|
||||||
<label className="radio-button-label" htmlFor="swap-key">
|
|
||||||
Swap key
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<p className="hint">Remove existing key and add new key.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="keys-radio-button-tr">
|
|
||||||
<div className="keys-radio-button-td">
|
|
||||||
<div className="radio-button">
|
|
||||||
<input
|
|
||||||
type="radio"
|
|
||||||
name="keys"
|
|
||||||
id="mining-key"
|
|
||||||
value={ballotStore.KeyType.mining}
|
|
||||||
checked={ballotStore.isMiningKeyType}
|
|
||||||
onChange={e => ballotStore.changeKeyType(e, ballotStore.KeyType.mining)}
|
|
||||||
/>
|
|
||||||
<label className="radio-button-label" htmlFor="mining-key">
|
|
||||||
Mining Key
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<p className="hint">Mining key type.</p>
|
|
||||||
</div>
|
|
||||||
<div className="keys-radio-button-td">
|
|
||||||
<div className="radio-button">
|
|
||||||
<input
|
|
||||||
type="radio"
|
|
||||||
name="keys"
|
|
||||||
id="payout-key"
|
|
||||||
value={ballotStore.KeyType.payout}
|
|
||||||
checked={ballotStore.isPayoutKeyType}
|
|
||||||
onChange={e => ballotStore.changeKeyType(e, ballotStore.KeyType.payout)}
|
|
||||||
/>
|
|
||||||
<label className="radio-button-label" htmlFor="payout-key">
|
|
||||||
Payout Key
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<p className="hint">Payout key type.</p>
|
|
||||||
</div>
|
|
||||||
<div className="keys-radio-button-td">
|
|
||||||
<div className="radio-button">
|
|
||||||
<input
|
|
||||||
type="radio"
|
|
||||||
name="keys"
|
|
||||||
id="voting-key"
|
|
||||||
value={ballotStore.KeyType.voting}
|
|
||||||
checked={ballotStore.isVotingKeyType}
|
|
||||||
onChange={e => ballotStore.changeKeyType(e, ballotStore.KeyType.voting)}
|
|
||||||
/>
|
|
||||||
<label className="radio-button-label" htmlFor="voting-key">
|
|
||||||
Voting Key
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<p className="hint">Voting key type.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -9,6 +9,7 @@ import { ButtonAddBallot } from '../ButtonAddBallot'
|
||||||
import { KeysTypes } from '../KeysTypes'
|
import { KeysTypes } from '../KeysTypes'
|
||||||
import { NewBallotMenu } from '../NewBallotMenu'
|
import { NewBallotMenu } from '../NewBallotMenu'
|
||||||
import { NewBallotMenuInfo } from '../NewBallotMenuInfo'
|
import { NewBallotMenuInfo } from '../NewBallotMenuInfo'
|
||||||
|
import { Separator } from '../Separator'
|
||||||
import { Validator } from '../Validator'
|
import { Validator } from '../Validator'
|
||||||
import { constants } from '../../utils/constants'
|
import { constants } from '../../utils/constants'
|
||||||
import { getNetworkBranch } from '../../utils/utils'
|
import { getNetworkBranch } from '../../utils/utils'
|
||||||
|
@ -459,12 +460,10 @@ export class NewBallot extends React.Component {
|
||||||
<div className="new-NewBallot_FormContent">
|
<div className="new-NewBallot_FormContent">
|
||||||
<div className="form-el">
|
<div className="form-el">
|
||||||
<label>Description of the ballot</label>
|
<label>Description of the ballot</label>
|
||||||
<div>
|
|
||||||
<textarea rows="4" value={ballotStore.memo} onChange={e => ballotStore.setMemo(e)} />
|
<textarea rows="4" value={ballotStore.memo} onChange={e => ballotStore.setMemo(e)} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<Separator />
|
||||||
<hr />
|
{ballotStore.isBallotForKey ? <KeysTypes networkBranch={networkBranch} /> : null}
|
||||||
{ballotStore.isBallotForKey ? <KeysTypes /> : null}
|
|
||||||
{ballotStore.isNewValidatorPersonalData ? <Validator /> : null}
|
{ballotStore.isNewValidatorPersonalData ? <Validator /> : null}
|
||||||
{metadata}
|
{metadata}
|
||||||
<ButtonAddBallot onClick={e => this.onClick(e)} networkBranch={networkBranch} />
|
<ButtonAddBallot onClick={e => this.onClick(e)} networkBranch={networkBranch} />
|
||||||
|
|
|
@ -0,0 +1,5 @@
|
||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
export const Separator = ({ extraClassName = '' }) => {
|
||||||
|
return <hr className={`sw-Separator ${extraClassName}`} />
|
||||||
|
}
|
Loading…
Reference in New Issue