Merge pull request #1068 from blockscout/socket-fix

request after socket fix if error

ui/address/contract/ContractCode.tsx

@@ -35,7 +35,7 @@ const InfoItem = chakra(({ label, value, className, isLoading }: { label: string
 ));
 
 const ContractCode = ({ addressHash, noSocket }: Props) => {
-  const [ isSocketOpen, setIsSocketOpen ] = React.useState(false);
+  const [ isQueryEnabled, setIsQueryEnabled ] = React.useState(false);
   const [ isChangedBytecodeSocket, setIsChangedBytecodeSocket ] = React.useState<boolean>();
 
   const queryClient = useQueryClient();
@@ -45,7 +45,7 @@ const ContractCode = ({ addressHash, noSocket }: Props) => {
   const { data, isPlaceholderData, isError } = useApiQuery('contract', {
     pathParams: { hash: addressHash },
     queryOptions: {
-      enabled: Boolean(addressHash) && (noSocket || isSocketOpen),
+      enabled: Boolean(addressHash) && (noSocket || isQueryEnabled),
       refetchOnMount: false,
       placeholderData: addressInfo?.is_verified ? stubs.CONTRACT_CODE_VERIFIED : stubs.CONTRACT_CODE_UNVERIFIED,
     },
@@ -64,10 +64,13 @@ const ContractCode = ({ addressHash, noSocket }: Props) => {
     });
   }, [ addressHash, refetchQueries ]);
 
+  const enableQuery = React.useCallback(() => setIsQueryEnabled(true), []);
+
   const channel = useSocketChannel({
     topic: `addresses:${ addressHash?.toLowerCase() }`,
     isDisabled: !addressHash,
-    onJoin: () => setIsSocketOpen(true),
+    onJoin: enableQuery,
+    onSocketError: enableQuery,
   });
   useSocketMessage({
     channel,

ui/pages/Token.tsx

@@ -41,7 +41,7 @@ import TokenVerifiedInfo from 'ui/token/TokenVerifiedInfo';
 export type TokenTabs = 'token_transfers' | 'holders' | 'inventory';
 
 const TokenPageContent = () => {
-  const [ isSocketOpen, setIsSocketOpen ] = React.useState(false);
+  const [ isQueryEnabled, setIsQueryEnabled ] = React.useState(false);
   const [ totalSupplySocket, setTotalSupplySocket ] = React.useState<number>();
   const router = useRouter();
   const isMobile = useIsMobile();
@@ -65,7 +65,7 @@ const TokenPageContent = () => {
   const contractQuery = useApiQuery('address', {
     pathParams: { hash: hashString },
     queryOptions: {
-      enabled: isSocketOpen && Boolean(router.query.hash),
+      enabled: isQueryEnabled && Boolean(router.query.hash),
       placeholderData: addressStubs.ADDRESS_INFO,
     },
   });
@@ -92,10 +92,13 @@ const TokenPageContent = () => {
     });
   }, [ queryClient, hashString ]);
 
+  const enableQuery = React.useCallback(() => setIsQueryEnabled(true), []);
+
   const channel = useSocketChannel({
     topic: `tokens:${ hashString?.toLowerCase() }`,
     isDisabled: !hashString,
-    onJoin: () => setIsSocketOpen(true),
+    onJoin: enableQuery,
+    onSocketError: enableQuery,
   });
   useSocketMessage({
     channel,

ui/tx/TxRawTrace.tsx

@@ -17,7 +17,7 @@ import TxSocketAlert from 'ui/tx/TxSocketAlert';
 import useFetchTxInfo from 'ui/tx/useFetchTxInfo';
 
 const TxRawTrace = () => {
-  const [ isSocketOpen, setIsSocketOpen ] = React.useState(false);
+  const [ isQueryEnabled, setIsQueryEnabled ] = React.useState(false);
   const [ rawTraces, setRawTraces ] = React.useState<RawTracesResponse>();
   const router = useRouter();
   const hash = getQueryParamString(router.query.hash);
@@ -26,7 +26,7 @@ const TxRawTrace = () => {
   const { data, isPlaceholderData, isError } = useApiQuery('tx_raw_trace', {
     pathParams: { hash },
     queryOptions: {
-      enabled: Boolean(hash) && Boolean(txInfo.data?.status) && isSocketOpen,
+      enabled: Boolean(hash) && Boolean(txInfo.data?.status) && isQueryEnabled,
       placeholderData: TX_RAW_TRACE,
     },
   });
@@ -35,10 +35,13 @@ const TxRawTrace = () => {
     setRawTraces(payload);
   }, [ ]);
 
+  const enableQuery = React.useCallback(() => setIsQueryEnabled(true), []);
+
   const channel = useSocketChannel({
     topic: `transactions:${ hash }`,
     isDisabled: !hash || txInfo.isPlaceholderData || !txInfo.data?.status,
-    onJoin: () => setIsSocketOpen(true),
+    onJoin: enableQuery,
+    onSocketError: enableQuery,
   });
   useSocketMessage({
     channel,