Merge pull request #962 from blockscout/tom2drum/issue_958

verified token info: project sector label

ui/pages/Token.tsx

@@ -232,6 +232,11 @@ const TokenPageContent = () => {
       tagsBefore={ [
         tokenQuery.data ? { label: tokenQuery.data?.type, display_name: tokenQuery.data?.type } : undefined,
       ] }
+      tagsAfter={
+        verifiedInfoQuery.data?.projectSector ?
+          [ { label: verifiedInfoQuery.data.projectSector, display_name: verifiedInfoQuery.data.projectSector } ] :
+          undefined
+      }
       contentAfter={
         <NetworkExplorers type="token" pathParam={ hashString } ml="auto" hideText={ isMobile }/>
       }

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

-import { Flex, Text, Box, Grid } from '@chakra-ui/react';
+import { Flex, Text, Grid } from '@chakra-ui/react';
 import React from 'react';
 
 import type { TokenVerifiedInfo } from 'types/api/token';
@@ -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
@@ -59,9 +70,9 @@ const Content = ({ data }: Props) => {
     .filter(({ href }) => href);
 
   return (
-    <Box fontSize="sm">
+    <Flex fontSize="sm" flexDir="column" rowGap={ 5 }>
       { (description || docs || support) && (
-        <>
+        <div>
           <Text variant="secondary" fontSize="xs">Description and support info</Text>
           { description }
           { (docs || support) && (
@@ -70,25 +81,25 @@ const Content = ({ data }: Props) => {
               { docs }
             </Flex>
           ) }
-        </>
+        </div>
       ) }
       { socialLinks.length > 0 && (
-        <>
-          <Text variant="secondary" fontSize="xs" mt={ 5 }>Links</Text>
+        <div>
+          <Text variant="secondary" fontSize="xs">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>
-        </>
+        </div>
       ) }
       { priceTickersLinks.length > 0 && (
-        <>
-          <Text variant="secondary" fontSize="xs" mt={ 5 }>Crypto markets</Text>
+        <div>
+          <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>
-        </>
+        </div>
       ) }
-    </Box>
+    </Flex>
   );
 };
 

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 }/>
       </>
     );
   })();