link overlay component

eslint.config.mjs

@@ -32,8 +32,8 @@ const RESTRICTED_MODULES = {
     {
       name: '@chakra-ui/react',
       importNames: [
-        'Menu', 'useToast', 'useDisclosure', 'useClipboard', 'Tooltip', 'Skeleton', 'IconButton', 'Button', 'ButtonGroup', 'Link', 'Tag', 'Switch',
-        'Image', 'Popover', 'PopoverTrigger', 'PopoverContent', 'PopoverBody', 'PopoverFooter',
+        'Menu', 'useToast', 'useDisclosure', 'useClipboard', 'Tooltip', 'Skeleton', 'IconButton', 'Button', 'ButtonGroup', 'Link', 'LinkBox', 'LinkOverlay',
+        'Tag', 'Switch', 'Image', 'Popover', 'PopoverTrigger', 'PopoverContent', 'PopoverBody', 'PopoverFooter',
         'DrawerRoot', 'DrawerBody', 'DrawerContent', 'DrawerOverlay', 'DrawerBackdrop', 'DrawerTrigger', 'Drawer',
         'Alert', 'AlertIcon', 'AlertTitle', 'AlertDescription',
         'Heading', 'Badge', 'Tabs', 'Show', 'Hide', 'Checkbox',

toolkit/chakra/link.tsx

 import type { LinkProps as ChakraLinkProps } from '@chakra-ui/react';
-import { Link as ChakraLink } from '@chakra-ui/react';
+import { Link as ChakraLink, LinkBox as ChakraLinkBox, LinkOverlay as ChakraLinkOverlay } from '@chakra-ui/react';
 import NextLink from 'next/link';
 import type { LinkProps as NextLinkProps } from 'next/link';
 import React from 'react';
@@ -21,7 +21,7 @@ export const LinkExternalIcon = ({ color }: { color?: ChakraLinkProps['color'] }
   />
 );
 
-export interface LinkProps extends Pick<NextLinkProps, 'shallow' | 'prefetch' | 'scroll'>, ChakraLinkProps {
+interface LinkPropsChakra extends ChakraLinkProps {
   loading?: boolean;
   external?: boolean;
   iconColor?: ChakraLinkProps['color'];
@@ -29,9 +29,28 @@ export interface LinkProps extends Pick<NextLinkProps, 'shallow' | 'prefetch' |
   disabled?: boolean;
 }
 
+interface LinkPropsNext extends Pick<NextLinkProps, 'shallow' | 'prefetch' | 'scroll'> {}
+
+export interface LinkProps extends LinkPropsChakra, LinkPropsNext {}
+
+const splitProps = (props: LinkProps): { chakra: LinkPropsChakra; next: NextLinkProps } => {
+  const { scroll = true, shallow = false, prefetch = false, ...rest } = props;
+
+  return {
+    chakra: rest,
+    next: {
+      href: rest.href as NextLinkProps['href'],
+      scroll,
+      shallow,
+      prefetch,
+    },
+  };
+};
+
 export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
   function Link(props, ref) {
-    const { external, loading, href, children, scroll = true, iconColor, noIcon, shallow, prefetch = false, disabled, ...rest } = props;
+    const { chakra, next } = splitProps(props);
+    const { external, loading, href, children, disabled, noIcon, iconColor, ...rest } = chakra;
 
     if (external) {
       return (
@@ -60,13 +79,8 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
           { ...(disabled ? { 'data-disabled': true } : {}) }
           { ...rest }
         >
-          { href ? (
-            <NextLink
-              href={ href as NextLinkProps['href'] }
-              scroll={ scroll }
-              shallow={ shallow }
-              prefetch={ prefetch }
-            >
+          { next.href ? (
+            <NextLink { ...next }>
               { children }
             </NextLink>
           ) :
@@ -77,3 +91,26 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
     );
   },
 );
+
+export const LinkBox = ChakraLinkBox;
+
+export const LinkOverlay = React.forwardRef<HTMLAnchorElement, LinkProps>(
+  function LinkOverlay(props, ref) {
+    const { chakra, next } = splitProps(props);
+    const { children, external, ...rest } = chakra;
+
+    if (external) {
+      return (
+        <ChakraLinkOverlay ref={ ref } target="_blank" rel="noopener noreferrer" { ...rest }>
+          { children }
+        </ChakraLinkOverlay>
+      );
+    }
+
+    return (
+      <ChakraLinkOverlay ref={ ref } asChild={ Boolean(next.href) } { ...rest }>
+        { next.href ? <NextLink { ...next }>{ children }</NextLink> : children }
+      </ChakraLinkOverlay>
+    );
+  },
+);

ui/marketplace/Banner/FeaturedApp.tsx

-import { LinkBox, Flex, LinkOverlay, Text } from '@chakra-ui/react';
+import { Flex, Text } from '@chakra-ui/react';
 import type { MouseEvent } from 'react';
 import React, { useCallback } from 'react';
 
 import type { MarketplaceAppPreview } from 'types/client/marketplace';
 
+import { route } from 'nextjs-routes';
+
 import useIsMobile from 'lib/hooks/useIsMobile';
 import * as mixpanel from 'lib/mixpanel/index';
 import { useColorModeValue } from 'toolkit/chakra/color-mode';
 import { IconButton } from 'toolkit/chakra/icon-button';
 import { Image } from 'toolkit/chakra/image';
-import { Link } from 'toolkit/chakra/link';
+import { Link, LinkBox, LinkOverlay } from 'toolkit/chakra/link';
 import { Skeleton } from 'toolkit/chakra/skeleton';
-import NextLink from 'ui/shared/NextLink';
 
 import FavoriteIcon from '../FavoriteIcon';
 import MarketplaceAppIntegrationIcon from '../MarketplaceAppIntegrationIcon';
@@ -60,7 +61,7 @@ const FeaturedApp = ({
   }
 
   return (
-    <LinkBox role="group">
+    <LinkBox>
       <Flex
         gap={ 6 }
         borderRadius="md"
@@ -94,17 +95,13 @@ const FeaturedApp = ({
               fontFamily="heading"
               lineHeight="36px"
             >
-              { external ? (
-                <LinkOverlay href={ url } target="_blank" marginRight={ 2 }>
-                  { title }
-                </LinkOverlay>
-              ) : (
-                <NextLink href={{ pathname: '/apps/[id]', query: { id } }} passHref legacyBehavior>
-                  <LinkOverlay marginRight={ 2 }>
-                    { title }
-                  </LinkOverlay>
-                </NextLink>
-              ) }
+              <LinkOverlay
+                href={ external ? url : route({ pathname: '/apps/[id]', query: { id } }) }
+                marginRight={ 2 }
+                external={ external }
+              >
+                { title }
+              </LinkOverlay>
               <MarketplaceAppIntegrationIcon external={ external } internalWallet={ internalWallet }/>
             </Skeleton>
 

ui/marketplace/Banner/FeaturedAppMobile.tsx

-import { LinkBox, Flex, Text } from '@chakra-ui/react';
+import { Flex, Text } from '@chakra-ui/react';
 import type { MouseEvent } from 'react';
 import React from 'react';
 
@@ -7,7 +7,7 @@ import type { MarketplaceAppPreview } from 'types/client/marketplace';
 import { useColorModeValue } from 'toolkit/chakra/color-mode';
 import { IconButton } from 'toolkit/chakra/icon-button';
 import { Image } from 'toolkit/chakra/image';
-import { Link } from 'toolkit/chakra/link';
+import { Link, LinkBox } from 'toolkit/chakra/link';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 
 import FavoriteIcon from '../FavoriteIcon';

ui/marketplace/MarketplaceAppCard.tsx

-import { LinkBox, chakra, Flex, Text } from '@chakra-ui/react';
+import { chakra, Flex, Text } from '@chakra-ui/react';
 import type { MouseEvent } from 'react';
 import React, { useCallback } from 'react';
 
@@ -9,7 +9,7 @@ import isBrowser from 'lib/isBrowser';
 import { useColorModeValue } from 'toolkit/chakra/color-mode';
 import { IconButton } from 'toolkit/chakra/icon-button';
 import { Image } from 'toolkit/chakra/image';
-import { Link } from 'toolkit/chakra/link';
+import { Link, LinkBox } from 'toolkit/chakra/link';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 

ui/marketplace/MarketplaceAppCardLink.tsx

-import { LinkOverlay, chakra } from '@chakra-ui/react';
+import { chakra } from '@chakra-ui/react';
 import React from 'react';
 import type { MouseEvent } from 'react';
 
-import NextLink from 'ui/shared/NextLink';
+import { route } from 'nextjs-routes';
+
+import { LinkOverlay } from 'toolkit/chakra/link';
 
 type Props = {
   id: string;
@@ -18,17 +20,16 @@ const MarketplaceAppCardLink = ({ url, external, id, title, onClick, className }
     onClick?.(event, id);
   }, [ onClick, id ]);
 
-  // TODO @tom2drum create LinkOverlay component
-  return external ? (
-    <LinkOverlay href={ url } marginRight={ 2 } className={ className } target="_blank">
+  return (
+    <LinkOverlay
+      href={ external ? url : route({ pathname: '/apps/[id]', query: { id } }) }
+      marginRight={ 2 }
+      className={ className }
+      external={ external }
+      onClick={ handleClick }
+    >
       { title }
     </LinkOverlay>
-  ) : (
-    <NextLink href={{ pathname: '/apps/[id]', query: { id } }} passHref legacyBehavior>
-      <LinkOverlay onClick={ handleClick } marginRight={ 2 } className={ className }>
-        { title }
-      </LinkOverlay>
-    </NextLink>
   );
 };
 

ui/shared/nft/NftHtml.tsx

-import { chakra, LinkOverlay } from '@chakra-ui/react';
+import { chakra } from '@chakra-ui/react';
 import React from 'react';
 
+import { LinkOverlay } from 'toolkit/chakra/link';
+
 import { mediaStyleProps } from './utils';
 
 interface Props {

ui/showcases/Link.tsx

@@ -10,7 +10,7 @@ import * as blockMock from 'mocks/blocks/block';
 import * as ensMock from 'mocks/ens/domain';
 import * as poolMock from 'mocks/pools/pool';
 import * as txMock from 'mocks/txs/tx';
-import { Link } from 'toolkit/chakra/link';
+import { Link, LinkBox, LinkOverlay } from 'toolkit/chakra/link';
 import CutLinkDetails from 'toolkit/components/CutLink/CutLinkDetails';
 import CutLinkList from 'toolkit/components/CutLink/CutLinkList';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
@@ -249,6 +249,22 @@ const LinkShowcase = () => {
             <PoolEntity pool={ poolMock.noIcons } isLoading/>
           </Sample>
         </SamplesStack>
+
+        <SectionSubHeader>Link overlay</SectionSubHeader>
+        <SamplesStack>
+          <Sample label="Internal link">
+            <LinkBox p={ 2 } display="flex" flexDirection="column" columnGap={ 2 } borderWidth="1px" borderColor="border.divider" borderRadius="base">
+              <LinkOverlay href="/blocks">Main link</LinkOverlay>
+              <Link href="/txs">Inner link</Link>
+            </LinkBox>
+          </Sample>
+          <Sample label="External link">
+            <LinkBox p={ 2 } display="flex" flexDirection="column" columnGap={ 2 } borderWidth="1px" borderColor="border.divider" borderRadius="base">
+              <LinkOverlay href="https://blockscout.com" external>Main link</LinkOverlay>
+              <Link href="https://blockscout.com/txs" external>Inner link</Link>
+            </LinkBox>
+          </Sample>
+        </SamplesStack>
       </Section>
     </Container>
   );