added total nam staked for proposal (#120)

* added total nam staked for proposal * updated NAM count with formattedCount function --------- Co-authored-by: SrikanthSoparla <[email protected]>
OmniFlix · Jan 27, 2025 · 567ef23 · 567ef23
1 parent c47f4fa
commit 567ef23
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 20 deletions.
diff --git a/src/containers/Proposals/Cards.js b/src/containers/Proposals/Cards.js
@@ -7,7 +7,7 @@ import ClassNames from 'classnames';
 import { Button } from '@material-ui/core';
 import { showProposalDialog } from '../../actions/proposals';
 import moment from 'moment';
-import { tally } from '../../utils/numberFormats';
+import { formatCount, tally } from '../../utils/numberFormats';
 import DotsLoading from '../../components/DotsLoading';
 import withRouter from '../../components/WithRouter';
 import { fixDateString } from 'utils/date';
@@ -175,20 +175,29 @@ const Cards = (props) => {
                                     </div>
                                     <div className="vote_details">
                                         <div className="yes">
-                                            <span/>
-                                            <p>YES ({VoteCalculation(proposal, 'yayVotes')})</p>
+                                            <div>
+                                                <span/>
+                                                <p>YES ({VoteCalculation(proposal, 'yayVotes')})</p>
+                                            </div>
+                                            <p className="total_nam_count">{formatCount(proposal && proposal.yayVotes)} NAM</p>
                                         </div>
                                         <div className="no">
-                                            <span/>
-                                            <p>NO ({VoteCalculation(proposal, 'nayVotes')})</p>
+                                            <div>
+                                                <span/>
+                                                <p>NO ({VoteCalculation(proposal, 'nayVotes')})</p>
+                                            </div>
+                                            <p className="total_nam_count">{formatCount(proposal && proposal.nayVotes)} NAM</p>
                                         </div>
                                         {/* <div className="option3">
                                             <span/>
                                             <p>NoWithVeto ({VoteCalculation(proposal, 'no_with_veto_count')})</p>
                                         </div> */}
                                         <div className="option4">
-                                            <span/>
-                                            <p>Abstain ({VoteCalculation(proposal, 'abstainVotes')})</p>
+                                            <div>
+                                                <span/>
+                                                <p>Abstain ({VoteCalculation(proposal, 'abstainVotes')})</p>
+                                            </div>
+                                            <p className="total_nam_count">{formatCount(proposal && proposal.abstainVotes)} NAM</p>
                                         </div>
                                     </div>
                                 </div>

diff --git a/src/containers/Proposals/ProposalDialog/index.css b/src/containers/Proposals/ProposalDialog/index.css
@@ -167,7 +167,7 @@
     margin-right: 20px;
 }
 
-.proposals .pds3l_c2.vote_details > div > p {
+.proposals .pds3l_c2.vote_details > div > div > p {
     font-family: 'Blinker', sans-serif;
     font-weight: 600;
     font-size: 24px;

diff --git a/src/containers/Proposals/ProposalDialog/index.js b/src/containers/Proposals/ProposalDialog/index.js
@@ -15,7 +15,7 @@ import Icon from '../../../components/Icon';
 import Voting from './Voting';
 import moment from 'moment';
 import ClassNames from 'classnames';
-import { tally } from '../../../utils/numberFormats';
+import { formatCount, tally } from '../../../utils/numberFormats';
 import NavBar from '../../NavBar';
 import variables from '../../../utils/variables';
 import UnSuccessDialog from '../../Stake/DelegateDialog/UnSuccessDialog';
@@ -202,20 +202,29 @@ class ProposalDialog extends Component {
                                                 this.props.proposal && (this.props.proposal.status === 2 ||
                                                     this.props.proposal.status === 'PROPOSAL_STATUS_VOTING_PERIOD') ? 'vote_in_progress' : '')}>
                                                 <div className="yes">
-                                                    <span/>
-                                                    <p>YES ({this.VoteCalculation('yayVotes')})</p>
+                                                    <div>
+                                                        <span/>
+                                                        <p>YES ({this.VoteCalculation('yayVotes')})</p>
+                                                    </div>
+                                                    <p className="total_nam_count">{formatCount(this.props && this.props.proposal && this.props.proposal.yayVotes)} NAM</p>
                                                 </div>
                                                 <div className="no">
-                                                    <span/>
-                                                    <p>NO ({this.VoteCalculation('nayVotes')})</p>
+                                                    <div>
+                                                        <span/>
+                                                        <p>NO ({this.VoteCalculation('nayVotes')})</p>
+                                                    </div>
+                                                    <p className="total_nam_count">{formatCount(this.props && this.props.proposal && this.props.proposal.nayVotes)} NAM</p>
                                                 </div>
                                                 {/* <div className="option3">
                                                     <span/>
                                                     <p>NoWithVeto ({this.VoteCalculation('no_with_veto_count')})</p>
                                                 </div> */}
                                                 <div className="option4">
-                                                    <span/>
-                                                    <p>Abstain ({this.VoteCalculation('abstainVotes')})</p>
+                                                    <div>
+                                                        <span/>
+                                                        <p>Abstain ({this.VoteCalculation('abstainVotes')})</p>
+                                                    </div>
+                                                    <p className="total_nam_count">{formatCount(this.props && this.props.proposal && this.props.proposal.abstainVotes)} NAM</p>
                                                 </div>
                                             </div>
                                         </div>

diff --git a/src/containers/Proposals/index.css b/src/containers/Proposals/index.css
@@ -271,11 +271,18 @@
 
 .proposals .vote_details > div {
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     margin-bottom: 10px;
+    flex-direction: column;
 }
 
-.proposals .vote_details > div > span {
+.proposals .vote_details > div > div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.proposals .vote_details > div > div > span {
     width: 16px;
     height: 16px;
     background: #02D70A;
@@ -284,15 +291,15 @@
     margin-right: 10px;
 }
 
-.proposals .vote_details > div.no > span {
+.proposals .vote_details > div.no > div > span {
     background: #C0C0C0;
 }
 
 .proposals .vote_details > div.option3 > span {
     background: #FF6767;
 }
 
-.proposals .vote_details > div.option4 > span {
+.proposals .vote_details > div.option4 > div > span {
     background: #827CE6;
 }
 
@@ -303,6 +310,12 @@
     line-height: 130%;
     color: #fff;
     display: flex;
+    margin-left: 30px;
+}
+
+.proposals .vote_details > div > p.total_nam_count {
+    font-size: 14px;
+    opacity: 0.6;
 }
 
 .proposals .pagination > nav {

diff --git a/src/utils/numberFormats.js b/src/utils/numberFormats.js
@@ -1,5 +1,13 @@
 export const commaSeparator = (value) => {
-    return value.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    if (value === null || value === undefined) {
+        return '';
+    }
+    if (value && Number(value) < 1000) {
+        return value.toString();
+    }
+    const [integerPart, decimalPart] = value.toString().split('.');
+    const updatedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    return decimalPart ? `${updatedInteger}.${decimalPart}` : updatedInteger;
 };
 
 export const tally = (value, sum) => {