Prerenderer which makes everything awesome

src/actions/livepeer.js

@@ -1,6 +1,18 @@
 import * as apiUtil from "../util/livepeer";
 import { receiveErrors } from "./error";
 
+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(115, 110, 22, 0.3)";
+const stakeColour = "rgba(71, 23, 122, 0.3)";
+const unbondColour = "rgba(122, 23, 51, 0.3)";
+const claimColour = "rgba(77, 91, 42, 0.3)";
+const migrateColour = "rgba(56, 23, 122, 0.3)";
+
+const thresholdStaking = 0.001;
+const thresholdFees = 0.00009;
+
 export const RECEIVE_QUOTES = "RECEIVE_QUOTES";
 export const RECEIVE_BLOCKCHAIN_DATA = "RECEIVE_BLOCKCHAIN_DATA";
 export const RECEIVE_EVENTS = "RECEIVE_EVENTS";
@@ -44,8 +56,262 @@ export const getBlockchainData = () => async dispatch => {
 export const getEvents = () => async dispatch => {
   const response = await apiUtil.getEvents();
   const data = await response.json();
+  // Combine raw list of events into a list of useful Events
   if (response.ok) {
-    return dispatch(setEvents(data));
+    let finalEventList = [];
+    // Current transaction we are processing
+    let txCounter = 0;
+    let currentTx = "";
+    let currentUrl = "";
+    // 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
+    let eventCaller = "";           // address we will display on the left side
+    let eventFrom = "";             // address from which X gets taken
+    let eventTo = "";               // address to which X gets sent
+    let eventColour = "rgba(255,255,255,0.5)";
+    let eventContainsBond = false;
+    let eventContainsTranscoderActivated = false;
+    let eventContainsUnbond = false;
+    let eventContainsRebond = false;
+    let eventContainsTransferBond = false;
+    let eventContainsTranscoderUpdate = false;
+    let eventContainsEarningsClaimed = false;
+    let eventContainsReward = false;
+    // Temp vars for the current Event we are processing
+    let tmpAmount = 0;
+    let tmpAmountOther = "";
+    let tmpWhen = "";
+    // Group Events into transactions. Always reset when the transactionID changes
+    {
+      for (const eventObj of data.slice(0).reverse()) {
+        if (currentTx === "") {
+          currentTx = eventObj.transactionHash;
+          currentUrl = eventObj.transactionUrl;
+        }
+        // New transaction found
+        if (currentTx !== eventObj.transactionHash) {
+          // Unbond <> TransferBond <> Rebond => Stake Event
+          if (eventContainsUnbond && eventContainsTransferBond && eventContainsRebond) {
+            // If also hasEarningsClaimed => Migrate Event
+            if (eventContainsEarningsClaimed) {
+              eventType = "Migrate";
+              eventColour = migrateColour;
+              eventDescription = "migrated " + tmpAmount.toFixed(2) + " LPT to L2 at";
+            } else {
+              eventType = "Stake";
+              eventColour = stakeColour;
+            }
+          }
+          // (Bond <>) TranscoderActivated => Activate Event
+          else if (eventContainsTranscoderActivated) {
+            eventType = "Activate";
+            eventColour = activationColour;
+            eventFrom = "";
+            eventTo = "";
+            if (eventContainsBond) {
+              eventDescription = "activated with a self stake of " + tmpAmount.toFixed(2) + " LPT and will become active in round " + tmpWhen;
+            } else {
+              eventDescription = "reactivated and will become active in round " + tmpWhen;
+            }
+          }
+          // Lone Unbond => Unbond Event
+          else if (eventContainsUnbond) {
+            eventType = "Unbond";
+            eventColour = unbondColour;
+            eventDescription = "unbonded " + tmpAmount.toFixed(2) + " LPT starting from round " + tmpWhen;
+
+          }
+          // Lone Bond => Stake Event
+          else if (eventContainsBond) {
+            eventType = "Stake";
+            eventColour = stakeColour;
+          }
+          // Lone Rebond => Stake Event
+          else if (eventContainsRebond) {
+            eventType = "Stake";
+            eventColour = stakeColour;
+            eventDescription = "increased their stake with " + tmpAmount.toFixed(2) + " LPT at";
+          }
+
+          // Fill description of Stake Event if it wasn't set yet
+          if (eventType === "Stake" && eventDescription === "") {
+            if (eventFrom === "0x0000000000000000000000000000000000000000") {
+              eventDescription = "staked " + tmpAmount.toFixed(2) + " LPT with";
+            } else {
+              eventDescription = "moved a " + tmpAmount.toFixed(2) + " LPT stake";
+            }
+          }
+          // If we have an eventType at this point, we have a completed Event from the previous transaction
+          if (eventType !== "") {
+            finalEventList.push({
+              eventType,
+              eventDescription,
+              eventCaller,
+              eventFrom,
+              eventTo,
+              eventColour,
+              transactionHash: currentTx,
+              transactionUrl: currentUrl
+            });
+          }
+
+          // Reset event data
+          eventType = "";
+          eventDescription = "";
+          eventCaller = "";
+          eventFrom = "";
+          eventTo = "";
+          eventColour = "";
+          tmpAmount = 0;
+          tmpAmountOther = "";
+          tmpWhen = "";
+          eventContainsBond = false;
+          eventContainsTranscoderActivated = false;
+          eventContainsUnbond = false;
+          eventContainsRebond = false;
+          eventContainsTransferBond = false;
+          eventContainsTranscoderUpdate = false;
+          eventContainsEarningsClaimed = false;
+          eventContainsReward = false;
+          txCounter++;
+          currentTx = eventObj.transactionHash;
+          currentUrl = eventObj.transactionUrl;
+        }
+        // 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;
+          finalEventList.push({
+            eventType: "Withdraw",
+            eventDescription: txt,
+            eventCaller: eventObj.data.delegator.toLowerCase(),
+            eventFrom: "",
+            eventTo: "",
+            eventColour: withdrawStakeColour,
+            transactionHash: currentTx,
+            transactionUrl: currentUrl
+          });
+        } else if (eventObj.name === "WithdrawFees") {
+          const amount = parseFloat(eventObj.data.amount) / 1000000000000000000;
+          const txt = " withdrew " + amount + " LPT earned fees from " + eventObj.data.delegator;
+          finalEventList.push({
+            eventType: "Withdraw",
+            eventDescription: txt,
+            eventCaller: eventObj.data.delegator.toLowerCase(),
+            eventFrom: "",
+            eventTo: "",
+            eventColour: withdrawStakeColour,
+            transactionHash: currentTx,
+            transactionUrl: currentUrl
+          });
+        }
+        // Always split off TranscoderUpdate as a separate Update Event
+        else if (eventObj.name === "TranscoderUpdate") {
+          eventContainsTranscoderUpdate = true;
+          const amount1 = parseFloat(eventObj.data.rewardCut) / 10000;
+          const amount2 = 100 - (eventObj.data.feeShare / 10000);
+          const txt = "changed their reward commission to " + amount1.toFixed(2) + "% and their fee commission to " + amount2.toFixed(2) + "%";
+          finalEventList.push({
+            eventType: "Update",
+            eventDescription: txt,
+            eventCaller: eventObj.data.transcoder.toLowerCase(),
+            eventFrom: "",
+            eventTo: "",
+            eventColour: updateColour,
+            transactionHash: currentTx,
+            transactionUrl: currentUrl
+          });
+        }
+        // Always split off EarningsClaimed as a separate Claim Event
+        else if (eventObj.name === "EarningsClaimed") {
+          eventContainsEarningsClaimed = true;
+          const amount1 = parseFloat(eventObj.data.rewards) / 1000000000000000000;
+          const amount2 = parseFloat(eventObj.data.fees) / 1000000000000000000;
+          if (amount1 < thresholdStaking && amount2 < thresholdFees) {
+            continue;
+          }
+          let txt = "delegator claimed ";
+          if (amount1 > thresholdStaking) {
+            txt += amount1.toFixed(2) + " LPT staking rewards";
+            if (amount2 > thresholdFees) {
+              txt += " and "
+            }
+          }
+          if (amount2 > thresholdFees) {
+            txt += amount2.toFixed(4) + " Eth fee rewards";
+          }
+          txt += " from rounds " + eventObj.data.startRound + " to " + eventObj.data.endRound;
+          finalEventList.push({
+            eventType: "Claim",
+            eventDescription: txt,
+            eventCaller: eventObj.data.delegator.toLowerCase(),
+            eventFrom: eventObj.data.delegate.toLowerCase(),
+            eventTo: "",
+            eventColour: claimColour,
+            transactionHash: currentTx,
+            transactionUrl: currentUrl
+          });
+        }
+        // Always split off Reward as a separate Reward Event
+        else if (eventObj.name === "Reward") {
+          eventContainsReward = true;
+          const amount1 = parseFloat(eventObj.data.amount) / 1000000000000000000;
+          let txt = "called reward worth " + amount1.toFixed(2) + " LPT";
+          if (Math.floor(amount1) == 69) {
+            txt += "... Nice!";
+          }
+          finalEventList.push({
+            eventType: "Reward",
+            eventDescription: txt,
+            eventCaller: eventObj.data.transcoder.toLowerCase(),
+            eventFrom: "",
+            eventTo: "",
+            eventColour: rewardColour,
+            transactionHash: currentTx,
+            transactionUrl: currentUrl
+          });
+        }
+        // Extract useful info from other types of Event
+        else if (eventObj.name === "Bond") {
+          eventContainsBond = true;
+          eventCaller = eventObj.data.delegator.toLowerCase();
+          eventFrom = eventObj.data.oldDelegate.toLowerCase();
+          eventTo = eventObj.data.newDelegate.toLowerCase();
+          tmpAmount = parseFloat(eventObj.data.bondedAmount) / 1000000000000000000;
+          tmpAmountOther = parseFloat(eventObj.data.additionalAmount) / 1000000000000000000;
+        }
+        else if (eventObj.name === "TranscoderActivated") {
+          eventContainsTranscoderActivated = true;
+          eventCaller = eventObj.data.transcoder.toLowerCase();
+          tmpWhen = eventObj.data.activationRound;
+        }
+        else if (eventObj.name === "Unbond") {
+          eventContainsUnbond = true;
+          eventCaller = eventObj.data.delegator.toLowerCase();
+          eventFrom = eventObj.data.delegate.toLowerCase();
+          tmpAmount = parseFloat(eventObj.data.amount) / 1000000000000000000;
+          tmpWhen = eventObj.data.withdrawRound;
+        }
+        else if (eventObj.name === "Rebond") {
+          eventContainsRebond = true;
+          eventCaller = eventObj.data.delegator.toLowerCase();
+          eventTo = eventObj.data.delegate.toLowerCase();
+          tmpAmount = parseFloat(eventObj.data.amount) / 1000000000000000000;
+        }
+        else if (eventObj.name === "TransferBond") {
+          eventContainsTransferBond = true;
+          eventFrom = eventObj.data.oldDelegator.toLowerCase();
+          eventTo = eventObj.data.newDelegator.toLowerCase();
+          tmpAmount = parseFloat(eventObj.data.amount) / 1000000000000000000;
+        } else {
+          console.log("UNIMPLEMENTED: " + eventObj.name);
+        }
+      }
+    }
+    // NOTE: We are throwing away the very oldest Event now, which should be fine.
+    // We can fix this once above wall of text becomes a separate function
+    return dispatch(setEvents(finalEventList));
   }
   return dispatch(receiveErrors(data));
 };

