Slighly better stake overview

src/components/StakeOverview.js

@@ -0,0 +1,203 @@
+import React, { useState, useEffect } from 'react'
+import { useSelector, useDispatch } from 'react-redux';
+import { VictoryPie } from 'victory';
+import Address from '../components/OrchAddressViewer';
+import {
+  getOrchestratorScores
+} from "../actions/livepeer";
+
+const StakeOverview = (obj) => {
+  const livepeer = useSelector((state) => state.livepeerstate);
+  const dispatch = useDispatch();
+  const [thisScores, setThisScores] = useState(null);
+  const [removeOnlyStakers, setRemoveOnlyStakers] = useState(false);
+
+  useEffect(() => {
+    const now = new Date().getTime();
+    let wasInCache = false;
+    // See if it is cached
+    for (const thisScore of livepeer.orchScores) {
+      if (thisScore.year === obj.year && thisScore.month === obj.month) {
+        // Check timeout
+        if (now - thisScore.timestamp < 360000) {
+          wasInCache = true;
+        }
+        if (!thisScores) {
+          setThisScores(thisScore);
+        }
+      }
+    }
+    if (!wasInCache) {
+      dispatch(getOrchestratorScores(obj.year, obj.month));
+    }
+  }, [livepeer.orchScores]);
+
+  const getName = (address) => {
+    let thisDomain = null;
+    // Lookup domain in cache
+    if (livepeer.ensDomainMapping) {
+      for (const thisAddr of livepeer.ensDomainMapping) {
+        if (thisAddr.address === address) {
+          thisDomain = thisAddr;
+          break;
+        }
+      }
+    }
+    // Lookup current info in cache only if this addr has a mapped ENS domain
+    if (thisDomain && thisDomain.domain) {
+      for (const thisAddr of livepeer.ensInfoMapping) {
+        if (thisAddr.domain === thisDomain.domain) {
+          return thisAddr.domain;
+        }
+      }
+    }
+
+    if (livepeer.threeBoxInfo) {
+      for (const thisAddr of livepeer.threeBoxInfo) {
+        if (thisAddr.address === address) {
+          if (thisAddr.name) {
+            return thisAddr.name;
+          } else {
+            return (address.substring(0, 10) + "..");
+          }
+          break;
+        }
+      }
+    }
+
+    return (address.substring(0, 10) + "..");
+  }
+
+  let orchList = [];
+  let pieList = [];
+  let otherSum = 0;
+  let pieObj = null;
+  if (livepeer.orchInfo) {
+    let orchIdx = livepeer.orchInfo.length - 1;
+    // calc sum of stake
+    let totalStake = 0;
+    while (orchIdx >= 0) {
+      const thisOrch = livepeer.orchInfo[orchIdx];
+      orchIdx -= 1;
+      if (removeOnlyStakers && !parseInt(thisOrch.totalVolumeUSD)) {
+        continue;
+      }
+      totalStake += parseInt(thisOrch.totalStake);
+    }
+    // create slices
+    orchIdx = livepeer.orchInfo.length - 1;
+    while (orchIdx >= 0) {
+      const thisOrch = livepeer.orchInfo[orchIdx];
+      const thisStake = parseInt(thisOrch.totalStake);
+      orchIdx -= 1;
+      if (removeOnlyStakers && !parseInt(thisOrch.totalVolumeUSD)) {
+        continue;
+      }
+      // Add orch stat descending
+      let idx = orchList.length - 1;
+      while (idx >= 0) {
+        const sel = orchList[idx];
+        idx--;
+        if (sel.sum < thisStake) {
+          continue;
+        } else {
+          break;
+        }
+      }
+      if (idx == orchList.length - 1) {
+        orchList.push({
+          address: thisOrch.id,
+          sum: thisStake,
+          ratio: (thisStake / totalStake) * 100
+        });
+      } else {
+        orchList.splice(idx + 1, 0, {
+          address: thisOrch.id,
+          sum: thisStake,
+          ratio: (thisStake / totalStake) * 100
+        });
+      }
+      // Add slice
+      if ((thisStake / totalStake) < 0.04) {
+        otherSum += thisStake;
+      } else {
+        pieList.push({
+          address: getName(thisOrch.id),
+          sum: thisStake
+        });
+      }
+    }
+    pieList.push({
+      address: "Other",
+      sum: otherSum
+    });
+    pieObj = <div className="stroke">
+      <h4>Active Orchestrators by Stake</h4>
+      <div className='row'>
+        <p>Only Transcoding?</p>
+        <div className="toggle-container" onClick={() => setRemoveOnlyStakers(!removeOnlyStakers)}>
+          <div className={`dialog-button ${removeOnlyStakers ? "" : "disabled"}`}>
+            {removeOnlyStakers ? "1" : "0"}
+          </div>
+        </div>
+      </div>
+      <VictoryPie padding={100} data={pieList} x="address" y="sum"
+        sortOrder="descending"
+        sortKey="sum"
+        colorScale={[
+          "#003f5c",
+          "#2f4b7c",
+          "#665191",
+          "#ff7c43",
+          "#ffa600",
+          "#5c3446",
+          "#83424e",
+          "#a6544e",
+          "#c16d46",
+          "#d18d3c",
+          "#d3b136",
+          "#c5d843",
+          "#a3ff69",
+        ]}
+        style={{
+          data: {
+            fillOpacity: 0.9, stroke: "#636363", strokeWidth: 2
+          },
+          labels: {
+            fontSize: 10, zIndex: 999
+          }
+        }} />
+    </div>
+  }
+
+
+  return (
+    <div className="stroke">
+      {pieObj}
+      <div className="flexContainer forceWrap">
+        {
+          orchList.map(function (orch) {
+            return (
+              <div className="row" key={"staker" + orch.address + orch.sum}>
+                <div className="rowAlignLeft">
+                  <Address address={orch.address} seed={"stake" + orch.address + orch.sum} />
+                </div>
+                <div className="strokeSmollLeft" style={{ minWidth: '100px' }} >
+                  <div className="rowAlignLeft" >
+                    <h4>{orch.sum.toFixed(2)} LPT</h4>
+                  </div>
+                  <div className="rowAlignRight" >
+                    <span>({orch.ratio.toFixed(2)} %)</span>
+                  </div>
+                </div>
+              </div>
+            )
+          })
+        }
+      </div>
+      <div className="verticalDivider" />
+    </div>
+  )
+}
+
+export default StakeOverview;

