Fixes and Orchestrator info added

2025-07-05 10:45:10 +02:00 · 2022-03-03 22:25:54 +01:00 · 2022-03-03 22:25:54 +01:00 · 019f8ddb3b
commit 019f8ddb3b
parent c317eef732
8 changed files with 114 additions and 71 deletions
--- a/backend/src/routes/livepeer.js
+++ b/backend/src/routes/livepeer.js
@ -240,6 +240,7 @@ apiRouter.get("/getEvents", async (req, res) => {
 });

 const parseOrchestrator = async function (reqAddr) {
+  reqAddr = reqAddr.toLowerCase();
  const now = new Date().getTime();
  // Default assume it's the first time we request this Orchestrator
  let wasCached = false;
@ -248,6 +249,8 @@ const parseOrchestrator = async function (reqAddr) {
  // First get cached object
  for (var orch of orchestratorCache) {
    if (orch.addr == reqAddr) {
+      console.log("found cached obj");
+      console.log(orch);
      wasCached = true;
      orchestratorObj = orch;
      break;
@ -256,6 +259,9 @@ const parseOrchestrator = async function (reqAddr) {
  if (wasCached) {
    if (now - orch.lastGet < timeoutTheGraph) {
      needsUpdate = false;
+      console.log("cached obj is up to date");
+    }else{
+      console.log("cached obj needs update");
    }
  }
  if (!wasCached || needsUpdate) {
@ -300,17 +306,23 @@ const parseOrchestrator = async function (reqAddr) {
    }
  `;
    orchestratorObj = JSON.stringify(await request("https://api.thegraph.com/subgraphs/name/livepeer/arbitrum-one", orchQuery));
+    console.log("downloaded new obj");
+    console.log(orchestratorObj);
    if (wasCached) {
      for (var orch of orchestratorCache) {
        if (orch.addr == requestedOrchestrator) {
+          console.log("modifying existing obj in cache");
          orch = orchestratorObj;
          break;
        }
      }
    } else {
+      console.log("pushing this obj to cache");
      orchestratorCache.push(orchestratorObj);
    }
  }
+  console.log("returning obj");
+  console.log(orchestratorObj);
  return orchestratorObj;
 }

--- a/src/actions/livepeer.js
+++ b/src/actions/livepeer.js
@ -62,6 +62,7 @@ export const getCurrentOrchestratorInfo = () => async dispatch => {
 export const getOrchestratorInfo = (orchAddr) => async dispatch => {
  const response = await apiUtil.getOrchestratorInfo(orchAddr);
  const data = await response.json();
+  console.log(data);
  if (response.ok) {
    return dispatch(setOrchestratorInfo(data));
  }
--- a/src/eventButton.js
+++ b/src/eventButton.js
@ -29,9 +29,9 @@ const EventButton = (obj) => {
  thisData.map(eventObj => {
    // Bond: contains amount the transaction is about and who is participating
    if (eventObj.name == "Bond") {
-      transactionCaller = eventObj.data.delegator;
-      transactionFrom = eventObj.data.oldDelegate;
-      transactionTo = eventObj.data.newDelegate;
+      transactionCaller = eventObj.data.delegator.toLowerCase();
+      transactionFrom = eventObj.data.oldDelegate.toLowerCase();
+      transactionTo = eventObj.data.newDelegate.toLowerCase();
      transactionAmount = parseFloat(eventObj.data.bondedAmount);
      transactionAdditionalAmount = parseFloat(eventObj.data.additionalAmount);
      hasBondTransaction = true;
@ -41,7 +41,7 @@ const EventButton = (obj) => {
      transactionName = "Activated";
      transactionWhen = eventObj.data.activationRound;
      if (!hasBondTransaction) {
-        transactionCaller = eventObj.data.transcoder;
+        transactionCaller = eventObj.data.transcoder.toLowerCase();
      }
      thisColour = activationColour;
      isOnlyBond = false;
@ -49,7 +49,7 @@ const EventButton = (obj) => {
    // TranscoderActivated: defines transactionName. Defines transactionAmount as X / 1000000000000000000 LPT
    if (eventObj.name == "Reward") {
      transactionName = "Reward";
-      transactionCaller = eventObj.data.transcoder;
+      transactionCaller = eventObj.data.transcoder.toLowerCase();
      transactionAmount = eventObj.data.amount / 1000000000000000000;
      thisColour = rewardColour;
      isOnlyBond = false;
@ -57,7 +57,7 @@ const EventButton = (obj) => {
    // TranscoderUpdate: defines transactionName. Defines transactionAmount as rewardCut and transactionAdditionalAmount as feeCut
    if (eventObj.name == "TranscoderUpdate") {
      transactionName = "Update";
-      transactionCaller = eventObj.data.transcoder;
+      transactionCaller = eventObj.data.transcoder.toLowerCase();
      transactionAmount = eventObj.data.rewardCut / 10000;
      transactionAdditionalAmount = 100 - (eventObj.data.feeShare / 10000);
      thisColour = updateColour;
@ -66,7 +66,7 @@ const EventButton = (obj) => {
    // WithdrawStake: defines transactionName. Defines transactionAmount as rewardCut and transactionAdditionalAmount as feeCut
    if (eventObj.name == "WithdrawStake") {
      transactionName = "Withdraw";
-      transactionCaller = eventObj.data.delegator;
+      transactionCaller = eventObj.data.delegator.toLowerCase();
      transactionAmount = eventObj.data.amount / 1000000000000000000;
      transactionWhen = eventObj.data.withdrawRound;
      thisColour = withdrawStakeColour;
@ -84,47 +84,51 @@ const EventButton = (obj) => {
  if (transactionName == "Reward") {
    if (transactionAmount - 69 < 1 && transactionAmount - 69 > 0) {
      eventSpecificInfo =
-        <div className="row">
+        <div className="rowAlignLeft">
          <p>called reward worth {transactionAmount.toFixed(2)} LPT. nice</p>
        </div>
    } else {
      eventSpecificInfo =
-        <div className="row">
+        <div className="rowAlignLeft">
          <p>called reward worth {transactionAmount.toFixed(2)} LPT</p>
        </div>
    }
  } else if (transactionName == "Update") {
    eventSpecificInfo =
-      <div className="row">
+      <div className="rowAlignLeft">
        <p>changed their reward commission to {transactionAmount.toFixed(2)}% and their fee commission to {transactionAdditionalAmount.toFixed(2)}%</p>
      </div>
  } else if (transactionName == "Stake") {
    if (transactionFrom == "0x0000000000000000000000000000000000000000") {
      eventSpecificInfo =
-        <div className="row">
-          <p> staked {(transactionAmount / 1000000000000000000).toFixed(2)} LPT to {transactionTo} </p>
+        <div className="rowAlignLeft">
+          <p> staked {(transactionAmount / 1000000000000000000).toFixed(2)} LPT to </p>
+          <button className="selectOrch" onClick={() => {obj.setOrchFunction(transactionTo)}} >{transactionTo}</button>
        </div>
    } else {
      eventSpecificInfo =
-        <div className="row">
-          <p> changed stake from {transactionFrom} to {transactionTo} of {(transactionAmount / 1000000000000000000).toFixed(2)} LPT</p>
+        <div className="rowAlignLeft">
+          <p> moved {(transactionAmount / 1000000000000000000).toFixed(2)} LPT stake: </p>
+          <button className="selectOrch" onClick={() => {obj.setOrchFunction(transactionFrom)}} >{transactionFrom}</button>
+          <p> to </p>
+          <button className="selectOrch" onClick={() => {obj.setOrchFunction(transactionTo)}} >{transactionTo}</button>
        </div>
    }
  } else if (transactionName == "Withdraw") {
    eventSpecificInfo =
-      <div className="row">
+      <div className="rowAlignLeft">
        <p> withdrew {(transactionAmount / 1000000000000000000).toFixed(2)} LPT in round {transactionWhen}</p>
      </div>
  } else if (transactionName == "Activated") {
    if (hasBondTransaction) {
      eventSpecificInfo =
-        <div className="row">
-          <p>{transactionCaller} activated with a self stake of {(transactionAmount / 1000000000000000000).toFixed(2)} LPT and will become active in round {transactionWhen}</p>
+        <div className="rowAlignLeft">
+          <p>activated with a self stake of {(transactionAmount / 1000000000000000000).toFixed(2)} LPT and will become active in round {transactionWhen}</p>
        </div>
    } else {
      // If there was no bond transaction, display fewer information
      eventSpecificInfo =
-        <div className="row">
+        <div className="rowAlignLeft">
          <p>reactivated and will become active in round {transactionWhen}</p>
        </div>
    }
@ -140,10 +144,12 @@ const EventButton = (obj) => {

  return (
    <div className="row" style={{ backgroundColor: thisColour, borderRadius: "1.2em" }}>
-      <a href={"https://explorer.livepeer.org/accounts/" + transactionCaller} style={{ flexDirection: 'row', display: "flex" }}>
+      <div style={{ flexDirection: 'row', display: "flex" }}>
        <img alt="" src="livepeer.png" width="30" height="30" />
-        <p>{transactionCaller}</p>
-      </a>
+        <div className="row">
+          <button className="selectOrch" onClick={() => {obj.setOrchFunction(transactionCaller)}} >{transactionCaller}</button>
+        </div>
+      </div>
      {eventSpecificInfo}
      <a href={thisURL}>
        <img alt="" src="arb.svg" width="30" height="30" />
--- a/src/eventViewer.js
+++ b/src/eventViewer.js
@ -14,7 +14,7 @@ const EventViewer = (obj) => {
  let finalHash = "";
  let finalIdx = 0;
  return (
-    <div className="stroke roundedOpaque" style={{ padding: 0, margin: 0, marginTop: '2em', position: 'absolute', bottom: 0, top: '200px', left: '0px', right: '0px', overflowY: 'auto', overflowX: 'hidden', width: '100%' }}>
+    <div className="stroke roundedOpaque" style={{ padding: 0, margin: 0, marginTop: '2em', position: 'absolute', bottom: 0, top: '300px', left: '0px', right: '0px', overflowY: 'auto', overflowX: 'hidden', width: '100%' }}>
      <div className="content-wrapper">
        <ScrollContainer className="overflow-container" hideScrollbars={false}>
          <div className="overflow-content" style={{ cursor: 'grab' }}>
@ -50,6 +50,7 @@ const EventViewer = (obj) => {
                  transactionHash={finalHash}
                  events={eventBundle}
                  idx={finalIdx}
+                  setOrchFunction={obj.setOrchFunction}
                />
              }
            })}
--- a/src/livepeer.js
+++ b/src/livepeer.js
@ -5,9 +5,10 @@ import {
 } from "react-router-dom";
 import { connect } from "react-redux";
 import {
-  getQuotes, getBlockchainData, getEvents, getCurrentOrchestratorInfo
+  getQuotes, getBlockchainData, getEvents, getCurrentOrchestratorInfo, getOrchestratorInfo
 } from "./actions/livepeer";
 import EventViewer from "./eventViewer";
+import Orchestrator from "./orchestratorViewer";

 const mapStateToProps = (state) => {
  return {
@ -22,7 +23,8 @@ const mapDispatchToProps = dispatch => ({
  getQuotes: () => dispatch(getQuotes()),
  getBlockchainData: () => dispatch(getBlockchainData()),
  getEvents: () => dispatch(getEvents()),
-  getCurrentOrchestratorInfo: () => dispatch(getCurrentOrchestratorInfo())
+  getCurrentOrchestratorInfo: () => dispatch(getCurrentOrchestratorInfo()),
+  getOrchestratorInfo: (addr) => dispatch(getOrchestratorInfo(addr))
 });

 class Livepeer extends React.Component {
@ -120,9 +122,14 @@ class Livepeer extends React.Component {
      eventsList = this.props.livepeer.events;
    }

+    let thisOrchObj = this.props.livepeer.thisOrchestrator;
+    if (this.props.livepeer.selectedOrchestrator){
+      thisOrchObj = this.props.livepeer.selectedOrchestrator;
+    }
+
    return (
      <div style={{ width: '100%', height: '100%' }}>
-        <div className="row" style={{ margin: 0, padding: 0, backgroundColor: "rgba(180, 175, 252, 0.80)", boxSizing: "border-box", backdropDilter: "blur(6px)", boxSshadow: "9px 13px 18px 8px  rgba(8, 7, 56, 0.692)", position: 'absolute', top: '0px', left: '0px', height: '200px', right: '0px', overflow: 'hidden' }}>
+        <div className="row" style={{ margin: 0, padding: 0, backgroundColor: "rgba(180, 175, 252, 0.80)", boxSizing: "border-box", backdropDilter: "blur(6px)", boxSshadow: "9px 13px 18px 8px  rgba(8, 7, 56, 0.692)", position: 'absolute', top: '0px', left: '0px', height: '300px', right: '0px', overflow: 'hidden' }}>
          <div className="row" style={{ margin: 0, padding: 0 }}>
            <button className="homeButton" onClick={() => {
              this.setState({ redirectToHome: true });
@ -130,22 +137,8 @@ class Livepeer extends React.Component {
              <img alt="" src="livepeer.png" width="100em" height="100em" />
            </button>
          </div>
+          <Orchestrator thisOrchestrator={thisOrchObj} />
          <div className="row metaSidebar" style={{ padding: 0 }}>
-            <div className="stroke" style={{ margin: 0, padding: 0 }}>
-              <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 }}>
              <h3>Smart contract prices</h3>
              <div className="row">
@ -163,7 +156,7 @@ class Livepeer extends React.Component {
            </div>
          </div>
        </div >
-        <EventViewer events={eventsList} />
+        <EventViewer events={eventsList} setOrchFunction={this.props.getOrchestratorInfo}/>
      </div >
    );
  }
--- a/src/orchestratorViewer.js
+++ b/src/orchestratorViewer.js
@ -1,4 +1,5 @@
 import React from "react";
+import ScrollContainer from "react-indiana-drag-scroll";

 const Orchestrator = (obj) => {
  let rewardCut = 0;
@ -9,6 +10,8 @@ const Orchestrator = (obj) => {
  let delegators = [];
  let selfStake = 0;
  let selfStakeRatio = 0;
+  let thisUrl = "";
+  let thisID = "";
  if (obj.thisOrchestrator) {
    if (obj.thisOrchestrator.rewardCut) {
      rewardCut = (obj.thisOrchestrator.rewardCut / 10000).toFixed(2);
@ -30,14 +33,23 @@ const Orchestrator = (obj) => {
      selfStake = parseFloat(obj.thisOrchestrator.delegator.bondedAmount);
      selfStakeRatio = ((selfStake / totalStake) * 100).toFixed(2);
      selfStake = selfStake.toFixed(2);
+      thisID = obj.thisOrchestrator.delegator.id;
+      thisUrl = "https://explorer.livepeer.org/accounts/" + thisID;
    }
  }

  return (
-    <div className="hostInfo" style={{ margin: 0, padding: 0 }}>
-      <div className="stroke" style={{ margin: 0, padding: 0 }}>
-        <div className="rowAlignLeft">
+    <div className="hostInfo">
+      <div className="strokeSmollLeft">
+        <div style={{ flexDirection: 'row', display: "flex" }}>
+          <a href={thisUrl}>
+            <img alt="" src="livepeer.png" width="30" height="30" />
            <h3>Orchestrator Info</h3>
+            {thisID}
+          </a>
+        </div>
+        <div className="rowAlignLeft">
+          <p>Earned fees {totalVolumeETH} Eth (${totalVolumeUSD})</p>
        </div>
        <div className="rowAlignLeft">
          <p>Reward Cut {rewardCut}%</p>
@ -45,27 +57,32 @@ const Orchestrator = (obj) => {
        </div>
        <div className="rowAlignLeft">
          <p>Total Stake {totalStake} LPT</p>
-        </div>
-        <div className="rowAlignLeft">
          <p>Self stake {selfStake} LPT ({selfStakeRatio}%)</p>
        </div>
-        <div className="rowAlignLeft">
-          <p>Earned fees {totalVolumeETH} Eth (${totalVolumeUSD})</p>
      </div>
+      <div className="rowAlignLeft">
+        <div className="content-wrapper">
+          <ScrollContainer className="overflow-container" hideScrollbars={false}>
+            <div className="overflow-content" style={{ cursor: 'grab', height: '300px' }}>
              {
                delegators.map((delObj, idx) => {
                  return (
                    <div className="rowAlignLeft">
                      <a href={"https://explorer.livepeer.org/accounts/" + delObj.id}>
-                  <img alt="" src="livepeer.png" width="30" height="30" />
-                </a>
+                        <img alt="" src="livepeer.png" width="30" height="30" />{delObj.id.substr(0, 6) + ".."}</a>
+                      <div className="strokeSmollLeft">
                        <p>{parseFloat(delObj.bondedAmount).toFixed(2)} LPT since round {delObj.startRound}</p>
                      </div>
+                    </div>
                  )
                })
              }
            </div>
+          </ScrollContainer>
        </div>
+      </div>
+    </div>
+
  )
 }

--- a/src/style.css
+++ b/src/style.css
@ -1,9 +1,10 @@
-a:hover, a:visited, a:link, a:active{
+.selectOrch:hover, a:hover, a:visited, a:link, a:active{
  text-decoration: none;
  color: rgba(0, 0, 0, 0.875);
  text-align: center;
  justify-content: center;
-  align-items: center;
+  align-items: copy;
+  cursor: pointer;
 }

 img {
@ -41,9 +42,11 @@ h2, h3, h1, h4, h5, h6 {
  justify-content: space-evenly;
 }

-a {
+.selectOrch, a {
  text-shadow: 0.5px 0.5px 0.8px #948dff;
  color: #1a1b26;
+  background-color: transparent;
+  border: none;
 }

 p {
@ -195,14 +198,14 @@ svg {
  padding: 10px;
  margin: 10px;
  user-select: text;
-  margin-top: 0;
-  margin-bottom: 0;
  font-size: small;
  color: rgba(15, 15, 15, 0.8750);
  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);
+  display: flex;
+  flex-direction: row;
 }

 .flexContainer {
@ -232,10 +235,8 @@ svg {

 .strokeSmoll {
  box-sizing: border-box;
-  height: 100%;
-  paddin: 0;
+  padding: 0;
  margin: 0;
-  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
@ -243,6 +244,19 @@ svg {
  z-index: 2;
 }

+.strokeSmollLeft {
+  padding: 0;
+  margin: 0;
+  display: flex;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+  justify-content: middle;
+  vertical-align: middle;
+  flex-direction: column;
+  z-index: 2;
+}
+
 .row {
  box-sizing: border-box;
  width: 100%;
--- a/src/util/livepeer.js
+++ b/src/util/livepeer.js
@ -37,9 +37,8 @@ export const getCurrentOrchestratorInfo = () => (
 );

 export const getOrchestratorInfo = (orchAddr) => (
-  fetch("api/livepeer/getOrchestrator", {
-    method: "POST",
-    body: JSON.stringify(orchAddr),
+  fetch("api/livepeer/getOrchestrator/" + orchAddr, {
+    method: "GET",
    headers: {
      "Content-Type": "application/json"
    }