Add proposal vote information

CHANGELOG.md

@@ -10,6 +10,7 @@
 - Add Gov link to global nav #135
 - Add proposal detail page and proposal info #136
 - Add proposal timing detail and progress bar #137
+- Add proposal voting detail and progress bar #138
 - Add proposol deposit card to detail page #139
 
 ### Improvements

src/Components/Progress/Progress.js

@@ -0,0 +1,97 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { breakpoints } from 'consts';
+
+const ProgressBar = styled.div`
+  position: relative;
+  margin-bottom: 8px;
+  width: 100%;
+  height: 30px;
+  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5) inset;
+  background-color: ${({ theme }) => theme.BACKGROUND_LIGHT};
+`;
+
+const ProgressValue = styled.span`
+  position: absolute;
+  left: ${({ start = 0 }) => start}%;
+  display: block;
+  width: ${({ value }) => (value > 100 ? 100 : value)}%;
+  height: ${({ height = 100 }) => height}%;
+  text-indent: -9999px;
+  background-color: ${({ color, theme }) => theme[color]};
+`;
+
+const KeyContainer = styled.div`
+  margin: 10px 0 0;
+  display: flex;
+  width: 100%;
+  gap: 1.6rem;
+  flex-direction: column;
+
+  @media ${breakpoints.up('md')} {
+    flex-direction: row;
+  }
+`;
+
+const Key = styled.div`
+  display: flex;
+  align-items: center;
+  flex-basis: calc(25% - 1.6rem);
+  gap: 0.8rem;
+  font-size: 1.4rem;
+  font-weight: 200;
+  line-height: 1.75;
+`;
+
+const KeySquare = styled.span`
+  height: 100%;
+  max-height: 100%;
+  min-height: ${({ minHeight }) => minHeight}px;
+  width: 5px;
+  background-color: ${({ color, theme }) => theme[color]};
+`;
+
+const Progress = ({ data, keySquareHeight }) => (
+  <Fragment>
+    <ProgressBar>
+      {data.map(p => (
+        <ProgressValue
+          key={p.color}
+          color={p.color}
+          height={p.height}
+          start={p.start}
+          value={p.value}
+        />
+      ))}
+    </ProgressBar>
+
+    <KeyContainer>
+      {data.map(p => (
+        <Key key={p.color}>
+          <KeySquare color={p.color} minHeight={keySquareHeight} />
+          {typeof p.content === 'function' && p.content()}
+        </Key>
+      ))}
+    </KeyContainer>
+  </Fragment>
+);
+
+Progress.propTypes = {
+  data: PropTypes.arrayOf(
+    PropTypes.shape({
+      color: PropTypes.string,
+      content: PropTypes.func,
+      height: PropTypes.number,
+      start: PropTypes.number,
+      value: PropTypes.number,
+    })
+  ).isRequired,
+  keySquareHeight: PropTypes.number,
+};
+
+Progress.defaultProps = {
+  keySquareHeight: 30,
+};
+
+export default Progress;

src/Components/Progress/index.js

@@ -0,0 +1 @@
+export { default } from './Progress';

src/Components/Summary/Summary.js

