Merge branch 'main' of github.com:blockscout/frontend into 422-errors

deploy/values/main/values.yaml

@@ -28,6 +28,7 @@ blockscout:
       - 'nginx.ingress.kubernetes.io/cors-allow-credentials: "true"'
       - 'nginx.ingress.kubernetes.io/cors-allow-methods: PUT, GET, POST, OPTIONS, DELETE, PATCH'
       - 'nginx.ingress.kubernetes.io/enable-cors: "true"'
+      - 'nginx.ingress.kubernetes.io/cors-allow-headers: "DNT,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization,x-csrf-token"'
     host:
       _default: blockscout.test.blockscout.aws-k8s.blockscout.com
     # enable https

deploy/values/review/values.yaml

@@ -394,4 +394,5 @@ frontend:
     NEXT_PUBLIC_APP_HOST:
       _default: blockscout.com
     NEXT_PUBLIC_NETWORK_EXPLORERS:
-      _default: "[{'title':'Anyblock','baseUrl':'https://explorer.anyblock.tools','paths':{'tx':'/ethereum/poa/core/transaction','address':'/ethereum/poa/core/address'}}]"
+      _default: "[{'title':'Anyblock','baseUrl':'https://explorer.anyblock.tools','paths':{'tx':'/ethereum/ethereum/goerli/transaction','address':'/ethereum/ethereum/goerli/address'}},{'title':'Etherscan','baseUrl':'https://goerli.etherscan.io/','paths':{'tx':'/tx','address':'/address'}}]"
+

lib/block/getBlockTotalReward.ts

@@ -9,5 +9,5 @@ export default function getBlockTotalReward(block: Block) {
     ?.map(({ reward }) => BigNumber(reward))
     .reduce((result, item) => result.plus(item), ZERO) || ZERO;
 
-  return totalReward.div(WEI).toFixed();
+  return totalReward.div(WEI);
 }

lib/hooks/useQueryWithPages.ts

@@ -36,6 +36,7 @@ export default function useQueryWithPages<QueryName extends PaginatedQueryKeys>(
   const fetch = useFetch();
   const isMounted = React.useRef(false);
   const canGoBackwards = React.useRef(!router.query.page);
+  const [ hasPagination, setHasPagination ] = React.useState(page > 1);
 
   const queryKey = [ queryName, ...(queryIds || []), { page, filters } ];
 
@@ -74,6 +75,7 @@ export default function useQueryWithPages<QueryName extends PaginatedQueryKeys>(
     const nextPageQuery = { ...router.query };
     Object.entries(nextPageParams).forEach(([ key, val ]) => nextPageQuery[key] = val.toString());
     nextPageQuery.page = String(page + 1);
+    setHasPagination(true);
 
     router.push({ pathname: router.pathname, query: nextPageQuery }, undefined, { shallow: true })
       .then(() => {
@@ -101,6 +103,7 @@ export default function useQueryWithPages<QueryName extends PaginatedQueryKeys>(
         setPage(prev => prev - 1);
         page === 2 && queryClient.removeQueries({ queryKey: [ queryName ] });
       });
+    setHasPagination(true);
   }, [ router, page, paginationFields, pageParams, queryClient, scrollToTop, queryName ]);
 
   const resetPage = useCallback(() => {
@@ -118,6 +121,8 @@ export default function useQueryWithPages<QueryName extends PaginatedQueryKeys>(
         queryClient.removeQueries({ queryKey: [ queryName ], type: 'inactive' });
       }, 100);
     });
+
+    setHasPagination(true);
   }, [ queryClient, queryName, router, paginationFields, scrollToTop ]);
 
   const onFilterChange = useCallback((newFilters: PaginationFilters<QueryName> | undefined) => {
@@ -156,6 +161,8 @@ export default function useQueryWithPages<QueryName extends PaginatedQueryKeys>(
     canGoBackwards: canGoBackwards.current,
   };
 
+  const isPaginationVisible = hasPagination || (!queryResult.isLoading && !queryResult.isError && pagination.hasNextPage);
+
   React.useEffect(() => {
     if (page !== 1 && isMounted.current) {
       queryClient.cancelQueries({ queryKey });
@@ -171,5 +178,5 @@ export default function useQueryWithPages<QueryName extends PaginatedQueryKeys>(
     }, 0);
   }, []);
 
-  return { ...queryResult, pagination, onFilterChange };
+  return { ...queryResult, pagination, onFilterChange, isPaginationVisible };
 }

theme/components/Alert.ts

@@ -18,7 +18,7 @@ const baseStyle = definePartsStyle({
   container: {
     borderRadius: 'md',
     px: 6,
-    py: 4,
+    py: 3,
   },
 });
 

types/api/stats.ts

@@ -7,7 +7,7 @@ export type HomeStats = {
   total_gas_used: string;
   transactions_today: string;
   gas_used_today: string;
-  gas_prices: GasPrices;
+  gas_prices: GasPrices | null;
   static_gas_price: string;
   market_cap: string;
   network_utilization_percentage: number;

ui/address/AddressBlocksValidated.tsx

@@ -122,11 +122,9 @@ const AddressBlocksValidated = ({ addressQuery }: Props) => {
     );
   })();
 
