Tokenomics Design

src/components/Chart/index.tsx

@@ -27,17 +27,17 @@ const Chart = (props: IProps) => {
   });
 
   const width = (pixels || 400) / sorted.length;
-  const color = `bg-danger`;
+  const color = `bg-light`;
 
   return (
     <div className="d-flex flex-column">
       <div
         className={`d-flex flex-row align-items-baseline`}
-        style={{ height: `100px`, borderBottom: `0.01px solid black` }}
+        style={{ height: `100px`, borderBottom: `0.01px solid ` }}
       >
         <div
           className={color}
-          style={{ height: `100%`, borderRight: `0.01px solid black` }}
+          style={{ height: `100%`, borderRight: `0.01px solid ` }}
         />
         {sorted.map((d, i) => (
           <OverlayTrigger
@@ -55,7 +55,7 @@ const Chart = (props: IProps) => {
               key={i}
               className={barStyle ? barStyle(d) : color}
               style={{
-                border: `1px solid teal`,
+                border: `1px solid`,
                 width,
                 height: `${(90 * d[y]) / yMax}%`,
               }}

src/components/Tokenomics/Burns.tsx

@@ -33,9 +33,11 @@ const Burns = (props: {
           o.status === "PENDING" ? `bg-warning` : `bg-danger`
         }
       />
-      <div className="my-1 ">
+      <div className="my-1">
         Total Amount Burned: {executed.toFixed(2)} M JOY ({pctRounded}%) -{" "}
-        <Link to={`/burners`}>Top Burners</Link>
+        <Link className="p-1 text-warning" to={`/burners`}>
+          <b>Top Burners</b>
+        </Link>
       </div>
     </div>
   );

src/components/Tokenomics/Groups.tsx

@@ -9,28 +9,25 @@ const Groups = (props: { price: nubmer; workers: {}; mints: number[] }) => {
   const { mints, workers, price } = props;
   if (!mints?.length) return <div />;
   return (
-    <div className="mt-3">
-      <h2 className="m-3 text-center">Working Groups</h2>
-      <div className="d-flex flex-wrap">
-        <Group
-          workers={workers?.storage}
-          mint={mints[2]}
-          tag={mintTags[2]}
-          price={price}
-        />
-        <Group
-          workers={workers?.content}
-          mint={mints[3]}
-          tag={mintTags[3]}
-          price={price}
-        />
-        <Group
-          workers={workers?.operations}
-          mint={mints[4]}
-          tag={mintTags[4]}
-          price={price}
-        />
-      </div>
+    <div className="d-flex flex-wrap">
+      <Group
+        workers={workers?.storage}
+        mint={mints[2]}
+        tag={mintTags[2]}
+        price={price}
+      />
+      <Group
+        workers={workers?.content}
+        mint={mints[3]}
+        tag={mintTags[3]}
+        price={price}
+      />
+      <Group
+        workers={workers?.operations}
+        mint={mints[4]}
+        tag={mintTags[4]}
+        price={price}
+      />
     </div>
   );
 };
@@ -44,11 +41,10 @@ const Group = (props: {
   const { workers, mint, tag, price } = props;
   if (!workers)
     return (
-      <div className=" p-3 col-lg-4">
-        <h3 className="m-3 text-center">{tag}</h3>
-        <div className="text-center">
-          <b>Mint:</b> {formatMint(mint)}
-        </div>
+      <div className="p-3 col-lg-4">
+        <h2 className="m-3 text-center">
+          {tag} <Mint mint={mint} />
+        </h2>
         <Loading target="workers" />
       </div>
     );
@@ -69,7 +65,7 @@ const Group = (props: {
         {tag} <Mint mint={mint} />
       </h2>
 
-      <Table>
+      <Table className="text-light">
         <thead>
           <tr>
             <th>ID</th>
@@ -91,7 +87,7 @@ const Group = (props: {
             <tr key={w.id}>
               <td>{w.id}</td>
               <td>
-                <Link className="text-dark" to={`/members/${w.handle}`}>
+                <Link className="text-warning" to={`/members/${w.handle}`}>
                   {w.handle}
                 </Link>
               </td>

src/components/Tokenomics/Overview.tsx

@@ -15,7 +15,7 @@ const Overview = (props: { groups: any[]; tokenomics: Tokenomics }) => {
   const staked = groups.reduce((sum, { stake }) => sum + +stake, 0);
 
   return (
-    <Table className="w-50 m-auto">
+    <Table className="w-50 m-auto text-light">
       <tbody>
         <tr>
           <td>Exchange Rate</td>

src/components/Tokenomics/Spending.tsx

@@ -12,37 +12,34 @@ const Spending = (props: { roles: RoleSpending[] }) => {
   const minted = groups.reduce((sum, { earning }) => earning + sum, 0);
   const staked = groups.reduce((sum, { stake }) => stake + sum, 0);
   return (
-    <div className="mt-3">
-      <h2 className="m-3 text-center"> Spending and Stake</h2>
-      <Table className="px-3">
-        <thead>
-          <tr>
-            <th>Role</th>
-            <th>Actors</th>
-            <th>Earning [MJOY]</th>
-            <th>Earning [USD]</th>
-            <th>Earning [%]</th>
-            <th>Stake [MJOY]</th>
-            <th>Stake [USD]</th>
-            <th>Stake [%]</th>
+    <Table className="px-3 text-light">
+      <thead>
+        <tr>
+          <th>Role</th>
+          <th>Actors</th>
+          <th>Earning [MJOY]</th>
+          <th>Earning [USD]</th>
+          <th>Earning [%]</th>
+          <th>Stake [MJOY]</th>
+          <th>Stake [USD]</th>
+          <th>Stake [%]</th>
+        </tr>
+      </thead>
+      <tbody>
+        {groups.map((role, key: number) => (
+          <tr key={key}>
+            <td>{role.name}</td>
+            <td>{role.actors}</td>
+            <td>{mJoy(role.earning)}</td>
+            <td>{(role.earning * price).toFixed(2)}</td>
+            <td>{percent(role.earning, minted)}</td>
+            <td>{mJoy(role.stake)}</td>
+            <td>{(role.stake * price).toFixed(2)}</td>
+            <td>{percent(role.stake, staked)}</td>
           </tr>
-        </thead>
-        <tbody>
-          {groups.map((role, key: number) => (
-            <tr key={key}>
-              <td>{role.name}</td>
-              <td>{role.actors}</td>
-              <td>{mJoy(role.earning)}</td>
-              <td>{(role.earning * price).toFixed(2)}</td>
-              <td>{percent(role.earning, minted)}</td>
-              <td>{mJoy(role.stake)}</td>
-              <td>{(role.stake * price).toFixed(2)}</td>
-              <td>{percent(role.stake, staked)}</td>
-            </tr>
-          ))}
-        </tbody>
-      </Table>
-    </div>
+        ))}
+      </tbody>
+    </Table>
   );
 };
 

src/components/Tokenomics/TokenValue.tsx

@@ -18,8 +18,6 @@ const TokenValue = (props: { tokenValue: any }) => {
 
   return (
     <div className="p-5 text-center">
-      <h2 className="m-3 text-center">Token Value</h2>
-
       <Chart
         data={Object.values(tokenValue).sort((a, b) => a.date - b.date)}
         x="date"
@@ -27,8 +25,7 @@ const TokenValue = (props: { tokenValue: any }) => {
         xLabel="Date"
         yLabel="$"
         scaleY={true}
-        pixels={600}
-        barStyle={() => `bg-warning`}
+        pixels={1000}
       />
     </div>
   );

src/components/Tokenomics/index.tsx

@@ -1,5 +1,14 @@
 import React from "react";
-import { Paper } from "@material-ui/core";
+import {
+  createStyles,
+  makeStyles,
+  Paper,
+  AppBar,
+  Toolbar,
+  Typography,
+  Theme,
+} from "@material-ui/core";
+
 import Burns from "./Burns";
 import Overview from "./Overview";
 import DollarPoolChanges from "./DollarPoolChanges";
@@ -18,19 +27,66 @@ interface IProps {
   history: any;
 }
 
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: { backgroundColor: "#4038FF" },
+    title: { textAlign: "center" },
+    paper: { backgroundColor: "#4038FF", color: "#fff" },
+  })
+);
+
 const TokenStats = (props: IProps) => {
-  if (!props.tokenomics) return <Loading target="tokenomics" />;
+  const classes = useStyles();
   const { reports, tokenomics, council, mints, workers, validators } = props;
+  if (!tokenomics) return <Loading target="tokenomics" />;
   const { exchanges, extecutedBurnsAmount, totalIssuance } = tokenomics;
   const groups = groupsMinting(council, workers, validators);
 
   return (
-    <Paper className="d-flex flex-column flex-grow-1 p-2 px-3 m-auto">
-      <h1 className="m-3 text-center">Tokenomics</h1>
+    <Paper className={classes.paper}>
+      <AppBar className={classes.root} position="static">
+        <Toolbar>
+          <Typography variant="h4" className={classes.title}>
+            Tokenomics
+          </Typography>
+        </Toolbar>
+      </AppBar>
       <Overview groups={groups} tokenomics={tokenomics} />
+
+      <AppBar className={classes.root} position="static">
+        <Toolbar>
+          <Typography variant="h4" className={classes.title}>
+            Spending & Stake
+          </Typography>
+        </Toolbar>
+      </AppBar>
       <Spending groups={groups} price={tokenomics.price} />
+
+      <AppBar className={classes.root} position="static">
+        <Toolbar>
+          <Typography variant="h4" className={classes.title}>
+            Working Groups
+          </Typography>
+        </Toolbar>
+      </AppBar>
       <Groups mints={mints} workers={workers} price={tokenomics.price} />
+
+      <AppBar className={classes.root} position="static">
+        <Toolbar>
+          <Typography variant="h4" className={classes.title}>
+            Token Value
+          </Typography>
+        </Toolbar>
+      </AppBar>
       <TokenValue exchanges={exchanges} />
+
+      <AppBar className={classes.root} position="static">
+        <Toolbar>
+          <Typography variant="h6" className={classes.title}>
+            Burns & Top Ups
+          </Typography>
+        </Toolbar>
+      </AppBar>
       <Burns
         exchanges={exchanges}
         executed={extecutedBurnsAmount / 1000000}