diff --git a/src/App.js b/src/App.js index 52b181e..d246157 100644 --- a/src/App.js +++ b/src/App.js @@ -4,6 +4,7 @@ import Startup from './pages/loadingScreen.js'; import Grafana from './pages/grafana.js'; import Livepeer from './pages/livepeer.js'; import Stats from './pages/stats.js'; +import Summary from './pages/summary.js' import { BrowserRouter as Router, @@ -20,6 +21,7 @@ export default function App() { } /> } /> } /> + } /> } /> } /> diff --git a/src/components/MonthlyFactoids.js b/src/components/MonthlyFactoids.js index 54215e4..5c98be3 100644 --- a/src/components/MonthlyFactoids.js +++ b/src/components/MonthlyFactoids.js @@ -1,6 +1,5 @@ import React from 'react'; import Ticket from "../components/TicketViewer"; -import ScrollContainer from 'react-indiana-drag-scroll'; const claimColour = "rgba(25, 158, 29, 0.4)"; const stakeColour = "rgba(25, 158, 147, 0.4)"; @@ -13,6 +12,27 @@ const activationColour = "rgba(154, 158, 25, 0.4)"; const ticketTransferColour = "rgba(88, 91, 42, 0.3)"; const greyColour = "rgba(122, 128, 127, 0.4)"; +function updateClipboard(newClip) { + navigator.clipboard.writeText(newClip).then( + () => { + console.log("Copied!"); + }, + () => { + console.log("Copy failed!"); + } + ); +} + +function copyLink(addr) { + navigator.permissions + .query({ name: "clipboard-write" }) + .then((result) => { + if (result.state === "granted" || result.state === "prompt") { + updateClipboard(addr); + } + }); +} + const MonthlyFactoids = (obj) => { // Pies for stake overview, if have stake data for that month saved let totalStakeSum = 0; @@ -26,9 +46,47 @@ const MonthlyFactoids = (obj) => { } } + let summary = ""; + if (obj.data.reactivationCount) { + summary += "🔌 " + obj.data.reactivationCount + " orchestrators reactivated \r\n"; + } + if (obj.data.activationCount) { + summary += "🔧 " + obj.data.activationCount + " orchestrators joined with an initial stake of " + obj.data.activationInitialSum.toLocaleString({ maximumFractionDigits: 2 }) + " LPT \r\n"; + } + if (obj.data.latestCommission && obj.data.latestCommission.length) { + summary += "🔗 " + obj.data.latestCommission.length + " orchestrators had a total of " + totalStakeSum.toLocaleString({ maximumFractionDigits: 2 }) + " LPT staked to them \r\n"; + } + if (obj.data.bondCount) { + summary += "📈 " + obj.data.bondCount + " accounts delegated for the first time for a total of " + obj.data.bondStakeSum.toLocaleString({ maximumFractionDigits: 2 }) + " LPT \r\n"; + } + if (obj.data.unbondCount) { + summary +="📉 " + obj.data.unbondCount + " delegators unbonded " + obj.data.unbondStakeSum.toLocaleString({ maximumFractionDigits: 2 }) + " LPT \r\n"; + } + if (obj.data.rewardCount) { + summary += "⌛ " + obj.data.rewardCount + " reward calls made were made by orchestrators worth " + obj.data.rewardAmountSum.toLocaleString({ maximumFractionDigits: 2 }) + " LPT \r\n"; + } + if (obj.data.claimCount) { + summary += "🏦 " + obj.data.claimRewardSum.toLocaleString({ maximumFractionDigits: 2 }) + " LPT and " + obj.data.claimFeeSum.toLocaleString({ maximumFractionDigits: 2 }) + " ETH worth of rewards were claimed by delegators \r\n"; + } + if (obj.data.withdrawStakeCount) { + summary += "💸 " + obj.data.withdrawStakeAmountSum.toLocaleString({ maximumFractionDigits: 2 }) + " LPT worth of staking rewards were withdrawn to the accounts of delegators \r\n"; + } + if (obj.data.withdrawFeesCount) { + summary += "💸 " + obj.data.withdrawFeesAmountSum.toLocaleString({ maximumFractionDigits: 2 }) + " ETH worth of transcoding fees were withdrawn to the accounts of delegators \r\n"; + } + if (obj.data.moveStakeCount) { + summary += "🔄 " + obj.data.moveStakeSum.toLocaleString({ maximumFractionDigits: 2 }) + " LPT worth of stake was moved directly between orchestrators in " + obj.data.moveStakeCount + " transactions \r\n"; + } + if (obj.data.winningTicketsReceivedCount) { + summary += "🎫 " + obj.data.winningTicketsReceivedCount + " winning tickets were sent out by " + obj.data.winningTicketsSent.length + " broadcasters \r\n"; + } + if (obj.data.winningTicketsRedeemedCount) { + summary += "🎟️ " + obj.data.winningTicketsRedeemedCount + " winning tickets were redeemed worth " + obj.data.winningTicketsRedeemedSum.toLocaleString({ maximumFractionDigits: 2 }) + " ETH \r\n"; + } + return (
-
+
{obj.data.reactivationCount ?
@@ -104,7 +162,7 @@ const MonthlyFactoids = (obj) => {
: null @@ -114,7 +172,7 @@ const MonthlyFactoids = (obj) => {
: null @@ -150,6 +208,12 @@ const MonthlyFactoids = (obj) => {
: null }
+ +
) diff --git a/src/components/OrchInfoViewer.js b/src/components/OrchInfoViewer.js index f5a5d00..023f720 100644 --- a/src/components/OrchInfoViewer.js +++ b/src/components/OrchInfoViewer.js @@ -178,7 +178,7 @@ const OrchInfoViewer = (obj) => { } return ( -
+
diff --git a/src/pages/MonthlyStatsSummary.js b/src/pages/MonthlyStatsSummary.js new file mode 100644 index 0000000..4f16db1 --- /dev/null +++ b/src/pages/MonthlyStatsSummary.js @@ -0,0 +1,86 @@ +import React from 'react'; + +const MonthlyStatsSummary = (obj) => { + let totalStakeSum = 0; + if (obj.data.latestTotalStake && obj.data.latestTotalStake.length) { + 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; + } + } + + return ( +
+
+ {obj.data.reactivationCount ? +
+

🔌 {obj.data.reactivationCount} orchestrators reactivated

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

🔧 {obj.data.activationCount} orchestrators joined with an initial stake of {obj.data.activationInitialSum.toLocaleString({ maximumFractionDigits: 2 })} LPT

+
: null + } + {(obj.data.latestCommission && obj.data.latestCommission.length) ? +
+

🔗 {obj.data.latestCommission.length} orchestrators had a total of {totalStakeSum.toLocaleString({ maximumFractionDigits: 2 })} LPT staked to them

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

📈 {obj.data.bondCount} accounts delegated for the first time for a total of {obj.data.bondStakeSum.toLocaleString({ maximumFractionDigits: 2 })} LPT

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

📉 {obj.data.unbondCount} delegators unbonded {obj.data.unbondStakeSum.toLocaleString({ maximumFractionDigits: 2 })} LPT

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

⌛ {obj.data.rewardCount} reward calls made were made by orchestrators worth {obj.data.rewardAmountSum.toLocaleString({ maximumFractionDigits: 2 })} LPT

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

🏦 {obj.data.claimRewardSum.toLocaleString({ maximumFractionDigits: 2 })} LPT and {obj.data.claimFeeSum.toLocaleString({ maximumFractionDigits: 2 })} ETH worth of rewards were claimed by delegators

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

💸 {obj.data.withdrawStakeAmountSum.toLocaleString({ maximumFractionDigits: 2 })} LPT worth of staking rewards were withdrawn to the account of the delegator

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

💸 {obj.data.withdrawFeesAmountSum.toLocaleString({ maximumFractionDigits: 2 })} ETH worth of transcoding fees were withdrawn to the account of the delegator

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

🔄 {obj.data.moveStakeSum.toLocaleString({ maximumFractionDigits: 2 })} LPT worth of stake was moved between orchestrators

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

🎫 {obj.data.winningTicketsReceivedCount} winning tickets were sent out by {obj.data.winningTicketsSent.length} broadcasters

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

🎟️ {obj.data.winningTicketsRedeemedCount} winning tickets were redeemed worth {obj.data.winningTicketsRedeemedSum.toLocaleString({ maximumFractionDigits: 2 })} ETH

+
: null + } +
+
+
+ ) + + +} + +export default MonthlyStatsSummary; \ No newline at end of file diff --git a/src/pages/summary.js b/src/pages/summary.js new file mode 100644 index 0000000..e6026ca --- /dev/null +++ b/src/pages/summary.js @@ -0,0 +1,162 @@ +import React, { useState } from 'react' +import '../style.css'; +import { Navigate } from "react-router-dom"; +import { useSelector } from 'react-redux'; +import { Accordion } from '@mantine/core'; +import MonthlyStatsSummary from './MonthlyStatsSummary'; + +const Stats = (obj) => { + const livepeer = useSelector((state) => state.livepeerstate); + const [redirectToHome, setRedirectToHome] = useState(false); + const [showOnlyTranscoders, setShowOnlyTranscoders] = useState(true); + + console.log("Rendering Stats Viewer"); + + if (redirectToHome) { + return ; + } + + return ( +
+ +
+
+
+
+
+
+
+ + { + livepeer.monthlyStats.slice(0).reverse().map(function (data, i) { + let thisMonth = ""; + let monthAsNum = data.month; + if (monthAsNum == 0) { + thisMonth = "Januari";; + } else if (monthAsNum == 1) { + thisMonth = "Februari";; + } else if (monthAsNum == 2) { + thisMonth = "March";; + } else if (monthAsNum == 3) { + thisMonth = "April"; + } else if (monthAsNum == 4) { + thisMonth = "May"; + } else if (monthAsNum == 5) { + thisMonth = "June"; + } else if (monthAsNum == 6) { + thisMonth = "July"; + } else if (monthAsNum == 7) { + thisMonth = "August"; + } else if (monthAsNum == 8) { + thisMonth = "September"; + } else if (monthAsNum == 9) { + thisMonth = "October"; + } else if (monthAsNum == 10) { + thisMonth = "November"; + } else if (monthAsNum == 11) { + thisMonth = "December";; + } + + const title = data.year + "-" + thisMonth + ": " + data.winningTicketsReceived.length + " orchestrators earned " + data.winningTicketsReceivedSum.toFixed(2) + " Eth"; + + return ( + + + + ) + }) + } + +
+
+
+
+
+
+
+
+ ); +} + +export default Stats; \ No newline at end of file