diff --git a/client/src/features/visualizer-threejs/wrapper/KeyPanel.tsx b/client/src/features/visualizer-threejs/wrapper/KeyPanel.tsx index f772c7037..416743eb9 100644 --- a/client/src/features/visualizer-threejs/wrapper/KeyPanel.tsx +++ b/client/src/features/visualizer-threejs/wrapper/KeyPanel.tsx @@ -1,8 +1,8 @@ -import React from "react"; +import React, { memo } from "react"; import { BlockState } from "@iota/sdk-wasm-nova/web"; import "./KeyPanel.scss"; -import { StatsPanel } from "~features/visualizer-threejs/wrapper/StatsPanel"; +import StatsPanel from "~features/visualizer-threejs/wrapper/StatsPanel"; export const KeyPanel = ({ network }: { network: string }) => { const statuses: { @@ -63,3 +63,5 @@ export const KeyPanel = ({ network }: { network: string }) => { ); }; + +export default memo(KeyPanel); diff --git a/client/src/features/visualizer-threejs/wrapper/StatsPanel.tsx b/client/src/features/visualizer-threejs/wrapper/StatsPanel.tsx index 74c920e74..f6ac0bc01 100644 --- a/client/src/features/visualizer-threejs/wrapper/StatsPanel.tsx +++ b/client/src/features/visualizer-threejs/wrapper/StatsPanel.tsx @@ -1,5 +1,5 @@ -import React from "react"; -import { useNetworkStats } from "~helpers/stardust/hooks/useNetworkStats"; +import React, { memo } from "react"; +import { useNetworkStats } from "~helpers/nova/hooks/useNetworkStats"; export const StatsPanel = ({ network }: { network: string }) => { const [blocksPerSecond] = useNetworkStats(network); @@ -14,3 +14,5 @@ export const StatsPanel = ({ network }: { network: string }) => { ); }; + +export default memo(StatsPanel); diff --git a/client/src/features/visualizer-threejs/wrapper/Wrapper.tsx b/client/src/features/visualizer-threejs/wrapper/Wrapper.tsx index 48370e5b8..37d5d4f45 100644 --- a/client/src/features/visualizer-threejs/wrapper/Wrapper.tsx +++ b/client/src/features/visualizer-threejs/wrapper/Wrapper.tsx @@ -2,7 +2,7 @@ import React from "react"; import Modal from "~/app/components/Modal"; import { TSelectFeedItemNova, TSelectNode } from "~/app/types/visualizer.types"; import { INetwork } from "~/models/config/INetwork"; -import { KeyPanel } from "./KeyPanel"; +import KeyPanel from "./KeyPanel"; import mainHeader from "~assets/modals/visualizer/main-header.json"; import { SelectedFeedInfo } from "./SelectedFeedInfo"; diff --git a/client/src/helpers/nova/hooks/useNetworkStats.ts b/client/src/helpers/nova/hooks/useNetworkStats.ts new file mode 100644 index 000000000..a56a9a788 --- /dev/null +++ b/client/src/helpers/nova/hooks/useNetworkStats.ts @@ -0,0 +1,52 @@ +import { useEffect, useState } from "react"; +import { useIsMounted } from "~helpers/hooks/useIsMounted"; +import { ServiceFactory } from "~factories/serviceFactory"; +import { NOVA } from "~models/config/protocolVersion"; +import { NovaApiClient } from "~services/nova/novaApiClient"; + +/** + * Periodicaly refresh network stats. + * @param network The network in context. + * @returns The network stats. + */ +export function useNetworkStats(network: string): [string] { + const isMounted = useIsMounted(); + const [apiClient] = useState(ServiceFactory.get(`api-client-${NOVA}`)); + const [updateTimerId, setUpdateTimerId] = useState(null); + const [blocksPerSecond, setBlocksPerSecond] = useState("--"); + + useEffect(() => { + if (network) { + updateNetworkStats(); + } + + return () => { + if (updateTimerId) { + clearTimeout(updateTimerId); + setUpdateTimerId(null); + } + }; + }, [network]); + + const updateNetworkStats = () => { + if (isMounted && apiClient && network) { + apiClient + .stats({ + network, + includeHistory: true, + }) + .then((ips) => { + const itemsPerSecond = ips.itemsPerSecond ?? 0; + setBlocksPerSecond(itemsPerSecond >= 0 ? itemsPerSecond.toFixed(2) : "--"); + }) + .catch((err) => { + console.error(err); + }) + .finally(() => { + setUpdateTimerId(setTimeout(async () => updateNetworkStats(), 4000)); + }); + } + }; + + return [blocksPerSecond]; +}