network utilization and clean up

pages/api/index/stats.ts

-import handler from 'lib/api/handler';
-
-const getUrl = () => '/v2/stats';
-
-const requestHandler = handler(getUrl, [ 'GET' ]);
-
-export default requestHandler;

pages/api/stats/index.ts

-// todo_tom leave only one api endpoint
 import handler from 'lib/api/handler';
 
 const getUrl = () => '/v2/stats';

types/api/stats.ts

@@ -10,4 +10,5 @@ export type Stats = {
   gas_prices: {average: number; fast: number; slow: number};
   static_gas_price: string;
   market_cap: string;
+  network_utilization_percentage: number;
 }

ui/home/LatestBlocks.tsx

@@ -5,6 +5,7 @@ import React from 'react';
 
 import type { SocketMessage } from 'lib/socket/types';
 import type { Block } from 'types/api/block';
+import type { Stats } from 'types/api/stats';
 import { QueryKeys } from 'types/client/queries';
 
 import useFetch from 'lib/hooks/useFetch';
@@ -26,10 +27,14 @@ const LatestBlocks = () => {
   const fetch = useFetch();
   const { data, isLoading, isError } = useQuery<unknown, unknown, Array<Block>>(
     [ QueryKeys.indexBlocks ],
-    async() => await fetch(`/api/index/blocks`),
+    async() => await fetch(`/node-api/index/blocks`),
   );
 
   const queryClient = useQueryClient();
+  const statsQueryResult = useQuery<unknown, unknown, Stats>(
+    [ QueryKeys.stats ],
+    () => fetch('/node-api/stats'),
+  );
 
   const handleNewBlockMessage: SocketMessage.NewBlock['handler'] = React.useCallback((payload) => {
     queryClient.setQueryData([ QueryKeys.indexBlocks ], (prevData: Array<Block> | undefined) => {
@@ -78,15 +83,17 @@ const LatestBlocks = () => {
 
     content = (
       <>
-        <Box mb={{ base: 6, lg: 9 }}>
-          <Text as="span" fontSize="sm">
-        Network utilization:{ nbsp }
-          </Text>
-          { /* Not implemented in API yet */ }
-          <Text as="span" fontSize="sm" color="blue.400" fontWeight={ 700 }>
-        43.8%
-          </Text>
-        </Box>
+        { statsQueryResult.data?.network_utilization_percentage && (
+          <Box mb={{ base: 6, lg: 9 }}>
+            <Text as="span" fontSize="sm">
+            Network utilization:{ nbsp }
+            </Text>
+            { /* Not implemented in API yet */ }
+            <Text as="span" fontSize="sm" color="blue.400" fontWeight={ 700 }>
+              { statsQueryResult.data.network_utilization_percentage.toFixed(2) }%
+            </Text>
+          </Box>
+        ) }
         <VStack spacing={ `${ BLOCK_MARGIN }px` } mb={ 6 } height={ `${ BLOCK_HEIGHT * blocksCount + BLOCK_MARGIN * (blocksCount - 1) }px` } overflow="hidden">
           <AnimatePresence initial={ false } >
             { dataToShow.map((block => <LatestBlocksItem key={ block.height } block={ block } h={ BLOCK_HEIGHT }/>)) }

ui/home/LatestTxs.tsx

@@ -19,7 +19,7 @@ const LatestTransactions = () => {
   const fetch = useFetch();
   const { data, isLoading, isError } = useQuery<unknown, unknown, Array<Transaction>>(
     [ QueryKeys.indexTxs ],
-    async() => await fetch(`/api/index/txs`),
+    async() => await fetch(`/node-api/index/txs`),
   );
 
   let content;

ui/home/Stats.tsx

@@ -28,7 +28,7 @@ const Stats = () => {
 
   const { data, isLoading, isError } = useQuery<unknown, unknown, Stats>(
     [ QueryKeys.stats ],
-    async() => await fetch(`/api/index/stats`),
+    async() => await fetch(`/node-api/stats`),
   );
 
   if (isError) {