From 0db8f1f83938c729c97f0d0fb52687caa2a265f3 Mon Sep 17 00:00:00 2001 From: Yana Date: Tue, 17 Jun 2025 19:12:44 +0300 Subject: [PATCH] Add Sandbox to landing page --- explorer-v2/src/app/api/index.tsx | 38 ++++++++++++++----- .../AccountPageButtonGroup.tsx | 7 +++- .../NetworkStakeCard.tsx | 10 +++-- .../landingPageComponents/NoiseCard.tsx | 10 +++-- .../StakersNumberCard.tsx | 7 +++- .../nymNodePageComponents/BasicInfoCard.tsx | 7 ++-- .../nymNodePageComponents/NodeDataCard.tsx | 6 ++- .../NodeDelegationsCard.tsx | 6 ++- .../NodePageButtonGroup.tsx | 7 ++-- .../NodeParametersCard.tsx | 6 ++- .../nymNodePageComponents/NodeProfileCard.tsx | 6 ++- .../nymNodePageComponents/NodeRoleCard.tsx | 8 ++-- .../search/NodeAndAddressSearch.tsx | 7 ++-- .../staking/StakeTableWithAction.tsx | 7 ++-- .../src/components/worldMap/WorldMap.tsx | 7 ++-- explorer-v2/src/providers/EpochProvider.tsx | 11 +++--- 16 files changed, 96 insertions(+), 54 deletions(-) diff --git a/explorer-v2/src/app/api/index.tsx b/explorer-v2/src/app/api/index.tsx index b8d49569da..1fa19012e3 100644 --- a/explorer-v2/src/app/api/index.tsx +++ b/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 => { return Number(balances.delegated.amount); }; -export const fetchNoise = async (): Promise => { - 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 => { + 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 = {}; @@ -308,6 +325,7 @@ export const fetchWorldMapCountries = async (): Promise<{ totalCountries: Object.keys(countryCounts).length, uniqueLocations: uniqueCities.size, totalServers: nodes.length, + environment, }; }; diff --git a/explorer-v2/src/components/accountPageComponents/AccountPageButtonGroup.tsx b/explorer-v2/src/components/accountPageComponents/AccountPageButtonGroup.tsx index 83a3bfa484..e469276c51 100644 --- a/explorer-v2/src/components/accountPageComponents/AccountPageButtonGroup.tsx +++ b/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, diff --git a/explorer-v2/src/components/landingPageComponents/NetworkStakeCard.tsx b/explorer-v2/src/components/landingPageComponents/NetworkStakeCard.tsx index 770cc4ae52..cdba7e3490 100644 --- a/explorer-v2/src/components/landingPageComponents/NetworkStakeCard.tsx +++ b/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", diff --git a/explorer-v2/src/components/landingPageComponents/NoiseCard.tsx b/explorer-v2/src/components/landingPageComponents/NoiseCard.tsx index 51d218c263..cdd3e0196a 100644 --- a/explorer-v2/src/components/landingPageComponents/NoiseCard.tsx +++ b/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); diff --git a/explorer-v2/src/components/landingPageComponents/StakersNumberCard.tsx b/explorer-v2/src/components/landingPageComponents/StakersNumberCard.tsx index 2cbb2aba70..14ae9432de 100644 --- a/explorer-v2/src/components/landingPageComponents/StakersNumberCard.tsx +++ b/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, diff --git a/explorer-v2/src/components/nymNodePageComponents/BasicInfoCard.tsx b/explorer-v2/src/components/nymNodePageComponents/BasicInfoCard.tsx index 0fd1c60c13..efd3dfffe8 100644 --- a/explorer-v2/src/components/nymNodePageComponents/BasicInfoCard.tsx +++ b/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; diff --git a/explorer-v2/src/components/nymNodePageComponents/NodeDataCard.tsx b/explorer-v2/src/components/nymNodePageComponents/NodeDataCard.tsx index 367aeb0b82..a5c8361fae 100644 --- a/explorer-v2/src/components/nymNodePageComponents/NodeDataCard.tsx +++ b/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, diff --git a/explorer-v2/src/components/nymNodePageComponents/NodeDelegationsCard.tsx b/explorer-v2/src/components/nymNodePageComponents/NodeDelegationsCard.tsx index 4062039ff2..cf94644c03 100644 --- a/explorer-v2/src/components/nymNodePageComponents/NodeDelegationsCard.tsx +++ b/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, diff --git a/explorer-v2/src/components/nymNodePageComponents/NodePageButtonGroup.tsx b/explorer-v2/src/components/nymNodePageComponents/NodePageButtonGroup.tsx index 9ec9f4251d..5ebb3e2047 100644 --- a/explorer-v2/src/components/nymNodePageComponents/NodePageButtonGroup.tsx +++ b/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) diff --git a/explorer-v2/src/components/nymNodePageComponents/NodeParametersCard.tsx b/explorer-v2/src/components/nymNodePageComponents/NodeParametersCard.tsx index 69e0ed901e..e0fa00db27 100644 --- a/explorer-v2/src/components/nymNodePageComponents/NodeParametersCard.tsx +++ b/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, diff --git a/explorer-v2/src/components/nymNodePageComponents/NodeProfileCard.tsx b/explorer-v2/src/components/nymNodePageComponents/NodeProfileCard.tsx index 21c89ba5e8..ff7d9bab94 100644 --- a/explorer-v2/src/components/nymNodePageComponents/NodeProfileCard.tsx +++ b/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, diff --git a/explorer-v2/src/components/nymNodePageComponents/NodeRoleCard.tsx b/explorer-v2/src/components/nymNodePageComponents/NodeRoleCard.tsx index 6b94de7118..50a0abc7e2 100644 --- a/explorer-v2/src/components/nymNodePageComponents/NodeRoleCard.tsx +++ b/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) => ( diff --git a/explorer-v2/src/components/search/NodeAndAddressSearch.tsx b/explorer-v2/src/components/search/NodeAndAddressSearch.tsx index 53ce4e24a6..600565624b 100644 --- a/explorer-v2/src/components/search/NodeAndAddressSearch.tsx +++ b/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, diff --git a/explorer-v2/src/components/staking/StakeTableWithAction.tsx b/explorer-v2/src/components/staking/StakeTableWithAction.tsx index dcb11f4825..a89503b8d8 100644 --- a/explorer-v2/src/components/staking/StakeTableWithAction.tsx +++ b/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; 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, diff --git a/explorer-v2/src/components/worldMap/WorldMap.tsx b/explorer-v2/src/components/worldMap/WorldMap.tsx index 4e98b52a64..58fa71f908 100644 --- a/explorer-v2/src/components/worldMap/WorldMap.tsx +++ b/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, diff --git a/explorer-v2/src/providers/EpochProvider.tsx b/explorer-v2/src/providers/EpochProvider.tsx index 1ca1d14c70..fb6b161c3a 100644 --- a/explorer-v2/src/providers/EpochProvider.tsx +++ b/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("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");