move MoreInfo button to separate component

ui/marketplace/MarketplaceListWithScores/LinkButton.tsx

@@ -7,7 +7,6 @@ import type { IconName } from 'ui/shared/IconSvg';
 import IconSvg from 'ui/shared/IconSvg';
 
 export enum LinkButtonVariants {
-  DEFAULT = 'default',
   ALL_CONTRACTS = 'all contracts',
   VERIFIED_CONTRACTS = 'verified contracts',
 }
@@ -23,20 +22,15 @@ const values = {
     iconColor: 'green.500',
     tooltip: `Number of verified contracts on ${ config.chain.name }`,
   },
-  [LinkButtonVariants.DEFAULT]: {
-    icon: null,
-    iconColor: null,
-    tooltip: null,
-  },
 };
 
 interface Props {
   children: string;
   onClick: (event: MouseEvent) => void;
-  variant?: LinkButtonVariants;
+  variant: LinkButtonVariants;
 }
 
-const LinkButton = ({ children, onClick, variant = LinkButtonVariants.DEFAULT }: Props) => {
+const LinkButton = ({ children, onClick, variant }: Props) => {
   const { icon, iconColor, tooltip } = values[variant];
   return (
     <Tooltip

ui/marketplace/MarketplaceListWithScores/ListItem.tsx

@@ -12,6 +12,7 @@ import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import AppLink from './AppLink';
 import AppSecurityReport from './AppSecurityReport';
 import LinkButton, { LinkButtonVariants } from './LinkButton';
+import MoreInfoButton from './MoreInfoButton';
 
 type Props = {
   app: MarketplaceAppPreview & { securityReport?: any }; // eslint-disable-line @typescript-eslint/no-explicit-any
@@ -102,7 +103,7 @@ const ListItem = ({ app, onInfoClick, isFavorite, onFavoriteClick, isLoading, on
             <LinkButton onClick={ showVerifiedContracts } variant={ LinkButtonVariants.VERIFIED_CONTRACTS }>{ verifiedNumber }</LinkButton>
           </Flex>
           { !isLoading && (
-            <LinkButton onClick={ handleInfoClick }>More info</LinkButton>
+            <MoreInfoButton onClick={ handleInfoClick }/>
           ) }
         </Flex>
       </Flex>

ui/marketplace/MarketplaceListWithScores/MoreInfoButton.tsx

+import { Link } from '@chakra-ui/react';
+import React from 'react';
+import type { MouseEvent } from 'react';
+
+interface Props {
+  onClick: (event: MouseEvent) => void;
+}
+
+const MoreInfoButton = ({ onClick }: Props) => (
+  <Link
+    fontSize="sm"
+    onClick={ onClick }
+    fontWeight="500"
+    display="inline-flex"
+  >
+    More info
+  </Link>
+);
+
+export default MoreInfoButton;

ui/marketplace/MarketplaceListWithScores/TableItem.tsx

@@ -11,6 +11,7 @@ import IconSvg from 'ui/shared/IconSvg';
 import AppLink from './AppLink';
 import AppSecurityReport from './AppSecurityReport';
 import LinkButton, { LinkButtonVariants } from './LinkButton';
+import MoreInfoButton from './MoreInfoButton';
 
 type Props = {
   app: MarketplaceAppPreview & { securityReport?: any }; // eslint-disable-line @typescript-eslint/no-explicit-any
@@ -93,7 +94,7 @@ const TableItem = ({
         <LinkButton onClick={ showVerifiedContracts } variant={ LinkButtonVariants.VERIFIED_CONTRACTS }>{ verifiedNumber }</LinkButton>
       </Td>
       <Td verticalAlign="middle" isNumeric>
-        <LinkButton onClick={ handleInfoClick }>More info</LinkButton>
+        <MoreInfoButton onClick={ handleInfoClick }/>
       </Td>
     </Tr>
   );