website link

ui/pages/Token.tsx

@@ -31,6 +31,7 @@ import TokenDetails from 'ui/token/TokenDetails';
 import TokenHolders from 'ui/token/TokenHolders/TokenHolders';
 import TokenInventory from 'ui/token/TokenInventory';
 import TokenTransfer from 'ui/token/TokenTransfer/TokenTransfer';
+import TokenVerifiedInfo from 'ui/token/TokenVerifiedInfo';
 
 export type TokenTabs = 'token_transfers' | 'holders' | 'inventory';
 
@@ -251,7 +252,8 @@ const TokenPageContent = () => {
         </>
       ) }
       <TokenContractInfo tokenQuery={ tokenQuery }/>
-      <TokenDetails tokenQuery={ tokenQuery } verifiedInfoQuery={ verifiedInfoQuery } isVerifiedInfoEnabled={ isVerifiedInfoEnabled }/>
+      <TokenVerifiedInfo verifiedInfoQuery={ verifiedInfoQuery } isVerifiedInfoEnabled={ isVerifiedInfoEnabled }/>
+      <TokenDetails tokenQuery={ tokenQuery }/>
       { /* should stay before tabs to scroll up with pagination */ }
       <Box ref={ scrollRef }></Box>
 

ui/shared/LinkExternal.tsx

@@ -11,7 +11,7 @@ interface Props {
 
 const LinkExternal = ({ href, children, className }: Props) => {
   return (
-    <Link className={ className } fontSize="sm" display="inline-block" alignItems="center" target="_blank" href={ href }>
+    <Link className={ className } fontSize="sm" lineHeight={ 5 } display="inline-block" alignItems="center" target="_blank" href={ href }>
       { children }
       <Icon as={ arrowIcon } boxSize={ 4 } verticalAlign="middle"/>
     </Link>

ui/token/TokenDetails.tsx

-import { Box, Flex, Grid, GridItem, Link, Skeleton } from '@chakra-ui/react';
+import { Box, Flex, Grid, Link, Skeleton } from '@chakra-ui/react';
 import type { UseQueryResult } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import React, { useCallback } from 'react';
 import { scroller } from 'react-scroll';
 
-import type { TokenInfo, TokenVerifiedInfo } from 'types/api/token';
+import type { TokenInfo } from 'types/api/token';
 
 import useApiQuery from 'lib/api/useApiQuery';
 import getCurrencyValue from 'lib/getCurrencyValue';
@@ -14,15 +14,11 @@ import DetailsSponsoredItem from 'ui/shared/DetailsSponsoredItem';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import DetailsSkeletonRow from 'ui/shared/skeletons/DetailsSkeletonRow';
 
-import TokenDetailsVerifiedInfo from './TokenDetails/TokenDetailsVerifiedInfo';
-
 interface Props {
   tokenQuery: UseQueryResult<TokenInfo>;
-  verifiedInfoQuery: UseQueryResult<TokenVerifiedInfo>;
-  isVerifiedInfoEnabled: boolean;
 }
 
-const TokenDetails = ({ tokenQuery, verifiedInfoQuery, isVerifiedInfoEnabled }: Props) => {
+const TokenDetails = ({ tokenQuery }: Props) => {
   const router = useRouter();
 
   const tokenCountersQuery = useApiQuery('token_counters', {
@@ -60,7 +56,7 @@ const TokenDetails = ({ tokenQuery, verifiedInfoQuery, isVerifiedInfoEnabled }:
     throw Error('Token fetch error', { cause: tokenQuery.error as unknown as Error });
   }
 
-  if (tokenQuery.isLoading || (isVerifiedInfoEnabled && verifiedInfoQuery.isLoading)) {
+  if (tokenQuery.isLoading) {
     return (
       <Grid mt={ 10 } columnGap={ 8 } rowGap={{ base: 5, lg: 7 }} templateColumns={{ base: '1fr', lg: '210px 1fr' }} maxW="1000px">
         <DetailsSkeletonRow w="10%"/>
@@ -92,14 +88,6 @@ const TokenDetails = ({ tokenQuery, verifiedInfoQuery, isVerifiedInfoEnabled }:
     totalSupplyValue = Number(totalSupply).toLocaleString();
   }
 
-  const divider = (
-    <GridItem
-      colSpan={{ base: undefined, lg: 2 }}
-      borderBottom="1px solid"
-      borderColor="divider"
-    />
-  );
-
   return (
     <Grid
       mt={ 8 }
@@ -107,12 +95,6 @@ const TokenDetails = ({ tokenQuery, verifiedInfoQuery, isVerifiedInfoEnabled }:
       rowGap={{ base: 1, lg: 3 }}
       templateColumns={{ base: 'minmax(0, 1fr)', lg: 'auto minmax(0, 1fr)' }} overflow="hidden"
     >
-      { verifiedInfoQuery.data && (
-        <>
-          <TokenDetailsVerifiedInfo data={ verifiedInfoQuery.data }/>
-          { divider }
-        </>
-      ) }
       { exchangeRate && (
         <DetailsInfoItem
           title="Price"

ui/token/TokenDetails/TokenDetailsVerifiedInfo.tsx

@@ -63,6 +63,7 @@ const ServiceLink = ({ href, hint, icon }: TServiceLink & { href: string | undef
   </Link>
 );
 
+// todo_tom DELETE ME
 const TokenDetailsVerifiedInfo = ({ data }: Props) => {
   const websiteLink = (() => {
     try {

ui/token/TokenVerifiedInfo.tsx

+import { Flex, Skeleton } from '@chakra-ui/react';
+import type { UseQueryResult } from '@tanstack/react-query';
+import React from 'react';
+
+import type { TokenVerifiedInfo as TTokenVerifiedInfo } from 'types/api/token';
+
+import LinkExternal from 'ui/shared/LinkExternal';
+
+interface Props {
+  verifiedInfoQuery: UseQueryResult<TTokenVerifiedInfo>;
+  isVerifiedInfoEnabled: boolean;
+}
+
+const TokenVerifiedInfo = ({ verifiedInfoQuery, isVerifiedInfoEnabled }: Props) => {
+
+  const { data, isLoading, isError } = verifiedInfoQuery;
+
+  const content = (() => {
+    if (!isVerifiedInfoEnabled) {
+      return <span>explorers</span>;
+    }
+
+    if (isLoading) {
+      return (
+        <>
+          <Skeleton w="130px" h="30px" borderRadius="base"/>
+          <Skeleton w="130px" h="30px" borderRadius="base"/>
+          <Skeleton w="120px" h="30px" borderRadius="base"/>
+        </>
+      );
+    }
+
+    if (isError) {
+      return null;
+    }
+
+    const websiteLink = (() => {
+      try {
+        const url = new URL(data.projectWebsite);
+        return (
+          <LinkExternal href={ data.projectWebsite } px="10px" py="5px" bgColor="gray.100" borderRadius="base">{ url.host }</LinkExternal>
+        );
+      } catch (error) {
+        return null;
+      }
+    })();
+
+    return (
+      <>
+        { websiteLink }
+        <Skeleton w="130px" h="30px" borderRadius="base"/>
+        <Skeleton w="120px" h="30px" borderRadius="base"/>
+      </>
+    );
+  })();
+
+  return <Flex columnGap={ 3 } mt={ 5 }>{ content }</Flex>;
+};
+
+export default React.memo(TokenVerifiedInfo);