links on counters

ui/address/AddressDetails.tsx

@@ -97,38 +97,42 @@ const AddressDetails = ({ addressQuery }: Props) => {
           </DetailsInfoItem>
         ) }
         <AddressBalance data={ addressQuery.data }/>
-        <DetailsInfoItem
-          title="Tokens"
-          hint="All tokens in the account and total value."
-          alignSelf="center"
-          py={ 0 }
-        >
-          <TokenSelect/>
-        </DetailsInfoItem>
+        { addressQuery.data.has_tokens && (
+          <DetailsInfoItem
+            title="Tokens"
+            hint="All tokens in the account and total value."
+            alignSelf="center"
+            py={ 0 }
+          >
+            <TokenSelect/>
+          </DetailsInfoItem>
+        ) }
         <DetailsInfoItem
           title="Transactions"
           hint="Number of transactions related to this address."
         >
-          <AddressCounterItem prop="transactions_count" query={ countersQuery }/>
-        </DetailsInfoItem>
-        <DetailsInfoItem
-          title="Transfers"
-          hint="Number of transfers to/from this address."
-        >
-          <AddressCounterItem prop="token_transfers_count" query={ countersQuery }/>
+          <AddressCounterItem prop="transactions_count" query={ countersQuery } address={ addressQuery.data.hash }/>
         </DetailsInfoItem>
+        { addressQuery.data.has_token_transfers && (
+          <DetailsInfoItem
+            title="Transfers"
+            hint="Number of transfers to/from this address."
+          >
+            <AddressCounterItem prop="token_transfers_count" query={ countersQuery } address={ addressQuery.data.hash }/>
+          </DetailsInfoItem>
+        ) }
         <DetailsInfoItem
           title="Gas used"
           hint="Gas used by the address."
         >
-          <AddressCounterItem prop="gas_usage_count" query={ countersQuery }/>
+          <AddressCounterItem prop="gas_usage_count" query={ countersQuery } address={ addressQuery.data.hash }/>
         </DetailsInfoItem>
         { addressQuery.data.has_validated_blocks && (
           <DetailsInfoItem
             title="Blocks validated"
             hint="Number of blocks validated by this validator."
           >
-            <AddressCounterItem prop="validations_count" query={ countersQuery }/>
+            <AddressCounterItem prop="validations_count" query={ countersQuery } address={ addressQuery.data.hash }/>
           </DetailsInfoItem>
         ) }
         { addressQuery.data.block_number_balance_updated_at && (

ui/address/details/AddressCounterItem.tsx

-import { Skeleton } from '@chakra-ui/react';
+import { Link, Skeleton } from '@chakra-ui/react';
 import type { UseQueryResult } from '@tanstack/react-query';
 import BigNumber from 'bignumber.js';
+import NextLink from 'next/link';
 import React from 'react';
 
 import type { AddressCounters } from 'types/api/address';
 
+import link from 'lib/link/link';
+
 interface Props {
   prop: keyof AddressCounters;
   query: UseQueryResult<AddressCounters>;
+  address: string;
 }
 
-const AddressCounterItem = ({ prop, query }: Props) => {
+const PROP_TO_TAB = {
+  transactions_count: 'txs',
+  token_transfers_count: 'token_transfers',
+  validations_count: 'blocks_validated',
+};
+
+const AddressCounterItem = ({ prop, query, address }: Props) => {
   if (query.isLoading) {
     return <Skeleton h={ 5 } w="80px" borderRadius="full"/>;
   }
@@ -26,8 +36,18 @@ const AddressCounterItem = ({ prop, query }: Props) => {
       return <span>{ BigNumber(data).toFormat() }</span>;
     case 'transactions_count':
     case 'token_transfers_count':
-    case 'validations_count':
-      return <span>{ Number(data).toLocaleString() }</span>;
+    case 'validations_count': {
+      if (data === '0') {
+        return <span>0</span>;
+      }
+      return (
+        <NextLink href={ link('address_index', { id: address }, { tab: PROP_TO_TAB[prop] }) } passHref>
+          <Link>
+            { Number(data).toLocaleString() }
+          </Link>
+        </NextLink>
+      );
+    }
   }
 };
 

ui/address/tokenSelect/TokenSelect.tsx

 import { Box, Flex, Icon, IconButton, Skeleton, Tooltip } from '@chakra-ui/react';
 import { useQueryClient, useIsFetching } from '@tanstack/react-query';
+import NextLink from 'next/link';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -9,6 +10,7 @@ import type { Address } from 'types/api/address';
 import walletIcon from 'icons/wallet.svg';
 import useApiQuery, { getResourceKey } from 'lib/api/useApiQuery';
 import useIsMobile from 'lib/hooks/useIsMobile';
+import link from 'lib/link/link';
 import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
 
@@ -21,7 +23,8 @@ const TokenSelect = () => {
   const queryClient = useQueryClient();
   const [ blockNumber, setBlockNumber ] = React.useState<number>();
 
-  const addressResourceKey = getResourceKey('address', { pathParams: { id: router.query.id?.toString() } });
+  const addressHash = router.query.id?.toString();
+  const addressResourceKey = getResourceKey('address', { pathParams: { id: addressHash } });
 
   const addressQueryData = queryClient.getQueryData<Address>(addressResourceKey);
 
@@ -75,14 +78,19 @@ const TokenSelect = () => {
         <TokenSelectDesktop data={ data } isLoading={ balancesIsFetching === 1 }/>
       }
       <Tooltip label="Show all tokens">
-        <IconButton
-          aria-label="Show all tokens"
-          variant="outline"
-          size="sm"
-          pl="6px"
-          pr="6px"
-          icon={ <Icon as={ walletIcon } boxSize={ 5 }/> }
-        />
+        <Box>
+          <NextLink href={ link('address_index', { id: addressHash }, { tab: 'tokens' }) } passHref>
+            <IconButton
+              aria-label="Show all tokens"
+              variant="outline"
+              size="sm"
+              pl="6px"
+              pr="6px"
+              icon={ <Icon as={ walletIcon } boxSize={ 5 }/> }
+              as="a"
+            />
+          </NextLink>
+        </Box>
       </Tooltip>
     </Flex>
   );

ui/shared/ActionBar.tsx

@@ -30,7 +30,7 @@ const ActionBar = ({ children, className }: Props) => {
       position="sticky"
       top={{ base: scrollDirection === 'down' ? `${ TOP_DOWN }px` : `${ TOP_UP }px`, lg: 0 }}
       transitionProperty="top,box-shadow,background-color,color"
-      transitionDuration="slow"
+      transitionDuration="normal"
       zIndex={{ base: 'sticky2', lg: 'docked' }}
       boxShadow={{ base: isSticky ? 'md' : 'none', lg: 'none' }}
       ref={ ref }