added filters

src/eventButton.js

@@ -80,6 +80,53 @@ const EventButton = (obj) => {
     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 (isFiltered && count){
+    return null;
+  }
+  
   let eventSpecificInfo;
   if (transactionName === "Reward") {
     if (transactionAmount - 69 < 1 && transactionAmount - 69 > 0) {

src/eventViewer.js

@@ -1,8 +1,21 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import EventButton from "./eventButton";
 import ScrollContainer from 'react-indiana-drag-scroll';
 
+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 EventViewer = (obj) => {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [filterActivated, setFilterActivated] = useState(false);
+  const [rewardActivated, setRewardActivated] = useState(false);
+  const [updateActivated, setUpdateActivated] = useState(false);
+  const [withdrawActivated, setWithdrawActivated] = useState(false);
+  const [stakeActivated, setStakeActivated] = useState(false);
+
   let txCounter = 0;
   let currentTx = "";
   let currentUrl = "";
@@ -15,7 +28,17 @@ const EventViewer = (obj) => {
   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="content-wrapper">
+      <div className="fixed-container">
+        <div className="rowAlignLeft">
+          <input className="searchField"
+            value={searchTerm}
+            onChange={(evt) => setSearchTerm(evt.target.value)}
+            placeholder='Filter by Orchestrator address'
+            type="text"
+          />
+        </div>
+      </div>
+      <div className="content-wrapper" style={{alignItems: 'stretch', width: '100%'}}>
         <ScrollContainer className="overflow-container" hideScrollbars={false}>
           <div className="overflow-content" style={{ cursor: 'grab' }}>
             {obj.events.slice(0).reverse().map((eventObj, idx) => {
@@ -51,11 +74,44 @@ const EventViewer = (obj) => {
                   events={eventBundle}
                   idx={finalIdx}
                   setOrchFunction={obj.setOrchFunction}
+                  searchTerm={searchTerm}
+                  filterActivated={filterActivated}
+                  rewardActivated={rewardActivated}
+                  updateActivated={updateActivated}
+                  withdrawActivated={withdrawActivated}
+                  stakeActivated={stakeActivated}
                 />
               }
             })}
           </div>
         </ScrollContainer>
+        <div className="strokeSmollLeft" style={{marginRight: "1em"}}>
+          <button className={filterActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: activationColour }} onClick={() => {
+            setFilterActivated(!filterActivated);
+          }}>
+            <h3>Activated</h3>
+          </button>
+          <button className={rewardActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: rewardColour }} onClick={() => {
+            setRewardActivated(!rewardActivated);
+          }}>
+            <h3>Reward</h3>
+          </button>
+          <button className={updateActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: updateColour }} onClick={() => {
+            setUpdateActivated(!updateActivated);
+          }}>
+            <h3>Update</h3>
+          </button>
+          <button className={withdrawActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: withdrawStakeColour }} onClick={() => {
+            setWithdrawActivated(!withdrawActivated);
+          }}>
+            <h3>Withdraw</h3>
+          </button>
+          <button className={stakeActivated ? "row nonHomeButton active" : "row nonHomeButton"} style={{ backgroundColor: stakeColour }} onClick={() => {
+            setStakeActivated(!stakeActivated);
+          }}>
+            <h3>Stake</h3>
+          </button>
+        </div>
       </div>
     </div>
   )

src/style.css

@@ -324,7 +324,6 @@ svg {
 }
 
 .homeButton {
-  min-width: 200px;
   cursor: pointer;
   padding: 8px;
   border: 0;
@@ -345,7 +344,25 @@ svg {
   cursor: default;
   opacity: 0.7;
 }
-
+.nonHomeButton{
+  cursor: pointer;
+  padding: 8px;
+  border: 0;
+  border-radius: 20px;
+  background-color: transparent;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  justify-content: space-evenly;
+  z-index: 10; 
+}
+.nonHomeButton:hover {
+  backdrop-filter: blur(6px);
+}
+.active {
+  box-shadow: 4px 5px 3px 2px rgba(8, 7, 56, 0.692);
+}
 .searchField {
   margin: auto;
   display: flex;
@@ -393,7 +410,7 @@ svg {
 }
 .overflow-content {
   color: black;
-  padding: 20px;
+  padding: 1em;
 }