src/eventButton.js

@@ -6,355 +6,52 @@ import { useDispatch } from 'react-redux';
 
 /// Displays a single event. Sets selected Orchestrator info in the redux store
 
-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 unbondColour = "rgba(122, 23, 51, 0.3)";
-const claimColour = "rgba(77, 91, 42, 0.3)";
-const migrateColour = "rgba(56, 23, 122, 0.3)";
-
-const thresholdStaking = 0.001;
-const thresholdFees = 0.00009;
-
 const EventButton = (obj) => {
   const dispatch = useDispatch();
-  // 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 hasRebondTransaction = false;
-  let hasUnbondTransaction = false;
-  let hasTransferbondTransaction = false;
-  let hasEarningsClaimed = false;
-  let hasActivation = false;
-  let isOnlyBondRelated = true;
-  let thisColour = "";
 
-  // Which we will fill in by going over all of the events once
+  let eventArrow;
-  thisData.map(eventObj => {
-    // Bond: contains amount the transaction is about and who is participating
-    if (eventObj.name === "Bond" && !hasEarningsClaimed) {
-      transactionCaller = eventObj.data.delegator.toLowerCase();
-      transactionFrom = eventObj.data.oldDelegate.toLowerCase();
-      transactionTo = eventObj.data.newDelegate.toLowerCase();
-      transactionAmount = parseFloat(eventObj.data.bondedAmount) / 1000000000000000000;
-      transactionAdditionalAmount = parseFloat(eventObj.data.additionalAmount) / 1000000000000000000;
-      hasBondTransaction = true;
-    }
-    // Unbond: defines transactionWhen. Defines transactionAmount as X / 1000000000000000000 LPT
-    if (eventObj.name === "Unbond") {
-      // Caller and from will get overwritten by TransferBond or Rebond, but might as well set them
-      if (isOnlyBondRelated || hasEarningsClaimed) {
-        transactionName = "Unbond";
-        hasEarningsClaimed = false;
-        transactionCaller = eventObj.data.delegate.toLowerCase();
-        transactionFrom = eventObj.data.delegator.toLowerCase();
-        transactionWhen = eventObj.data.withdrawRound;
-        transactionAmount = parseFloat(eventObj.data.amount) / 1000000000000000000;
-        thisColour = unbondColour;
-      }
-      hasUnbondTransaction = true;
-    }
-    // TransferBond: defines to transactionFrom and transactionTo. Defines transactionAmount as X / 1000000000000000000 LPT
-    if (eventObj.name === "TransferBond" && !hasBondTransaction && !hasRebondTransaction) {
-      // transactionFrommight get overwritten by Rebond, but might as well set them
-      if (isOnlyBondRelated) {
-        transactionFrom = eventObj.data.oldDelegator.toLowerCase();
-        transactionTo = eventObj.data.newDelegator.toLowerCase();
-        transactionAmount = parseFloat(eventObj.data.amount) / 1000000000000000000;
-      }
-      hasTransferbondTransaction = true;
-    }
-    // TransferBond: defines to transactionFrom and transactionTo. Defines transactionAmount as X / 1000000000000000000 LPT
-    if (eventObj.name === "Rebond") {
-      // transactionCaller might get overwritten by TranserBond, but might as well set them
-      if (isOnlyBondRelated) {
-        transactionTo = eventObj.data.delegate.toLowerCase();
-        transactionCaller = eventObj.data.delegator.toLowerCase();
-        transactionAmount = parseFloat(eventObj.data.amount) / 1000000000000000000;
-      }
-      if (hasEarningsClaimed) {
-        transactionName = "Migrate";
-        hasEarningsClaimed = false;
-        transactionTo = eventObj.data.delegate.toLowerCase();
-        transactionCaller = eventObj.data.delegator.toLowerCase();
-        transactionAmount = parseFloat(eventObj.data.amount) / 1000000000000000000;
-        thisColour = migrateColour;
-      }
-      hasRebondTransaction = true;
-    }
-
-    // TranscoderActivated: defines transactionName as a stake claim. Defines transactionWhen
-    if (eventObj.name === "EarningsClaimed" && !hasUnbondTransaction && !hasActivation && !hasBondTransaction && !hasRebondTransaction) {
-      transactionName = "Claim";
-      transactionWhen = eventObj.data.endRound;
-      transactionFrom = eventObj.data.delegate;
-      transactionCaller = eventObj.data.delegator;
-      transactionAmount = parseFloat(eventObj.data.rewards) / 1000000000000000000;
-      transactionAdditionalAmount = parseFloat(eventObj.data.fees) / 1000000000000000000;
-      thisColour = claimColour;
-      isOnlyBondRelated = false;
-      hasEarningsClaimed = 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.toLowerCase();
-      }
-      thisColour = activationColour;
-      isOnlyBondRelated = false;
-      hasActivation = true;
-    }
-    // TranscoderActivated: defines transactionName. Defines transactionAmount as X / 1000000000000000000 LPT
-    if (eventObj.name === "Reward") {
-      transactionName = "Reward";
-      transactionCaller = eventObj.data.transcoder.toLowerCase();
-      transactionAmount = parseFloat(eventObj.data.amount) / 1000000000000000000;
-      thisColour = rewardColour;
-      isOnlyBondRelated = false;
-    }
-    // TranscoderUpdate: defines transactionName. Defines transactionAmount as rewardCut and transactionAdditionalAmount as feeCut
-    if (eventObj.name === "TranscoderUpdate") {
-      transactionName = "Update";
-      transactionCaller = eventObj.data.transcoder.toLowerCase();
-      transactionAmount = eventObj.data.rewardCut / 10000;
-      transactionAdditionalAmount = 100 - (eventObj.data.feeShare / 10000);
-      thisColour = updateColour;
-      isOnlyBondRelated = false;
-    }
-    // WithdrawStake: defines transactionName. Defines transactionAmount as rewardCut and transactionAdditionalAmount as feeCut
-    if (eventObj.name === "WithdrawStake") {
-      transactionName = "Withdraw";
-      transactionCaller = eventObj.data.delegator.toLowerCase();
-      transactionAmount = parseFloat(eventObj.data.amount) / 1000000000000000000;
-      transactionWhen = eventObj.data.withdrawRound;
-      thisColour = withdrawStakeColour;
-      isOnlyBondRelated = false;
-    }
-    if (eventObj.name === "WithdrawFees") {
-      // console.log("Skipping WithdrawFees");
-    }
-  })
-
-  // If we only had a bond transaction and nothing else, this is a stake
-  if (hasBondTransaction && transactionName == "") {
-    transactionName = "Stake";
-    thisColour = stakeColour;
-  }
-
-  // Lone Rebond, treat as new stake
-  if (hasRebondTransaction && transactionName == "") {
-    transactionName = "Rebond";
-    thisColour = stakeColour;
-  }
-
-  // Check name filter on transactionCaller, transactionFrom, transactionTo
-  if (obj.searchTerm) {
-    if (obj.searchTerm !== "") {
-      let isFiltered = true;
-      if (transactionCaller.toLowerCase().includes(obj.searchTerm.toLowerCase())) isFiltered = false;
-      if (transactionFrom.toLowerCase().includes(obj.searchTerm.toLowerCase())) isFiltered = false;
-      if (transactionTo.toLowerCase().includes(obj.searchTerm.toLowerCase())) isFiltered = false;
-      if (isFiltered) return null;
-    }
-  }
-  let isFiltered = true;
-  // Check boolean filters on transactionName
-  let count = 0;
-  if (obj.filterActivated) {
-    if (transactionName === "Activated") {
-      isFiltered = false;
-    }
-    count++;
-  }
-  if (obj.rewardActivated) {
-    if (transactionName === "Reward") {
-      isFiltered = false;
-    }
-    count++;
-  }
-  if (obj.updateActivated) {
-    if (transactionName === "Update") {
-      isFiltered = false;
-    }
-    count++;
-  }
-  if (obj.withdrawActivated) {
-    if (transactionName === "Withdraw") {
-      isFiltered = false;
-    }
-    count++;
-  }
-  if (obj.stakeActivated) {
-    if (transactionName === "Stake") {
-      isFiltered = false;
-    }
-    count++;
-  }
-  if (obj.stakeActivated) {
-    if (transactionName === "Rebond") {
-      isFiltered = false;
-    }
-    count++;
-  }
-  if (obj.stakeActivated) {
-    if (transactionName === "Migrate") {
-      isFiltered = false;
-    }
-    count++;
-  }
-  if (obj.unbondActivated) {
-    if (transactionName === "Unbond") {
-      isFiltered = false;
-    }
-    count++;
-  }
-  if (obj.delegatorRewardActivated) {
-    if (transactionName === "Claim") {
-      isFiltered = false;
-    }
-    count++;
-  }
-  if (isFiltered && count) {
-    return null;
-  }
-
-  // Displays info specific to a type of transactions
-  let eventSpecificInfo;
   let eventTo;
   let eventFrom;
