Store voting history in local storage

src/App.js

@@ -883,6 +883,7 @@ export default class App extends Component {
                     favorites={favorites}
                     voteStartTime={voteStartTime}
                     voteEndTime={voteEndTime}
+                    account={account}
                   />
                 )} />
 

src/MainPage.js

@@ -18,6 +18,7 @@ export default function MainPage({
   favorites,
   voteStartTime,
   voteEndTime,
+  account
 }) {
   const filteredList = React.useMemo(() => {
     const sortFunctions = {
@@ -60,12 +61,8 @@ export default function MainPage({
       <Footer
         voteStartTime={voteStartTime}
         voteEndTime={voteEndTime}
-        history={[
-          { id: "EA001", votes: 2 },
-          { id: "EA003", votes: 4 },
-          { id: "EA002", votes: 1 }
-        ]}
+        account={account}
       />
     </>
   );
-}
+}

src/volt/components/Footer/index.js

@@ -1,12 +1,18 @@
 import React from "react";
 import { FooterContainer, History, Timer } from "./styles";
+import {getStoredValue} from "../../../services/localStorage";
 
 const Footer = (props) => {
-  const { history } = props;
+  const { account } = props;
+
+  // TODO: Need optimization with use of state or context
+  const prevValues = getStoredValue("votesHistory", account);
+  const parsedHistory = prevValues ? JSON.parse(prevValues) : [];
+  const history = parsedHistory.reverse().slice(0, 3);
+
   return (
     <FooterContainer>
       <History history={history} />
-      <Timer {...props} />
     </FooterContainer>
   );
 };

src/volt/components/Footer/styles.js

@@ -29,8 +29,7 @@ export const HistoryItem = styled(Text).attrs(() => ({
 }))`
   & span {
     font-weight: bold;
-    &:before {
-      content: ">";
+    i {
       margin-right: 4px;
     }
     &:after {
@@ -45,19 +44,23 @@ export const History = ({ history }) => {
   return (
     <HistoryContainer>
       <HistoryTitle>Voice History</HistoryTitle>
-      {history.map(item => {
-        let suffix = "Voice Credit";
-        if (item.votes !== 1) {
-          suffix += "s";
-        }
-        const t = `${item.votes} ${suffix}`;
-
-        return (
-          <HistoryItem key={item.id}>
-            <span>{item.id}</span> {t}
-          </HistoryItem>
-        );
-      })}
+      {history.length > 0 ?
+        history.map(item => {
+          const {type, votes, proposalId, timestamp} = item;
+          let suffix = "Voice Credit";
+          if (Math.abs(votes) !== 1 ) {
+            suffix += "s";
+          }
+          const t = `${item.votes} ${suffix}`;
+          const prefix = type === "cast" ? ">" : "<";
+          return (
+            <HistoryItem key={timestamp}>
+              <span><i>{prefix}</i>{proposalId}</span> {t}
+            </HistoryItem>
+          );
+        })
+        : <Text color={"voltBrandWhite"} opacity={0.6}>No votes casted</Text>
+      }
     </HistoryContainer>
   );
 };

src/volt/components/VoteControls/index.js

@@ -67,6 +67,8 @@ class VoteControls extends Component {
     this.submitVote = this.submitVote.bind(this);
     this.withdrawVote = this.withdrawVote.bind(this);
 
+    this.storeVotingAction = this.storeVotingAction.bind(this);
+
     const treeData = this.getDataFromTree();
     this.state = {
       expanded: false,
@@ -404,6 +406,13 @@ class VoteControls extends Component {
       console.log({receipt});
       this.writeDataToTree(newVotesTotal, newNumOfVotes);
 
+      // Store voting action in history
+      this.storeVotingAction({
+        type: "cast",
+        votes: sign * newVotesTotal,
+        balanceCard,
+      });
+
       this.setProgressState(false);
       this.setReceiptState(true);
     } catch (error) {
@@ -519,7 +528,8 @@ class VoteControls extends Component {
       const treeData = this.getDataFromTree();
       console.log({treeData});
 
-      const currentVotes = utils.parseEther(castedVotes.toString());
+      const votes = castedVotes.toString();
+      const currentVotes = utils.parseEther(votes);
 
       const data = this.cookWithdrawParams(balanceCard.id, currentVotes);
 
@@ -547,6 +557,13 @@ class VoteControls extends Component {
 
       this.writeDataToTree(0, zeroVotes);
 
+      // Store voting action in history
+      this.storeVotingAction({
+        type: "withdraw",
+        votes: parseInt(votes),
+        balanceCard,
+      });
+
       this.setProgressState(false);
       this.setReceiptState(true);
 
@@ -601,6 +618,29 @@ class VoteControls extends Component {
     });
   }
 
+  storeVotingAction(params){
+    const { account , proposal } = this.props;
+    const { proposalId } = proposal;
+    const { type, votes, balanceCard } = params;
+    const timestamp = new Date();
+
+    // TODO: We shall use balance card id, but needed quick solution
+    // const { id } = balanceCard;
+    const id = account;
+
+    const prevValues = getStoredValue("votesHistory", id);
+    const parsedHistory = prevValues ? JSON.parse(prevValues) : [];
+    parsedHistory.push({
+      type,
+      votes,
+      proposalId,
+      timestamp
+    });
+    const votesHistory = JSON.stringify(parsedHistory);
+
+    storeValues({votesHistory}, id);
+  }
+
   render() {
     const { expanded, votes, choice } = this.state;
     const { showReceipt, showProgress } = this.state;