-  const isPaginatorHidden = !query.isLoading && !query.isError && query.pagination.page === 1 && !query.pagination.hasNextPage;
-
   return (
     <Box>
-      { !isPaginatorHidden && (
+      { query.isPaginationVisible && (
         <ActionBar mt={ -6 }>
           <Pagination ml="auto" { ...query.pagination }/>
         </ActionBar>

ui/address/AddressInternalTxs.tsx

@@ -35,7 +35,7 @@ const AddressInternalTxs = () => {
   const queryIdArray = castArray(queryId);
   const queryIdStr = queryIdArray[0];
 
-  const { data, isLoading, isError, pagination, onFilterChange } = useQueryWithPages({
+  const { data, isLoading, isError, pagination, onFilterChange, isPaginationVisible } = useQueryWithPages({
     apiPath: `/node-api/addresses/${ queryId }/internal-transactions`,
     queryName: QueryKeys.addressInternalTxs,
     queryIds: queryIdArray,
@@ -43,8 +43,6 @@ const AddressInternalTxs = () => {
     scroll: { elem: SCROLL_ELEM, offset: SCROLL_OFFSET },
   });
 
-  const isPaginatorHidden = !isLoading && !isError && pagination.page === 1 && !pagination.hasNextPage;
-
   const handleFilterChange = React.useCallback((val: string | Array<string>) => {
 
     const newVal = getFilterValue(val);
@@ -94,7 +92,7 @@ const AddressInternalTxs = () => {
           onFilterChange={ handleFilterChange }
           isActive={ Boolean(filterValue) }
         />
-        { !isPaginatorHidden && <Pagination ml="auto" { ...pagination }/> }
+        { isPaginationVisible && <Pagination ml="auto" { ...pagination }/> }
       </ActionBar>
       { content }
     </Element>

ui/address/AddressTxs.tsx

@@ -43,12 +43,6 @@ const AddressTxs = () => {
     addressTxsQuery.onFilterChange({ filter: newVal });
   }, [ addressTxsQuery ]);
 
-  const isPaginatorHidden =
-      !addressTxsQuery.isLoading &&
-      !addressTxsQuery.isError &&
-      addressTxsQuery.pagination.page === 1 &&
-      !addressTxsQuery.pagination.hasNextPage;
-
   const filter = (
     <AddressTxsFilter
       defaultFilter={ filterValue }
@@ -62,7 +56,7 @@ const AddressTxs = () => {
       { !isMobile && (
         <ActionBar mt={ -6 }>
           { filter }
-          { !isPaginatorHidden && <Pagination { ...addressTxsQuery.pagination }/> }
+          { addressTxsQuery.isPaginationVisible && <Pagination { ...addressTxsQuery.pagination }/> }
         </ActionBar>
       ) }
       <TxsContent

ui/address/blocksValidated/AddressBlocksValidatedListItem.tsx

@@ -37,7 +37,7 @@ const AddressBlocksValidatedListItem = (props: Props) => {
       </Flex>
       <Flex columnGap={ 2 } w="100%">
         <Text fontWeight={ 500 } flexShrink={ 0 }>Reward { appConfig.network.currency.symbol }</Text>
-        <Text variant="secondary">{ totalReward }</Text>
+        <Text variant="secondary">{ totalReward.toFixed() }</Text>
       </Flex>
     </AccountListItemMobile>
   );

ui/address/blocksValidated/AddressBlocksValidatedTableItem.tsx

@@ -36,7 +36,7 @@ const AddressBlocksValidatedTableItem = (props: Props) => {
         </Flex>
       </Td>
       <Td isNumeric display="flex" justifyContent="end">
-        { totalReward }
+        { totalReward.toFixed() }
       </Td>
     </Tr>
   );

ui/address/coinBalance/AddressCoinBalanceHistory.tsx

@@ -19,13 +19,12 @@ import AddressCoinBalanceTableItem from './AddressCoinBalanceTableItem';
 interface Props {
   query: UseQueryResult<AddressCoinBalanceHistoryResponse> & {
     pagination: PaginationProps;
+    isPaginationVisible: boolean;
   };
 }
 
 const AddressCoinBalanceHistory = ({ query }: Props) => {
 
-  const isPaginatorHidden = !query.isLoading && !query.isError && query.pagination.page === 1 && !query.pagination.hasNextPage;
-
   const content = (() => {
     if (query.isLoading) {
       return (
@@ -75,7 +74,7 @@ const AddressCoinBalanceHistory = ({ query }: Props) => {
 
   return (
     <Box mt={ 8 }>
-      { !isPaginatorHidden && (
+      { query.isPaginationVisible && (
         <ActionBar mt={ -6 }>
           <Pagination ml="auto" { ...query.pagination }/>
         </ActionBar>

ui/blocks/BlocksListItem.tsx

@@ -64,7 +64,7 @@ const BlocksListItem = ({ data, isPending, enableTimeIncrement }: Props) => {
       </Box>
       <Flex columnGap={ 2 }>
         <Text fontWeight={ 500 }>Reward { appConfig.network.currency.symbol }</Text>
-        <Text variant="secondary">{ totalReward }</Text>
+        <Text variant="secondary">{ totalReward.toFixed() }</Text>
       </Flex>
       <Box>
         <Text fontWeight={ 500 }>Burnt fees</Text>

ui/blocks/BlocksTabSlot.tsx

@@ -13,9 +13,10 @@ import Pagination from 'ui/shared/Pagination';
 
 interface Props {
   pagination: PaginationProps;
+  isPaginationVisible: boolean;
 }
 
-const BlocksTabSlot = ({ pagination }: Props) => {
+const BlocksTabSlot = ({ pagination, isPaginationVisible }: Props) => {
   const isMobile = useIsMobile();
   const fetch = useFetch();
 
@@ -41,7 +42,7 @@ const BlocksTabSlot = ({ pagination }: Props) => {
           </Text>
         </Box>
       ) }
-      <Pagination my={ 1 } { ...pagination }/>
+      { isPaginationVisible && <Pagination my={ 1 } { ...pagination }/> }
     </Flex>
   );
 };

ui/blocks/BlocksTable.tsx

@@ -23,7 +23,7 @@ const BlocksTable = ({ data, top, page }: Props) => {
       <Thead top={ top }>
         <Tr>
           <Th width="125px">Block</Th>
-          <Th width="120px">Size</Th>
+          <Th width="120px">Size, bytes</Th>
           <Th width="21%" minW="144px">{ capitalize(getNetworkValidatorTitle()) }</Th>
           <Th width="64px" isNumeric>Txn</Th>
           <Th width="35%">Gas used</Th>

ui/blocks/BlocksTableItem.tsx

@@ -48,7 +48,7 @@ const BlocksTableItem = ({ data, isPending, enableTimeIncrement }: Props) => {
         </Flex>
         <BlockTimestamp ts={ data.timestamp } isEnabled={ enableTimeIncrement }/>
       </Td>
-      <Td fontSize="sm">{ data.size.toLocaleString('en') } bytes</Td>
+      <Td fontSize="sm">{ data.size.toLocaleString('en') }</Td>
       <Td fontSize="sm">
         <AddressLink alias={ data.miner.name } hash={ data.miner.hash } truncation="constant" display="inline-flex" maxW="100%"/>
       </Td>
@@ -60,7 +60,7 @@ const BlocksTableItem = ({ data, isPending, enableTimeIncrement }: Props) => {
           <GasUsedToTargetRatio ml={ 2 } value={ data.gas_target_percentage || undefined }/>
         </Flex>
       </Td>
-      <Td fontSize="sm">{ totalReward }</Td>
+      <Td fontSize="sm">{ totalReward.toFixed(8) }</Td>
       <Td fontSize="sm">
         <Flex alignItems="center" columnGap={ 1 }>
           <Icon as={ flameIcon } boxSize={ 5 } color={ useColorModeValue('gray.500', 'inherit') }/>

ui/home/LatestBlocks.tsx

@@ -19,7 +19,7 @@ import LatestBlocksItem from './LatestBlocksItem';
 import LatestBlocksItemSkeleton from './LatestBlocksItemSkeleton';
 
 const BLOCK_HEIGHT = 166;
-const BLOCK_MARGIN = 24;
+const BLOCK_MARGIN = 12;
 
 const LatestBlocks = () => {
   const isMobile = useIsMobile();

ui/home/LatestBlocksItem.tsx

@@ -59,7 +59,7 @@ const LatestBlocksItem = ({ block, h }: Props) => {
         <GridItem><Text variant="secondary">{ block.tx_count }</Text></GridItem>
         { /*  */ }
         <GridItem>Reward</GridItem>
-        <GridItem><Text variant="secondary">{ totalReward }</Text></GridItem>
+        <GridItem><Text variant="secondary">{ totalReward.toFixed() }</Text></GridItem>
         <GridItem>Miner</GridItem>
         <GridItem><AddressLink alias={ block.miner.name } hash={ block.miner.hash } truncation="constant" maxW="100%"/></GridItem>
       </Grid>

ui/home/Stats.tsx

@@ -12,6 +12,7 @@ import gasIcon from 'icons/gas.svg';
 import txIcon from 'icons/transactions.svg';
 import walletIcon from 'icons/wallet.svg';
 import useFetch from 'lib/hooks/useFetch';
+import link from 'lib/link/link';
 
 import StatsGasPrices from './StatsGasPrices';
 import StatsItem from './StatsItem';
@@ -45,13 +46,14 @@ const Stats = () => {
   const lastItemTouchStyle = { gridColumn: { base: 'span 2', lg: 'unset' } };
 
   if (data) {
-    const gasLabel = hasGasTracker ? <StatsGasPrices gasPrices={ data.gas_prices }/> : null;
+    const gasLabel = hasGasTracker && data.gas_prices ? <StatsGasPrices gasPrices={ data.gas_prices }/> : null;
     content = (
       <>
         <StatsItem
           icon={ blockIcon }
           title="Total blocks"
           value={ Number(data.total_blocks).toLocaleString() }
+          url={ link('blocks') }
         />
         { hasAvgBlockTime && (
           <StatsItem
@@ -64,6 +66,7 @@ const Stats = () => {
           icon={ txIcon }
           title="Total transactions"
           value={ Number(data.total_transactions).toLocaleString() }
+          url={ link('txs') }
         />
         <StatsItem
           icon={ walletIcon }
@@ -71,7 +74,7 @@ const Stats = () => {
           value={ Number(data.total_addresses).toLocaleString() }
           _last={ itemsCount % 2 ? lastItemTouchStyle : undefined }
         />
-        { hasGasTracker && (
+        { hasGasTracker && data.gas_prices && (
           <StatsItem
             icon={ gasIcon }
             title="Gas tracker"

ui/home/StatsItem.tsx

-import { Box, Flex, Icon, Text, useColorModeValue, chakra, Tooltip } from '@chakra-ui/react';
+import { Box, Flex, Icon, Text, useColorModeValue, chakra, Tooltip, LightMode } from '@chakra-ui/react';
 import React from 'react';
 
 import infoIcon from 'icons/info.svg';
@@ -10,11 +10,12 @@ type Props = {
   value: string;
   className?: string;
   tooltipLabel?: React.ReactNode;
+  url?: string;
 }
 
 const LARGEST_BREAKPOINT = '1240px';
 
-const StatsItem = ({ icon, title, value, className, tooltipLabel }: Props) => {
+const StatsItem = ({ icon, title, value, className, tooltipLabel, url }: Props) => {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const sxContainer = {} as any;
   sxContainer[`@media screen and (min-width: ${ breakpoints.lg }) and (max-width: ${ LARGEST_BREAKPOINT })`] = { flexDirection: 'column' };
@@ -38,6 +39,10 @@ const StatsItem = ({ icon, title, value, className, tooltipLabel }: Props) => {
       className={ className }
       color={ useColorModeValue('black', 'white') }
       position="relative"
+      { ...(url ? {
+        as: 'a',
+        href: url,
+      } : {}) }
     >
       <Icon as={ icon } boxSize={ 7 }/>
       <Flex
@@ -49,18 +54,22 @@ const StatsItem = ({ icon, title, value, className, tooltipLabel }: Props) => {
         <Text fontWeight={ 500 } fontSize="md" color={ useColorModeValue('black', 'white') }>{ value }</Text>
       </Flex>
       { tooltipLabel && (
-        <Tooltip label={ tooltipLabel } hasArrow={ false } borderRadius="12px" placement="bottom-end" offset={ [ 0, 0 ] }>
-          <Box
-            position="absolute"
-            top={{ base: 'calc(50% - 12px)', lg: '10px', xl: 'calc(50% - 12px)' }}
-            right="10px">
-            <Icon
-              as={ infoIcon }
-              boxSize={ 6 }
-              color={ infoColor }
-            />
-          </Box>
-        </Tooltip>
+        <LightMode>
+          <Tooltip label={ tooltipLabel } hasArrow={ false } borderRadius="12px" placement="bottom-end" offset={ [ 0, 0 ] } bgColor="blackAlpha.900">
+            <Box
+              position="absolute"
+              top={{ base: 'calc(50% - 12px)', lg: '10px', xl: 'calc(50% - 12px)' }}
+              right="10px"
+              cursor="pointer"
+            >
+              <Icon
+                as={ infoIcon }
+                boxSize={ 6 }
+                color={ infoColor }
+              />
+            </Box>
+          </Tooltip>
+        </LightMode>
       ) }
     </Flex>
   );

ui/pages/Block.tsx

+import { Flex, Icon, Link, Tooltip } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
 import { QueryKeys } from 'types/client/queries';
 import type { RoutedTab } from 'ui/shared/RoutedTabs/types';
 
+import eastArrowIcon from 'icons/arrows/east.svg';
+import { useAppContext } from 'lib/appContext';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import useQueryWithPages from 'lib/hooks/useQueryWithPages';
+import isBrowser from 'lib/isBrowser';
 import BlockDetails from 'ui/block/BlockDetails';
 import Page from 'ui/shared/Page/Page';
 import PageTitle from 'ui/shared/Page/PageTitle';
@@ -22,6 +26,8 @@ const TAB_LIST_PROPS = {
 const BlockPageContent = () => {
   const router = useRouter();
   const isMobile = useIsMobile();
+  const isInBrowser = isBrowser();
+  const appProps = useAppContext();
 
   const blockTxsQuery = useQueryWithPages({
     apiPath: `/node-api/blocks/${ router.query.id }/transactions`,
@@ -40,12 +46,23 @@ const BlockPageContent = () => {
     { id: 'txs', title: 'Transactions', component: <TxsContent query={ blockTxsQuery } showBlockInfo={ false } showSocketInfo={ false }/> },
   ];
 
-  const isPaginatorHidden = !blockTxsQuery.isLoading && !blockTxsQuery.isError && blockTxsQuery.pagination.page === 1 && !blockTxsQuery.pagination.hasNextPage;
-  const hasPagination = !isMobile && router.query.tab === 'txs' && !isPaginatorHidden;
+  const hasPagination = !isMobile && router.query.tab === 'txs' && blockTxsQuery.isPaginationVisible;
+
+  const referrer = isInBrowser ? window.document.referrer : appProps.referrer;
+  const hasGoBackLink = referrer && referrer.includes('/blocks');
 
   return (
     <Page>
-      <PageTitle text={ `Block #${ router.query.id }` }/>
+      <Flex alignItems="center" columnGap={ 3 }>
+        { hasGoBackLink && (
+          <Tooltip label="Back to blocks list">
+            <Link mb={ 6 } display="inline-flex" href={ referrer }>
+              <Icon as={ eastArrowIcon } boxSize={ 6 } transform="rotate(180deg)"/>
+            </Link>
+          </Tooltip>
+        ) }
+        <PageTitle text={ `Block #${ router.query.id }` }/>
+      </Flex>
       <RoutedTabs
         tabs={ tabs }
         tabListProps={ isMobile ? undefined : TAB_LIST_PROPS }

ui/pages/Blocks.tsx

@@ -55,7 +55,7 @@ const BlocksPageContent = () => {
       <RoutedTabs
         tabs={ tabs }
         tabListProps={ isMobile ? undefined : TAB_LIST_PROPS }
-        rightSlot={ <BlocksTabSlot pagination={ blocksQuery.pagination }/> }
+        rightSlot={ <BlocksTabSlot pagination={ blocksQuery.pagination } isPaginationVisible={ blocksQuery.isPaginationVisible }/> }
         stickyEnabled={ !isMobile }
       />
     </Page>

ui/pages/Transaction.tsx

-import { Flex, Link, Icon, Tag } from '@chakra-ui/react';
+import { Flex, Link, Icon, Tag, Tooltip } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import React from 'react';
@@ -60,14 +60,17 @@ const TransactionPageContent = () => {
 
   return (
     <Page>
-      { hasGoBackLink && (
-        <Link mb={ 6 } display="inline-flex" href={ referrer }>
-          <Icon as={ eastArrowIcon } boxSize={ 6 } mr={ 2 } transform="rotate(180deg)"/>
-            Transactions
-        </Link>
-      ) }
       <Flex alignItems="flex-start" flexDir={{ base: 'column', lg: 'row' }}>
-        <PageTitle text="Transaction details"/>
+        <Flex alignItems="center" columnGap={ 3 }>
+          { hasGoBackLink && (
+            <Tooltip label="Back to transactions list">
+              <Link display="inline-flex" href={ referrer } mb={ 6 }>
+                <Icon as={ eastArrowIcon } boxSize={ 6 } transform="rotate(180deg)"/>
+              </Link>
+            </Tooltip>
+          ) }
+          <PageTitle text="Transaction details"/>
+        </Flex>
         { data?.tx_tag && <Tag my={ 2 } ml={ 3 }>{ data.tx_tag }</Tag> }
         { explorersLinks.length > 0 && (
           <Flex

ui/pages/Transactions.tsx

@@ -43,7 +43,7 @@ const Transactions = () => {
         <RoutedTabs
           tabs={ tabs }
           tabListProps={ isMobile ? undefined : TAB_LIST_PROPS }
-          rightSlot={ <TxsTabSlot pagination={ txsQuery.pagination }/> }
+          rightSlot={ <TxsTabSlot pagination={ txsQuery.pagination } isPaginationVisible={ txsQuery.isPaginationVisible && !isMobile }/> }
           stickyEnabled={ !isMobile }
         />
       </Box>

ui/shared/AdditionalInfoButton.tsx

 import {
   Icon,
-  Center,
   useColorModeValue,
   chakra,
+  Button,
 } from '@chakra-ui/react';
 import React from 'react';
 
@@ -14,13 +14,16 @@ interface Props {
   onClick?: () => void;
 }
 
-const AdditionalInfoButton = ({ isOpen, onClick, className }: Props, ref: React.ForwardedRef<HTMLDivElement>) => {
+const AdditionalInfoButton = ({ isOpen, onClick, className }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
 
   const infoBgColor = useColorModeValue('blue.50', 'gray.600');
   const infoColor = useColorModeValue('blue.600', 'blue.300');
 
   return (
-    <Center
+    <Button
+      variant="unstyled"
+      display="inline-flex"
+      alignItems="center"
       className={ className }
       ref={ ref }
       background={ isOpen ? infoBgColor : 'unset' }
@@ -36,7 +39,7 @@ const AdditionalInfoButton = ({ isOpen, onClick, className }: Props, ref: React.
         color={ infoColor }
         _hover={{ color: 'blue.400' }}
       />
-    </Center>
+    </Button>
   );
 };
 

ui/shared/HashStringShorten.tsx

@@ -3,11 +3,12 @@ import React from 'react';
 
 interface Props {
   hash: string;
+  isTooltipDisabled?: boolean;
 }
 
-const HashStringShorten = ({ hash }: Props) => {
+const HashStringShorten = ({ hash, isTooltipDisabled }: Props) => {
   return (
-    <Tooltip label={ hash }>
+    <Tooltip label={ hash } isDisabled={ isTooltipDisabled }>
       { hash.slice(0, 4) + '...' + hash.slice(-4) }
     </Tooltip>
   );

ui/shared/HashStringShortenDynamic.tsx

@@ -22,9 +22,10 @@ const HEAD_MIN_LENGTH = 4;
 interface Props {
   hash: string;
   fontWeight?: string | number;
+  isTooltipDisabled?: boolean;
 }
 
-const HashStringShortenDynamic = ({ hash, fontWeight = '400' }: Props) => {
+const HashStringShortenDynamic = ({ hash, fontWeight = '400', isTooltipDisabled }: Props) => {
   const elementRef = useRef<HTMLSpanElement>(null);
   const [ displayedString, setDisplayedString ] = React.useState(hash);
 
@@ -90,7 +91,7 @@ const HashStringShortenDynamic = ({ hash, fontWeight = '400' }: Props) => {
 
   if (isTruncated) {
     return (
-      <Tooltip label={ hash }>{ content }</Tooltip>
+      <Tooltip label={ hash } isDisabled={ isTooltipDisabled }>{ content }</Tooltip>
     );
   }
 

ui/shared/TokenTransfer/TokenTransfer.tsx

@@ -61,7 +61,7 @@ const TokenTransfer = ({
     { type: getTokenFilterValue(router.query.type), filter: getAddressFilterValue(router.query.filter) },
   );
 
-  const { isError, isLoading, data, pagination, onFilterChange } = useQueryWithPages({
+  const { isError, isLoading, data, pagination, onFilterChange, isPaginationVisible } = useQueryWithPages({
     apiPath: path,
     queryName,
     queryIds,
@@ -138,7 +138,7 @@ const TokenTransfer = ({
             onAddressFilterChange={ handleAddressFilterChange }
             defaultAddressFilter={ filters.filter }
           />
-          <Pagination ml="auto" { ...pagination }/>
+          { isPaginationVisible && <Pagination ml="auto" { ...pagination }/> }
         </ActionBar>
       ) }
       { content }

ui/shared/address/AddressLink.tsx

@@ -2,6 +2,7 @@ import { Link, chakra, shouldForwardProp, Tooltip, Box } from '@chakra-ui/react'
 import type { HTMLAttributeAnchorTarget } from 'react';
 import React from 'react';
 
+import useIsMobile from 'lib/hooks/useIsMobile';
 import link from 'lib/link/link';
 import HashStringShorten from 'ui/shared/HashStringShorten';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
@@ -18,6 +19,8 @@ interface Props {
 }
 
 const AddressLink = ({ alias, type, className, truncation = 'dynamic', hash, id, fontWeight, target = '_self' }: Props) => {
+  const isMobile = useIsMobile();
+
   let url;
   if (type === 'transaction') {
     url = link('tx', { id: id || hash });
@@ -34,16 +37,16 @@ const AddressLink = ({ alias, type, className, truncation = 'dynamic', hash, id,
   const content = (() => {
     if (alias) {
       return (
-        <Tooltip label={ hash }>
+        <Tooltip label={ hash } isDisabled={ isMobile }>
           <Box overflow="hidden" textOverflow="ellipsis" whiteSpace="nowrap">{ alias }</Box>
         </Tooltip>
       );
     }
     switch (truncation) {
       case 'constant':
-        return <HashStringShorten hash={ id || hash }/>;
+        return <HashStringShorten hash={ id || hash } isTooltipDisabled={ isMobile }/>;
       case 'dynamic':
-        return <HashStringShortenDynamic hash={ id || hash } fontWeight={ fontWeight }/>;
+        return <HashStringShortenDynamic hash={ id || hash } fontWeight={ fontWeight } isTooltipDisabled={ isMobile }/>;
       case 'none':
         return <span>{ id || hash }</span>;
     }

ui/snippets/searchBar/SearchBarDesktop.tsx

-import { InputGroup, Input, InputLeftAddon, InputLeftElement, Icon, chakra, useColorModeValue } from '@chakra-ui/react';
+import { InputGroup, Input, InputLeftElement, Icon, chakra, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 import type { ChangeEvent, FormEvent } from 'react';
 
@@ -18,15 +18,15 @@ const SearchBarDesktop = ({ onChange, onSubmit, isHomepage }: Props) => {
       display={{ base: 'none', lg: 'block' }}
       w="100%"
       backgroundColor={ isHomepage ? 'white' : 'none' }
-      borderRadius="10px"
+      borderRadius="base"
     >
       <InputGroup>
-        <InputLeftAddon w="111px">All filters</InputLeftAddon>
-        <InputLeftElement w={ 6 } ml="132px" mr={ 2.5 }>
+        <InputLeftElement w={ 6 } ml={ 4 }>
           <Icon as={ searchIcon } boxSize={ 6 } color={ useColorModeValue('blackAlpha.600', 'whiteAlpha.600') }/>
         </InputLeftElement>
         <Input
-          paddingInlineStart="50px"
+          // paddingInlineStart="50px"
+          pl="50px"
           placeholder="Search by addresses / transactions / block / token... "
           ml="1px"
           onChange={ onChange }

ui/tx/TxDetails.tsx

@@ -73,6 +73,21 @@ const TxDetails = () => {
     ...toAddress.watchlist_names || [],
   ].map((tag) => <Tag key={ tag.label }>{ tag.display_name }</Tag>);
 
+  const executionSuccessBadge = toAddress.is_contract && data.result === 'success' ? (
+    <Tooltip label="Contract execution completed">
+      <chakra.span display="inline-flex" ml={ 2 } mr={ 1 }>
+        <Icon as={ successIcon } boxSize={ 4 } color="green.500" cursor="pointer"/>
+      </chakra.span>
+    </Tooltip>
+  ) : null;
+  const executionFailedBadge = toAddress.is_contract && Boolean(data.status) && data.result !== 'success' ? (
+    <Tooltip label="Error occurred during contract execution">
+      <chakra.span display="inline-flex" ml={ 2 } mr={ 1 }>
+        <Icon as={ errorIcon } boxSize={ 4 } color="red.500" cursor="pointer"/>
+      </chakra.span>
+    </Tooltip>
+  ) : null;
+
   return (
     <Grid columnGap={ 8 } rowGap={{ base: 3, lg: 3 }} templateColumns={{ base: 'minmax(0, 1fr)', lg: 'auto minmax(0, 1fr)' }}>
       { socketStatus && (
@@ -152,40 +167,30 @@ const TxDetails = () => {
         ) }
       </DetailsInfoItem>
       <DetailsInfoItem
-        title={ toAddress.is_contract ? 'Interacted with contract' : 'To' }
+        title={ data.to?.is_contract ? 'Interacted with contract' : 'To' }
         hint="Address (external or contract) receiving the transaction."
         flexWrap={{ base: 'wrap', lg: 'nowrap' }}
         columnGap={ 3 }
       >
         { data.to && data.to.hash ? (
-          <Address>
+          <Address alignItems="center">
             <AddressIcon hash={ toAddress.hash }/>
             <AddressLink ml={ 2 } hash={ toAddress.hash }/>
+            { executionSuccessBadge }
+            { executionFailedBadge }
             <CopyToClipboard text={ toAddress.hash }/>
           </Address>
         ) : (
-          <Flex width={{ base: '100%', lg: 'auto' }} whiteSpace="pre">
+          <Flex width={{ base: '100%', lg: 'auto' }} whiteSpace="pre" alignItems="center">
             <span>[Contract </span>
             <AddressLink hash={ toAddress.hash }/>
             <span> created]</span>
+            { executionSuccessBadge }
+            { executionFailedBadge }
             <CopyToClipboard text={ toAddress.hash }/>
           </Flex>
         ) }
         { toAddress.name && <Text>{ toAddress.name }</Text> }
-        { toAddress.is_contract && data.result === 'success' && (
-          <Tooltip label="Contract execution completed">
-            <chakra.span display="inline-flex">
-              <Icon as={ successIcon } boxSize={ 4 } color="green.500" cursor="pointer"/>
-            </chakra.span>
-          </Tooltip>
-        ) }
-        { toAddress.is_contract && Boolean(data.status) && data.result !== 'success' && (
-          <Tooltip label="Error occured during contract execution">
-            <chakra.span display="inline-flex">
-              <Icon as={ errorIcon } boxSize={ 4 } color="red.500" cursor="pointer"/>
-            </chakra.span>
-          </Tooltip>
-        ) }
         { addressToTags.length > 0 && (
           <Flex columnGap={ 3 }>
             { addressToTags }

ui/tx/TxInternals.pw.tsx

@@ -33,8 +33,5 @@ test('base view +@mobile', async({ mount, page }) => {
     { hooksConfig },
   );
 
-  await page.waitForResponse(API_URL_TX),
-  await page.waitForResponse(API_URL_TX_INTERNALS),
-
   await expect(component).toHaveScreenshot();
 });

ui/tx/TxInternals.tsx

@@ -75,7 +75,7 @@ const TxInternals = () => {
   // const [ searchTerm, setSearchTerm ] = React.useState<string>('');
   const [ sort, setSort ] = React.useState<Sort>();
   const txInfo = useFetchTxInfo({ updateDelay: 5 * SECOND });
-  const { data, isLoading, isError, pagination } = useQueryWithPages({
+  const { data, isLoading, isError, pagination, isPaginationVisible } = useQueryWithPages({
     apiPath: `/node-api/transactions/${ txInfo.data?.hash }/internal-transactions`,
     queryName: QueryKeys.txInternals,
     queryIds: txInfo.data?.hash ? [ txInfo.data.hash ] : undefined,
@@ -83,7 +83,6 @@ const TxInternals = () => {
       enabled: Boolean(txInfo.data?.hash) && Boolean(txInfo.data?.status),
     },
   });
-  const isPaginatorHidden = !isLoading && !isError && pagination.page === 1 && !pagination.hasNextPage;
 
   const isMobile = useIsMobile();
 
@@ -131,12 +130,12 @@ const TxInternals = () => {
 
     return isMobile ?
       <TxInternalsList data={ filteredData }/> :
-      <TxInternalsTable data={ filteredData } sort={ sort } onSortToggle={ handleSortToggle } top={ isPaginatorHidden ? 0 : 80 }/>;
+      <TxInternalsTable data={ filteredData } sort={ sort } onSortToggle={ handleSortToggle } top={ isPaginationVisible ? 80 : 0 }/>;
   })();
 
   return (
     <Box>
-      { !isPaginatorHidden && (
+      { isPaginationVisible && (
         <ActionBar mt={ -6 }>
           <Pagination ml="auto" { ...pagination }/>
         </ActionBar>

ui/tx/TxLogs.tsx

@@ -16,7 +16,7 @@ import useFetchTxInfo from 'ui/tx/useFetchTxInfo';
 
 const TxLogs = () => {
   const txInfo = useFetchTxInfo({ updateDelay: 5 * SECOND });
-  const { data, isLoading, isError, pagination } = useQueryWithPages({
+  const { data, isLoading, isError, pagination, isPaginationVisible } = useQueryWithPages({
     apiPath: `/node-api/transactions/${ txInfo.data?.hash }/logs`,
     queryName: QueryKeys.txLogs,
     queryIds: txInfo.data?.hash ? [ txInfo.data.hash ] : undefined,
@@ -24,7 +24,6 @@ const TxLogs = () => {
       enabled: Boolean(txInfo.data?.hash) && Boolean(txInfo.data?.status),
     },
   });
-  const isPaginatorHidden = !isLoading && !isError && pagination.page === 1 && !pagination.hasNextPage;
 
   if (!txInfo.isLoading && !txInfo.isError && !txInfo.data.status) {
     return txInfo.socketStatus ? <TxSocketAlert status={ txInfo.socketStatus }/> : <TxPendingAlert/>;
@@ -49,7 +48,7 @@ const TxLogs = () => {
 
   return (
     <Box>
-      { !isPaginatorHidden && (
+      { isPaginationVisible && (
         <ActionBar mt={ -6 }>
           <Pagination ml="auto" { ...pagination }/>
         </ActionBar>

ui/tx/TxRawTrace.tsx

@@ -46,6 +46,10 @@ const TxRawTrace = () => {
     );
   }
 
+  if (data.length === 0) {
+    return <span>There is no raw trace for this transaction.</span>;
+  }
+
   const text = JSON.stringify(data, undefined, 4);
 
   return (

ui/txs/TxType.tsx

@@ -18,11 +18,11 @@ const TxType = ({ types }: Props) => {
   switch (typeToShow) {
     case 'contract_call':
       label = 'Contract call';
-      colorScheme = 'green';
+      colorScheme = 'blue';
       break;
     case 'contract_creation':
       label = 'Contract creation';
-      colorScheme = 'purple';
+      colorScheme = 'blue';
       break;
     case 'token_transfer':
       label = 'Token transfer';
@@ -30,15 +30,15 @@ const TxType = ({ types }: Props) => {
       break;
     case 'token_creation':
       label = 'Token creation';
-      colorScheme = 'cyan';
+      colorScheme = 'orange';
       break;
     case 'coin_transfer':
       label = 'Coin transfer';
-      colorScheme = 'teal';
+      colorScheme = 'orange';
       break;
     default:
       label = 'Transaction';
-      colorScheme = 'blue';
+      colorScheme = 'purple';
 
   }
 

ui/txs/TxsListItem.tsx

@@ -80,18 +80,20 @@ const TxsListItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement }:
           </Flex>
           { tx.timestamp && <Text variant="secondary" fontWeight="400" fontSize="sm">{ timeAgo }</Text> }
         </Flex>
-        <Flex mt={ 3 }>
-          <Text as="span" whiteSpace="pre">Method </Text>
-          <Text
-            as="span"
-            variant="secondary"
-            overflow="hidden"
-            whiteSpace="nowrap"
-            textOverflow="ellipsis"
-          >
-            { tx.method }
-          </Text>
-        </Flex>
+        { tx.method && (
+          <Flex mt={ 3 }>
+            <Text as="span" whiteSpace="pre">Method </Text>
+            <Text
+              as="span"
+              variant="secondary"
+              overflow="hidden"
+              whiteSpace="nowrap"
+              textOverflow="ellipsis"
+            >
+              { tx.method }
+            </Text>
+          </Flex>
+        ) }
         { showBlockInfo && tx.block !== null && (
           <Box mt={ 2 }>
             <Text as="span">Block </Text>

ui/txs/TxsSkeletonDesktop.tsx

@@ -11,8 +11,8 @@ const TxsInternalsSkeletonDesktop = ({ showBlockInfo }: Props) => {
   return (
     <Box mb={ 8 }>
       <SkeletonTable columns={ showBlockInfo ?
-        [ '32px', '20%', '18%', '15%', '11%', '292px', '18%', '18%' ] :
-        [ '32px', '20%', '18%', '15%', '292px', '18%', '18%' ]
+        [ '32px', '22%', '160px', '20%', '18%', '292px', '20%', '20%' ] :
+        [ '32px', '22%', '160px', '20%', '292px', '20%', '20%' ]
       }/>
     </Box>
   );

ui/txs/TxsTabSlot.tsx

 import React from 'react';
 
-import useIsMobile from 'lib/hooks/useIsMobile';
 import type { Props as PaginationProps } from 'ui/shared/Pagination';
 import Pagination from 'ui/shared/Pagination';
 
 interface Props {
   pagination: PaginationProps;
+  isPaginationVisible: boolean;
 }
 
-const TxsTabSlot = ({ pagination }: Props) => {
-  const isMobile = useIsMobile();
-
-  if (isMobile) {
+const TxsTabSlot = ({ pagination, isPaginationVisible }: Props) => {
+  if (!isPaginationVisible) {
     return null;
   }
 

ui/txs/TxsTable.tsx

@@ -28,21 +28,21 @@ const TxsTable = ({ txs, sort, sorting, top, showBlockInfo, showSocketInfo, curr
       <TheadSticky top={ top }>
         <Tr>
           <Th width="54px"></Th>
-          <Th width="18%">Txn hash</Th>
-          <Th width="20%">Type</Th>
-          <Th width="15%">Method</Th>
-          { showBlockInfo && <Th width="11%">Block</Th> }
+          <Th width="22%">Txn hash</Th>
+          <Th width="160px">Type</Th>
+          <Th width="20%">Method</Th>
+          { showBlockInfo && <Th width="18%">Block</Th> }
           <Th width={{ xl: '128px', base: '66px' }}>From</Th>
           <Th width={{ xl: currentAddress ? '48px' : '36px', base: '0' }}></Th>
           <Th width={{ xl: '128px', base: '66px' }}>To</Th>
-          <Th width="18%" isNumeric>
+          <Th width="20%" isNumeric>
             <Link onClick={ sort('val') } display="flex" justifyContent="end">
               { sorting === 'val-asc' && <Icon boxSize={ 5 } as={ rightArrowIcon } transform="rotate(-90deg)"/> }
               { sorting === 'val-desc' && <Icon boxSize={ 5 } as={ rightArrowIcon } transform="rotate(90deg)"/> }
               { `Value ${ appConfig.network.currency.symbol }` }
             </Link>
           </Th>
-          <Th width="18%" isNumeric pr={ 5 }>
+          <Th width="20%" isNumeric pr={ 5 }>
             <Link onClick={ sort('fee') } display="flex" justifyContent="end">
               { sorting === 'fee-asc' && <Icon boxSize={ 5 } as={ rightArrowIcon } transform="rotate(-90deg)"/> }
               { sorting === 'fee-desc' && <Icon boxSize={ 5 } as={ rightArrowIcon } transform="rotate(90deg)"/> }

ui/txs/TxsTableItem.tsx

@@ -153,7 +153,7 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement }
         </Td>
       </Hide>
       <Td isNumeric>
-        <CurrencyValue value={ tx.value }/>
+        <CurrencyValue value={ tx.value } accuracy={ 8 }/>
       </Td>
       <Td isNumeric>
         <CurrencyValue value={ tx.fee.value } accuracy={ 8 }/>