minor fixes (#1104)

* move Inventory tab to the first place for NFT tokens pages

* update testnet tx alert text

* fix footer layout

nextjs/redirects.js

@@ -196,7 +196,7 @@ const oldUrls = [
   },
   {
     source: '/token/:hash/token-transfers',
-    destination: '/token/:hash',
+    destination: '/token/:hash/?tab=token_transfers',
   },
   {
     source: '/token/:hash/token-holders',

ui/home/IndexingAlertIntTxs.tsx

-import { IconButton, Icon, Popover, PopoverTrigger, PopoverContent, PopoverBody, Flex, Text, useColorModeValue, chakra } from '@chakra-ui/react';
+import { IconButton, Icon, Popover, PopoverTrigger, PopoverContent, PopoverBody, Flex, Text, useColorModeValue } from '@chakra-ui/react';
 import { useQueryClient } from '@tanstack/react-query';
 import React from 'react';
 
@@ -11,7 +11,7 @@ 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 IndexingAlertIntTxs = () => {
 
   const { data, isError, isLoading } = useApiQuery('homepage_indexing_status');
 
@@ -66,7 +66,6 @@ const IndexingAlertIntTxs = ({ className }: { className?: string }) => {
       borderRadius="base"
       alignItems="center"
       justifyContent="center"
-      className={ className }
       color="green.400"
       _hover={{ color: 'blue.400' }}
     >
@@ -99,4 +98,4 @@ const IndexingAlertIntTxs = ({ className }: { className?: string }) => {
   );
 };
 
-export default chakra(IndexingAlertIntTxs);
+export default IndexingAlertIntTxs;

ui/pages/Token.tsx

@@ -52,6 +52,7 @@ const TokenPageContent = () => {
   const scrollRef = React.useRef<HTMLDivElement>(null);
 
   const hashString = getQueryParamString(router.query.hash);
+  const tab = getQueryParamString(router.query.tab);
 
   const queryClient = useQueryClient();
 
@@ -114,34 +115,49 @@ const TokenPageContent = () => {
   }, [ tokenQuery.data, tokenQuery.isPlaceholderData ]);
 
   const hasData = (tokenQuery.data && !tokenQuery.isPlaceholderData) && (contractQuery.data && !contractQuery.isPlaceholderData);
+  const hasInventoryTab = tokenQuery.data?.type === 'ERC-1155' || tokenQuery.data?.type === 'ERC-721';
 
   const transfersQuery = useQueryWithPages({
     resourceName: 'token_transfers',
     pathParams: { hash: hashString },
     scrollRef,
     options: {
-      enabled: Boolean(hashString && (!router.query.tab || router.query.tab === 'token_transfers') && hasData),
+      enabled: Boolean(
+        hasData &&
+        hashString &&
+        (
+          (!hasInventoryTab && !tab) ||
+          tab === 'token_transfers'
+        ),
+      ),
       placeholderData: tokenStubs.getTokenTransfersStub(tokenQuery.data?.type),
     },
   });
 
-  const holdersQuery = useQueryWithPages({
-    resourceName: 'token_holders',
+  const inventoryQuery = useQueryWithPages({
+    resourceName: 'token_inventory',
     pathParams: { hash: hashString },
     scrollRef,
     options: {
-      enabled: Boolean(router.query.hash && router.query.tab === 'holders' && hasData),
-      placeholderData: generateListStub<'token_holders'>(tokenStubs.TOKEN_HOLDER, 50, { next_page_params: null }),
+      enabled: Boolean(
+        hasData &&
+        hashString &&
+        (
+          (hasInventoryTab && !tab) ||
+          tab === 'inventory'
+        ),
+      ),
+      placeholderData: generateListStub<'token_inventory'>(tokenStubs.TOKEN_INSTANCE, 50, { next_page_params: null }),
     },
   });
 
-  const inventoryQuery = useQueryWithPages({
-    resourceName: 'token_inventory',
+  const holdersQuery = useQueryWithPages({
+    resourceName: 'token_holders',
     pathParams: { hash: hashString },
     scrollRef,
     options: {
-      enabled: Boolean(router.query.hash && router.query.tab === 'inventory' && hasData),
-      placeholderData: generateListStub<'token_inventory'>(tokenStubs.TOKEN_INSTANCE, 50, { next_page_params: null }),
+      enabled: Boolean(hashString && tab === 'holders' && hasData),
+      placeholderData: generateListStub<'token_holders'>(tokenStubs.TOKEN_HOLDER, 50, { next_page_params: null }),
     },
   });
 
@@ -153,11 +169,11 @@ const TokenPageContent = () => {
   const contractTabs = useContractTabs(contractQuery.data);
 
   const tabs: Array<RoutedTab> = [
-    { id: 'token_transfers', title: 'Token transfers', component: <TokenTransfer transfersQuery={ transfersQuery } token={ tokenQuery.data }/> },
-    { id: 'holders', title: 'Holders', component: <TokenHolders token={ tokenQuery.data } holdersQuery={ holdersQuery }/> },
     (tokenQuery.data?.type === 'ERC-1155' || tokenQuery.data?.type === 'ERC-721') ?
       { id: 'inventory', title: 'Inventory', component: <TokenInventory inventoryQuery={ inventoryQuery }/> } :
       undefined,
+    { id: 'token_transfers', title: 'Token transfers', component: <TokenTransfer transfersQuery={ transfersQuery } token={ tokenQuery.data }/> },
+    { id: 'holders', title: 'Holders', component: <TokenHolders token={ tokenQuery.data } holdersQuery={ holdersQuery }/> },
     contractQuery.data?.is_contract ? {
       id: 'contract',
       title: () => {
@@ -179,7 +195,7 @@ const TokenPageContent = () => {
 
   let pagination: PaginationParams | undefined;
 
-  if (!router.query.tab || router.query.tab === 'token_transfers') {
+  if (!tab || tab === 'token_transfers') {
     pagination = transfersQuery.pagination;
   }
 
@@ -187,7 +203,7 @@ const TokenPageContent = () => {
     pagination = holdersQuery.pagination;
   }
 
-  if (router.query.tab === 'inventory') {
+  if (tab === 'inventory') {
     pagination = inventoryQuery.pagination;
   }
 

ui/shared/NetworkAddToWallet.tsx

-import { Button, Icon, chakra } from '@chakra-ui/react';
+import { Button, Icon } from '@chakra-ui/react';
 import React from 'react';
 
 import config from 'configs/app';
@@ -10,11 +10,7 @@ import { WALLETS_INFO } from 'lib/web3/wallets';
 
 const feature = config.features.web3Wallet;
 
-interface Props {
-  className?: string;
-}
-
-const NetworkAddToWallet = ({ className }: Props) => {
+const NetworkAddToWallet = () => {
   const toast = useToast();
   const { provider, wallet } = useProvider();
   const addOrSwitchChain = useAddOrSwitchChain();
@@ -58,11 +54,11 @@ const NetworkAddToWallet = ({ className }: Props) => {
   }
 
   return (
-    <Button variant="outline" size="sm" onClick={ handleClick } className={ className }>
+    <Button variant="outline" size="sm" onClick={ handleClick }>
       <Icon as={ WALLETS_INFO[wallet].icon } boxSize={ 5 } mr={ 2 }/>
         Add { config.chain.name }
     </Button>
   );
 };
 
-export default React.memo(chakra(NetworkAddToWallet));
+export default React.memo(NetworkAddToWallet);

ui/snippets/footer/Footer.pw.tsx

@@ -12,6 +12,7 @@ import Footer from './Footer';
 
 const FOOTER_LINKS_URL = 'https://localhost:3000/footer-links.json';
 const BACKEND_VERSION_API_URL = buildApiUrl('config_backend_version');
+const INDEXING_ALERT_API_URL = buildApiUrl('homepage_indexing_status');
 
 base.describe('with custom links, 4 cols', () => {
   const test = base.extend({
@@ -28,6 +29,17 @@ base.describe('with custom links, 4 cols', () => {
       });
     });
 
+    await page.evaluate(() => {
+      window.ethereum = {
+        isMetaMask: true,
+      } as WindowProvider;
+    });
+
+    await page.route(INDEXING_ALERT_API_URL, (route) => route.fulfill({
+      status: 200,
+      body: JSON.stringify({ finished_indexing: false, indexed_internal_transactions_ratio: 0.1 }),
+    }));
+
     await mount(
       <TestApp>
         <Footer/>
@@ -104,9 +116,7 @@ base.describe('without custom links', () => {
       } as WindowProvider;
     });
 
-    const API_URL = buildApiUrl('homepage_indexing_status');
-
-    await page.route(API_URL, (route) => route.fulfill({
+    await page.route(INDEXING_ALERT_API_URL, (route) => route.fulfill({
       status: 200,
       body: JSON.stringify({ finished_indexing: false, indexed_internal_transactions_ratio: 0.1 }),
     }));

ui/snippets/footer/Footer.tsx

@@ -85,17 +85,24 @@ const Footer = () => {
     });
 
   return (
-    <Flex direction={{ base: 'column', lg: 'row' }} p={{ base: 4, lg: 9 }} borderTop="1px solid" borderColor="divider" as="footer">
+    <Flex
+      direction={{ base: 'column', lg: 'row' }}
+      p={{ base: 4, lg: 9 }}
+      borderTop="1px solid"
+      borderColor="divider"
+      as="footer"
+      columnGap="100px"
+    >
       <Box flexGrow="1" mb={{ base: 8, lg: 0 }}>
-        <Flex>
+        <Flex flexWrap="wrap" columnGap={ 8 } rowGap={ 6 }>
           <ColorModeToggler/>
-          { !config.UI.indexingAlert.isHidden && <IndexingAlertIntTxs ml={ 6 }/> }
-          <NetworkAddToWallet ml={ 8 }/>
+          { !config.UI.indexingAlert.isHidden && <IndexingAlertIntTxs/> }
+          <NetworkAddToWallet/>
         </Flex>
         <Box mt={{ base: 5, lg: '44px' }}>
           <Link fontSize="xs" href="https://www.blockscout.com">blockscout.com</Link>
         </Box>
-        <Text mt={ 3 } mr={{ base: 0, lg: '114px' }} maxW={{ base: 'unset', lg: '470px' }} fontSize="xs">
+        <Text mt={ 3 } maxW={{ base: 'unset', lg: '470px' }} fontSize="xs">
             Blockscout is a tool for inspecting and analyzing EVM based blockchains. Blockchain explorer for Ethereum Networks.
         </Text>
         <VStack spacing={ 1 } mt={ 6 } alignItems="start">

ui/tx/TxDetails.tsx

@@ -125,7 +125,7 @@ const TxDetails = () => {
 
   return (
     <>
-      { config.chain.isTestnet && <Alert status="warning" mb={ 6 }>This is a { config.chain.name } testnet transaction only</Alert> }
+      { config.chain.isTestnet && <Alert status="warning" mb={ 6 }>This is a testnet transaction only</Alert> }
       <Grid columnGap={ 8 } rowGap={{ base: 3, lg: 3 }} templateColumns={{ base: 'minmax(0, 1fr)', lg: 'auto minmax(0, 1fr)' }}>
         { socketStatus && (
           <GridItem colSpan={{ base: undefined, lg: 2 }} mb={ 2 }>