fix(frontend): real-time transaction counter updates (#778)

Author: nikitayutanov

js/frontend/src/features/history/hooks/use-transactions-count-subscription.ts

@@ -6,6 +6,8 @@ import { useEffect } from 'react';
 import { useNetworkType } from '@/context/network-type';
 import { logger } from '@/utils';
 
+import { useTransactionsCountQueryKey } from './use-transactions-count';
+
 const TRANSFERS_COUNT_SUBSCRIPTION = `
   subscription TransfersCountSubscription {
     transferCount
@@ -16,17 +18,16 @@ function useTransactionsCountSubscription() {
   const alert = useAlert();
   const queryClient = useQueryClient();
   const { NETWORK_PRESET } = useNetworkType();
+  const queryKey = useTransactionsCountQueryKey();
 
   useEffect(() => {
-    const wsClient = createClient({ url: NETWORK_PRESET.INDEXER_ADDRESS });
+    const wsClient = createClient({ url: NETWORK_PRESET.INDEXER_ADDRESS.replace('http', 'ws') });
 
     const unsubscribe = wsClient.subscribe(
       { query: TRANSFERS_COUNT_SUBSCRIPTION },
       {
         next: (result) => {
-          queryClient.setQueryData(['transactionsCount', undefined], {
-            allTransfers: { totalCount: result.data?.transferCount },
-          });
+          queryClient.setQueryData(queryKey, { allTransfers: { totalCount: result.data?.transferCount } });
         },
         error: (error: Error) => {
           logger.error('Transaction count subscription', error);
@@ -41,7 +42,7 @@ function useTransactionsCountSubscription() {
       void wsClient.dispose();
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [NETWORK_PRESET.INDEXER_ADDRESS]);
+  }, [NETWORK_PRESET.INDEXER_ADDRESS, queryKey]);
 }
 
 export { useTransactionsCountSubscription };

js/frontend/src/features/history/hooks/use-transactions-count.ts

@@ -1,5 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 import { request } from 'graphql-request';
+import { useMemo } from 'react';
 
 import { useNetworkType } from '@/context/network-type';
 
@@ -20,10 +21,13 @@ type Params = {
   enabled?: boolean;
 };
 
-function useTransactionsCountQueryKey(filter: TransferFilter | undefined) {
+function useTransactionsCountQueryKey(filter?: TransferFilter) {
   const { NETWORK_PRESET } = useNetworkType();
 
-  return ['transactionsCount', NETWORK_PRESET.INDEXER_ADDRESS, filter];
+  return useMemo(
+    () => ['transactionsCount', NETWORK_PRESET.INDEXER_ADDRESS, filter],
+    [NETWORK_PRESET.INDEXER_ADDRESS, filter],
+  );
 }
 
 function useTransactionsCount({ filter, refetchInterval, enabled }: Params = {}) {