outsource Mint config

src/components/Mint/index.tsx

@@ -3,6 +3,15 @@ import ValidatorRewards from "./ValidatorRewards";
 import Back from "../Back";
 import Loading from "../Loading";
 
+// TODO OPTIMIZE fetch live
+import {
+  getStart,
+  getEnd,
+  payoutInterval,
+  mintTags,
+  salaries,
+} from "./config.ts";
+
 interface IProps {
   mints: any[];
   tokenomics?: any;
@@ -11,32 +20,17 @@ interface IProps {
   history: any;
 }
 interface IState {
-  start: number;
-  end: number;
   role: string;
   salary: number;
   payout: number; // for validators
   [key: string]: number | string;
 }
 
-const round = 8;
-const start = 57601 + round * 201600;
-const end = 57601 + (round + 1) * 201600;
-
-const payoutInterval = 3600;
-const salaries: { [key: string]: number } = {
-  storageLead: 21000,
-  storageProvider: 10500,
-  curatorLead: 20678,
-  curator: 13500,
-  consul: 8571,
-};
-
 class Mint extends React.Component<IProps, IState> {
   constructor(props: IProps) {
     super(props);
 
-    this.state = { start, end, role: "", salary: 0 };
+    this.state = { role: "", salary: 0 };
     this.setRole = this.setRole.bind(this);
     this.handleChange = this.handleChange.bind(this);
   }
@@ -58,41 +52,41 @@ class Mint extends React.Component<IProps, IState> {
   }
 
   formatMint(mint: { capacity: number; total_minted: number }) {
-    if (!mint) return;
+    if (!mint) return `loading ..`;
     const { capacity, total_minted } = mint;
-    const fuel = (capacity / 1000000).toFixed(1);
-    const minted = (total_minted / 1000000).toFixed(1);
-    return `${fuel} M / ${minted} M tJOY`;
+    const current = (capacity / 1000000).toFixed(1);
+    const total = (total_minted / 1000000).toFixed(1);
+    return `${current} M of ${total} M tJOY`;
   }
 
   render() {
-    const { tokenomics, validators, payout, mints } = this.props;
+    const { status, tokenomics, validators, payout, mints } = this.props;
     if (!tokenomics) return <Loading target="tokenomics" />;
+    if (!status.council) return <Loading target="council round" />;
 
-    const { role, start, salary, end } = this.state;
+    const { round } = status.council;
+    const start = getStart(round);
+    const end = getEnd(round);
+
+    const { role, salary } = this.state;
     const { price } = tokenomics;
     const rate = Math.floor(+price * 100000000) / 100;
     const blocks = end - start;
 
     return (
       <div className="p-3 text-light">
-        <h2>Mint</h2>
+        <h2 className="mb-3">Mints</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>
+          {[2, 3, 4].map((m) => (
+            <div key={m} className="d-flex d-row p-1 m-1">
+              <div className="mint-label col-2">{mintTags[m]}</div>
+              <div>{this.formatMint(mints[m])}</div>
+            </div>
+          ))}
         </div>
 
+        <h3 className="my-3">Rewards</h3>
         <div className="form-group">
           <label>Token value</label>
           <input
@@ -136,9 +130,14 @@ class Mint extends React.Component<IProps, IState> {
         </div>
         <div className="form-group">
           <label>Role</label>
-          <select name="role" className="form-control" onChange={this.setRole}>
+          <select
+            name="role"
+            defaultValue={role}
+            className="form-control"
+            onChange={this.setRole}
+          >
             {Object.keys(salaries).map((r: string) => (
-              <option selected={role === r}>{r}</option>
+              <option key={r}>{r}</option>
             ))}
           </select>
         </div>