Tokenomics: Burns

src/components/Chart/index.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { OverlayTrigger, Tooltip } from "react-bootstrap";
 
 interface IProps {

src/components/Tokenomics/Burns.tsx

@@ -5,22 +5,22 @@ import { Exchange } from "../../types";
 
 const Burns = (props: {
   exchanges: Exchange[];
-  extecutedBurnsAmount: number;
+  executed: number;
+  percent: number;
 }) => {
-  if (!props.exchanges) return <div />;
+  const { exchanges, executed, percent } = props;
+  if (!exchanges) return <div />;
 
-  const data = props.exchanges.map((b) => {
+  const data = exchanges.map((b) => {
     return {
       time: b.logTime.split("T")[0],
       amount: Math.floor(b.amountUSD),
       status: b.status,
     };
   });
-  const executed = Math.floor(props.extecutedBurnsAmount / 100000) / 10;
-
+  const pctRounded = (100 * percent).toFixed(2);
   return (
     <div className="p-5">
-      <h2 className="m-3 text-center">Burns</h2>
       <Chart
         data={data}
         x="time"
@@ -33,10 +33,10 @@ const Burns = (props: {
           o.status === "PENDING" ? `bg-warning` : `bg-danger`
         }
       />
-      <div className="my-1 text-left">
-        Total Amount Burned: {executed} M JOY
+      <div className="my-1 ">
+        Total Amount Burned: {executed.toFixed(2)} M JOY ({pctRounded}%) -{" "}
+        <Link to={`/burners`}>Top Burners</Link>
       </div>
-      <Link to={`/burners`}>Top Burners</Link>
     </div>
   );
 };

src/components/Tokenomics/DollarPoolChanges/index.tsx

@@ -7,15 +7,15 @@ const DollarPoolChanges = (props: {
   dollarPoolChanges: DollarPoolChange[];
 }) => {
   return (
-    <div className="d-flex flex-column">
+    <div className="d-flex flex-column mx-5">
       <div className="d-flex flex-row font-weight-bold">
         <div className="col-1">Block</div>
-        <div className="col-2 text-right">Date</div>
-        <div className="col-1 text-right">Change ($)</div>
+        <div className="col-1 text-right">Date</div>
+        <div className="col-1 text-right">Change</div>
         <div className="col-3">Reason</div>
         <div className="col-1 text-right">FiatPool</div>
-        <div className="col-1 text-right">Rate ($/M)</div>
-        <div className="col-1 text-right">Issuance (M)</div>
+        <div className="col-1 text-right">Rate</div>
+        <div className="col-1 text-right">Issuance</div>
       </div>
 
       {props.dollarPoolChanges
@@ -39,13 +39,12 @@ const PoolChangeRow = (props: DollarPoolChange) => {
     valueAfter,
     rateAfter,
   } = props;
-  const color = change > 0 ? "text-success" : "text-danger";
   return (
-    <div className={`d-flex flex-row ${color}`}>
-      <a className="col-1 text-dark" href={`${domain}/#/explorer/query/${blockHeight}`}>
+    <div className={`py-1 d-flex flex-row bg-${change > 0 ? "success" : "danger"}`}>
+      <a className="col-1" href={`${domain}/#/explorer/query/${blockHeight}`}>
         #{blockHeight}
       </a>
-      <div className="col-2 text-right">{blockTime.split(`T`)[0]}</div>
+      <div className="col-1 text-right">{blockTime.split(`T`)[0]}</div>
       <div className="col-1 text-right">{change.toFixed(2)}</div>
       <div className="col-3">{reason}</div>
       <div className="col-1 text-right">{valueAfter.toFixed()}</div>

src/components/Tokenomics/index.tsx

@@ -21,7 +21,7 @@ interface IProps {
 const TokenStats = (props: IProps) => {
   if (!props.tokenomics) return <Loading target="tokenomics" />;
   const { reports, tokenomics, council, mints, workers, validators } = props;
-  const { dollarPoolChanges, exchanges, extecutedBurnsAmount } = tokenomics;
+  const { exchanges, extecutedBurnsAmount, totalIssuance } = tokenomics;
   const groups = groupsMinting(council, workers, validators);
 
   return (
@@ -30,13 +30,13 @@ const TokenStats = (props: IProps) => {
       <Overview groups={groups} tokenomics={tokenomics} />
       <Spending groups={groups} price={tokenomics.price} />
       <Groups mints={mints} workers={workers} price={tokenomics.price} />
+      <TokenValue exchanges={exchanges} />
       <Burns
         exchanges={exchanges}
-        extecutedBurnsAmount={extecutedBurnsAmount}
+        executed={extecutedBurnsAmount / 1000000}
+        percent={extecutedBurnsAmount / (totalIssuance + extecutedBurnsAmount)}
       />
-      <TokenValue exchanges={exchanges} />
-      <DollarPoolChanges dollarPoolChanges={dollarPoolChanges} />
-      <ReportBrowser reports={reports} />
+      <DollarPoolChanges dollarPoolChanges={tokenomics.dollarPoolChanges} />
     </Paper>
   );
 };