-  if (transactionName === "Reward") {
+  let eventCaller;
-    if (transactionAmount - 69 < 1 && transactionAmount - 69 > 0) {
+  if (obj.eventObj.eventFrom === "0x0000000000000000000000000000000000000000") {
-      eventSpecificInfo =
+    obj.eventObj.eventFrom = "";
-        <div className="rowAlignLeft">
-          <p>called reward worth {transactionAmount.toFixed(2)} LPT. nice</p>
-        </div>
-    } else {
-      eventSpecificInfo =
-        <div className="rowAlignLeft">
-          <p>called reward worth {transactionAmount.toFixed(2)} LPT</p>
-        </div>
   }
-  } else if (transactionName === "Claim") {
+  if (obj.eventObj.eventTo === "0x0000000000000000000000000000000000000000") {
-    if (transactionFrom == "0x0000000000000000000000000000000000000000") {
+    obj.eventObj.eventTo = "";
-      console.log("EMPTY CLAIM " + thisURL);
-      console.log(thisData);
-      return null;
   }
-    let claimString = "delegator claimed ";
+  if (obj.eventObj.eventTo && obj.eventObj.eventFrom) {
-    if (transactionAmount > thresholdStaking) {
-      claimString += transactionAmount.toFixed(2) + " LPT staking rewards";
-      if (transactionAdditionalAmount > thresholdFees) {
-        claimString += " and "
-      }
-    }
-    if (transactionAdditionalAmount > thresholdFees) {
-      claimString += transactionAdditionalAmount.toFixed(4) + " Eth fee rewards";
-    }
-    eventSpecificInfo =
-      <div className="rowAlignLeft">
-        <p>{claimString} at</p>
-      </div>
-    eventFrom = <button className="selectOrch" onClick={() => { dispatch(getOrchestratorInfo(transactionFrom)) }} >{transactionFrom}</button>;
-  } else if (transactionName === "Update") {
-    eventSpecificInfo =
-      <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 === "Unbond") {
-    eventSpecificInfo =
-      <div className="rowAlignLeft">
-        <p>unbonded {transactionAmount.toFixed(2)} LPT starting from round {transactionWhen}</p>
-      </div>
-    eventFrom = <button className="selectOrch" onClick={() => { dispatch(getOrchestratorInfo(transactionFrom)) }} >{transactionFrom}</button>;
-  } else if (transactionName === "Stake") {
-    eventTo = <button className="selectOrch" onClick={() => { dispatch(getOrchestratorInfo(transactionTo)) }} >{transactionTo}</button>;
-    if (transactionFrom == "0x0000000000000000000000000000000000000000") {
-      eventSpecificInfo =
-        <div className="rowAlignLeft">
-          <p> staked {transactionAmount.toFixed(2)} LPT to </p>
-        </div>
-    } else {
-      eventFrom = <button className="selectOrch" onClick={() => { dispatch(getOrchestratorInfo(transactionFrom)) }} >{transactionFrom}</button>;
-      eventSpecificInfo =
-        <div className="rowAlignLeft">
-          <p>moved {transactionAmount.toFixed(2)} LPT stake</p>
-        </div>
-    }
-  } else if (transactionName === "Rebond") {
-    eventTo = <button className="selectOrch" onClick={() => { dispatch(getOrchestratorInfo(transactionTo)) }} >{transactionTo}</button>;
-    eventSpecificInfo =
-      <div className="rowAlignLeft">
-        <p>increased their stake with {transactionAmount.toFixed(2)} LPT at</p>
-      </div>
-  } else if (transactionName === "Migrate") {
-    eventTo = <button className="selectOrch" onClick={() => { dispatch(getOrchestratorInfo(transactionTo)) }} >{transactionTo}</button>;
-    eventSpecificInfo =
-      <div className="rowAlignLeft">
-        <p>migrated {transactionAmount.toFixed(2)} LPT to L2 at</p>
-      </div>
-  } else if (transactionName === "Withdraw") {
-    eventSpecificInfo =
-      <div className="rowAlignLeft">
-        <p>withdrew {(transactionAmount).toFixed(2)} LPT in round {transactionWhen}</p>
-      </div>
-  } else if (transactionName === "Activated") {
-    if (hasBondTransaction) {
-      eventSpecificInfo =
-        <div className="rowAlignLeft">
-          <p>activated with a self stake of {transactionAmount.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="rowAlignLeft">
-          <p>reactivated and will become active in round {transactionWhen}</p>
-        </div>
-    }
-  } else {
-    console.log("UNIMPLEMENTED " + thisURL);
-    console.log(thisData);
-    return null;
-  }
-
-  // IF ON MOBILE
-  // transactionCaller.substring(0,8)+"..."
-  let eventArrow;
-  if(eventTo && eventFrom){
     eventArrow = <p>→</p>;
   }
+  if (obj.eventObj.eventTo) {
+    eventTo = <button className="selectOrch" onClick={() => { dispatch(getOrchestratorInfo(obj.eventObj.eventTo)) }} >{obj.eventObj.eventTo}</button>
+  }
+  if (obj.eventObj.eventFrom) {
+    eventFrom = <button className="selectOrch" onClick={() => { dispatch(getOrchestratorInfo(obj.eventObj.eventFrom)) }} >{obj.eventObj.eventFrom}</button>
+  }
+  if (obj.eventObj.eventCaller) {
+    eventCaller =
+      <button className="selectOrch" onClick={() => { dispatch(getOrchestratorInfo(obj.eventObj.eventCaller)) }} >{obj.eventObj.eventCaller}</button>
+  }
 
   return (
-    <div className="row" style={{ backgroundColor: thisColour, borderRadius: "1.2em" }}>
+    <div className="rowAlignLeft" style={{ backgroundColor: obj.eventObj.eventColour, borderRadius: "1.2em", width: 'unset' }}>
-      <div style={{ flexDirection: 'row', display: "flex" }}>
+      <div className="rowAlignLeft" style={{ width: 'unset' }}>
-        <a href={"https://explorer.livepeer.org/accounts/" + transactionCaller}>
+        <a href={obj.eventObj.transactionUrl}>
+          <img alt="" src="arb.svg" width="30" height="30" />
+        </a>
+        <a href={"https://explorer.livepeer.org/accounts/" + obj.eventObj.eventCaller}>
           <img alt="" src="livepeer.png" width="30" height="30" />
         </a>
-        <div className="row">
+        {eventCaller}
-          <button className="selectOrch" onClick={() => { dispatch(getOrchestratorInfo(transactionCaller)) }} >{transactionCaller}</button>
       </div>
+      <div className="rowAlignLeft">
+        {obj.eventObj.eventDescription}
       </div>
-      {eventSpecificInfo}
+      <div className="row" style={{ width: 'unset'}}>
         {eventTo}
         {eventArrow}
         {eventFrom}
-      <a href={thisURL}>
+      </div>
-        <img alt="" src="arb.svg" width="30" height="30" />
-      </a>
     </div>
   )
 }

src/eventViewer.js

@@ -7,32 +7,40 @@ import ReactPaginate from 'react-paginate';
 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 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 greyColour = "rgba(122, 128, 127, 0.3)";
 
 const EventViewer = (obj) => {
   const [searchTerm, setSearchTerm] = useState(obj.prefill || "");
-  const [filterActivated, setFilterActivated] = useState(false);
+  const [filterActivated, setFilterActivated] = useState(true);
-  const [rewardActivated, setRewardActivated] = useState(false);
+  const [rewardActivated, setRewardActivated] = useState(true);
-  const [updateActivated, setUpdateActivated] = useState(false);
+  const [updateActivated, setUpdateActivated] = useState(true);
-  const [withdrawActivated, setWithdrawActivated] = useState(false);
+  const [withdrawActivated, setWithdrawActivated] = useState(true);
-  const [stakeActivated, setStakeActivated] = useState(false);
+  const [stakeActivated, setStakeActivated] = useState(true);
-  const [delegatorRewardActivated, setDelegatorRewardActivated] = useState(false);
+  const [delegatorRewardActivated, setDelegatorRewardActivated] = useState(true);
-  const [unbondActivated, setUnbondActivated] = useState(false);
+  const [unbondActivated, setUnbondActivated] = useState(true);
   console.log("Rendering EventViewer");
+  let unfiltered = 0;
+
+  let filterActivatedColour;
+  filterActivatedColour = filterActivated ? activationColour : greyColour;
+  let rewardActivatedColour;
+  rewardActivatedColour = rewardActivated ? rewardColour : greyColour;
+  let updateActivatedColour;
+  updateActivatedColour = updateActivated ? updateColour : greyColour;
+  let withdrawActivatedColour;
+  withdrawActivatedColour = withdrawActivated ? withdrawStakeColour : greyColour;
+  let stakeActivatedColour;
+  stakeActivatedColour = stakeActivated ? stakeColour : greyColour;
+  let delegatorActivatedColour;
+  delegatorActivatedColour = delegatorRewardActivated ? claimColour : greyColour;
+  let unbondActivatedColour;
+  unbondActivatedColour = unbondActivated ? unbondColour : greyColour;
 
-  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: '300px', left: '0px', right: '0px', overflowY: 'auto', overflowX: 'hidden', width: '100%' }}>
       <div className="fixed-container" style={{ padding: 0, width: '300px' }}>
@@ -46,78 +54,113 @@ const EventViewer = (obj) => {
       <div className="content-wrapper" style={{ alignItems: 'stretch', width: '100%' }}>
         <ScrollContainer className="overflow-container" hideScrollbars={false}>
           <div className="overflow-content" style={{ cursor: 'grab', paddingTop: 0 }}>
-            {obj.events.slice(0).reverse().map((eventObj, idx) => {
+            {obj.events.map((eventObj, idx) => {
-              // New transaction found
+              // Filter name on from, to, caller
-              if (currentTx != eventObj.transactionHash) {
+              if (searchTerm !== "") {
-                // Save old event data
+                let isFiltered = true;
-                eventBundle = eventCache;
+                if (eventObj.eventCaller.toLowerCase().includes(searchTerm.toLowerCase())) isFiltered = false;
-                finalUrl = currentUrl;
+                if (eventObj.eventFrom.toLowerCase().includes(searchTerm.toLowerCase())) isFiltered = false;
-                finalHash = currentHash;
+                if (eventObj.eventTo.toLowerCase().includes(searchTerm.toLowerCase())) isFiltered = false;
-                finalIdx = txCounter;
+                if (isFiltered) return null;
-                // 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;
               }
-              // Push if not completely filtered out
+              // Filter Events on filter buttons
-              if (eventBundle.length) {
+              let isFiltered = true;
+              // Check boolean filters on eventObj.eventType
+              let count = 0;
+              if (filterActivated) {
+                if (eventObj.eventType === "Activate") {
+                  isFiltered = false;
+                }
+                count++;
+              }
+              if (rewardActivated) {
+                if (eventObj.eventType === "Reward") {
+                  isFiltered = false;
+                }
+                count++;
+              }
+              if (updateActivated) {
+                if (eventObj.eventType === "Update") {
+                  isFiltered = false;
+                }
+                count++;
+              }
+              if (withdrawActivated) {
+                if (eventObj.eventType === "Withdraw") {
+                  isFiltered = false;
+                }
+                count++;
+              }
+              if (stakeActivated) {
+                if (eventObj.eventType === "Stake") {
+                  isFiltered = false;
+                }
+                count++;
+              }
+              if (stakeActivated) {
+                if (eventObj.eventType === "Migrate") {
+                  isFiltered = false;
+                }
+                count++;
+              }
+              if (unbondActivated) {
+                if (eventObj.eventType === "Unbond") {
+                  isFiltered = false;
+                }
+                count++;
+              }
+              if (delegatorRewardActivated) {
+                if (eventObj.eventType === "Claim") {
+                  isFiltered = false;
+                }
+                count++;
+              }
+              if (isFiltered && count) {
+                return null;
+              }
+
+              if (unfiltered < 500) {
+                unfiltered++;
                 return <EventButton
                   key={eventObj.transactionHash + idx}
-                  transactionUrl={finalUrl}
+                  eventObj={eventObj}
-                  transactionHash={finalHash}
-                  events={eventBundle}
-                  idx={finalIdx}
-                  searchTerm={searchTerm}
-                  filterActivated={filterActivated}
-                  rewardActivated={rewardActivated}
-                  updateActivated={updateActivated}
-                  withdrawActivated={withdrawActivated}
-                  stakeActivated={stakeActivated}
-                  delegatorRewardActivated={delegatorRewardActivated}
-                  unbondActivated={unbondActivated}
                 />
               }
             })}
           </div>
         </ScrollContainer>
         <div className="strokeSmollLeft" style={{ marginRight: "1em" }}>
-          <button className={filterActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: activationColour }} onClick={() => {
+          <button className={filterActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: filterActivatedColour }} onClick={() => {
             setFilterActivated(!filterActivated);
           }}>
             <h3>Activated</h3>
           </button>
-          <button className={rewardActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: rewardColour }} onClick={() => {
+          <button className={rewardActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: rewardActivatedColour }} onClick={() => {
             setRewardActivated(!rewardActivated);
           }}>
             <h3>Reward</h3>
           </button>
-          <button className={updateActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: updateColour }} onClick={() => {
+          <button className={updateActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: updateActivatedColour }} onClick={() => {
             setUpdateActivated(!updateActivated);
           }}>
             <h3>Update</h3>
           </button>
-          <button className={withdrawActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: withdrawStakeColour }} onClick={() => {
+          <button className={withdrawActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: withdrawActivatedColour }} onClick={() => {
             setWithdrawActivated(!withdrawActivated);
           }}>
             <h3>Withdraw</h3>
           </button>
-          <button className={stakeActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: stakeColour }} onClick={() => {
+          <button className={stakeActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: stakeActivatedColour }} onClick={() => {
             setStakeActivated(!stakeActivated);
           }}>
             <h3>Stake</h3>
           </button>
-          <button className={delegatorRewardActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: claimColour }} onClick={() => {
+          <button className={delegatorRewardActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: delegatorActivatedColour }} onClick={() => {
             setDelegatorRewardActivated(!delegatorRewardActivated);
           }}>
             <h3>Claim</h3>
           </button>
-          <button className={unbondActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: unbondColour }} onClick={() => {
+          <button className={unbondActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: unbondActivatedColour }} onClick={() => {
             setUnbondActivated(!unbondActivated);
           }}>
             <h3>Unbond</h3>