show working group mints on `/mint`

src/App.tsx

@@ -41,6 +41,7 @@ const initialState = {
   blocks: [],
   nominators: [],
   validators: [],
+  mints: {},
   channels: [],
   posts: [],
   councils: [],
@@ -79,6 +80,7 @@ class App extends React.Component<IProps, IState> {
     api.rpc.chain.subscribeNewHeads((head: Header) =>
       this.handleBlock(api, head)
     );
+    this.fetchMints(api, [2, 3, 4]);
     this.updateStatus(api);
 
     let { status } = this.state;
@@ -87,6 +89,17 @@ class App extends React.Component<IProps, IState> {
     this.save("status", status);
   }
 
+  async fetchMints(api: Api, ids: number[]) {
+    console.debug(`Fetching mints`);
+    let mints = {};
+
+    ids.map(
+      async (id) => (mints[id] = (await api.query.minting.mints(id)).toJSON())
+    );
+
+    this.save(`mints`, mints);
+  }
+
   async fetchAssets() {
     const url = "https://hydra.joystream.org/graphql";
     const request = {
@@ -696,7 +709,7 @@ class App extends React.Component<IProps, IState> {
       else this.setState({ status });
     console.debug(`Loading data`);
     this.loadMembers();
-    "councils categories channels proposals posts threads handles tokenomics reports validators nominators stakes stars"
+    "councils categories channels proposals posts threads handles mints tokenomics reports validators nominators stakes stars"
       .split(" ")
       .map((key) => this.load(key));
   }

src/components/Mint/index.tsx

@@ -4,6 +4,7 @@ import Back from "../Back";
 import Loading from "../Loading";
 
 interface IProps {
+  mints: any[];
   tokenomics?: any;
   validators: string[];
   lastReward: number;
@@ -56,9 +57,17 @@ class Mint extends React.Component<IProps, IState> {
     this.setState({ [e.target.name]: parseInt(e.target.value) });
   }
 
+  formatMint(mint: { capacity: number; total_minted: number }) {
+    if (!mint) return;
+    const { capacity, total_minted } = mint;
+    const fuel = (capacity / 1000000).toFixed(1);
+    const minted = (total_minted / 1000000).toFixed(1);
+    return `${fuel} M / ${minted} M tJOY`;
+  }
+
   render() {
-    const { tokenomics, validators, payout } = this.props;
-    if (!tokenomics) return <Loading />;
+    const { tokenomics, validators, payout, mints } = this.props;
+    if (!tokenomics) return <Loading target="tokenomics" />;
 
     const { role, start, salary, end } = this.state;
     const { price } = tokenomics;
@@ -68,6 +77,22 @@ class Mint extends React.Component<IProps, IState> {
     return (
       <div className="p-3 text-light">
         <h2>Mint</h2>
+
+        <div>
+          <div className="d-flex d-row p-1 m-1">
+            <div className="mint-label">Storage</div>
+            <div> {this.formatMint(mints[2])}</div>
+          </div>
+          <div className="d-flex d-row p-1 m-1">
+            <div className="mint-label">Curation</div>
+            <div> {this.formatMint(mints[3])}</div>
+          </div>
+          <div className="d-flex d-row p-1 m-1">
+            <div className="mint-label">Operations</div>
+            <div> {this.formatMint(mints[4])}</div>
+          </div>
+        </div>
+
         <div className="form-group">
           <label>Token value</label>
           <input

src/index.css

@@ -75,6 +75,10 @@ table td {
   min-width: 75px;
 }
 
+.mint-label {
+  min-width: 75px;
+}
+
 /* calendar */
 
 .rct-sidebar-row {

src/types.ts

@@ -58,6 +58,7 @@ export interface IState {
   proposalPosts: any[];
   handles: Handles;
   members: Member[];
+  mints: any[];
   tokenomics?: Tokenomics;
   reports: { [key: string]: string };
   [key: string]: any;