()(
+ devtools(
+ persist(
+ (set) => ({
+ refreshTime: 15000,
+ setRefreshTime: (time: number) => set({ refreshTime: time }),
+ }),
+ {
+ name: 'refreshTime',
+ }
+ )
+ )
+);
\ No newline at end of file
diff --git a/frontend/src/types/api.ts b/frontend/src/types/api.ts
new file mode 100644
index 0000000..67f9f48
--- /dev/null
+++ b/frontend/src/types/api.ts
@@ -0,0 +1,72 @@
+// API Response Types
+export interface IMainStore {
+ totalConnections: number;
+ totalUploadTraffic: number;
+ totalDownloadTraffic: number;
+ txInMeempool: number;
+}
+
+export interface INodeStore {
+ client: string;
+ protocolVersion: number;
+ port: number;
+ services: string[];
+ uptime: number;
+}
+
+export interface IBlockchainStore {
+ chain: string;
+ size: number;
+ difficulty: number;
+ hashRate: number;
+ lastBlock: number;
+ lastBlockTime: number;
+}
+
+export interface INetwork {
+ available: boolean;
+ address: string | undefined;
+}
+
+export interface INetworkInfo {
+ uploadTarget: {
+ target: number;
+ targetReached: boolean;
+ };
+ networks: {
+ ipv4: INetwork;
+ ipv6: INetwork;
+ tor: INetwork;
+ i2p: INetwork;
+ };
+}
+
+export interface IPeer {
+ id: number;
+ address: string;
+ services: string[];
+ bytessent: number;
+ bytesrecv: number;
+ totalbytes: number;
+ conectionTime: number;
+ version: number;
+ subversion: string;
+ connection_type: string;
+ inbound: boolean;
+}
+
+// API Response types
+export interface HomeApiResponse {
+ main: IMainStore;
+ node: INodeStore;
+ blockchain: IBlockchainStore;
+ networkInfo: INetworkInfo;
+ peers: IPeer[];
+}
+
+export interface PeersApiResponse {
+ allTimeUploadTraffic: number;
+ allTimeDownloadTraffic: number;
+ banned: number;
+ peers: IPeer[];
+}
\ No newline at end of file
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
new file mode 100644
index 0000000..308f5ae
--- /dev/null
+++ b/frontend/src/types/index.ts
@@ -0,0 +1 @@
+export * from './api';
\ No newline at end of file
diff --git a/frontend/src/views/Home/Home.tsx b/frontend/src/views/Home/Home.tsx
index a5a75c6..03fc2f3 100644
--- a/frontend/src/views/Home/Home.tsx
+++ b/frontend/src/views/Home/Home.tsx
@@ -28,144 +28,149 @@ import {
import StatsCard from '@/components/StatsCard';
import TopClientsChart from './TopClientsChart';
import Card from '@/components/UI/Card';
-import useRefreshData from '@/hooks/useRefreshData';
-import { useHomeStore } from '@/store/homeStore';
+import { useQuery } from '@tanstack/react-query';
+import { bitcoinApi } from '@/store/api/bitcoinApi';
+import { useRefreshTimeStore } from '@/store/refreshTimeStore';
import Header from '@/components/Header';
const Home = () => {
- const homeStore = useHomeStore();
+ const refreshTimeStore = useRefreshTimeStore();
- useRefreshData([homeStore]);
+ const { data: homeData, isLoading } = useQuery({
+ queryKey: ['bitcoin', 'home'],
+ queryFn: bitcoinApi.home,
+ refetchInterval: refreshTimeStore.refreshTime > 0 ? refreshTimeStore.refreshTime : false,
+ });
return (
<>
,
title: "Total Connections",
- value: formatLargeNumber(homeStore.main.totalConnections)
+ value: formatLargeNumber(homeData?.main.totalConnections ?? 0)
},
{
icon: ,
title: "Upload Traffic",
- value: formatBytes(homeStore.main.totalUploadTraffic)
+ value: formatBytes(homeData?.main.totalUploadTraffic ?? 0)
},
{
icon: ,
title: "Download Traffic",
- value: formatBytes(homeStore.main.totalDownloadTraffic)
+ value: formatBytes(homeData?.main.totalDownloadTraffic ?? 0)
},
{
icon: ,
title: "TX in Mempool",
- value: formatLargeNumber(homeStore.main.txInMeempool)
+ value: formatLargeNumber(homeData?.main.txInMeempool ?? 0)
}
]}
/>
,
name: 'Client',
- value: homeStore.node.client
+ value: homeData?.node.client ?? ''
},
{
icon: ,
name: 'Protocol',
- value: homeStore.node.protocolVersion
+ value: homeData?.node.protocolVersion ?? 0
},
{
icon: ,
name: 'Port',
- value: homeStore.node.port
+ value: homeData?.node.port ?? 0
},
{
icon: ,
name: 'Uptime',
- value: formatSeconds(homeStore.node.uptime)
+ value: formatSeconds(homeData?.node.uptime ?? 0)
},
{
icon: ,
name: 'Services',
- value: homeStore.node.services
+ value: homeData?.node.services ?? []
}
]}
/>
,
name: 'Chain',
- value: capitalizeFirst(homeStore.blockchain.chain)
+ value: capitalizeFirst(homeData?.blockchain.chain ?? '')
},
{
icon: ,
name: 'Size',
- value: formatBytes(homeStore.blockchain.size)
+ value: formatBytes(homeData?.blockchain.size ?? 0)
},
{
icon: ,
name: 'Difficulty',
- value: compactNumber(homeStore.blockchain.difficulty)
+ value: compactNumber(homeData?.blockchain.difficulty ?? 0)
},
{
icon: ,
name: 'Hashrate',
- value: formatHashPerSecond(homeStore.blockchain.hashRate)
+ value: formatHashPerSecond(homeData?.blockchain.hashRate ?? 0)
},
{
icon: ,
name: 'Last Block',
- value: formatLargeNumber(homeStore.blockchain.lastBlock)
+ value: formatLargeNumber(homeData?.blockchain.lastBlock ?? 0)
},
{
icon: ,
name: 'Last Block Time',
- value: formatUnixToTimeAgo(homeStore.blockchain.lastBlockTime)
+ value: formatUnixToTimeAgo(homeData?.blockchain.lastBlockTime ?? 0)
}
]}
/>
0
+ value: (homeData?.networkInfo.uploadTarget.target ?? 0) > 0
},
{
icon: null,
name: 'Traffic Limited',
- value: homeStore.networkInfo.uploadTarget.targetReached
+ value: homeData?.networkInfo.uploadTarget.targetReached ?? false
}
]}
/>
-
+
diff --git a/frontend/src/views/Peers/Peers.tsx b/frontend/src/views/Peers/Peers.tsx
index 572ccf6..c44b931 100644
--- a/frontend/src/views/Peers/Peers.tsx
+++ b/frontend/src/views/Peers/Peers.tsx
@@ -2,12 +2,14 @@ import Card from "@/components/UI/Card";
import { TiArrowSortedDown, TiArrowSortedUp } from "react-icons/ti";
import { FaArrowRightLong, FaArrowLeftLong, FaArrowDown, FaArrowUp, FaBan, FaCircleNodes, FaCloudArrowDown, FaCloudArrowUp, FaIdCardClip } from "react-icons/fa6";
import { TbWorld } from "react-icons/tb";
-import { usePeerStore } from "@/store/peerStore";
import { formatBytes, formatLargeNumber, formatUnixTime } from "@/utils/utils";
-import { useEffect, useState } from "react";
+import { useState, useMemo } from "react";
import clsx from "clsx";
import React from "react";
-import useRefreshData from "@/hooks/useRefreshData";
+import { useQuery } from '@tanstack/react-query';
+import { bitcoinApi } from '@/store/api/bitcoinApi';
+import { useRefreshTimeStore } from '@/store/refreshTimeStore';
+import { IPeer } from '@/types';
import Header from "@/components/Header";
type TableField = {
@@ -20,10 +22,31 @@ function Peers() {
const [sortField, setSortField] = useState("");
const [order, setOrder] = useState("");
const [showDetails, setShowDetails] = useState(null);
+ const refreshTimeStore = useRefreshTimeStore();
- const peerStore = usePeerStore();
+ const { data: peersData, isLoading } = useQuery({
+ queryKey: ['bitcoin', 'peers'],
+ queryFn: bitcoinApi.peers,
+ refetchInterval: refreshTimeStore.refreshTime > 0 ? refreshTimeStore.refreshTime : false,
+ });
- useRefreshData([peerStore]);
+ // Sort peers locally
+ const sortedPeers = useMemo(() => {
+ if (!peersData?.peers || !sortField) return peersData?.peers ?? [];
+
+ return [...peersData.peers].sort((a, b) => {
+ const aVal = a[sortField as keyof IPeer];
+ const bVal = b[sortField as keyof IPeer];
+
+ if (typeof aVal === 'string' && typeof bVal === 'string') {
+ return order === 'asc' ? aVal.localeCompare(bVal) : bVal.localeCompare(aVal);
+ } else if (typeof aVal === 'number' && typeof bVal === 'number') {
+ return order === 'asc' ? aVal - bVal : bVal - aVal;
+ } else {
+ return order === 'asc' ? (aVal > bVal ? 1 : -1) : (aVal < bVal ? 1 : -1);
+ }
+ });
+ }, [peersData?.peers, sortField, order]);
const tableFields: TableField[] = [{
name: 'Id',
@@ -58,10 +81,6 @@ function Peers() {
//To get the show property on showOrHideValue function
const tableFieldsHashMap = new Map(tableFields.map((field) => [field.key, field]));
- useEffect(() => {
- peerStore.sortPeers(sortField, order);
- }, [peerStore.peers, sortField, order]);
-
function formatServices(services: string[]): React.ReactNode {
if (services.length === 0) {
@@ -132,27 +151,27 @@ function Peers() {
return (
<>
,
title: "Total Connections",
- value: formatLargeNumber(peerStore.peers.length)
+ value: formatLargeNumber(peersData?.peers.length ?? 0)
},
{
icon: ,
title: "All Time Upload Traffic",
- value: formatBytes(peerStore.allTimeUploadTraffic)
+ value: formatBytes(peersData?.allTimeUploadTraffic ?? 0)
},
{
icon: ,
title: "All Time Download Traffic",
- value: formatBytes(peerStore.allTimeDownloadTraffic)
+ value: formatBytes(peersData?.allTimeDownloadTraffic ?? 0)
},
{
icon: ,
title: "Banned Peers",
- value: formatLargeNumber(peerStore.banned)
+ value: formatLargeNumber(peersData?.banned ?? 0)
}
]}
/>
@@ -192,7 +211,7 @@ function Peers() {
- {peerStore.loading && (
+ {isLoading && (
Array.from({ length: 10 }).map((_, index) => (
|
@@ -201,7 +220,7 @@ function Peers() {
|
))
)}
- {!peerStore.loading && peerStore.peers.map((peer) => (
+ {!isLoading && sortedPeers.map((peer) => (
handleRowClick(peer.id)}
diff --git a/package-lock.json b/package-lock.json
index 8f58970..d20c20b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,6 +31,7 @@
"frontend": {
"version": "0.0.1",
"dependencies": {
+ "@tanstack/react-query": "^5.81.5",
"axios": "^1.6.5",
"chart.js": "^4.4.1",
"clsx": "^2.1.0",
@@ -1819,6 +1820,32 @@
"win32"
]
},
+ "node_modules/@tanstack/query-core": {
+ "version": "5.81.5",
+ "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.81.5.tgz",
+ "integrity": "sha512-ZJOgCy/z2qpZXWaj/oxvodDx07XcQa9BF92c0oINjHkoqUPsmm3uG08HpTaviviZ/N9eP1f9CM7mKSEkIo7O1Q==",
+ "license": "MIT",
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/tannerlinsley"
+ }
+ },
+ "node_modules/@tanstack/react-query": {
+ "version": "5.81.5",
+ "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.81.5.tgz",
+ "integrity": "sha512-lOf2KqRRiYWpQT86eeeftAGnjuTR35myTP8MXyvHa81VlomoAWNEd8x5vkcAfQefu0qtYCvyqLropFZqgI2EQw==",
+ "license": "MIT",
+ "dependencies": {
+ "@tanstack/query-core": "5.81.5"
+ },
+ "funding": {
+ "type": "github",
+ "url": "https://github.com/sponsors/tannerlinsley"
+ },
+ "peerDependencies": {
+ "react": "^18 || ^19"
+ }
+ },
"node_modules/@types/babel__core": {
"version": "7.20.5",
"resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
From 268b5cd1fd8ad3a0ad2992d584dc821ee13321eb Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 4 Jul 2025 08:44:58 +0000
Subject: [PATCH 4/4] Remove unused stores and hooks, complete useQuery
migration
Co-authored-by: MontejoJorge <56157795+MontejoJorge@users.noreply.github.com>
---
frontend/src/hooks/useRefreshData.ts | 35 ------
frontend/src/store/homeStore.ts | 119 --------------------
frontend/src/store/peerStore.ts | 54 ---------
frontend/src/store/refreshStore.ts | 26 -----
frontend/src/store/types.ts | 60 ----------
frontend/src/views/Home/Home.tsx | 2 +-
frontend/src/views/Home/TopClientsChart.tsx | 15 +--
7 files changed, 7 insertions(+), 304 deletions(-)
delete mode 100644 frontend/src/hooks/useRefreshData.ts
delete mode 100644 frontend/src/store/homeStore.ts
delete mode 100644 frontend/src/store/peerStore.ts
delete mode 100644 frontend/src/store/refreshStore.ts
delete mode 100644 frontend/src/store/types.ts
diff --git a/frontend/src/hooks/useRefreshData.ts b/frontend/src/hooks/useRefreshData.ts
deleted file mode 100644
index 1e9483e..0000000
--- a/frontend/src/hooks/useRefreshData.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { useRefreshStore } from "@/store/refreshStore";
-import { IBaseApiStore } from "@/store/types";
-import { useEffect } from "react";
-
-export default function useRefreshData(stores: T[]) {
-
- const refreshStore = useRefreshStore();
-
- const refreshStores = () => {
- stores.forEach((store) => {
- if (!store.fetch) return;
- store.fetch();
- });
- };
-
- useEffect(() => {
- refreshStores();
- } , [refreshStore.refresh]);
-
- useEffect(() => {
- if (refreshStore.refreshTime <= 0) return;
-
- refreshStores();
-
- const interval = setInterval(() => {
- refreshStores();
- }, refreshStore.refreshTime);
-
- return () => {
- clearInterval(interval);
- }
- }, [refreshStore.refreshTime]);
-
- return refreshStores;
-}
\ No newline at end of file
diff --git a/frontend/src/store/homeStore.ts b/frontend/src/store/homeStore.ts
deleted file mode 100644
index f606be6..0000000
--- a/frontend/src/store/homeStore.ts
+++ /dev/null
@@ -1,119 +0,0 @@
-import { create } from 'zustand';
-import { devtools } from 'zustand/middleware';
-import api from './api/api';
-import { IBaseApiStore, IBlockchainStore, IMainStore, INetworkInfo, INodeStore, IPeer } from './types';
-import { AxiosError } from 'axios';
-import { toastError } from '@/utils/toats';
-
-interface IHomeStore extends IBaseApiStore {
- main: IMainStore;
- node: INodeStore;
- blockchain: IBlockchainStore;
- networkInfo: INetworkInfo;
- peers: IPeer[];
-}
-
-type HomeStoreWithoutApi = Omit;
-
-const defaultHomeStore: HomeStoreWithoutApi = {
- main: {
- totalConnections: 0,
- totalUploadTraffic: 0,
- totalDownloadTraffic: 0,
- txInMeempool: 0,
- },
- node: {
- client: '',
- protocolVersion: 0,
- port: 0,
- services: [],
- uptime: 0,
- },
- blockchain: {
- chain: '',
- size: 0,
- difficulty: 0,
- hashRate: 0,
- lastBlock: 0,
- lastBlockTime: 0,
- },
- networkInfo: {
- uploadTarget: {
- target: 0,
- targetReached: false,
- },
- networks: {
- ipv4: {
- available: false,
- address: undefined,
- },
- ipv6: {
- available: false,
- address: undefined,
- },
- tor: {
- available: false,
- address: undefined,
- },
- i2p: {
- available: false,
- address: undefined,
- },
- },
- },
- peers: [],
-};
-
-export const useHomeStore = create()(
- devtools((set) => ({
- ...defaultHomeStore,
- loading: false,
- fetch: async () => {
- set({ loading: true });
- await api.get('/bitcoin/home')
- .then(({ data }) => {
- set({
- main: {
- totalConnections: data.main.totalConnections,
- totalUploadTraffic: data.main.totalUploadTraffic,
- totalDownloadTraffic: data.main.totalDownloadTraffic,
- txInMeempool: data.main.txInMeempool,
- },
- node: {
- client: data.node.client,
- protocolVersion: data.node.protocolVersion,
- port: data.node.port,
- services: data.node.services,
- uptime: data.node.uptime,
- },
- blockchain: {
- chain: data.blockchain.chain,
- size: data.blockchain.size,
- difficulty: data.blockchain.difficulty,
- hashRate: data.blockchain.hashRate,
- lastBlock: data.blockchain.lastBlock,
- lastBlockTime: data.blockchain.lastBlockTime,
- },
- networkInfo: {
- uploadTarget: {
- target: data.networkInfo.uploadTarget.target,
- targetReached: data.networkInfo.uploadTarget.targetReached,
- },
- networks: {
- ipv4: data.networkInfo.networks.ipv4,
- ipv6: data.networkInfo.networks.ipv6,
- tor: data.networkInfo.networks.tor,
- i2p: data.networkInfo.networks.i2p,
- },
- },
- peers: data.peers,
- loading: false
- })
- })
- .catch((e: AxiosError) => {
- set({ loading: false });
- toastError(e);
- });
- }
- }))
-);
diff --git a/frontend/src/store/peerStore.ts b/frontend/src/store/peerStore.ts
deleted file mode 100644
index b3e91a3..0000000
--- a/frontend/src/store/peerStore.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { create } from 'zustand';
-import { devtools } from 'zustand/middleware';
-import api from './api/api';
-import { IBaseApiStore, IPeer } from './types';
-import { AxiosError } from 'axios';
-import { toastError } from '@/utils/toats';
-
-interface IPeerStore extends IBaseApiStore {
- allTimeUploadTraffic: number;
- allTimeDownloadTraffic: number;
- banned: number;
- peers: IPeer[];
- sortPeers(sortField: unknown, order: string): unknown;
-}
-
-export const usePeerStore = create()(
- devtools((set) => ({
- allTimeUploadTraffic: 0,
- allTimeDownloadTraffic: 0,
- banned: 0,
- peers: [],
- loading: false,
- fetch: async () => {
- set({ loading: true });
- await api.get('/bitcoin/peers')
- .then(({ data }) => {
- set({
- allTimeUploadTraffic: data.allTimeUploadTraffic,
- allTimeDownloadTraffic: data.allTimeDownloadTraffic,
- banned: data.banned,
- peers: data.peers,
- loading: false
- });
- })
- .catch((e: AxiosError) => {
- set({ loading: false });
- toastError(e);
- });
- },
- sortPeers: (sortField: keyof IPeer, order: string) => {
- set((state) => ({
- peers: state.peers.sort((a, b) => {
- if (typeof a[sortField] === 'string' && typeof b[sortField] === 'string') {
- return order === 'asc' ? a[sortField].localeCompare(b[sortField]) : b[sortField].localeCompare(a[sortField]);
- } else if (typeof a[sortField] === 'number' && typeof b[sortField] === 'number') {
- return order === 'asc' ? a[sortField] - b[sortField] : b[sortField] - a[sortField];
- } else {
- return order === 'asc' ? a[sortField] > b[sortField] ? 1 : -1 : a[sortField] < b[sortField] ? 1 : -1;
- }
- })
- }));
- }
- }))
-);
\ No newline at end of file
diff --git a/frontend/src/store/refreshStore.ts b/frontend/src/store/refreshStore.ts
deleted file mode 100644
index ce9ed62..0000000
--- a/frontend/src/store/refreshStore.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { create } from 'zustand';
-import { devtools, persist } from 'zustand/middleware';
-
-type RefreshStore = {
- refreshTime: number;
- setRefreshTime: (time: number) => void;
- refresh: boolean;
- triggerRefresh: () => void;
-}
-
-export const useRefreshStore = create()(
- devtools(
- persist(
- (set) => ({
- refreshTime: 15000,
- setRefreshTime: (time: number) => set({ refreshTime: time }),
- refresh: false,
- triggerRefresh: () => set((state) => ({ refresh: !state.refresh }))
- }),
- {
- name: 'refreshTime',
- partialize: (state) => ({ refreshTime: state.refreshTime }),
- }
- )
- )
-);
\ No newline at end of file
diff --git a/frontend/src/store/types.ts b/frontend/src/store/types.ts
deleted file mode 100644
index 06150c4..0000000
--- a/frontend/src/store/types.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-export interface IBaseApiStore {
- loading: boolean;
- fetch: () => void;
-}
-
-export interface IMainStore {
- totalConnections: number;
- totalUploadTraffic: number;
- totalDownloadTraffic: number;
- txInMeempool: number;
-}
-
-export interface INodeStore {
- client: string;
- protocolVersion: number;
- port: number;
- services: string[];
- uptime: number;
-}
-
-export interface IBlockchainStore {
- chain: string;
- size: number;
- difficulty: number;
- hashRate: number;
- lastBlock: number;
- lastBlockTime: number;
-}
-
-export interface INetworkInfo {
- uploadTarget: {
- target: number;
- targetReached: boolean;
- };
- networks: {
- ipv4: INetwork;
- ipv6: INetwork;
- tor: INetwork;
- i2p: INetwork;
- };
-}
-
-export interface INetwork {
- available: boolean;
- address: string | undefined;
-}
-
-export interface IPeer {
- id: number;
- address: string;
- services: string[];
- bytessent: number;
- bytesrecv: number;
- totalbytes: number;
- conectionTime: number;
- version: number;
- subversion: string;
- connection_type: string;
- inbound: boolean;
-}
\ No newline at end of file
diff --git a/frontend/src/views/Home/Home.tsx b/frontend/src/views/Home/Home.tsx
index 03fc2f3..a7e1ecc 100644
--- a/frontend/src/views/Home/Home.tsx
+++ b/frontend/src/views/Home/Home.tsx
@@ -170,7 +170,7 @@ const Home = () => {
]}
/>
-
+
diff --git a/frontend/src/views/Home/TopClientsChart.tsx b/frontend/src/views/Home/TopClientsChart.tsx
index d083c9e..74dc1b9 100644
--- a/frontend/src/views/Home/TopClientsChart.tsx
+++ b/frontend/src/views/Home/TopClientsChart.tsx
@@ -10,11 +10,10 @@ import { PieChart, PieSeriesOption } from 'echarts/charts';
import { LabelLayout } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
-import { usePeerStore } from '@/store/peerStore';
import { FaSquare } from 'react-icons/fa6';
import clsx from 'clsx';
import LoadingSpiner from '@/components/UI/LoadingSpiner';
-import { IPeer } from '@/store/types';
+import { IPeer } from '@/types';
type EChartsOption = echarts.ComposeOption<
TooltipComponentOption | LegendComponentOption | PieSeriesOption
@@ -29,7 +28,7 @@ echarts.use([
]);
-export default function TopClientsChart({ peers }: { peers: IPeer[] }) {
+export default function TopClientsChart({ peers, loading = false }: { peers: IPeer[], loading?: boolean }) {
const [chart, setChart] = useState();
const chartRef = useRef(null);
@@ -41,8 +40,6 @@ export default function TopClientsChart({ peers }: { peers: IPeer[] }) {
const [mostCommonClients, setMostCommonClients] = useState>(emtpyClientMap);
- const peerStore = usePeerStore();
-
const colors = [
"#9e0142",
"#d53e4f",
@@ -106,10 +103,10 @@ export default function TopClientsChart({ peers }: { peers: IPeer[] }) {
return (
-
+
- {peerStore.loading && loadingList()}
- {!peerStore.loading && (
+ {loading && loadingList()}
+ {!loading && (
Array.from(mostCommonClients).map(([client, count], index) => {
const total = peers.length;
const percentage = ((count / total) * 100).toFixed(0);
@@ -130,7 +127,7 @@ export default function TopClientsChart({ peers }: { peers: IPeer[] }) {
)}
- {peerStore.loading &&
}
+ {loading &&
}
);
}