MVP getting O info using livepeer subgraph api

backend/src/routes/livepeer.js

@@ -70,8 +70,6 @@ const orchQuery = gql`
         }
         rewardCut
         feeShare
-        pricePerSegment
-        pendingPricePerSegment
         pendingFeeShare
         pendingRewardCut
         totalStake

src/actions/livepeer.js

@@ -4,6 +4,7 @@ import { receiveErrors } from "./error";
 export const RECEIVE_QUOTES = "RECEIVE_QUOTES";
 export const RECEIVE_BLOCKCHAIN_DATA = "RECEIVE_BLOCKCHAIN_DATA";
 export const RECEIVE_EVENTS = "RECEIVE_EVENTS";
+export const RECEIVE_ORCHESTRATOR = "RECEIVE_ORCHESTRATOR";
 
 const setQuotes = message => ({
   type: RECEIVE_QUOTES, message
@@ -14,6 +15,9 @@ const setBlockchainData = message => ({
 const setEvents = message => ({
   type: RECEIVE_EVENTS, message
 });
+const setCurrentOrchestratorInfo = message => ({
+  type: RECEIVE_ORCHESTRATOR, message
+});
 
 export const getQuotes = () => async dispatch => {
   const response = await apiUtil.getQuotes();
@@ -41,3 +45,12 @@ export const getEvents = () => async dispatch => {
   }
   return dispatch(receiveErrors(data));
 };
+
+export const getCurrentOrchestratorInfo = () => async dispatch => {
+  const response = await apiUtil.getCurrentOrchestratorInfo();
+  const data = await response.json();
+  if (response.ok) {
+    return dispatch(setCurrentOrchestratorInfo(data));
+  }
+  return dispatch(receiveErrors(data));
+};

src/eventButton.js

@@ -36,7 +36,7 @@ const EventButton = (obj) => {
     </div>
   } else if (obj.name == "TranscoderUpdate") {
     eventSpecificInfo = <div className="row" style={{ backgroundColor: 'rgba(215, 15, 0, 0.3)' }}>
-      <p>O {obj.data.transcoder} changed their rewardCut to {(obj.data.rewardCut / 10000).toFixed(2)} and their feeCut to {(100 - (obj.data.feeShare / 10000)).toFixed(2)}</p>
+      <p>O {obj.data.transcoder} changed their rewardCut to {(obj.data.rewardCut / 10000).toFixed(2)}% and their feeCut to {(100 - (obj.data.feeShare / 10000)).toFixed(2)}%</p>
     </div>
   } else if (obj.name == "TranscoderActivated") {
     eventSpecificInfo = <div className="row" style={{ backgroundColor: 'rgba(0, 255, 1, 0.3)' }}>

src/grafana.js

@@ -1,71 +1,179 @@
-import React, { useEffect, useState } from "react";
+import * as React from "react";
 import './style.css';
 import {
-  Navigate, useParams
+  Navigate
 } from "react-router-dom";
+import { connect } from "react-redux";
+import {
+  getQuotes, getCurrentOrchestratorInfo
+} from "./actions/livepeer";
 
-const Grafana = () => {
+const mapStateToProps = (state) => {
-  let params = useParams();
+  return {
-  const [redirectToHome, setRedirectToHome] = useState(false);
+    session: state.session,
-
+    userstate: state.userstate,
-  useEffect(() => {
+    errors: state.errors,
-
+    livepeer: state.livepeerstate
-  }, [])
-
-  if (redirectToHome) {
-    return <Navigate push to="/" />;
   }
-  return (
+};
-    <div className="stroke" style={{ margin: 0, padding: 0 }}>
+
-      <div className="row" style={{ margin: 0, padding: 0 }}>
+const mapDispatchToProps = dispatch => ({
-        <button className="homeButton" onClick={() => {
+  getQuotes: () => dispatch(getQuotes()),
-          setRedirectToHome(true);
+  getCurrentOrchestratorInfo: () => dispatch(getCurrentOrchestratorInfo())
-        }}>
+});
-          <img alt="" src="/livepeer.png" width="100em" height="100em" />
+
-        </button>
+class Grafana extends React.Component {
-      </div>
+  state = {
+    redirectToHome: false,
+  };
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    if (this.state.redirectToHome) {
+      return <Navigate push to="/" />;
+    }
+
+    let lptPrice = 0;
+    let ethPrice = 0;
+    let lptPriceChange24h = 0;
+    let ethPriceChange24h = 0;
+    if (this.props.livepeer.quotes) {
+      if (this.props.livepeer.quotes.LPT) {
+        lptPrice = this.props.livepeer.quotes.LPT.price.toFixed(2);
+        lptPriceChange24h = this.props.livepeer.quotes.LPT.percent_change_24h.toFixed(2);
+      }
+      if (this.props.livepeer.quotes.ETH) {
+        ethPrice = this.props.livepeer.quotes.ETH.price.toFixed(2);
+        ethPriceChange24h = this.props.livepeer.quotes.ETH.percent_change_24h.toFixed(2);
+      }
+    }
+
+    console.log(this.props.livepeer);
+
+    let rewardCut = 0;
+    let feeCut = 0;
+    let totalStake = 0;
+    let totalVolumeETH = 0;
+    let totalVolumeUSD = 0;
+    let delegators = [];
+    let delegatorsTotalStake = 0;
+    let selfStake = 0;
+    let selfStakeRatio = 0;
+    if (this.props.livepeer.thisOrchestrator) {
+      if (this.props.livepeer.thisOrchestrator.rewardCut) {
+        rewardCut = (this.props.livepeer.thisOrchestrator.rewardCut / 10000).toFixed(2);
+      }
+      if (this.props.livepeer.thisOrchestrator.feeShare) {
+        feeCut = (100 - (this.props.livepeer.thisOrchestrator.feeShare / 10000)).toFixed(2);
+      }
+      if (this.props.livepeer.thisOrchestrator.totalStake) {
+        totalStake = parseFloat(this.props.livepeer.thisOrchestrator.totalStake).toFixed(2);
+      }
+      if (this.props.livepeer.thisOrchestrator.totalVolumeETH) {
+        totalVolumeETH = parseFloat(this.props.livepeer.thisOrchestrator.totalVolumeETH * 1).toFixed(4);
+      }
+      if (this.props.livepeer.thisOrchestrator.totalVolumeUSD) {
+        totalVolumeUSD = parseFloat(this.props.livepeer.thisOrchestrator.totalVolumeUSD * 1).toFixed(2);
+      }
+      if (this.props.livepeer.thisOrchestrator.delegators && this.props.livepeer.thisOrchestrator.delegator) {
+        delegators = this.props.livepeer.thisOrchestrator.delegators;
+        selfStake = parseFloat(this.props.livepeer.thisOrchestrator.delegator.bondedAmount);
+        {
+          delegators.map((delObj, idx) => {
+            delegatorsTotalStake += parseFloat(delObj.bondedAmount);
+          })
+        }
+        selfStakeRatio = ((selfStake / delegatorsTotalStake) * 100).toFixed(2);
+        delegatorsTotalStake = delegatorsTotalStake.toFixed(2);
+        selfStake = selfStake.toFixed(2);
+      }
+    }
+
+    return (
       <div className="stroke" style={{ margin: 0, padding: 0 }}>
-        <div className="flexContainer">
+        <div className="row" style={{ margin: 0, padding: 0 }}>
-          <div className="stroke" style={{ marginTop: 0, marginBottom: 5, paddingBottom: 0 }}>
+          <button className="homeButton" onClick={() => {
-            <div className="stroke roundedOpaque" style={{}}>
+            this.setState({ redirectToHome: true });
-              <div className="row">
+          }}>
-                <h2> <img alt="" src="livepeer.png" width="30" height="30" /> <a href="https://explorer.livepeer.org/accounts/0x847791cbf03be716a7fe9dc8c9affe17bd49ae5e/">Livepeer Orchestrator</a></h2>
+            <img alt="" src="/livepeer.png" width="100em" height="100em" />
-              </div>
+          </button>
-              <div className="stroke roundedOpaque" style={{ borderRadius: "1em", backgroundColor: "#111217" }}>
+        </div>
-              <div className="flexContainer" style={{ justifyContent: "center" }}>
+        <div className="stroke" style={{ margin: 0, padding: 0 }}>
-                  <iframe className="halfGrafana" src="https://grafana.stronk.tech/d-solo/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=5s&theme=dark&panelId=23763572081" height="200" frameBorder="0"></iframe>
+          <div className="flexContainer">
-                  <iframe className="halfGrafana" src="https://grafana.stronk.tech/d-solo/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=5s&theme=dark&panelId=23763572082" height="200" frameBorder="0"></iframe>
+            <div className="stroke" style={{ marginTop: 0, marginBottom: 5, paddingBottom: 0 }}>
-                </div>
+              <div className="stroke roundedOpaque" style={{}}>
-                <div className="flexContainer" style={{ justifyContent: "center" }}>
-                  <iframe className="fullGrafana" src="https://grafana.stronk.tech/d-solo/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=5s&theme=dark&panelId=23763572014" height="200" frameBorder="0"></iframe>
-                </div>
-                <div className="flexContainer" style={{ justifyContent: "center" }}>
-                  <iframe className="fullGrafana" src="https://grafana.stronk.tech/d-solo/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=5s&theme=dark&panelId=23763572077" height="400" frameBorder="0"></iframe>
-                </div>
-                <div className="flexContainer" style={{ justifyContent: "center" }}>
-                  <iframe className="fullGrafana" src="https://grafana.stronk.tech/d-solo/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=5s&theme=dark&panelId=23763572056" height="200" frameBorder="0"></iframe>
-                </div>
-                <div className="flexContainer" style={{ justifyContent: "center" }}>
-                  <iframe className="fullGrafana" src="https://grafana.stronk.tech/d-solo/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=5s&theme=dark&panelId=23763572032" height="200" frameBorder="0"></iframe>
-                </div>
-                <div className="flexContainer" style={{ justifyContent: "center" }}>
-                  <iframe className="fullGrafana" src="https://grafana.stronk.tech/d-solo/71b6OZ0Gz/orchestrator-overview?orgId=1&from=now-2d&to=now&refresh=5s&theme=dark&panelId=23763572040" height="400" frameBorder="0"></iframe>
-                </div>
                 <div className="row">
-                  <a href="https://grafana.stronk.tech/d/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=5s&theme=dark">
+                  <h2> <img alt="" src="livepeer.png" width="30" height="30" /> <a href="https://explorer.livepeer.org/accounts/0x847791cbf03be716a7fe9dc8c9affe17bd49ae5e/">Livepeer Orchestrator</a></h2>
-                    <button className="waveButton">
+                </div>
-                      <img alt="" src="grafana.png" width="30" height="30" />
+                <div className="stroke roundedOpaque" style={{ borderRadius: "1em", backgroundColor: "#111217" }}>
-                      <p>Full Statistics</p>
+                  <div className="hostInfo" style={{ margin: 0, padding: 0 }}>
-                    </button>
+                    <div className="stroke" style={{ margin: 0, padding: 0 }}>
-                  </a>
+                      <div className="row">
+                        <h3>Price Info</h3>
+                      </div>
+                      <div className="row">
+                        <img alt="" src="livepeer.png" width="30" height="30" />
+                        <p>${lptPrice}</p>
+                        <p>({lptPriceChange24h}%)</p>
+                      </div>
+                      <div className="row">
+                        <img alt="" src="eth.png" width="30" height="30" />
+                        <p>${ethPrice}</p>
+                        <p>({ethPriceChange24h}%)</p>
+                      </div>
+                    </div>
+                    <div className="stroke" style={{ margin: 0, padding: 0 }}>
+                      <div className="row">
+                        <h3>Orchestrator Info</h3>
+                      </div>
+                      <div className="row">
+                        <p>Reward Cut {rewardCut}%</p>
+                        <p>Fee Cut {feeCut}%</p>
+                      </div>
+                      <div className="row">
+                        <p>Total Stake {totalStake} LPT</p>
+                        <p>Earned fees {totalVolumeETH} Eth (${totalVolumeUSD})</p>
+                      </div>
+                      <div className="row">
+                        <p>Self stake {selfStake} LPT (Ratio of {selfStakeRatio}%)</p>
+                        <p>Total stake {delegatorsTotalStake} LPT</p>
+                      </div>
+                    </div>
+                  </div>
+                  <div className="flexContainer" style={{ justifyContent: "center" }}>
+                    <iframe className="fullGrafana" src="https://grafana.stronk.tech/d-solo/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=5s&theme=dark&panelId=23763572077" height="400" frameBorder="0"></iframe>
+                  </div>
+                  <div className="flexContainer" style={{ justifyContent: "center" }}>
+                    <iframe className="fullGrafana" src="https://grafana.stronk.tech/d-solo/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=5s&theme=dark&panelId=23763572056" height="200" frameBorder="0"></iframe>
+                  </div>
+                  <div className="flexContainer" style={{ justifyContent: "center" }}>
+                    <iframe className="fullGrafana" src="https://grafana.stronk.tech/d-solo/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=5s&theme=dark&panelId=23763572032" height="200" frameBorder="0"></iframe>
+                  </div>
+                  <div className="flexContainer" style={{ justifyContent: "center" }}>
+                    <iframe className="fullGrafana" src="https://grafana.stronk.tech/d-solo/71b6OZ0Gz/orchestrator-overview?orgId=1&from=now-2d&to=now&refresh=5s&theme=dark&panelId=23763572040" height="400" frameBorder="0"></iframe>
+                  </div>
+                  <div className="row">
+                    <a href="https://grafana.stronk.tech/d/71b6OZ0Gz/orchestrator-overview?orgId=1&refresh=5s&theme=dark">
+                      <button className="waveButton">
+                        <img alt="" src="grafana.png" width="30" height="30" />
+                        <p>Full Statistics</p>
+                      </button>
+                    </a>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
+    );
-  );
+  }
 }
 
-export default Grafana;
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Grafana);

src/livepeer.js

@@ -3,10 +3,9 @@ import './style.css';
 import {
   Navigate
 } from "react-router-dom";
-import ScrollContainer from 'react-indiana-drag-scroll';
 import { connect } from "react-redux";
 import {
-  getQuotes, getBlockchainData, getEvents
+  getQuotes, getBlockchainData, getEvents, getCurrentOrchestratorInfo
 } from "./actions/livepeer";
 import EventViewer from "./eventViewer";
 
@@ -22,7 +21,8 @@ const mapStateToProps = (state) => {
 const mapDispatchToProps = dispatch => ({
   getQuotes: () => dispatch(getQuotes()),
   getBlockchainData: () => dispatch(getBlockchainData()),
-  getEvents: () => dispatch(getEvents())
+  getEvents: () => dispatch(getEvents()),
+  getCurrentOrchestratorInfo: () => dispatch(getCurrentOrchestratorInfo())
 });
 
 class Livepeer extends React.Component {
@@ -38,9 +38,11 @@ class Livepeer extends React.Component {
     this.props.getQuotes();
     this.props.getBlockchainData();
     this.props.getEvents();
+    this.props.getCurrentOrchestratorInfo();
   }
 
   render() {
+    console.log(this.props.livepeer.thisOrchestrator);
     if (this.state.redirectToHome) {
       return <Navigate push to="/" />;
     }

src/loadingScreen.js

@@ -3,6 +3,9 @@ import { connect } from "react-redux";
 import {
   getVisitorStats
 } from "./actions/user";
+import {
+  getQuotes, getBlockchainData, getEvents, getCurrentOrchestratorInfo
+} from "./actions/livepeer";
 import { login } from "./actions/session";
 
 const mapStateToProps = (state) => {
@@ -15,7 +18,11 @@ const mapStateToProps = (state) => {
 
 const mapDispatchToProps = dispatch => ({
   getVisitorStats: () => dispatch(getVisitorStats()),
-  login: () => dispatch(login())
+  login: () => dispatch(login()),
+  getQuotes: () => dispatch(getQuotes()),
+  getBlockchainData: () => dispatch(getBlockchainData()),
+  getEvents: () => dispatch(getEvents()),
+  getCurrentOrchestratorInfo: () => dispatch(getCurrentOrchestratorInfo())
 });
 
 
@@ -23,6 +30,10 @@ class Startup extends React.Component {
   componentDidMount() {
     this.props.login();
     this.props.getVisitorStats();
+    this.props.getQuotes();
+    this.props.getBlockchainData();
+    this.props.getEvents();
+    this.props.getCurrentOrchestratorInfo();
   }
   render() {
     return this.props.children;

src/reducers/livepeer/livepeerstate.js

@@ -1,7 +1,8 @@
 import {
   RECEIVE_QUOTES,
   RECEIVE_BLOCKCHAIN_DATA,
-  RECEIVE_EVENTS
+  RECEIVE_EVENTS,
+  RECEIVE_ORCHESTRATOR
 } from "../../actions/livepeer";
 
 export default (state = {}, { type, message }) => {
@@ -13,6 +14,8 @@ export default (state = {}, { type, message }) => {
       return { ...state, blockchains: message };
     case RECEIVE_EVENTS:
       return { ...state, events: message };
+    case RECEIVE_ORCHESTRATOR:
+      return { ...state, thisOrchestrator: message.transcoders[0] };
     default:
       return { ...state };
   }

src/style.css

@@ -189,7 +189,7 @@ svg {
   color: rgba(162, 161, 255, 0.5);
 }
 
-.hostinfo {
+.hostInfo {
   cursor: default;
   text-align: start;
   padding: 10px;
@@ -197,9 +197,9 @@ svg {
   user-select: text;
   margin-top: 0;
   margin-bottom: 0;
-  font-size: x-small;
+  font-size: small;
   color: rgba(15, 15, 15, 0.8750);
-  background-color: rgba(255, 255, 255, 0.06);
+  background-color: rgba(169, 177, 214, 0.8);
   -webkit-box-shadow: inset 3px 3px 12px 2px rgba(28, 28, 170, 0.2);
   -moz-box-shadow: inset 3px 3px 12px 2px rgba(28, 28, 170, 0.2);
   box-shadow: inset 3px 3px 12px 2px rgba(28, 28, 170, 0.2);

src/util/livepeer.js

@@ -26,3 +26,12 @@ export const getEvents = () => (
     }
   })
 );
+
+export const getCurrentOrchestratorInfo = () => (
+  fetch("api/livepeer/getOrchestrator", {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json"
+    }
+  })
+);