show stake overview

dumps/orchInfo.json

@@ -0,0 +1,57 @@
+{
+  "id": "0x1a196b031ea1a74a53ecbe6148772648e02f9d51",
+  "activationRound": "2467",
+  "deactivationRound": "57896044618658097711785492504343953926634992332820282019728792003956564819967",
+  "active": true,
+  "status": "Registered",
+  "lastRewardRound": {
+      "id": "2535",
+      "length": "5760",
+      "startBlock": "14601600",
+      "endBlock": "14607360",
+      "mintableTokens": "6289.390217651615209644",
+      "volumeETH": "0",
+      "volumeUSD": "0",
+      "totalActiveStake": "12660572.689057253001431262",
+      "totalSupply": "25315641.406774142960762968",
+      "participationRate": "0.5001087069304688888807674462863896",
+      "movedStake": "0",
+      "newStake": "0"
+  },
+  "rewardCut": "2500",
+  "feeShare": "100000",
+  "pendingFeeShare": "0",
+  "pendingRewardCut": "0",
+  "totalStake": "10359.571442424819689212",
+  "totalVolumeETH": "0",
+  "totalVolumeUSD": "0",
+  "serviceURI": "https://lpt.4v1.in:8935",
+  "delegators": [
+      {
+          "id": "0x1a196b031ea1a74a53ecbe6148772648e02f9d51",
+          "bondedAmount": "33.050240717610249021",
+          "startRound": "2467"
+      },
+      {
+          "id": "0x683fc3000a300575657713124fcf84adc53f9f90",
+          "bondedAmount": "11.81774",
+          "startRound": "2468"
+      },
+      {
+          "id": "0x9785c9c3258573810c69ddf93221b6a8dea1c777",
+          "bondedAmount": "0.000000000000000001",
+          "startRound": "2467"
+      },
+      {
+          "id": "0xfb9849b0b53f66b747bfa47396964a3fa22400a0",
+          "bondedAmount": "10071.316871799952124909",
+          "startRound": "2487"
+      }
+  ],
+  "delegator": {
+      "id": "0x1a196b031ea1a74a53ecbe6148772648e02f9d51",
+      "bondedAmount": "33.050240717610249021",
+      "startRound": "2467"
+  },
+  "lastGet": 1650188936614
+}

src/actions/livepeer.js

@@ -159,13 +159,13 @@ export const getEvents = () => async dispatch => {
                 tmpAmount.toFixed(2) + " LPT stake",
                 "round " + tmpWhen
               ]
-              eventDescription = <Ticket seed={currentTx+descriptions} icon={"🚀"} subtext={subtext} descriptions={descriptions} />
+              eventDescription = <Ticket seed={currentTx+"-"+txCounter} icon={"🚀"} subtext={subtext} descriptions={descriptions} />
             } else {
               const subtext = "reactivated";
               const descriptions = [
                 "round " + tmpWhen
               ]
-              eventDescription = <Ticket seed={currentTx+descriptions} icon={"🚀"} subtext={subtext} descriptions={descriptions} />
+              eventDescription = <Ticket seed={currentTx+"-"+txCounter} icon={"🚀"} subtext={subtext} descriptions={descriptions} />
             }
           }
           // Lone Unbond => Unbond Event
@@ -178,7 +178,7 @@ export const getEvents = () => async dispatch => {
               "round " + tmpWhen
             ]
             eventDescription =
-              <Ticket seed={currentTx+descriptions} icon={"❌"} subtext={subtext} descriptions={descriptions} />
+              <Ticket seed={currentTx+"-"+txCounter} icon={"❌"} subtext={subtext} descriptions={descriptions} />
           }
           // Lone Bond => Stake Event
           else if (eventContainsBond) {
@@ -194,7 +194,7 @@ export const getEvents = () => async dispatch => {
               tmpAmount.toFixed(2) + " LPT"
             ]
             eventDescription =
-              <Ticket seed={currentTx+descriptions} icon={"⌛"} subtext={subtext} descriptions={descriptions} />
+              <Ticket seed={currentTx+"-"+txCounter} icon={"⌛"} subtext={subtext} descriptions={descriptions} />
           }
 
           // Fill description of Stake Event if it wasn't set yet
