Merge pull request #1021 from blockscout/ind-status

int txs indexing status

ui/home/IndexingAlert.tsx → ui/home/IndexingAlertBlocks.tsx

@@ -13,7 +13,7 @@ import { nbsp, ndash } from 'lib/html-entities';
 import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
 
-const IndexingAlert = ({ className }: { className?: string }) => {
+const IndexingAlertBlocks = ({ className }: { className?: string }) => {
   const isMobile = useIsMobile();
 
   const appProps = useAppContext();
@@ -24,7 +24,7 @@ const IndexingAlert = ({ className }: { className?: string }) => {
 
   React.useEffect(() => {
     if (!isLoading && !isError) {
-      cookies.set(cookies.NAMES.INDEXING_ALERT, data.finished_indexing && data.finished_indexing_blocks ? 'false' : 'true');
+      cookies.set(cookies.NAMES.INDEXING_ALERT, data.finished_indexing_blocks ? 'false' : 'true');
     }
   }, [ data, isError, isLoading ]);
 
@@ -52,28 +52,6 @@ const IndexingAlert = ({ className }: { className?: string }) => {
     handler: handleBlocksIndexStatus,
   });
 
-  const handleInternalTxsIndexStatus: SocketMessage.InternalTxsIndexStatus['handler'] = React.useCallback((payload) => {
-    queryClient.setQueryData(getResourceKey('homepage_indexing_status'), (prevData: IndexingStatus | undefined) => {
-
-      const newData = prevData ? { ...prevData } : {} as IndexingStatus;
-      newData.finished_indexing = payload.finished;
-      newData.indexed_internal_transactions_ratio = payload.ratio;
-
-      return newData;
-    });
-  }, [ queryClient ]);
-
-  const internalTxsIndexingChannel = useSocketChannel({
-    topic: 'blocks:indexing_internal_transactions',
-    isDisabled: !data || data.finished_indexing,
-  });
-
-  useSocketMessage({
-    channel: internalTxsIndexingChannel,
-    event: 'internal_txs_index_status',
-    handler: handleInternalTxsIndexStatus,
-  });
-
   if (isError) {
     return null;
   }
@@ -82,17 +60,7 @@ const IndexingAlert = ({ className }: { className?: string }) => {
     return hasAlertCookie ? <Skeleton h={{ base: '96px', lg: '48px' }} mb={ 6 } w="100%" className={ className }/> : null;
   }
 
-  let content;
-  if (data.finished_indexing_blocks === false) {
-    content = `${ data.indexed_blocks_ratio && `${ Math.floor(Number(data.indexed_blocks_ratio) * 100) }% Blocks Indexed${ nbsp }${ ndash } ` }
-          We're indexing this chain right now. Some of the counts may be inaccurate.` ;
-  } else if (data.finished_indexing === false) {
-    content = `${ data.indexed_internal_transactions_ratio &&
-            `${ Math.floor(Number(data.indexed_internal_transactions_ratio) * 100) }% Blocks With Internal Transactions Indexed${ nbsp }${ ndash } ` }
-          We're indexing this chain right now. Some of the counts may be inaccurate.`;
-  }
-
-  if (!content) {
+  if (data.finished_indexing_blocks !== false) {
     return null;
   }
 
@@ -100,10 +68,11 @@ const IndexingAlert = ({ className }: { className?: string }) => {
     <Alert status="info" colorScheme="gray" py={ 3 } borderRadius="12px" mb={ 6 } className={ className }>
       { !isMobile && <AlertIcon/> }
       <AlertTitle>
-        { content }
+        { `${ data.indexed_blocks_ratio && `${ Math.floor(Number(data.indexed_blocks_ratio) * 100) }% Blocks Indexed${ nbsp }${ ndash } ` }
+          We're indexing this chain right now. Some of the counts may be inaccurate.` }
       </AlertTitle>
     </Alert>
   );
 };
 
-export default chakra(IndexingAlert);
+export default chakra(IndexingAlertBlocks);

ui/home/IndexingAlertIntTxs.tsx

+import { IconButton, Icon, Popover, PopoverTrigger, PopoverContent, PopoverBody, Flex, Text, useColorModeValue, chakra } from '@chakra-ui/react';
+import { useQueryClient } from '@tanstack/react-query';
+import React from 'react';
+
+import type { SocketMessage } from 'lib/socket/types';
+import type { IndexingStatus } from 'types/api/indexingStatus';
+
+import infoIcon from 'icons/info.svg';
+import useApiQuery, { getResourceKey } from 'lib/api/useApiQuery';
+import { apos, nbsp, ndash } from 'lib/html-entities';
+import useSocketChannel from 'lib/socket/useSocketChannel';
+import useSocketMessage from 'lib/socket/useSocketMessage';
+
+const IndexingAlertIntTxs = ({ className }: { className?: string }) => {
+
+  const { data, isError, isLoading } = useApiQuery('homepage_indexing_status');
+
+  const bgColor = useColorModeValue('blackAlpha.100', 'whiteAlpha.100');
+  const hintTextcolor = useColorModeValue('black', 'white');
+
+  const queryClient = useQueryClient();
+
+  const handleInternalTxsIndexStatus: SocketMessage.InternalTxsIndexStatus['handler'] = React.useCallback((payload) => {
+    queryClient.setQueryData(getResourceKey('homepage_indexing_status'), (prevData: IndexingStatus | undefined) => {
+
+      const newData = prevData ? { ...prevData } : {} as IndexingStatus;
+      newData.finished_indexing = payload.finished;
+      newData.indexed_internal_transactions_ratio = payload.ratio;
+
+      return newData;
+    });
+  }, [ queryClient ]);
+
+  const internalTxsIndexingChannel = useSocketChannel({
+    topic: 'blocks:indexing_internal_transactions',
+    isDisabled: !data || data.finished_indexing,
+  });
+
+  useSocketMessage({
+    channel: internalTxsIndexingChannel,
+    event: 'internal_txs_index_status',
+    handler: handleInternalTxsIndexStatus,
+  });
+
+  if (isError || isLoading) {
+    return null;
+  }
+
+  if (data.finished_indexing !== false) {
+    return null;
+  }
+
+  const hint = (
+    <Text fontSize="xs" color={ hintTextcolor }>
+      { data.indexed_internal_transactions_ratio &&
+        `${ Math.floor(Number(data.indexed_internal_transactions_ratio) * 100) }% Blocks With Internal Transactions Indexed${ nbsp }${ ndash } ` }
+      We{ apos }re indexing this chain right now. Some of the counts may be inaccurate.`
+    </Text>
+  );
+
+  const trigger = (
+    <Flex
+      px={ 2 }
+      py={ 1 }
+      bg={ bgColor }
+      borderRadius="base"
+      alignItems="center"
+      justifyContent="center"
+      className={ className }
+      color="green.400"
+      _hover={{ color: 'blue.400' }}
+    >
+      <IconButton
+        colorScheme="none"
+        aria-label="hint"
+        icon={ <Icon as={ infoIcon } boxSize={ 5 }/> }
+        boxSize={ 6 }
+        variant="simple"
+      />
+      { data.indexed_internal_transactions_ratio && (
+        <Text fontWeight={ 600 } fontSize="xs" color="inherit">
+          { Math.floor(Number(data.indexed_internal_transactions_ratio) * 100) + '%' }
+        </Text>
+      ) }
+    </Flex>
+  );
+
+  return (
+    <Popover placement="bottom-start" isLazy trigger="hover">
+      <PopoverTrigger>
+        { trigger }
+      </PopoverTrigger>
+      <PopoverContent maxH="450px" overflowY="scroll" w="240px">
+        <PopoverBody p={ 4 } bgColor={ bgColor } boxShadow="2xl">
+          { hint }
+        </PopoverBody>
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export default chakra(IndexingAlertIntTxs);

ui/shared/Page/PageContent.tsx

@@ -2,7 +2,7 @@ import { Box } from '@chakra-ui/react';
 import React from 'react';
 
 import appConfig from 'configs/app/config';
-import IndexingAlert from 'ui/home/IndexingAlert';
+import IndexingAlertBlocks from 'ui/home/IndexingAlertBlocks';
 
 interface Props {
   children: React.ReactNode;
@@ -18,7 +18,7 @@ const PageContent = ({ children, isHomePage }: Props) => {
       paddingBottom={ 10 }
       paddingTop={{ base: isHomePage ? '88px' : '138px', lg: 0 }}
     >
-      { !appConfig.hideIndexingAlert && <IndexingAlert display={{ base: 'block', lg: 'none' }}/> }
+      { !appConfig.hideIndexingAlert && <IndexingAlertBlocks display={{ base: 'block', lg: 'none' }}/> }
       { children }
     </Box>
   );

ui/snippets/footer/Footer.pw.tsx

@@ -96,4 +96,27 @@ base.describe('without custom links', () => {
 
     await expect(page).toHaveScreenshot();
   });
+
+  base('with indexing alert +@dark-mode +@mobile', async({ mount, page }) => {
+    await page.evaluate(() => {
+      window.ethereum = {
+        providers: [ { isMetaMask: true } ],
+      } as WindowProvider;
+    });
+
+    const API_URL = buildApiUrl('homepage_indexing_status');
+
+    await page.route(API_URL, (route) => route.fulfill({
+      status: 200,
+      body: JSON.stringify({ finished_indexing: false, indexed_internal_transactions_ratio: 0.1 }),
+    }));
+
+    const component = await mount(
+      <TestApp>
+        <Footer/>
+      </TestApp>,
+    );
+
+    await expect(component).toHaveScreenshot();
+  });
 });

ui/snippets/footer/Footer.tsx

@@ -14,6 +14,7 @@ import type { ResourceError } from 'lib/api/resources';
 import useApiQuery from 'lib/api/useApiQuery';
 import useFetch from 'lib/hooks/useFetch';
 import useIssueUrl from 'lib/hooks/useIssueUrl';
+import IndexingAlertIntTxs from 'ui/home/IndexingAlertIntTxs';
 import NetworkAddToWallet from 'ui/shared/NetworkAddToWallet';
 
 import ColorModeToggler from '../header/ColorModeToggler';
@@ -81,6 +82,7 @@ const Footer = () => {
       <Box flexGrow="1" mb={{ base: 8, lg: 0 }}>
         <Flex>
           <ColorModeToggler/>
+          { !appConfig.hideIndexingAlert && <IndexingAlertIntTxs ml={ 6 }/> }
           <NetworkAddToWallet ml={ 8 }/>
         </Flex>
         <Box mt={{ base: 5, lg: '44px' }}>

ui/snippets/header/Header.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 import appConfig from 'configs/app/config';
 import { useScrollDirection } from 'lib/contexts/scrollDirection';
-import IndexingAlert from 'ui/home/IndexingAlert';
+import IndexingAlertBlocks from 'ui/home/IndexingAlertBlocks';
 import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
 import ProfileMenuDesktop from 'ui/snippets/profileMenu/ProfileMenuDesktop';
 import ProfileMenuMobile from 'ui/snippets/profileMenu/ProfileMenuMobile';
@@ -52,7 +52,7 @@ const Header = ({ isHomePage, renderSearchBar }: Props) => {
         paddingTop={ 9 }
         display={{ base: 'none', lg: 'block' }}
       >
-        { !appConfig.hideIndexingAlert && <IndexingAlert/> }
+        { !appConfig.hideIndexingAlert && <IndexingAlertBlocks/> }
         { !isHomePage && (
           <HStack
             as="header"