fix sorting of country name in tables

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

@@ -159,12 +159,6 @@ const NodeTable = ({ nodes }: { nodes: MappedNymNodes }) => {
     },
     [isWalletConnected],
   );
-  // get full country name
-  const countryName = useCallback((countryCode: string) => {
-    const regionNames = new Intl.DisplayNames(["en"], { type: "region" });
-
-    return <span>{regionNames.of(countryCode)}</span>;
-  }, []);
 
   const columns: MRT_ColumnDef<MappedNymNode>[] = useMemo(
     () => [
@@ -227,7 +221,7 @@ const NodeTable = ({ nodes }: { nodes: MappedNymNodes }) => {
             <Box width="100%">
               <CountryFlag
                 countryCode={row.original.countryCode || ""}
-                countryName={countryName(row.original.countryName) || ""}
+                countryName={row.original.countryName || ""}
               />
             </Box>
           ) : (
@@ -306,7 +300,7 @@ const NodeTable = ({ nodes }: { nodes: MappedNymNodes }) => {
         Cell: ({ row }) => <Favorite address={row.original.owner} />,
       },
     ],
-    [isWalletConnected, handleOnSelectStake, favorites, countryName],
+    [isWalletConnected, handleOnSelectStake, favorites],
   );
   const table = useMaterialReactTable({
     columns,

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

@@ -5,6 +5,7 @@ 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 { countryName } from "../../utils/countryName";
 import NodeTable from "./NodeTable";
 
 // Utility function to calculate node saturation point
@@ -43,7 +44,8 @@ const mappedNymNodes = (
       nodeId: node.node_id,
       identity_key: node.identity_key,
       countryCode: node.description.auxiliary_details.location || null,
-      countryName: 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,

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

@@ -350,13 +350,6 @@ const StakeTable = ({ nodes }: { nodes: MappedNymNodes }) => {
     [], // Add dependencies if necessary
   );
 
-  // get full country name
-  const countryName = useCallback((countryCode: string) => {
-    const regionNames = new Intl.DisplayNames(["en"], { type: "region" });
-
-    return <span>{regionNames.of(countryCode)}</span>;
-  }, []);
-
   const columns: MRT_ColumnDef<DelegationWithNodeDetails>[] = useMemo(
     () => [
       {
@@ -417,7 +410,7 @@ const StakeTable = ({ nodes }: { nodes: MappedNymNodes }) => {
             <Box>
               <CountryFlag
                 countryCode={row.original.node.countryCode}
-                countryName={countryName(row.original.node?.countryName) || ""}
+                countryName={row.original.node?.countryName || ""}
               />
             </Box>
           ) : (
@@ -534,7 +527,7 @@ const StakeTable = ({ nodes }: { nodes: MappedNymNodes }) => {
         },
       },
     ],
-    [handleActionSelect, favorites, getTooltipTitle, countryName],
+    [handleActionSelect, favorites, getTooltipTitle],
   );
 
   const table = useMaterialReactTable({

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

@@ -5,6 +5,7 @@ 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 { countryName } from "../../utils/countryName";
 import StakeTable from "./StakeTable";
 
 // Utility function to calculate node saturation point
@@ -42,7 +43,8 @@ const mappedNymNodes = (
       nodeId: node.node_id,
       identity_key: node.identity_key,
       countryCode: node.description.auxiliary_details.location || null,
-      countryName: 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,

explorer-nextjs/src/utils/countryName.ts

@@ -0,0 +1,9 @@
+// get full country name
+export const countryName = (countryCode: string | null) => {
+  if (countryCode) {
+    const regionNames = new Intl.DisplayNames(["en"], { type: "region" });
+
+    return regionNames.of(countryCode);
+  }
+  return countryCode;
+};