Tokenomics: Add Spending Proposals

src/components/Routes/index.tsx

@@ -34,7 +34,7 @@ interface IProps extends IState {
 }
 
 const Routes = (props: IProps) => {
-  const { faq, toggleEditKpi } = props;
+  const { faq, proposals, toggleEditKpi } = props;
 
   return (
     <div>
@@ -55,6 +55,8 @@ const Routes = (props: IProps) => {
                       reward: props.status?.lastReward,
                       stakes: props.stakes,
                     }}
+                    block={props.status?.block?.id}
+                    proposals={proposals.filter((p) => p.type === "spending")}
                     mints={props.mints}
                     council={props.council}
                     reports={props.reports}

src/components/Tokenomics/Overview.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { Link } from "react-router-dom";
 import { Table } from "react-bootstrap";
 import { Tokenomics } from "../../types";
 
@@ -6,12 +7,14 @@ const mJoy = (joy: number) =>
   joy ? (joy / 1000000).toFixed(3) + ` M JOY` : `Loading ..`;
 
 const Overview = (props: { groups: any[]; tokenomics: Tokenomics }) => {
-  const { groups, tokenomics } = props;
+  const { groups, tokenomics, proposals } = props;
   const { price, totalIssuance, dollarPool } = tokenomics;
   const validators = groups.find((g) => g.id === "validators");
   const council = groups.find((g) => g.id === "council");
   const budget = dollarPool.replenishAmount;
-  const minted = groups.reduce((sum, { earning }) => sum + +earning, 0);
+  const proposalsPaid = proposals.reduce((sum, p) => sum + p.amount, 0);
+  const salaries = groups.reduce((sum, { earning }) => sum + +earning, 0);
+  const minted = proposalsPaid + salaries;
   const staked = groups.reduce((sum, { stake }) => sum + +stake, 0);
 
   return (
@@ -33,6 +36,16 @@ const Overview = (props: { groups: any[]; tokenomics: Tokenomics }) => {
           <td>Weekly Budget</td>
           <Budget budget={budget} pool={dollarPool.size} />
         </tr>
+        <tr>
+          <td>Proposals Paid</td>
+          <td>
+            <Link to={`/spending`}>{mJoy(proposalsPaid)}</Link>
+          </td>
+        </tr>
+        <tr>
+          <td>Salaries & Validators</td>
+          <td>{mJoy(salaries)}</td>
+        </tr>
         <tr>
           <td>Weekly Minting</td>
           <Minted minted={minted} issuance={totalIssuance} />

src/components/Tokenomics/index.tsx

@@ -35,12 +35,15 @@ const useStyles = makeStyles((theme: Theme) =>
   })
 );
 
-const TokenStats = (props: IProps) => {
+const TokenomicsPage = (props: IProps) => {
   const classes = useStyles();
-  const { reports, tokenomics, council, mints, workers, validators } = props;
+  const { reports, tokenomics, council, proposals, mints, workers } = props;
   if (!tokenomics) return <Loading target="tokenomics" />;
   const { exchanges, extecutedBurnsAmount, totalIssuance } = tokenomics;
-  const groups = groupsMinting(council, workers, validators);
+  const groups = groupsMinting(council, workers, props.validators);
+  // there is no easy to way determine when the last election ended, for now just assume 1 week ago
+  const termStart = props.block - 600 * 168;
+  const spendingProposals = proposals.filter((p) => p.finalizedAt > termStart);
 
   return (
     <Paper className={classes.paper}>
@@ -51,7 +54,11 @@ const TokenStats = (props: IProps) => {
           </Typography>
         </Toolbar>
       </AppBar>
-      <Overview groups={groups} tokenomics={tokenomics} />
+      <Overview
+        groups={groups}
+        tokenomics={tokenomics}
+        proposals={spendingProposals}
+      />
 
       <AppBar className={classes.root} position="static">
         <Toolbar>
@@ -97,4 +104,4 @@ const TokenStats = (props: IProps) => {
   );
 };
 
-export default TokenStats;
+export default TokenomicsPage;