Add Sandbox to Node page

explorer-v2/src/app/api/index.tsx

@@ -24,15 +24,24 @@ import {
   NYM_PRICES_API,
   OBSERVATORY_GATEWAYS_URL,
   SANDBOX_CURRENT_EPOCH,
+  SANDBOX_CURRENT_EPOCH_REWARDS,
   SANDBOX_NS_API_MIXNODES_STATS,
   SANDBOX_NS_API_NODES,
 } from "./urls";
 
 // Fetch function for epoch rewards
-export const fetchEpochRewards = async (): Promise<
-  ExplorerData["currentEpochRewardsData"]
-> => {
-  const response = await fetch(CURRENT_EPOCH_REWARDS, {
+export const fetchEpochRewards = async (
+  environment: Environment
+): Promise<ExplorerData["currentEpochRewardsData"]> => {
+  const baseUrl =
+    environment === "sandbox"
+      ? SANDBOX_CURRENT_EPOCH_REWARDS
+      : CURRENT_EPOCH_REWARDS;
+
+  if (!baseUrl) {
+    throw new Error("CURRENT_EPOCH_REWARDS URL is not defined");
+  }
+  const response = await fetch(baseUrl, {
     headers: {
       Accept: "application/json",
       "Content-Type": "application/json; charset=utf-8",
@@ -61,9 +70,16 @@ export const fetchGatewayStatus = async (
 };
 
 export const fetchNodeDelegations = async (
+  environment: Environment,
   id: number
 ): Promise<NodeRewardDetails[]> => {
-  const response = await fetch(`${NS_API_NODES}/${id}/delegations`, {
+  const baseUrl =
+    environment === "sandbox" ? SANDBOX_NS_API_NODES : NS_API_NODES;
+
+  if (!baseUrl) {
+    throw new Error("NS_API_NODES URL is not defined");
+  }
+  const response = await fetch(`${baseUrl}/${id}/delegations`, {
     headers: {
       Accept: "application/json",
       "Content-Type": "application/json; charset=utf-8",

explorer-v2/src/components/nymNodePageComponents/DelegationsTable.tsx

@@ -11,7 +11,7 @@ import {
 import { useRouter } from "next/navigation";
 import { useMemo } from "react";
 import type { NodeRewardDetails } from "../../app/api/types";
-
+import { useEnvironment } from "@/providers/EnvironmentProvider";
 const ColumnHeading = ({
   children,
 }: {
@@ -36,17 +36,17 @@ type Props = {
 const DelegationsTable = ({ id }: Props) => {
   const router = useRouter();
   const theme = useTheme();
+  const { environment } = useEnvironment();
 
   const { data: delegations = [], isError } = useQuery({
-    queryKey: ["nodeDelegations", id],
-    queryFn: () => fetchNodeDelegations(id),
+    queryKey: ["nodeDelegations", id, environment],
+    queryFn: () => fetchNodeDelegations(environment, id),
     staleTime: 10 * 60 * 1000, // 10 minutes
     refetchOnWindowFocus: false, // Prevents unnecessary refetching
     refetchOnReconnect: false,
     refetchOnMount: false,
   });
 
-
   const columns: MRT_ColumnDef<NodeRewardDetails>[] = useMemo(
     () => [
       {

explorer-v2/src/components/nymNodePageComponents/NodeDataCard.tsx

@@ -4,7 +4,7 @@ import type { NS_NODE } from "@/app/api/types";
 import { Skeleton, Typography, useTheme } from "@mui/material";
 import { useQuery } from "@tanstack/react-query";
 import { format } from "date-fns";
-import { fetchEpochRewards, fetchNSApiNodes } from "../../app/api";
+import { fetchNSApiNodes } from "../../app/api";
 import ExplorerCard from "../cards/ExplorerCard";
 import ExplorerListItem from "../list/ListItem";
 import { useEnvironment } from "@/providers/EnvironmentProvider";
@@ -17,19 +17,6 @@ export const NodeDataCard = ({ paramId }: Props) => {
   let nodeInfo: NS_NODE | undefined;
   const { environment } = useEnvironment();
 
-  const {
-    data: epochRewardsData,
-    isLoading: isEpochLoading,
-    isError: isEpochError,
-  } = useQuery({
-    queryKey: ["epochRewards"],
-    queryFn: fetchEpochRewards,
-    staleTime: 10 * 60 * 1000, // 10 minutes
-    refetchOnWindowFocus: false, // Prevents unnecessary refetching
-    refetchOnReconnect: false,
-    refetchOnMount: false,
-  });
-
   // Fetch node information
   const {
     data: nsApiNodes = [],
@@ -47,7 +34,7 @@ export const NodeDataCard = ({ paramId }: Props) => {
   const theme = useTheme();
   const isDarkMode = theme.palette.mode === "dark";
 
-  if (isEpochLoading || isNSApiNodesLoading) {
+  if (isNSApiNodesLoading) {
     return (
       <ExplorerCard label="Nym node data" sx={{ height: "100%" }}>
         <Skeleton variant="text" height={50} />
@@ -58,7 +45,7 @@ export const NodeDataCard = ({ paramId }: Props) => {
     );
   }
 
-  if (isEpochError || isNSApiNodesError || !nsApiNodes || !epochRewardsData) {
+  if (isNSApiNodesError || !nsApiNodes) {
     return (
       <ExplorerCard label="Nym node data" sx={{ height: "100%" }}>
         <Typography

explorer-v2/src/components/nymNodePageComponents/NodeParametersCard.tsx

@@ -25,8 +25,8 @@ export const NodeParametersCard = ({ paramId }: Props) => {
     isLoading: isEpochLoading,
     isError: isEpochError,
   } = useQuery({
-    queryKey: ["epochRewards"],
-    queryFn: fetchEpochRewards,
+    queryKey: ["epochRewards", environment],
+    queryFn: () => fetchEpochRewards(environment),
     staleTime: 10 * 60 * 1000, // 10 minutes
     refetchOnWindowFocus: false, // Prevents unnecessary refetching
     refetchOnReconnect: false,
@@ -87,6 +87,7 @@ export const NodeParametersCard = ({ paramId }: Props) => {
   const totalStake = formatBigNum(Number(nodeInfo.total_stake) / 1_000_000);
   const totalStakeFormatted = `${totalStake} NYM`;
 
+
   // Extract reward details
 
   const profitMarginPercent = nodeInfo.rewarding_details

explorer-v2/src/components/nymNodePageComponents/NodeRoleCard.tsx

@@ -171,8 +171,8 @@ export const NodeRoleCard = ({ paramId }: Props) => {
     isLoading: isEpochLoading,
     isError: isEpochError,
   } = useQuery({
-    queryKey: ["epochRewards"],
-    queryFn: fetchEpochRewards,
+    queryKey: ["epochRewards", environment],
+    queryFn: () => fetchEpochRewards(environment),
     staleTime: 10 * 60 * 1000, // 10 minutes
     refetchOnWindowFocus: false, // Prevents unnecessary refetching
     refetchOnReconnect: false,