Tokenomics: DollarPoolChanges

src/App.tsx

@@ -317,12 +317,12 @@ class App extends React.Component<IProps, IState> {
   }
 
   async fetchTokenomics() {
+    const now = new Date();
+    if (this.state.tokenomics?.timestamp + 300000 > now) return;
     console.debug(`Updating tokenomics`);
-    const { data } = await axios.get(
-      "https://joystreamstats.live/static/status.json"
-    );
-    //const { data } = await axios.get("https://status.joystream.org/status");
+    let { data } = await axios.get("https://status.joystream.org/status");
     if (!data || data.error) return;
+    data.timestamp = now;
     this.save("tokenomics", data);
   }
 
@@ -545,20 +545,20 @@ class App extends React.Component<IProps, IState> {
     );
   }
 
-  fetchFromApi() {
-    this.fetchProposals();
-    this.updateForum();
-    this.fetchMembers();
-    this.fetchCouncils();
+  async fetchFromApi() {
+    await this.fetchProposals();
+    await this.updateForum();
+    await this.fetchMembers();
+    await this.fetchCouncils();
+    await this.fetchStorageProviders();
+    await this.fetchAssets();
+    await this.fetchFAQ();
   }
 
   componentDidMount() {
     this.loadData();
-    this.connectEndpoint();
     this.fetchFromApi();
-    this.fetchStorageProviders();
-    this.fetchAssets();
-    this.fetchFAQ();
+    this.connectEndpoint();
     setTimeout(() => this.fetchTokenomics(), 30000);
     //this.initializeSocket();
   }

src/components/Tokenomics/Burns.tsx

@@ -18,8 +18,8 @@ const Burns = (props: {
   const executed = Math.floor(props.extecutedBurnsAmount / 100000) / 10;
 
   return (
-    <div className="box">
-      <h3 className="text-light">Burns</h3>
+    <div className="p-5">
+      <h3 >Burns</h3>
       <Chart
         data={data}
         x="time"

src/components/Tokenomics/DollarPoolChanges/DataGrid.tsx

@@ -0,0 +1,31 @@
+import React, { useState } from "react";
+import { DataGrid, GridColumns } from "@material-ui/data-grid";
+
+const columns = [
+  { field: "blockHeight", headerName: "Block", width: 150, sortable: true },
+  { field: "blockTime", headerName: "Date", width: 250, sortable: true },
+  { field: "change", headerName: "Change", width: 150, sortable: true },
+  { field: "reason", headerName: "Reason", width: 400, sortable: true },
+  { field: "valueAfter", headerName: "Pool", width: 150, sortable: true },
+  { field: "rateAfter", headerName: "Price", width: 150, sortable: true },
+  { field: "issuance", headerName: "Issuance", width: 150, sortable: true },
+];
+
+const DollarPoolGrid = (props: { dollarPoolChanges: DollarPoolChange[] }) => {
+  const { dollarPoolChanges } = props;
+  const [page, setPage] = useState(1);
+  if (!dollarPoolChanges.length) return <div />;
+
+  return (
+    <div style={{ height: 800, position: "relative" }}>
+      <DataGrid
+        rows={dollarPoolChanges}
+        columns={(columns as unknown) as GridColumns}
+        rowCount={dollarPoolChanges.length}
+        disableSelectionOnClick
+      />
+    </div>
+  );
+};
+
+export default DollarPoolGrid;

src/components/Tokenomics/DollarPoolChanges/index.tsx

@@ -0,0 +1,68 @@
+import React, { useState } from "react";
+import { domain } from "../../../config";
+import { DollarPoolChange } from "../../../types";
+
+const DollarPoolChanges = (props: {
+  dollarPoolChanges: DollarPoolChange[];
+}) => {
+  const { dollarPoolChanges } = props;
+
+  const [changes] = useState(
+    dollarPoolChanges.map((c, id: number) => {
+      c.id = id;
+      return c;
+    })
+  );
+
+  return (
+    <div className="d-flex flex-column">
+      <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-3">Reason</div>
+        <div className="col-1 text-right">Dollar Pool</div>
+        <div className="col-1 text-right">Rate</div>
+        <div className="col-1 text-right">Issuance</div>
+      </div>
+
+      {changes
+        .sort((a, b) => b.issuance - a.issuance)
+        .map((c, i: number) => (
+          <PoolChangeRow key={i} {...c} />
+        ))}
+    </div>
+  );
+};
+
+export default DollarPoolChanges;
+
+const PoolChangeRow = (props: DollarPoolChange) => {
+  const {
+    blockHeight,
+    blockTime,
+    change,
+    reason,
+    issuance,
+    valueAfter,
+    rateAfter,
+  } = props;
+  const color = change > 0 ? "text-success" : "text-danger";
+  return (
+    <div className={`d-flex flex-row ${color}`}>
+      <a className="col-1" href={`${domain}/#/explorer/query/${blockHeight}`}>
+        #{blockHeight}
+      </a>
+      <div className="col-2 text-right">{blockTime}</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>
+      <div className="col-1 text-right">
+        {(rateAfter * 1000000).toFixed(1)} $ / M
+      </div>
+      <div className="col-1 text-right">
+        {(issuance / 1000000).toFixed(1)} M
+      </div>
+    </div>
+  );
+};

src/components/Tokenomics/ReportBrowser.tsx

@@ -25,6 +25,7 @@ class ReportBrowser extends React.Component<IProps, IState> {
     const { selected } = this.state;
     const { reports } = this.props;
     const options = Object.keys(reports).sort();
+    if (!options.length) return <div />;
 
     return (
       <div className="h-100 d-flex flex-column">

src/components/Tokenomics/index.tsx

@@ -1,9 +1,11 @@
-import React from "react";
+import React, { useState } from "react";
+import { Paper } from "@material-ui/core";
 import Burns from "./Burns";
 import Overview from "./Overview";
+import DollarPoolChanges from "./DollarPoolChanges";
 import ReportBrowser from "./ReportBrowser";
+import TokenValue from "./TokenValue";
 import Loading from "../Loading";
-import Chart from "../Chart";
 
 import { Tokenomics } from "../../types";
 
@@ -13,53 +15,24 @@ interface IProps {
   history: any;
 }
 
-const CouncilReports = (props: IProps) => {
+const TokenStats = (props: IProps) => {
   const { reports, tokenomics } = props;
   if (!tokenomics) return <Loading target="tokenomics" />;
-  const { exchanges, extecutedBurnsAmount } = tokenomics;
-
-  const tokenValue = {};
-  exchanges
-    .filter((e) => e.date)
-    .forEach((e) => {
-      const date = e.date.split("T")[0];
-      tokenValue[date] = { date, price: (e.price * 1000000).toFixed(1) };
-    });
+  const { dollarPoolChanges, exchanges, extecutedBurnsAmount } = tokenomics;
 
   return (
-    <div className="h-100 py-3 d-flex flex-row justify-content-center pb-5">
-      <div className="d-flex flex-column text-right  align-items-right">
-        <div className="box">
-          <h3>Tokenomics</h3>
-          {tokenomics ? <Overview {...tokenomics} /> : <Loading />}
-        </div>
-
-        <Burns
-          exchanges={exchanges}
-          extecutedBurnsAmount={extecutedBurnsAmount}
-        />
-
-        <div className="box">
-          <h3>Token Value</h3>
-
-          <Chart
-            data={Object.values(tokenValue).sort((a, b) => a.date - b.date)}
-            x="date"
-            y="price"
-            xLabel="Date"
-            yLabel="$"
-            scaleY={true}
-            pixels={600}
-            barStyle={() => `bg-warning`}
-          />
-        </div>
-      </div>
-
-      <div className="box col-8">
-        <ReportBrowser reports={reports} />
-      </div>
-    </div>
+    <Paper className="d-flex flex-column flex-grow-1 p-2">
+      <h2>Tokenomics</h2>
+      <Overview {...tokenomics} />
+      <Burns
+        exchanges={exchanges}
+        extecutedBurnsAmount={extecutedBurnsAmount}
+      />
+      <TokenValue exchanges={exchanges} />
+      <DollarPoolChanges dollarPoolChanges={dollarPoolChanges} />
+      <ReportBrowser reports={reports} />
+    </Paper>
   );
 };
 
-export default CouncilReports;
+export default TokenStats;

src/types.ts

@@ -271,7 +271,18 @@ export interface ProviderStatus {
   [propName: string]: boolean;
 }
 
+export interface DollarPoolChange {
+  blockheight: number;
+  blockTime: string;
+  change: number;
+  reason: string;
+  issuance: number;
+  valueAfter: number;
+  rateAfter: number;
+}
+
 export interface Tokenomics {
+  dollarPoolChanges: DollarPoolChange[];
   price: string;
   totalIssuance: string;
   validators: { total_stake: string };