From 9b4e3455f3dd20580cda55aa5b4caed9dcd83795 Mon Sep 17 00:00:00 2001 From: Marco van Dijk Date: Thu, 21 Apr 2022 14:40:43 +0200 Subject: [PATCH] Frontend ready, time to debug all the things --- backend/src/routes/livepeer.js | 10 +- src/components/StakeOverview.js | 233 -------------------------------- src/components/WinnerMonth.js | 218 ++++++++++++++++++++++++++---- src/components/WinnerStat.js | 89 ++++++------ src/pages/stats.js | 62 ++------- 5 files changed, 257 insertions(+), 355 deletions(-) delete mode 100644 src/components/StakeOverview.js diff --git a/backend/src/routes/livepeer.js b/backend/src/routes/livepeer.js index 2204527..7a3ca69 100644 --- a/backend/src/routes/livepeer.js +++ b/backend/src/routes/livepeer.js @@ -1078,11 +1078,8 @@ const syncEvents = function (toBlock) { console.log("Starting sync process for Bonding Manager events to block " + toBlock); isEventSyncing = true; let lastTxSynced = 0; - if (lastBlockTickets != 'latest'){ - lastBlockTickets += 1; - } // Then do a sync from last found until latest known - bondingManagerContract.getPastEvents("allEvents", { fromBlock: lastBlockEvents, toBlock: toBlock }, async (error, events) => { + bondingManagerContract.getPastEvents("allEvents", { fromBlock: lastBlockEvents + 1, toBlock: toBlock }, async (error, events) => { try { if (error) { throw error @@ -1135,11 +1132,8 @@ const syncEvents = function (toBlock) { const syncTickets = function (toBlock) { console.log("Starting sync process for Ticket Broker events to block " + toBlock); isTicketSyncing = true; - if (lastBlockTickets != 'latest'){ - lastBlockTickets += 1; - } // Then do a sync from last found until latest known - ticketBrokerContract.getPastEvents("allEvents", { fromBlock: lastBlockTickets, toBlock: toBlock }, async (error, events) => { + ticketBrokerContract.getPastEvents("allEvents", { fromBlock: lastBlockTickets + 1, toBlock: toBlock }, async (error, events) => { try { if (error) { throw error diff --git a/src/components/StakeOverview.js b/src/components/StakeOverview.js deleted file mode 100644 index af84dff..0000000 --- a/src/components/StakeOverview.js +++ /dev/null @@ -1,233 +0,0 @@ -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; - let totalEarnings = 0; - while (orchIdx >= 0) { - const thisOrch = livepeer.orchInfo[orchIdx]; - orchIdx -= 1; - if (removeOnlyStakers && !parseFloat(thisOrch.totalVolumeUSD)) { - continue; - } - totalStake += parseFloat(thisOrch.totalStake); - totalEarnings += parseFloat(thisOrch.totalVolumeETH); - } - // create slices - orchIdx = livepeer.orchInfo.length - 1; - while (orchIdx >= 0) { - const thisOrch = livepeer.orchInfo[orchIdx]; - const thisStake = parseFloat(thisOrch.totalStake); - const thisEarnings = parseFloat(thisOrch.totalVolumeETH); - orchIdx -= 1; - if (removeOnlyStakers && !parseFloat(thisOrch.totalVolumeUSD)) { - continue; - } - // Add orch stat descending - let idx = orchList.length - 1; - while (idx >= 0) { - const sel = orchList[idx]; - if (sel.sum < thisStake) { - idx--; - continue; - } else { - break; - } - } - if (idx == orchList.length - 1) { - orchList.push({ - address: thisOrch.id, - sum: thisStake, - ratio: (thisStake / totalStake) * 100, - earnings: thisEarnings, - earningsRatio: (thisEarnings / totalEarnings) * 100 - }); - } else { - orchList.splice(idx + 1, 0, { - address: thisOrch.id, - sum: thisStake, - ratio: (thisStake / totalStake) * 100, - earnings: thisEarnings, - earningsRatio: (thisEarnings / totalEarnings) * 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 =
-

Active Orchestrators by Stake

-
-

Only Transcoding?

-
setRemoveOnlyStakers(!removeOnlyStakers)}> -
- {removeOnlyStakers ? "1" : "0"} -
-
-
- -
- } - - - return ( -
- {pieObj} -
-
-
-

Orchestrator

-
-
-
-

Stake

-
-
-
-
-

Earnings

-
-
-
- { - orchList.map(function (orch) { - return ( -
-
-
-
-
-
-

{orch.sum.toFixed(2)} LPT

-
-
- ({orch.ratio.toFixed(2)} %) -
-
-
-
-

{orch.earnings.toFixed(2)} Eth

-
-
- ({orch.earningsRatio.toFixed(2)} %) -
-
-
- ) - }) - } -
-
-
- ) -} - -export default StakeOverview; \ No newline at end of file diff --git a/src/components/WinnerMonth.js b/src/components/WinnerMonth.js index 3d56dff..d0ebc05 100644 --- a/src/components/WinnerMonth.js +++ b/src/components/WinnerMonth.js @@ -15,8 +15,8 @@ const WinnerMonth = (obj) => { 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) { + for (const thisScore of obj.data.testScores) { + if (thisScore.year === obj.data.year && thisScore.month === obj.data.month) { // Check timeout if (now - thisScore.timestamp < 360000) { wasInCache = true; @@ -28,8 +28,9 @@ const WinnerMonth = (obj) => { } if (!wasInCache) { dispatch(getOrchestratorScores(obj.year, obj.month)); + dispatch(getAllMonthlyStats()); } - }, [livepeer.orchScores]); + }, []); const getName = (address) => { let thisDomain = null; @@ -67,30 +68,44 @@ const WinnerMonth = (obj) => { return (address.substring(0, 10) + ".."); } - let pieList = []; - let otherSum = 0; - let ticketIdx = obj.orchestrators.length - 1; - while (ticketIdx >= 0) { - const thisTicket = obj.orchestrators[ticketIdx]; - ticketIdx -= 1; - if ((thisTicket.sum / obj.total) < 0.04) { - otherSum += thisTicket.sum; - } else { - pieList.push({ - address: getName(thisTicket.address), - sum: thisTicket.sum - }); + // Show all orchs (if latestTotalStake exists) or show only those in winningTicketsReceived + let orchList; + + // Pies for stake overview, if have stake data for that month saved + let stakeObj; + let totalStakeSum = 0; + if (obj.data.latestTotalStake && obj.data.latestTotalStake.length) { + orchList = obj.data.latestTotalStake; + let pieList = []; + let otherSum = 0; + let ticketIdx = obj.data.latestTotalStake.length - 1; + // Calc total stake at that time + while (ticketIdx >= 0) { + const thisTicket = obj.data.latestTotalStake[ticketIdx]; + ticketIdx -= 1; + totalStakeSum += thisTicket.totalStake; } - } - pieList.push({ - address: "Other", - sum: otherSum - }); + ticketIdx = obj.data.latestTotalStake.length - 1; + // Create pie chart + while (ticketIdx >= 0) { + const thisTicket = obj.data.latestTotalStake[ticketIdx]; + ticketIdx -= 1; + if ((thisTicket.totalStake / totalStakeSum) < 0.04) { + otherSum += thisTicket.totalStake; + } else { + pieList.push({ + address: getName(thisTicket.address), + sum: thisTicket.totalStake + }); + } + } + pieList.push({ + address: "Other", + sum: otherSum + }); - - return ( -
-

Top Earners

+ stakeObj =
+

Stake Distribution

{ } }} />
+
; + } else { + orchList = obj.data.winningTicketsReceived; + } + + // Pies for earnings overview + let earningsObj; + if (obj.data.winningTicketsReceived && obj.data.winningTicketsReceived.length) { + let otherSum = 0; + let pieList = []; + let ticketIdx = obj.data.winningTicketsReceived.length - 1; + // Create pie chart + while (ticketIdx >= 0) { + const thisTicket = obj.data.winningTicketsReceived[ticketIdx]; + ticketIdx -= 1; + if ((thisTicket.sum / obj.data.winningTicketsReceivedSum) < 0.04) { + otherSum += thisTicket.sum; + } else { + pieList.push({ + address: getName(thisTicket.address), + sum: thisTicket.sum + }); + } + } + pieList.push({ + address: "Other", + sum: otherSum + }); + + stakeObj =
+

