Add Total Stake, refactor Original Stake to Observatory api call

explorer-nextjs/src/components/staking/OriginalStakeCard.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import type { ObservatoryBalance } from "@/app/api/types";
+import { DATA_OBSERVATORY_BALANCES_URL } from "@/app/api/urls";
 import { useNymClient } from "@/hooks/useNymClient";
 import { formatBigNum } from "@/utils/formatBigNumbers";
 import { Typography } from "@mui/material";
@@ -8,24 +10,32 @@ import ExplorerCard from "../cards/ExplorerCard";
 
 const OriginalStakeCard = () => {
   const [origialStake, setOriginalStake] = useState(0);
-  const { nymClient, address } = useNymClient();
+
+  const { address } = useNymClient();
 
   useEffect(() => {
-    const getDelegations = async () => {
-      if (!nymClient || !address) return;
+    if (!address) return;
 
-      const delegations = await nymClient?.getDelegatorDelegations({
-        delegator: address,
+    const fetchBalances = async () => {
+      const data = await fetch(`${DATA_OBSERVATORY_BALANCES_URL}/${address}`, {
+        headers: {
+          Accept: "application/json",
+          "Content-Type": "application/json; charset=utf-8",
+        },
+        next: { revalidate: 60 },
+        // refresh event list cache at given interval
       });
+      const balances: ObservatoryBalance = await data.json();
 
-      const totaluNYMStake = delegations.delegations.reduce((acc, curr) => {
-        return acc + Number(curr.amount.amount);
-      }, 0);
-
-      setOriginalStake(totaluNYMStake);
+      return setOriginalStake(balances.delegated.amount);
     };
-    getDelegations();
-  }, [address, nymClient]);
+
+    fetchBalances();
+  }, [address]);
+
+  if (!address) {
+    return null;
+  }
   return (
     <ExplorerCard label="Original Stake">
       <Typography

explorer-nextjs/src/components/staking/TotalRewardsCard.tsx

@@ -7,11 +7,11 @@ import { useEffect, useState } from "react";
 import ExplorerCard from "../cards/ExplorerCard";
 
 const TotalRewardsCard = () => {
-  const [totalStakerRewards, setTotalStakerRewards] = useState<string>();
-  const { nymClient, address } = useNymClient();
+  const [totalStakerRewards, setTotalStakerRewards] = useState<number>(0);
+  const { address } = useNymClient();
 
   useEffect(() => {
-    if (!nymClient || !address) return;
+    if (!address) return;
 
     const fetchBalances = async () => {
       const data = await fetch(`${DATA_OBSERVATORY_BALANCES_URL}/${address}`, {
@@ -23,16 +23,12 @@ const TotalRewardsCard = () => {
         // refresh event list cache at given interval
       });
       const balances: ObservatoryBalance = await data.json();
-      console.log("balances :>> ", balances);
-      const stakerRewards = formatBigNum(
-        +balances.rewards.staking_rewards.amount / 1_000_000,
-      );
 
-      return setTotalStakerRewards(stakerRewards);
+      return setTotalStakerRewards(balances.rewards.staking_rewards.amount);
     };
 
     fetchBalances();
-  }, [address, nymClient]);
+  }, [address]);
 
   if (!address) {
     return null;
@@ -43,7 +39,7 @@ const TotalRewardsCard = () => {
         variant="h3"
         sx={{ color: "pine.950", wordWrap: "break-word", maxWidth: "95%" }}
       >
-        {totalStakerRewards || 0} NYM
+        {`${formatBigNum(totalStakerRewards / 1_000_000)} NYM`}
       </Typography>
     </ExplorerCard>
   );

explorer-nextjs/src/components/staking/TotalStakeCard.tsx

@@ -1,16 +1,50 @@
 "use client";
 
+import type { ObservatoryBalance } from "@/app/api/types";
+import { DATA_OBSERVATORY_BALANCES_URL } from "@/app/api/urls";
+import { useNymClient } from "@/hooks/useNymClient";
+import { formatBigNum } from "@/utils/formatBigNumbers";
 import { Typography } from "@mui/material";
+import { useEffect, useState } from "react";
 import ExplorerCard from "../cards/ExplorerCard";
 
 const TotalStakeCard = () => {
+  const [totalStake, setTotalStake] = useState<number>(0);
+
+  const { address } = useNymClient();
+
+  useEffect(() => {
+    if (!address) return;
+
+    const fetchBalances = async () => {
+      const data = await fetch(`${DATA_OBSERVATORY_BALANCES_URL}/${address}`, {
+        headers: {
+          Accept: "application/json",
+          "Content-Type": "application/json; charset=utf-8",
+        },
+        next: { revalidate: 60 },
+        // refresh event list cache at given interval
+      });
+      const balances: ObservatoryBalance = await data.json();
+
+      return setTotalStake(
+        balances.rewards.staking_rewards.amount + balances.delegated.amount,
+      );
+    };
+
+    fetchBalances();
+  }, [address]);
+
+  if (!address) {
+    return null;
+  }
   return (
     <ExplorerCard label="Total Stake">
       <Typography
         variant="h3"
         sx={{ color: "pine.950", wordWrap: "break-word", maxWidth: "95%" }}
       >
-        - NYM
+        {`${formatBigNum(totalStake / 1_000_000)} NYM`}
       </Typography>
     </ExplorerCard>
   );