diff --git a/explorer-nextjs/src/components/nodeTable/NodeTable.tsx b/explorer-nextjs/src/components/nodeTable/NodeTable.tsx index 00312657c3..4f49db60a6 100644 --- a/explorer-nextjs/src/components/nodeTable/NodeTable.tsx +++ b/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 {regionNames.of(countryCode)}; - }, []); const columns: MRT_ColumnDef[] = useMemo( () => [ @@ -227,7 +221,7 @@ const NodeTable = ({ nodes }: { nodes: MappedNymNodes }) => { ) : ( @@ -306,7 +300,7 @@ const NodeTable = ({ nodes }: { nodes: MappedNymNodes }) => { Cell: ({ row }) => , }, ], - [isWalletConnected, handleOnSelectStake, favorites, countryName], + [isWalletConnected, handleOnSelectStake, favorites], ); const table = useMaterialReactTable({ columns, diff --git a/explorer-nextjs/src/components/nodeTable/NodeTableWithAction.tsx b/explorer-nextjs/src/components/nodeTable/NodeTableWithAction.tsx index 903fd03f42..1786d17af8 100644 --- a/explorer-nextjs/src/components/nodeTable/NodeTableWithAction.tsx +++ b/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, diff --git a/explorer-nextjs/src/components/staking/StakeTable.tsx b/explorer-nextjs/src/components/staking/StakeTable.tsx index c54aaab67d..174ccde0a3 100644 --- a/explorer-nextjs/src/components/staking/StakeTable.tsx +++ b/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 {regionNames.of(countryCode)}; - }, []); - const columns: MRT_ColumnDef[] = useMemo( () => [ { @@ -417,7 +410,7 @@ const StakeTable = ({ nodes }: { nodes: MappedNymNodes }) => { ) : ( @@ -534,7 +527,7 @@ const StakeTable = ({ nodes }: { nodes: MappedNymNodes }) => { }, }, ], - [handleActionSelect, favorites, getTooltipTitle, countryName], + [handleActionSelect, favorites, getTooltipTitle], ); const table = useMaterialReactTable({ diff --git a/explorer-nextjs/src/components/staking/StakeTableWithAction.tsx b/explorer-nextjs/src/components/staking/StakeTableWithAction.tsx index 871577e1ae..bdf24ef5e6 100644 --- a/explorer-nextjs/src/components/staking/StakeTableWithAction.tsx +++ b/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, diff --git a/explorer-nextjs/src/utils/countryName.ts b/explorer-nextjs/src/utils/countryName.ts new file mode 100644 index 0000000000..5b6f9a0723 --- /dev/null +++ b/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; +};