Stake Distribution

+
+ +
+
; + } + + return ( +
+ {stakeObj} + {earningsObj} + {obj.data.reactivationCount ? +
+

{obj.data.reactivationCount} Orchestrator reactivated

+
: null + } + {obj.data.activationCount ? +
+

{obj.data.activationCount} Orchestrator activated with an initial stake of {obj.data.activationInitialSum} LPT

+
: null + } + {obj.data.unbondCount ? +
+

{obj.data.unbondCount} delegators unbonded {obj.data.unbondStakeSum} LPT

+
: null + } + {obj.data.rewardCount ? +
+

{obj.data.rewardCount} reward calls were made worth {obj.data.rewardAmountSum} LPT

+
: null + } + {obj.data.claimCount ? +
+

{obj.data.claimCount} reward claims were made worth {obj.data.claimRewardSum} LPT and {obj.data.claimFeeSum} ETH

+
: null + } + {obj.data.withdrawStakeCount ? +
+

{obj.data.withdrawStakeCount} withdraw stake calls were made worth {obj.data.withdrawStakeAmountSum} LPT

+
: null + } + {obj.data.withdrawFeesCount ? +
+

{obj.data.withdrawFeesCount} withdraw fees calls were made worth {obj.data.withdrawFeesAmountSum} ETH

+
: null + } + {obj.data.bondCount ? +
+

{obj.data.bondCount} delegators delegated their first stake worth {obj.data.bondStakeSum} LPT

+
: null + } + {obj.data.moveStakeCount ? +
+

Stake got moved around {obj.data.moveStakeCount} times worth {obj.data.moveStakeSum} LPT

+
: null + } + {obj.data.winningTicketsReceivedCount ? +
+

{obj.data.winningTicketsReceivedCount} winning tickets were sent out worth {obj.data.winningTicketsReceivedSum} ETH

+
: null + } + {obj.data.winningTicketsRedeemedCount ? +
+

{obj.data.winningTicketsRedeemedCount} winning tickets were redeemed worth {obj.data.winningTicketsRedeemedSum} ETH

+
: null + }
{ - obj.orchestrators.map(function (orch) { - return () + orchList.map(function (orch, i) { + let thisCommission = null; + let thisStake = null; + let thisEarnings = null; + for (const obj in obj.data.winningTicketsReceived) { + if (obj.address == orch.address){ + thisEarnings = obj; + } + } + for (const obj in obj.data.latestCommission) { + if (obj.address == orch.address){ + thisCommission = obj; + } + } + for (const obj in obj.data.latestTotalStake) { + if (obj.address == orch.address){ + thisStake = obj; + } + } + return () }) }
diff --git a/src/components/WinnerStat.js b/src/components/WinnerStat.js index 489f4fb..f0fabf6 100644 --- a/src/components/WinnerStat.js +++ b/src/components/WinnerStat.js @@ -6,55 +6,48 @@ import { CircularProgressbar } from 'react-circular-progressbar'; import 'react-circular-progressbar/dist/styles.css'; const Winner = (obj) => { - const [thisScore, setThisScore] = useState(0); const [opened, setOpened] = useState(false); useEffect(() => { - // Get score of this Orch - let thisScore = null; - if (obj.stats) { - thisScore = obj.stats.scores[obj.address]; - } - let score = 0; - if (thisScore) { - score = (thisScore["FRA"].score + thisScore["LAX"].score + thisScore["LON"].score + thisScore["MDW"].score + thisScore["NYC"].score + thisScore["PRG"].score + thisScore["SIN"].score) / 7; - if (thisScore != score) { - setThisScore(score); + if (obj.thisScore) { + score = (obj.thisScore["FRA"].score + obj.thisScore["LAX"].score + obj.thisScore["LON"].score + obj.thisScore["MDW"].score + obj.thisScore["NYC"].score + obj.thisScore["PRG"].score + obj.thisScore["SIN"].score) / 7; + if (obj.thisScore != score) { + setobj.thisScore(score); } } }, [obj.stats]); let scoreObj = null; - if (thisScore) { + if (obj.thisScore) { scoreObj = - setOpened(false)} target={
setOpened((o) => !o)} > - +
} width={260} @@ -68,16 +61,36 @@ const Winner = (obj) => { return (
-
+
-

{obj.sum.toFixed(4)} Eth

+

{obj.thisEarnings.sum.toFixed(4)} Eth

- ({((obj.sum / obj.total) * 100).toFixed(2)} %) + ({((obj.thisEarnings.sum / obj.totalEarnings) * 100).toFixed(2)} %)
+ {obj.thisStake ? +
+
+

{obj.thisStake.totalStake.toFixed(4)} LPT

+
+
+ ({((obj.thisStake.totalStake / obj.totalStake) * 100).toFixed(2)} %) +
+
: null + } + {obj.thisCommission ? +
+
+ {obj.thisCommission.rewardCommission.toFixed(2)}% Reward +
+
+ {obj.thisCommission.feeCommission.toFixed(2)}% Fee +
+
: null + } {scoreObj}
) diff --git a/src/pages/stats.js b/src/pages/stats.js index f3d9ce7..7af072c 100644 --- a/src/pages/stats.js +++ b/src/pages/stats.js @@ -5,12 +5,11 @@ 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'; const Stats = (obj) => { const livepeer = useSelector((state) => state.livepeerstate); - const [ticketsPerMonth, setTicketsPerMonth] = useState([]); const [redirectToHome, setRedirectToHome] = useState(false); + const [removeOnlyStakers, setRemoveOnlyStakers] = useState(false); console.log("Rendering Stats Viewer"); @@ -18,42 +17,6 @@ const Stats = (obj) => { return ; } - 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) + ".."); - } - return (
+ {/*
+

Filter

+
setRemoveOnlyStakers(!removeOnlyStakers)}> +
+ {removeOnlyStakers ? "Show" : "Hide"} +
+
+
*/}
@@ -86,13 +57,8 @@ const Stats = (obj) => { content: { padding: 0, paddingTop: '1em', paddingBottom: '1em' }, contentInner: { padding: 0 }, }}> - - - { - ticketsPerMonth.map(function (data) { + livepeer.monthlyStats.map(function (data) { let thisMonth = ""; let monthAsNum = data.month; if (monthAsNum == 0) { @@ -123,14 +89,12 @@ const Stats = (obj) => { return ( )