fix: replace any type with proper Grid2 size type

explorer-v2/package.json

@@ -35,6 +35,7 @@
     "@uidotdev/usehooks": "^2.4.1",
     "chain-registry": "^1.69.64",
     "cldr-compact-number": "^0.4.0",
+    "d3-scale": "^4.0.2",
     "date-fns": "^4.1.0",
     "i18next": "^24.2.2",
     "i18next-resources-to-backend": "^1.2.1",
@@ -49,6 +50,8 @@
     "react-i18next": "^15.4.0",
     "react-markdown": "^9.0.3",
     "react-random-avatars": "^1.3.1",
+    "react-simple-maps": "^3.0.0",
+    "react-tooltip": "^5.28.1",
     "react-world-flags": "^1.6.0",
     "zod": "^3.24.1"
   },
@@ -57,6 +60,7 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/react-simple-maps": "^3.0.6",
     "eslint": "^8",
     "eslint-config-next": "15.0.3",
     "lefthook": "^1.8.5",

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

@@ -1,12 +1,14 @@
+import { countryCodeMap } from "@/assets/countryCodes";
 import { addSeconds } from "date-fns";
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type {
+  CountryDataResponse,
   CurrentEpochData,
   ExplorerData,
   GatewayStatus,
   IAccountBalancesInfo,
-  IObservatoryNode,
   IPacketsAndStakingData,
+  NS_NODE,
   NodeRewardDetails,
   NymTokenomics,
   ObservatoryBalance,
@@ -15,7 +17,7 @@ import {
   CURRENT_EPOCH,
   CURRENT_EPOCH_REWARDS,
   DATA_OBSERVATORY_BALANCES_URL,
-  DATA_OBSERVATORY_NODES_URL,
+  NS_API_NODES,
   NYM_ACCOUNT_ADDRESS,
   NYM_PRICES_API,
   OBSERVATORY_GATEWAYS_URL,
@@ -56,15 +58,12 @@ export const fetchGatewayStatus = async (
 export const fetchNodeDelegations = async (
   id: number,
 ): Promise<NodeRewardDetails[]> => {
-  const response = await fetch(
-    `${DATA_OBSERVATORY_NODES_URL}/${id}/delegations`,
-    {
-      headers: {
-        Accept: "application/json",
-        "Content-Type": "application/json; charset=utf-8",
-      },
+  const response = await fetch(`${NS_API_NODES}/${id}/delegations`, {
+    headers: {
+      Accept: "application/json",
+      "Content-Type": "application/json; charset=utf-8",
     },
-  );
+  });
 
   if (!response.ok) {
     throw new Error("Failed to fetch delegations");
@@ -192,38 +191,6 @@ export const fetchAccountBalance = async (
   return data;
 };
 
-export const fetchObservatoryNodes = async (): Promise<IObservatoryNode[]> => {
-  const allNodes: IObservatoryNode[] = [];
-  let page = 1;
-  const PAGE_SIZE = 200;
-  let hasMoreData = true;
-
-  while (hasMoreData) {
-    const response = await fetch(
-      `${DATA_OBSERVATORY_NODES_URL}?page=${page}&limit=${PAGE_SIZE}`,
-      {
-        headers: {
-          Accept: "application/json",
-          "Content-Type": "application/json; charset=utf-8",
-        },
-      },
-    );
-
-    if (!response.ok) {
-      throw new Error(`Failed to fetch observatory nodes (page ${page})`);
-    }
-
-    const nodes: IObservatoryNode[] = await response.json();
-    allNodes.push(...nodes);
-
-    if (nodes.length < PAGE_SIZE) {
-      hasMoreData = false; // Stop fetching when the last page has fewer than 200 items
-    } else {
-      page++; // Move to the next page
-    }
-  }
-  return allNodes;
-};
 
 // 🔹 Fetch NYM Price
 export const fetchNymPrice = async (): Promise<NymTokenomics> => {
@@ -239,3 +206,104 @@ export const fetchNymPrice = async (): Promise<NymTokenomics> => {
   const data: NymTokenomics = await res.json();
   return data;
 };
+
+export const fetchNSApiNodes = async (): Promise<NS_NODE[]> => {
+  if (!NS_API_NODES) {
+    throw new Error("NS_API_NODES URL is not defined");
+  }
+
+  const allNodes: any[] = [];
+  let page = 0;
+  const PAGE_SIZE = 200;
+  let totalItems = 0;
+  let hasMoreData = true;
+
+  while (hasMoreData) {
+    const response = await fetch(
+      `${NS_API_NODES}?page=${page}&size=${PAGE_SIZE}`,
+      {
+        headers: {
+          Accept: "application/json",
+          "Content-Type": "application/json; charset=utf-8",
+        },
+      }
+    );
+
+    if (!response.ok) {
+      throw new Error(
+        `Failed to fetch NS API nodes (page ${page}): ${response.statusText}`,
+      );
+    }
+
+    const data = await response.json();
+    const nodes: any[] = data.items || [];
+    allNodes.push(...nodes);
+
+    // Get total count from response
+    totalItems = data.total || 0;
+
+    // Check if we've fetched all items
+    if (allNodes.length >= totalItems) {
+      hasMoreData = false;
+    } else {
+      page++; // Move to the next page
+    }
+  }
+
+  return allNodes;
+};
+
+export const fetchWorldMapCountries = async (): Promise<{
+  countries: CountryDataResponse;
+  totalCountries: number;
+  uniqueLocations: number;
+  totalServers: number;
+}> => {
+  // Fetch all nodes from the NS API
+  const nodes = await fetchNSApiNodes();
+
+  // Create a map to count nodes by country
+  const countryCounts: Record<string, number> = {};
+  // Set to track unique cities
+  const uniqueCities = new Set<string>();
+
+  // Process each node
+  for (const node of nodes) {
+    // Get the 2-letter country code from the node's geoip data
+    const twoLetterCode = node.geoip?.country;
+
+    if (twoLetterCode) {
+      // Convert to 3-letter country code
+      const threeLetterCode = countryCodeMap[twoLetterCode] || twoLetterCode;
+
+      // Increment the count for this country
+      countryCounts[threeLetterCode] =
+        (countryCounts[threeLetterCode] || 0) + 1;
+
+      // Add city to unique cities set if it exists
+      if (node.geoip?.city) {
+        uniqueCities.add(node.geoip.city);
+      }
+    } else {
+      // If no geoip data, count it as unknown
+      countryCounts[""] = (countryCounts[""] || 0) + 1;
+    }
+  }
+
+  // Convert the counts to the required format
+  const result: CountryDataResponse = {};
+
+  for (const [threeLetterCode, count] of Object.entries(countryCounts)) {
+    result[threeLetterCode] = {
+      ISO3: threeLetterCode,
+      nodes: count,
+    };
+  }
+
+  return {
+    countries: result,
+    totalCountries: Object.keys(countryCounts).length,
+    uniqueLocations: uniqueCities.size,
+    totalServers: nodes.length,
+  };
+};

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

@@ -72,56 +72,59 @@ export interface ExplorerData {
 }
 
 export type NodeDescription = {
-  last_polled: string;
+  authenticator: {
+    address: string;
+  };
+  auxiliary_details: {
+    accepted_operator_terms_and_conditions: boolean;
+    announce_ports: {
+      mix_port: number | null;
+      verloc_port: number | null;
+    };
+    location: string;
+  };
+  build_information: {
+    binary_name: string;
+    build_timestamp: string;
+    build_version: string;
+    cargo_profile: string;
+    cargo_triple: string;
+    commit_branch: string;
+    commit_sha: string;
+    commit_timestamp: string;
+    rustc_channel: string;
+    rustc_version: string;
+  };
+  declared_role: {
+    entry: boolean;
+    exit_ipr: boolean;
+    exit_nr: boolean;
+    mixnode: boolean;
+  };
   host_information: {
-    ip_address: string[];
     hostname: string;
+    ip_address: [string, string];
     keys: {
       ed25519: string;
       x25519: string;
       x25519_noise: string | null;
     };
   };
-  declared_role: {
-    mixnode: boolean;
-    entry: boolean;
-    exit_nr: boolean;
-    exit_ipr: boolean;
+  ip_packet_router: {
+    address: string;
   };
-  auxiliary_details: {
-    location: string;
-    announce_ports: {
-      verloc_port: number | null;
-      mix_port: number | null;
-    };
-    accepted_operator_terms_and_conditions: boolean;
-  };
-  build_information: {
-    binary_name: string;
-    build_timestamp: string;
-    build_version: string;
-    commit_sha: string;
-    commit_timestamp: string;
-    commit_branch: string;
-    rustc_version: string;
-    rustc_channel: string;
-    cargo_profile: string;
-    cargo_triple: string;
+  last_polled: string;
+  mixnet_websockets: {
+    ws_port: number;
+    wss_port: number;
   };
   network_requester: {
     address: string;
     uses_exit_policy: boolean;
   };
-  ip_packet_router: {
-    address: string;
-  };
-  authenticator: {
-    address: string;
-  };
-  wireguard: string | null;
-  mixnet_websockets: {
-    ws_port: number;
-    wss_port: number | null;
+  wireguard: {
+    port: number;
+    public_key: string;
   };
 } | null;
 
@@ -165,15 +168,6 @@ export type Location = {
   longitude?: number;
 };
 
-export type NodeData = {
-  node_id: number;
-  contract_node_type: string;
-  description: NodeDescription;
-  bond_information: BondInformation;
-  rewarding_details: RewardingDetails;
-  location: Location;
-};
-
 // ACCOUNT BALANCES
 
 export interface IRewardDetails {
@@ -207,111 +201,15 @@ export interface IAccountBalancesInfo {
   vesting_account?: null | string;
 }
 
-export interface IObservatoryNode {
-  accepted_tnc: boolean;
-  bonded: boolean;
-  bonding_address: string;
-  description: {
-    authenticator: {
-      address: string;
-    };
-    auxiliary_details: {
-      accepted_operator_terms_and_conditions: boolean;
-      announce_ports: {
-        mix_port: number | null;
-        verloc_port: number | null;
-      };
-      location: string | null;
-    };
-    build_information: {
-      binary_name: string;
-      build_timestamp: string;
-      build_version: string;
-      cargo_profile: string;
-      cargo_triple: string;
-      commit_branch: string;
-      commit_sha: string;
-      commit_timestamp: string;
-      rustc_channel: string;
-      rustc_version: string;
-    };
-    declared_role: {
-      entry: boolean;
-      exit_ipr: boolean;
-      exit_nr: boolean;
-      mixnode: boolean;
-    };
-    host_information: {
-      hostname: string | null;
-      ip_address: string[];
-    };
-    keys: {
-      ed25519: string;
-      x25519: string;
-      x25519_noise: string | null;
-    };
-    ip_packet_router: {
-      address: string;
-    };
-    last_polled: string;
-    mixnet_websockets: {
-      ws_port: number;
-      wss_port: number | null;
-    };
-    network_requester: {
-      address: string;
-      uses_exit_policy: boolean;
-    };
-    wireguard: string | null;
-    geoip: {
-      city: string;
-      country: string;
-      ip_address: string;
-      loc: string;
-      node_id: number;
-      org: string;
-      postal: string;
-      region: string;
-    };
-  };
-  identity_key: string;
-  ip_address: string;
-  node_id: number;
-  node_type: string;
-  original_pledge: number;
-  rewarding_details: {
-    cost_params: {
-      interval_operating_cost: {
-        amount: string;
-        denom: string;
-      };
-      profit_margin_percent: string;
-    };
-    delegates: string;
-    last_rewarded_epoch: number;
-    operator: string;
-    total_unit_reward: string;
-    unique_delegations: number;
-    unit_delegation: string;
-  };
-  self_description: {
-    details: string;
-    moniker: string;
-    security_contact: string;
-    website: string;
-  };
-  total_stake: number;
-  uptime: number;
-}
 export interface NodeRewardDetails {
   amount: {
     amount: string;
     denom: string;
   };
+  block_height: number;
   cumulative_reward_ratio: string;
-  height: number;
-  node_id: number;
   owner: string;
+  proxy: string;
 }
 
 export type LastProbeResult = {
@@ -480,3 +378,58 @@ export type NymTokenomics = {
   symbol: string;
   total_supply: number;
 };
+
+export type CountryData = {
+  ISO3: string;
+  nodes: number;
+};
+
+export interface CountryDataResponse {
+  [threeLetterCountryCode: string]: CountryData;
+}
+
+export type NS_NODE = {
+  accepted_tnc: boolean;
+  bonded: boolean;
+  bonding_address: string;
+  description: {
+    details: string;
+    moniker: string;
+    security_contact: string;
+    website: string;
+  };
+  geoip?: {
+    city: string;
+    country: string;
+    ip_address: string;
+    latitude: string;
+    longitude: string;
+    org: string;
+    postal: string;
+    region: string;
+    timezone: string;
+  };
+  identity_key: string;
+  ip_address: string;
+  node_id: number;
+  node_type: string;
+  original_pledge: number;
+  rewarding_details?: {
+    cost_params: {
+      interval_operating_cost: {
+        amount: string;
+        denom: string;
+      };
+      profit_margin_percent: string;
+    };
+    delegates: string;
+    last_rewarded_epoch: number;
+    operator: string;
+    total_unit_reward: string;
+    unique_delegations: number;
+    unit_delegation: string;
+  } | null;
+  self_description?: NodeDescription;
+  total_stake: string;
+  uptime: number;
+};

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

@@ -8,11 +8,6 @@ export const NYM_ACCOUNT_ADDRESS =
 export const NYM_PRICES_API = "https://api.nym.spectredao.net/api/v1/nym-price";
 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";
 export const OBSERVATORY_GATEWAYS_URL =

explorer-v2/src/app/constants.ts

@@ -1 +1,5 @@
 export const TABLET_WIDTH = "(min-width:700px)";
+
+export const RECOMMENDED_NODES = [
+  1362, 291, 1719, 1768, 1772, 1512, 896, 1415, 2114, 2010,
+];

explorer-v2/src/app/page.tsx

@@ -1,13 +1,14 @@
+import { WorldMap } from "@/components/worldMap/WorldMap";
 import { Stack } from "@mui/material";
 import Grid from "@mui/material/Grid2";
 import BlogArticlesCards from "../components/blogs/BlogArticleCards";
 import { ContentLayout } from "../components/contentLayout/ContentLayout";
 import SectionHeading from "../components/headings/SectionHeading";
-import { CurrentEpochCard } from "../components/landingPageComponents/CurrentEpochCard";
-import { NetworkStakeCard } from "../components/landingPageComponents/NetworkStakeCard";
-import { NoiseCard } from "../components/landingPageComponents/NoiseCard";
-import { StakersNumberCard } from "../components/landingPageComponents/StakersNumberCard";
-import { TokenomicsCard } from "../components/landingPageComponents/TokenomicsCard";
+import { CurrentEpochCardWrapper } from "../components/landingPageComponents/CurrentEpochCardWrapper";
+import { NetworkStakeCardWrapper } from "../components/landingPageComponents/NetworkStakeCardWrapper";
+import { NoiseCardWrapper } from "../components/landingPageComponents/NoiseCardWrapper";
+import { StakersNumberCardWrapper } from "../components/landingPageComponents/StakersNumberCardWrapper";
+import { TokenomicsCardWrapper } from "../components/landingPageComponents/TokenomicsCardWrapper";
 import NodeTable from "../components/nodeTable/NodeTableWithAction";
 import NodeAndAddressSearch from "../components/search/NodeAndAddressSearch";
 
@@ -16,38 +17,29 @@ export default async function Home() {
     <ContentLayout>
       <Stack gap={5}>
         <NodeAndAddressSearch />
+        <WorldMap />
       </Stack>
       <Grid container columnSpacing={5} rowSpacing={5}>
         <Grid size={12}>
-          <SectionHeading title="Noise Generating Network Overview" />
-        </Grid>
-        <Grid size={{ xs: 12, sm: 6, lg: 3 }}>
-          <NoiseCard />
+          <SectionHeading title="Network Overview" />
         </Grid>
+        <NoiseCardWrapper />
         <Grid
           container
           columnSpacing={5}
           rowSpacing={5}
           size={{ xs: 12, sm: 6, lg: 3 }}
         >
-          <Grid size={12}>
-            <StakersNumberCard />
-          </Grid>
-          <Grid size={12}>
-            <CurrentEpochCard />
-          </Grid>
+          <StakersNumberCardWrapper />
+          <CurrentEpochCardWrapper />
         </Grid>
 
-        <Grid size={{ xs: 12, sm: 6, lg: 3 }}>
-          <NetworkStakeCard />
-        </Grid>
-        <Grid size={{ xs: 12, sm: 6, lg: 3 }}>
-          <TokenomicsCard />
-        </Grid>
+        <NetworkStakeCardWrapper />
+        <TokenomicsCardWrapper />
       </Grid>
-      <Grid container>
+      <Grid container rowSpacing={5}>
         <Grid size={12}>
-          <SectionHeading title="Nym Nodes" />
+          <SectionHeading title="Nym Servers" />
         </Grid>
         <Grid size={12}>
           <NodeTable />

explorer-v2/src/assets/countryCodes.ts

@@ -0,0 +1,195 @@
+// Map of 2-letter country codes to 3-letter country codes
+export const countryCodeMap: Record<string, string> = {
+  AF: "AFG", // Afghanistan
+  AL: "ALB", // Albania
+  DZ: "DZA", // Algeria
+  AD: "AND", // Andorra
+  AO: "AGO", // Angola
+  AG: "ATG", // Antigua and Barbuda
+  AR: "ARG", // Argentina
+  AM: "ARM", // Armenia
+  AU: "AUS", // Australia
+  AT: "AUT", // Austria
+  AZ: "AZE", // Azerbaijan
+  BS: "BHS", // Bahamas
+  BH: "BHR", // Bahrain
+  BD: "BGD", // Bangladesh
+  BB: "BRB", // Barbados
+  BY: "BLR", // Belarus
+  BE: "BEL", // Belgium
+  BZ: "BLZ", // Belize
+  BJ: "BEN", // Benin
+  BT: "BTN", // Bhutan
+  BO: "BOL", // Bolivia
+  BA: "BIH", // Bosnia and Herzegovina
+  BW: "BWA", // Botswana
+  BR: "BRA", // Brazil
+  BN: "BRN", // Brunei
+  BG: "BGR", // Bulgaria
+  BF: "BFA", // Burkina Faso
+  BI: "BDI", // Burundi
+  KH: "KHM", // Cambodia
+  CM: "CMR", // Cameroon
+  CA: "CAN", // Canada
+  CV: "CPV", // Cape Verde
+  CF: "CAF", // Central African Republic
+  TD: "TCD", // Chad
+  CL: "CHL", // Chile
+  CN: "CHN", // China
+  CO: "COL", // Colombia
+  KM: "COM", // Comoros
+  CG: "COG", // Congo
+  CR: "CRI", // Costa Rica
+  HR: "HRV", // Croatia
+  CU: "CUB", // Cuba
+  CY: "CYP", // Cyprus
+  CZ: "CZE", // Czech Republic
+  DK: "DNK", // Denmark
+  DJ: "DJI", // Djibouti
+  DM: "DMA", // Dominica
+  DO: "DOM", // Dominican Republic
+  EC: "ECU", // Ecuador
+  EG: "EGY", // Egypt
+  SV: "SLV", // El Salvador
+  GQ: "GNQ", // Equatorial Guinea
+  ER: "ERI", // Eritrea
+  EE: "EST", // Estonia
+  ET: "ETH", // Ethiopia
+  FJ: "FJI", // Fiji
+  FI: "FIN", // Finland
+  FR: "FRA", // France
+  GA: "GAB", // Gabon
+  GM: "GMB", // Gambia
+  GE: "GEO", // Georgia
+  DE: "DEU", // Germany
+  GH: "GHA", // Ghana
+  GR: "GRC", // Greece
+  GD: "GRD", // Grenada
+  GT: "GTM", // Guatemala
+  GN: "GIN", // Guinea
+  GW: "GNB", // Guinea-Bissau
+  GY: "GUY", // Guyana
+  HT: "HTI", // Haiti
+  HN: "HND", // Honduras
+  HU: "HUN", // Hungary
+  IS: "ISL", // Iceland
+  IN: "IND", // India
+  ID: "IDN", // Indonesia
+  IR: "IRN", // Iran
+  IQ: "IRQ", // Iraq
+  IE: "IRL", // Ireland
+  IL: "ISR", // Israel
+  IT: "ITA", // Italy
+  JM: "JAM", // Jamaica
+  JP: "JPN", // Japan
+  JO: "JOR", // Jordan
+  KZ: "KAZ", // Kazakhstan
+  KE: "KEN", // Kenya
+  KI: "KIR", // Kiribati
+  KP: "PRK", // North Korea
+  KR: "KOR", // South Korea
+  KW: "KWT", // Kuwait
+  KG: "KGZ", // Kyrgyzstan
+  LA: "LAO", // Laos
+  LV: "LVA", // Latvia
+  LB: "LBN", // Lebanon
+  LS: "LSO", // Lesotho
+  LR: "LBR", // Liberia
+  LY: "LBY", // Libya
+  LI: "LIE", // Liechtenstein
+  LT: "LTU", // Lithuania
+  LU: "LUX", // Luxembourg
+  MG: "MDG", // Madagascar
+  MW: "MWI", // Malawi
+  MY: "MYS", // Malaysia
+  MV: "MDV", // Maldives
+  ML: "MLI", // Mali
+  MT: "MLT", // Malta
+  MH: "MHL", // Marshall Islands
+  MR: "MRT", // Mauritania
+  MU: "MUS", // Mauritius
+  MX: "MEX", // Mexico
+  FM: "FSM", // Micronesia
+  MD: "MDA", // Moldova
+  MC: "MCO", // Monaco
+  MN: "MNG", // Mongolia
+  ME: "MNE", // Montenegro
+  MA: "MAR", // Morocco
+  MZ: "MOZ", // Mozambique
+  MM: "MMR", // Myanmar
+  NA: "NAM", // Namibia
+  NR: "NRU", // Nauru
+  NP: "NPL", // Nepal
+  NL: "NLD", // Netherlands
+  NZ: "NZL", // New Zealand
+  NI: "NIC", // Nicaragua
+  NE: "NER", // Niger
+  NG: "NGA", // Nigeria
+  NO: "NOR", // Norway
+  OM: "OMN", // Oman
+  PK: "PAK", // Pakistan
+  PW: "PLW", // Palau
+  PA: "PAN", // Panama
+  PG: "PNG", // Papua New Guinea
+  PY: "PRY", // Paraguay
+  PE: "PER", // Peru
+  PH: "PHL", // Philippines
+  PL: "POL", // Poland
+  PT: "PRT", // Portugal
+  QA: "QAT", // Qatar
+  RO: "ROU", // Romania
+  RU: "RUS", // Russia
+  RW: "RWA", // Rwanda
+  KN: "KNA", // Saint Kitts and Nevis
+  LC: "LCA", // Saint Lucia
+  VC: "VCT", // Saint Vincent and the Grenadines
+  WS: "WSM", // Samoa
+  SM: "SMR", // San Marino
+  ST: "STP", // Sao Tome and Principe
+  SA: "SAU", // Saudi Arabia
+  SN: "SEN", // Senegal
+  RS: "SRB", // Serbia
+  SC: "SYC", // Seychelles
+  SL: "SLE", // Sierra Leone
+  SG: "SGP", // Singapore
+  SK: "SVK", // Slovakia
+  SI: "SVN", // Slovenia
+  SB: "SLB", // Solomon Islands
+  SO: "SOM", // Somalia
+  ZA: "ZAF", // South Africa
+  SS: "SSD", // South Sudan
+  ES: "ESP", // Spain
+  LK: "LKA", // Sri Lanka
+  SD: "SDN", // Sudan
+  SR: "SUR", // Suriname
+  SZ: "SWZ", // Swaziland
+  SE: "SWE", // Sweden
+  CH: "CHE", // Switzerland
+  SY: "SYR", // Syria
+  TW: "TWN", // Taiwan
+  TJ: "TJK", // Tajikistan
+  TZ: "TZA", // Tanzania
+  TH: "THA", // Thailand
+  TL: "TLS", // Timor-Leste
+  TG: "TGO", // Togo
+  TO: "TON", // Tonga
+  TT: "TTO", // Trinidad and Tobago
+  TN: "TUN", // Tunisia
+  TR: "TUR", // Turkey
+  TM: "TKM", // Turkmenistan
+  TV: "TUV", // Tuvalu
+  UG: "UGA", // Uganda
+  UA: "UKR", // Ukraine
+  AE: "ARE", // United Arab Emirates
+  GB: "GBR", // United Kingdom
+  US: "USA", // United States
+  UY: "URY", // Uruguay
+  UZ: "UZB", // Uzbekistan
+  VU: "VUT", // Vanuatu
+  VA: "VAT", // Vatican City
+  VE: "VEN", // Venezuela
+  VN: "VNM", // Vietnam
+  YE: "YEM", // Yemen
+  ZM: "ZMB", // Zambia
+  ZW: "ZWE", // Zimbabwe
+};

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

@@ -1,6 +1,6 @@
 "use client";
 import { fetchAccountBalance, fetchNymPrice } from "@/app/api";
-import { Skeleton, Stack, Typography } from "@mui/material";
+import { Skeleton, Stack, Typography, useTheme } from "@mui/material";
 import { useQuery } from "@tanstack/react-query";
 import type { IRewardDetails } from "../../app/api/types";
 import ExplorerCard from "../cards/ExplorerCard";
@@ -45,7 +45,7 @@ const getAllocation = (unyms: number, totalUnyms: number): number => {
 };
 
 const calculateStakingRewards = (
-  accumulatedRewards: IRewardDetails[],
+  accumulatedRewards: IRewardDetails[]
 ): number => {
   if (accumulatedRewards.length > 0) {
     const totalRewards = accumulatedRewards.reduce((total, rewardDetail) => {
@@ -61,6 +61,8 @@ const calculateStakingRewards = (
 
 export const AccountBalancesCard = (props: IAccountBalancesCardProps) => {
   const { address } = props;
+  const theme = useTheme();
+  const isDarkMode = theme.palette.mode === "dark";
 
   const {
     data: accountInfo,
@@ -101,7 +103,10 @@ export const AccountBalancesCard = (props: IAccountBalancesCardProps) => {
   if (isError || priceError || !accountInfo || !nymPrice) {
     return (
       <ExplorerCard label="Total value">
-        <Typography variant="h5" sx={{ color: "pine.600", letterSpacing: 0.7 }}>
+        <Typography
+          variant="h5"
+          sx={{ color: isDarkMode ? "base.white" : "pine.950" }}
+        >
           Failed to account data.
         </Typography>
         <Skeleton variant="text" height={238} />
@@ -113,7 +118,7 @@ export const AccountBalancesCard = (props: IAccountBalancesCardProps) => {
 
   const totalBalanceUSD = getPriceInUSD(
     Number(accountInfo.total_value.amount),
-    nymPriceData,
+    nymPriceData
   );
   const spendableNYM =
     accountInfo.balances.length > 0
@@ -127,46 +132,46 @@ export const AccountBalancesCard = (props: IAccountBalancesCardProps) => {
     accountInfo.balances.length > 0
       ? getAllocation(
           Number(accountInfo.balances[0].amount),
-          Number(accountInfo.total_value.amount),
+          Number(accountInfo.total_value.amount)
         )
       : 0;
 
   const delegationsNYM = getNymsFormated(
-    Number(accountInfo.total_delegations.amount),
+    Number(accountInfo.total_delegations.amount)
   );
   const delegationsUSD = getPriceInUSD(
     Number(accountInfo.total_delegations.amount),
-    nymPriceData,
+    nymPriceData
   );
   const delegationsAllocation = getAllocation(
     Number(accountInfo.total_delegations.amount),
-    Number(accountInfo.total_value.amount),
+    Number(accountInfo.total_value.amount)
   );
 
   const operatorRewardsAllocation = getAllocation(
     Number(accountInfo.operator_rewards?.amount || 0),
-    Number(accountInfo.total_value.amount),
+    Number(accountInfo.total_value.amount)
   );
 
   const operatorRewardsNYM = getNymsFormated(
-    Number(accountInfo.operator_rewards?.amount || 0),
+    Number(accountInfo.operator_rewards?.amount || 0)
   );
 
   const operatorRewardsUSD = getPriceInUSD(
     Number(accountInfo.operator_rewards?.amount || 0),
-    nymPriceData,
+    nymPriceData
   );
 
   const claimableNYM = getNymsFormated(
-    Number(accountInfo.claimable_rewards.amount),
+    Number(accountInfo.claimable_rewards.amount)
   );
   const claimableUSD = getPriceInUSD(
     Number(accountInfo.claimable_rewards.amount),
-    nymPriceData,
+    nymPriceData
   );
   const claimableAllocation = getAllocation(
     Number(accountInfo.claimable_rewards.amount),
-    Number(accountInfo.total_value.amount),
+    Number(accountInfo.total_value.amount)
   );
 
   const stakingRewards =

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

@@ -1,6 +1,6 @@
 "use client";
 import { fetchAccountBalance } from "@/app/api";
-import { Box, Skeleton, Stack, Typography } from "@mui/material";
+import { Box, Skeleton, Stack, Typography, useTheme } from "@mui/material";
 import { useQuery } from "@tanstack/react-query";
 import ExplorerCard from "../cards/ExplorerCard";
 import CopyToClipboard from "../copyToClipboard/CopyToClipboard";
@@ -13,6 +13,8 @@ interface IAccountInfoCardProps {
 
 export const AccountInfoCard = (props: IAccountInfoCardProps) => {
   const { address } = props;
+  const theme = useTheme();
+  const isDarkMode = theme.palette.mode === "dark";
 
   const { data, isLoading, isError } = useQuery({
     queryKey: ["accountBalance", address],
@@ -38,7 +40,10 @@ export const AccountInfoCard = (props: IAccountInfoCardProps) => {
   if (isError || !data) {
     return (
       <ExplorerCard label="Total NYM">
-        <Typography variant="h5" sx={{ color: "pine.600", letterSpacing: 0.7 }}>
+        <Typography
+          variant="h5"
+          sx={{ color: isDarkMode ? "base.white" : "pine.950" }}
+        >
           Failed to account data.
         </Typography>
         <Skeleton variant="text" height={238} />

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

@@ -1,6 +1,7 @@
 "use client";
 
-import { fetchObservatoryNodes } from "@/app/api";
+import { fetchNSApiNodes } from "@/app/api";
+import type { NS_NODE } from "@/app/api/types";
 import ExplorerButtonGroup from "@/components/toggleButton/ToggleButton";
 import { useQuery } from "@tanstack/react-query";
 
@@ -9,18 +10,20 @@ type Props = {
 };
 
 export default function AccountPageButtonGroup({ address }: Props) {
-  const { data: nymNodes, isError } = useQuery({
-    queryKey: ["nymNodes"],
-    queryFn: fetchObservatoryNodes,
+  const { data: nsApiNodes = [], isError: isNSApiNodesError } = useQuery({
+    queryKey: ["nsApiNodes"],
+    queryFn: fetchNSApiNodes,
     staleTime: 10 * 60 * 1000, // 10 minutes
     refetchOnWindowFocus: false, // Prevents unnecessary refetching
     refetchOnReconnect: false,
     refetchOnMount: false,
   });
 
-  if (!nymNodes || isError) return null;
+  if (!nsApiNodes || isNSApiNodesError) return null;
 
-  const nymNode = nymNodes.find((node) => node.bonding_address === address);
+  const nymNode = nsApiNodes.find(
+    (node: NS_NODE) => node.bonding_address === address
+  );
 
   if (!nymNode) return null;
 

explorer-v2/src/components/blogs/BlogArticleCards.tsx

@@ -26,7 +26,6 @@ const BlogArticlesCards = async ({
       const blogArticle = JSON.parse(fileContent);
       return {
         ...blogArticle,
-        link: `/onboarding/${filename.replace(".json", "")}`,
       };
     }),
   );

explorer-v2/src/components/blogs/types.ts

@@ -8,6 +8,7 @@ type BlogArticle = {
   image: string;
   iconLight: string;
   iconDark: string;
+  link: string;
   attributes: {
     blogAuthors: string[];
     date: Date;
@@ -23,8 +24,6 @@ type BlogArticle = {
   }[];
 };
 
-export type BlogArticleWithLink = BlogArticle & {
-  link: string;
-};
+export type BlogArticleWithLink = BlogArticle; 
 
 export default BlogArticle;

explorer-v2/src/components/cards/ExplorerHeroCard.tsx

@@ -68,7 +68,12 @@ const ExplorerHeroCard = ({
   const iconSrc = isDarkMode ? iconDarkSrc : iconLightSrc;
 
   return (
-    <Link href={link} sx={{ textDecoration: "none", height: "100%" }}>
+    <Link
+      href={link}
+      sx={{ textDecoration: "none", height: "100%" }}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
       <Card sx={dynamicCardStyles} elevation={0}>
         <CardHeader
           title={

explorer-v2/src/components/copyToClipboard/CopyToClipboard.tsx

@@ -5,6 +5,7 @@ import { useCopyToClipboard } from "@uidotdev/usehooks";
 import { useEffect } from "react";
 import CopyFile from "../icons/CopyFile";
 import CopyFileDark from "../icons/CopyFileDark";
+import CheckIcon from "@mui/icons-material/Check";
 
 const CLEAR_AFTER_MS = 10_000;
 
@@ -34,12 +35,8 @@ const CopyToClipboard = ({
 
   if (hasCopied) {
     return (
-      <Typography
-        sx={{ color: isDarkMode ? "base.white" : "pine.950" }}
-        variant="h6"
-        color="textSecondary"
-      >
-        Copied
+      <Typography sx={{ color: isDarkMode ? "base.white" : "pine.950" }}>
+        <CheckIcon fontSize="small" />
       </Typography>
     );
   }

explorer-v2/src/components/footer/index.tsx

@@ -15,7 +15,7 @@ export async function Footer() {
   const locale = "en";
   const footerData = await getFooter(locale);
   const legalContent1 =
-    "Nym Noise Generating Network Explorer, V 2.1.0 Public Beta release.";
+    "Nym Noise Generating Network Explorer, V 2.2.0 Public Beta release.";
   const legalContent2 = footerData?.attributes?.legalContent2 || false;
   const footerLinkBlocks = footerData?.attributes?.linkBlocks || [];
 

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

@@ -0,0 +1,23 @@
+"use client";
+import Grid from "@mui/material/Grid2";
+import { ReactNode } from "react";
+
+interface ConditionalCardWrapperProps {
+  children: ReactNode;
+  size?:
+    | number
+    | { xs?: number; sm?: number; md?: number; lg?: number; xl?: number };
+  visible?: boolean;
+}
+
+export const ConditionalCardWrapper = ({
+  children,
+  size,
+  visible = true,
+}: ConditionalCardWrapperProps) => {
+  if (!visible) {
+    return null;
+  }
+
+  return <Grid size={size}>{children}</Grid>;
+};

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

@@ -4,7 +4,7 @@ import {
   type EpochResponseData,
   useEpochContext,
 } from "@/providers/EpochProvider";
-import { Skeleton, Typography } from "@mui/material";
+import { Skeleton, Typography, useTheme } from "@mui/material";
 import { differenceInMinutes, format } from "date-fns";
 import { useCallback, useEffect, useState } from "react";
 import ExplorerCard from "../cards/ExplorerCard";
@@ -34,10 +34,13 @@ export const CurrentEpochCard = () => {
   const [endTime, setEndTime] = useState("");
   const [progress, setProgress] = useState(0);
 
+  const theme = useTheme();
+  const isDarkMode = theme.palette.mode === "dark";
+
   const updateState = useCallback((data: NonNullable<EpochResponseData>) => {
     const { startTime, endTime } = getStartEndTime(
       data.current_epoch_start,
-      data.current_epoch_end,
+      data.current_epoch_end
     );
     const progress = calulateProgress(data.current_epoch_end);
 
@@ -65,30 +68,28 @@ export const CurrentEpochCard = () => {
     );
   }
 
-  if (isError) {
+  if (isError || !data) {
     return (
       <ExplorerCard label="Current mixnet epoch">
-        <Typography variant="body3" fontWeight="light">
+        <Typography
+          variant="h5"
+          sx={{ color: isDarkMode ? "base.white" : "pine.950" }}
+        >
           Failed to load data
         </Typography>
       </ExplorerCard>
     );
   }
 
-  if (!data) {
-    return (
-      <ExplorerCard label="Current mixnet epoch">
-        <Typography variant="body3" fontWeight="light">
-          No data available
-        </Typography>
-      </ExplorerCard>
-    );
-  }
-
   if (epochStatus === "pending") {
     return (
       <ExplorerCard label="Current mixnet epoch">
-        <Typography variant="body3" fontWeight="light" height={80}>
+        <Typography
+          variant="body3"
+          fontWeight="light"
+          height={80}
+          sx={{ color: isDarkMode ? "base.white" : "pine.950" }}
+        >
           Waiting for next epoch to start...
         </Typography>
       </ExplorerCard>

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

@@ -0,0 +1,19 @@
+"use client";
+import { useEpochContext } from "@/providers/EpochProvider";
+import { CurrentEpochCard } from "./CurrentEpochCard";
+import { ConditionalCardWrapper } from "./ConditionalCardWrapper";
+
+export const CurrentEpochCardWrapper = () => {
+  const { data, isError, isLoading, epochStatus } = useEpochContext();
+
+  // Determine if the card should be visible
+  // Show the card if we have data and it's not in a pending state, or if we're still loading
+  const isVisible =
+    !isError && (data || isLoading) && epochStatus !== "pending";
+
+  return (
+    <ConditionalCardWrapper size={12} visible={isVisible}>
+      <CurrentEpochCard />
+    </ConditionalCardWrapper>
+  );
+};

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

@@ -33,21 +33,14 @@ export const NetworkStakeCard = () => {
     );
   }
 
-  if (isStakingError || !packetsAndStaking) {
-    return (
-      <ExplorerCard label="Current network stake">
-        <Typography
-          variant="h5"
-          sx={{
-            color: isDarkMode ? "base.white" : "pine.950",
-            letterSpacing: 0.7,
-          }}
-        >
-          Failed to load data
-        </Typography>
-        <Skeleton variant="text" height={238} />
-      </ExplorerCard>
-    );
+  // Don't display the card if there's an error or insufficient data
+  if (
+    isStakingError ||
+    !packetsAndStaking ||
+    !Array.isArray(packetsAndStaking) ||
+    packetsAndStaking.length < 10
+  ) {
+    return null;
   }
 
   const packetsAndStakingData: ExplorerData["packetsAndStakingData"] =

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

@@ -0,0 +1,25 @@
+"use client";
+import { fetchNoise } from "@/app/api";
+import { useQuery } from "@tanstack/react-query";
+import { NetworkStakeCard } from "./NetworkStakeCard";
+import { ConditionalCardWrapper } from "./ConditionalCardWrapper";
+
+export const NetworkStakeCardWrapper = () => {
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ["noise"],
+    queryFn: fetchNoise,
+    staleTime: 10 * 60 * 1000, // 10 minutes
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+  });
+
+  // Determine if the card should be visible
+  const isVisible =
+    !isLoading && !isError && data && Array.isArray(data) && data.length >= 10;
+
+  return (
+    <ConditionalCardWrapper size={{ xs: 12, sm: 6, lg: 3 }} visible={isVisible}>
+      <NetworkStakeCard />
+    </ConditionalCardWrapper>
+  );
+};

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

@@ -41,31 +41,21 @@ export const NoiseCard = () => {
     );
   }
 
-  if (isError || !data) {
-    return (
-      <ExplorerCard label="Mixnet traffic">
-        <Typography
-          variant="h5"
-          sx={{
-            color: isDarkMode ? "base.white" : "pine.950",
-            letterSpacing: 0.7,
-          }}
-        >
-          Failed to load data
-        </Typography>
-        <Skeleton variant="text" height={238} />
-      </ExplorerCard>
-    );
+  // Don't display the card if there's an error or insufficient data
+  if (isError || !data || !Array.isArray(data) || data.length < 10) {
+    return null;
   }
 
   const todaysData = data[data.length - 2];
   const yesterdaysData = data[data.length - 3];
 
   const noiseLast24H =
-    todaysData.total_packets_sent + todaysData.total_packets_received;
+    (todaysData?.total_packets_sent || 0) +
+    (todaysData?.total_packets_received || 0);
 
   const noisePrevious24H =
-    yesterdaysData.total_packets_sent + yesterdaysData.total_packets_received;
+    (yesterdaysData?.total_packets_sent || 0) +
+    (yesterdaysData?.total_packets_received || 0);
 
   const formatNoiseVolume = (packets: number): string => {
     if (packets < 0) {
@@ -107,8 +97,9 @@ export const NoiseCard = () => {
     .slice(0, -1)
     .map((item: IPacketsAndStakingData) => {
       return {
-        date_utc: item.date_utc,
-        numericData: item.total_packets_sent + item.total_packets_received,
+        date_utc: item?.date_utc,
+        numericData:
+          (item?.total_packets_sent || 0) + (item?.total_packets_received || 0),
       };
     })
     .filter((item) => item.numericData >= 2_500_000_000);

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

@@ -0,0 +1,25 @@
+"use client";
+import { fetchNoise } from "@/app/api";
+import { useQuery } from "@tanstack/react-query";
+import { NoiseCard } from "./NoiseCard";
+import { ConditionalCardWrapper } from "./ConditionalCardWrapper";
+
+export const NoiseCardWrapper = () => {
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ["noise"],
+    queryFn: fetchNoise,
+    staleTime: 10 * 60 * 1000, // 10 minutes
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+  });
+
+  // Determine if the card should be visible
+  const isVisible =
+    !isLoading && !isError && data && Array.isArray(data) && data.length >= 10;
+
+  return (
+    <ConditionalCardWrapper size={{ xs: 12, sm: 6, lg: 3 }} visible={isVisible}>
+      <NoiseCard />
+    </ConditionalCardWrapper>
+  );
+};

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

@@ -1,18 +1,18 @@
 "use client";
-import { fetchObservatoryNodes } from "@/app/api";
-import type { IObservatoryNode } from "@/app/api/types";
+import { fetchNSApiNodes } from "@/app/api";
+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";
 
 export const StakersNumberCard = () => {
   const {
-    data: nymNodes,
-    isLoading,
-    isError,
+    data: nsApiNodes = [],
+    isLoading: isNSApiNodesLoading,
+    isError: isNSApiNodesError,
   } = useQuery({
-    queryKey: ["nymNodes"],
-    queryFn: () => fetchObservatoryNodes(),
+    queryKey: ["nsApiNodes"],
+    queryFn: fetchNSApiNodes,
     staleTime: 10 * 60 * 1000, // 10 minutes
     refetchOnWindowFocus: false, // Prevents unnecessary refetching
     refetchOnReconnect: false,
@@ -22,7 +22,7 @@ export const StakersNumberCard = () => {
   const theme = useTheme();
   const isDarkMode = theme.palette.mode === "dark";
 
-  if (isLoading) {
+  if (isNSApiNodesLoading) {
     return (
       <ExplorerCard label="Number of delegations">
         <Skeleton variant="text" height={90} />
@@ -30,11 +30,11 @@ export const StakersNumberCard = () => {
     );
   }
 
-  if (isError || !nymNodes) {
+  if (isNSApiNodesError || !nsApiNodes) {
     return (
       <ExplorerCard label="Number of delegations">
         <Typography
-          variant="h3"
+          variant="h5"
           sx={{ color: isDarkMode ? "base.white" : "pine.950" }}
         >
           Failed to load node data.
@@ -43,13 +43,13 @@ export const StakersNumberCard = () => {
     );
   }
 
-  const getActiveStakersNumber = (nodes: IObservatoryNode[]): number => {
+  const getActiveStakersNumber = (nodes: NS_NODE[]): number => {
     return nodes.reduce(
-      (sum, node) => sum + node.rewarding_details.unique_delegations,
-      0,
+      (sum, node) => sum + (node.rewarding_details?.unique_delegations || 0),
+      0
     );
   };
-  const allStakers = getActiveStakersNumber(nymNodes);
+  const allStakers = getActiveStakersNumber(nsApiNodes);
 
   return (
     <ExplorerCard label="Number of delegations">

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

@@ -0,0 +1,26 @@
+"use client";
+import { fetchNSApiNodes } from "@/app/api";
+import { useQuery } from "@tanstack/react-query";
+import { StakersNumberCard } from "./StakersNumberCard";
+import { ConditionalCardWrapper } from "./ConditionalCardWrapper";
+
+export const StakersNumberCardWrapper = () => {
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ["nsApiNodes"],
+    queryFn: fetchNSApiNodes,
+    staleTime: 10 * 60 * 1000, // 10 minutes
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+    refetchOnMount: false,
+  });
+
+  // Determine if the card should be visible
+  const isVisible =
+    !isLoading && !isError && data && Array.isArray(data) && data.length > 0;
+
+  return (
+    <ConditionalCardWrapper size={12} visible={isVisible}>
+      <StakersNumberCard />
+    </ConditionalCardWrapper>
+  );
+};

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

@@ -1,7 +1,7 @@
 "use client";
 import { fetchEpochRewards, fetchNoise, fetchNymPrice } from "@/app/api";
 import { formatBigNum } from "@/utils/formatBigNumbers";
-import { Box, Skeleton, Stack, Typography } from "@mui/material";
+import { Box, Skeleton, Stack, Typography, useTheme } from "@mui/material";
 import { useQuery } from "@tanstack/react-query";
 import type { ExplorerData, NymTokenomics } from "../../app/api/types";
 import ExplorerCard from "../cards/ExplorerCard";
@@ -9,6 +9,8 @@ import ExplorerListItem from "../list/ListItem";
 import { TitlePrice } from "../price/TitlePrice";
 
 export const TokenomicsCard = () => {
+  const theme = useTheme();
+  const isDarkMode = theme.palette.mode === "dark";
   const {
     data: nymPrice,
     isLoading,
@@ -69,7 +71,10 @@ export const TokenomicsCard = () => {
   ) {
     return (
       <ExplorerCard label="Tokenomics overview">
-        <Typography variant="h5" sx={{ color: "pine.600", letterSpacing: 0.7 }}>
+        <Typography
+          variant="h5"
+          sx={{ color: isDarkMode ? "base.white" : "pine.950" }}
+        >
           Failed to load tokenomics overview.
         </Typography>
         <Skeleton variant="text" height={80} />
@@ -98,7 +103,7 @@ export const TokenomicsCard = () => {
   function calculateTVL(
     epochRewards: ExplorerData["currentEpochRewardsData"],
     nymPriceData: NymTokenomics,
-    packetsAndStaking: ExplorerData["packetsAndStakingData"],
+    packetsAndStaking: ExplorerData["packetsAndStakingData"]
   ): number {
     const lastTotalStake =
       packetsAndStaking[packetsAndStaking.length - 1]?.total_stake || 0;
@@ -109,7 +114,7 @@ export const TokenomicsCard = () => {
     );
   }
   const TVL = formatBigNum(
-    calculateTVL(epochRewardsData, nymPrice, packetsAndStakingData),
+    calculateTVL(epochRewardsData, nymPrice, packetsAndStakingData)
   );
 
   const dataRows = [

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

@@ -0,0 +1,64 @@
+"use client";
+import { fetchEpochRewards, fetchNoise, fetchNymPrice } from "@/app/api";
+import { useQuery } from "@tanstack/react-query";
+import { TokenomicsCard } from "./TokenomicsCard";
+import { ConditionalCardWrapper } from "./ConditionalCardWrapper";
+
+export const TokenomicsCardWrapper = () => {
+  const {
+    data: nymPrice,
+    isLoading: isPriceLoading,
+    isError: isPriceError,
+  } = useQuery({
+    queryKey: ["nymPrice"],
+    queryFn: fetchNymPrice,
+    staleTime: 10 * 60 * 1000,
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+    refetchOnMount: false,
+  });
+
+  const {
+    data: epochRewards,
+    isLoading: isEpochLoading,
+    isError: isEpochError,
+  } = useQuery({
+    queryKey: ["epochRewards"],
+    queryFn: fetchEpochRewards,
+    staleTime: 10 * 60 * 1000,
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+    refetchOnMount: false,
+  });
+
+  const {
+    data: packetsAndStaking,
+    isLoading: isStakingLoading,
+    isError: isStakingError,
+  } = useQuery({
+    queryKey: ["noise"],
+    queryFn: fetchNoise,
+    staleTime: 10 * 60 * 1000,
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+    refetchOnMount: false,
+  });
+
+  // Determine if the card should be visible
+  const isLoading = isPriceLoading || isEpochLoading || isStakingLoading;
+  const hasError = isPriceError || isEpochError || isStakingError;
+  const hasData =
+    nymPrice &&
+    epochRewards &&
+    packetsAndStaking &&
+    Array.isArray(packetsAndStaking) &&
+    packetsAndStaking.length >= 2;
+
+  const isVisible = !hasError && (hasData || isLoading);
+
+  return (
+    <ConditionalCardWrapper size={{ xs: 12, sm: 6, lg: 3 }} visible={isVisible}>
+      <TokenomicsCard />
+    </ConditionalCardWrapper>
+  );
+};

explorer-v2/src/components/nodeTable/AdvancedFilters.tsx

@@ -0,0 +1,339 @@
+"use client";
+import React from "react";
+import {
+  Box,
+  Button,
+  Collapse,
+  Slider,
+  Typography,
+  useTheme,
+} from "@mui/material";
+import Grid from "@mui/material/Grid2";
+
+import FilterAltIcon from "@mui/icons-material/FilterAlt";
+import AccessTimeIcon from "@mui/icons-material/AccessTime";
+import PieChartIcon from "@mui/icons-material/PieChart";
+import PercentIcon from "@mui/icons-material/Percent";
+import NodeFilterButtonGroup from "../toggleButton/NodeFilterButtonGroup";
+import { RECOMMENDED_NODES } from "@/app/constants";
+
+type AdvancedFiltersProps = {
+  uptime: [number, number];
+  setUptime: (value: [number, number]) => void;
+  saturation: [number, number];
+  setSaturation: (value: [number, number]) => void;
+  profitMargin: [number, number];
+  setProfitMargin: (value: [number, number]) => void;
+  open?: boolean;
+  setOpen?: (open: boolean) => void;
+  maxSaturation?: number;
+  activeFilter: "all" | "mixnodes" | "gateways" | "recommended";
+  setActiveFilter: (
+    filter: "all" | "mixnodes" | "gateways" | "recommended"
+  ) => void;
+  nodeCounts: {
+    all: number;
+    mixnodes: number;
+    gateways: number;
+  };
+};
+
+export default function AdvancedFilters({
+  uptime,
+  setUptime,
+  saturation,
+  setSaturation,
+  profitMargin,
+  setProfitMargin,
+  open,
+  setOpen,
+  maxSaturation = 100,
+  activeFilter,
+  setActiveFilter,
+  nodeCounts,
+}: AdvancedFiltersProps) {
+  const theme = useTheme();
+  const green = "#14e76f"; // from theme colours
+
+  const marksPercent: { value: number }[] = [{ value: 0 }, { value: 100 }];
+  const marksSaturation: { value: number }[] = [
+    { value: 0 },
+    { value: maxSaturation },
+  ];
+
+  const panel = (
+    <Box
+      sx={{
+        mt: 3,
+        p: 2,
+        borderRadius: 3,
+        background: theme.palette.background.paper,
+        border: `1px solid ${theme.palette.divider}`,
+      }}
+    >
+      <Typography
+        variant="subtitle1"
+        sx={{
+          fontStyle: "italic",
+          color:
+            theme.palette.mode === "light"
+              ? theme.palette.common.black
+              : theme.palette.common.white,
+          mb: 2,
+        }}
+      >
+        Advanced filtering mode is active
+      </Typography>
+      <Grid container spacing={3}>
+        <Grid size={{ xs: 12, sm: 6, md: 4 }}>
+          <Box
+            sx={{
+              p: 3,
+              borderRadius: 3,
+              background: theme.palette.background.default,
+              mb: { xs: 2, sm: 0 },
+              border: `1px solid ${theme.palette.divider}`,
+            }}
+          >
+            <Box display="flex" alignItems="center" mb={1}>
+              <AccessTimeIcon
+                sx={{
+                  color:
+                    theme.palette.mode === "dark"
+                      ? theme.palette.common.white
+                      : theme.palette.common.black,
+                  mr: 1,
+                }}
+              />
+              <Typography
+                variant="h6"
+                sx={{ color: theme.palette.text.primary, fontSize: 17 }}
+              >
+                Uptime
+              </Typography>
+              <Box flexGrow={1} />
+              <Typography
+                variant="h6"
+                sx={{ color: theme.palette.primary.main, fontSize: 17 }}
+              >
+                {uptime[0]}% - {uptime[1]}%
+              </Typography>
+            </Box>
+            <Slider
+              value={uptime}
+              onChange={(_, v) => setUptime(v as [number, number])}
+              valueLabelDisplay="off"
+              min={0}
+              max={100}
+              marks={marksPercent}
+              sx={{
+                color: green,
+                height: 8,
+                "& .MuiSlider-thumb": {
+                  width: 24,
+                  height: 24,
+                  backgroundColor: green,
+                },
+              }}
+            />
+          </Box>
+        </Grid>
+        <Grid size={{ xs: 12, sm: 6, md: 4 }}>
+          <Box
+            sx={{
+              p: 3,
+              borderRadius: 3,
+              background: theme.palette.background.default,
+              mb: { xs: 2, sm: 0 },
+              border: `1px solid ${theme.palette.divider}`,
+            }}
+          >
+            <Box display="flex" alignItems="center" mb={1}>
+              <PieChartIcon
+                sx={{
+                  color:
+                    theme.palette.mode === "dark"
+                      ? theme.palette.common.white
+                      : theme.palette.common.black,
+                  mr: 1,
+                }}
+              />
+              <Typography
+                variant="h6"
+                sx={{ color: theme.palette.text.primary, fontSize: 17 }}
+              >
+                Saturation
+              </Typography>
+              <Box flexGrow={1} />
+              <Typography
+                variant="h6"
+                sx={{ color: theme.palette.primary.main, fontSize: 17 }}
+              >
+                {saturation[0]}% - {saturation[1]}%
+              </Typography>
+            </Box>
+            <Slider
+              value={saturation}
+              onChange={(_, v) => setSaturation(v as [number, number])}
+              valueLabelDisplay="off"
+              min={0}
+              max={maxSaturation}
+              marks={marksSaturation}
+              sx={{
+                color: green,
+                height: 8,
+                "& .MuiSlider-thumb": {
+                  width: 24,
+                  height: 24,
+                  backgroundColor: green,
+                },
+              }}
+            />
+          </Box>
+        </Grid>
+        <Grid size={{ xs: 12, sm: 6, md: 4 }} sx={{ mx: { sm: "auto" } }}>
+          <Box
+            sx={{
+              p: 3,
+              borderRadius: 3,
+              background: theme.palette.background.default,
+              mb: { xs: 2, sm: 0 },
+              border: `1px solid ${theme.palette.divider}`,
+            }}
+          >
+            <Box display="flex" alignItems="center" mb={1}>
+              <PercentIcon
+                sx={{
+                  color:
+                    theme.palette.mode === "dark"
+                      ? theme.palette.common.white
+                      : theme.palette.common.black,
+                  mr: 1,
+                }}
+              />
+              <Typography
+                variant="h6"
+                sx={{ color: theme.palette.text.primary, fontSize: 17 }}
+              >
+                Profit Margin
+              </Typography>
+              <Box flexGrow={1} />
+              <Typography
+                variant="h6"
+                sx={{ color: theme.palette.primary.main, fontSize: 17 }}
+              >
+                {profitMargin[0]}% - {profitMargin[1]}%
+              </Typography>
+            </Box>
+            <Slider
+              value={profitMargin}
+              onChange={(_, v) => setProfitMargin(v as [number, number])}
+              valueLabelDisplay="off"
+              min={0}
+              max={100}
+              marks={marksPercent}
+              sx={{
+                color: green,
+                height: 8,
+                "& .MuiSlider-thumb": {
+                  width: 24,
+                  height: 24,
+                  backgroundColor: green,
+                },
+              }}
+            />
+          </Box>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+
+  return (
+    <Box sx={{ width: "100%" }}>
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: { xs: "column", sm: "row" },
+          alignItems: { xs: "stretch", sm: "center" },
+          gap: 2,
+        }}
+      >
+        <Box sx={{ width: { xs: "100%", sm: "auto" } }}>
+          <NodeFilterButtonGroup
+            size="medium"
+            options={[
+              {
+                label: `Recommended servers (${RECOMMENDED_NODES.length})`,
+                isSelected: activeFilter === "recommended",
+                value: "recommended",
+              },
+              {
+                label: `All servers (${nodeCounts.all})`,
+                isSelected: activeFilter === "all",
+                value: "all",
+              },
+              {
+                label: `Mixnodes (${nodeCounts.mixnodes})`,
+                isSelected: activeFilter === "mixnodes",
+                value: "mixnodes",
+              },
+              {
+                label: `Gateways (${nodeCounts.gateways})`,
+                isSelected: activeFilter === "gateways",
+                value: "gateways",
+              },
+            ]}
+            onPage={activeFilter}
+            onFilterChange={setActiveFilter}
+          />
+        </Box>
+        <Button
+          variant="outlined"
+          color="inherit"
+          startIcon={
+            <FilterAltIcon
+              sx={{
+                color:
+                  theme.palette.mode === "light"
+                    ? `${theme.palette.common.black} !important`
+                    : `${theme.palette.common.white} !important`,
+              }}
+            />
+          }
+          onClick={() => setOpen && setOpen(!open)}
+          sx={{
+            borderRadius: 3,
+            px: 4,
+            py: 1.5,
+            color:
+              theme.palette.mode === "light"
+                ? `${theme.palette.common.black} !important`
+                : `${theme.palette.common.white} !important`,
+            borderColor:
+              theme.palette.mode === "light"
+                ? theme.palette.common.black
+                : theme.palette.common.white,
+            background: "none",
+            fontWeight: 500,
+            fontSize: 16,
+            "&:hover, &:focus": {
+              background:
+                theme.palette.mode === "light"
+                  ? "rgba(0,0,0,0.04)"
+                  : "rgba(255,255,255,0.05)",
+              borderColor:
+                theme.palette.mode === "light"
+                  ? theme.palette.grey[400]
+                  : theme.palette.common.white,
+            },
+          }}
+        >
+          Advanced Filters
+        </Button>
+      </Box>
+      <Collapse in={open} timeout="auto" unmountOnExit>
+        {panel}
+      </Collapse>
+    </Box>
+  );
+}

explorer-v2/src/components/nodeTable/NodeTable.tsx

@@ -7,6 +7,7 @@ import {
   Typography,
   useMediaQuery,
   useTheme,
+  Tooltip,
 } from "@mui/material";
 import { useQueryClient } from "@tanstack/react-query";
 import { useLocalStorage } from "@uidotdev/usehooks";
@@ -29,6 +30,7 @@ import StakeModal from "../staking/StakeModal";
 import { fee } from "../staking/schemas";
 import ConnectWallet from "../wallet/ConnectWallet";
 import type { MappedNymNode, MappedNymNodes } from "./NodeTableWithAction";
+import CopyToClipboard from "../copyToClipboard/CopyToClipboard";
 
 const ColumnHeading = ({
   children,
@@ -100,7 +102,7 @@ const NodeTable = ({ nodes }: { nodes: MappedNymNodes }) => {
           { nodeId },
           fee,
           "Delegation from Nym Explorer V2",
-          uNymFunds,
+          uNymFunds
         );
         setSelectedNodeForStaking(undefined);
         setInfoModalProps({
@@ -129,7 +131,7 @@ const NodeTable = ({ nodes }: { nodes: MappedNymNodes }) => {
       }
       setIsLoading(false);
     },
-    [nymClient, handleRefetch],
+    [nymClient, handleRefetch]
   );
 
   const handleOnSelectStake = useCallback(
@@ -158,7 +160,7 @@ const NodeTable = ({ nodes }: { nodes: MappedNymNodes }) => {
         identityKey: node.identity_key,
       });
     },
-    [isWalletConnected],
+    [isWalletConnected]
   );
 
   const columns: MRT_ColumnDef<MappedNymNode>[] = useMemo(
@@ -189,54 +191,6 @@ const NodeTable = ({ nodes }: { nodes: MappedNymNodes }) => {
         },
         Cell: ({ row }) => <Favorite address={row.original.owner} />,
       },
-
-      {
-        id: "name",
-        header: "",
-        Header: <ColumnHeading>Name</ColumnHeading>,
-        accessorKey: "name",
-        Cell: ({ row }) => (
-          <Stack spacing={1}>
-            <Typography variant="body4">{row.original.name || "-"}</Typography>
-          </Stack>
-        ),
-      },
-      {
-        id: "id",
-        header: "",
-        Header: <ColumnHeading>Node ID</ColumnHeading>,
-        accessorKey: "nodeId",
-        size: 90,
-        Cell: ({ row }) => (
-          <Stack spacing={1}>
-            <Typography variant="body4">{row.original.nodeId}</Typography>
-          </Stack>
-        ),
-      },
-      {
-        id: "identity_key",
-        header: "",
-        Header: <ColumnHeading>Identity Key</ColumnHeading>,
-        accessorKey: "identity_key",
-        Cell: ({ row }) => (
-          <Stack spacing={1}>
-            <Typography variant="body5">{row.original.identity_key}</Typography>
-          </Stack>
-        ),
-      },
-      {
-        id: "qos",
-        header: "Qlt of Service",
-        align: "center",
-        accessorKey: "qualityOfService",
-        size: 100,
-        Header: <ColumnHeading>Qlt of Service</ColumnHeading>,
-        Cell: ({ row }) => (
-          <Typography variant="body4">
-            {row.original.qualityOfService.toFixed()}%
-          </Typography>
-        ),
-      },
       {
         id: "location",
         header: "Location",
@@ -255,6 +209,98 @@ const NodeTable = ({ nodes }: { nodes: MappedNymNodes }) => {
             "-"
           ),
       },
+      {
+        id: "name",
+        header: "",
+        size: 210,
+
+        Header: <ColumnHeading>Node</ColumnHeading>,
+        accessorKey: "name",
+        Cell: ({ row }) => (
+          <Stack spacing={1}>
+            <Typography variant="body4">{row.original.name || "-"}</Typography>
+            <Tooltip
+              title={row.original.identity_key}
+              placement="bottom"
+              slotProps={{
+                tooltip: {
+                  sx: {
+                    maxWidth: "none",
+                    whiteSpace: "nowrap",
+                    bgcolor: isDarkMode ? "#374042" : "#E5E7EB",
+                    color: isDarkMode ? "#FFFFFF" : "#000000",
+                    "& .MuiTooltip-arrow": {
+                      color: isDarkMode ? "#374042" : "#E5E7EB",
+                    },
+                  },
+                },
+              }}
+            >
+              <Stack
+                direction="row"
+                alignItems="center"
+                justifyContent="space-between"
+                onClick={(e) => e.stopPropagation()}
+                sx={{ height: "24px" }}
+              >
+                <Typography
+                  variant="body5"
+                  sx={{
+                    height: "24px",
+                    display: "flex",
+                    alignItems: "center",
+                  }}
+                >
+                  {row.original.identity_key.length > 17
+                    ? `${row.original.identity_key.slice(0, 10)}...${row.original.identity_key.slice(-8)}`
+                    : row.original.identity_key}
+                </Typography>
+                <CopyToClipboard text={row.original.identity_key} />
+              </Stack>
+            </Tooltip>
+          </Stack>
+        ),
+      },
+      {
+        id: "id",
+        header: "",
+        Header: <ColumnHeading>Node ID</ColumnHeading>,
+        accessorKey: "nodeId",
+        size: 90,
+        Cell: ({ row }) => (
+          <Stack spacing={1}>
+            <Typography variant="body4">{row.original.nodeId}</Typography>
+          </Stack>
+        ),
+      },
+
+      {
+        id: "qos",
+        header: "Qlt of Service",
+        align: "center",
+        accessorKey: "qualityOfService",
+        size: 100,
+        Header: <ColumnHeading>Uptime</ColumnHeading>,
+        Cell: ({ row }) => {
+          const value = row.original.qualityOfService;
+          let color = "#000000";
+
+          if (value >= 80) {
+            color = "#22C55E"; // green
+          } else if (value >= 50) {
+            color = "#F59E0B"; // amber/orange-yellow
+          } else {
+            color = "#EF4444"; // red
+          }
+
+          return (
+            <Typography variant="body4" sx={{ color, fontWeight: 400 }}>
+              {value.toFixed()}%
+            </Typography>
+          );
+        },
+      },
+
       {
         id: "stakeSaturation",
         header: "Stake saturation",
@@ -262,9 +308,58 @@ const NodeTable = ({ nodes }: { nodes: MappedNymNodes }) => {
         size: 120,
 
         Header: <ColumnHeading>Saturation</ColumnHeading>,
+        Cell: ({ row }) => {
+          const value = row.original.stakeSaturation;
+          let color = "#000000";
+
+          if (value > 100) {
+            color = "#EF4444";
+          } else if (value >= 75) {
+            color = "#22C55E";
+          } else if (value >= 25) {
+            color = "#F59E0B";
+          } else {
+            color = "#EF4444";
+          }
+
+          return (
+            <Typography variant="body4" sx={{ color, fontWeight: 400 }}>
+              {value}%
+            </Typography>
+          );
+        },
+      },
+      {
+        id: "selfBond",
+        header: "Self-bond",
+        accessorKey: "selfBond",
+        Header: <ColumnHeading>Self-bond</ColumnHeading>,
+        Cell: ({ row }) => {
+          const value = row.original.selfBond;
+          let color = isDarkMode ? "#FFFFFF" : "#000000";
+
+          if (value === 0) {
+            color = "#EF4444";
+          }
+
+          return (
+            <Typography
+              variant="body4"
+              sx={{ color, fontWeight: value === 0 ? 400 : 300 }}
+            >
+              {row.original.selfBond} NYM
+            </Typography>
+          );
+        },
+      },
+      {
+        id: "operatingCosts",
+        header: "Operating costs",
+        accessorKey: "operatingCosts",
+        Header: <ColumnHeading>Operating costs</ColumnHeading>,
         Cell: ({ row }) => (
           <Typography variant="body4">
-            {row.original.stakeSaturation}%
+            {row.original.operatingCosts} NYM
           </Typography>
         ),
       },
@@ -303,7 +398,7 @@ const NodeTable = ({ nodes }: { nodes: MappedNymNodes }) => {
         enableSorting: false,
       },
     ],
-    [isWalletConnected, handleOnSelectStake, favorites],
+    [isWalletConnected, handleOnSelectStake, favorites, isDarkMode]
   );
   const table = useMaterialReactTable({
     columns,
@@ -410,8 +505,12 @@ const NodeTable = ({ nodes }: { nodes: MappedNymNodes }) => {
       },
     },
     muiTableBodyRowProps: ({ row }) => ({
-      onClick: () => {
-        router.push(`/nym-node/${row.original.nodeId}`);
+      onClick: (e) => {
+        if (e.ctrlKey || e.metaKey) {
+          window.open(`/explorer/nym-node/${row.original.nodeId}`, "_blank");
+        } else {
+          router.push(`/nym-node/${row.original.nodeId}`);
+        }
       },
       hover: true,
       sx: {

explorer-v2/src/components/nodeTable/NodeTableWithAction.tsx

@@ -3,15 +3,18 @@
 import { Card, CardContent, Skeleton, Stack, Typography } from "@mui/material";
 import { useQuery } from "@tanstack/react-query";
 import DOMPurify from "isomorphic-dompurify";
-import { fetchEpochRewards, fetchObservatoryNodes } from "../../app/api";
-import type { ExplorerData, IObservatoryNode } from "../../app/api/types";
+import { fetchEpochRewards, fetchNSApiNodes } from "../../app/api";
+import type { ExplorerData, NS_NODE } from "../../app/api/types";
 import { countryName } from "../../utils/countryName";
 import NodeTable from "./NodeTable";
+import { useState, useEffect } from "react";
+import AdvancedFilters from "./AdvancedFilters";
+import { RECOMMENDED_NODES } from "@/app/constants";
 
 // Utility function to calculate node saturation point
 function getNodeSaturationPoint(
   totalStake: number,
-  stakeSaturationPoint: string,
+  stakeSaturationPoint: string
 ): number {
   const saturation = Number.parseFloat(stakeSaturationPoint);
 
@@ -25,39 +28,129 @@ function getNodeSaturationPoint(
 }
 
 // Map nodes with rewards data
-const mappedNymNodes = (
-  nodes: IObservatoryNode[],
-  epochRewardsData: ExplorerData["currentEpochRewardsData"],
+
+const mappedNSApiNodes = (
+  nodes: NS_NODE[],
+  epochRewardsData: ExplorerData["currentEpochRewardsData"]
 ) =>
-  nodes.map((node) => {
-    const nodeSaturationPoint = getNodeSaturationPoint(
-      node.total_stake,
-      epochRewardsData.interval.stake_saturation_point,
-    );
+  nodes
+    .map((node) => {
+      const nodeSaturationPoint = getNodeSaturationPoint(
+        +node.total_stake,
+        epochRewardsData.interval.stake_saturation_point
+      );
 
-    const cleanMoniker = DOMPurify.sanitize(
-      node.self_description.moniker,
-    ).replace(/&/g, "&");
+      const cleanMoniker = DOMPurify.sanitize(node.description.moniker).replace(
+        /&/g,
+        "&"
+      );
 
-    return {
-      name: cleanMoniker,
-      nodeId: node.node_id,
-      identity_key: node.identity_key,
-      countryCode: node.description.auxiliary_details.location || null,
-      countryName:
-        countryName(node.description.auxiliary_details.location) || null,
-      profitMarginPercentage:
-        +node.rewarding_details.cost_params.profit_margin_percent * 100,
-      owner: node.bonding_address,
-      stakeSaturation: nodeSaturationPoint,
-      qualityOfService: +node.uptime * 100,
-    };
-  });
+      const selfBondFormatted = node.original_pledge
+        ? Number(node.original_pledge) / 1_000_000
+        : 0;
 
-export type MappedNymNodes = ReturnType<typeof mappedNymNodes>;
+      const operatingCostsFormatted = node.rewarding_details
+        ? Number(
+            node.rewarding_details.cost_params.interval_operating_cost.amount
+          ) / 1_000_000
+        : 0;
+
+      return {
+        name: cleanMoniker,
+        nodeId: node.node_id,
+        identity_key: node.identity_key,
+        countryCode: node.geoip?.country || null,
+        countryName: countryName(node.geoip?.country || null) || null,
+        selfBond: selfBondFormatted,
+        operatingCosts: operatingCostsFormatted,
+        profitMarginPercentage: node.rewarding_details
+          ? +node.rewarding_details.cost_params.profit_margin_percent * 100
+          : 0,
+        owner: node.bonding_address,
+        stakeSaturation: nodeSaturationPoint,
+        qualityOfService: +node.uptime * 100,
+        mixnode: node.self_description?.declared_role.mixnode === true,
+        gateway:
+          node.self_description?.declared_role.entry === true ||
+          node.self_description?.declared_role.exit_ipr === true ||
+          node.self_description?.declared_role.exit_nr === true,
+      };
+    })
+    .sort((a, b) => {
+      // Handle null country names by putting them at the end
+      if (!a.countryName && !b.countryName) return 0;
+      if (!a.countryName) return 1;
+      if (!b.countryName) return -1;
+
+      // Sort alphabetically by country name
+      return a.countryName.localeCompare(b.countryName);
+    });
+
+export type MappedNymNodes = ReturnType<typeof mappedNSApiNodes>;
 export type MappedNymNode = MappedNymNodes[0];
 
 const NodeTableWithAction = () => {
+  // All hooks at the top!
+  const [activeFilter, setActiveFilter] = useState<
+    "all" | "mixnodes" | "gateways" | "recommended"
+  >(() => {
+    const stored = sessionStorage.getItem("nodeTableActiveFilter");
+    return (
+      (stored as "all" | "mixnodes" | "gateways" | "recommended") ||
+      "recommended"
+    );
+  });
+  const [uptime, setUptime] = useState<[number, number]>(() => {
+    const stored = sessionStorage.getItem("nodeTableUptime");
+    return stored ? JSON.parse(stored) : [0, 100];
+  });
+  const [saturation, setSaturation] = useState<[number, number]>([0, 100]);
+  const [profitMargin, setProfitMargin] = useState<[number, number]>(() => {
+    const stored = sessionStorage.getItem("nodeTableProfitMargin");
+    return stored ? JSON.parse(stored) : [0, 100];
+  });
+  const [advancedOpen, setAdvancedOpen] = useState(() => {
+    const stored = sessionStorage.getItem("nodeTableAdvancedOpen");
+    return stored ? JSON.parse(stored) : false;
+  });
+
+  // Wrapper functions to handle filter changes and sessionStorage
+  const handleActiveFilterChange = (
+    newFilter: "all" | "mixnodes" | "gateways" | "recommended"
+  ) => {
+    setActiveFilter(newFilter);
+    sessionStorage.setItem("nodeTableActiveFilter", newFilter);
+  };
+
+  const handleUptimeChange = (newUptime: [number, number]) => {
+    setUptime(newUptime);
+    sessionStorage.setItem("nodeTableUptime", JSON.stringify(newUptime));
+  };
+
+  const handleSaturationChange = (newSaturation: [number, number]) => {
+    setSaturation(newSaturation);
+    sessionStorage.setItem(
+      "nodeTableSaturation",
+      JSON.stringify(newSaturation)
+    );
+  };
+
+  const handleProfitMarginChange = (newProfitMargin: [number, number]) => {
+    setProfitMargin(newProfitMargin);
+    sessionStorage.setItem(
+      "nodeTableProfitMargin",
+      JSON.stringify(newProfitMargin)
+    );
+  };
+
+  const handleAdvancedOpenChange = (newAdvancedOpen: boolean) => {
+    setAdvancedOpen(newAdvancedOpen);
+    sessionStorage.setItem(
+      "nodeTableAdvancedOpen",
+      JSON.stringify(newAdvancedOpen)
+    );
+  };
+
   // Use React Query to fetch epoch rewards
   const {
     data: epochRewardsData,
@@ -74,20 +167,48 @@ const NodeTableWithAction = () => {
 
   // Use React Query to fetch Nym nodes
   const {
-    data: nymNodes = [],
-    isLoading: isNodesLoading,
-    isError: isNodesError,
+    data: nsApiNodes = [],
+    isLoading: isNSApiNodesLoading,
+    isError: isNSApiNodesError,
   } = useQuery({
-    queryKey: ["nymNodes"],
-    queryFn: fetchObservatoryNodes,
+    queryKey: ["nsApiNodes"],
+    queryFn: fetchNSApiNodes,
     staleTime: 10 * 60 * 1000, // 10 minutes
     refetchOnWindowFocus: false, // Prevents unnecessary refetching
     refetchOnReconnect: false,
     refetchOnMount: false,
   });
 
+  // Map nodes with rewards data
+  const nsApiNodesData = epochRewardsData
+    ? mappedNSApiNodes(nsApiNodes || [], epochRewardsData)
+    : [];
+
+  // Calculate max saturation from all nodes
+  const maxSaturation = Math.max(
+    100,
+    ...nsApiNodesData.map((n) => n.stakeSaturation || 0)
+  );
+
+  // Initialize saturation from sessionStorage or set to maxSaturation when data is loaded
+  useEffect(() => {
+    const stored = sessionStorage.getItem("nodeTableSaturation");
+    if (stored) {
+      setSaturation(JSON.parse(stored));
+    } else if (nsApiNodesData.length > 0) {
+      setSaturation([0, maxSaturation]);
+    }
+  }, [maxSaturation, nsApiNodesData.length]);
+
+  // Calculate node counts for each type
+  const nodeCounts = {
+    all: nsApiNodesData.length,
+    mixnodes: nsApiNodesData.filter((node) => node.mixnode).length,
+    gateways: nsApiNodesData.filter((node) => node.gateway).length,
+  };
+
   // Handle loading state
-  if (isEpochLoading || isNodesLoading) {
+  if (isEpochLoading || isNSApiNodesLoading) {
     return (
       <Card sx={{ height: "100%", mt: 5 }}>
         <CardContent>
@@ -101,7 +222,7 @@ const NodeTableWithAction = () => {
   }
 
   // Handle error state
-  if (isEpochError || isNodesError) {
+  if (isEpochError || isNSApiNodesError) {
     return (
       <Stack direction="row" spacing={1}>
         <Typography variant="h5" sx={{ color: "pine.600", letterSpacing: 0.7 }}>
@@ -112,14 +233,67 @@ const NodeTableWithAction = () => {
   }
 
   // Map nodes with rewards data
-
   if (!epochRewardsData) {
     return null;
   }
 
-  const data = mappedNymNodes(nymNodes || [], epochRewardsData);
+  // Step 1: Filter nodes by type
+  const typeFilteredNodes = nsApiNodesData.filter((node) => {
+    switch (activeFilter) {
+      case "mixnodes":
+        return node.mixnode;
+      case "gateways":
+        return node.gateway;
+      case "recommended":
+        return RECOMMENDED_NODES.includes(node.nodeId);
+      default:
+        return true;
+    }
+  });
 
-  return <NodeTable nodes={data} />;
+  // Step 2: If advanced filters are open, apply them only if sliders are not at default
+  const isDefault = {
+    uptime: uptime[0] === 0 && uptime[1] === 100,
+    saturation: saturation[0] === 0 && saturation[1] === maxSaturation,
+    profitMargin: profitMargin[0] === 0 && profitMargin[1] === 100,
+  };
+  const filteredNodes = advancedOpen
+    ? typeFilteredNodes.filter((node) => {
+        const uptimeMatch =
+          isDefault.uptime ||
+          (node.qualityOfService >= uptime[0] &&
+            node.qualityOfService <= uptime[1]);
+        const saturationMatch =
+          isDefault.saturation ||
+          (node.stakeSaturation >= saturation[0] &&
+            node.stakeSaturation <= saturation[1]);
+        const profitMarginMatch =
+          isDefault.profitMargin ||
+          (node.profitMarginPercentage >= profitMargin[0] &&
+            node.profitMarginPercentage <= profitMargin[1]);
+        return uptimeMatch && saturationMatch && profitMarginMatch;
+      })
+    : typeFilteredNodes;
+
+  return (
+    <Stack spacing={3}>
+      <AdvancedFilters
+        open={advancedOpen}
+        setOpen={handleAdvancedOpenChange}
+        uptime={uptime}
+        setUptime={handleUptimeChange}
+        saturation={saturation}
+        setSaturation={handleSaturationChange}
+        profitMargin={profitMargin}
+        setProfitMargin={handleProfitMarginChange}
+        maxSaturation={maxSaturation}
+        activeFilter={activeFilter}
+        setActiveFilter={handleActiveFilterChange}
+        nodeCounts={nodeCounts}
+      />
+      <NodeTable nodes={filteredNodes} />
+    </Stack>
+  );
 };
 
 export default NodeTableWithAction;

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

@@ -1,9 +1,9 @@
 "use client";
 
-import type { IObservatoryNode } from "@/app/api/types";
-import { Skeleton, Stack, Typography } from "@mui/material";
+import type { NS_NODE } from "@/app/api/types";
+import { Skeleton, Stack, Typography, useTheme } from "@mui/material";
 import { useQuery } from "@tanstack/react-query";
-import { fetchObservatoryNodes } from "../../app/api";
+import { fetchNSApiNodes } from "../../app/api";
 import { formatBigNum } from "../../utils/formatBigNumbers";
 import ExplorerCard from "../cards/ExplorerCard";
 import CopyToClipboard from "../copyToClipboard/CopyToClipboard";
@@ -14,22 +14,25 @@ type Props = {
 };
 
 export const BasicInfoCard = ({ paramId }: Props) => {
-  let nodeInfo: IObservatoryNode | undefined;
+  let nodeInfo: NS_NODE | undefined;
 
   const {
-    data: nymNodes,
-    isLoading,
-    isError,
+    data: nsApiNodes = [],
+    isLoading: isNSApiNodesLoading,
+    isError: isNSApiNodesError,
   } = useQuery({
-    queryKey: ["nymNodes"],
-    queryFn: fetchObservatoryNodes,
+    queryKey: ["nsApiNodes"],
+    queryFn: fetchNSApiNodes,
     staleTime: 10 * 60 * 1000, // 10 minutes
     refetchOnWindowFocus: false, // Prevents unnecessary refetching
     refetchOnReconnect: false,
     refetchOnMount: false,
   });
 
-  if (isLoading) {
+  const theme = useTheme();
+  const isDarkMode = theme.palette.mode === "dark";
+
+  if (isNSApiNodesLoading) {
     return (
       <ExplorerCard label="Basic info">
         <Skeleton variant="text" height={90} />
@@ -42,10 +45,13 @@ export const BasicInfoCard = ({ paramId }: Props) => {
     );
   }
 
-  if (isError || !nymNodes) {
+  if (!nsApiNodes || isNSApiNodesError) {
     return (
       <ExplorerCard label="Basic info">
-        <Typography variant="h3" sx={{ color: "pine.950" }}>
+        <Typography
+          variant="h5"
+          sx={{ color: isDarkMode ? "base.white" : "pine.950" }}
+        >
           Failed to load node data.
         </Typography>
       </ExplorerCard>
@@ -55,16 +61,21 @@ export const BasicInfoCard = ({ paramId }: Props) => {
   // get node info based on wether it's dentity_key or node_id
 
   if (paramId.length > 10) {
-    nodeInfo = nymNodes.find((node) => node.identity_key === paramId);
+    nodeInfo = nsApiNodes.find(
+      (node: NS_NODE) => node.identity_key === paramId
+    );
   } else {
-    nodeInfo = nymNodes.find((node) => node.node_id === Number(paramId));
+    nodeInfo = nsApiNodes.find(
+      (node: NS_NODE) => node.node_id === Number(paramId)
+    );
   }
 
   if (!nodeInfo) return null;
 
-  const selfBond = formatBigNum(
-    Number(nodeInfo.rewarding_details.operator) / 1_000_000,
-  );
+
+  const selfBond = nodeInfo.original_pledge
+    ? formatBigNum(Number(nodeInfo.original_pledge) / 1_000_000)
+    : 0;
   const selfBondFormatted = `${selfBond} NYM`;
 
   return (
@@ -85,9 +96,13 @@ export const BasicInfoCard = ({ paramId }: Props) => {
                 variant="body4"
                 sx={{ wordWrap: "break-word", maxWidth: "90%" }}
               >
-                {nodeInfo.bonding_address}
+                {nodeInfo.bonding_address
+                  ? nodeInfo.bonding_address
+                  : "Node not bonded"}
               </Typography>
-              <CopyToClipboard text={nodeInfo.bonding_address} />
+              {nodeInfo.bonding_address && (
+                <CopyToClipboard text={nodeInfo.bonding_address} />
+              )}
             </Stack>
           }
         />
@@ -113,12 +128,14 @@ export const BasicInfoCard = ({ paramId }: Props) => {
           }
         />
 
-        <ExplorerListItem
-          row
-          divider
-          label="Nr. of stakers"
-          value={nodeInfo.rewarding_details.unique_delegations.toString()}
-        />
+        {nodeInfo.rewarding_details && (
+          <ExplorerListItem
+            row
+            divider
+            label="Nr. of stakers"
+            value={nodeInfo.rewarding_details.unique_delegations.toString()}
+          />
+        )}
         <ExplorerListItem row label="Self bonded" value={selfBondFormatted} />
       </Stack>
     </ExplorerCard>

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

@@ -46,6 +46,7 @@ const DelegationsTable = ({ id }: Props) => {
     refetchOnMount: false,
   });
 
+
   const columns: MRT_ColumnDef<NodeRewardDetails>[] = useMemo(
     () => [
       {
@@ -55,7 +56,7 @@ const DelegationsTable = ({ id }: Props) => {
         accessorKey: "height",
         Cell: ({ row }) => (
           <Stack spacing={1}>
-            <Typography variant="body4">{row.original.height}</Typography>
+            <Typography variant="body4">{row.original.block_height}</Typography>
           </Stack>
         ),
       },
@@ -86,7 +87,7 @@ const DelegationsTable = ({ id }: Props) => {
         ),
       },
     ],
-    [],
+    []
   );
   const table = useMaterialReactTable({
     columns,

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

@@ -1,10 +1,10 @@
 "use client";
 
-import type { IObservatoryNode } from "@/app/api/types";
-import { Skeleton, Typography } from "@mui/material";
+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, fetchObservatoryNodes } from "../../app/api";
+import { fetchEpochRewards, fetchNSApiNodes } from "../../app/api";
 import ExplorerCard from "../cards/ExplorerCard";
 import ExplorerListItem from "../list/ListItem";
 
@@ -13,7 +13,7 @@ type Props = {
 };
 
 export const NodeDataCard = ({ paramId }: Props) => {
-  let nodeInfo: IObservatoryNode | undefined;
+  let nodeInfo: NS_NODE | undefined;
 
   const {
     data: epochRewardsData,
@@ -30,19 +30,22 @@ export const NodeDataCard = ({ paramId }: Props) => {
 
   // Fetch node information
   const {
-    data: nymNodes,
-    isLoading,
-    isError,
+    data: nsApiNodes = [],
+    isLoading: isNSApiNodesLoading,
+    isError: isNSApiNodesError,
   } = useQuery({
-    queryKey: ["nymNodes"],
-    queryFn: fetchObservatoryNodes,
+    queryKey: ["nsApiNodes"],
+    queryFn: fetchNSApiNodes,
     staleTime: 10 * 60 * 1000, // 10 minutes
     refetchOnWindowFocus: false, // Prevents unnecessary refetching
     refetchOnReconnect: false,
     refetchOnMount: false,
   });
 
-  if (isEpochLoading || isLoading) {
+  const theme = useTheme();
+  const isDarkMode = theme.palette.mode === "dark";
+
+  if (isEpochLoading || isNSApiNodesLoading) {
     return (
       <ExplorerCard label="Nym node data" sx={{ height: "100%" }}>
         <Skeleton variant="text" height={50} />
@@ -53,10 +56,13 @@ export const NodeDataCard = ({ paramId }: Props) => {
     );
   }
 
-  if (isEpochError || isError || !nymNodes || !epochRewardsData) {
+  if (isEpochError || isNSApiNodesError || !nsApiNodes || !epochRewardsData) {
     return (
       <ExplorerCard label="Nym node data" sx={{ height: "100%" }}>
-        <Typography variant="h3" sx={{ color: "pine.950" }}>
+        <Typography
+          variant="h5"
+          sx={{ color: isDarkMode ? "base.white" : "pine.950" }}
+        >
           Failed to load node data.
         </Typography>
       </ExplorerCard>
@@ -66,17 +72,23 @@ export const NodeDataCard = ({ paramId }: Props) => {
   // get node info based on wether it's dentity_key or node_id
 
   if (paramId.length > 10) {
-    nodeInfo = nymNodes.find((node) => node.identity_key === paramId);
+    nodeInfo = nsApiNodes.find(
+      (node: NS_NODE) => node.identity_key === paramId
+    );
   } else {
-    nodeInfo = nymNodes.find((node) => node.node_id === Number(paramId));
+    nodeInfo = nsApiNodes.find(
+      (node: NS_NODE) => node.node_id === Number(paramId)
+    );
   }
 
   if (!nodeInfo) return null;
 
-  const softwareUpdateTime = format(
-    new Date(nodeInfo.description.build_information.build_timestamp),
-    "dd/MM/yyyy",
-  );
+  const softwareUpdateTime = nodeInfo.self_description
+    ? format(
+        new Date(nodeInfo.self_description.build_information.build_timestamp),
+        "dd/MM/yyyy"
+      )
+    : "N/A";
 
   return (
     <ExplorerCard label="Nym node data" sx={{ height: "100%" }}>
@@ -90,13 +102,21 @@ export const NodeDataCard = ({ paramId }: Props) => {
         row
         divider
         label="Host"
-        value={nodeInfo.description.host_information.ip_address.toString()}
+        value={
+          nodeInfo.self_description
+            ? nodeInfo.self_description.host_information.ip_address.toString()
+            : "N/A"
+        }
       />
       <ExplorerListItem
         row
         divider
         label="Version"
-        value={nodeInfo.description.build_information.build_version}
+        value={
+          nodeInfo.self_description
+            ? nodeInfo.self_description.build_information.build_version
+            : "N/A"
+        }
       />
       <ExplorerListItem
         row

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

@@ -1,8 +1,8 @@
 "use client";
 
-import { fetchObservatoryNodes } from "@/app/api";
-import type { IObservatoryNode } from "@/app/api/types";
-import { Skeleton, Typography } from "@mui/material";
+import { fetchNSApiNodes } from "@/app/api";
+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 DelegationsTable from "./DelegationsTable";
@@ -12,15 +12,17 @@ type Props = {
 };
 
 const NodeDelegationsCard = ({ paramId }: Props) => {
-  let nodeInfo: IObservatoryNode | undefined;
+  const theme = useTheme();
+  const isDarkMode = theme.palette.mode === "dark";
+  let nodeInfo: NS_NODE | undefined;
 
   const {
-    data: nymNodes,
-    isError,
-    isLoading,
+    data: nsApiNodes = [],
+    isLoading: isNSApiNodesLoading,
+    isError: isNSApiNodesError,
   } = useQuery({
-    queryKey: ["nymNodes"],
-    queryFn: fetchObservatoryNodes,
+    queryKey: ["nsApiNodes"],
+    queryFn: fetchNSApiNodes,
     staleTime: 10 * 60 * 1000, // 10 minutes
     refetchOnWindowFocus: false, // Prevents unnecessary refetching
     refetchOnReconnect: false,
@@ -28,16 +30,20 @@ const NodeDelegationsCard = ({ paramId }: Props) => {
   });
 
   if (paramId.length > 10) {
-    nodeInfo = nymNodes?.find((node) => node.identity_key === paramId);
+    nodeInfo = nsApiNodes.find(
+      (node: NS_NODE) => node.identity_key === paramId
+    );
   } else {
-    nodeInfo = nymNodes?.find((node) => node.node_id === Number(paramId));
+    nodeInfo = nsApiNodes.find(
+      (node: NS_NODE) => node.node_id === Number(paramId)
+    );
   }
 
   if (!nodeInfo) return null;
 
   const id = nodeInfo.node_id;
 
-  if (isLoading) {
+  if (isNSApiNodesLoading) {
     return (
       <ExplorerCard label="Delegations" sx={{ height: "100%" }}>
         <Skeleton variant="text" height={50} />
@@ -48,10 +54,13 @@ const NodeDelegationsCard = ({ paramId }: Props) => {
     );
   }
 
-  if (isError) {
+  if (isNSApiNodesError) {
     return (
       <ExplorerCard label="Delegations" sx={{ height: "100%" }}>
-        <Typography variant="h3" sx={{ color: "pine.950" }}>
+        <Typography
+          variant="h3"
+          sx={{ color: isDarkMode ? "base.white" : "pine.950" }}
+        >
           Failed to load delegations. Please try again later.
         </Typography>
       </ExplorerCard>

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

@@ -1,7 +1,7 @@
 "use client";
 
-import { fetchObservatoryNodes } from "@/app/api";
-import type { IObservatoryNode } from "@/app/api/types";
+import { fetchNSApiNodes } from "@/app/api";
+import type { NS_NODE } from "@/app/api/types";
 import ExplorerButtonGroup from "@/components/toggleButton/ToggleButton";
 import { useQuery } from "@tanstack/react-query";
 
@@ -10,27 +10,32 @@ type Props = {
 };
 
 export default function NodePageButtonGroup({ paramId }: Props) {
-  let nodeInfo: IObservatoryNode | undefined;
+  let nodeInfo: NS_NODE | undefined;
 
-  const { data: nymNodes, isError } = useQuery({
-    queryKey: ["nymNodes"],
-    queryFn: fetchObservatoryNodes,
+  const { data: nsApiNodes = [], isError: isNSApiNodesError } = useQuery({
+    queryKey: ["nsApiNodes"],
+    queryFn: fetchNSApiNodes,
     staleTime: 10 * 60 * 1000, // 10 minutes
     refetchOnWindowFocus: false, // Prevents unnecessary refetching
     refetchOnReconnect: false,
     refetchOnMount: false,
   });
 
-  if (!nymNodes || isError) return null;
+  if (!nsApiNodes || isNSApiNodesError) return null;
 
   // get node info based on wether it's dentity_key or node_id
 
   if (paramId.length > 10) {
-    nodeInfo = nymNodes.find((node) => node.identity_key === paramId);
+    nodeInfo = nsApiNodes.find(
+      (node: NS_NODE) => node.identity_key === paramId
+    );
   } else {
-    nodeInfo = nymNodes.find((node) => node.node_id === Number(paramId));
+    nodeInfo = nsApiNodes.find(
+      (node: NS_NODE) => node.node_id === Number(paramId)
+    );
   }
 
+
   if (!nodeInfo) return null;
 
   if (nodeInfo.bonding_address)

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

@@ -1,10 +1,10 @@
 "use client";
 
 import { formatBigNum } from "@/utils/formatBigNumbers";
-import { Skeleton, Typography } from "@mui/material";
+import { Skeleton, Typography, useTheme } from "@mui/material";
 import { useQuery } from "@tanstack/react-query";
-import { fetchEpochRewards, fetchObservatoryNodes } from "../../app/api";
-import type { IObservatoryNode, RewardingDetails } from "../../app/api/types";
+import { fetchEpochRewards, fetchNSApiNodes } from "../../app/api";
+import type { NS_NODE } from "../../app/api/types";
 import ExplorerCard from "../cards/ExplorerCard";
 import ExplorerListItem from "../list/ListItem";
 
@@ -13,7 +13,9 @@ type Props = {
 };
 
 export const NodeParametersCard = ({ paramId }: Props) => {
-  let nodeInfo: IObservatoryNode | undefined;
+  const theme = useTheme();
+  const isDarkMode = theme.palette.mode === "dark";
+  let nodeInfo: NS_NODE | undefined;
 
   // Fetch epoch rewards
   const {
@@ -31,19 +33,19 @@ export const NodeParametersCard = ({ paramId }: Props) => {
 
   // Fetch node information
   const {
-    data: nymNodes,
-    isLoading,
-    isError,
+    data: nsApiNodes = [],
+    isLoading: isNSApiNodesLoading,
+    isError: isNSApiNodesError,
   } = useQuery({
-    queryKey: ["nymNodes"],
-    queryFn: fetchObservatoryNodes,
+    queryKey: ["nsApiNodes"],
+    queryFn: fetchNSApiNodes,
     staleTime: 10 * 60 * 1000, // 10 minutes
     refetchOnWindowFocus: false, // Prevents unnecessary refetching
     refetchOnReconnect: false,
     refetchOnMount: false,
   });
 
-  if (isEpochLoading || isLoading) {
+  if (isEpochLoading || isNSApiNodesLoading) {
     return (
       <ExplorerCard label="Node parameters" sx={{ height: "100%" }}>
         <Skeleton variant="text" height={50} />
@@ -54,10 +56,13 @@ export const NodeParametersCard = ({ paramId }: Props) => {
     );
   }
 
-  if (isEpochError || isError || !nymNodes || !epochRewardsData) {
+  if (isEpochError || isNSApiNodesError || !nsApiNodes || !epochRewardsData) {
     return (
       <ExplorerCard label="Node parameters" sx={{ height: "100%" }}>
-        <Typography variant="h3" sx={{ color: "pine.950" }}>
+        <Typography
+          variant="h5"
+          sx={{ color: isDarkMode ? "base.white" : "pine.950" }}
+        >
           Failed to load node data.
         </Typography>
       </ExplorerCard>
@@ -66,9 +71,13 @@ export const NodeParametersCard = ({ paramId }: Props) => {
   // get node info based on wether it's dentity_key or node_id
 
   if (paramId.length > 10) {
-    nodeInfo = nymNodes.find((node) => node.identity_key === paramId);
+    nodeInfo = nsApiNodes.find(
+      (node: NS_NODE) => node.identity_key === paramId
+    );
   } else {
-    nodeInfo = nymNodes.find((node) => node.node_id === Number(paramId));
+    nodeInfo = nsApiNodes.find(
+      (node: NS_NODE) => node.node_id === Number(paramId)
+    );
   }
 
   if (!nodeInfo) return null;
@@ -77,22 +86,25 @@ export const NodeParametersCard = ({ paramId }: Props) => {
   const totalStakeFormatted = `${totalStake} NYM`;
 
   // Extract reward details
-  const rewardDetails: RewardingDetails = nodeInfo.rewarding_details;
 
-  const profitMarginPercent =
-    Number(rewardDetails.cost_params.profit_margin_percent) * 100;
+  const profitMarginPercent = nodeInfo.rewarding_details
+    ? Number(nodeInfo.rewarding_details.cost_params.profit_margin_percent) * 100
+    : 0;
   const profitMarginPercentFormated = `${profitMarginPercent}%`;
 
-  const operatingCosts =
-    Number(rewardDetails.cost_params.interval_operating_cost.amount) /
-    1_000_000;
+  const operatingCosts = nodeInfo.rewarding_details
+    ? Number(
+        nodeInfo.rewarding_details.cost_params.interval_operating_cost.amount
+      ) / 1_000_000
+    : 0;
   const operatingCostsFormated = `${operatingCosts.toString()} NYM`;
 
   const getNodeSaturationPoint = (
-    totalStake: number,
-    stakeSaturationPoint: string,
+    nodeTotalStake: string,
+    stakeSaturationPoint: string
   ): string => {
     const saturation = Number.parseFloat(stakeSaturationPoint);
+    const totalStake = Number.parseFloat(nodeTotalStake);
 
     if (Number.isNaN(saturation) || saturation <= 0) {
       throw new Error("Invalid stake saturation point provided");
@@ -105,7 +117,7 @@ export const NodeParametersCard = ({ paramId }: Props) => {
 
   const nodeSaturationPoint = getNodeSaturationPoint(
     nodeInfo.total_stake,
-    epochRewardsData.interval.stake_saturation_point,
+    epochRewardsData.interval.stake_saturation_point
   );
 
   return (

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

@@ -1,6 +1,6 @@
 "use client";
 
-import type { IObservatoryNode } from "@/app/api/types";
+import type { NS_NODE } from "@/app/api/types";
 import { useChain } from "@cosmos-kit/react";
 import {
   Box,
@@ -14,7 +14,7 @@ import { useQuery } from "@tanstack/react-query";
 import DOMPurify from "isomorphic-dompurify";
 import { useCallback, useState } from "react";
 import { RandomAvatar } from "react-random-avatars";
-import { fetchObservatoryNodes } from "../../app/api";
+import { fetchNSApiNodes } from "../../app/api";
 import { COSMOS_KIT_USE_CHAIN } from "../../config";
 import { useNymClient } from "../../hooks/useNymClient";
 import ExplorerCard from "../cards/ExplorerCard";
@@ -31,7 +31,7 @@ type Props = {
 };
 
 export const NodeProfileCard = ({ paramId }: Props) => {
-  let nodeInfo: IObservatoryNode | undefined;
+  let nodeInfo: NS_NODE | undefined;
   const theme = useTheme();
 
   const { isWalletConnected } = useChain(COSMOS_KIT_USE_CHAIN);
@@ -47,12 +47,12 @@ export const NodeProfileCard = ({ paramId }: Props) => {
 
   // Fetch node info
   const {
-    data: nymNodes,
-    isLoading: isLoadingNymNodes,
-    isError,
+    data: nsApiNodes = [],
+    isLoading: isNSApiNodesLoading,
+    isError: isNSApiNodesError,
   } = useQuery({
-    queryKey: ["nymNodes"],
-    queryFn: fetchObservatoryNodes,
+    queryKey: ["nsApiNodes"],
+    queryFn: fetchNSApiNodes,
     staleTime: 10 * 60 * 1000, // 10 minutes
     refetchOnWindowFocus: false, // Prevents unnecessary refetching
     refetchOnReconnect: false,
@@ -62,9 +62,13 @@ export const NodeProfileCard = ({ paramId }: Props) => {
   // get node info based on wether it's dentity_key or node_id
 
   if (paramId.length > 10) {
-    nodeInfo = nymNodes?.find((node) => node.identity_key === paramId);
+    nodeInfo = nsApiNodes.find(
+      (node: NS_NODE) => node.identity_key === paramId
+    );
   } else {
-    nodeInfo = nymNodes?.find((node) => node.node_id === Number(paramId));
+    nodeInfo = nsApiNodes.find(
+      (node: NS_NODE) => node.node_id === Number(paramId)
+    );
   }
 
   const handleOnSelectStake = useCallback(() => {
@@ -96,7 +100,7 @@ export const NodeProfileCard = ({ paramId }: Props) => {
     }
   }, [isWalletConnected, nodeInfo]);
 
-  if (isLoadingNymNodes) {
+  if (isNSApiNodesLoading) {
     return (
       <ExplorerCard label="Nym Node" sx={{ height: "100%" }}>
         <Skeleton variant="rectangular" height={80} width={80} />
@@ -105,11 +109,11 @@ export const NodeProfileCard = ({ paramId }: Props) => {
       </ExplorerCard>
     );
   }
-  if (isError || !nymNodes) {
+  if (isNSApiNodesError || !nsApiNodes) {
     return (
       <ExplorerCard label="Nym Node" sx={{ height: "100%" }}>
         <Typography
-          variant="h3"
+          variant="h5"
           sx={{
             color: theme.palette.mode === "dark" ? "base.white" : "pine.950",
           }}
@@ -137,7 +141,7 @@ export const NodeProfileCard = ({ paramId }: Props) => {
         { nodeId },
         fee,
         "Delegation from Nym Explorer V2",
-        uNymFunds,
+        uNymFunds
       );
       setSelectedNodeForStaking(undefined);
       setInfoModalProps({
@@ -164,12 +168,13 @@ export const NodeProfileCard = ({ paramId }: Props) => {
 
   if (!nodeInfo) return null;
 
-  const cleanMoniker = DOMPurify.sanitize(
-    nodeInfo?.self_description.moniker,
-  ).replace(/&amp;/g, "&");
+  const cleanMoniker = DOMPurify.sanitize(nodeInfo.description.moniker).replace(
+    /&amp;/g,
+    "&"
+  );
 
   const cleanDescription = DOMPurify.sanitize(
-    nodeInfo?.self_description.details,
+    nodeInfo.description.details
   ).replace(/&amp;/g, "&");
 
   // get full country name
@@ -197,7 +202,7 @@ export const NodeProfileCard = ({ paramId }: Props) => {
         >
           {cleanMoniker || "Moniker"}
         </Typography>
-        {nodeInfo.description.auxiliary_details.location && (
+        {nodeInfo.geoip?.country && (
           <Box display={"flex"} gap={1}>
             <Typography
               variant="h6"
@@ -210,10 +215,8 @@ export const NodeProfileCard = ({ paramId }: Props) => {
 
             <Box>
               <CountryFlag
-                countryCode={nodeInfo.description.auxiliary_details.location}
-                countryName={countryName(
-                  nodeInfo.description.auxiliary_details.location,
-                )}
+                countryCode={nodeInfo.geoip?.country || ""}
+                countryName={countryName(nodeInfo.geoip?.country || "")}
               />
             </Box>
           </Box>

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

@@ -1,16 +1,16 @@
 "use client";
 
-import { Chip, Skeleton, Stack, Typography } from "@mui/material";
+import { Chip, Skeleton, Stack, Typography, useTheme } from "@mui/material";
 import { useQuery } from "@tanstack/react-query";
 import {
   fetchEpochRewards,
   fetchGatewayStatus,
-  fetchObservatoryNodes,
+  fetchNSApiNodes,
 } from "../../app/api";
 import type {
-  IObservatoryNode,
   LastProbeResult,
   NodeDescription,
+  NS_NODE,
 } from "../../app/api/types";
 import ExplorerCard from "../cards/ExplorerCard";
 import ExplorerListItem from "../list/ListItem";
@@ -32,7 +32,7 @@ const roleMapping: Record<DeclaredRoleKey, RoleString> = {
 };
 
 const getNodeRoles = (
-  declaredRoles: NodeDescriptionNotNull["declared_role"],
+  declaredRoles: NodeDescriptionNotNull["declared_role"]
 ): RoleString[] => {
   return Object.entries(declaredRoles)
     .filter(([, isActive]) => isActive)
@@ -81,7 +81,7 @@ function calculateConfigScoreStars(probeResult: LastProbeResult): number {
 
   if (as_entry) {
     const entryScore = [as_entry.can_connect, as_entry.can_route].filter(
-      Boolean,
+      Boolean
     ).length;
 
     return entryScore === 2 ? 4 : entryScore === 1 ? 2 : 1;
@@ -148,21 +148,23 @@ function calculateWireguardPerformance(probeResult: LastProbeResult): number {
 }
 
 export const NodeRoleCard = ({ paramId }: Props) => {
-  let nodeInfo: IObservatoryNode | undefined;
-
+  let nodeInfo: NS_NODE | undefined;
+  const theme = useTheme();
+  const isDarkMode = theme.palette.mode === "dark";
   // Fetch node info
   const {
-    data: nymNodes,
-    isLoading,
-    isError,
+    data: nsApiNodes = [],
+    isLoading: isNSApiNodesLoading,
+    isError: isNSApiNodesError,
   } = useQuery({
-    queryKey: ["nymNodes"],
-    queryFn: fetchObservatoryNodes,
+    queryKey: ["nsApiNodes"],
+    queryFn: fetchNSApiNodes,
     staleTime: 10 * 60 * 1000, // 10 minutes
     refetchOnWindowFocus: false, // Prevents unnecessary refetching
     refetchOnReconnect: false,
     refetchOnMount: false,
   });
+
   const {
     data: epochRewardsData,
     isLoading: isEpochLoading,
@@ -177,19 +179,19 @@ export const NodeRoleCard = ({ paramId }: Props) => {
   });
 
   if (paramId.length > 10) {
-    nodeInfo = nymNodes?.find((node) => node.identity_key === paramId);
+    nodeInfo = nsApiNodes.find((node) => node.identity_key === paramId);
   } else {
-    nodeInfo = nymNodes?.find((node) => node.node_id === Number(paramId));
+    nodeInfo = nsApiNodes.find((node) => node.node_id === Number(paramId));
   } // Extract node roles once `nodeInfo` is available
-  const nodeRoles = nodeInfo
-    ? getNodeRoles(nodeInfo.description.declared_role)
+
+  const nodeRoles = nodeInfo?.self_description
+    ? getNodeRoles(nodeInfo.self_description.declared_role)
     : [];
 
   // Define whether to fetch gateway status
   const shouldFetchGatewayStatus = nodeRoles.some((role) =>
-    ["Entry Node", "Exit IPR Node", "Exit NR Node"].includes(role),
+    ["Entry Node", "Exit IPR Node", "Exit NR Node"].includes(role)
   );
-
   // Fetch gateway status only if `shouldFetchGatewayStatus` is true
   const { data: gatewayStatus } = useQuery({
     queryKey: ["gatewayStatus", nodeInfo?.identity_key],
@@ -200,7 +202,7 @@ export const NodeRoleCard = ({ paramId }: Props) => {
     refetchOnReconnect: false,
   });
 
-  if (isLoading || isEpochLoading) {
+  if (isNSApiNodesLoading || isEpochLoading) {
     return (
       <ExplorerCard label="Node role & performance">
         <Skeleton variant="text" height={70} />
@@ -210,15 +212,20 @@ export const NodeRoleCard = ({ paramId }: Props) => {
     );
   }
 
-  if (isError || !nymNodes || !epochRewardsData || isEpochError) {
+  if (isNSApiNodesError || !nsApiNodes || !epochRewardsData || isEpochError) {
     return (
       <ExplorerCard label="Node role & performance">
-        <Typography variant="h3" sx={{ color: "pine.950" }}>
+        <Typography
+          variant="h5"
+          sx={{ color: isDarkMode ? "base.white" : "pine.950" }}
+        >
           Failed to load node data.
         </Typography>
       </ExplorerCard>
     );
   }
+  if (!nodeInfo) return null;
+
 
   const NodeRoles = nodeRoles.map((role) => (
     <Stack key={role} direction="row" gap={1}>
@@ -226,8 +233,6 @@ export const NodeRoleCard = ({ paramId }: Props) => {
     </Stack>
   ));
 
-  if (!nodeInfo) return null;
-
   const qualityOfServiceStars = nodeInfo?.uptime
     ? calculateQualityOfServiceStars(nodeInfo.uptime)
     : gatewayStatus
@@ -247,9 +252,10 @@ export const NodeRoleCard = ({ paramId }: Props) => {
 
   // Function to calculate active set probability
   const getActiveSetProbability = (
-    totalStake: number,
-    stakeSaturationPoint: string,
+    nodeTotalStake: string,
+    stakeSaturationPoint: string
   ): string => {
+    const totalStake = Number.parseFloat(nodeTotalStake);
     const saturation = Number.parseFloat(stakeSaturationPoint);
 
     if (Number.isNaN(saturation) || saturation <= 0) {
@@ -268,7 +274,7 @@ export const NodeRoleCard = ({ paramId }: Props) => {
   };
   const activeSetProb = getActiveSetProbability(
     nodeInfo.total_stake,
-    epochRewardsData.interval.stake_saturation_point,
+    epochRewardsData.interval.stake_saturation_point
   );
 
   return (

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

@@ -1,5 +1,6 @@
 "use client";
-import type { IObservatoryNode } from "@/app/api/types";
+import type { NS_NODE } from "@/app/api/types";
+import { NYM_ACCOUNT_ADDRESS } from "@/app/api/urls";
 import { Search } from "@mui/icons-material";
 import {
   Autocomplete,
@@ -12,22 +13,22 @@ import {
 import { useQuery } from "@tanstack/react-query";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import { fetchObservatoryNodes } from "../../app/api";
-import { NYM_ACCOUNT_ADDRESS } from "@/app/api/urls";
+import { fetchNSApiNodes } from "../../app/api";
 
 const NodeAndAddressSearch = () => {
   const router = useRouter();
   const [inputValue, setInputValue] = useState("");
   const [errorText, setErrorText] = useState("");
   const [isLoading, setIsLoading] = useState(false);
-  const [searchOptions, setSearchOptions] = useState<IObservatoryNode[]>([]);
+  const [searchOptions, setSearchOptions] = useState<NS_NODE[]>([]);
 
   // Use React Query to fetch nodes
-  const { data: nymNodes = [], isLoading: isLoadingNodes } = useQuery({
-    queryKey: ["nymNodes"],
-    queryFn: fetchObservatoryNodes,
+
+  const { data: nsApiNodes = [], isLoading: isNSApiNodesLoading } = useQuery({
+    queryKey: ["nsApiNodes"],
+    queryFn: fetchNSApiNodes,
     staleTime: 10 * 60 * 1000, // 10 minutes
-    refetchOnWindowFocus: false,
+    refetchOnWindowFocus: false, // Prevents unnecessary refetching
     refetchOnReconnect: false,
     refetchOnMount: false,
   });
@@ -66,9 +67,9 @@ const NodeAndAddressSearch = () => {
         }
       } else {
         // Check if it's a node identity key
-        if (nymNodes) {
-          const matchingNode = nymNodes.find(
-            (node) => node.identity_key === inputValue
+        if (nsApiNodes) {
+          const matchingNode = nsApiNodes.find(
+            (node: NS_NODE) => node.identity_key === inputValue
           );
 
           if (matchingNode) {
@@ -104,10 +105,8 @@ const NodeAndAddressSearch = () => {
 
     // Filter nodes by moniker if input is not empty
     if (value.trim() !== "") {
-      const filteredNodes = nymNodes.filter((node) =>
-        node.self_description?.moniker
-          ?.toLowerCase()
-          .includes(value.toLowerCase())
+      const filteredNodes = nsApiNodes.filter((node: NS_NODE) =>
+        node.description.moniker?.toLowerCase().includes(value.toLowerCase())
       );
       setSearchOptions(filteredNodes);
     } else {
@@ -118,7 +117,7 @@ const NodeAndAddressSearch = () => {
   // Handle node selection from dropdown
   const handleNodeSelect = (
     event: React.SyntheticEvent,
-    value: string | IObservatoryNode | null
+    value: string | NS_NODE | null
   ) => {
     if (value && typeof value !== "string") {
       setIsLoading(true); // Show loading spinner
@@ -132,9 +131,9 @@ const NodeAndAddressSearch = () => {
         <Autocomplete
           freeSolo
           options={searchOptions}
-          getOptionLabel={(option: string | IObservatoryNode) => {
+          getOptionLabel={(option: string | NS_NODE) => {
             if (typeof option === "string") return option;
-            return option.self_description?.moniker || "";
+            return option.description.moniker || "";
           }}
           isOptionEqualToValue={(option, value) => {
             if (typeof option === "string" || typeof value === "string")
@@ -146,10 +145,10 @@ const NodeAndAddressSearch = () => {
             return (
               <li
                 {...props}
-                key={`${option.node_id}-${option.self_description?.moniker || ""}`}
+                key={`${option.node_id}-${option.description.moniker || ""}`}
                 style={{ fontSize: "0.875rem" }}
               >
-                {option.self_description?.moniker || "Unnamed Node"}
+                {option.description.moniker || "Unnamed Node"}
               </li>
             );
           }}
@@ -182,7 +181,7 @@ const NodeAndAddressSearch = () => {
             />
           )}
           onChange={handleNodeSelect}
-          loading={isLoadingNodes}
+          loading={isNSApiNodesLoading}
           loadingText="Loading nodes..."
           noOptionsText="No nodes found"
           slotProps={{

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

@@ -38,6 +38,7 @@ import StakeModal from "./StakeModal";
 import type { MappedNymNode, MappedNymNodes } from "./StakeTableWithAction";
 import { fee } from "./schemas";
 
+
 type DelegationWithNodeDetails = {
   node: MappedNymNode | undefined;
   delegation: Delegation;

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

@@ -3,15 +3,15 @@
 import { Card, CardContent, Skeleton, Stack, Typography } from "@mui/material";
 import { useQuery } from "@tanstack/react-query";
 import DOMPurify from "isomorphic-dompurify";
-import { fetchEpochRewards, fetchObservatoryNodes } from "../../app/api";
-import type { ExplorerData, IObservatoryNode } from "../../app/api/types";
+import { fetchEpochRewards, fetchNSApiNodes } from "../../app/api";
+import type { ExplorerData, NS_NODE } from "../../app/api/types";
 import { countryName } from "../../utils/countryName";
 import StakeTable from "./StakeTable";
 
 // Utility function to calculate node saturation point
 function getNodeSaturationPoint(
   totalStake: number,
-  stakeSaturationPoint: string,
+  stakeSaturationPoint: string
 ): number {
   const saturation = Number.parseFloat(stakeSaturationPoint);
 
@@ -24,35 +24,46 @@ function getNodeSaturationPoint(
 }
 
 // Map nodes with rewards data
-const mappedNymNodes = (
-  nodes: IObservatoryNode[],
-  epochRewardsData: ExplorerData["currentEpochRewardsData"],
+const mappedNSApiNodes = (
+  nodes: NS_NODE[],
+  epochRewardsData: ExplorerData["currentEpochRewardsData"]
 ) =>
-  nodes.map((node) => {
-    const nodeSaturationPoint = getNodeSaturationPoint(
-      node.total_stake,
-      epochRewardsData.interval.stake_saturation_point,
-    );
+  nodes
+    .map((node) => {
+      const nodeSaturationPoint = getNodeSaturationPoint(
+        +node.total_stake,
+        epochRewardsData.interval.stake_saturation_point
+      );
 
-    const cleanMoniker = DOMPurify.sanitize(
-      node.self_description.moniker,
-    ).replace(/&/g, "&");
+      const cleanMoniker = DOMPurify.sanitize(node.description.moniker).replace(
+        /&/g,
+        "&"
+      );
 
-    return {
-      name: cleanMoniker,
-      nodeId: node.node_id,
-      identity_key: node.identity_key,
-      countryCode: node.description.auxiliary_details.location || null,
-      countryName:
-        countryName(node.description.auxiliary_details.location) || null,
-      profitMarginPercentage:
-        +node.rewarding_details.cost_params.profit_margin_percent * 100,
-      owner: node.bonding_address,
-      stakeSaturation: +nodeSaturationPoint || 0,
-    };
-  });
+      return {
+        name: cleanMoniker,
+        nodeId: node.node_id,
+        identity_key: node.identity_key,
+        countryCode: node.geoip?.country || null,
+        countryName: countryName(node.geoip?.country || null) || null,
+        profitMarginPercentage: node.rewarding_details
+          ? +node.rewarding_details.cost_params.profit_margin_percent * 100
+          : 0,
+        owner: node.bonding_address,
+        stakeSaturation: nodeSaturationPoint,
+      };
+    })
+    .sort((a, b) => {
+      // Handle null country names by putting them at the end
+      if (!a.countryName && !b.countryName) return 0;
+      if (!a.countryName) return 1;
+      if (!b.countryName) return -1;
 
-export type MappedNymNodes = ReturnType<typeof mappedNymNodes>;
+      // Sort alphabetically by country name
+      return a.countryName.localeCompare(b.countryName);
+    });
+
+export type MappedNymNodes = ReturnType<typeof mappedNSApiNodes>;
 export type MappedNymNode = MappedNymNodes[0];
 
 const StakeTableWithAction = () => {
@@ -72,12 +83,12 @@ const StakeTableWithAction = () => {
 
   // Use React Query to fetch Nym nodes
   const {
-    data: nymNodes = [],
-    isLoading: isNodesLoading,
-    isError: isNodesError,
+    data: nsApiNodes = [],
+    isLoading: isNSApiNodesLoading,
+    isError: isNSApiNodesError,
   } = useQuery({
-    queryKey: ["nymNodes"],
-    queryFn: fetchObservatoryNodes,
+    queryKey: ["nsApiNodes"],
+    queryFn: fetchNSApiNodes,
     staleTime: 10 * 60 * 1000, // 10 minutes
     refetchOnWindowFocus: false, // Prevents unnecessary refetching
     refetchOnReconnect: false,
@@ -85,7 +96,7 @@ const StakeTableWithAction = () => {
   });
 
   // Handle loading state
-  if (isEpochLoading || isNodesLoading) {
+  if (isEpochLoading || isNSApiNodesLoading) {
     return (
       <Card sx={{ height: "100%", mt: 5 }}>
         <CardContent>
@@ -99,7 +110,7 @@ const StakeTableWithAction = () => {
   }
 
   // Handle error state
-  if (isEpochError || isNodesError) {
+  if (isEpochError || isNSApiNodesError) {
     return (
       <Stack direction="row" spacing={1}>
         <Typography variant="h5" sx={{ color: "pine.600", letterSpacing: 0.7 }}>
@@ -115,9 +126,9 @@ const StakeTableWithAction = () => {
     return null;
   }
 
-  const data = mappedNymNodes(nymNodes || [], epochRewardsData);
+  const nsApiNodesData = mappedNSApiNodes(nsApiNodes || [], epochRewardsData);
 
-  return <StakeTable nodes={data} />;
+  return <StakeTable nodes={nsApiNodesData} />;
 };
 
 export default StakeTableWithAction;

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

@@ -8,7 +8,6 @@ import type { Delegation } from "@nymproject/contract-clients/Mixnet.types";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useCallback, useState } from "react";
 import { fetchTotalStakerRewards } from "../../app/api";
-import type { NodeRewardDetails } from "../../app/api/types";
 import { COSMOS_KIT_USE_CHAIN, NYM_MIXNET_CONTRACT } from "../../config";
 import { useNymClient } from "../../hooks/useNymClient";
 import Loading from "../loading";
@@ -19,7 +18,7 @@ import RedeemRewardsModal from "../redeemRewards/RedeemRewardsModal";
 const fetchDelegations = async (
   address: string,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  nymClient: any,
+  nymClient: any
 ): Promise<Delegation[]> => {
   const data = await nymClient.getDelegatorDelegations({ delegator: address });
   return data.delegations;
@@ -84,10 +83,10 @@ const SubHeaderRowActions = () => {
       const client = await SigningCosmWasmClient.connectWithSigner(
         "https://rpc.nymtech.net/",
         signer,
-        { gasPrice },
+        { gasPrice }
       );
 
-      const messages = delegations.map((delegation: NodeRewardDetails) => ({
+      const messages = delegations.map((delegation: Delegation) => ({
         contractAddress: NYM_MIXNET_CONTRACT,
         funds: [],
         msg: {
@@ -101,7 +100,7 @@ const SubHeaderRowActions = () => {
         address,
         messages,
         "auto",
-        "Redeeming all rewards",
+        "Redeeming all rewards"
       );
       // Success state
       setIsLoading(false);

explorer-v2/src/components/toggleButton/NodeFilterButtonGroup.tsx

@@ -0,0 +1,90 @@
+"use client";
+import { Button, ButtonGroup, Stack } from "@mui/material";
+
+type Option = {
+  label: string;
+  isSelected: boolean;
+  value: "all" | "mixnodes" | "gateways" | "recommended";
+};
+
+type Options = [Option, Option, Option, Option];
+
+const NodeFilterButtonGroup = ({
+  size = "small",
+  options,
+  onPage,
+  onFilterChange,
+}: {
+  size?: "small" | "medium" | "large";
+  options: Options;
+  onPage: string;
+  onFilterChange: (
+    filter: "all" | "mixnodes" | "gateways" | "recommended"
+  ) => void;
+}) => {
+  const handleClick = (
+    value: "all" | "mixnodes" | "gateways" | "recommended"
+  ) => {
+    if (onPage === value) return;
+    onFilterChange(value);
+  };
+
+  const getMobileButtonStyles = (isSelected: boolean) => ({
+    color: isSelected ? "primary.contrastText" : "text.primary",
+    "&:hover": {
+      bgcolor: isSelected ? "primary.main" : "",
+    },
+    bgcolor: isSelected ? "primary.main" : "transparent",
+    width: "100%",
+    py: 1.5,
+    px: 2,
+  });
+
+  const getDesktopButtonStyles = (isSelected: boolean) => ({
+    color: isSelected ? "primary.contrastText" : "text.primary",
+    "&:hover": {
+      bgcolor: isSelected ? "primary.main" : "",
+    },
+    bgcolor: isSelected ? "primary.main" : "transparent",
+  });
+
+  return (
+    <>
+      {/* Mobile view - Stack */}
+      <Stack
+        spacing={1.5}
+        sx={{
+          display: { xs: "flex", sm: "none" },
+          width: "100%",
+        }}
+      >
+        {options.map((option) => (
+          <Button
+            key={option.label}
+            onClick={() => handleClick(option.value)}
+            sx={getMobileButtonStyles(option.isSelected)}
+            variant="outlined"
+          >
+            {option.label}
+          </Button>
+        ))}
+      </Stack>
+
+      {/* Desktop view - ButtonGroup */}
+      <ButtonGroup size={size} sx={{ display: { xs: "none", sm: "flex" } }}>
+        {options.map((option) => (
+          <Button
+            key={option.label}
+            onClick={() => handleClick(option.value)}
+            sx={getDesktopButtonStyles(option.isSelected)}
+            variant="outlined"
+          >
+            {option.label}
+          </Button>
+        ))}
+      </ButtonGroup>
+    </>
+  );
+};
+
+export default NodeFilterButtonGroup;

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

@@ -0,0 +1,406 @@
+"use client";
+
+import { scaleLinear } from "d3-scale";
+import * as React from "react";
+import Image from "next/image";
+import {
+  ComposableMap,
+  Geographies,
+  Geography,
+  ZoomableGroup,
+} from "react-simple-maps";
+import { Tooltip } from "react-tooltip";
+import { fetchWorldMapCountries } from "@/app/api";
+import AddIcon from "@mui/icons-material/Add";
+import RemoveIcon from "@mui/icons-material/Remove";
+import RestartAltIcon from "@mui/icons-material/RestartAlt";
+import { IconButton, Skeleton, Typography, Box } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+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";
+
+const mapPlaceholderDark = "/explorer/map-placeholder-dark.png";
+const mapPlaceholderLight = "/explorer/map-placeholder-light.png";
+
+export const WorldMap = (): JSX.Element => {
+  const theme = useTheme();
+  const isDarkMode = theme.palette.mode === "dark";
+  const [position, setPosition] = React.useState<{
+    coordinates: [number, number];
+    zoom: number;
+  }>({ coordinates: [0, 0], zoom: 1 });
+
+  const {
+    data: {
+      countries = [],
+      totalCountries = 0,
+      uniqueLocations = 0,
+      totalServers = 0,
+    } = {
+      countries: [],
+      totalCountries: 0,
+      uniqueLocations: 0,
+      totalServers: 0,
+    },
+    isLoading: isLoadingCountries,
+    isError: isCountriesError,
+  } = useQuery({
+    queryKey: ["nymNodesCountries"],
+    queryFn: fetchWorldMapCountries,
+    staleTime: 60 * 60 * 1000, // 1 hour
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+  });
+
+  const [tooltipContent, setTooltipContent] = React.useState<string>("");
+
+  React.useEffect(() => {
+    const handleMouseLeave = () => setTooltipContent("");
+    return () => {
+      handleMouseLeave();
+    };
+  }, []);
+
+  const colorScale = React.useMemo(() => {
+    if (countries) {
+      const heighestNumberOfNodes = Math.max(
+        ...Object.values(countries).map((country) => country.nodes)
+      );
+      return scaleLinear<string, string>()
+        .domain([
+          0,
+          1,
+          heighestNumberOfNodes / 4,
+          heighestNumberOfNodes / 2,
+          heighestNumberOfNodes,
+        ])
+        .range(
+          isDarkMode
+            ? [
+                theme.palette.pine[950],
+                "#0F5A2E", // Dark green
+                "#147A3D", // Medium green
+                "#1A994C", // Light green
+                theme.palette.accent.main,
+              ]
+            : [
+                theme.palette.pine[300],
+                "#0F5A2E", // Dark green
+                "#147A3D", // Medium green
+                "#1A994C", // Light green
+                theme.palette.accent.main,
+              ]
+        )
+        .unknown(isDarkMode ? theme.palette.pine[950] : theme.palette.pine[25]);
+    }
+    return () =>
+      isDarkMode ? theme.palette.pine[950] : theme.palette.pine[25];
+  }, [countries, theme.palette.pine, theme.palette.accent, isDarkMode]);
+
+  if (isLoadingCountries) {
+    return (
+      <ExplorerCard label="Nym server locations" sx={{ width: "100%" }}>
+        <div
+          style={{
+            position: "relative",
+            width: "100%",
+            aspectRatio: "16/7",
+          }}
+        >
+          <Image
+            src={isDarkMode ? mapPlaceholderDark : mapPlaceholderLight}
+            alt="World Map Placeholder"
+            fill
+            style={{ objectFit: "contain" }}
+            priority
+          />
+        </div>
+      </ExplorerCard>
+    );
+  }
+
+  if (isCountriesError) {
+    return (
+      <ExplorerCard label="Nym server locations" sx={{ width: "100%" }}>
+        <Typography
+          variant="h5"
+          sx={{
+            color: isDarkMode ? "base.white" : "pine.950",
+            letterSpacing: 0.7,
+          }}
+        >
+          Failed to load data
+        </Typography>
+        <Skeleton variant="text" height={500} />
+      </ExplorerCard>
+    );
+  }
+
+  return (
+    <>
+      <ExplorerCard
+        label="Nym server locations"
+        sx={{
+          width: "100%",
+          position: "relative",
+          p: { xs: 2, sm: 3 },
+          "& > .MuiCardContent-root": {
+            height: {
+              xs: "200px",
+              sm: "auto",
+            },
+            aspectRatio: {
+              xs: "unset",
+              sm: "16/7",
+            },
+          },
+        }}
+      >
+        <Box
+          sx={{
+            position: "relative",
+            width: "100%",
+            height: "100%",
+            overflow: "hidden",
+            margin: "0 auto",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          <ComposableMap
+            data-tip=""
+            style={{
+              backgroundColor: isDarkMode ? "#000000" : theme.palette.pine[25],
+              width: "100%",
+              height: "100%",
+            }}
+            viewBox="0 0 800 400"
+            projection="geoMercator"
+            projectionConfig={{
+              scale: 130,
+            }}
+          >
+            <ZoomableGroup
+              center={position.coordinates}
+              zoom={position.zoom}
+              minZoom={1}
+              maxZoom={8}
+              translateExtent={[
+                [-800, -400],
+                [800, 400],
+              ]}
+              onMoveEnd={({
+                coordinates,
+                zoom,
+              }: {
+                coordinates: [number, number];
+                zoom: number;
+              }) => {
+                setPosition({ coordinates, zoom });
+              }}
+              onClick={(e: React.MouseEvent) => {
+                e.preventDefault();
+                e.stopPropagation();
+              }}
+            >
+              <Geographies geography={MAP_TOPOJSON}>
+                {({ geographies }: { geographies: GeoJSON.Feature[] }) =>
+                  geographies.map((geo) => {
+                    const d = Array.isArray(countries)
+                      ? { nodes: 0 }
+                      : (countries as CountryDataResponse)[
+                          geo.properties?.ISO_A3 as string
+                        ] || { nodes: 0 };
+                    return (
+                      <Geography
+                        key={`${geo.properties?.ISO_A3 || ""}-${geo.id}-${
+                          geo.properties?.NAME_LONG || ""
+                        }`}
+                        geography={geo}
+                        fill={colorScale(d?.nodes || 0)}
+                        stroke={
+                          theme.palette.mode === "dark"
+                            ? theme.palette.pine[800]
+                            : theme.palette.pine[200]
+                        }
+                        strokeWidth={0.2}
+                        data-tooltip-id="map-tooltip"
+                        onMouseEnter={() => {
+                          const { NAME_LONG } = geo.properties as {
+                            NAME_LONG: string;
+                          };
+                          setTooltipContent(`${NAME_LONG} | ${d?.nodes || 0}`);
+                        }}
+                        onMouseLeave={() => {
+                          setTooltipContent("");
+                        }}
+                        style={{
+                          hover: countries
+                            ? {
+                                fill: theme.palette.accent.main,
+                                outline: "white",
+                                cursor: "pointer",
+                              }
+                            : undefined,
+                          default: {
+                            outline: "none",
+                          },
+                          pressed: {
+                            outline: "none",
+                          },
+                        }}
+                      />
+                    );
+                  })
+                }
+              </Geographies>
+            </ZoomableGroup>
+          </ComposableMap>
+
+          <div
+            style={{
+              position: "absolute",
+              top: 10,
+              left: 10,
+              zIndex: 1000,
+              display: "flex",
+              flexDirection: "column",
+              gap: "4px",
+              backgroundColor: isDarkMode
+                ? "rgba(0,0,0,0.5)"
+                : "rgba(255,255,255,0.5)",
+              padding: "4px",
+              borderRadius: "4px",
+            }}
+          >
+            <IconButton
+              size="small"
+              onClick={() =>
+                setPosition((prev) => ({
+                  ...prev,
+                  zoom: Math.min(prev.zoom + 0.5, 8),
+                }))
+              }
+              sx={{
+                backgroundColor: isDarkMode
+                  ? "rgba(255,255,255,0.1)"
+                  : "rgba(0,0,0,0.1)",
+                "&:hover": {
+                  backgroundColor: isDarkMode
+                    ? "rgba(255,255,255,0.2)"
+                    : "rgba(0,0,0,0.2)",
+                },
+              }}
+            >
+              <AddIcon fontSize="small" />
+            </IconButton>
+            <IconButton
+              size="small"
+              onClick={() =>
+                setPosition((prev) => ({
+                  ...prev,
+                  zoom: Math.max(prev.zoom - 0.5, 1),
+                }))
+              }
+              sx={{
+                backgroundColor: isDarkMode
+                  ? "rgba(255,255,255,0.1)"
+                  : "rgba(0,0,0,0.1)",
+                "&:hover": {
+                  backgroundColor: isDarkMode
+                    ? "rgba(255,255,255,0.2)"
+                    : "rgba(0,0,0,0.2)",
+                },
+              }}
+            >
+              <RemoveIcon fontSize="small" />
+            </IconButton>
+            <IconButton
+              size="small"
+              onClick={() => setPosition({ coordinates: [0, 0], zoom: 1 })}
+              sx={{
+                backgroundColor: isDarkMode
+                  ? "rgba(255,255,255,0.1)"
+                  : "rgba(0,0,0,0.1)",
+                "&:hover": {
+                  backgroundColor: isDarkMode
+                    ? "rgba(255,255,255,0.2)"
+                    : "rgba(0,0,0,0.2)",
+                },
+              }}
+            >
+              <RestartAltIcon fontSize="small" />
+            </IconButton>
+          </div>
+        </Box>
+        <Tooltip
+          id="map-tooltip"
+          content={tooltipContent}
+          float={true}
+          style={{
+            fontSize: "12px",
+            padding: "4px 8px",
+            backgroundColor:
+              theme.palette.mode === "dark"
+                ? theme.palette.pine[800]
+                : theme.palette.pine[200],
+            color:
+              theme.palette.mode === "dark"
+                ? theme.palette.base.white
+                : theme.palette.pine[950],
+            borderRadius: "4px",
+            zIndex: 9999,
+          }}
+        />
+      </ExplorerCard>
+      <Box
+        sx={{
+          display: "grid",
+          gridTemplateColumns: {
+            xs: "1fr",
+            sm: "repeat(3, 1fr)",
+          },
+          gap: 2,
+          mt: 2,
+        }}
+      >
+        <ExplorerCard label="Nym servers around the world">
+          <Typography
+            variant="h4"
+            sx={{
+              color: isDarkMode ? "base.white" : "pine.950",
+              letterSpacing: 0.7,
+            }}
+          >
+            {totalServers}
+          </Typography>
+        </ExplorerCard>
+        <ExplorerCard label="Countries with Nym servers">
+          <Typography
+            variant="h4"
+            sx={{
+              color: isDarkMode ? "base.white" : "pine.950",
+              letterSpacing: 0.7,
+            }}
+          >
+            {totalCountries}
+          </Typography>
+        </ExplorerCard>
+        <ExplorerCard label="Nym Server Locations">
+          <Typography
+            variant="h4"
+            sx={{
+              color: isDarkMode ? "base.white" : "pine.950",
+              letterSpacing: 0.7,
+            }}
+          >
+            {uniqueLocations}
+          </Typography>
+        </ExplorerCard>
+      </Box>
+    </>
+  );
+};

explorer-v2/src/data/Welcome-to-explorer-2.json

@@ -11,6 +11,7 @@
   "iconLight": "explorerCard",
   "iconDark": "explorerCardDark",
   "image": "/explorer/images/Network.webp",
+  "link": "https://nym.com/blog/welcome-to-explorer",
   "overview": {
     "content": [
       {

explorer-v2/src/data/staking-guide.json

@@ -11,6 +11,7 @@
   "iconLight": "stakeCard",
   "iconDark": "stakeCardDark",
   "image": "/explorer/images/stake-article.webp",
+  "link": "https://nym.com/blog/stake-Nym-tokens",
   "overview": {
     "content": [
       {

explorer-v2/src/typings/json.d.ts

@@ -0,0 +1,5 @@
+declare module "*.json" {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const content: any;
+  export default content;
+}

explorer-v2/src/typings/react-simple-maps.d.ts

@@ -0,0 +1 @@
+declare module "react-simple-maps";

explorer-v2/src/typings/react-tooltip.d.ts

@@ -0,0 +1 @@
+declare module 'react-tooltip';