Add Sandbox to landing page

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

@@ -18,10 +18,13 @@ import {
   CURRENT_EPOCH,
   CURRENT_EPOCH_REWARDS,
   DATA_OBSERVATORY_BALANCES_URL,
+  NS_API_MIXNODES_STATS,
   NS_API_NODES,
   NYM_ACCOUNT_ADDRESS,
   NYM_PRICES_API,
   OBSERVATORY_GATEWAYS_URL,
+  SANDBOX_CURRENT_EPOCH,
+  SANDBOX_NS_API_MIXNODES_STATS,
   SANDBOX_NS_API_NODES,
 } from "./urls";
 
@@ -74,8 +77,14 @@ export const fetchNodeDelegations = async (
   return response.json();
 };
 
-export const fetchCurrentEpoch = async () => {
-  const response = await fetch(CURRENT_EPOCH, {
+export const fetchCurrentEpoch = async (environment: Environment) => {
+  const baseUrl =
+    environment === "sandbox" ? SANDBOX_CURRENT_EPOCH : CURRENT_EPOCH;
+
+  if (!baseUrl) {
+    throw new Error("NS_API_NODES URL is not defined");
+  }
+  const response = await fetch(baseUrl, {
     headers: {
       Accept: "application/json",
       "Content-Type": "application/json; charset=utf-8",
@@ -158,13 +167,19 @@ export const fetchOriginalStake = async (address: string): Promise<number> => {
   return Number(balances.delegated.amount);
 };
 
-export const fetchNoise = async (): Promise<IPacketsAndStakingData[]> => {
-  if (!process.env.NEXT_PUBLIC_NS_API_MIXNODES_STATS) {
-    throw new Error(
-      "NEXT_PUBLIC_NS_API_MIXNODES_STATS environment variable is not defined"
-    );
+export const fetchNoise = async (
+  environment: Environment
+): Promise<IPacketsAndStakingData[]> => {
+  const baseUrl =
+    environment === "sandbox"
+      ? SANDBOX_NS_API_MIXNODES_STATS
+      : NS_API_MIXNODES_STATS;
+
+  if (!baseUrl) {
+    throw new Error("NS_API_MIXNODES_STATS URL is not defined");
   }
-  const response = await fetch(process.env.NEXT_PUBLIC_NS_API_MIXNODES_STATS, {
+
+  const response = await fetch(baseUrl, {
     headers: {
       Accept: "application/json",
       "Content-Type": "application/json; charset=utf-8",
@@ -256,14 +271,16 @@ export const fetchNSApiNodes = async (
   return allNodes;
 };
 
-export const fetchWorldMapCountries = async (): Promise<{
+export const fetchWorldMapCountries = async (
+  environment: Environment
+): Promise<{
   countries: CountryDataResponse;
   totalCountries: number;
   uniqueLocations: number;
   totalServers: number;
 }> => {
   // Fetch all nodes from the NS API
-  const nodes = await fetchNSApiNodes();
+  const nodes = await fetchNSApiNodes(environment);
 
   // Create a map to count nodes by country
   const countryCounts: Record<string, number> = {};
@@ -308,6 +325,7 @@ export const fetchWorldMapCountries = async (): Promise<{
     totalCountries: Object.keys(countryCounts).length,
     uniqueLocations: uniqueCities.size,
     totalServers: nodes.length,
+    environment,
   };
 };
 

explorer-v2/src/components/accountPageComponents/AccountPageButtonGroup.tsx

@@ -3,6 +3,7 @@
 import { fetchNSApiNodes } from "@/app/api";
 import type { NS_NODE } from "@/app/api/types";
 import ExplorerButtonGroup from "@/components/toggleButton/ToggleButton";
+import { useEnvironment } from "@/providers/EnvironmentProvider";
 import { useQuery } from "@tanstack/react-query";
 
 type Props = {
@@ -10,9 +11,11 @@ type Props = {
 };
 
 export default function AccountPageButtonGroup({ address }: Props) {
+  const { environment } = useEnvironment();
+
   const { data: nsApiNodes = [], isError: isNSApiNodesError } = useQuery({
-    queryKey: ["nsApiNodes"],
-    queryFn: fetchNSApiNodes,
+    queryKey: ["nsApiNodes", environment],
+    queryFn: () => fetchNSApiNodes(environment),
     staleTime: 10 * 60 * 1000, // 10 minutes
     refetchOnWindowFocus: false, // Prevents unnecessary refetching
     refetchOnReconnect: false,

explorer-v2/src/components/landingPageComponents/NetworkStakeCard.tsx

@@ -6,8 +6,10 @@ import type { ExplorerData, IPacketsAndStakingData } from "../../app/api/types";
 import { formatBigNum } from "../../utils/formatBigNumbers";
 import ExplorerCard from "../cards/ExplorerCard";
 import { LineChart } from "../lineChart";
+import { useEnvironment } from "@/providers/EnvironmentProvider";
 
 export const NetworkStakeCard = () => {
+  const { environment } = useEnvironment();
   const theme = useTheme();
   const isDarkMode = theme.palette.mode === "dark";
   const {
@@ -15,8 +17,8 @@ export const NetworkStakeCard = () => {
     isLoading: isStakingLoading,
     isError: isStakingError,
   } = useQuery({
-    queryKey: ["noise"],
-    queryFn: fetchNoise,
+    queryKey: ["noise", environment],
+    queryFn: () => fetchNoise(environment),
     staleTime: 10 * 60 * 1000, // 10 minutes
     refetchOnWindowFocus: false, // Prevents unnecessary refetching
     refetchOnReconnect: false,
@@ -67,8 +69,8 @@ export const NetworkStakeCard = () => {
     .map((item: IPacketsAndStakingData) => ({
       date_utc: item.date_utc,
       numericData: item.total_stake / 1000000,
-    }))
-    .filter((item) => item.numericData >= 50_000_000);
+    }));
+  // .filter((item) => item.numericData >= 50_000_000);
 
   const stakeLineGraphData = {
     color: "#00CA33",

explorer-v2/src/components/landingPageComponents/NoiseCard.tsx

@@ -16,15 +16,17 @@ import { formatBigNum } from "../../utils/formatBigNumbers";
 import ExplorerCard from "../cards/ExplorerCard";
 import { LineChart } from "../lineChart";
 import { UpDownPriceIndicator } from "../price/UpDownPriceIndicator";
+import { useEnvironment } from "@/providers/EnvironmentProvider";
 
 export const NoiseCard = () => {
+  const { environment } = useEnvironment();
   const theme = useTheme();
   const isDarkMode = theme.palette.mode === "dark";
   const [tooltipOpen, setTooltipOpen] = useState(false);
 
   const { data, isLoading, isError } = useQuery({
-    queryKey: ["noise"],
-    queryFn: fetchNoise,
+    queryKey: ["noise", environment],
+    queryFn: () => fetchNoise(environment),
     staleTime: 10 * 60 * 1000, // 10 minutes
     refetchOnWindowFocus: false, // Prevents unnecessary refetching
     refetchOnReconnect: false,
@@ -110,8 +112,8 @@ export const NoiseCard = () => {
         date_utc: item.date_utc,
         numericData: item.total_packets_sent + item.total_packets_received,
       };
-    })
-    .filter((item) => item.numericData >= 2_500_000_000);
+    });
+  // .filter((item) => item.numericData >= 2_500_000_000);
 
   const handleTooltipOpen = () => {
     setTooltipOpen(true);

explorer-v2/src/components/landingPageComponents/StakersNumberCard.tsx

@@ -4,15 +4,18 @@ import type { NS_NODE } from "@/app/api/types";
 import { Skeleton, Typography, useTheme } from "@mui/material";
 import { useQuery } from "@tanstack/react-query";
 import ExplorerCard from "../cards/ExplorerCard";
+import { useEnvironment } from "@/providers/EnvironmentProvider";
 
 export const StakersNumberCard = () => {
+  const { environment } = useEnvironment();
+
   const {
     data: nsApiNodes = [],
     isLoading: isNSApiNodesLoading,
     isError: isNSApiNodesError,
   } = useQuery({
-    queryKey: ["nsApiNodes"],
-    queryFn: fetchNSApiNodes,
+    queryKey: ["nsApiNodes", environment],
+    queryFn: () => fetchNSApiNodes(environment),
     staleTime: 10 * 60 * 1000, // 10 minutes
     refetchOnWindowFocus: false, // Prevents unnecessary refetching
     refetchOnReconnect: false,

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

@@ -8,6 +8,7 @@ import { formatBigNum } from "../../utils/formatBigNumbers";
 import ExplorerCard from "../cards/ExplorerCard";
 import CopyToClipboard from "../copyToClipboard/CopyToClipboard";
 import ExplorerListItem from "../list/ListItem";
+import { useEnvironment } from "@/providers/EnvironmentProvider";
 
 type Props = {
   paramId: string;
@@ -15,14 +16,15 @@ type Props = {
 
 export const BasicInfoCard = ({ paramId }: Props) => {
   let nodeInfo: NS_NODE | undefined;
+  const { environment } = useEnvironment();
 
   const {
     data: nsApiNodes = [],
     isLoading: isNSApiNodesLoading,
     isError: isNSApiNodesError,
   } = useQuery({
-    queryKey: ["nsApiNodes"],
-    queryFn: fetchNSApiNodes,
+    queryKey: ["nsApiNodes", environment],
+    queryFn: () => fetchNSApiNodes(environment),
     staleTime: 10 * 60 * 1000, // 10 minutes
     refetchOnWindowFocus: false, // Prevents unnecessary refetching
     refetchOnReconnect: false,
@@ -72,7 +74,6 @@ export const BasicInfoCard = ({ paramId }: Props) => {
 
   if (!nodeInfo) return null;
 
-
   const selfBond = nodeInfo.original_pledge
     ? formatBigNum(Number(nodeInfo.original_pledge) / 1_000_000)
     : 0;

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

@@ -7,6 +7,7 @@ import { format } from "date-fns";
 import { fetchEpochRewards, fetchNSApiNodes } from "../../app/api";
 import ExplorerCard from "../cards/ExplorerCard";
 import ExplorerListItem from "../list/ListItem";
+import { useEnvironment } from "@/providers/EnvironmentProvider";
 
 type Props = {
   paramId: string;
@@ -14,6 +15,7 @@ type Props = {
 
 export const NodeDataCard = ({ paramId }: Props) => {
   let nodeInfo: NS_NODE | undefined;
+  const { environment } = useEnvironment();
 
   const {
     data: epochRewardsData,
@@ -34,8 +36,8 @@ export const NodeDataCard = ({ paramId }: Props) => {
     isLoading: isNSApiNodesLoading,
     isError: isNSApiNodesError,
   } = useQuery({
-    queryKey: ["nsApiNodes"],
-    queryFn: fetchNSApiNodes,
+    queryKey: ["nsApiNodes", environment],
+    queryFn: () => fetchNSApiNodes(environment),
     staleTime: 10 * 60 * 1000, // 10 minutes
     refetchOnWindowFocus: false, // Prevents unnecessary refetching
     refetchOnReconnect: false,

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

@@ -6,6 +6,7 @@ import { Skeleton, Typography, useTheme } from "@mui/material";
 import { useQuery } from "@tanstack/react-query";
 import ExplorerCard from "../cards/ExplorerCard";
 import DelegationsTable from "./DelegationsTable";
+import { useEnvironment } from "@/providers/EnvironmentProvider";
 
 type Props = {
   paramId: string;
@@ -15,14 +16,15 @@ const NodeDelegationsCard = ({ paramId }: Props) => {
   const theme = useTheme();
   const isDarkMode = theme.palette.mode === "dark";
   let nodeInfo: NS_NODE | undefined;
+  const { environment } = useEnvironment();
 
   const {
     data: nsApiNodes = [],
     isLoading: isNSApiNodesLoading,
     isError: isNSApiNodesError,
   } = useQuery({
-    queryKey: ["nsApiNodes"],
-    queryFn: fetchNSApiNodes,
+    queryKey: ["nsApiNodes", environment],
+    queryFn: () => fetchNSApiNodes(environment),
     staleTime: 10 * 60 * 1000, // 10 minutes
     refetchOnWindowFocus: false, // Prevents unnecessary refetching
     refetchOnReconnect: false,

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

@@ -3,6 +3,7 @@
 import { fetchNSApiNodes } from "@/app/api";
 import type { NS_NODE } from "@/app/api/types";
 import ExplorerButtonGroup from "@/components/toggleButton/ToggleButton";
+import { useEnvironment } from "@/providers/EnvironmentProvider";
 import { useQuery } from "@tanstack/react-query";
 
 type Props = {
@@ -11,10 +12,11 @@ type Props = {
 
 export default function NodePageButtonGroup({ paramId }: Props) {
   let nodeInfo: NS_NODE | undefined;
+  const { environment } = useEnvironment();
 
   const { data: nsApiNodes = [], isError: isNSApiNodesError } = useQuery({
-    queryKey: ["nsApiNodes"],
-    queryFn: fetchNSApiNodes,
+    queryKey: ["nsApiNodes", environment],
+    queryFn: () => fetchNSApiNodes(environment),
     staleTime: 10 * 60 * 1000, // 10 minutes
     refetchOnWindowFocus: false, // Prevents unnecessary refetching
     refetchOnReconnect: false,
@@ -35,7 +37,6 @@ export default function NodePageButtonGroup({ paramId }: Props) {
     );
   }
 
-
   if (!nodeInfo) return null;
 
   if (nodeInfo.bonding_address)

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

@@ -7,6 +7,7 @@ import { fetchEpochRewards, fetchNSApiNodes } from "../../app/api";
 import type { NS_NODE } from "../../app/api/types";
 import ExplorerCard from "../cards/ExplorerCard";
 import ExplorerListItem from "../list/ListItem";
+import { useEnvironment } from "@/providers/EnvironmentProvider";
 
 type Props = {
   paramId: string;
@@ -16,6 +17,7 @@ export const NodeParametersCard = ({ paramId }: Props) => {
   const theme = useTheme();
   const isDarkMode = theme.palette.mode === "dark";
   let nodeInfo: NS_NODE | undefined;
+  const { environment } = useEnvironment();
 
   // Fetch epoch rewards
   const {
@@ -37,8 +39,8 @@ export const NodeParametersCard = ({ paramId }: Props) => {
     isLoading: isNSApiNodesLoading,
     isError: isNSApiNodesError,
   } = useQuery({
-    queryKey: ["nsApiNodes"],
-    queryFn: fetchNSApiNodes,
+    queryKey: ["nsApiNodes", environment],
+    queryFn: () => fetchNSApiNodes(environment),
     staleTime: 10 * 60 * 1000, // 10 minutes
     refetchOnWindowFocus: false, // Prevents unnecessary refetching
     refetchOnReconnect: false,

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

@@ -25,6 +25,7 @@ import InfoModal, { type InfoModalProps } from "../modal/InfoModal";
 import StakeModal from "../staking/StakeModal";
 import { fee } from "../staking/schemas";
 import ConnectWallet from "../wallet/ConnectWallet";
+import { useEnvironment } from "@/providers/EnvironmentProvider";
 
 type Props = {
   paramId: string;
@@ -44,6 +45,7 @@ export const NodeProfileCard = ({ paramId }: Props) => {
     nodeId: number;
     identityKey: string;
   }>();
+  const { environment } = useEnvironment();
 
   // Fetch node info
   const {
@@ -51,8 +53,8 @@ export const NodeProfileCard = ({ paramId }: Props) => {
     isLoading: isNSApiNodesLoading,
     isError: isNSApiNodesError,
   } = useQuery({
-    queryKey: ["nsApiNodes"],
-    queryFn: fetchNSApiNodes,
+    queryKey: ["nsApiNodes", environment],
+    queryFn: () => fetchNSApiNodes(environment),
     staleTime: 10 * 60 * 1000, // 10 minutes
     refetchOnWindowFocus: false, // Prevents unnecessary refetching
     refetchOnReconnect: false,

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

@@ -15,7 +15,7 @@ import type {
 import ExplorerCard from "../cards/ExplorerCard";
 import ExplorerListItem from "../list/ListItem";
 import StarRating from "../starRating/StarRating";
-
+import { useEnvironment } from "@/providers/EnvironmentProvider";
 type Props = {
   paramId: string;
 };
@@ -151,14 +151,15 @@ export const NodeRoleCard = ({ paramId }: Props) => {
   let nodeInfo: NS_NODE | undefined;
   const theme = useTheme();
   const isDarkMode = theme.palette.mode === "dark";
+  const { environment } = useEnvironment();
   // Fetch node info
   const {
     data: nsApiNodes = [],
     isLoading: isNSApiNodesLoading,
     isError: isNSApiNodesError,
   } = useQuery({
-    queryKey: ["nsApiNodes"],
-    queryFn: fetchNSApiNodes,
+    queryKey: ["nsApiNodes", environment],
+    queryFn: () => fetchNSApiNodes(environment),
     staleTime: 10 * 60 * 1000, // 10 minutes
     refetchOnWindowFocus: false, // Prevents unnecessary refetching
     refetchOnReconnect: false,
@@ -226,7 +227,6 @@ export const NodeRoleCard = ({ paramId }: Props) => {
   }
   if (!nodeInfo) return null;
 
-
   const NodeRoles = nodeRoles.map((role) => (
     <Stack key={role} direction="row" gap={1}>
       <Chip key={role} label={role} size="small" />

explorer-v2/src/components/search/NodeAndAddressSearch.tsx

@@ -14,9 +14,10 @@ import { useQuery } from "@tanstack/react-query";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { fetchNSApiNodes } from "../../app/api";
-
+import { useEnvironment } from "@/providers/EnvironmentProvider";
 const NodeAndAddressSearch = () => {
   const router = useRouter();
+  const { environment } = useEnvironment();
   const [inputValue, setInputValue] = useState("");
   const [errorText, setErrorText] = useState("");
   const [isLoading, setIsLoading] = useState(false);
@@ -25,8 +26,8 @@ const NodeAndAddressSearch = () => {
   // Use React Query to fetch nodes
 
   const { data: nsApiNodes = [], isLoading: isNSApiNodesLoading } = useQuery({
-    queryKey: ["nsApiNodes"],
-    queryFn: fetchNSApiNodes,
+    queryKey: ["nsApiNodes", environment],
+    queryFn: () => fetchNSApiNodes(environment),
     staleTime: 10 * 60 * 1000, // 10 minutes
     refetchOnWindowFocus: false, // Prevents unnecessary refetching
     refetchOnReconnect: false,

explorer-v2/src/components/staking/StakeTableWithAction.tsx

@@ -7,7 +7,7 @@ import { fetchEpochRewards, fetchNSApiNodes } from "../../app/api";
 import type { ExplorerData, NS_NODE } from "../../app/api/types";
 import { countryName } from "../../utils/countryName";
 import StakeTable from "./StakeTable";
-
+import { useEnvironment } from "@/providers/EnvironmentProvider";
 // Utility function to calculate node saturation point
 function getNodeSaturationPoint(
   totalStake: number,
@@ -67,6 +67,7 @@ export type MappedNymNodes = ReturnType<typeof mappedNSApiNodes>;
 export type MappedNymNode = MappedNymNodes[0];
 
 const StakeTableWithAction = () => {
+  const { environment } = useEnvironment();
   // Use React Query to fetch epoch rewards
   const {
     data: epochRewardsData,
@@ -87,8 +88,8 @@ const StakeTableWithAction = () => {
     isLoading: isNSApiNodesLoading,
     isError: isNSApiNodesError,
   } = useQuery({
-    queryKey: ["nsApiNodes"],
-    queryFn: fetchNSApiNodes,
+    queryKey: ["nsApiNodes", environment],
+    queryFn: () => fetchNSApiNodes(environment),
     staleTime: 10 * 60 * 1000, // 10 minutes
     refetchOnWindowFocus: false, // Prevents unnecessary refetching
     refetchOnReconnect: false,

explorer-v2/src/components/worldMap/WorldMap.tsx

@@ -20,11 +20,12 @@ import { useQuery } from "@tanstack/react-query";
 import type { CountryDataResponse } from "../../app/api/types";
 import MAP_TOPOJSON from "../../assets/world-110m.json";
 import ExplorerCard from "../cards/ExplorerCard";
-
+import { useEnvironment } from "@/providers/EnvironmentProvider";
 const mapPlaceholderDark = "/explorer/map-placeholder-dark.png";
 const mapPlaceholderLight = "/explorer/map-placeholder-light.png";
 
 export const WorldMap = (): JSX.Element => {
+  const { environment } = useEnvironment();
   const theme = useTheme();
   const isDarkMode = theme.palette.mode === "dark";
   const [position, setPosition] = React.useState<{
@@ -47,8 +48,8 @@ export const WorldMap = (): JSX.Element => {
     isLoading: isLoadingCountries,
     isError: isCountriesError,
   } = useQuery({
-    queryKey: ["nymNodesCountries"],
-    queryFn: fetchWorldMapCountries,
+    queryKey: ["nymNodesCountries", environment],
+    queryFn: () => fetchWorldMapCountries(environment),
     staleTime: 60 * 60 * 1000, // 1 hour
     refetchOnWindowFocus: false,
     refetchOnReconnect: false,

explorer-v2/src/providers/EpochProvider.tsx

@@ -4,7 +4,7 @@ import { fetchCurrentEpoch } from "@/app/api";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { differenceInMilliseconds } from "date-fns";
 import { createContext, useContext, useEffect, useState } from "react";
-
+import { useEnvironment } from "./EnvironmentProvider";
 type EpochStatus = "active" | "pending";
 
 export type EpochResponseData =
@@ -45,14 +45,15 @@ const useEpochContext = () => {
 };
 
 const EpochProvider = ({ children }: { children: React.ReactNode }) => {
+  const { environment } = useEnvironment();
   const [epochStatus, setEpochStatus] = useState<EpochStatus>("pending");
 
   const QueryClient = useQueryClient();
 
   const { data, isError, isLoading } = useQuery({
     refetchOnWindowFocus: true,
-    queryKey: ["currentEpoch"],
-    queryFn: fetchCurrentEpoch,
+    queryKey: ["currentEpoch", environment],
+    queryFn: () => fetchCurrentEpoch(environment),
     refetchInterval: ({ state }) => {
       // refetchInterval can be set dynamically based on the current state
 
@@ -62,7 +63,7 @@ const EpochProvider = ({ children }: { children: React.ReactNode }) => {
       }
 
       const isEpochTimeValid = checkIsEpochTimeValid(
-        state.data.current_epoch_end.toString(),
+        state.data.current_epoch_end.toString()
       );
 
       // if epoch time is not valid (i.e current_time > epoch_start_time) refetch in 30 secs
@@ -73,7 +74,7 @@ const EpochProvider = ({ children }: { children: React.ReactNode }) => {
 
       // if epoch time is valid, refetch based on the epoch end time
       const newRefetchInterval = calculateRefetchInterval(
-        state.data.current_epoch_end.toString(),
+        state.data.current_epoch_end.toString()
       );
 
       setEpochStatus("active");