Add Sandbox to Account page

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

@@ -27,6 +27,7 @@ import {
   SANDBOX_CURRENT_EPOCH_REWARDS,
   SANDBOX_NS_API_MIXNODES_STATS,
   SANDBOX_NS_API_NODES,
+  SANDBOX_NYM_ACCOUNT_ADDRESS,
 } from "./urls";
 
 // Fetch function for epoch rewards
@@ -208,9 +209,18 @@ export const fetchNoise = async (
 
 // Fetch Account Balance
 export const fetchAccountBalance = async (
-  address: string
+  address: string,
+  environment: Environment
 ): Promise<IAccountBalancesInfo> => {
-  const res = await fetch(`${NYM_ACCOUNT_ADDRESS}/${address}`, {
+  const baseUrl =
+    environment === "sandbox"
+      ? SANDBOX_NYM_ACCOUNT_ADDRESS
+      : NYM_ACCOUNT_ADDRESS;
+
+  if (!baseUrl) {
+    throw new Error("NYM_ACCOUNT_ADDRESS URL is not defined");
+  }
+  const res = await fetch(`${baseUrl}/${address}`, {
     headers: {
       Accept: "application/json",
       "Content-Type": "application/json; charset=utf-8",

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

@@ -5,6 +5,7 @@ import { useQuery } from "@tanstack/react-query";
 import type { IRewardDetails } from "../../app/api/types";
 import ExplorerCard from "../cards/ExplorerCard";
 import { AccountBalancesTable } from "./AccountBalancesTable";
+import { useEnvironment } from "@/providers/EnvironmentProvider";
 
 export interface IAccontStatsRowProps {
   type: string;
@@ -63,14 +64,15 @@ export const AccountBalancesCard = (props: IAccountBalancesCardProps) => {
   const { address } = props;
   const theme = useTheme();
   const isDarkMode = theme.palette.mode === "dark";
+  const { environment } = useEnvironment();
 
   const {
     data: accountInfo,
     isLoading,
     isError,
   } = useQuery({
-    queryKey: ["accountBalance", address],
-    queryFn: () => fetchAccountBalance(address),
+    queryKey: ["accountBalance", address, environment],
+    queryFn: () => fetchAccountBalance(address, environment),
     enabled: !!address,
     staleTime: 10 * 60 * 1000, // 10 minutes
     refetchOnWindowFocus: false, // Prevents unnecessary refetching

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

@@ -6,6 +6,7 @@ import ExplorerCard from "../cards/ExplorerCard";
 import CopyToClipboard from "../copyToClipboard/CopyToClipboard";
 import ExplorerListItem from "../list/ListItem";
 import { CardQRCode } from "../qrCode/QrCode";
+import { useEnvironment } from "@/providers/EnvironmentProvider";
 
 interface IAccountInfoCardProps {
   address: string;
@@ -15,10 +16,11 @@ export const AccountInfoCard = (props: IAccountInfoCardProps) => {
   const { address } = props;
   const theme = useTheme();
   const isDarkMode = theme.palette.mode === "dark";
+  const { environment } = useEnvironment();
 
   const { data, isLoading, isError } = useQuery({
-    queryKey: ["accountBalance", address],
-    queryFn: () => fetchAccountBalance(address),
+    queryKey: ["accountBalance", address, environment],
+    queryFn: () => fetchAccountBalance(address, environment),
     enabled: !!address,
     staleTime: 10 * 60 * 1000, // 10 minutes
     refetchOnWindowFocus: false, // Prevents unnecessary refetching