From 118bdc2c8dc01bc86cbec59e762962dfe82e9744 Mon Sep 17 00:00:00 2001
From: Sam Kozin <sam.kozin@gmail.com>
Date: Sun, 22 Nov 2020 15:49:14 +0300
Subject: [PATCH] ui: fix beacon stat display in the Lido app

---
 apps/lido/app/src/App.js    | 22 ++++++++++++----------
 apps/lido/app/src/index.js  |  2 +-
 apps/lido/app/src/script.js |  6 +++---
 3 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/apps/lido/app/src/App.js b/apps/lido/app/src/App.js
index 8e22cbd28..1eb786bba 100644
--- a/apps/lido/app/src/App.js
+++ b/apps/lido/app/src/App.js
@@ -69,7 +69,7 @@ export default function App() {
       // operators,
       // treasury,
       // insuranceFund,
-      // ether2Stat,
+      // beaconStat,
     } = appState
 
     return [
@@ -176,13 +176,15 @@ export default function App() {
     ]
   }, [appState, theme])
 
-  const ether2StatData = useMemo(() => {
-    const { ether2Stat } = appState
-
-    return Object.entries(ether2Stat).map(([key, value]) => ({
-      label: key,
-      content: <strong>{value}</strong>,
-    }))
+  const beaconStatData = useMemo(() => {
+    const { beaconStat: stat } = appState
+    return [
+      {
+        label: 'Deposits',
+        content: <strong>{stat.depositedValidators}</strong>,
+      },
+      { label: 'Balance', content: <strong>{stat.beaconBalance}</strong> },
+    ]
   }, [appState])
 
   const [stakeSidePanelOpen, setStakeSidePanelOpen] = useState(false)
@@ -234,9 +236,9 @@ export default function App() {
           </Box>
         }
         secondary={
-          <Box heading="ether2Stat">
+          <Box heading="Beacon stat">
             <ul>
-              {ether2StatData.map(({ label, content }, index) => (
+              {beaconStatData.map(({ label, content }, index) => (
                 <ListItem key={label + index}>
                   <span>{label}</span>
                   <span>:</span>
diff --git a/apps/lido/app/src/index.js b/apps/lido/app/src/index.js
index 524465662..e494e110c 100644
--- a/apps/lido/app/src/index.js
+++ b/apps/lido/app/src/index.js
@@ -21,7 +21,7 @@ const defaultState = {
   operators: defaultValue,
   treasury: defaultValue,
   insuranceFund: defaultValue,
-  ether2Stat: defaultValue,
+  beaconStat: defaultValue,
   isSyncing: true,
 }
 
diff --git a/apps/lido/app/src/script.js b/apps/lido/app/src/script.js
index 254904a7c..ec1eb2e11 100644
--- a/apps/lido/app/src/script.js
+++ b/apps/lido/app/src/script.js
@@ -64,7 +64,7 @@ function initializeState() {
       // operators: await getOperators(),
       // treasury: await getTreasury(),
       // insuranceFund: await getInsuranceFund(),
-      ether2Stat: await getBeaconStat(),
+      beaconStat: await getBeaconStat(),
     }
   }
 }
@@ -121,7 +121,7 @@ async function getOracle() {
 async function getBeaconStat() {
   const stat = await app.call('getBeaconStat').toPromise()
   return {
-    Deposited: fromWei(stat.depositedValidators),
-    Remote: fromWei(stat.beaconBalance),
+    depositedValidators: +stat.depositedValidators,
+    beaconBalance: fromWei(stat.beaconBalance),
   }
 }