Add account stats, add loaders, cleanup

spacemeshos · Jul 24, 2024 · 5cfa8f8 · 5cfa8f8
1 parent 8c06b24
commit 5cfa8f8
Show file tree

Hide file tree

Showing 15 changed files with 63 additions and 121 deletions.
diff --git a/src/components/InfoBlock/index.jsx b/src/components/InfoBlock/index.jsx
@@ -13,43 +13,43 @@ const InfoBlock = ({ accounts, security, epoch, layer, rewards, smeshers }) => (
       <li className="infoBlock-item">
         <p className="infoBlock-item-number">
           <Link to={`/${ACCOUNTS}`}>
-            {JSON.stringify(accounts) || (<Loader size={15} />)}
+            {accounts || (<Loader size={20} />)}
           </Link>
         </p>
         <p className="infoBlock-item-title">Accounts</p>
       </li>
       <li className="infoBlock-item">
         <p className="infoBlock-item-number">
           <Link to={`/${REWARDS}`}>
-            {formatSmidge(rewards) || (<Loader size={15} />)}
+            {rewards ? formatSmidge(rewards) : (<Loader size={20} />)}
           </Link>
         </p>
         <p className="infoBlock-item-title">smeshing rewards</p>
       </li>
       <li className="infoBlock-item">
-        <p className="infoBlock-item-number">{byteConverter(security)}</p>
+        <p className="infoBlock-item-number">{security ? byteConverter(security) : (<Loader size={20} />)}</p>
         <p className="infoBlock-item-title">security</p>
       </li>
       <li className="infoBlock-item">
         <p className="infoBlock-item-number">
           <Link to={`/${EPOCHS}/${epoch}`}>
-            {JSON.stringify(epoch) || (<Loader size={15} />)}
+            {epoch || (<Loader size={20} />)}
           </Link>
         </p>
         <p className="infoBlock-item-title">epoch</p>
       </li>
       <li className="infoBlock-item">
         <p className="infoBlock-item-number">
           <Link to={`/${LAYERS}/${layer}`}>
-            {JSON.stringify(layer) || (<Loader size={15} />)}
+            {layer || (<Loader size={20} />)}
           </Link>
         </p>
         <p className="infoBlock-item-title">layer</p>
       </li>
       <li className="infoBlock-item">
         <p className="infoBlock-item-number">
           <Link to={`/${SMESHER}`}>
-            {JSON.stringify(smeshers) || (<Loader size={15} />)}
+            {smeshers || (<Loader size={20} />)}
           </Link>
         </p>
         <p className="infoBlock-item-title">active smeshers</p>

diff --git a/src/components/Table/AccountsRow.jsx b/src/components/Table/AccountsRow.jsx
@@ -20,15 +20,13 @@ type Props = {
 const AccountsRow = ({ data }: Props) => {
   const store = useStore();
   const [stats, setStats] = useState({});
-  const [isFetching, setIsFetching] = useState(true);
 
   useEffect(() => {
     const fetchData = async () => {
       if (data && data.length > 0) {
-        setIsFetching(true);
         try {
           const promises = data.map(async (item) => {
-            const response = await fetch(`${store.statsApiUrl}/stats/account/${item.address}`);
+            const response = await fetch(`${store.statsApiUrl}/account/${item.address}`);
             if (!response.ok) {
               throw new Error(`Error fetching data for item ${item.address}`);
             }
@@ -41,18 +39,12 @@ const AccountsRow = ({ data }: Props) => {
           setStats(combinedStats);
         } catch (error) {
           console.error(error);
-        } finally {
-          setIsFetching(false);
         }
       }
     };
     fetchData();
   }, [data]);
 
-  if (isFetching) {
-    return <Loader size={100} />;
-  }
-
   return data && data.map((item: Spacemeshv2alpha1Account) => (
     <div key={nanoid()} className="tr">
       <div className="td">
@@ -61,10 +53,10 @@ const AccountsRow = ({ data }: Props) => {
         </Link>
       </div>
       <div className="td">
-        {stats[item.address] ? formatSmidge(stats[item.address].sent) : '---'}
+        {stats[item.address] ? formatSmidge(stats[item.address].sent) : <Loader size={20} />}
       </div>
       <div className="td">
-        {stats[item.address] ? formatSmidge(stats[item.address].received) : '---'}
+        {stats[item.address] ? formatSmidge(stats[item.address].received) : <Loader size={20} />}
       </div>
       <div className="td">
         <CustomTimeAgo time={store.layerTimestamp(item.current.layer)} />

diff --git a/src/components/Table/EpochsRow.jsx b/src/components/Table/EpochsRow.jsx
@@ -11,22 +11,20 @@ import {
 } from '../../config/constants';
 import CustomTimeAgo from '../CustomTimeAgo';
 import { useStore } from '../../store';
-import Loader from '../Loader';
 import { formatSmidge } from '../../helper/converter';
+import Loader from '../Loader';
 
 const EpochsRow = ({ data }) => {
   const store = useStore();
 
   const [stats, setStats] = useState({});
-  const [isFetching, setIsFetching] = useState(true);
 
   useEffect(() => {
     const fetchData = async () => {
       if (data && data.length > 0) {
-        setIsFetching(true);
         try {
           const promises = data.map(async (item) => {
-            const response = await fetch(`${store.statsApiUrl}/stats/epoch/${item.number}`);
+            const response = await fetch(`${store.statsApiUrl}/epoch/${item.number}`);
             if (!response.ok) {
               throw new Error(`Error fetching data for item ${item.number}`);
             }
@@ -39,18 +37,12 @@ const EpochsRow = ({ data }) => {
           setStats(combinedStats);
         } catch (error) {
           console.error(error);
-        } finally {
-          setIsFetching(false);
         }
       }
     };
     fetchData();
   }, [data]);
 
-  if (isFetching) {
-    return <Loader size={100} />;
-  }
-
   return data && data.map((item) => {
     const futureEpoch = store.layerTimestamp(item.startLayer) * 1000 > Date.now();
     return (
@@ -67,14 +59,18 @@ const EpochsRow = ({ data }) => {
           <Link to={`/${EPOCHS}/${item.number}/${LAYERS}`}>{item.layers}</Link>
         </div>
         <div className="td">
-          <Link to={`/${EPOCHS}/${item.number}/${TXNS}`}>{stats[item.number].transactions_count}</Link>
+          <Link to={`/${EPOCHS}/${item.number}/${TXNS}`}>
+            {stats[item.number] ? stats[item.number]?.transactions_count : <Loader size={20} />}
+          </Link>
         </div>
         <div className="td">
-          <Link to={`/${EPOCHS}/${item.number}/${SMESHER}`}>{stats[item.number].activations_count}</Link>
+          <Link to={`/${EPOCHS}/${item.number}/${SMESHER}`}>
+            {stats[item.number] ? stats[item.number]?.activations_count : <Loader size={20} />}
+          </Link>
         </div>
         <div className="td" style={{ flexGrow: 2 }}>
           <Link to={`/${EPOCHS}/${item.number}/${REWARDS}`}>
-            {formatSmidge(stats[item.number].rewards_sum)}
+            {stats[item.number] ? formatSmidge(stats[item.number].rewards_sum || 0) : <Loader size={20} />}
           </Link>
         </div>
       </div>

diff --git a/src/components/Table/LayersRow.jsx b/src/components/Table/LayersRow.jsx
@@ -21,15 +21,13 @@ const LayersRow = ({ data }: Props) => {
   const store = useStore();
 
   const [stats, setStats] = useState({});
-  const [isFetching, setIsFetching] = useState(true);
 
   useEffect(() => {
     const fetchData = async () => {
       if (data && data.length > 0) {
-        setIsFetching(true);
         try {
           const promises = data.map(async (item) => {
-            const response = await fetch(`${store.statsApiUrl}/stats/layer/${item.number}`);
+            const response = await fetch(`${store.statsApiUrl}/layer/${item.number}`);
             if (!response.ok) {
               throw new Error(`Error fetching data for item ${item.number}`);
             }
@@ -42,18 +40,12 @@ const LayersRow = ({ data }: Props) => {
           setStats(combinedStats);
         } catch (error) {
           console.error(error);
-        } finally {
-          setIsFetching(false);
         }
       }
     };
     fetchData();
   }, [data]);
 
-  if (isFetching) {
-    return <Loader size={100} />;
-  }
-
   return data && data.map((item: Spacemeshv2alpha1Layer) => (
     <div key={nanoid()} className="tr">
       <div className="td">
@@ -66,12 +58,14 @@ const LayersRow = ({ data }: Props) => {
       </div>
       <div className="td">
         <Link to={`/${LAYERS}/${item.number}/${TXNS}`}>
-          {`${stats[item.number].transactions_count} Transactions (${formatSmidge(stats[item.number].transactions_sum)})`}
+          { stats[item.number] ? (
+            `${stats[item.number].transactions_count} Transactions (${formatSmidge(stats[item.number].transactions_sum)})`
+          ) : <Loader size={20} /> }
         </Link>
       </div>
       <div className="td">
         <Link to={`/${LAYERS}/${item.number}/${REWARDS}`}>
-          {formatSmidge(stats[item.number].rewards_sum)}
+          {stats[item.number] ? formatSmidge(stats[item.number].rewards_sum) : <Loader size={20} />}
         </Link>
       </div>
     </div>

diff --git a/src/components/Table/index.js b/src/components/Table/index.js
@@ -391,6 +391,10 @@ const Table = ({ name, subPage, id, epochs }: Props) => {
     getData(nextOffset);
   };
 
+  if (isFetching) {
+    return <Loader size={100} />;
+  }
+
   return (
     <>
       <div className="table">

diff --git a/src/routes/accounts/account.jsx b/src/routes/accounts/account.jsx
@@ -5,14 +5,13 @@ import { Link, useParams } from 'react-router-dom';
 import { Spacemeshv2alpha1Account } from 'api';
 import TitleBlock from '../../components/TitleBlock';
 import { getColorByPageName } from '../../helper/getColorByPageName';
-
 import {
   ACCOUNTS, REWARDS, TXNS,
 } from '../../config/constants';
 import RightSideBlock from '../../components/CountBlock/RightSideBlock';
 import { useStore } from '../../store';
 import Loader from '../../components/Loader';
-import { parseSmidge } from '../../helper/converter';
+import { formatSmidge, parseSmidge } from '../../helper/converter';
 import CopyButton from '../../components/CopyButton';
 import Table from '../../components/Table';
 
@@ -24,6 +23,7 @@ const Account = () => {
   const [data, setData] = useState <Spacemeshv2alpha1Account>();
   const [totalRewards, setTotalRewards] = useState(0);
   const [totalTransactions, setTotalTransactions] = useState(0);
+  const [rewardsSum, setRewardsSum] = useState(0);
   const [smidge, setSmidge] = useState({ value: 0, unit: 'SMH' });
 
   useEffect(() => {
@@ -37,21 +37,12 @@ const Account = () => {
   }, [params.id]);
 
   useEffect(() => {
-    store.api.reward.rewardServiceList({
-      coinbase: params.id,
-      limit: 1,
-    }).then((res) => {
-      setTotalRewards(res.total);
-    });
-  }, [params.id]);
-
-  useEffect(() => {
-    store.api.transaction.transactionServiceList({
-      address: params.id,
-      limit: 1,
-    }).then((res) => {
-      setTotalTransactions(res.total);
-    });
+    fetch(`${store.statsApiUrl}/account/${params.id}`).then((res) => res.json())
+      .then((res) => {
+        setRewardsSum(formatSmidge(res.rewards_sum));
+        setTotalRewards(res.rewards_count);
+        setTotalTransactions(res.transactions_count);
+      });
   }, [params.id]);
 
   return (
@@ -89,6 +80,10 @@ const Account = () => {
                 <span className="item-value">
                   <Link to={`/${ACCOUNTS}/${data.address}/${REWARDS}`}>
                     {totalRewards}
+                    {' '}
+                    (
+                    {rewardsSum}
+                    )
                   </Link>
                 </span>
               </li>

diff --git a/src/routes/accounts/accounts.jsx b/src/routes/accounts/accounts.jsx
@@ -31,7 +31,7 @@ const Accounts = () => {
         />
         <RightSideBlock
           color={getColorByPageName(ACCOUNTS)}
-          number={store.overview.accounts_count}
+          number={store.overview?.accounts_count || 0}
           unit="accounts"
           startTime={recentActivity || 0}
           label="Recent activity"

diff --git a/src/routes/epochs/epoch-rewards.jsx b/src/routes/epochs/epoch-rewards.jsx
@@ -17,7 +17,7 @@ const EpochRewards = () => {
 
   useEffect(() => {
     if (store.netInfo === null) return;
-    fetch(`${store.statsApiUrl}/stats/epoch/${params.id}`).then((res) => res.json()).then((res) => {
+    fetch(`${store.statsApiUrl}/epoch/${params.id}`).then((res) => res.json()).then((res) => {
       setStats(res);
     });
 

diff --git a/src/routes/epochs/epoch-smeshers.jsx b/src/routes/epochs/epoch-smeshers.jsx
@@ -17,7 +17,7 @@ const EpochSmeshers = () => {
 
   useEffect(() => {
     if (store.netInfo === null) return;
-    fetch(`${store.statsApiUrl}/stats/epoch/${params.id}`).then((res) => res.json()).then((res) => {
+    fetch(`${store.statsApiUrl}/epoch/${params.id}`).then((res) => res.json()).then((res) => {
       setStats(res);
       const epochStart = params.id * store.netInfo.layersPerEpoch;
       setStart(epochStart);

diff --git a/src/routes/epochs/epoch-txns.jsx b/src/routes/epochs/epoch-txns.jsx
@@ -17,7 +17,7 @@ const EpochTxns = () => {
 
   useEffect(() => {
     if (store.netInfo === null) return;
-    fetch(`${store.statsApiUrl}/stats/epoch/${params.id}`).then((res) => res.json()).then((res) => {
+    fetch(`${store.statsApiUrl}/epoch/${params.id}`).then((res) => res.json()).then((res) => {
       setStats(res);
     });
 

diff --git a/src/routes/epochs/epoch.jsx b/src/routes/epochs/epoch.jsx
@@ -11,6 +11,7 @@ import { useStore } from '../../store';
 import { formatSmidge } from '../../helper/converter';
 import CustomTimeAgo from '../../components/CustomTimeAgo';
 import { fullDate } from '../../helper/formatter';
+import Loader from '../../components/Loader';
 
 const Epoch = () => {
   const store = useStore();
@@ -19,11 +20,11 @@ const Epoch = () => {
 
   const [start, setStart] = useState(0);
   const [end, setEnd] = useState(0);
-  const [stats, setStats] = useState({});
+  const [stats, setStats] = useState(null);
 
   useEffect(() => {
-    if (store.netInfo === null) return;
-    fetch(`${store.statsApiUrl}/stats/epoch/${params.id}`).then((res) => res.json()).then((res) => {
+    if (store.netInfo === null || store.netInfo.layersPerEpoch === null) return;
+    fetch(`${store.statsApiUrl}/epoch/${params.id}`).then((res) => res.json()).then((res) => {
       setStats(res);
     });
 
@@ -43,7 +44,7 @@ const Epoch = () => {
           />
           <RightSideBlock
             color={getColorByPageName(name)}
-            number={store.netInfo.layersPerEpoch}
+            number={store.netInfo?.layersPerEpoch || 0}
             unit="layers"
             startTime={store.layerTimestamp(start)}
           />
@@ -75,27 +76,27 @@ const Epoch = () => {
             <li className="item">
               <span className="item-name">Layers</span>
               <span className="item-value">
-                <Link to={`/${EPOCHS}/${params.id}/${LAYERS}`}>{store.netInfo.layersPerEpoch}</Link>
+                <Link to={`/${EPOCHS}/${params.id}/${LAYERS}`}>{store.netInfo?.layersPerEpoch || 0}</Link>
               </span>
             </li>
             <li className="item">
               <span className="item-name">Rewards</span>
               <span className="item-value">
                 <Link to={`/${EPOCHS}/${params.id}/${REWARDS}`}>
-                  {`${stats.rewards_count} (${formatSmidge(stats.rewards_sum)})`}
+                  {stats ? `${stats.rewards_count} (${formatSmidge(stats.rewards_sum)})` : <Loader size={20} />}
                 </Link>
               </span>
             </li>
             <li className="item">
               <span className="item-name">Smeshers</span>
               <span className="item-value">
-                <Link to={`/${EPOCHS}/${params.id}/${SMESHER}`}>{stats.smeshers_count}</Link>
+                <Link to={`/${EPOCHS}/${params.id}/${SMESHER}`}>{stats ? stats.smeshers_count : <Loader size={20} />}</Link>
               </span>
             </li>
             <li className="item">
               <span className="item-name">Transactions</span>
               <span className="item-value">
-                <Link to={`/${EPOCHS}/${params.id}/${TXNS}`}>{stats.transactions_count}</Link>
+                <Link to={`/${EPOCHS}/${params.id}/${TXNS}`}>{stats ? stats.transactions_count : <Loader size={20} />}</Link>
               </span>
             </li>
           </ul>