Fixes and Orchestrator info added

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;
 }
 

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));
   }

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;
+      transactionCaller = eventObj.data.delegator.toLowerCase();
-      transactionFrom = eventObj.data.oldDelegate;
+      transactionFrom = eventObj.data.oldDelegate.toLowerCase();
-      transactionTo = eventObj.data.newDelegate;
+      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">
+        <div className="rowAlignLeft">
-          <p> staked {(transactionAmount / 1000000000000000000).toFixed(2)} LPT to {transactionTo} </p>
+          <p> staked {(transactionAmount / 1000000000000000000).toFixed(2)} LPT to </p>
+          <button className="selectOrch" onClick={() => {obj.setOrchFunction(transactionTo)}} >{transactionTo}</button>
         </div>
     } else {
       eventSpecificInfo =
-        <div className="row">
+        <div className="rowAlignLeft">
-          <p> changed stake from {transactionFrom} to {transactionTo} of {(transactionAmount / 1000000000000000000).toFixed(2)} LPT</p>
+          <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">
+        <div className="rowAlignLeft">
-          <p>{transactionCaller} activated with a self stake of {(transactionAmount / 1000000000000000000).toFixed(2)} LPT and will become active in round {transactionWhen}</p>
+          <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>
+        <div className="row">
-      </a>
+          <button className="selectOrch" onClick={() => {obj.setOrchFunction(transactionCaller)}} >{transactionCaller}</button>
+        </div>
+      </div>
       {eventSpecificInfo}
       <a href={thisURL}>
         <img alt="" src="arb.svg" width="30" height="30" />

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}
                 />
               }
             })}

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 >
     );
   }

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="hostInfo">
-      <div className="stroke" style={{ margin: 0, padding: 0 }}>
+      <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">
-          <h3>Orchestrator Info</h3>
+          <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">
+      </div>
-          <p>Earned fees {totalVolumeETH} Eth (${totalVolumeUSD})</p>
+      <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" />{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>
-        {
-          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>
-                <p>{parseFloat(delObj.bondedAmount).toFixed(2)} LPT since round {delObj.startRound}</p>
-              </div>
-            )
-          })
-        }
       </div>
     </div>
+
   )
 }
 

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%;
+  padding: 0;
-  paddin: 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%;

src/util/livepeer.js

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