don't show description section if there is no description or docs or support link

ui/token/TokenProjectInfo.tsx

@@ -9,7 +9,7 @@ import type { TokenVerifiedInfo } from 'types/api/token';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
 
-import Content from './TokenProjectInfo/Content';
+import Content, { hasContent } from './TokenProjectInfo/Content';
 import TriggerButton from './TokenProjectInfo/TriggerButton';
 
 interface Props {
@@ -20,6 +20,10 @@ const TokenProjectInfo = ({ data }: Props) => {
   const isMobile = useIsMobile();
   const { isOpen, onToggle, onClose } = useDisclosure();
 
+  if (!hasContent(data)) {
+    return null;
+  }
+
   if (isMobile) {
     return (
       <>

ui/token/TokenProjectInfo/Content.tsx

@@ -45,9 +45,20 @@ const PRICE_TICKERS: Array<Omit<ServiceLinkProps, 'href'>> = [
   { field: 'defiLlamaTicker', icon: iconDefiLlama, title: 'DefiLlama' },
 ];
 
+export function hasContent(data: TokenVerifiedInfo): boolean {
+  const fields: Array<keyof TokenVerifiedInfo> = [
+    'projectDescription',
+    'docs',
+    'support',
+    ...SOCIAL_LINKS.map(({ field }) => field),
+    ...PRICE_TICKERS.map(({ field }) => field),
+  ];
+  return fields.some((field) => data[field]);
+}
+
 const Content = ({ data }: Props) => {
-  const docs = <DocsLink href={ data.docs }/>;
-  const support = <SupportLink url={ data.support }/>;
+  const docs = data.docs ? <DocsLink href={ data.docs }/> : null;
+  const support = data.support ? <SupportLink url={ data.support }/> : null;
   const description = data.projectDescription ? <Text fontSize="sm" mt={ 3 }>{ data.projectDescription }</Text> : null;
 
   const socialLinks = SOCIAL_LINKS
@@ -62,7 +73,7 @@ const Content = ({ data }: Props) => {
     <Box fontSize="sm">
       { (description || docs || support) && (
         <>
-          <Text variant="secondary" fontSize="xs">Description and support info</Text>
+          <Text variant="secondary" fontSize="xs" mb={ 5 }>Description and support info</Text>
           { description }
           { (docs || support) && (
             <Flex alignItems="center" flexWrap="wrap" columnGap={ 6 } mt={ 3 }>
@@ -74,7 +85,7 @@ const Content = ({ data }: Props) => {
       ) }
       { socialLinks.length > 0 && (
         <>
-          <Text variant="secondary" fontSize="xs" mt={ 5 }>Links</Text>
+          <Text variant="secondary" fontSize="xs" mb={ 5 }>Links</Text>
           <Grid templateColumns={{ base: 'repeat(2, 1fr)', lg: 'repeat(3, 1fr)' }} columnGap={ 4 } rowGap={ 3 } mt={ 3 }>
             { socialLinks.map((link) => <ServiceLink key={ link.field } { ...link }/>) }
           </Grid>
@@ -82,7 +93,7 @@ const Content = ({ data }: Props) => {
       ) }
       { priceTickersLinks.length > 0 && (
         <>
-          <Text variant="secondary" fontSize="xs" mt={ 5 }>Crypto markets</Text>
+          <Text variant="secondary" fontSize="xs">Crypto markets</Text>
           <Grid templateColumns={{ base: 'repeat(2, 1fr)', lg: 'repeat(3, 1fr)' }} columnGap={ 4 } rowGap={ 3 } mt={ 3 }>
             { priceTickersLinks.map((link) => <ServiceLink key={ link.field } { ...link }/>) }
           </Grid>

ui/token/TokenProjectInfo/DocsLink.tsx

@@ -4,14 +4,10 @@ import React from 'react';
 import iconDocs from 'icons/docs.svg';
 
 interface Props {
-  href?: string;
+  href: string;
 }
 
 const DocsLink = ({ href }: Props) => {
-  if (!href) {
-    return null;
-  }
-
   return (
     <Link
       href={ href }

ui/token/TokenProjectInfo/SupportLink.tsx

@@ -5,14 +5,10 @@ import iconEmail from 'icons/email.svg';
 import iconLink from 'icons/link.svg';
 
 interface Props {
-  url?: string;
+  url: string;
 }
 
 const SupportLink = ({ url }: Props) => {
-  if (!url) {
-    return null;
-  }
-
   const isEmail = url.includes('@');
   const href = isEmail ? `mailto:${ url }` : url;
   const icon = isEmail ? iconEmail : iconLink;

ui/token/TokenVerifiedInfo.tsx

@@ -51,7 +51,7 @@ const TokenVerifiedInfo = ({ verifiedInfoQuery, isVerifiedInfoEnabled }: Props)
     return (
       <>
         { websiteLink }
-        { Boolean(data.tokenAddress) && <TokenProjectInfo data={ data }/> }
+        <TokenProjectInfo data={ data }/>
       </>
     );
   })();