@@ -205,7 +205,7 @@ export const getEvents = () => async dispatch => {
                 tmpAmount.toFixed(2) + " LPT"
               ]
               eventDescription =
-                <Ticket seed={currentTx+descriptions} icon={"⌛"} subtext={subtext} descriptions={descriptions} />
+                <Ticket seed={currentTx+"-"+txCounter} icon={"⌛"} subtext={subtext} descriptions={descriptions} />
             } else if (eventFrom === eventTo) {
               eventFrom = "";
               const subtext = "changed stake";
@@ -213,14 +213,14 @@ export const getEvents = () => async dispatch => {
                 tmpAmount.toFixed(2) + " LPT"
               ]
               eventDescription =
-                <Ticket seed={currentTx+descriptions} icon={"⌛"} subtext={subtext} descriptions={descriptions} />
+                <Ticket seed={currentTx+"-"+txCounter} icon={"⌛"} subtext={subtext} descriptions={descriptions} />
             } else {
               const subtext = "moved stake";
               const descriptions = [
                 tmpAmount.toFixed(2) + " LPT"
               ]
               eventDescription =
-                <Ticket seed={currentTx+descriptions} icon={"⌛"} subtext={subtext} descriptions={descriptions} />
+                <Ticket seed={currentTx+"-"+txCounter} icon={"⌛"} subtext={subtext} descriptions={descriptions} />
 
             }
           }
@@ -277,7 +277,7 @@ export const getEvents = () => async dispatch => {
             "round " + eventObj.data.withdrawRound
           ]
           const txt =
