UI improvements

Backend now only syncs to DB once on boot and returns blockNumber correctly

backend/src/routes/livepeer.js

@@ -65,13 +65,11 @@ const defaultOrch = "0x847791cbf03be716a7fe9dc8c9affe17bd49ae5e";
 // Will contain addr, lastGet, and obj of any requested O's
 let orchestratorCache = [];
 
-// Listen to smart contract emitters. Resync with DB every 5 minutes
+// Listen to smart contract emitters. Only re-syncs on boot!
-const timeoutEvents = 300000;
 let eventsCache = [];
 let latestMissedDuringSync = 0;
 let lastBlockDataAdded = 0;
 let syncCache = [];
-let eventsGet = 0;
 // Set to true to drop the entire collection on boot and get all events
 const fullSync = false;
 // https://arbiscan.io/address/0x35Bcf3c30594191d53231E4FF333E8A770453e40#events
@@ -367,19 +365,6 @@ apiRouter.get("/quotes", async (req, res) => {
 // Exports list of smart contract events
 apiRouter.get("/getEvents", async (req, res) => {
   try {
-    const now = new Date().getTime();
-    // Update cmc once their data has expired
-    if (now - eventsGet > timeoutEvents) {
-      eventsCache = await Event.find({}, {
-        address: 1,
-        transactionHash: 1,
-        transactionUrl: 1,
-        name: 1,
-        data: 1,
-        _id: 0
-      });
-      eventsGet = now;
-    }
     res.send(eventsCache);
   } catch (err) {
     res.status(400).send(err);

src/BlockViewer.js

@@ -0,0 +1,13 @@
+import React from "react";
+
+const Block = (obj) => {
+  return (
+    <div className="rowAlignLeft" style={{ width: '100%' }}>
+      <span className="rowAlignRight elipsText">
+        Block {obj.block}
+      </span>
+    </div>
+  )
+}
+
+export default Block;

src/actions/livepeer.js

@@ -63,6 +63,7 @@ export const getEvents = () => async dispatch => {
     let txCounter = 0;
     let currentTx = "";
     let currentUrl = "";
+    let currentBlock = 0;
     // Current Event we are processing
     let eventType = "";             // Named type: Withdraw, Update, Claim, Reward, Activate, Unbond, Stake
     let eventDescription = "";      // Descriptive text, also containing Amount, AmountOther and When
@@ -88,6 +89,7 @@ export const getEvents = () => async dispatch => {
         if (currentTx === "") {
           currentTx = eventObj.transactionHash;
           currentUrl = eventObj.transactionUrl;
+          currentBlock = eventObj.blockNumber;
         }
         // New transaction found
         if (currentTx !== eventObj.transactionHash) {
@@ -155,7 +157,8 @@ export const getEvents = () => async dispatch => {
               eventTo,
               eventColour,
               transactionHash: currentTx,
-              transactionUrl: currentUrl
+              transactionUrl: currentUrl,
+              transactionBlock: currentBlock
             });
           }
 
@@ -180,11 +183,15 @@ export const getEvents = () => async dispatch => {
           txCounter++;
           currentTx = eventObj.transactionHash;
           currentUrl = eventObj.transactionUrl;
+          currentBlock = eventObj.blockNumber;
         }
         // Always split off WithdrawStake as a separate Withdraw Event
         if (eventObj.name === "WithdrawStake") {
           const amount = parseFloat(eventObj.data.amount) / 1000000000000000000;
-          const txt = " withdrew a " + amount + " LPT stake in round " + eventObj.data.withdrawRound;
+          if (amount < thresholdFees){
+            continue;
+          }
+          const txt = " withdrew a " + amount.toFixed(2) + " LPT stake in round " + eventObj.data.withdrawRound;
           finalEventList.push({
             eventType: "Withdraw",
             eventDescription: txt,
@@ -193,11 +200,15 @@ export const getEvents = () => async dispatch => {
             eventTo: "",
             eventColour: withdrawStakeColour,
             transactionHash: currentTx,
-            transactionUrl: currentUrl
+            transactionUrl: currentUrl,
+            transactionBlock: currentBlock
           });
         } else if (eventObj.name === "WithdrawFees") {
           const amount = parseFloat(eventObj.data.amount) / 1000000000000000000;
-          const txt = " withdrew " + amount + " LPT earned fees";
+          if (amount < thresholdFees){
+            continue;
+          }
+          const txt = " withdrew " + amount.toFixed(2) + " LPT earned fees";
           finalEventList.push({
             eventType: "Withdraw",
             eventDescription: txt,
@@ -206,7 +217,8 @@ export const getEvents = () => async dispatch => {
             eventTo: "",
             eventColour: withdrawStakeColour,
             transactionHash: currentTx,
-            transactionUrl: currentUrl
+            transactionUrl: currentUrl,
+            transactionBlock: currentBlock
           });
         }
         // Always split off TranscoderUpdate as a separate Update Event
@@ -223,7 +235,8 @@ export const getEvents = () => async dispatch => {
             eventTo: "",
             eventColour: updateColour,
             transactionHash: currentTx,
-            transactionUrl: currentUrl
+            transactionUrl: currentUrl,
+            transactionBlock: currentBlock
           });
         }
         // Always split off EarningsClaimed as a separate Claim Event
@@ -253,7 +266,8 @@ export const getEvents = () => async dispatch => {
             eventTo: "",
             eventColour: claimColour,
             transactionHash: currentTx,
-            transactionUrl: currentUrl
+            transactionUrl: currentUrl,
+            transactionBlock: currentBlock
           });
         }
         // Always split off Reward as a separate Reward Event
@@ -272,7 +286,8 @@ export const getEvents = () => async dispatch => {
             eventTo: "",
             eventColour: rewardColour,
             transactionHash: currentTx,
-            transactionUrl: currentUrl
+            transactionUrl: currentUrl,
+            transactionBlock: currentBlock
           });
         }
         // Extract useful info from other types of Event

src/eventButton.js

@@ -3,6 +3,7 @@ import {
   getOrchestratorInfo
 } from "./actions/livepeer";
 import { useDispatch } from 'react-redux';
+import Block from "./BlockViewer";
 
 /// Displays a single event. Sets selected Orchestrator info in the redux store
 
@@ -40,26 +41,36 @@ const EventButton = (obj) => {
       {eventTo}
     </div>
   }
+
+  let blockNumber;
+  if (obj.isFirstOfBlock) {
+    blockNumber = <Block block={obj.isFirstOfBlock} />
+
+  }
+
   return (
-    <div className="rowAlignLeft" style={{ backgroundColor: obj.eventObj.eventColour, borderRadius: "1.2em", width: 'unset' }}>
+    <div className="stroke" style={{ width: '100%', padding: 0, margin: 0 }}>
-      <div className="rowAlignLeft" style={{ flex: '1', width: 'unset' }}>
+      {blockNumber}
-        <a className="selectOrch" href={obj.eventObj.transactionUrl}>
+      <div className="rowAlignLeft" style={{ backgroundColor: obj.eventObj.eventColour, borderRadius: "1.2em", width: '100%' }}>
-          <img alt="" src="arb.svg" width="30" height="30" />
+        <div className="rowAlignLeft" style={{ flex: '1', width: 'unset' }}>
-        </a>
+          <a className="selectOrch" href={obj.eventObj.transactionUrl}>
-        <a className="selectOrch" href={"https://explorer.livepeer.org/accounts/" + obj.eventObj.eventCaller}>
+            <img alt="" src="arb.svg" width="30" height="30" />
-          <img alt="" src="livepeer.png" width="30" height="30" />
+          </a>
-        </a>
+          <a className="selectOrch" href={"https://explorer.livepeer.org/accounts/" + obj.eventObj.eventCaller}>
-        <div className="rowAlignLeft" style={{ flex: '1', width: '100%', padding: 0, margin: 0 }}>
+            <img alt="" src="livepeer.png" width="30" height="30" />
-          {eventCaller}
+          </a>
+          <div className="rowAlignLeft" style={{ flex: '1', width: '100%', padding: 0, margin: 0 }}>
+            {eventCaller}
+          </div>
         </div>
-      </div>
+        <div className="rowAlignLeft" style={{ flex: '2', width: 'unset', padding: 0, margin: 0 }}>
-      <div className="rowAlignLeft" style={{ flex: '2', width: 'unset', padding: 0, margin: 0 }}>
+          <span className="rowAlignLeft elipsText">
-        <span className="rowAlignLeft elipsText">
+            {obj.eventObj.eventDescription}
-          {obj.eventObj.eventDescription}
+          </span>
-        </span>
+          {eventRightAddr}
-        {eventRightAddr}
+        </div>
-      </div>
+      </div >
-    </div >
+    </div>
   )
 }
 

src/eventViewer.js

@@ -41,6 +41,7 @@ const EventViewer = (obj) => {
   let unbondActivatedColour;
   unbondActivatedColour = unbondActivated ? unbondColour : greyColour;
 
+  let prevBlock = 0;
 
   return (
     <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%' }}>
@@ -129,10 +130,19 @@ const EventViewer = (obj) => {
 
               if (unfiltered < maxShown) {
                 unfiltered++;
-                return <EventButton
+                if (prevBlock === eventObj.transactionBlock) {
-                  key={eventObj.transactionHash + idx}
+                  return <EventButton
-                  eventObj={eventObj}
+                    key={eventObj.transactionHash + idx}
-                />
+                    eventObj={eventObj}
+                  />
+                } else {
+                  prevBlock = eventObj.transactionBlock;
+                  return <EventButton
+                    key={eventObj.transactionHash + idx}
+                    eventObj={eventObj}
+                    isFirstOfBlock={prevBlock}
+                  />
+                }
               }
             })}
           </div>

src/orchestratorViewer.js

@@ -113,7 +113,7 @@ const Orchestrator = (obj) => {
                     return (
                       <div className="rowAlignLeft" key={"delegator" + idx} style={{ marginLeft: '1em', borderBottom: '2px solid rgba(15,15,15,0.05)' }}>
                         <Address address={delObj.id} seed={"delegator" + idx + delObj.id} />
-                        <div className="strokeSmollLeft">
+                        <div className="rowAlignRight">
                           <p className="darkText">{parseFloat(delObj.bondedAmount).toFixed(2)} LPT since round {delObj.startRound}</p>
                         </div>
                       </div>