ui: fix beacon stat display in the Lido app

lidofinance · Nov 22, 2020 · 118bdc2 · 118bdc2
1 parent 6d5cff2
commit 118bdc2
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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),
   }
 }