-            <Ticket seed={currentTx+descriptions} icon={"🏦"} subtext={subtext} descriptions={descriptions} />
+            <Ticket seed={currentTx+"-"+txCounter} icon={"🏦"} subtext={subtext} descriptions={descriptions} />
           finalEventList.push({
             eventType: "Withdraw",
             eventDescription: txt,
@@ -301,7 +301,7 @@ export const getEvents = () => async dispatch => {
             amount.toFixed(4) + " Eth"
           ]
           const txt =
-            <Ticket seed={currentTx+descriptions} icon={"🏦"} subtext={subtext} descriptions={descriptions} />
+            <Ticket seed={currentTx+"-"+txCounter} icon={"🏦"} subtext={subtext} descriptions={descriptions} />
           finalEventList.push({
             eventType: "Withdraw",
             eventDescription: txt,
@@ -327,7 +327,7 @@ export const getEvents = () => async dispatch => {
             amount2.toFixed(2) + "% on transcoding fees"
           ]
           const txt =
-            <Ticket seed={currentTx+descriptions} icon={"🔄"} subtext={subtext} descriptions={descriptions} />
+            <Ticket seed={currentTx+"-"+txCounter} icon={"🔄"} subtext={subtext} descriptions={descriptions} />
           finalEventList.push({
             eventType: "Update",
             eventDescription: txt,
@@ -357,7 +357,7 @@ export const getEvents = () => async dispatch => {
             "+" + amount2.toFixed(4) + " Eth fees"
           ]
           let txt =
-            <Ticket seed={currentTx+descriptions} icon={"💰"} subtext={subtext} descriptions={descriptions} />
+            <Ticket seed={currentTx+"-"+txCounter} icon={"💰"} subtext={subtext} descriptions={descriptions} />
           finalEventList.push({
             eventType: "Claim",
             eventDescription: txt,
@@ -381,7 +381,7 @@ export const getEvents = () => async dispatch => {
             "+" + amount1.toFixed(2) + " LPT" + (Math.floor(amount1) == 69 ? "... Nice!" : "")
           ]
           const txt =
-            <Ticket seed={currentTx+descriptions} icon={"💸"} subtext={subtext} descriptions={descriptions} />
+            <Ticket seed={currentTx+"-"+txCounter} icon={"💸"} subtext={subtext} descriptions={descriptions} />
           finalEventList.push({
             eventType: "Reward",
             eventDescription: txt,
@@ -483,7 +483,7 @@ export const getTickets = () => async dispatch => {
             "+" + amount.toFixed(4) + " Eth"
           ]
           const txt =
-            <Ticket seed={currentTx+descriptions} icon={"🎟️"} subtext={subtext} descriptions={descriptions} />
+            <Ticket seed={currentTx+descriptions+currentTime} icon={"🎟️"} subtext={subtext} descriptions={descriptions} />
           finalTicketList.push({
             eventType: "RedeemTicket",
             eventDescription: txt,
@@ -535,12 +535,21 @@ export const getCurrentOrchestratorInfo = () => async dispatch => {
   return dispatch(receiveErrors(data));
 };
 
+export const getOrchestratorInfoSilent = (orchAddr) => async dispatch => {
+  const response = await apiUtil.getOrchestratorInfo(orchAddr);
+  const data = await response.json();
+  if (response.ok) {
+    if (data && data.id) {
+      return dispatch(cacheNewOrch(data));
+    }
+  }
+};
+
 export const getOrchestratorInfo = (orchAddr) => async dispatch => {
   const response = await apiUtil.getOrchestratorInfo(orchAddr);
   const data = await response.json();
   if (response.ok) {
     if (data && data.id) {
-      console.log(data);
       dispatch(cacheNewOrch(data));
       return dispatch(setOrchestratorInfo(data));
     } else {
@@ -598,7 +607,9 @@ export const getAllThreeBoxInfo = () => async dispatch => {
 
 export const getThreeBoxInfo = async (addr) => {
   const response = await apiUtil.getThreeBox(addr);
+  if (response.ok) {
     const data = await response.json();
+  }
 };
 
 export const getOrchestratorScores = (year, month) => async dispatch => {

src/components/TicketViewer.js

@@ -17,7 +17,7 @@ const Ticket = (obj) => {
       <div className="stroke" style={{ flex: 2 }}>
         {obj.descriptions.map(function (thisTextItem, i) {
           return (
-            <p className="smallTxt" key={obj.seed}>
+            <p className="smallTxt" key={obj.seed + i}>
               {thisTextItem}
             </p>
           )

src/components/WinnerMonth.js

@@ -90,10 +90,11 @@ const WinnerMonth = (obj) => {
 
   return (
     <div className="stroke">
+      <h4>Top Earners</h4>
       <div className="row">
         <VictoryPie padding={100} data={pieList} x="address" y="sum"
           sortOrder="descending"
-          sortKey = "sum"
+          sortKey="sum"
           colorScale={[
             "#003f5c",
             "#2f4b7c",

src/components/eventButtonAddress.js

@@ -1,6 +1,6 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import {
-  getOrchestratorInfo, getEnsInfo, getThreeBoxInfo, setCachedOrch
+  getOrchestratorInfo, getEnsInfo, getThreeBoxInfo, setCachedOrch, getOrchestratorInfoSilent
 } from "../actions/livepeer";
 import { useDispatch, useSelector } from 'react-redux';
 
@@ -8,14 +8,18 @@ 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);
-  let thisDomain = null;
+  const [hasOrchInfo, setHasOrchInfo] = useState(false);
-  let thisInfo = null;
+  const [orchInfo, setOrchInfo] = useState(null);
-  let hasENS = false;
-  let hasThreeBox = false;
   const now = new Date().getTime();
+  
+  useEffect(() => {
+    let thisInfo = null;
+    let thisDomain = null;
     // Lookup domain in cache
-  if (livepeer.ensDomainMapping) {
+    if (livepeer.ensDomainMapping && !hasRefreshed) {
       for (const thisAddr of livepeer.ensDomainMapping) {
         if (thisAddr.address === obj.address) {
           thisDomain = thisAddr;
@@ -38,11 +42,11 @@ const EventButtonAddress = (obj) => {
       }
     }
     // Lookup current info in cache only if this addr has a mapped ENS domain
-  if (thisDomain && thisDomain.domain) {
+    if (thisDomain && thisDomain.domain && !hasRefreshed) {
       for (const thisAddr of livepeer.ensInfoMapping) {
         if (thisAddr.domain === thisDomain.domain) {
           thisInfo = thisAddr;
-        hasENS = true;
+          setHasENS(true);
           // Check timeout
           if (now - thisAddr.timestamp < 86400000) {
             break;
@@ -63,12 +67,12 @@ const EventButtonAddress = (obj) => {
     }
 
     // Ugly shit, but temporary for now to quickly enable threebox. Sorry!
-  if (!hasENS) {
+    if (!hasENS && !hasThreeBoxRefreshed) {
       if (livepeer.threeBoxInfo) {
         for (const thisAddr of livepeer.threeBoxInfo) {
           if (thisAddr.address === obj.address) {
             thisInfo = thisAddr;
-          hasThreeBox = true;
+            setHasThreeBox(true);
             // Check timeout
             if (now - thisAddr.timestamp < 86400000) {
               break;
@@ -88,25 +92,46 @@ const EventButtonAddress = (obj) => {
         }
       }
     }
+    if (thisInfo && thisInfo != orchInfo){
+      setOrchInfo(thisInfo);
+    }
+  }, [livepeer.ensDomainMapping, livepeer.threeBoxInfo, hasRefreshed, hasENS, hasThreeBoxRefreshed]);
+
+  useEffect(() => {
+    // Check if cached as an orchestrator
+    if (livepeer.orchInfo && !hasOrchInfo) {
+      for (const thisOrch of livepeer.orchInfo) {
+        if (thisOrch.id === obj.address) {
+          setHasOrchInfo(true);
+          break;
+        }
+      }
+      // Preload Orch info
+      if (!hasOrchInfo) {
+        dispatch(getOrchestratorInfoSilent(obj.address));
+        setHasOrchInfo(true);
+      }
+    }
+  }, [livepeer.orchInfo, hasOrchInfo]);
 
   let thisName;
   let thisIcon;
   if (hasENS) {
-    thisName = <h4 className="elipsText elipsOnMobileExtra">{thisInfo.domain}</h4>;
+    thisName = <h4 className="elipsText elipsOnMobileExtra">{orchInfo.domain}</h4>;
-    if (thisInfo.avatar) {
+    if (orchInfo.avatar) {
       thisIcon =
-        <a className="selectOrch" style={{ padding: '0', cursor: 'alias' }} target="_blank" rel="noopener noreferrer" href={"https://app.ens.domains/name/" + thisInfo.domain + "/details"} >
+        <a className="selectOrch" style={{ padding: '0', cursor: 'alias' }} target="_blank" rel="noopener noreferrer" href={"https://app.ens.domains/name/" + orchInfo.domain + "/details"} >
-          <img alt="" src={thisInfo.avatar.url} width="20em" height="20em" style={{ margin: 0, padding: 0 }} />
+          <img alt="" src={orchInfo.avatar.url} width="20em" height="20em" style={{ margin: 0, padding: 0 }} />
         </a >
     }
   } else if (hasThreeBox) {
-    if (thisInfo.name) {
+    if (orchInfo.name) {
-      thisName = <h4 className="elipsText elipsOnMobileExtra">{thisInfo.name}</h4>;
+      thisName = <h4 className="elipsText elipsOnMobileExtra">{orchInfo.name}</h4>;
     } else {
       thisName = <span className="elipsText elipsOnMobileExtra">{obj.address}</span>;
     }
-    if (thisInfo.image) {
+    if (orchInfo.image) {
-      thisIcon = <img alt="" src={"https://cloudflare-ipfs.com/ipfs/" + thisInfo.image} width="20em" height="20em" style={{ margin: 0, padding: 0 }} />
+      thisIcon = <img alt="" src={"https://cloudflare-ipfs.com/ipfs/" + orchInfo.image} width="20em" height="20em" style={{ margin: 0, padding: 0 }} />
     } else {
       thisIcon = null;
     }

src/pages/tickets.js

@@ -5,11 +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 { 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");
 
@@ -138,6 +140,117 @@ const Tickets = (obj) => {
     return <Navigate push to="/" />;
   }
 
+  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 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'>
@@ -158,7 +271,8 @@ const Tickets = (obj) => {
                 <div className="content-wrapper" style={{ width: '100%' }}>
                   <ScrollContainer activationDistance={1} className="overflow-container" hideScrollbars={false}>
                     <div className="overflow-content" style={{ cursor: 'grab', paddingTop: 0 }}>
-                      <div className={obj.forceVertical ? "flexContainer forceWrap" : "flexContainer"} >
+                      <div className="flexContainer forceWrap" >
+                        {pieObj}
                         <Accordion initialItem={0} className="stroke"
                           styles={{
                             item: { padding: 0 },