From 387d581bba6e3fd20eed15275d03b22b49a2367e Mon Sep 17 00:00:00 2001
From: Marco van Dijk <marco@stronk.rocks>
Date: Mon, 18 Apr 2022 19:00:53 +0200
Subject: [PATCH] add earnings to stake overview

---
 src/actions/livepeer.js         |  8 ++-----
 src/components/StakeOverview.js | 42 ++++++++++++++++++++++++++++-----
 src/pages/home.js               |  2 +-
 src/pages/tickets.js            |  4 ++--
 4 files changed, 41 insertions(+), 15 deletions(-)

diff --git a/src/actions/livepeer.js b/src/actions/livepeer.js
index e2fcb28..d7ea4ce 100644
--- a/src/actions/livepeer.js
+++ b/src/actions/livepeer.js
@@ -591,8 +591,7 @@ export const getAllEnsInfo = () => async dispatch => {
 };
 
 export const getEnsInfo = async (addr) => {
-  const response = await apiUtil.getEnsInfo(addr);
-  const data = await response.json();
+  const response = apiUtil.getEnsInfo(addr);
 };
 
 
@@ -606,10 +605,7 @@ export const getAllThreeBoxInfo = () => async dispatch => {
 };
 
 export const getThreeBoxInfo = async (addr) => {
-  const response = await apiUtil.getThreeBox(addr);
-  if (response.ok) {
-    const data = await response.json();
-  }
+  const response = apiUtil.getThreeBox(addr);
 };
 
 export const getOrchestratorScores = (year, month) => async dispatch => {
diff --git a/src/components/StakeOverview.js b/src/components/StakeOverview.js
index 275894e..af84dff 100644
--- a/src/components/StakeOverview.js
+++ b/src/components/StakeOverview.js
@@ -76,21 +76,24 @@ const StakeOverview = (obj) => {
     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 && !parseInt(thisOrch.totalVolumeUSD)) {
+      if (removeOnlyStakers && !parseFloat(thisOrch.totalVolumeUSD)) {
         continue;
       }
-      totalStake += parseInt(thisOrch.totalStake);
+      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 = parseInt(thisOrch.totalStake);
+      const thisStake = parseFloat(thisOrch.totalStake);
+      const thisEarnings = parseFloat(thisOrch.totalVolumeETH);
       orchIdx -= 1;
-      if (removeOnlyStakers && !parseInt(thisOrch.totalVolumeUSD)) {
+      if (removeOnlyStakers && !parseFloat(thisOrch.totalVolumeUSD)) {
         continue;
       }
       // Add orch stat descending
@@ -108,13 +111,17 @@ const StakeOverview = (obj) => {
         orchList.push({
           address: thisOrch.id,
           sum: thisStake,
-          ratio: (thisStake / totalStake) * 100
+          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
+          ratio: (thisStake / totalStake) * 100,
+          earnings: thisEarnings,
+          earningsRatio: (thisEarnings / totalEarnings) * 100
         });
       }
       // Add slice
@@ -175,6 +182,21 @@ const StakeOverview = (obj) => {
     <div className="stroke">
       {pieObj}
       <div className="flexContainer forceWrap">
+        <div className="row">
+          <div className="rowAlignLeft">
+           <h4>Orchestrator</h4>
+          </div>
+          <div className="strokeSmollLeft" style={{ minWidth: '100px' }} >
+          <div className="rowAlignLeft" >
+              <h4>Stake</h4>
+            </div>
+          </div>
+          <div className="strokeSmollLeft" style={{ minWidth: '100px' }} >
+            <div className="rowAlignLeft" >
+              <h4>Earnings</h4>
+            </div>
+          </div>
+        </div>
         {
           orchList.map(function (orch) {
             return (
@@ -190,6 +212,14 @@ const StakeOverview = (obj) => {
                     <span>({orch.ratio.toFixed(2)} %)</span>
                   </div>
                 </div>
+                <div className="strokeSmollLeft" style={{ minWidth: '100px' }} >
+                  <div className="rowAlignLeft" >
+                    <h4>{orch.earnings.toFixed(2)} Eth</h4>
+                  </div>
+                  <div className="rowAlignRight" >
+                    <span>({orch.earningsRatio.toFixed(2)} %)</span>
+                  </div>
+                </div>
               </div>
             )
           })
diff --git a/src/pages/home.js b/src/pages/home.js
index fec62e1..8c07684 100644
--- a/src/pages/home.js
+++ b/src/pages/home.js
@@ -65,7 +65,7 @@ const Home = (obj) => {
             <button className="waveButton" onClick={() => {
               setRedirectToTickets(true);
             }}>
-              <p>💵 Tickets 💰</p>
+              <p>📈 Statistics 💰</p>
             </button>
           </div>
           <div className="verticalDivider" />
diff --git a/src/pages/tickets.js b/src/pages/tickets.js
index e336c2e..df23ccd 100644
--- a/src/pages/tickets.js
+++ b/src/pages/tickets.js
@@ -13,7 +13,7 @@ const Tickets = (obj) => {
   const [ticketsPerMonth, setTicketsPerMonth] = useState([]);
   const [redirectToHome, setRedirectToHome] = useState(false);
 
-  console.log("Rendering Winning Ticket Viewer");
+  console.log("Rendering Stats Viewer");
 
   useEffect(() => {
     // Process Winning tickets as: 
@@ -185,7 +185,7 @@ const Tickets = (obj) => {
           }}>
             <h1>🏠</h1>
           </button>
-          <h4 className="rowAlignLeft withWrap showNeverOnMobile">Winning Tickets</h4>
+          <h4 className="rowAlignLeft withWrap showNeverOnMobile">Statistics</h4>
         </div>
       </div>
       <div id='bodyContent'>