MVP Event Viewer and Buttons

src/eventButton.js

@@ -1,59 +1,144 @@
 import React from "react";
 
+const activationColour = "rgba(23, 60, 122, 0.3)";
+const rewardColour = "rgba(20, 99, 29, 0.3)";
+const updateColour = "rgba(122, 63, 23, 0.3)";
+const withdrawStakeColour = "rgba(102, 3, 10, 0.3)";
+const stakeColour = "rgba(71, 23, 122, 0.3)";
+
 const EventButton = (obj) => {
+  // Data shared among all events in this transaction
+  const thisURL = obj.transactionUrl;
+  const thisTransaction = obj.transactionHash;
+  const thisData = obj.events;
+  const thisIndex = obj.idx;
+  // Abstraction of all events in this transaction
+  let transactionName = "";
+  let transactionCaller = "";
+  let transactionFrom = "";
+  let transactionTo = "";
+  let transactionAmount = 0;
+  let transactionAdditionalAmount = 0;
+  let transactionWhen = 0;
+  let hasBondTransaction = false;
+  let isOnlyBond = true;
+  let thisColour = "";
+
+
+  // Which we will fill in by going over all of the events once
+  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;
+      transactionAmount = parseFloat(eventObj.data.bondedAmount);
+      transactionAdditionalAmount = parseFloat(eventObj.data.additionalAmount);
+      hasBondTransaction = true;
+    }
+    // TranscoderActivated: defines transactionName. Defines transactionAmount as X * 7e-18 LPT
+    if (eventObj.name == "TranscoderActivated") {
+      transactionName = "Activated";
+      transactionWhen = eventObj.data.activationRound;
+      if (!hasBondTransaction) {
+        transactionCaller = eventObj.data.transcoder;
+      }
+      thisColour = activationColour;
+      isOnlyBond = false;
+    }
+    // TranscoderActivated: defines transactionName. Defines transactionAmount as X / 1000000000000000000 LPT
+    if (eventObj.name == "Reward") {
+      transactionName = "Reward";
+      transactionCaller = eventObj.data.transcoder;
+      transactionAmount = eventObj.data.amount / 1000000000000000000;
+      thisColour = rewardColour;
+      isOnlyBond = false;
+    }
+    // TranscoderUpdate: defines transactionName. Defines transactionAmount as rewardCut and transactionAdditionalAmount as feeCut
+    if (eventObj.name == "TranscoderUpdate") {
+      transactionName = "Update";
+      transactionCaller = eventObj.data.transcoder;
+      transactionAmount = eventObj.data.rewardCut / 10000;
+      transactionAdditionalAmount = 100 - (eventObj.data.feeShare / 10000);
+      thisColour = updateColour;
+      isOnlyBond = false;
+    }
+    // WithdrawStake: defines transactionName. Defines transactionAmount as rewardCut and transactionAdditionalAmount as feeCut
+    if (eventObj.name == "WithdrawStake") {
+      transactionName = "Withdraw";
+      transactionCaller = eventObj.data.delegator;
+      transactionAmount = eventObj.data.amount / 1000000000000000000;
+      transactionWhen = eventObj.data.withdrawRound;
+      thisColour = withdrawStakeColour;
+      isOnlyBond = false;
+    }
+  })
+
+  // If we only had a bond transaction and nothing else, this is a stake
+  if (hasBondTransaction && isOnlyBond){
+    transactionName = "Stake";
+    thisColour = stakeColour;
+  }
+
   let eventSpecificInfo;
