Add Total Rewards

explorer-nextjs/src/app/api/types.ts

@@ -365,3 +365,22 @@ export type GatewayStatus = {
     };
   };
 };
+
+type BalanceDetails = {
+  amount: number;
+  denom: string;
+};
+
+export type ObservatoryRewards = {
+  operator_commissions: BalanceDetails;
+  staking_rewards: BalanceDetails;
+  unlocked: BalanceDetails;
+};
+
+export type ObservatoryBalance = {
+  delegated: BalanceDetails;
+  locked: BalanceDetails;
+  rewards: ObservatoryRewards;
+  self_bonded: BalanceDetails;
+  spendable: BalanceDetails;
+};

explorer-nextjs/src/app/api/urls.ts

@@ -34,3 +34,7 @@ export const VALIDATOR_BASE_URL =
   process.env.NEXT_PUBLIC_VALIDATOR_URL || "https://rpc.nymtech.net";
 export const DATA_OBSERVATORY_NODES_URL =
   "https://api.nym.spectredao.net/api/v1/nodes";
+export const DATA_OBSERVATORY_DELEGATIONS_URL =
+  "https://api.nym.spectredao.net/api/v1/delegations";
+export const DATA_OBSERVATORY_BALANCES_URL =
+  "https://api.nym.spectredao.net/api/v1/balances";

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

@@ -224,6 +224,7 @@ const StakeTable = ({ nodes }: { nodes: MappedNymNodes }) => {
           </Typography>
         ),
       },
+
       {
         id: "action",
         header: "Action",

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

@@ -1,14 +1,49 @@
+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 TotalRewardsCard = () => {
+  const [totalStakerRewards, setTotalStakerRewards] = useState<string>();
+  const { nymClient, address } = useNymClient();
+
+  useEffect(() => {
+    if (!nymClient || !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();
+      console.log("balances :>> ", balances);
+      const stakerRewards = formatBigNum(
+        +balances.rewards.staking_rewards.amount / 1_000_000,
+      );
+
+      return setTotalStakerRewards(stakerRewards);
+    };
+
+    fetchBalances();
+  }, [address, nymClient]);
+
+  if (!address) {
+    return null;
+  }
   return (
     <ExplorerCard label="Total Rewards">
       <Typography
         variant="h3"
         sx={{ color: "pine.950", wordWrap: "break-word", maxWidth: "95%" }}
       >
-        - NYM
+        {totalStakerRewards || 0} NYM
       </Typography>
     </ExplorerCard>
   );