Merge tickets with events in render

src/actions/livepeer.js

@@ -10,7 +10,7 @@ const unbondColour = "rgba(122, 23, 51, 0.3)";
 const claimColour = "rgba(77, 91, 42, 0.3)";
 
 const ticketTransferColour = "rgba(88, 91, 42, 0.3)";
-const ticketRedeemColour = "rgba(42, 91, 44, 0.3)";
+const ticketRedeemColour = "rgba(42, 44, 91, 0.3)";
 
 const thresholdStaking = 0.001;
 const thresholdFees = 0.00009;
@@ -96,7 +96,7 @@ export const getEvents = () => async dispatch => {
     let tmpWhen = "";
     // Group Events into transactions. Always reset when the transactionID changes
     {
-      for (const eventObj of data.slice(0).reverse()) {
+      for (const eventObj of data) {
         if (currentTx === "") {
           currentTx = eventObj.transactionHash;
           currentUrl = eventObj.transactionUrl;
@@ -370,7 +370,7 @@ export const getTickets = () => async dispatch => {
     let currentTime = 0;
     // Parse Tickets
     {
-      for (const eventObj of data.slice(0).reverse()) {
+      for (const eventObj of data) {
         if (currentTx === "") {
           currentTx = eventObj.transactionHash;
           currentUrl = eventObj.transactionUrl;

src/eventViewer.js

@@ -11,6 +11,7 @@ const withdrawStakeColour = "rgba(115, 110, 22, 0.3)";
 const stakeColour = "rgba(71, 23, 122, 0.3)";
 const claimColour = "rgba(77, 91, 42, 0.3)";
 const unbondColour = "rgba(122, 23, 51, 0.3)";
+const ticketRedeemColour = "rgba(42, 44, 91, 0.3)";
 const greyColour = "rgba(122, 128, 127, 0.3)";
 
 const defaultMaxShown = 100;
@@ -23,6 +24,7 @@ const EventViewer = (obj) => {
   const [withdrawActivated, setWithdrawActivated] = useState(true);
   const [stakeActivated, setStakeActivated] = useState(true);
   const [delegatorRewardActivated, setDelegatorRewardActivated] = useState(true);
+  const [ticketRedemptionActivated, setTicketRedemptionActivated] = useState(true);
   const [unbondActivated, setUnbondActivated] = useState(true);
   console.log("Rendering EventViewer");
   let unfiltered = 0;
@@ -40,6 +42,8 @@ const EventViewer = (obj) => {
   stakeActivatedColour = stakeActivated ? stakeColour : greyColour;
   let delegatorActivatedColour;
   delegatorActivatedColour = delegatorRewardActivated ? claimColour : greyColour;
+  let ticketActivatedColour;
+  ticketActivatedColour = ticketRedemptionActivated ? ticketRedeemColour : greyColour;
   let unbondActivatedColour;
   unbondActivatedColour = unbondActivated ? unbondColour : greyColour;
 
@@ -75,72 +79,101 @@ const EventViewer = (obj) => {
   }
 
   let eventList = [];
-  for (const eventObj of obj.events) {
+  let thisEvent = {};
+  let eventIdx = obj.events.length - 1;
+  let ticketIdx = obj.tickets.length - 1;
+  while (eventIdx >= 0 || ticketIdx >= 0) {
+    const latestEvent = obj.events[eventIdx];
+    let latestEventTime = 0;
+    if (eventIdx >= 0){
+      latestEventTime = latestEvent.transactionTime;
+    }
+    const latestTicket = obj.tickets[ticketIdx];
+    let latestTicketTime = 0;
+    if (ticketIdx >= 0){
+      latestTicketTime = latestTicket.transactionTime;
+    }
+    if (latestEventTime > latestTicketTime){
+      thisEvent = latestEvent;
+      eventIdx -= 1;
+    }else if (latestTicketTime){
+      thisEvent = latestTicket;
+      ticketIdx -= 1;
+    }else{
+      console.log("error, breaky breaky");
+      break;
+    }
     if (unfiltered > obj.maxAmount) {
       break;
     }
     // Filter by minimum value
     if (obj.amountFilter !== "") {
-      if (parseFloat(obj.amountFilter) > eventObj.eventValue) {
+      if (parseFloat(obj.amountFilter) > thisEvent.eventValue) {
         continue;
       }
     }
     // Filter name on from, to, caller
     if (obj.searchTerm !== "") {
       let isFiltered = true;
-      if (eventObj.eventCaller.toLowerCase().includes(obj.searchTerm.toLowerCase())) isFiltered = false;
-      if (eventObj.eventFrom.toLowerCase().includes(obj.searchTerm.toLowerCase())) isFiltered = false;
-      if (eventObj.eventTo.toLowerCase().includes(obj.searchTerm.toLowerCase())) isFiltered = false;
+      if (thisEvent.eventCaller.toLowerCase().includes(obj.searchTerm.toLowerCase())) isFiltered = false;
+      if (thisEvent.eventFrom.toLowerCase().includes(obj.searchTerm.toLowerCase())) isFiltered = false;
+      if (thisEvent.eventTo.toLowerCase().includes(obj.searchTerm.toLowerCase())) isFiltered = false;
       if (isFiltered) continue;
     }
     // Filter Events on filter buttons
     let isFiltered = true;
-    // Check boolean filters on eventObj.eventType
+    // Check boolean filters on thisEvent.eventType
     let count = 0;
     if (filterActivated) {
-      if (eventObj.eventType === "Activate") {
+      if (thisEvent.eventType === "Activate") {
         isFiltered = false;
       }
       count++;
     }
     if (rewardActivated) {
-      if (eventObj.eventType === "Reward") {
+      if (thisEvent.eventType === "Reward") {
         isFiltered = false;
       }
       count++;
     }
     if (updateActivated) {
-      if (eventObj.eventType === "Update") {
+      if (thisEvent.eventType === "Update") {
         isFiltered = false;
       }
       count++;
     }
     if (withdrawActivated) {
-      if (eventObj.eventType === "Withdraw") {
+      if (thisEvent.eventType === "Withdraw") {
         isFiltered = false;
       }
       count++;
     }
     if (stakeActivated) {
-      if (eventObj.eventType === "Stake") {
+      if (thisEvent.eventType === "Stake") {
         isFiltered = false;
       }
       count++;
     }
     if (stakeActivated) {
-      if (eventObj.eventType === "Migrate") {
+      if (thisEvent.eventType === "Migrate") {
         isFiltered = false;
       }
       count++;
     }
     if (unbondActivated) {
-      if (eventObj.eventType === "Unbond") {
+      if (thisEvent.eventType === "Unbond") {
         isFiltered = false;
       }
       count++;
     }
     if (delegatorRewardActivated) {
-      if (eventObj.eventType === "Claim") {
+      if (thisEvent.eventType === "Claim") {
+        isFiltered = false;
+      }
+      count++;
+    }
+    if (ticketRedemptionActivated) {
+      if (thisEvent.eventType === "RedeemTicket") {
         isFiltered = false;
       }
       count++;
@@ -151,19 +184,19 @@ const EventViewer = (obj) => {
 
     if (unfiltered < obj.maxAmount) {
       unfiltered++;
-      if (prevBlock === eventObj.transactionBlock) {
+      if (prevBlock === thisEvent.transactionBlock) {
         eventList.push(<EventButton
-          key={eventObj.transactionHash + unfiltered}
-          eventObj={eventObj}
+          key={thisEvent.transactionHash + unfiltered}
+          eventObj={thisEvent}
           setSearchTerm={obj.setSearchTerm}
         />);
       } else {
-        prevBlock = eventObj.transactionBlock;
+        prevBlock = thisEvent.transactionBlock;
         eventList.push(<EventButton
-          key={eventObj.transactionHash + unfiltered}
-          eventObj={eventObj}
+          key={thisEvent.transactionHash + unfiltered}
+          eventObj={thisEvent}
           isFirstOfBlock={prevBlock}
-          time={eventObj.transactionTime}
+          time={thisEvent.transactionTime}
           setSearchTerm={obj.setSearchTerm}
         />);
       }
@@ -296,6 +329,11 @@ const EventViewer = (obj) => {
               }}>
                 <h3>Unbond</h3>
               </button>
+              <button className={ticketRedemptionActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: ticketActivatedColour }} onClick={() => {
+                setTicketRedemptionActivated(!ticketRedemptionActivated);
+              }}>
+                <h3>Tickets</h3>
+              </button>
             </div>
           </div>
         </div>

src/livepeer.js

@@ -6,7 +6,6 @@ import { getOrchestratorInfo, clearOrchestrator } from "./actions/livepeer";
 import EventViewer from "./eventViewer";
 import Orchestrator from "./orchestratorViewer";
 import Stat from "./statViewer";
-import TicketViewer from './ticketViewer';
 
 // Shows the EventViewer and other Livepeer related info
 const defaultMaxShown = 100;
@@ -16,7 +15,6 @@ const Livepeer = (obj) => {
   const [maxAmount, setMaxAmount] = useState(defaultMaxShown);
   const [prefill, setPrefill] = useSearchParams();
   const [searchTerm, setSearchTerm] = useState("");
-  const [showTickets, setShowTickets] = useState("");
   const dispatch = useDispatch();
   const livepeer = useSelector((state) => state.livepeerstate);
   const [redirectToHome, setRedirectToHome] = useState(false);
@@ -136,12 +134,6 @@ const Livepeer = (obj) => {
   if (livepeer.tickets) {
     ticketList = livepeer.tickets;
   }
-  if (showTickets) {
-    ticketBit =
-      <div className="rightContent">
-        <TicketViewer tickets={ticketList} forceVertical={true} />
-      </div>
-  }
 
   let thisOrchObj;
   let headerString;
@@ -199,12 +191,6 @@ const Livepeer = (obj) => {
           }}>
             <h4>✖️ Clear</h4>
           </button>
-          <p>Tickets</p>
-          <div className="toggle-container" onClick={() => setShowTickets(!showTickets)}>
-            <div className={`dialog-button ${showTickets ? "" : "disabled"}`}>
-              {showTickets ? "Show" : "Hide"}
-            </div>
-          </div>
           <p>Sidebar</p>
           <div className="toggle-container" onClick={() => setShowSidebar(!showSidebar)}>
             <div className={`dialog-button ${showSidebar ? "" : "disabled"}`}>
@@ -224,9 +210,8 @@ const Livepeer = (obj) => {
         <div className="mainContent">
           <EventViewer events={eventsList} searchTerm={searchTerm} setSearchTerm={setSearchTerm}
             forceVertical={true} showFilter={showFilter} setAmountFilter={setAmountFilter} amountFilter={amountFilter}
-            maxAmount={maxAmount} setMaxAmount={setMaxAmount} />
+            maxAmount={maxAmount} setMaxAmount={setMaxAmount} tickets={ticketList} />
         </div>
-        {ticketBit}
       </div>
     </div >
   );

src/ticketViewer.js

@@ -1,49 +0,0 @@
-import React, { useState } from "react";
-import EventButton from "./eventButton";
-import ScrollContainer from 'react-indiana-drag-scroll';
-
-const TicketViewer = (obj) => {
-  console.log("Rendering TicketViewer");
-  let unfiltered = 0;
-  let prevBlock = 0;
-  let ticketList = [];
-  for (const ticketObj of obj.tickets) {
-    unfiltered++;
-    if (prevBlock === ticketObj.transactionBlock) {
-      ticketList.push(<EventButton
-        key={ticketObj.transactionHash + unfiltered}
-        eventObj={ticketObj}
-        setSearchTerm={obj.setSearchTerm}
-      />);
-    } else {
-      prevBlock = ticketObj.transactionBlock;
-      ticketList.push(<EventButton
-        key={ticketObj.transactionHash + unfiltered}
-        eventObj={ticketObj}
-        isFirstOfBlock={prevBlock}
-        time={ticketObj.transactionTime}
-        setSearchTerm={obj.setSearchTerm}
-      />);
-    }
-  }
-
-  return (
-    <div className="strokeSmollLeft" style={{ padding: 0, margin: 0, height: 'calc( 100vh - 50px)' }}>
-      <div className="row" style={{ padding: 0, margin: 0, width: '100%', height: '100%' }}>
-        <div className="stroke roundedOpaque" style={{ padding: 0, margin: 0, width: 'unset', height: '100%', marginRight: '1em', overflow: 'hidden', marginTop: '1em', overflowX: 'scroll' }}>
-          <div className="content-wrapper" style={{ width: '100%' }}>
-            <ScrollContainer className="overflow-container" hideScrollbars={false}>
-              <div className="overflow-content" style={{ cursor: 'grab', paddingTop: 0 }}>
-                <div className={obj.forceVertical ? "flexContainer forceWrap" : "flexContainer"} style={{ margin: 0, textAlign: 'center', alignItems: 'center', justifyContent: 'center' }}>
-                  {ticketList}
-                </div>
-              </div>
-            </ScrollContainer>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default TicketViewer;