()(
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 }),
}
)
)
diff --git a/frontend/src/store/types.ts b/frontend/src/types/api.ts
similarity index 74%
rename from frontend/src/store/types.ts
rename to frontend/src/types/api.ts
index 06150c4..67f9f48 100644
--- a/frontend/src/store/types.ts
+++ b/frontend/src/types/api.ts
@@ -1,8 +1,4 @@
-export interface IBaseApiStore {
- loading: boolean;
- fetch: () => void;
-}
-
+// API Response Types
export interface IMainStore {
totalConnections: number;
totalUploadTraffic: number;
@@ -27,6 +23,11 @@ export interface IBlockchainStore {
lastBlockTime: number;
}
+export interface INetwork {
+ available: boolean;
+ address: string | undefined;
+}
+
export interface INetworkInfo {
uploadTarget: {
target: number;
@@ -40,11 +41,6 @@ export interface INetworkInfo {
};
}
-export interface INetwork {
- available: boolean;
- address: string | undefined;
-}
-
export interface IPeer {
id: number;
address: string;
@@ -57,4 +53,20 @@ export interface IPeer {
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..a7e1ecc 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/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