src/components/eventButtonAddress.js

@@ -8,16 +8,15 @@ const EventButtonAddress = (obj) => {
   const dispatch = useDispatch();
   const livepeer = useSelector((state) => state.livepeerstate);
   const [hasRefreshed, setRefresh] = useState(false);
-  const [hasENS, setHasENS] = useState(false);
-  const [hasThreeBox, setHasThreeBox] = useState(false);
   const [hasThreeBoxRefreshed, setThreeBoxRefresh] = useState(false);
-  const [hasOrchInfo, setHasOrchInfo] = useState(false);
   const [orchInfo, setOrchInfo] = useState(null);
   const now = new Date().getTime();
   
   useEffect(() => {
     let thisInfo = null;
     let thisDomain = null;
+    let hasENS = null;
+    let hasThreeBox = null
     // Lookup domain in cache
     if (livepeer.ensDomainMapping && !hasRefreshed) {
       for (const thisAddr of livepeer.ensDomainMapping) {
@@ -29,6 +28,7 @@ const EventButtonAddress = (obj) => {
           }
           // Is outdated
           if (!hasRefreshed) {
+            console.log("Refresh due to old ENS domain");
             getEnsInfo(obj.address);
             setRefresh(true);
           }
@@ -37,6 +37,7 @@ const EventButtonAddress = (obj) => {
       }
       // If it was not cached at all
       if (thisDomain == null && !hasRefreshed) {
+        console.log("Refresh due to non-existing ENS domain");
         setRefresh(true);
         getEnsInfo(obj.address);
       }
@@ -46,13 +47,14 @@ const EventButtonAddress = (obj) => {
       for (const thisAddr of livepeer.ensInfoMapping) {
         if (thisAddr.domain === thisDomain.domain) {
           thisInfo = thisAddr;
-          setHasENS(true);
+          hasENS = true;
           // Check timeout
           if (now - thisAddr.timestamp < 86400000) {
             break;
           }
           // Is outdated
           if (!hasRefreshed) {
+            console.log("Refresh due to old ENS info");
             getEnsInfo(obj.address);
             setRefresh(true);
           }
@@ -61,6 +63,7 @@ const EventButtonAddress = (obj) => {
       }
       // If it was not cached at all
       if (thisInfo == null && !hasRefreshed) {
+        console.log("Refresh due to non-existing ENS info");
         getEnsInfo(obj.address);
         setRefresh(true);
       }
@@ -72,51 +75,41 @@ const EventButtonAddress = (obj) => {
         for (const thisAddr of livepeer.threeBoxInfo) {
           if (thisAddr.address === obj.address) {
             thisInfo = thisAddr;
-            setHasThreeBox(true);
+            hasThreeBox = true;
-            // Check timeout
-            if (now - thisAddr.timestamp < 86400000) {
-              break;
-            }
-            // Is outdated
-            if (!hasThreeBoxRefreshed) {
-              getThreeBoxInfo(obj.address);
-              setThreeBoxRefresh(true);
-            }
             break;
           }
         }
         // If it was not cached at all
-        if (thisDomain == null && !hasThreeBoxRefreshed) {
+        if (!hasThreeBox && !hasThreeBoxRefreshed) {
+          console.log("Refresh due to non-existing 3BOX info");
           setThreeBoxRefresh(true);
           getThreeBoxInfo(obj.address);
         }
       }
     }
     if (thisInfo && thisInfo != orchInfo){
+      console.log("Setting INFO obj");
       setOrchInfo(thisInfo);
     }
-  }, [livepeer.ensDomainMapping, livepeer.threeBoxInfo, hasRefreshed, hasENS, hasThreeBoxRefreshed]);
+  }, [livepeer.ensDomainMapping, livepeer.threeBoxInfo]);
 
   useEffect(() => {
     // Check if cached as an orchestrator
-    if (livepeer.orchInfo && !hasOrchInfo) {
+    if (livepeer.orchInfo) {
       for (const thisOrch of livepeer.orchInfo) {
         if (thisOrch.id === obj.address) {
-          setHasOrchInfo(true);
+          return;
-          break;
         }
       }
       // Preload Orch info
-      if (!hasOrchInfo) {
+      console.log("Refresh due to non-existing orch in global state");
-        dispatch(getOrchestratorInfoSilent(obj.address));
+      dispatch(getOrchestratorInfoSilent(obj.address));
-        setHasOrchInfo(true);
-      }
     }
-  }, [livepeer.orchInfo, hasOrchInfo]);
+  }, [livepeer.orchInfo]);
 
   let thisName;
   let thisIcon;
-  if (hasENS) {
+  if (orchInfo && orchInfo.domain) {
     thisName = <h4 className="elipsText elipsOnMobileExtra">{orchInfo.domain}</h4>;
     if (orchInfo.avatar) {
       thisIcon =
@@ -124,7 +117,7 @@ const EventButtonAddress = (obj) => {
           <img alt="" src={orchInfo.avatar.url} width="20em" height="20em" style={{ margin: 0, padding: 0 }} />
         </a >
     }
-  } else if (hasThreeBox) {
+  } else if (orchInfo && (orchInfo.name || orchInfo.image)) {
     if (orchInfo.name) {
       thisName = <h4 className="elipsText elipsOnMobileExtra">{orchInfo.name}</h4>;
     } else {

src/pages/tickets.js

@@ -5,13 +5,13 @@ import { useSelector, useDispatch } from 'react-redux';
 import { Accordion } from '@mantine/core';
 import ScrollContainer from 'react-indiana-drag-scroll';
 import WinnerMonth from '../components/WinnerMonth';
+import StakeOverview from '../components/StakeOverview';
 import { VictoryPie } from 'victory';
 
 const Tickets = (obj) => {
   const livepeer = useSelector((state) => state.livepeerstate);
   const [ticketsPerMonth, setTicketsPerMonth] = useState([]);
   const [redirectToHome, setRedirectToHome] = useState(false);
-  const [removeOnlyStakers, setRemoveOnlyStakers] = useState(false);
 
   console.log("Rendering Winning Ticket Viewer");
 
@@ -176,81 +176,6 @@ const Tickets = (obj) => {
     return (address.substring(0, 10) + "..");
   }
 
-  let pieList = [];
-  let otherSum = 0;
-  let pieObj = null;
-  if (livepeer.orchInfo) {
-    let orchIdx = livepeer.orchInfo.length - 1;
-    // calc sum of stake
-    let totalStake = 0;
-    while (orchIdx >= 0) {
-      const thisOrch = livepeer.orchInfo[orchIdx];
-      orchIdx -= 1;
-      if (removeOnlyStakers && !parseInt(thisOrch.totalVolumeUSD)) {
-        continue;
-      }
-      totalStake += parseInt(thisOrch.totalStake);
-    }
-    // create slices
-    orchIdx = livepeer.orchInfo.length - 1;
-    while (orchIdx >= 0) {
-      const thisOrch = livepeer.orchInfo[orchIdx];
-      orchIdx -= 1;
-      if (removeOnlyStakers && !parseInt(thisOrch.totalVolumeUSD)) {
-        continue;
-      }
-      if ((thisOrch.totalStake / totalStake) < 0.04) {
-        otherSum += thisOrch.totalStake;
-      } else {
-        pieList.push({
-          address: getName(thisOrch.id),
-          sum: thisOrch.totalStake
-        });
-      }
-    }
-    pieList.push({
-      address: "Other",
-      sum: otherSum
-    });
-    pieObj = <div className="stroke">
-      <h4>Active Orchestrators by Stake</h4>
-      <div className='row'>
-        <p>Show non-transcoding Orchestrators?</p>
-        <div className="toggle-container" onClick={() => setRemoveOnlyStakers(!removeOnlyStakers)}>
-          <div className={`dialog-button ${removeOnlyStakers ? "" : "disabled"}`}>
-            {removeOnlyStakers ? "Show" : "Hide"}
-          </div>
-        </div>
-      </div>
-      <VictoryPie padding={100} data={pieList} x="address" y="sum"
-        sortOrder="descending"
-        sortKey="sum"
-        colorScale={[
-          "#003f5c",
-          "#2f4b7c",
-          "#665191",
-          "#ff7c43",
-          "#ffa600",
-          "#5c3446",
-          "#83424e",
-          "#a6544e",
-          "#c16d46",
-          "#d18d3c",
-          "#d3b136",
-          "#c5d843",
-          "#a3ff69",
-        ]}
-        style={{
-          data: {
-            fillOpacity: 0.9, stroke: "#636363", strokeWidth: 2
-          },
-          labels: {
-            fontSize: 10, zIndex: 999
-          }
-        }} />
-    </div>
-  }
-
   return (
     <div style={{ margin: 0, padding: 0, height: '100%', width: '100%', overflow: 'hidden' }}>
       <div id='header'>
@@ -272,7 +197,6 @@ const Tickets = (obj) => {
                   <ScrollContainer activationDistance={1} className="overflow-container" hideScrollbars={false}>
                     <div className="overflow-content" style={{ cursor: 'grab', paddingTop: 0 }}>
                       <div className="flexContainer forceWrap" >
-                        {pieObj}
                         <Accordion initialItem={0} className="stroke"
                           styles={{
                             item: { padding: 0 },
@@ -284,6 +208,11 @@ const Tickets = (obj) => {
                             content: { padding: 0, paddingTop: '1em', paddingBottom: '1em' },
                             contentInner: { padding: 0 },
                           }}>
+                          <Accordion.Item
+                            label={"Current Stake Overview"}
+                            className="stroke">
+                            <StakeOverview />
+                          </Accordion.Item>
                           {
                             ticketsPerMonth.map(function (data) {
                               let thisMonth = "";