mirror of
https://github.com/stronk-dev/LivepeerEvents.git
synced 2025-07-05 10:45:10 +02:00
623 lines
23 KiB
JavaScript
623 lines
23 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import { useSelector } from 'react-redux';
|
|
import { VictoryPie } from 'victory';
|
|
import ScrollContainer from "react-indiana-drag-scroll";
|
|
import Winner from '../components/WinnerStat';
|
|
import {
|
|
getOrchestratorScores
|
|
} from "../actions/livepeer";
|
|
import Ticket from "../components/TicketViewer";
|
|
import { Pagination } from "@mantine/core";
|
|
|
|
const claimColour = "rgba(25, 158, 29, 0.4)";
|
|
const stakeColour = "rgba(25, 158, 147, 0.4)";
|
|
const ticketRedeemColour = "rgba(25, 98, 158, 0.4)";
|
|
const rewardColour = "rgba(25, 27, 158, 0.4)";
|
|
const unbondColour = "rgba(105, 25, 158, 0.4)";
|
|
const updateColour = "rgba(158, 25, 52, 0.4)";
|
|
const withdrawStakeColour = "rgba(158, 98, 25, 0.4)";
|
|
const activationColour = "rgba(154, 158, 25, 0.4)";
|
|
const ticketTransferColour = "rgba(88, 91, 42, 0.3)";
|
|
const greyColour = "rgba(122, 128, 127, 0.4)";
|
|
|
|
const itemsPerPage = 10;
|
|
|
|
const WinnerMonth = (obj) => {
|
|
const livepeer = useSelector((state) => state.livepeerstate);
|
|
const [thisScores, setThisScores] = useState(null);
|
|
const [activePage, setPage] = useState(1);
|
|
const [activeGraph, setGraph] = useState(1);
|
|
|
|
let totalGraphs = 0;
|
|
|
|
|
|
useEffect(() => {
|
|
const setScore = async () => {
|
|
if (!obj.data.testScores) {
|
|
const freshScore = await getOrchestratorScores(obj.data.year, obj.data.month);
|
|
if (freshScore) {
|
|
setThisScores(freshScore);
|
|
}
|
|
} else {
|
|
setThisScores(obj.data.testScores);
|
|
}
|
|
}
|
|
setScore();
|
|
}, [obj.data.testScores]);
|
|
|
|
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) {
|
|
if (thisAddr.domain.length > 18) {
|
|
return (thisAddr.domain.substring(0, 16) + "..");
|
|
}
|
|
return thisAddr.domain;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (livepeer.threeBoxInfo) {
|
|
for (const thisAddr of livepeer.threeBoxInfo) {
|
|
if (thisAddr.address === address) {
|
|
if (thisAddr.name) {
|
|
if (thisAddr.name.length > 18) {
|
|
return (thisAddr.name.substring(0, 16) + "..");
|
|
}
|
|
return thisAddr.name;
|
|
} else {
|
|
return (address.substring(0, 16) + "..");
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
return (address.substring(0, 16) + "..");
|
|
}
|
|
|
|
// Show all orchs (if latestTotalStake exists) or show only those in winningTicketsReceived
|
|
let orchList;
|
|
let ticketList = obj.data.winningTicketsReceived || [];
|
|
let commissionList = obj.data.latestCommission || [];
|
|
let stakeList = obj.data.latestTotalStake || [];
|
|
|
|
// 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;
|
|
}
|
|
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.015) {
|
|
otherSum += thisTicket.totalStake;
|
|
} else {
|
|
pieList.push({
|
|
address: getName(thisTicket.address),
|
|
sum: thisTicket.totalStake
|
|
});
|
|
}
|
|
}
|
|
if ((otherSum / totalStakeSum) > 0.01) {
|
|
pieList.push({
|
|
address: "Other",
|
|
sum: otherSum
|
|
});
|
|
}
|
|
|
|
totalGraphs++;
|
|
|
|
stakeObj = <div className="stroke">
|
|
<h4>Stake Distribution</h4>
|
|
<VictoryPie padding={0} data={pieList} x="address" y="sum"
|
|
sortOrder="descending"
|
|
sortKey="sum"
|
|
radius={300}
|
|
width={620}
|
|
height={620}
|
|
innerRadius={50}
|
|
labelRadius={130}
|
|
cornerRadius={3}
|
|
colorScale={[
|
|
"#282678",
|
|
"#56256c",
|
|
"#872974",
|
|
"#b63074",
|
|
"#de416d",
|
|
"#ff5c5f",
|
|
"#ffe085",
|
|
"#f0e575",
|
|
"#daec69",
|
|
"#bef262",
|
|
"#97f964",
|
|
"#5cff6f",
|
|
"#14ff47",
|
|
"#00fb94",
|
|
"#00f3cd",
|
|
"#00e7f3",
|
|
"#00d8ff",
|
|
"#24c8ff",
|
|
"#0a78ff",
|
|
"#5864d7",
|
|
"#6952b1",
|
|
"#69448d",
|
|
"#61386c",
|
|
"#522f50"
|
|
]}
|
|
style={{
|
|
backgroundColor: 'rgba(122, 128, 127, 0.4)',
|
|
data: {
|
|
fillOpacity: 0.9, stroke: "#636363", strokeWidth: 1.5
|
|
},
|
|
labels: {
|
|
fontSize: 16, zIndex: 999
|
|
}
|
|
}}
|
|
labelPosition="centroid"
|
|
labelPlacement="parallel"
|
|
/>
|
|
</div>;
|
|
} 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.015) {
|
|
otherSum += thisTicket.sum;
|
|
} else {
|
|
pieList.push({
|
|
address: getName(thisTicket.address),
|
|
sum: thisTicket.sum
|
|
});
|
|
}
|
|
}
|
|
if ((otherSum / obj.data.winningTicketsReceivedSum) > 0.01) {
|
|
pieList.push({
|
|
address: "Other",
|
|
sum: otherSum
|
|
});
|
|
}
|
|
|
|
totalGraphs++;
|
|
|
|
earningsObj = <div className="stroke">
|
|
<h4>Earnings Distribution</h4>
|
|
<VictoryPie padding={{ top: 20, bottom: 20, left: 120, right: 120 }} data={pieList} x="address" y="sum"
|
|
sortOrder="descending"
|
|
sortKey="sum"
|
|
radius={300}
|
|
width={620}
|
|
height={620}
|
|
innerRadius={50}
|
|
labelRadius={130}
|
|
cornerRadius={3}
|
|
colorScale={[
|
|
"#282678",
|
|
"#56256c",
|
|
"#872974",
|
|
"#b63074",
|
|
"#de416d",
|
|
"#ff5c5f",
|
|
"#ffe085",
|
|
"#f0e575",
|
|
"#daec69",
|
|
"#bef262",
|
|
"#97f964",
|
|
"#5cff6f",
|
|
"#14ff47",
|
|
"#00fb94",
|
|
"#00f3cd",
|
|
"#00e7f3",
|
|
"#00d8ff",
|
|
"#24c8ff",
|
|
"#0a78ff",
|
|
"#5864d7",
|
|
"#6952b1",
|
|
"#69448d",
|
|
"#61386c",
|
|
"#522f50"
|
|
]}
|
|
style={{
|
|
backgroundColor: 'rgba(122, 128, 127, 0.4)',
|
|
data: {
|
|
fillOpacity: 0.9, stroke: "#636363", strokeWidth: 1.5
|
|
},
|
|
labels: {
|
|
fontSize: 16, zIndex: 999
|
|
}
|
|
}}
|
|
labelPosition="centroid"
|
|
labelPlacement="parallel"
|
|
/>
|
|
</div>;
|
|
}
|
|
|
|
// Pies for broadcaster payout
|
|
let broadcasterObj;
|
|
if (obj.data.winningTicketsSent && obj.data.winningTicketsSent.length) {
|
|
let otherSum = 0;
|
|
let pieList = [];
|
|
let ticketIdx = obj.data.winningTicketsSent.length - 1;
|
|
// Create pie chart
|
|
while (ticketIdx >= 0) {
|
|
const thisTicket = obj.data.winningTicketsSent[ticketIdx];
|
|
ticketIdx -= 1;
|
|
if ((thisTicket.sum / obj.data.winningTicketsReceivedSum) < 0.015) {
|
|
otherSum += thisTicket.sum;
|
|
} else {
|
|
pieList.push({
|
|
address: getName(thisTicket.address),
|
|
sum: thisTicket.sum
|
|
});
|
|
}
|
|
}
|
|
if ((otherSum / obj.data.winningTicketsReceivedSum) > 0.01) {
|
|
pieList.push({
|
|
address: "Other",
|
|
sum: otherSum
|
|
});
|
|
}
|
|
|
|
totalGraphs++;
|
|
|
|
broadcasterObj = <div className="stroke">
|
|
<h4>Broadcaster Payments</h4>
|
|
<VictoryPie padding={{ top: 20, bottom: 20, left: 120, right: 120 }} data={pieList} x="address" y="sum"
|
|
sortOrder="descending"
|
|
sortKey="sum"
|
|
radius={300}
|
|
width={620}
|
|
height={620}
|
|
innerRadius={50}
|
|
labelRadius={130}
|
|
cornerRadius={3}
|
|
colorScale={[
|
|
"#282678",
|
|
"#56256c",
|
|
"#872974",
|
|
"#b63074",
|
|
"#de416d",
|
|
"#ff5c5f",
|
|
"#ffe085",
|
|
"#f0e575",
|
|
"#daec69",
|
|
"#bef262",
|
|
"#97f964",
|
|
"#5cff6f",
|
|
"#14ff47",
|
|
"#00fb94",
|
|
"#00f3cd",
|
|
"#00e7f3",
|
|
"#00d8ff",
|
|
"#24c8ff",
|
|
"#0a78ff",
|
|
"#5864d7",
|
|
"#6952b1",
|
|
"#69448d",
|
|
"#61386c",
|
|
"#522f50"
|
|
]}
|
|
style={{
|
|
backgroundColor: 'rgba(122, 128, 127, 0.4)',
|
|
data: {
|
|
fillOpacity: 0.9, stroke: "#636363", strokeWidth: 1.5
|
|
},
|
|
labels: {
|
|
fontSize: 16, zIndex: 999
|
|
}
|
|
}}
|
|
labelPosition="centroid"
|
|
labelPlacement="parallel"
|
|
/>
|
|
</div>;
|
|
}
|
|
|
|
let sortedList = [];
|
|
if (orchList.length) {
|
|
// Sort this months data
|
|
while (orchList.length) {
|
|
let ticketIdx2 = orchList.length - 1;
|
|
let largestIdx = 0;
|
|
let largestValue = 0;
|
|
|
|
// Find current O with most ticket wins in Eth
|
|
while (ticketIdx2 >= 0) {
|
|
const currentOrch = orchList[ticketIdx2];
|
|
let thisVal;
|
|
|
|
for (const obj of ticketList) {
|
|
if (obj.address == currentOrch.address) {
|
|
thisVal = obj.sum;
|
|
}
|
|
}
|
|
|
|
if (!thisVal) {
|
|
ticketIdx2 -= 1;
|
|
continue;
|
|
}
|
|
if (thisVal > largestValue) {
|
|
largestIdx = ticketIdx2;
|
|
largestValue = thisVal;
|
|
}
|
|
ticketIdx2 -= 1;
|
|
}
|
|
// Else try to sort by stake
|
|
if (!largestValue) {
|
|
ticketIdx2 = orchList.length - 1;
|
|
while (ticketIdx2 >= 0) {
|
|
const currentOrch = orchList[ticketIdx2];
|
|
let thisVal;
|
|
|
|
for (const obj of stakeList) {
|
|
if (obj.address == currentOrch.address) {
|
|
thisVal = obj.totalStake;
|
|
}
|
|
}
|
|
|
|
if (!thisVal) {
|
|
ticketIdx2 -= 1;
|
|
continue;
|
|
}
|
|
if (thisVal > largestValue) {
|
|
largestIdx = ticketIdx2;
|
|
largestValue = thisVal;
|
|
}
|
|
ticketIdx2 -= 1;
|
|
}
|
|
}
|
|
// Push current biggest list
|
|
sortedList.push(orchList[largestIdx]);
|
|
// Remove from list
|
|
orchList.splice(largestIdx, 1);
|
|
}
|
|
}
|
|
|
|
const totalPages = (sortedList.length + (itemsPerPage - (sortedList.length % itemsPerPage))) / itemsPerPage;
|
|
let renderStake = false;
|
|
let renderEarnings = false;
|
|
let renderBread = false;
|
|
let graphIndex = 1;
|
|
if (activeGraph == graphIndex && totalGraphs && stakeObj) {
|
|
renderStake = true;
|
|
}
|
|
graphIndex++;
|
|
if (activeGraph == graphIndex && totalGraphs && earningsObj) {
|
|
renderEarnings = true;
|
|
}
|
|
graphIndex++;
|
|
if (activeGraph == graphIndex && totalGraphs && broadcasterObj) {
|
|
renderBread = true;
|
|
}
|
|
|
|
return (
|
|
<div className="stroke" key={obj.seed + "strok"}>
|
|
{obj.data.reactivationCount ?
|
|
<div className="row">
|
|
<div className="row" style={{ justifyContent: 'space-between', alignItems: 'stretch', maxWidth: '61.8%', textAlign: 'justify', padding: '0.5em', backgroundColor: activationColour, border: '0.1em solid rgba(54, 46, 46, 0.1)' }}>
|
|
<Ticket seed={obj.seed + "-reactivationCount-"} icon={"🔌"} subtext={obj.data.reactivationCount + " reactivations"} descriptions={[
|
|
obj.data.reactivationCount + " Orchestrators reactivated"
|
|
]} />
|
|
</div>
|
|
</div> : null
|
|
}
|
|
<div className="halfVerticalDivider" />
|
|
{obj.data.activationCount ?
|
|
<div className="row">
|
|
<div className="row" style={{ justifyContent: 'space-between', alignItems: 'stretch', maxWidth: '61.8%', textAlign: 'justify', padding: '0.5em', backgroundColor: activationColour, border: '0.1em solid rgba(54, 46, 46, 0.1)' }}>
|
|
<Ticket seed={obj.seed + "-neworchs-"} icon={"🔧"} subtext={obj.data.activationCount + " new orchestrators"} descriptions={[
|
|
obj.data.activationCount + " orchestrators joined with an initial stake of " + obj.data.activationInitialSum.toLocaleString({ maximumFractionDigits: 2 }) + " LPT"
|
|
]} />
|
|
</div>
|
|
</div> : null
|
|
}
|
|
<div className="halfVerticalDivider" />
|
|
{(obj.data.latestCommission && obj.data.latestCommission.length) ?
|
|
<div className="row">
|
|
<div className="row" style={{ justifyContent: 'space-between', alignItems: 'stretch', maxWidth: '61.8%', textAlign: 'justify', padding: '0.5em', backgroundColor: updateColour, border: '0.1em solid rgba(54, 46, 46, 0.1)' }}>
|
|
<Ticket seed={obj.seed + "-neworchs-"} icon={"🔗"} subtext={obj.data.latestCommission.length + " orchestrators found"} descriptions={[
|
|
obj.data.latestCommission.length + " orchestrators had a total of " + totalStakeSum.toLocaleString({ maximumFractionDigits: 2 }) + " LPT staked to them"
|
|
]} />
|
|
</div>
|
|
</div> : null}
|
|
<div className="halfVerticalDivider" />
|
|
{obj.data.bondCount ?
|
|
<div className="row">
|
|
<div className="row" style={{ justifyContent: 'space-between', alignItems: 'stretch', maxWidth: '61.8%', textAlign: 'justify', padding: '0.5em', backgroundColor: stakeColour, border: '0.1em solid rgba(54, 46, 46, 0.1)' }}>
|
|
<Ticket seed={obj.seed + "-neworchs-"} icon={"📈"} subtext={obj.data.bondCount + " new delegators"} descriptions={[
|
|
obj.data.bondCount + " accounts delegated for the first time for a total of " + obj.data.bondStakeSum.toLocaleString({ maximumFractionDigits: 2 }) + " LPT"
|
|
]} />
|
|
</div>
|
|
</div> : null
|
|
}
|
|
<div className="halfVerticalDivider" />
|
|
{obj.data.unbondCount ?
|
|
<div className="row">
|
|
<div className="row" style={{ justifyContent: 'space-between', alignItems: 'stretch', maxWidth: '61.8%', textAlign: 'justify', padding: '0.5em', backgroundColor: unbondColour, border: '0.1em solid rgba(54, 46, 46, 0.1)' }}>
|
|
<Ticket seed={obj.seed + "-neworchs-"} icon={"📉"} subtext={obj.data.unbondCount + " leaving delegators"} descriptions={[
|
|
obj.data.unbondCount + " delegators unbonded " + obj.data.unbondStakeSum.toLocaleString({ maximumFractionDigits: 2 }) + " LPT"
|
|
]} />
|
|
</div>
|
|
</div> : null
|
|
}
|
|
<div className="halfVerticalDivider" />
|
|
{obj.data.rewardCount ?
|
|
<div className="row">
|
|
<div className="row" style={{ justifyContent: 'space-between', alignItems: 'stretch', maxWidth: '61.8%', textAlign: 'justify', padding: '0.5em', backgroundColor: rewardColour, border: '0.1em solid rgba(54, 46, 46, 0.1)' }}>
|
|
<Ticket seed={obj.seed + "-neworchs-"} icon={"⌛"} subtext={obj.data.rewardCount + " reward calls"} descriptions={[
|
|
obj.data.rewardCount + " reward calls made by orchestrators were worth " + obj.data.rewardAmountSum.toLocaleString({ maximumFractionDigits: 2 }) + " LPT"
|
|
]} />
|
|
</div>
|
|
</div> : null
|
|
}
|
|
<div className="halfVerticalDivider" />
|
|
{obj.data.claimCount ?
|
|
<div className="row">
|
|
<div className="row" style={{ justifyContent: 'space-between', alignItems: 'stretch', maxWidth: '61.8%', textAlign: 'justify', padding: '0.5em', backgroundColor: claimColour, border: '0.1em solid rgba(54, 46, 46, 0.1)' }}>
|
|
<Ticket seed={obj.seed + "-neworchs-"} icon={"🏦"} subtext={obj.data.claimCount + " reward claims"} descriptions={[
|
|
obj.data.claimRewardSum.toLocaleString({ maximumFractionDigits: 2 }) + " LPT and " + obj.data.claimFeeSum.toLocaleString({ maximumFractionDigits: 2 }) + " ETH worth of rewards were claimed by delegators"
|
|
]} />
|
|
</div>
|
|
</div> : null
|
|
}
|
|
<div className="halfVerticalDivider" />
|
|
{obj.data.withdrawStakeCount ?
|
|
<div className="row">
|
|
<div className="row" style={{ justifyContent: 'space-between', alignItems: 'stretch', maxWidth: '61.8%', textAlign: 'justify', padding: '0.5em', backgroundColor: withdrawStakeColour, border: '0.1em solid rgba(54, 46, 46, 0.1)' }}>
|
|
<Ticket seed={obj.seed + "-neworchs-"} icon={"💸"} subtext={obj.data.withdrawStakeCount + " withdraw reward calls"} descriptions={[
|
|
obj.data.withdrawStakeAmountSum.toLocaleString({ maximumFractionDigits: 2 }) + " LPT worth of staking rewards were withdrawn to the account of the delegator"
|
|
]} />
|
|
</div>
|
|
</div> : null
|
|
}
|
|
<div className="halfVerticalDivider" />
|
|
{obj.data.withdrawFeesCount ?
|
|
<div className="row">
|
|
<div className="row" style={{ justifyContent: 'space-between', alignItems: 'stretch', maxWidth: '61.8%', textAlign: 'justify', padding: '0.5em', backgroundColor: withdrawStakeColour, border: '0.1em solid rgba(54, 46, 46, 0.1)' }}>
|
|
<Ticket seed={obj.seed + "-neworchs-"} icon={"💸"} subtext={obj.data.withdrawFeesCount + " withdraw fee calls"} descriptions={[
|
|
obj.data.withdrawFeesAmountSum.toLocaleString({ maximumFractionDigits: 2 }) + " ETH worth of transcoding fees were withdrawn to the account of the delegator"
|
|
]} />
|
|
</div>
|
|
</div> : null
|
|
}
|
|
<div className="halfVerticalDivider" />
|
|
{obj.data.moveStakeCount ?
|
|
<div className="row">
|
|
<div className="row" style={{ justifyContent: 'space-between', alignItems: 'stretch', maxWidth: '61.8%', textAlign: 'justify', padding: '0.5em', backgroundColor: stakeColour, border: '0.1em solid rgba(54, 46, 46, 0.1)' }}>
|
|
<Ticket seed={obj.seed + "-neworchs-"} icon={"🔄"} subtext={obj.data.moveStakeCount + " stake movements"} descriptions={[
|
|
obj.data.moveStakeSum.toLocaleString({ maximumFractionDigits: 2 }) + " LPT worth of stake was moved between orchestrators"
|
|
]} />
|
|
</div>
|
|
</div> : null
|
|
}
|
|
<div className="halfVerticalDivider" />
|
|
{obj.data.winningTicketsReceivedCount ?
|
|
<div className="row">
|
|
<div className="row" style={{ justifyContent: 'space-between', alignItems: 'stretch', maxWidth: '61.8%', textAlign: 'justify', padding: '0.5em', backgroundColor: ticketTransferColour, border: '0.1em solid rgba(54, 46, 46, 0.1)' }}>
|
|
<Ticket seed={obj.seed + "-neworchs-"} icon={"🎫"} subtext={obj.data.winningTicketsReceivedCount + " winning tickets"} descriptions={[
|
|
obj.data.winningTicketsReceivedCount + " winning tickets were sent out by " + obj.data.winningTicketsSent.length + " broadcasters"
|
|
]} />
|
|
</div>
|
|
</div> : null
|
|
}
|
|
<div className="halfVerticalDivider" />
|
|
{obj.data.winningTicketsRedeemedCount ?
|
|
<div className="row">
|
|
<div className="row" style={{ justifyContent: 'space-between', alignItems: 'stretch', maxWidth: '61.8%', textAlign: 'justify', padding: '0.5em', backgroundColor: ticketRedeemColour, border: '0.1em solid rgba(54, 46, 46, 0.1)' }}>
|
|
<Ticket seed={obj.seed + "-neworchs-"} icon={"🎟️"} subtext={obj.data.winningTicketsRedeemedCount + " redeemed tickets"} descriptions={[
|
|
obj.data.winningTicketsRedeemedCount + " winning tickets were redeemed worth " + obj.data.winningTicketsRedeemedSum.toLocaleString({ maximumFractionDigits: 2 }) + " ETH"
|
|
]} />
|
|
</div>
|
|
</div> : null
|
|
}<div className="halfVerticalDivider" />
|
|
<div className="verticalDivider" />
|
|
{renderStake ? stakeObj : null}
|
|
{renderEarnings ? earningsObj : null}
|
|
{renderBread ? broadcasterObj : null}
|
|
<div className="row" style={{ marginTop: '1em', marginBottom: '1em' }}>
|
|
{totalGraphs > 1 ?
|
|
<Pagination page={activeGraph} onChange={setGraph} total={totalGraphs} siblings={1} initialPage={1} />
|
|
: null}
|
|
</div>
|
|
<div className="row">
|
|
<div className="strokeSmollLeft fullMargin" style={{ paddingBottom: 0, marginBottom: 0, height: '80vh' }}>
|
|
<div className="row">
|
|
<h3>{sortedList.length} Delegators</h3>
|
|
</div>
|
|
<div className="content-wrapper">
|
|
<ScrollContainer className="overflow-container" hideScrollbars={false} style={{}}>
|
|
<div className="overflow-content" style={{ cursor: 'grab', maxHeight: '300px' }}>
|
|
{
|
|
sortedList.map(function (orch, i) {
|
|
const tmp = i - ((activePage - 1) * itemsPerPage);
|
|
if (tmp >= 0 && tmp < itemsPerPage) {
|
|
let thisCommission = null;
|
|
let thisStake = null;
|
|
let thisEarnings = null;
|
|
|
|
for (const obj of ticketList) {
|
|
if (obj.address == orch.address) {
|
|
thisEarnings = obj;
|
|
}
|
|
}
|
|
for (const obj of commissionList) {
|
|
if (obj.address == orch.address) {
|
|
thisCommission = obj;
|
|
}
|
|
}
|
|
for (const obj of stakeList) {
|
|
if (obj.address == orch.address) {
|
|
thisStake = obj;
|
|
}
|
|
}
|
|
let thisScore = null;
|
|
if (thisScores && thisScores.scores) {
|
|
thisScore = thisScores.scores[orch.address];
|
|
}
|
|
return (
|
|
<div className='stroke' key={obj.seed + orch.address + i}>
|
|
<Winner
|
|
thisScore={thisScore}
|
|
totalEarnings={obj.data.winningTicketsReceivedSum}
|
|
thisEarnings={thisEarnings}
|
|
totalStake={totalStakeSum}
|
|
thisStake={thisStake}
|
|
thisCommission={thisCommission}
|
|
address={orch.address}
|
|
thisIndex={i + 1}
|
|
seed={obj.seed + "win" + orch.address + i}
|
|
/>
|
|
<div className="verticalDivider" />
|
|
</div>
|
|
)
|
|
}
|
|
return null;
|
|
})
|
|
}
|
|
</div>
|
|
</ScrollContainer>
|
|
</div>
|
|
<div className="row" style={{ marginTop: '1em', marginBottom: '1em' }}>
|
|
{totalPages > 1 ?
|
|
<Pagination page={activePage} onChange={setPage} total={totalPages} siblings={1} initialPage={1} />
|
|
: null}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="verticalDivider" />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default WinnerMonth; |