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

src/assets/stylesheets/ballots/about.scss

@@ -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;

src/components/BallotKeysCard.jsx

@@ -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>
+            {affectedKey}
-          </div>
+            {newVotingKey}
-        </div>
+            {newPayoutKey}
-        <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>
           </div>
         </div>
+        {miningKeyDiv}
       </BallotCard>
     );
   }

src/components/BallotKeysMetadata.jsx

@@ -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>

src/constants.js

@@ -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';

src/contracts/VotingToChangeKeys.contract.js

@@ -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();
   }