Merge branch 'main' of github.com:blockscout/frontend into blocks-pagination

deploy/values/main/values.yaml

@@ -296,6 +296,10 @@ frontend:
       - "/static"
       - "/auth/profile"
       - "/account"
+      - "/txs"
+      - "/tx"
+      - "/blocks"
+      - "/block"
   resources:
     limits:
       memory:

deploy/values/review/values.yaml

@@ -295,7 +295,10 @@ frontend:
       - "/node-api"
       - "/static"
       - "/auth/profile"
-      - "/account"
+      - "/txs"
+      - "/tx"
+      - "/blocks"
+      - "/block"
   resources:
     limits:
       memory:

lib/appContext.tsx

@@ -7,13 +7,11 @@ type Props = {
   pageProps: PageProps;
 }
 
-const AppContext = createContext<PageProps>({ cookies: '' });
+const AppContext = createContext<PageProps>({ cookies: '', referrer: '' });
 
 export function AppWrapper({ children, pageProps }: Props) {
-  const appProps = { cookies: pageProps.cookies };
-
   return (
-    <AppContext.Provider value={ appProps }>
+    <AppContext.Provider value={ pageProps }>
       { children }
     </AppContext.Provider>
   );

lib/next/getServerSideProps.ts

@@ -2,12 +2,14 @@ import type { GetServerSideProps, GetServerSidePropsResult } from 'next';
 
 export type Props = {
   cookies: string;
+  referrer: string;
 }
 
 export const getServerSideProps: GetServerSideProps = async({ req }): Promise<GetServerSidePropsResult<Props>> => {
   return {
     props: {
       cookies: req.headers.cookie || '',
+      referrer: req.headers.referer || '',
     },
   };
 };

theme/components/Popover.ts

@@ -14,7 +14,7 @@ const $arrowBg = cssVar('popper-arrow-bg');
 const $arrowShadowColor = cssVar('popper-arrow-shadow-color');
 
 const baseStylePopper = defineStyle({
-  zIndex: 10,
+  zIndex: 20,
 });
 
 const baseStyleContent = defineStyle((props) => {

ui/blocks/BlocksContent.tsx

-import { Text, Show, Alert, Skeleton } from '@chakra-ui/react';
+import { Text, Show, Hide, Skeleton, Alert } from '@chakra-ui/react';
 import { useQueryClient } from '@tanstack/react-query';
 import React from 'react';
 
@@ -68,9 +68,9 @@ const BlocksContent = ({ type }: Props) => {
           <Show below="lg" key="skeleton-mobile">
             <BlocksSkeletonMobile/>
           </Show>
-          <Show above="lg" key="skeleton-desktop">
+          <Hide below="lg" key="skeleton-desktop">
             <SkeletonTable columns={ [ '125px', '120px', '21%', '64px', '35%', '22%', '22%' ] }/>
-          </Show>
+          </Hide>
         </>
       );
     }
@@ -80,14 +80,14 @@ const BlocksContent = ({ type }: Props) => {
     }
 
     if (data.items.length === 0) {
-      return <Alert>There are no blocks.</Alert>;
+      return <Text as="span">There are no blocks.</Text>;
     }
 
     return (
       <>
         { socketAlert && <Alert status="warning" mb={ 6 } as="a" href={ window.document.location.href }>{ socketAlert }</Alert> }
         <Show below="lg" key="content-mobile"><BlocksList data={ data.items }/></Show>
-        <Show above="lg" key="content-desktop"><BlocksTable data={ data.items }/></Show>
+        <Hide below="lg" key="content-desktop"><BlocksTable data={ data.items }/></Hide>
       </>
     );
 

ui/pages/Transaction.tsx

@@ -7,6 +7,7 @@ import type { Transaction } from 'types/api/transaction';
 import type { RoutedTab } from 'ui/shared/RoutedTabs/types';
 
 import eastArrowIcon from 'icons/arrows/east.svg';
+import { useAppContext } from 'lib/appContext';
 import useFetch from 'lib/hooks/useFetch';
 import isBrowser from 'lib/isBrowser';
 import networkExplorers from 'lib/networks/networkExplorers';
@@ -32,6 +33,12 @@ const TABS: Array<RoutedTab> = [
 const TransactionPageContent = () => {
   const router = useRouter();
   const fetch = useFetch();
+  const appProps = useAppContext();
+  const isInBrowser = isBrowser();
+
+  const referrer = isInBrowser ? window.document.referrer : appProps.referrer;
+
+  const hasGoBackLink = referrer && referrer.includes('/txs');
 
   const { data } = useQuery<unknown, unknown, Transaction>(
     [ 'tx', router.query.id ],
@@ -48,12 +55,10 @@ const TransactionPageContent = () => {
       return <ExternalLink key={ explorer.baseUrl } title={ `Open in ${ explorer.title }` } href={ url.toString() }/>;
     });
 
-  const hasGoBackLink = isBrowser() && window.document.referrer.includes('/txs');
-
   return (
     <Page>
       { hasGoBackLink && (
-        <Link mb={ 6 } display="inline-flex" href={ window.document.referrer }>
+        <Link mb={ 6 } display="inline-flex" href={ referrer }>
           <Icon as={ eastArrowIcon } boxSize={ 6 } mr={ 2 } transform="rotate(180deg)"/>
             Transactions
         </Link>

ui/tx/TxInternals.tsx

-import { Box, Flex, Alert, Show } from '@chakra-ui/react';
+import { Box, Flex, Text, Show, Hide } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import React from 'react';
@@ -105,7 +105,7 @@ const TxInternals = () => {
     return (
       <>
         <Show below="lg"><TxInternalsSkeletonMobile/></Show>
-        <Show above="lg"><TxInternalsSkeletonDesktop/></Show>
+        <Hide below="lg"><TxInternalsSkeletonDesktop/></Hide>
       </>
     );
   }
@@ -115,7 +115,7 @@ const TxInternals = () => {
   }
 
   if (data.items.length === 0) {
-    return <Alert>There are no internal transactions for this transaction.</Alert>;
+    return <Text as="span">There are no internal transactions for this transaction.</Text>;
   }
 
   const content = (() => {

ui/tx/TxLogs.tsx

-import { Box, Alert } from '@chakra-ui/react';
+import { Box, Text } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import React from 'react';
@@ -46,7 +46,7 @@ const TxLogs = () => {
   }
 
   if (data.items.length === 0) {
-    return <Alert>There are no logs for this transaction.</Alert>;
+    return <Text as="span">There are no logs for this transaction.</Text>;
   }
 
   return (

ui/txs/TxsContent.tsx

-import { Alert, Box, Show } from '@chakra-ui/react';
+import { Text, Box, Show, Hide } from '@chakra-ui/react';
 import React, { useState, useCallback } from 'react';
 
 import type { TransactionsResponse } from 'types/api/transaction';
@@ -73,7 +73,7 @@ const TxsContent = ({
     const txs = data?.items;
 
     if (!isLoading && !txs?.length) {
-      return <Alert>There are no transactions.</Alert>;
+      return <Text as="span">There are no transactions.</Text>;
     }
 
     if (!isLoading && txs) {
@@ -83,7 +83,7 @@ const TxsContent = ({
     return (
       <>
         <Show below="lg" ssr={ false }><TxsSkeletonMobile/></Show>
-        <Show above="lg" ssr={ false }><TxsSkeletonDesktop/></Show>
+        <Hide below="lg" ssr={ false }><TxsSkeletonDesktop/></Hide>
       </>
     );
   })();

ui/txs/TxsTableItem.tsx

@@ -14,6 +14,7 @@ import {
   PopoverBody,
   useColorModeValue,
   Show,
+  Hide,
 } from '@chakra-ui/react';
 import React from 'react';
 
@@ -113,7 +114,7 @@ const TxsTableItem = ({ tx }: {tx: Transaction}) => {
           { addressTo }
         </Td>
       </Show>
-      <Show below="xl" ssr={ false }>
+      <Hide above="xl" ssr={ false }>
         <Td colSpan={ 3 }>
           <Box>
             { addressFrom }
@@ -128,7 +129,7 @@ const TxsTableItem = ({ tx }: {tx: Transaction}) => {
             { addressTo }
           </Box>
         </Td>
-      </Show>
+      </Hide>
       <Td isNumeric>
         <CurrencyValue value={ tx.value }/>
       </Td>

ui/txs/TxsWithSort.tsx

-import { Box, Show } from '@chakra-ui/react';
+import { Box, Show, Hide } from '@chakra-ui/react';
 import React, { useEffect, useState } from 'react';
 
 import type { TransactionsResponse } from 'types/api/transaction';
@@ -29,7 +29,7 @@ const TxsWithSort = ({
   return (
     <>
       <Show below="lg" ssr={ false }><Box>{ sortedTxs.map(tx => <TxsListItem tx={ tx } key={ tx.hash }/>) }</Box></Show>
-      <Show above="lg" ssr={ false }><TxsTable txs={ sortedTxs } sort={ sort } sorting={ sorting }/></Show>
+      <Hide below="lg" ssr={ false }><TxsTable txs={ sortedTxs } sort={ sort } sorting={ sorting }/></Hide>
     </>
   );