poanetwork
/
poa-dapps-voting
mirror of https://github.com/poanetwork/poa-dapps-voting.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

(Feature) Display three keys in ballot card when adding a new validator

This commit is contained in:
Vadim Arasev 2018-06-11 16:46:39 +03:00
parent 661beb1ba4
commit 429593299e
6 changed files with 129 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/App.css
View File

File diff suppressed because one or more lines are too long

7
src/assets/stylesheets/ballots/about.scss
View File

@ -47,11 +47,16 @@
width: 30%;
}
&_mining-key {
&_key {
width: 25%;
word-break: break-all;
}
&_key_wide {
width: 50%;
word-break: break-all;
}
&_proposed-min-threshold {
width: 70%;
word-break: break-all;

138
src/components/BallotKeysCard.jsx
View File

@ -7,8 +7,9 @@ import { BallotCard } from "./BallotCard";
@observer
export class BallotKeysCard extends React.Component {
@observable affectedKey;
@observable newVotingKey;
@observable newPayoutKey;
@observable affectedKeyType;
@observable affectedKeyTypeDisplayName;
@observable ballotType;
@observable ballotTypeDisplayName;
@observable miningKey;
@ -32,25 +33,6 @@ export class BallotKeysCard extends React.Component {
}
}
@action("Get affectedKeyTypeDisplayName")
getAffectedKeyTypeDisplayName(affectedKeyType) {
const { ballotStore } = this.props;
switch(parseInt(affectedKeyType, 10)) {
case ballotStore.KeyType.mining:
this.affectedKeyTypeDisplayName = "mining";
break;
case ballotStore.KeyType.voting:
this.affectedKeyTypeDisplayName = "voting";
break;
case ballotStore.KeyType.payout:
this.affectedKeyTypeDisplayName = "payout";
break;
default:
this.affectedKeyTypeDisplayName = "";
break;
}
}
@action("Get ballot type of keys ballot")
getBallotType = async () => {
const { contractsStore, id } = this.props;
@ -74,10 +56,8 @@ export class BallotKeysCard extends React.Component {
console.log(e.message);
}
this.affectedKeyType = affectedKeyType;
this.getAffectedKeyTypeDisplayName(affectedKeyType);
}
@action("Get affected key of keys ballot")
getAffectedKey = async () => {
const { contractsStore, id } = this.props;
@ -89,6 +69,31 @@ export class BallotKeysCard extends React.Component {
}
this.affectedKey = affectedKey;
}
@action("Get new voting key of keys ballot")
getNewVotingKey = async () => {
const { contractsStore, id } = this.props;
let newVotingKey;
try {
newVotingKey = await contractsStore.votingToChangeKeys.getNewVotingKey(id);
} catch (e) {
console.log(e.message);
}
this.newVotingKey = newVotingKey;
}
@action("Get new payout key of keys ballot")
getNewPayoutKey = async () => {
const { contractsStore, id } = this.props;
let newPayoutKey;
try {
newPayoutKey = await contractsStore.votingToChangeKeys.getNewPayoutKey(id);
} catch (e) {
console.log(e.message);
}
this.newPayoutKey = newPayoutKey;
}
@action("Get mining key of keys ballot")
getMiningKey = async () => {
const { contractsStore, id } = this.props;
@ -113,25 +118,93 @@ export class BallotKeysCard extends React.Component {
constructor(props) {
super(props);
this.getAffectedKey();
this.getNewVotingKey();
this.getNewPayoutKey();
this.getAffectedKeyType();
this.getBallotType();
this.getMiningKey();
}
getAffectedKeyTypeDisplayName = () => {
const { ballotStore } = this.props;
let result;
switch(parseInt(this.affectedKeyType, 10)) {
case ballotStore.KeyType.mining:
result = "mining";
break;
case ballotStore.KeyType.voting:
result = "voting";
break;
case ballotStore.KeyType.payout:
result = "payout";
break;
default:
result = "";
break;
}
if (this.isAddMining()) {
if (this.newVotingKey) result += ', voting';
if (this.newPayoutKey) result += ', payout';
}
return result;
}
isAddMining = () => {
const { ballotStore } = this.props;
const ballotType = parseInt(this.ballotType, 10);
const affectedKeyType = parseInt(this.affectedKeyType, 10);
return ballotType === ballotStore.KeysBallotType.add && affectedKeyType === ballotStore.KeyType.mining;
}
isSearchPattern = () => {
let { commonStore } = this.props;
if (commonStore.searchTerm) {
const affectedKeyTypeDisplayName = this.getAffectedKeyTypeDisplayName();
const isMiningKeyPattern = String(this.miningKey).toLowerCase().includes(commonStore.searchTerm);
const isAffectedKeyPattern = String(this.affectedKey).toLowerCase().includes(commonStore.searchTerm);
const isAffectedKeyTypeDisplayNamePattern = String(this.affectedKeyTypeDisplayName).toLowerCase().includes(commonStore.searchTerm);
const isNewVotingKeyPattern = String(this.newVotingKey).toLowerCase().includes(commonStore.searchTerm);
const isNewPayoutKeyPattern = String(this.newPayoutKey).toLowerCase().includes(commonStore.searchTerm);
const isAffectedKeyTypeDisplayNamePattern = String(affectedKeyTypeDisplayName).toLowerCase().includes(commonStore.searchTerm);
const isBallotTypeDisplayNamePattern = String(this.ballotTypeDisplayName).toLowerCase().includes(commonStore.searchTerm);
return (isMiningKeyPattern || isAffectedKeyPattern || isAffectedKeyTypeDisplayNamePattern || isBallotTypeDisplayNamePattern);
return (
isMiningKeyPattern ||
isAffectedKeyPattern ||
isNewVotingKeyPattern ||
isNewPayoutKeyPattern ||
isAffectedKeyTypeDisplayNamePattern ||
isBallotTypeDisplayNamePattern
);
}
return true;
}
render () {
let { id } = this.props;
let affectedKeyClassName;
let affectedKey = <p>{this.affectedKey}</p>;
let newVotingKey;
let newPayoutKey;
let miningKeyDiv;
if (this.isAddMining()) {
affectedKeyClassName = 'ballots-about-i_key_wide';
if (this.newVotingKey || this.newPayoutKey) {
affectedKey = <p>Mining: {this.affectedKey}</p>;
if (this.newVotingKey) newVotingKey = <p>Voting: {this.newVotingKey}</p>;
if (this.newPayoutKey) newPayoutKey = <p>Payout: {this.newPayoutKey}</p>;
}
} else {
affectedKeyClassName = 'ballots-about-i_key';
miningKeyDiv = <div className="ballots-about-i ballots-about-i_key">
<div className="ballots-about-td">
<p className="ballots-about-i--title">Validator key</p>
</div>
<div className="ballots-about-td">
<p>{this.miningKey}</p>
</div>
</div>;
}
return (
<BallotCard votingType="votingToChangeKeys" id={id} isSearchPattern={this.isSearchPattern()}>
<div className="ballots-about-i ballots-about-i_action">
@ -147,25 +220,20 @@ export class BallotKeysCard extends React.Component {
<p className="ballots-about-i--title">Key type</p>
</div>
<div className="ballots-about-td">
<p>{this.affectedKeyTypeDisplayName}</p>
<p>{this.getAffectedKeyTypeDisplayName()}</p>
</div>
</div>
<div className="ballots-about-i ballots-about-i_mining-key">
<div className={`ballots-about-i ${affectedKeyClassName}`}>
<div className="ballots-about-td">
<p className="ballots-about-i--title">Affected key</p>
</div>
<div className="ballots-about-td">
<p>{this.affectedKey}</p>
</div>
</div>
<div className="ballots-about-i ballots-about-i_mining-key">
<div className="ballots-about-td">
<p className="ballots-about-i--title">Validator key</p>
</div>
<div className="ballots-about-td">
<p>{this.miningKey}</p>
{affectedKey}
{newVotingKey}
{newPayoutKey}
</div>
</div>
{miningKeyDiv}
</BallotCard>
);
}

8
src/components/BallotKeysMetadata.jsx
View File

@ -20,7 +20,7 @@ export class BallotKeysMetadata extends React.Component {
onChange={e => ballotStore.changeBallotMetadata(e, "newVotingKey", "ballotKeys")}
/>
<p className="hint">
Voting key address of new validator. Example: 0xc70760D23557A4FDE612C0bE63b26EBD023C51Ee.
Voting key address of new validator.<br />Example: 0xc70760D23557A4FDE612C0bE63b26EBD023C51Ee.
</p>
</div>
</div>
@ -32,7 +32,7 @@ export class BallotKeysMetadata extends React.Component {
onChange={e => ballotStore.changeBallotMetadata(e, "newPayoutKey", "ballotKeys")}
/>
<p className="hint">
Payout key address of new validator. Example: 0xc70760D23557A4FDE612C0bE63b26EBD023C51Ee.
Payout key address of new validator.<br />Example: 0xc70760D23557A4FDE612C0bE63b26EBD023C51Ee.
</p>
</div>
</div>
@ -49,7 +49,7 @@ export class BallotKeysMetadata extends React.Component {
onChange={e => ballotStore.changeBallotMetadata(e, "affectedKey", "ballotKeys")}
/>
<p className="hint">
{ballotStore.isNewValidatorPersonalData ? 'Mining key address of new validator.' : 'Affected key address of validator to vote for.'} Example: 0xc70760D23557A4FDE612C0bE63b26EBD023C51Ee.
{ballotStore.isNewValidatorPersonalData ? 'Mining key address of new validator.' : 'Affected key address of validator to vote for.'}<br />Example: 0xc70760D23557A4FDE612C0bE63b26EBD023C51Ee.
</p>
</div>
</div>
@ -65,7 +65,7 @@ export class BallotKeysMetadata extends React.Component {
disabled={ballotStore.isNewValidatorPersonalData}
/>
<p className="hint">
Mining key address of validator to vote for. Example: 0xc70760D23557A4FDE612C0bE63b26EBD023C51Ee.
Mining key address of validator to vote for.<br />Example: 0xc70760D23557A4FDE612C0bE63b26EBD023C51Ee.
</p>
</div>
</div>

2
src/constants.js
View File

@ -1,5 +1,5 @@
let constants = {};
constants.CARD_FINALIZE_DESCRIPTION = "Finalization is available after ballot time is finished<br />or all validators are voted";
constants.CARD_FINALIZE_DESCRIPTION = "Finalization is available after ballot time is finished or all validators are voted";
constants.organization = 'poanetwork';
constants.repoName = 'poa-chain-spec';
constants.addressesSourceFile = 'contracts.json';

14
src/contracts/VotingToChangeKeys.contract.js
View File

@ -100,6 +100,20 @@ export default class VotingToChangeKeys {
return this.votingToChangeKeysInstance.methods.getAffectedKey(_id).call();
}
getNewVotingKey(_id) {
if (!this.votingToChangeKeysInstance.methods.getNewVotingKey) {
return "";
}
return this.votingToChangeKeysInstance.methods.getNewVotingKey(_id).call();
}
getNewPayoutKey(_id) {
if (!this.votingToChangeKeysInstance.methods.getNewPayoutKey) {
return "";
}
return this.votingToChangeKeysInstance.methods.getNewPayoutKey(_id).call();
}
getMiningKey(_id) {
return this.votingToChangeKeysInstance.methods.getMiningKey(_id).call();
}