new sockets start

lib/socket/types.ts

@@ -20,6 +20,7 @@ SocketMessage.AddressTxs |
 SocketMessage.AddressTxsPending |
 SocketMessage.AddressTokenTransfer |
 SocketMessage.TokenTransfers |
+SocketMessage.TokenTotalSupply |
 SocketMessage.ContractVerification |
 SocketMessage.Unknown;
 
@@ -46,6 +47,7 @@ export namespace SocketMessage {
   export type AddressTxsPending = SocketMessageParamsGeneric<'pending_transaction', { transaction: Transaction }>;
   export type AddressTokenTransfer = SocketMessageParamsGeneric<'token_transfer', { token_transfer: TokenTransfer }>;
   export type TokenTransfers = SocketMessageParamsGeneric<'token_transfer', {token_transfer: number }>;
+  export type TokenTotalSupply = SocketMessageParamsGeneric<'total_supply', {total_supply: number }>;
   export type ContractVerification = SocketMessageParamsGeneric<'verification_result', SmartContractVerificationResponse>;
   export type Unknown = SocketMessageParamsGeneric<undefined, unknown>;
 }

ui/pages/Token.tsx

 import { Skeleton, Box, Flex, SkeletonCircle, Icon, Tag } from '@chakra-ui/react';
+import { useQueryClient } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import React, { useEffect } from 'react';
 
+import type { SocketMessage } from 'lib/socket/types';
+import type { TokenInfo } from 'types/api/token';
 import type { RoutedTab } from 'ui/shared/RoutedTabs/types';
 
 import iconSuccess from 'icons/status/success.svg';
-import useApiQuery from 'lib/api/useApiQuery';
+import useApiQuery, { getResourceKey } from 'lib/api/useApiQuery';
 import { useAppContext } from 'lib/appContext';
 import useContractTabs from 'lib/hooks/useContractTabs';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import useQueryWithPages from 'lib/hooks/useQueryWithPages';
+import useSocketChannel from 'lib/socket/useSocketChannel';
+import useSocketMessage from 'lib/socket/useSocketMessage';
 import trimTokenSymbol from 'lib/token/trimTokenSymbol';
 import AddressContract from 'ui/address/AddressContract';
 import TextAd from 'ui/shared/ad/TextAd';
@@ -29,6 +34,8 @@ import TokenTransfer from 'ui/token/TokenTransfer/TokenTransfer';
 export type TokenTabs = 'token_transfers' | 'holders' | 'inventory';
 
 const TokenPageContent = () => {
+  const [ isSocketOpen, setIsSocketOpen ] = React.useState(false);
+  const [ totalSupplySocket, setTotalSupplySocket ] = React.useState<number>();
   const router = useRouter();
   const isMobile = useIsMobile();
 
@@ -40,9 +47,44 @@ const TokenPageContent = () => {
 
   const hashString = router.query.hash?.toString();
 
+  const queryClient = useQueryClient();
+
   const tokenQuery = useApiQuery('token', {
     pathParams: { hash: hashString },
-    queryOptions: { enabled: Boolean(router.query.hash) },
+    queryOptions: { enabled: isSocketOpen && Boolean(router.query.hash) },
+  });
+
+  React.useEffect(() => {
+    if (tokenQuery.data && totalSupplySocket) {
+      queryClient.setQueryData(getResourceKey('token', { pathParams: { hash: hashString } }), (prevData: TokenInfo | undefined) => {
+        if (prevData) {
+          return { ...prevData, total_supply: totalSupplySocket.toString() };
+        }
+      });
+    }
+  }, [ tokenQuery.data, totalSupplySocket, hashString, queryClient ]);
+
+  const handleTotalSupplyMessage: SocketMessage.TokenTotalSupply['handler'] = React.useCallback((payload) => {
+    const prevData = queryClient.getQueryData(getResourceKey('token', { pathParams: { hash: hashString } }));
+    if (!prevData) {
+      setTotalSupplySocket(payload.total_supply);
+    }
+    queryClient.setQueryData(getResourceKey('token', { pathParams: { hash: hashString } }), (prevData: TokenInfo | undefined) => {
+      if (prevData) {
+        return { ...prevData, total_supply: payload.total_supply.toString() };
+      }
+    });
+  }, [ queryClient, hashString ]);
+
+  const channel = useSocketChannel({
+    topic: `tokens:${ hashString?.toLowerCase() }`,
+    isDisabled: !hashString,
+    onJoin: () => setIsSocketOpen(true),
+  });
+  useSocketMessage({
+    channel,
+    event: 'total_supply',
+    handler: handleTotalSupplyMessage,
   });
 
   useEffect(() => {