Tools: tables for validator rewards

src/components/Dashboard/index.tsx

@@ -13,8 +13,6 @@ const Dashboard = (props: IState) => {
         <Link to="/mint">Tools</Link>
       </div>
 
-      <Channels channels={props.channels} />
-
       <div className="title">
         <h1>
           <a href={domain}>Joystream</a>

src/components/Mint/ValidatorRewards.tsx

@@ -0,0 +1,112 @@
+import React from "react";
+import { Table } from "react-bootstrap";
+
+const ValidatorRewards = (props: {
+  handleChange: (e: any) => void;
+  validators: number;
+  payout: number;
+  price: number;
+}) => {
+  const { validators, payout, price } = props;
+  return (
+    <div>
+      <h2 className="mt-5 text-center">Validator Rewards</h2>
+      <label>Payment / h</label>
+      <input
+        className="form-control col-4"
+        onChange={props.handleChange}
+        name="payout"
+        type="number"
+        value={payout}
+      />
+      <h3 className="mt-3">Reward for increasing Validator counts</h3>
+      <Table className="bg-light">
+        <Thead />
+        <tbody>
+          {[validators, 45, 100, 200, 300, 500].map((count) => (
+            <ValidatorRow
+              key={`vcount-${count}`}
+              price={price}
+              payout={payout}
+              count={count}
+            />
+          ))}
+        </tbody>
+      </Table>
+      <h3 className="mt-2">Increased Payments for stable Validator rewards</h3>
+      <Table className="bg-light">
+        <Thead />
+        <tbody>
+          {[validators, 45, 100, 200, 300, 500].map((count) => (
+            <ValidatorRow
+              key={`vcount-${count}`}
+              price={price}
+              payout={(payout / validators) * count}
+              count={count}
+            />
+          ))}
+        </tbody>
+      </Table>
+    </div>
+  );
+};
+
+const Thead = () => {
+  return (
+    <thead>
+      <tr>
+        <th></th>
+        <th colSpan={6}>Costs</th>
+        <th colSpan={8}>Reward per Validator</th>
+      </tr>
+      <tr>
+        <th>Validator Count</th>
+        <th>tJOY/h</th>
+        <th>$/h</th>
+        <th>$/d</th>
+        <th>tJOY/w</th>
+        <th>$/w</th>
+        <th>$/m</th>
+        <th>tJOY/h</th>
+        <th>$/h</th>
+        <th>tJOY/d</th>
+        <th>$/d</th>
+        <th>tJOY/w</th>
+        <th>$/w</th>
+        <th>tJOY/m</th>
+        <th>$/m</th>
+      </tr>
+    </thead>
+  );
+};
+
+const ValidatorRow = (props: {
+  count: number;
+  price: number;
+  payout: number;
+}) => {
+  const { count, price, payout } = props;
+  return (
+    <tr>
+      <td>{count}</td>
+
+      <td>{payout.toFixed()}</td>
+      <td>{(price * payout).toFixed(1)}</td>
+      <td>{(24 * price * payout).toFixed(1)}</td>
+      <td>{(24 * 7 * payout).toFixed()}</td>
+      <td>{(24 * 7 * price * payout).toFixed()}</td>
+      <td>{(24 * 7 * 4 * price * payout).toFixed()}</td>
+
+      <td>{(payout / count).toFixed()}</td>
+      <td>{((price * payout) / count).toFixed(2)}</td>
+      <td>{((24 * payout) / count).toFixed()}</td>
+      <td>{((price * 24 * payout) / count).toFixed(2)}</td>
+      <td>{((24 * 7 * payout) / count).toFixed()}</td>
+      <td>{((price * 24 * 7 * payout) / count).toFixed(2)}</td>
+      <td>{((24 * 7 * 4 * payout) / count).toFixed()}</td>
+      <td>{((price * 24 * 7 * 4 * payout) / count).toFixed(2)}</td>
+    </tr>
+  );
+};
+
+export default ValidatorRewards;

src/components/Mint/index.tsx

@@ -1,9 +1,12 @@
 import React from "react";
+import ValidatorRewards from "./ValidatorRewards";
 import Back from "../Back";
 import Loading from "../Loading";
 
 interface IProps {
   tokenomics?: any;
+  validators: string[];
+  lastReward: number;
 }
 interface IState {
   [key: string]: number;
@@ -17,10 +20,14 @@ class Mint extends React.Component<IProps, IState> {
   constructor(props: IProps) {
     super(props);
 
-    this.state = { start, end, reward: 10, role: 0 };
+    this.state = { start, end, reward: 10, role: 0, payout: 0 };
     this.handleChange = this.handleChange.bind(this);
   }
 
+  componentDidMount() {
+    this.setState({ payout: this.props.lastReward });
+  }
+
   handleChange(e: {
     preventDefault: () => void;
     target: { name: string; value: string };
@@ -33,6 +40,7 @@ class Mint extends React.Component<IProps, IState> {
   render() {
     const { tokenomics } = this.props;
     if (!tokenomics) return <Loading />;
+    const { payout } = this.state;
 
     const { price } = tokenomics;
     const rate = Math.floor(+price * 100000000) / 100;
@@ -148,6 +156,13 @@ class Mint extends React.Component<IProps, IState> {
           />
         </div>
 
+        <ValidatorRewards
+          handleChange={this.handleChange}
+          validators={this.props.validators.length}
+          payout={payout}
+          price={this.props.tokenomics ? this.props.tokenomics.price : 0}
+        />
+
         <Back />
       </div>
     );