@@ -144,11 +144,11 @@ const buildSummaryValue = (rowData, theme) => {
 };
 
 const buildSummaryRow = (rowData, theme) => {
-  const { title, value, isJson } = rowData;
+  const { isJson, nobreak = false, title, value } = rowData;
   const valueMissing = value === undefined || value === null || value === '';
 
   return (
-    <SummaryRow key={title} isJson={isJson}>
+    <SummaryRow key={title} isJson={isJson} nobreak={nobreak}>
       <SummaryTitle>{title}:</SummaryTitle>
       <SummaryValue>{valueMissing ? '--' : buildSummaryValue(rowData, theme)}</SummaryValue>
     </SummaryRow>

src/Components/index.js

@@ -24,4 +24,5 @@ export { default as DropdownBtn } from './DropdownBtn';
 export { default as Modal } from './Modal';
 export { default as Input } from './Input';
 export { default as InfiniteScroll } from './InfiniteScroll';
+export { default as Progress } from './Progress';
 export * from './Layout';

src/Pages/Proposal/Components/ProposalDeposits.js

@@ -22,7 +22,7 @@ const ProposalDeposits = () => {
   }, [currentPage, getProposalDeposits, proposalId]);
 
   const tableHeaders = [
-    { displayName: 'Depositor', dataName: 'moniker' },
+    { displayName: 'Depositor', dataName: 'voter' },
     { displayName: 'Deposit Type', dataName: 'depositType' },
     { displayName: 'Amount', dataName: 'amount' },
     { displayName: 'Tx Hash', dataName: 'txHash' },
@@ -33,7 +33,6 @@ const ProposalDeposits = () => {
   const tableData = proposalDeposits.map(d => ({
     ...d,
     depositType: d.type,
-    moniker: d.voter.moniker || d.voter.address,
   }));
 
   return (

src/Pages/Proposal/Components/ProposalInformation.js

@@ -21,11 +21,11 @@ const ProposalInformation = () => {
 
   const summaryData = [
     { title: 'ID', value: proposalId },
-    { title: 'Title', value: title },
+    { title: 'Title', value: title, nobreak: true },
     { title: 'Status', value: status },
     { title: 'Proposer', value: moniker || address },
     { title: 'Type', value: type },
-    { title: 'Description', value: description },
+    { title: 'Description', value: description, nobreak: true },
     details && { title: 'Details', value: JSON.stringify(details), isJson: true },
   ].filter(sd => sd);
 

src/Pages/Proposal/Components/ProposalTimingProgressBar.js

@@ -1,54 +1,8 @@
-import React, { Fragment } from 'react';
-import styled from 'styled-components';
-import { Content, Loading } from 'Components';
+import React from 'react';
+import { Content, Loading, Progress } from 'Components';
 import { useGovernance } from 'redux/hooks';
-import { breakpoints } from 'consts';
 import { formatDenom } from 'utils';
-
-const ProgressBar = styled.div`
-  position: relative;
-  margin-bottom: 8px;
-  width: 100%;
-  height: 20px;
-  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5) inset;
-  background-color: ${({ theme }) => theme.BACKGROUND_LIGHT};
-`;
-
-const ProgressValue = styled.span`
-  position: absolute;
-  left: 0;
-  display: block;
-  width: ${({ value }) => (value > 100 ? 100 : value)}%;
-  max-height: 100%;
-  text-indent: -9999px;
-  background-color: ${({ initial, theme }) => (initial ? theme.CHART_PIE_A : theme.CHART_PIE_F)};
-`;
-
-const Key = styled.p`
-  display: flex;
-  align-items: center;
-  gap: 0.8rem;
-  margin: 0;
-  margin-bottom: 0.8rem;
-
-  &:last-child() {
-    margin-bottom: 0;
-  }
-
-  @media ${breakpoints.up('sm')} {
-    margin-right: 1.6rem;
-
-    &:last-child() {
-      margin-right: 0;
-    }
-  }
-`;
-
-const KeySquare = styled.span`
-  height: 30px;
-  width: 30px;
-  background-color: ${({ initial, theme }) => (initial ? theme.CHART_PIE_A : theme.CHART_PIE_F)};
-`;
+import Big from 'big.js';
 
 const ProposalTiming = () => {
   const { proposal, proposalLoading } = useGovernance();
@@ -59,28 +13,27 @@ const ProposalTiming = () => {
   const needed = timings?.deposit?.needed;
   const denom = timings?.deposit?.denom;
 
+  const getPercentage = (num = 0, den = 1) => new Big(num).div(den).times(100).toNumber();
+
+  const progressData = [
+    {
+      color: 'CHART_PIE_C',
+      content: () => <span>Current - {formatDenom(current, denom)}</span>,
+      value: getPercentage(current, needed),
+    },
+    {
+      color: 'CHART_PIE_F',
+      content: () => <span>Initial - {formatDenom(initial, denom)}</span>,
+      height: 50,
+      value: getPercentage(initial, needed),
+    },
+  ];
+
   return (
     <Content title={`Needed - ${formatDenom(needed, denom)}`}>
       {proposalLoading && <Loading />}
 
-      {!proposalLoading && (
-        <Fragment>
-          <ProgressBar>
-            <ProgressValue value={(current / needed) * 100 || 0}>
-              {formatDenom(current, denom)}
-            </ProgressValue>
-            <ProgressValue initial value={(initial / needed) * 100 || 0}>
-              {formatDenom(initial, denom)}
-            </ProgressValue>
-          </ProgressBar>
-          <Key>
-            <KeySquare initial /> Initial - {formatDenom(initial, denom)}
-          </Key>
-          <Key>
-            <KeySquare /> Current - {formatDenom(current, denom)}
-          </Key>
-        </Fragment>
-      )}
+      {!proposalLoading && <Progress data={progressData} />}
     </Content>
   );
 };

src/Pages/Proposal/Components/ProposalVotingGraph.js

@@ -0,0 +1,96 @@
+import React from 'react';
+import Big from 'big.js';
+import { useGovernance } from 'redux/hooks';
+import { Content, Loading, Progress } from 'Components';
+import { formatDenom, numberFormat } from 'utils';
+
+const ProposalVotingGraph = () => {
+  const { proposalVotes, proposalVotesLoading } = useGovernance();
+
+  const { tally } = proposalVotes;
+  const total = formatDenom(...Object.values(tally?.total?.amount || {}));
+
+  const getPercent = amt =>
+    new Big(amt)
+      .div(tally?.total?.amount?.amount || 1)
+      .times(100)
+      .toNumber();
+
+  const yesAmount = tally?.yes?.amount;
+  const noAmount = tally?.no?.amount;
+  const noWithVetoAmount = tally?.noWithVeto?.amount;
+  const abstainAmount = tally?.abstain?.amount;
+
+  const yesPercent = getPercent(yesAmount?.amount || 0);
+  const noPercent = getPercent(noAmount?.amount || 0);
+  const noWithVetoPercent = getPercent(noWithVetoAmount?.amount || 0);
+  const abstainPercent = getPercent(abstainAmount?.amount || 0);
+
+  const noStart = yesPercent;
+  const noWithVetoStart = noStart + noPercent;
+  const abstainStart = noWithVetoStart + noWithVetoPercent;
+
+  const progressData = [
+    // yes
+    {
+      color: 'CHART_PIE_A',
+      content: () => (
+        <div>
+          <div>Yes</div>
+          <div>{numberFormat(yesPercent)}%</div>
+          <div>{formatDenom(...Object.values(yesAmount || {}))}</div>
+        </div>
+      ),
+      value: yesPercent,
+    },
+    // no
+    {
+      color: 'CHART_PIE_H',
+      content: () => (
+        <div>
+          <div>No</div>
+          <div>{numberFormat(noPercent)}%</div>
+          <div>{formatDenom(...Object.values(noAmount || {}))}</div>
+        </div>
+      ),
+      start: noStart,
+      value: noPercent,
+    },
+    // noWithVeto
+    {
+      color: 'CHART_PIE_C',
+      content: () => (
+        <div>
+          <div>NoWithVeto</div>
+          <div>{numberFormat(noWithVetoPercent)}%</div>
+          <div>{formatDenom(...Object.values(noWithVetoAmount || {}))}</div>
+        </div>
+      ),
+      start: noWithVetoStart,
+      value: noWithVetoPercent,
+    },
+    // abstain
+    {
+      color: 'CHART_PIE_I',
+      content: () => (
+        <div>
+          <div>Abstain</div>
+          <div>{numberFormat(abstainPercent)}%</div>
+          <div>{formatDenom(...Object.values(abstainAmount || {}))}</div>
+        </div>
+      ),
+      start: abstainStart,
+      value: abstainPercent,
+    },
+  ];
+
+  return (
+    <Content title={proposalVotesLoading ? '' : `Total: ${total}`}>
+      {proposalVotesLoading && <Loading />}
+
+      {!proposalVotesLoading && <Progress data={progressData} keySquareHeight={70} />}
+    </Content>
+  );
+};
+
+export default ProposalVotingGraph;

src/Pages/Proposal/Components/ProposalVotingTable.js

@@ -0,0 +1,36 @@
+import React, { useEffect } from 'react';
+import { useParams } from 'react-router';
+import { Table } from 'Components';
+import { useGovernance } from 'redux/hooks';
+
+const ProposalTiming = () => {
+  const { proposalId } = useParams();
+  const { getProposalVotes, proposalVotes, proposalVotesLoading: tableLoading } = useGovernance();
+
+  useEffect(() => {
+    if (proposalId) {
+      getProposalVotes(proposalId);
+    }
+  }, [getProposalVotes, proposalId]);
+
+  const { votes: tableData } = proposalVotes;
+
+  const tableHeaders = [
+    { displayName: 'Voter', dataName: 'voter' },
+    { displayName: 'Tx Hash', dataName: 'txHash' },
+    { displayName: 'Answer', dataName: 'answer' },
+    { displayName: 'Block Height', dataName: 'blockHeight' },
+    { displayName: 'Timestamp', dataName: 'txTimestamp' },
+  ];
+
+  return (
+    <Table
+      tableHeaders={tableHeaders}
+      tableData={tableData}
+      isLoading={tableLoading}
+      title="Proposal Votes"
+    />
+  );
+};
+
+export default ProposalTiming;