Separate Stats component

backend/src/routes/livepeer.js

@@ -37,12 +37,22 @@ let arbGet = 0;
 const redeemRewardGwei = 1053687;
 const claimTicketGwei = 1333043;
 const withdrawFeeGwei = 688913;
+// 50000 gas for approval when creating a new O
+const stakeFeeGwei = 680000;
+const commissionFeeGwei = 140000;
+const serviceUriFee = 51000;
 let redeemRewardCostL1 = 0;
 let redeemRewardCostL2 = 0;
 let claimTicketCostL1 = 0;
 let claimTicketCostL2 = 0;
 let withdrawFeeCostL1 = 0;
 let withdrawFeeCostL2 = 0;
+let stakeFeeCostL1 = 0;
+let stakeFeeCostL2 = 0;
+let commissionFeeCostL1 = 0;
+let commissionFeeCostL2 = 0;
+let serviceUriFeeCostL1 = 0;
+let serviceUriFeeCostL2 = 0;
 
 // Update O info from thegraph every 1 minute
 const timeoutTheGraph = 60000;
@@ -66,6 +76,7 @@ var BondingManagerProxyListener = contractInstance.events.allEvents(async (error
       throw error
     }
     console.log('New event emitted on', BondingManagerProxyAddr);
+    console.log(event);
     // Push obj of event to cache and create a new entry for it in the DB
     const eventObj = {
       address: event.address,
@@ -105,6 +116,16 @@ const parseCmc = async function () {
   }
 }
 
+
+
+
+
+
+
+
+
+
+
 // Queries Alchemy for block info and fees
 const parseL1Blockchain = async function () {
   const l1Wei = await web3layer1.eth.getGasPrice();
@@ -113,6 +134,9 @@ const parseL1Blockchain = async function () {
   redeemRewardCostL1 = (redeemRewardGwei * l1Gwei) / 1000000000;
   claimTicketCostL1 = (claimTicketGwei * l1Gwei) / 1000000000;
   withdrawFeeCostL1 = (withdrawFeeGwei * l1Gwei) / 1000000000;
+  stakeFeeCostL1 = (stakeFeeGwei * l1Gwei) / 1000000000;
+  commissionFeeCostL1 = (commissionFeeGwei * l1Gwei) / 1000000000;
+  serviceUriFeeCostL1 = (serviceUriFee * l1Gwei) / 1000000000;
 }
 const parseL2Blockchain = async function () {
   const l2Wei = await web3layer2.eth.getGasPrice();
@@ -121,6 +145,9 @@ const parseL2Blockchain = async function () {
   redeemRewardCostL2 = (redeemRewardGwei * l2Gwei) / 1000000000;
   claimTicketCostL2 = (claimTicketGwei * l2Gwei) / 1000000000;
   withdrawFeeCostL2 = (withdrawFeeGwei * l2Gwei) / 1000000000;
+  stakeFeeCostL2 = (stakeFeeGwei * l2Gwei) / 1000000000;
+  commissionFeeCostL2 = (commissionFeeGwei * l2Gwei) / 1000000000;
+  serviceUriFeeCostL2 = (serviceUriFee * l2Gwei) / 1000000000;
 }
 const parseEthBlockchain = async function () {
   await Promise.all([parseL1Blockchain(), parseL2Blockchain()]);
@@ -154,6 +181,12 @@ apiRouter.get("/grafana", async (req, res) => {
       claimTicketCostL2,
       withdrawFeeCostL1,
       withdrawFeeCostL2,
+      stakeFeeCostL1,
+      stakeFeeCostL2,
+      commissionFeeCostL1,
+      commissionFeeCostL2,
+      serviceUriFeeCostL1,
+      serviceUriFeeCostL2,
       quotes: cmcQuotes
     });
   } catch (err) {
@@ -195,7 +228,13 @@ apiRouter.get("/blockchains", async (req, res) => {
       claimTicketCostL1,
       claimTicketCostL2,
       withdrawFeeCostL1,
-      withdrawFeeCostL2
+      withdrawFeeCostL2,
+      stakeFeeCostL1,
+      stakeFeeCostL2,
+      commissionFeeCostL1,
+      commissionFeeCostL2,
+      serviceUriFeeCostL1,
+      serviceUriFeeCostL2,
     });
   } catch (err) {
     res.status(400).send(err);

src/livepeer.js

@@ -9,6 +9,7 @@ import {
 } from "./actions/livepeer";
 import EventViewer from "./eventViewer";
 import Orchestrator from "./orchestratorViewer";
+import Stat from "./statViewer";
 
 const mapStateToProps = (state) => {
   return {
@@ -74,6 +75,12 @@ class Livepeer extends React.Component {
     let claimTicketCostL2 = 0;
     let withdrawFeeCostL1 = 0;
     let withdrawFeeCostL2 = 0;
+    let stakeFeeCostL1 = 0;
+    let stakeFeeCostL2 = 0;
+    let commissionFeeCostL1 = 0;
+    let commissionFeeCostL2 = 0;
+    let serviceUriFeeCostL1 = 0;
+    let serviceUriFeeCostL2 = 0;
     if (this.props.livepeer.blockchains) {
       blockchainTime = this.props.livepeer.blockchains.timestamp;
       l1GasFeeInGwei = this.props.livepeer.blockchains.l1GasFeeInGwei;
@@ -86,14 +93,26 @@ class Livepeer extends React.Component {
       withdrawFeeCostL2 = this.props.livepeer.blockchains.withdrawFeeCostL2;
       l1Block = this.props.livepeer.blockchains.l1block;
       l2Block = this.props.livepeer.blockchains.l2block;
+      stakeFeeCostL1 = this.props.livepeer.blockchains.stakeFeeCostL1;
+      stakeFeeCostL2 = this.props.livepeer.blockchains.stakeFeeCostL2;
+      commissionFeeCostL1 = this.props.livepeer.blockchains.commissionFeeCostL1;
+      commissionFeeCostL2 = this.props.livepeer.blockchains.commissionFeeCostL2;
+      serviceUriFeeCostL1 = this.props.livepeer.blockchains.serviceUriFeeCostL1;
+      serviceUriFeeCostL2 = this.props.livepeer.blockchains.serviceUriFeeCostL2;
     }
 
-    let redeemRewardCostL1USD;
+    let redeemRewardCostL1USD = 0;
-    let redeemRewardCostL2USD;
+    let redeemRewardCostL2USD = 0;
-    let claimTicketCostL1USD;
+    let claimTicketCostL1USD = 0;
-    let claimTicketCostL2USD;
+    let claimTicketCostL2USD = 0;
-    let withdrawFeeCostL1USD;
+    let withdrawFeeCostL1USD = 0;
-    let withdrawFeeCostL2USD;
+    let withdrawFeeCostL2USD = 0;
+    let stakeFeeCostL1USD = 0;
+    let stakeFeeCostL2USD = 0;
+    let commissionFeeCostL1USD = 0;
+    let commissionFeeCostL2USD = 0;
+    let serviceUriFeeCostL1USD = 0;
+    let serviceUriFeeCostL2USD = 0;
     if (l1GasFeeInGwei && ethPrice) {
       if (redeemRewardCostL1) {
         redeemRewardCostL1USD = (redeemRewardCostL1 * ethPrice).toFixed(2);
@@ -104,6 +123,15 @@ class Livepeer extends React.Component {
       if (withdrawFeeCostL1) {
         withdrawFeeCostL1USD = (withdrawFeeCostL1 * ethPrice).toFixed(2);
       }
+      if (stakeFeeCostL1) {
+        stakeFeeCostL1USD = (stakeFeeCostL1 * ethPrice).toFixed(2);
+      }
+      if (commissionFeeCostL1) {
+        commissionFeeCostL1USD = (commissionFeeCostL1 * ethPrice).toFixed(2);
+      }
+      if (serviceUriFeeCostL1) {
+        serviceUriFeeCostL1USD = (serviceUriFeeCostL1 * ethPrice).toFixed(2);
+      }
     }
     if (l2GasFeeInGwei && ethPrice) {
       if (redeemRewardCostL2) {
@@ -115,6 +143,15 @@ class Livepeer extends React.Component {
       if (withdrawFeeCostL2) {
         withdrawFeeCostL2USD = (withdrawFeeCostL2 * ethPrice).toFixed(2);
       }
+      if (stakeFeeCostL2) {
+        stakeFeeCostL2USD = (stakeFeeCostL2 * ethPrice).toFixed(2);
+      }
+      if (commissionFeeCostL2) {
+        commissionFeeCostL2USD = (commissionFeeCostL2 * ethPrice).toFixed(2);
+      }
+      if (serviceUriFeeCostL2) {
+        serviceUriFeeCostL2USD = (serviceUriFeeCostL2 * ethPrice).toFixed(2);
+      }
     }
 
     let eventsList = [];
@@ -135,24 +172,19 @@ class Livepeer extends React.Component {
           }}>
             <img alt="" src="livepeer.png" width="100em" height="100em" />
           </button>
-          <div className="row" style={{ alignItems: 'stretch', height: '100%', flex: 2 }}>
+          <div className="row" style={{ alignItems: 'stretch', height: '100%', flex: 2, padding: '1em' }}>
             <Orchestrator thisOrchestrator={thisOrchObj} />
           </div>
-          <div className="row metaSidebar" style={{ padding: 0, flex: 1 }}>
+          <div className="stroke metaSidebar" style={{ padding: 0, flex: 1 }}>
+            <div className="row" style={{ margin: 0, padding: 0 }}>
+              <h3 style={{ margin: 0, padding: 0 }}>Smart contract prices</h3>
+            </div>
             <div className="stroke" style={{ margin: 0, padding: 0 }}>
-              <h3>Smart contract prices</h3>
+              <Stat header={"Reward Call"} content={"$" + redeemRewardCostL2USD + " (vs " + redeemRewardCostL1USD + " on L1)"} />
-              <div className="row">
+              <Stat header={"Claim Ticket"} content={"$" + claimTicketCostL2USD + " (vs " + claimTicketCostL1USD + " on L1)"} />
-                <p>Reward Call:</p>
+              <Stat header={"Staking Fees"} content={"$" + stakeFeeCostL2USD + " (vs " + stakeFeeCostL1USD + " on L1)"} />
-                <p>${redeemRewardCostL2USD} (vs ${redeemRewardCostL1USD} on L1)</p>
+              <Stat header={"Change Commission"} content={"$" + commissionFeeCostL2USD + " (vs " + commissionFeeCostL1USD + " on L1)"} />
-              </div>
+              <Stat header={"Change URI"} content={"$" + serviceUriFeeCostL2USD + " (vs " + serviceUriFeeCostL1USD + " on L1)"} />
-              <div className="row">
-                <p>Claim Ticket:</p>
-                <p>${claimTicketCostL2USD} (vs ${claimTicketCostL1USD} on L1)</p>
-              </div>
-              <div className="row">
-                <p>Withdraw Fees:</p>
-                <p>${withdrawFeeCostL2USD} (vs ${withdrawFeeCostL1USD} on L1)</p>
-              </div>
             </div>
           </div>
         </div >

src/orchestratorViewer.js

@@ -1,5 +1,6 @@
 import React from "react";
 import ScrollContainer from "react-indiana-drag-scroll";
+import Stat from "./statViewer";
 
 const Orchestrator = (obj) => {
   let rewardCut = 0;
@@ -40,28 +41,18 @@ const Orchestrator = (obj) => {
     return (
       <div className="hostInfo">
         <div className="strokeSmollLeft" style={{ display: "flex" }}>
-          <div style={{ flexDirection: 'row', flex: 1, display: "flex" }}>
+          <div style={{ flexDirection: 'row', display: "flex" }}>
             <a href={thisUrl}>
               <img alt="" src="livepeer.png" width="30" height="30" />
               <h3 style={{ padding: 0, margin: 0 }}>Orchestrator Info</h3>
               {thisID}
             </a>
           </div>
-          <div className="rowAlignLeft">
+          <Stat header={"Earned Fees"} content={totalVolumeETH + " Eth ($" + totalVolumeUSD + ")"} />
-            <p>Earned fees {totalVolumeETH} Eth (${totalVolumeUSD})</p>
+          <Stat header={"Reward Cut"} content={rewardCut + "%"} />
-          </div>
+          <Stat header={"Fee Cut"} content={feeCut + "%"} />
-          <div className="rowAlignLeft">
+          <Stat header={"Total Stake"} content={totalStake + " LPT"} />
-            <p>Reward Cut {rewardCut}%</p>
+          <Stat header={"Self Stake"} content={selfStake + " LPT(" + selfStakeRatio + ")%"} />
-          </div>
-          <div className="rowAlignLeft">
-            <p>Fee Cut {feeCut}%</p>
-          </div>
-          <div className="rowAlignLeft">
-            <p>Total Stake {totalStake} LPT</p>
-          </div>
-          <div className="rowAlignLeft">
-            <p>Self stake {selfStake} LPT ({selfStakeRatio}%)</p>
-          </div>
         </div>
         <div className="strokeSmollLeft" style={{ alignItems: 'stretch', flex: 2, marginLeft: '1em', borderLeft: '3px solid rgba(15,15,15,0.05)' }}>
           <div className="content-wrapper">

src/statViewer.js

@@ -0,0 +1,17 @@
+import React from "react";
+
+const Stat = (obj) => {
+  console.log(obj);
+  return (
+    <div className="strokeSmollLeft" style={{margin: 0, padding: 0}}>
+      <div className="rowAlignLeft" style={{margin: 0, padding: 0}}>
+        <h4 style={{margin: 0, padding: 0}}>{obj.header}</h4>
+      </div>
+      <div className="rowAlignLeft" style={{margin: 0, marginLeft: '1em', padding: 0}}>
+        <p style={{margin: 0, padding: 0}}>{obj.content}</p>
+      </div>
+    </div>
+  )
+}
+
+export default Stat;

src/style.css

@@ -194,8 +194,9 @@ svg {
 .hostInfo {
   cursor: default;
   text-align: start;
-  padding: 10px;
+  padding: 0;
-  margin: 10px;
+  padding-left: 1em;
+  margin: 0;
   user-select: text;
   font-size: small;
   color: rgba(15, 15, 15, 0.8750);