"go back" and ref fixes

lib/hooks/useNavItems.tsx

@@ -30,7 +30,7 @@ export default function useNavItems() {
       { text: 'Tokens', url: link('tokens'), icon: tokensIcon, isActive: currentRoute === 'tokens', isNewUi: true },
       { text: 'Accounts', url: link('accounts'), icon: walletIcon, isActive: currentRoute === 'accounts', isNewUi: true },
       isMarketplaceFilled ?
-        { text: 'Apps', url: link('apps'), icon: appsIcon, isActive: currentRoute === 'apps', isNewUi: true } : null,
+        { text: 'Apps', url: link('apps'), icon: appsIcon, isActive: currentRoute.startsWith('app'), isNewUi: true } : null,
       { text: 'Charts & stats', url: link('stats'), icon: statsIcon, isActive: currentRoute === 'stats', isNewUi: true },
       // there should be custom site sections like Stats, Faucet, More, etc but never an 'other'
       // examples https://explorer-edgenet.polygon.technology/ and https://explorer.celo.org/

ui/pages/Block.tsx

@@ -6,7 +6,6 @@ import type { RoutedTab } from 'ui/shared/RoutedTabs/types';
 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 TextAd from 'ui/shared/ad/TextAd';
 import Page from 'ui/shared/Page/Page';
@@ -24,7 +23,6 @@ const TAB_LIST_PROPS = {
 const BlockPageContent = () => {
   const router = useRouter();
   const isMobile = useIsMobile();
-  const isInBrowser = isBrowser();
   const appProps = useAppContext();
 
   const blockTxsQuery = useQueryWithPages({
@@ -46,15 +44,14 @@ const BlockPageContent = () => {
 
   const hasPagination = !isMobile && router.query.tab === 'txs' && blockTxsQuery.isPaginationVisible;
 
-  const referrer = isInBrowser ? window.document.referrer : appProps.referrer;
-  const hasGoBackLink = referrer && referrer.includes('/blocks');
+  const hasGoBackLink = appProps.referrer && appProps.referrer.includes('/blocks');
 
   return (
     <Page>
       <TextAd mb={ 6 }/>
       <PageTitle
         text={ `Block #${ router.query.id }` }
-        backLinkUrl={ hasGoBackLink ? referrer : undefined }
+        backLinkUrl={ hasGoBackLink ? appProps.referrer : undefined }
         backLinkLabel="Back to blocks list"
       />
       <RoutedTabs

ui/pages/Transaction.tsx

@@ -6,7 +6,6 @@ import type { RoutedTab } from 'ui/shared/RoutedTabs/types';
 
 import useApiQuery from 'lib/api/useApiQuery';
 import { useAppContext } from 'lib/appContext';
-import isBrowser from 'lib/isBrowser';
 import networkExplorers from 'lib/networks/networkExplorers';
 import TextAd from 'ui/shared/ad/TextAd';
 import LinkExternal from 'ui/shared/LinkExternal';
@@ -33,11 +32,8 @@ const TABS: Array<RoutedTab> = [
 const TransactionPageContent = () => {
   const router = useRouter();
   const appProps = useAppContext();
-  const isInBrowser = isBrowser();
 
-  const referrer = isInBrowser ? window.document.referrer : appProps.referrer;
-
-  const hasGoBackLink = referrer && referrer.includes('/txs');
+  const hasGoBackLink = appProps.referrer && appProps.referrer.includes('/txs');
 
   const { data } = useApiQuery('tx', {
     pathParams: { id: router.query.id?.toString() },
@@ -74,7 +70,7 @@ const TransactionPageContent = () => {
       <PageTitle
         text="Transaction details"
         additionals={ additionals }
-        backLinkUrl={ hasGoBackLink ? referrer : undefined }
+        backLinkUrl={ hasGoBackLink ? appProps.referrer : undefined }
         backLinkLabel="Back to transactions list"
       />
       <RoutedTabs tabs={ TABS }/>

ui/shared/LinkInternal.tsx

 import type { LinkProps } from '@chakra-ui/react';
 import { Link } from '@chakra-ui/react';
 import NextLink from 'next/link';
+import type { LegacyRef } from 'react';
 import React from 'react';
 
 // NOTE! use this component only for links to pages that are completely implemented in new UI
-const LinkInternal = (props: LinkProps) => {
+const LinkInternal = (props: LinkProps, ref: LegacyRef<HTMLAnchorElement>) => {
   if (!props.href) {
-    return <Link { ...props }/>;
+    return <Link { ...props } ref={ ref }/>;
   }
 
   return (
     <NextLink href={ props.href } passHref target={ props.target }>
-      <Link { ...props }/>
+      <Link { ...props } ref={ ref }/>
     </NextLink>
   );
 };
 
-export default React.memo(LinkInternal);
+export default React.memo(React.forwardRef(LinkInternal));