-  if (obj.name == "EarningsClaimed") {
+  if (transactionName == "Reward") {
-    eventSpecificInfo = <div className="row">
+    if (transactionAmount - 69 < 1 && transactionAmount - 69 > 0) {
-      <p>(Round {obj.data.endRound}) Claim: {obj.data.delegator} earned {(obj.data.rewards / 1000000000000000000).toFixed(4)} Eth @ Orchestrator {obj.data.delegate}</p>
+      eventSpecificInfo =
-    </div>
+        <div className="row">
-  } else if (obj.name == "Unbond") {
+          <p>called reward worth {transactionAmount.toFixed(2)} LPT. nice</p>
-    eventSpecificInfo = <div className="row">
+        </div>
-      <p>(Round {obj.data.withdrawRound}) Unbond: {obj.data.delegator} unbonded {(obj.data.amount / 1000000000000000000).toFixed(4)} Eth @ Orchestrator {obj.data.delegate}</p>
+    } else {
-    </div>
+      eventSpecificInfo =
-  } else if (obj.name == "TransferBond") {
+        <div className="row">
-    eventSpecificInfo = <div className="row">
+          <p>called reward worth {transactionAmount.toFixed(2)} LPT</p>
-      <p>TransferBond: transfered bond worth {(obj.data.amount / 1000000000000000000).toFixed(4)} Eth from {obj.data.oldDelegator} to {obj.data.newDelegator}</p>
+        </div>
-    </div>
+    }
-  } else if (obj.name == "Bond") {
+  }else if (transactionName == "Update") {
-    eventSpecificInfo = <div className="row" style={{ backgroundColor: 'rgba(50,50,50,0.3)' }}>
+    eventSpecificInfo =
-      <p>{obj.data.delegator} delegated {(obj.data.bondedAmount / 1000000000000000000).toFixed(4)} LPT from {obj.data.oldDelegate} to {obj.data.newDelegate}</p>
+      <div className="row">
-    </div>
+        <p>changed their reward commission to {transactionAmount.toFixed(2)}% and their fee commission to {transactionAdditionalAmount.toFixed(2)}%</p>
-  } else if (obj.name == "Rebond") {
+      </div>
-    eventSpecificInfo = <div className="row">
+  }else if (transactionName == "Stake") {
-      <p>Rebond: {obj.data.delegator} @ {obj.data.delegate}</p>
+    eventSpecificInfo =
-    </div>
+      <div className="row">
-  } else if (obj.name == "WithdrawFees") {
+        <p> changed stake from {transactionFrom} to {transactionTo} of {(transactionAmount * 7e-18).toFixed(2)} LPT</p>
-    eventSpecificInfo = <div className="row">
+      </div>
-      <p>{obj.data.recipient} claimed stake</p>
+  }else if (transactionName == "Withdraw") {
-    </div>
+    eventSpecificInfo =
-  } else if (obj.name == "WithdrawStake") {
+      <div className="row">
-    eventSpecificInfo = <div className="row" style={{ backgroundColor: 'rgba(255, 0, 0, 0.3)' }}>
+        <p> withdrew {(transactionAmount * 7e-18).toFixed(2)} LPT in round {transactionWhen}</p>
-      <p>{obj.data.delegator} withdrew stake worth {(obj.data.amount / 1000000000000000000).toFixed(4)} LPT in round {obj.data.withdrawRound}</p>
+      </div>
-    </div>
+  } else if (transactionName == "Activated") {
-  } else if (obj.name == "Reward") {
+    if (hasBondTransaction) {
-    eventSpecificInfo = <div className="row" style={{ backgroundColor: 'rgba(0, 179, 221, 0.3)' }}>
+      eventSpecificInfo =
-      <p>O {obj.data.transcoder} called reward for {(obj.data.amount / 1000000000000000000).toFixed(4)} LPT</p>
+        <div className="row">
-    </div>
+          <p>{transactionCaller} activated with a self stake of {(transactionAmount * 7e-18).toFixed(2)} LPT and will become active in round {transactionWhen}</p>
-  } else if (obj.name == "TranscoderUpdate") {
+        </div>
-    eventSpecificInfo = <div className="row" style={{ backgroundColor: 'rgba(215, 15, 0, 0.3)' }}>
+    } else {
-      <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>
+      // If there was no bond transaction, display fewer information
-    </div>
+      eventSpecificInfo =
-  } else if (obj.name == "TranscoderActivated") {
+        <div className="row">
-    eventSpecificInfo = <div className="row" style={{ backgroundColor: 'rgba(0, 255, 1, 0.3)' }}>
+          <p>reactivated and will become active in round {transactionWhen}</p>
-      <p>O {obj.data.transcoder} activated and will become active in {obj.data.activationRound}</p>
+        </div>
-    </div>
+    }
   } else {
-    console.log(obj);
+    console.log(thisData);
     eventSpecificInfo = <div className="row">
-      <p>UNIMPLEMENTED: {obj.event}</p>
+      <p>UNIMPLEMENTED</p>
     </div>
   }
 
+  // IF ON MOBILE
+  // transactionCaller.substring(0,8)+"..."
+
   return (
-    <div className="row">
+    <div className="row" style={{ backgroundColor: thisColour, borderRadius: "1.2em" }}>
-      <img alt="" src="livepeer.png" width="30" height="30" />
+      <a href={"https://explorer.livepeer.org/accounts/" + transactionCaller} style={{ flexDirection: 'row', display: "flex" }}>
-      {obj.idx}: {eventSpecificInfo}
+        <img alt="" src="livepeer.png" width="30" height="30" />
-      <a href={obj.transactionUrl}>
+        <p>{transactionCaller}</p>
+      </a>
+      {eventSpecificInfo}
+      <a href={thisURL}>
         <img alt="" src="arb.svg" width="30" height="30" />
       </a>
     </div>

src/eventViewer.js

@@ -5,39 +5,53 @@ import ScrollContainer from 'react-indiana-drag-scroll';
 const EventViewer = (obj) => {
   let txCounter = 0;
   let currentTx = "";
+  let currentUrl = "";
+  let currentHash = "";
   let eventCache = [];
+
   let eventBundle = [];
+  let finalUrl = "";
+  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="content-wrapper">
         <ScrollContainer className="overflow-container" hideScrollbars={false}>
           <div className="overflow-content" style={{ cursor: 'grab' }}>
             {obj.events.slice(0).reverse().map((eventObj, idx) => {
-              // TODO: once txCounter falls out of a certain range, stop parsing new blocks
+              // Filter
-              // Apply the filter first so that the IDX only counts displayed blocks
+              if (eventObj.name == "WithdrawFees" || eventObj.name == "TransferBond"
-              // Skip WithdrawFees buttons cause they are not interesting for the MVP
+              || eventObj.name == "Rebond" || eventObj.name == "Unbond" || eventObj.name == "EarningsClaimed"){
-              if (eventObj.name == "WithdrawFees"){
                 return;
               }
+              // New transaction found
               if (currentTx != eventObj.transactionHash) {
-                txCounter++;
+                // Save old event data
-                currentTx = eventObj.transactionHash;
                 eventBundle = eventCache;
-                eventCache = [];
+                finalUrl = currentUrl;
+                finalHash = currentHash;
+                finalIdx = txCounter;
+                // Reset event data
+                currentTx = eventObj.transactionHash;
+                currentUrl = eventObj.transactionUrl;
+                currentHash = eventObj.transactionHash;
+                eventCache = [eventObj];
+                txCounter++;
               } else {
+                // Push event to current cache
                 eventCache.push(eventObj);
                 return;
               }
-              return <EventButton
+              // Push if not completely filtered out
-                key={eventObj.transactionUrl + idx}
+              if (eventBundle.length){
-                transactionUrl={eventObj.transactionUrl}
+                return <EventButton
-                transactionHash={eventObj.transactionHash}
+                  key={eventObj.transactionHash+idx}
-                name={eventObj.name}
+                  transactionUrl={finalUrl}
-                data={eventObj.data}
+                  transactionHash={finalHash}
-                address={eventObj.address}
+                  events={eventBundle}
-                idx={txCounter}
+                  idx={finalIdx}
-                subEvents={eventBundle}
+                />
-              />
+              }
             })}
           </div>
         </ScrollContainer>

src/grafana.js

@@ -83,10 +83,10 @@ class Grafana extends React.Component {
                 <div className="stroke roundedOpaque" style={{ borderRadius: "1em", backgroundColor: "#111217" }}>
                   <Orchestrator thisOrchestrator={this.props.livepeer.thisOrchestrator} />
                   <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>
+                    <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=23763572056" height="200" frameBorder="0"></iframe>
+                    <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=23763572032" height="200" frameBorder="0"></iframe>

src/livepeer.js

@@ -42,7 +42,6 @@ class Livepeer extends React.Component {
   }
 
   render() {
-    console.log(this.props.livepeer.thisOrchestrator);
     if (this.state.redirectToHome) {
       return <Navigate push to="/" />;
     }