(Feature) Add validator key to the table

src/assets/App.css

@@ -724,15 +724,15 @@ textarea {
         display: table-row;
         width: 100% !important; } }
     .ballots-about-i_name {
-      width: 25%; }
+      width: 20%; }
     .ballots-about-i_action {
-      width: 15%; }
+      width: 10%; }
     .ballots-about-i_type {
-      width: 15%; }
+      width: 10%; }
     .ballots-about-i_proposal {
       width: 30%; }
     .ballots-about-i_mining-key {
-      width: 30%;
+      width: 25%;
       word-break: break-all; }
     .ballots-about-i_proposed-min-threshold {
       width: 60%;
@@ -744,7 +744,7 @@ textarea {
       width: 30%;
       word-break: break-all; }
     .ballots-about-i_time {
-      width: 15%;
+      width: 10%;
       text-align: right; }
       @media screen and (max-width: 768px) {
         .ballots-about-i_time {

src/assets/stylesheets/ballots/about.scss

@@ -32,15 +32,15 @@
     }
 
     &_name {
-      width: 25%;
+      width: 20%;
     }
 
     &_action {
-      width: 15%;
+      width: 10%;
     }
-
+// 25
     &_type {
-      width: 15%;
+      width: 10%;
     }
 
     &_proposal {
@@ -48,7 +48,7 @@
     }
 
     &_mining-key {
-      width: 30%;
+      width: 25%;
       word-break: break-all;
     }
 
@@ -68,7 +68,7 @@
     }
 
     &_time {
-      width: 15%;
+      width: 10%;
       text-align: right;
 
       @media screen and (max-width: $tablet-width) {

src/components/BallotCard.jsx

@@ -338,7 +338,7 @@ export class BallotCard extends React.Component {
             <div className="ballots-about">
               <div className="ballots-about-i ballots-about-i_name">
                 <div className="ballots-about-td">
-                  <p className="ballots-about-i--title">Name</p>
+                  <p className="ballots-about-i--title">Proposer</p>
                 </div>
                 <div className="ballots-about-td">
                   <p className="ballots-i--name">{this.creator}</p>

src/components/BallotKeysCard.jsx

@@ -11,6 +11,7 @@ export class BallotKeysCard extends React.Component {
   @observable affectedKeyTypeDisplayName;
   @observable ballotType;
   @observable ballotTypeDisplayName;
+  @observable miningKey;
 
   @action("Get ballotTypeDisplayName")
   getBallotTypeDisplayName(ballotType) {
@@ -73,12 +74,20 @@ export class BallotKeysCard extends React.Component {
     let affectedKey = await contractsStore.votingToChangeKeys.getAffectedKey(id);
     this.affectedKey = affectedKey;
   }
+  @action("Get mining key of keys ballot")
+  getMiningKey = async () => {
+    const { contractsStore, id } = this.props;
+    let miningKey = await contractsStore.votingToChangeKeys.getMiningKey(id);
+    const metadata = await contractsStore.getValidatorMetadata(miningKey)
+    this.miningKey = `${metadata.lastName} ${miningKey}`;
+  }
 
   constructor(props) {
     super(props);
     this.getAffectedKey();
     this.getAffectedKeyType();
     this.getBallotType();
+    this.getMiningKey();
   }
 
   isSearchPattern = () => {
@@ -120,6 +129,14 @@ export class BallotKeysCard extends React.Component {
             <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>
+          </div>
+        </div>
       </BallotCard>
     );
   }

src/contracts/VotingToChangeKeys.contract.js

@@ -72,6 +72,10 @@ export default class VotingToChangeKeys {
     return this.votingToChangeKeysInstance.methods.getAffectedKey(_id).call();
   }
 
+  getMiningKey(_id) {
+    return this.votingToChangeKeysInstance.methods.getMiningKey(_id).call();
+  }
+
   getMiningByVotingKey(_votingKey) {
     return this.votingToChangeKeysInstance.methods.getMiningByVotingKey(_votingKey).call();
   }

src/stores/ContractsStore.js

@@ -202,8 +202,11 @@ class ContractsStore {
 		keys.forEach(async (key) => {
 			const metadata = await this.validatorMetadata.getValidatorData({miningKey: key})
 			this.validatorsMetadata.push({label: `${key} ${metadata.lastName}`, value: key})
-		})
-		
+		})	
+	}
+	@action
+	async getValidatorMetadata(miningKey) {
+		return await this.validatorMetadata.getValidatorData({miningKey})
 	}
 }