change layout and icons

ui/token/TokenDetails.tsx

@@ -99,14 +99,7 @@ const TokenDetails = ({ tokenQuery, verifiedInfoQuery, isVerifiedInfoEnabled }:
       rowGap={{ base: 1, lg: 3 }}
       templateColumns={{ base: 'minmax(0, 1fr)', lg: 'auto minmax(0, 1fr)' }} overflow="hidden"
     >
-      { verifiedInfoQuery.data && (
-        <DetailsInfoItem
-          title="Links"
-          hint="Links"
-        >
-          <TokenDetailsVerifiedInfo data={ verifiedInfoQuery.data }/>
-        </DetailsInfoItem>
-      ) }
+      { verifiedInfoQuery.data && <TokenDetailsVerifiedInfo data={ verifiedInfoQuery.data }/> }
       { exchangeRate && (
         <DetailsInfoItem
           title="Price"

ui/token/TokenDetails/TokenDetailsVerifiedInfo.tsx

@@ -3,10 +3,17 @@ import React from 'react';
 
 import type { TokenVerifiedInfo } from 'types/api/token';
 
-import githubIcon from 'icons/social/git.svg';
-import placeholderIcon from 'icons/social/stats.svg';
-import telegramIcon from 'icons/social/telega.svg';
-import twitterIcon from 'icons/social/tweet.svg';
+import iconDiscord from 'icons/social/discord_filled.svg';
+import iconFacebook from 'icons/social/facebook_filled.svg';
+import iconGithub from 'icons/social/github_filled.svg';
+import iconLinkedIn from 'icons/social/linkedin_filled.svg';
+import iconMedium from 'icons/social/medium_filled.svg';
+import iconOpenSea from 'icons/social/opensea_filled.svg';
+import iconReddit from 'icons/social/reddit_filled.svg';
+import iconSlack from 'icons/social/slack_filled.svg';
+import iconTelegram from 'icons/social/telegram_filled.svg';
+import iconTwitter from 'icons/social/twitter_filled.svg';
+import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import LinkExternal from 'ui/shared/LinkExternal';
 
 interface Props {
@@ -19,16 +26,16 @@ interface SocialLink {
   hint: string;
 }
 const SOCIAL_LINKS: Array<SocialLink> = [
-  { field: 'github', icon: githubIcon, hint: 'Github account' },
-  { field: 'twitter', icon: twitterIcon, hint: 'Twitter account' },
-  { field: 'telegram', icon: telegramIcon, hint: 'Telegram account' },
-  { field: 'openSea', icon: placeholderIcon, hint: 'OpenSea page' },
-  { field: 'linkedin', icon: placeholderIcon, hint: 'LinkedIn page' },
-  { field: 'facebook', icon: placeholderIcon, hint: 'Facebook account' },
-  { field: 'discord', icon: placeholderIcon, hint: 'Discord account' },
-  { field: 'medium', icon: placeholderIcon, hint: 'Medium account' },
-  { field: 'slack', icon: placeholderIcon, hint: 'Slack account' },
-  { field: 'reddit', icon: placeholderIcon, hint: 'Reddit account' },
+  { field: 'github', icon: iconGithub, hint: 'Github account' },
+  { field: 'twitter', icon: iconTwitter, hint: 'Twitter account' },
+  { field: 'telegram', icon: iconTelegram, hint: 'Telegram account' },
+  { field: 'openSea', icon: iconOpenSea, hint: 'OpenSea page' },
+  { field: 'linkedin', icon: iconLinkedIn, hint: 'LinkedIn page' },
+  { field: 'facebook', icon: iconFacebook, hint: 'Facebook account' },
+  { field: 'discord', icon: iconDiscord, hint: 'Discord account' },
+  { field: 'medium', icon: iconMedium, hint: 'Medium account' },
+  { field: 'slack', icon: iconSlack, hint: 'Slack account' },
+  { field: 'reddit', icon: iconReddit, hint: 'Reddit account' },
 ];
 
 const TokenDetailsVerifiedInfo = ({ data }: Props) => {
@@ -39,23 +46,58 @@ const TokenDetailsVerifiedInfo = ({ data }: Props) => {
     } catch (error) { }
   })();
 
+  const supportLink = (() => {
+    if (!data.support) {
+      return null;
+    }
+
+    const isEmail = data.support.includes('@');
+    const href = isEmail ? `mailto:${ data.support }` : data.support;
+    return (
+      <DetailsInfoItem
+        title="Support"
+        hint="Links to the project's official website and social media channels."
+      >
+        <Link href={ href } target="_blank">
+          { data.support }
+        </Link>
+      </DetailsInfoItem>
+    );
+  })();
+
   const socialLinks = SOCIAL_LINKS
     .map((link) => ({ ...link, href: data[link.field] }))
     .filter(({ href }) => href);
 
   return (
-    <Flex alignItems={{ base: 'flex-start', lg: 'center' }} flexDir={{ base: 'column', lg: 'row' }} rowGap={ 2 } columnGap={ 6 }>
-      { websiteName && <LinkExternal href={ data.projectWebsite }>{ websiteName }</LinkExternal> }
-      { socialLinks.length > 0 && (
-        <Flex columnGap={ 2 }>
-          { socialLinks.map((link) => (
-            <Link href={ link.href } key={ link.field } variant="secondary" boxSize={ 5 } aria-label={ link.hint } title={ link.hint } target="_blank">
-              <Icon as={ link.icon } boxSize={ 5 }/>
-            </Link>
-          )) }
+    <>
+      <DetailsInfoItem
+        title="Links"
+        hint="Links to the project's official website and social media channels."
+      >
+        <Flex alignItems={{ base: 'flex-start', lg: 'center' }} flexDir={{ base: 'column', lg: 'row' }} rowGap={ 2 } columnGap={ 6 }>
+          { websiteName && <LinkExternal href={ data.projectWebsite } fontSize="md">{ websiteName }</LinkExternal> }
+          { socialLinks.length > 0 && (
+            <Flex columnGap={ 2 }>
+              { socialLinks.map((link) => (
+                <Link
+                  key={ link.field }
+                  href={ link.href }
+                  variant="secondary"
+                  boxSize={ 5 }
+                  aria-label={ link.hint }
+                  title={ link.hint }
+                  target="_blank"
+                >
+                  <Icon as={ link.icon } boxSize={ 5 }/>
+                </Link>
+              )) }
+            </Flex>
+          ) }
         </Flex>
-      ) }
-    </Flex>
+      </DetailsInfoItem>
+      { supportLink }
+    </>
   );
 };