refactor back link for page title

ui/pages/Address.tsx

@@ -38,8 +38,6 @@ const AddressPageContent = () => {
 
   const appProps = useAppContext();
 
-  const hasGoBackLink = appProps.referrer && appProps.referrer.includes('/accounts');
-
   const tabsScrollRef = React.useRef<HTMLDivElement>(null);
   const hash = getQueryParamString(router.query.hash);
 
@@ -98,6 +96,19 @@ const AddressPageContent = () => {
 
   const content = addressQuery.isError ? null : <RoutedTabs tabs={ tabs } tabListProps={{ mt: 8 }}/>;
 
+  const backLink = React.useMemo(() => {
+    const hasGoBackLink = appProps.referrer && appProps.referrer.includes('/accounts');
+
+    if (!hasGoBackLink) {
+      return;
+    }
+
+    return {
+      label: 'Back to top accounts list',
+      url: appProps.referrer,
+    };
+  }, [ appProps.referrer ]);
+
   return (
     <Page>
       { addressQuery.isLoading ? <Skeleton h={{ base: 12, lg: 6 }} mb={ 6 } w="100%" maxW="680px"/> : <TextAd mb={ 6 }/> }
@@ -107,8 +118,7 @@ const AddressPageContent = () => {
         <PageTitle
           text={ `${ addressQuery.data?.is_contract ? 'Contract' : 'Address' } details` }
           additionalsRight={ tagsNode }
-          backLinkUrl={ hasGoBackLink ? appProps.referrer : undefined }
-          backLinkLabel="Back to top accounts list"
+          backLink={ backLink }
         />
       ) }
       <AddressDetails addressQuery={ addressQuery } scrollRef={ tabsScrollRef }/>

ui/pages/Block.tsx

@@ -54,7 +54,18 @@ const BlockPageContent = () => {
 
   const hasPagination = !isMobile && tab === 'txs' && blockTxsQuery.isPaginationVisible;
 
-  const hasGoBackLink = appProps.referrer && appProps.referrer.includes('/blocks');
+  const backLink = React.useMemo(() => {
+    const hasGoBackLink = appProps.referrer && appProps.referrer.includes('/blocks');
+
+    if (!hasGoBackLink) {
+      return;
+    }
+
+    return {
+      label: 'Back to blocks list',
+      url: appProps.referrer,
+    };
+  }, [ appProps.referrer ]);
 
   return (
     <Page>
@@ -64,8 +75,7 @@ const BlockPageContent = () => {
       ) : (
         <PageTitle
           text={ `Block #${ blockQuery.data?.height }` }
-          backLinkUrl={ hasGoBackLink ? appProps.referrer : undefined }
-          backLinkLabel="Back to blocks list"
+          backLink={ backLink }
         />
       ) }
       <RoutedTabs

ui/pages/ContractVerification.tsx

@@ -20,7 +20,6 @@ import PageTitle from 'ui/shared/Page/PageTitle';
 
 const ContractVerification = () => {
   const appProps = useAppContext();
-  const hasGoBackLink = appProps.referrer && appProps.referrer.includes('/address');
   const router = useRouter();
 
   const hash = getQueryParamString(router.query.hash);
@@ -83,12 +82,24 @@ const ContractVerification = () => {
     );
   })();
 
+  const backLink = React.useMemo(() => {
+    const hasGoBackLink = appProps.referrer && appProps.referrer.includes('/address');
+
+    if (!hasGoBackLink) {
+      return;
+    }
+
+    return {
+      label: 'Back to contract',
+      url: appProps.referrer,
+    };
+  }, [ appProps.referrer ]);
+
   return (
     <Page>
       <PageTitle
         text="New smart contract verification"
-        backLinkUrl={ hasGoBackLink ? appProps.referrer : undefined }
-        backLinkLabel="Back to contract"
+        backLink={ backLink }
       />
       { hash && (
         <Address mb={ 12 }>

ui/pages/CsvExport.tsx

@@ -50,7 +50,6 @@ const CsvExport = () => {
 
   const addressHash = router.query.address?.toString() || '';
   const exportType = router.query.type?.toString() || '';
-  const hasGoBackLink = appProps.referrer && appProps.referrer.includes('/address');
 
   const addressQuery = useApiQuery('address', {
     pathParams: { hash: addressHash },
@@ -59,6 +58,19 @@ const CsvExport = () => {
     },
   });
 
+  const backLink = React.useMemo(() => {
+    const hasGoBackLink = appProps.referrer && appProps.referrer.includes('/address');
+
+    if (!hasGoBackLink) {
+      return;
+    }
+
+    return {
+      label: 'Back to address',
+      url: appProps.referrer,
+    };
+  }, [ appProps.referrer ]);
+
   if (!isCorrectExportType(exportType) || !addressHash || addressQuery.error?.status === 400) {
     throw Error('Not found', { cause: { status: 404 } });
   }
@@ -79,8 +91,7 @@ const CsvExport = () => {
     <Page>
       <PageTitle
         text="Export data to CSV file"
-        backLinkUrl={ hasGoBackLink ? appProps.referrer : undefined }
-        backLinkLabel="Back to address"
+        backLink={ backLink }
       />
       <Flex mb={ 10 } whiteSpace="pre-wrap" flexWrap="wrap">
         <span>Export { EXPORT_TYPES[exportType].text } for address </span>

ui/pages/Sol2Uml.tsx

@@ -17,14 +17,25 @@ const Sol2Uml = () => {
   const appProps = useAppContext();
 
   const addressHash = router.query.address?.toString() || '';
-  const hasGoBackLink = appProps.referrer && appProps.referrer.includes('/address');
+
+  const backLink = React.useMemo(() => {
+    const hasGoBackLink = appProps.referrer && appProps.referrer.includes('/address');
+
+    if (!hasGoBackLink) {
+      return;
+    }
+
+    return {
+      label: 'Back to address',
+      url: appProps.referrer,
+    };
+  }, [ appProps.referrer ]);
 
   return (
     <Page>
       <PageTitle
         text="Solidity UML diagram"
-        backLinkUrl={ hasGoBackLink ? appProps.referrer : undefined }
-        backLinkLabel="Back to address"
+        backLink={ backLink }
       />
       <Flex mb={ 10 }>
         <span>For contract</span>

ui/pages/Token.tsx

@@ -34,8 +34,6 @@ const TokenPageContent = () => {
 
   const appProps = useAppContext();
 
-  const hasGoBackLink = appProps.referrer && appProps.referrer.includes('/tokens');
-
   const scrollRef = React.useRef<HTMLDivElement>(null);
 
   const hashString = router.query.hash?.toString();
@@ -152,6 +150,19 @@ const TokenPageContent = () => {
     };
   }, [ isMobile ]);
 
+  const backLink = React.useMemo(() => {
+    const hasGoBackLink = appProps.referrer && appProps.referrer.includes('/tokens');
+
+    if (!hasGoBackLink) {
+      return;
+    }
+
+    return {
+      label: 'Back to tokens list',
+      url: appProps.referrer,
+    };
+  }, [ appProps.referrer ]);
+
   return (
     <Page>
       { tokenQuery.isLoading ? (
@@ -167,8 +178,7 @@ const TokenPageContent = () => {
           <TextAd mb={ 6 }/>
           <PageTitle
             text={ `${ tokenQuery.data?.name || 'Unnamed' }${ tokenSymbolText } token` }
-            backLinkUrl={ hasGoBackLink ? appProps.referrer : undefined }
-            backLinkLabel="Back to tokens list"
+            backLink={ backLink }
             additionalsLeft={ (
               <TokenLogo hash={ tokenQuery.data?.address } name={ tokenQuery.data?.name } boxSize={ 6 }/>
             ) }

ui/pages/Transaction.tsx

@@ -33,7 +33,6 @@ const TransactionPageContent = () => {
   const router = useRouter();
   const appProps = useAppContext();
 
-  const hasGoBackLink = appProps.referrer && appProps.referrer.includes('/txs');
   const hash = getQueryParamString(router.query.hash);
 
   const { data } = useApiQuery('tx', {
@@ -65,14 +64,26 @@ const TransactionPageContent = () => {
     </Flex>
   );
 
+  const backLink = React.useMemo(() => {
+    const hasGoBackLink = appProps.referrer && appProps.referrer.includes('/txs');
+
+    if (!hasGoBackLink) {
+      return;
+    }
+
+    return {
+      label: 'Back to transactions list',
+      url: appProps.referrer,
+    };
+  }, [ appProps.referrer ]);
+
   return (
     <Page>
       <TextAd mb={ 6 }/>
       <PageTitle
         text="Transaction details"
         additionalsRight={ additionals }
-        backLinkUrl={ hasGoBackLink ? appProps.referrer : undefined }
-        backLinkLabel="Back to transactions list"
+        backLink={ backLink }
       />
       <RoutedTabs tabs={ TABS }/>
     </Page>

ui/shared/Page/PageTitle.pw.tsx

@@ -43,8 +43,7 @@ test('with text ad, back link and addons +@mobile +@dark-mode', async({ mount })
       <PageTitle
         text="Title"
         withTextAd
-        backLinkLabel="Back"
-        backLinkUrl="back"
+        backLink={{ label: 'Back', url: 'back' }}
         // additionalsLeft={ left }
         additionalsRight="Privet"
       />
@@ -60,8 +59,7 @@ test('long title with text ad, back link and addons +@mobile', async({ mount })
       <PageTitle
         text="This title is long, really long"
         withTextAd
-        backLinkLabel="Back"
-        backLinkUrl="back"
+        backLink={{ label: 'Back', url: 'back' }}
         additionalsRight="Privet, kak dela?"
       />
     </TestApp>,

ui/shared/Page/PageTitle.tsx

-import { Heading, Flex, Grid, Tooltip, Icon, chakra } from '@chakra-ui/react';
+import { Heading, Flex, Grid, Tooltip, Icon, Link, chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import eastArrowIcon from 'icons/arrows/east.svg';
 import TextAd from 'ui/shared/ad/TextAd';
 import LinkInternal from 'ui/shared/LinkInternal';
 
+type BackLinkProp = { label: string; url: string } | { label: string; onClick: () => void };
+
 type Props = {
   text: string;
   additionalsLeft?: React.ReactNode;
   additionalsRight?: React.ReactNode;
   withTextAd?: boolean;
   className?: string;
-  backLinkLabel?: string;
-  backLinkUrl?: string;
+  backLink?: BackLinkProp;
 }
 
-const PageTitle = ({ text, additionalsLeft, additionalsRight, withTextAd, backLinkUrl, backLinkLabel, className }: Props) => {
+const PageTitle = ({ text, additionalsLeft, additionalsRight, withTextAd, backLink, className }: Props) => {
   const title = (
     <Heading
       as="h1"
@@ -27,6 +28,32 @@ const PageTitle = ({ text, additionalsLeft, additionalsRight, withTextAd, backLi
     </Heading>
   );
 
+  const backLinkComponent = (() => {
+    if (!backLink) {
+      return null;
+    }
+
+    const icon = <Icon as={ eastArrowIcon } boxSize={ 6 } transform="rotate(180deg)" margin="auto"/>;
+
+    if ('url' in backLink) {
+      return (
+        <Tooltip label={ backLink.label }>
+          <LinkInternal display="inline-flex" href={ backLink.url } h="40px">
+            { icon }
+          </LinkInternal>
+        </Tooltip>
+      );
+    }
+
+    return (
+      <Tooltip label={ backLink.label }>
+        <Link display="inline-flex" onClick={ backLink.onClick } h="40px">
+          { icon }
+        </Link>
+      </Tooltip>
+    );
+  })();
+
   return (
     <Flex
       columnGap={ 3 }
@@ -39,16 +66,10 @@ const PageTitle = ({ text, additionalsLeft, additionalsRight, withTextAd, backLi
     >
       <Flex flexWrap="wrap" columnGap={ 3 } alignItems="center" width={ withTextAd ? 'unset' : '100%' } flexShrink={ 0 }>
         <Grid
-          templateColumns={ [ backLinkUrl && 'auto', additionalsLeft && 'auto', '1fr' ].filter(Boolean).join(' ') }
+          templateColumns={ [ backLinkComponent && 'auto', additionalsLeft && 'auto', '1fr' ].filter(Boolean).join(' ') }
           columnGap={ 3 }
         >
-          { backLinkUrl && (
-            <Tooltip label={ backLinkLabel }>
-              <LinkInternal display="inline-flex" href={ backLinkUrl } h="40px">
-                <Icon as={ eastArrowIcon } boxSize={ 6 } transform="rotate(180deg)" margin="auto"/>
-              </LinkInternal>
-            </Tooltip>
-          ) }
+          { backLinkComponent }
           { additionalsLeft !== undefined && (
             <Flex h="40px" alignItems="center">
               { additionalsLeft }