skeletons for stats

configs/envs/.env.goerli

@@ -26,4 +26,4 @@ NEXT_PUBLIC_HAS_BEACON_CHAIN=false
 # api config
 NEXT_PUBLIC_API_HOST=blockscout-main.test.aws-k8s.blockscout.com
 NEXT_PUBLIC_API_BASE_PATH=/
-NEXT_PUBLIC_STATS_API_HOST=https://stats-test.aws-k8s.blockscout.com
+NEXT_PUBLIC_STATS_API_HOST=https://stats-goerli.k8s-dev.blockscout.com

stubs/stats.ts

-import type { HomeStats } from 'types/api/stats';
+import type { HomeStats, StatsChartsSection } from 'types/api/stats';
 
 export const HOMEPAGE_STATS: HomeStats = {
   average_block_time: 14346,
@@ -18,3 +18,38 @@ export const HOMEPAGE_STATS: HomeStats = {
   total_transactions: '193823272',
   transactions_today: '0',
 };
+
+export const STATS_CHARTS_SECTION: StatsChartsSection = {
+  id: 'placeholder',
+  title: 'Placeholder',
+  charts: [
+    {
+      id: 'chart_0',
+      title: 'Average transaction fee',
+      description: 'The average amount in ETH spent per transaction',
+      units: 'ETH',
+    },
+    {
+      id: 'chart_1',
+      title: 'Transactions fees',
+      description: 'Amount of tokens paid as fees',
+      units: 'ETH',
+    },
+    {
+      id: 'chart_2',
+      title: 'New transactions',
+      description: 'New transactions number',
+      units: null,
+    },
+    {
+      id: 'chart_3',
+      title: 'Transactions growth',
+      description: 'Cumulative transactions number',
+      units: null,
+    },
+  ],
+};
+
+export const STATS_CHARTS = {
+  sections: [ STATS_CHARTS_SECTION ],
+};

ui/address/blocksValidated/AddressBlocksValidatedListItem.tsx

@@ -40,7 +40,7 @@ const AddressBlocksValidatedListItem = (props: Props) => {
       </Flex>
       <Flex columnGap={ 2 } w="100%">
         <Skeleton isLoaded={ !props.isLoading } fontWeight={ 500 } flexShrink={ 0 }>Gas used</Skeleton>
-        <Skeleton isLoaded={ !props.isLoading } variant="secondary">{ BigNumber(props.gas_used || 0).toFormat() }</Skeleton>
+        <Skeleton isLoaded={ !props.isLoading } color="text_secondary">{ BigNumber(props.gas_used || 0).toFormat() }</Skeleton>
         <Utilization
           colorScheme="gray"
           value={ BigNumber(props.gas_used || 0).dividedBy(BigNumber(props.gas_limit)).toNumber() }
@@ -49,7 +49,7 @@ const AddressBlocksValidatedListItem = (props: Props) => {
       </Flex>
       <Flex columnGap={ 2 } w="100%">
         <Skeleton isLoaded={ !props.isLoading } fontWeight={ 500 } flexShrink={ 0 }>Reward { appConfig.network.currency.symbol }</Skeleton>
-        <Skeleton isLoaded={ !props.isLoading } variant="secondary">{ totalReward.toFixed() }</Skeleton>
+        <Skeleton isLoaded={ !props.isLoading } color="text_secondary">{ totalReward.toFixed() }</Skeleton>
       </Flex>
     </ListItemMobile>
   );

ui/address/coinBalance/AddressCoinBalanceChart.tsx

@@ -25,7 +25,7 @@ const AddressCoinBalanceChart = ({ addressHash }: Props) => {
       title="Balances"
       items={ items }
       isLoading={ isLoading }
-      h="250px"
+      h="300px"
     />
   );
 };

ui/address/coinBalance/AddressCoinBalanceListItem.tsx

@@ -57,7 +57,7 @@ const AddressCoinBalanceListItem = (props: Props) => {
       ) }
       <Flex columnGap={ 2 } w="100%">
         <Skeleton isLoaded={ !props.isLoading } fontWeight={ 500 } flexShrink={ 0 }>Age</Skeleton>
-        <Skeleton isLoaded={ !props.isLoading } variant="secondary">{ timeAgo }</Skeleton>
+        <Skeleton isLoaded={ !props.isLoading } color="text_secondary">{ timeAgo }</Skeleton>
       </Flex>
     </ListItemMobile>
   );

ui/pages/Stats.tsx

@@ -12,14 +12,14 @@ import useStats from '../stats/useStats';
 
 const Stats = () => {
   const {
-    isLoading,
+    isPlaceholderData,
     isError,
     sections,
     currentSection,
     handleSectionChange,
     interval,
     handleIntervalChange,
-    debounceFilterCharts,
+    handleFilterChange,
     displayedCharts,
     filterQuery,
   } = useStats();
@@ -39,14 +39,14 @@ const Stats = () => {
           onSectionChange={ handleSectionChange }
           interval={ interval }
           onIntervalChange={ handleIntervalChange }
-          onFilterInputChange={ debounceFilterCharts }
+          onFilterInputChange={ handleFilterChange }
         />
       </Box>
 
       <ChartsWidgetsList
         filterQuery={ filterQuery }
         isError={ isError }
-        isLoading={ isLoading }
+        isPlaceholderData={ isPlaceholderData }
         charts={ displayedCharts }
         interval={ interval }
       />

ui/shared/chart/ChartWidget.tsx

@@ -3,13 +3,13 @@ import {
   Center,
   chakra,
   Flex,
-  Grid,
   Icon,
   IconButton, Link,
   Menu,
   MenuButton,
   MenuItem,
   MenuList,
+  Skeleton,
   Text,
   Tooltip,
   useColorModeValue,
@@ -30,7 +30,6 @@ import { apos } from 'lib/html-entities';
 import saveAsCSV from 'lib/saveAsCSV';
 
 import ChartWidgetGraph from './ChartWidgetGraph';
-import ChartWidgetSkeleton from './ChartWidgetSkeleton';
 import FullscreenChartModal from './FullscreenChartModal';
 
 export type Props = {
@@ -110,10 +109,6 @@ const ChartWidget = ({ items, title, description, isLoading, className, isError,
     }
   }, [ items, title ]);
 
-  if (isLoading) {
-    return <ChartWidgetSkeleton hasDescription={ Boolean(description) }/>;
-  }
-
   const hasItems = items && items.length > 2;
 
   const content = (() => {
@@ -137,6 +132,10 @@ const ChartWidget = ({ items, title, description, isLoading, className, isError,
       );
     }
 
+    if (isLoading) {
+      return <Skeleton flexGrow={ 1 } w="100%"/>;
+    }
+
     if (!hasItems) {
       return (
         <Center flexGrow={ 1 }>
@@ -146,7 +145,7 @@ const ChartWidget = ({ items, title, description, isLoading, className, isError,
     }
 
     return (
-      <Box h="100%" maxW="100%">
+      <Box flexGrow={ 1 } maxW="100%">
         <ChartWidgetGraph
           items={ items }
           onZoom={ handleZoom }
@@ -160,112 +159,104 @@ const ChartWidget = ({ items, title, description, isLoading, className, isError,
 
   return (
     <>
-      <Box
+      <Flex
         height="100%"
-        display="flex"
-        flexDirection="column"
         ref={ ref }
+        flexDir="column"
         padding={{ base: 3, lg: 4 }}
         borderRadius="md"
         border="1px"
         borderColor={ borderColor }
         className={ className }
       >
-        <Grid
-          gridTemplateColumns="auto auto 36px"
-          gridColumnGap={ 2 }
-        >
-          <Text
-            fontWeight={ 600 }
-            fontSize="md"
-            lineHeight={ 6 }
-            as="p"
-            size={{ base: 'xs', lg: 'sm' }}
-          >
-            { title }
-          </Text>
-
-          { description && (
-            <Text
-              mb={ 1 }
-              gridColumn={ 1 }
-              as="p"
-              variant="secondary"
-              fontSize="xs"
+        <Flex columnGap={ 6 } mb={ 1 } alignItems="flex-start">
+          <Flex flexGrow={ 1 } flexDir="column" alignItems="flex-start">
+            <Skeleton
+              isLoaded={ !isLoading }
+              fontWeight={ 600 }
+              size={{ base: 'xs', lg: 'sm' }}
             >
-              { description }
-            </Text>
-          ) }
-
-          <Tooltip label="Reset zoom">
-            <IconButton
-              hidden={ isZoomResetInitial }
-              aria-label="Reset zoom"
-              colorScheme="blue"
-              w={ 9 }
-              h={ 8 }
-              gridColumn={ 2 }
-              justifySelf="end"
-              alignSelf="top"
-              gridRow="1/3"
-              size="sm"
-              variant="outline"
-              onClick={ handleZoomResetClick }
-              icon={ <Icon as={ repeatArrowIcon } w={ 4 } h={ 4 }/> }
-            />
-          </Tooltip>
+              { title }
+            </Skeleton>
 
-          { hasItems && (
-            <Menu>
-              <MenuButton
-                gridColumn={ 3 }
-                gridRow="1/3"
-                justifySelf="end"
-                w="36px"
-                h="32px"
-                icon={ <Icon as={ dotsIcon } w={ 4 } h={ 4 }/> }
-                colorScheme="gray"
-                variant="ghost"
-                as={ IconButton }
+            { description && (
+              <Skeleton
+                isLoaded={ !isLoading }
+                color="text_secondary"
+                fontSize="xs"
+                mt={ 1 }
               >
-                <VisuallyHidden>
-                  Open chart options menu
-                </VisuallyHidden>
-              </MenuButton>
-              <MenuList>
-                <MenuItem
-                  display="flex"
-                  alignItems="center"
-                  onClick={ showChartFullscreen }
-                >
-                  <Icon as={ scopeIcon } boxSize={ 5 } mr={ 3 }/>
+                <span>{ description }</span>
+              </Skeleton>
+            ) }
+          </Flex>
+
+          <Flex ml="auto" columnGap={ 2 }>
+            <Tooltip label="Reset zoom">
+              <IconButton
+                hidden={ isZoomResetInitial }
+                aria-label="Reset zoom"
+                colorScheme="blue"
+                w={ 9 }
+                h={ 8 }
+                size="sm"
+                variant="outline"
+                onClick={ handleZoomResetClick }
+                icon={ <Icon as={ repeatArrowIcon } w={ 4 } h={ 4 }/> }
+              />
+            </Tooltip>
+
+            { hasItems && (
+              <Menu>
+                <Skeleton isLoaded={ !isLoading } borderRadius="base">
+                  <MenuButton
+                    w="36px"
+                    h="32px"
+                    icon={ <Icon as={ dotsIcon } w={ 4 } h={ 4 }/> }
+                    colorScheme="gray"
+                    variant="ghost"
+                    as={ IconButton }
+                  >
+                    <VisuallyHidden>
+                      Open chart options menu
+                    </VisuallyHidden>
+                  </MenuButton>
+                </Skeleton>
+                <MenuList>
+                  <MenuItem
+                    display="flex"
+                    alignItems="center"
+                    onClick={ showChartFullscreen }
+                  >
+                    <Icon as={ scopeIcon } boxSize={ 5 } mr={ 3 }/>
                   View fullscreen
-                </MenuItem>
+                  </MenuItem>
 
-                <MenuItem
-                  display="flex"
-                  alignItems="center"
-                  onClick={ handleFileSaveClick }
-                >
-                  <Icon as={ imageIcon } boxSize={ 5 } mr={ 3 }/>
+                  <MenuItem
+                    display="flex"
+                    alignItems="center"
+                    onClick={ handleFileSaveClick }
+                  >
+                    <Icon as={ imageIcon } boxSize={ 5 } mr={ 3 }/>
                   Save as PNG
-                </MenuItem>
+                  </MenuItem>
 
-                <MenuItem
-                  display="flex"
-                  alignItems="center"
-                  onClick={ handleSVGSavingClick }
-                >
-                  <Icon as={ svgFileIcon } boxSize={ 5 } mr={ 3 }/>
+                  <MenuItem
+                    display="flex"
+                    alignItems="center"
+                    onClick={ handleSVGSavingClick }
+                  >
+                    <Icon as={ svgFileIcon } boxSize={ 5 } mr={ 3 }/>
                   Save as CSV
-                </MenuItem>
-              </MenuList>
-            </Menu>
-          ) }
-        </Grid>
+                  </MenuItem>
+                </MenuList>
+              </Menu>
+            ) }
+          </Flex>
+        </Flex>
 
         { content }
-      </Box>
+      </Flex>
 
       { hasItems && (
         <FullscreenChartModal

ui/shared/chart/ChartWidgetSkeleton.tsx

-import { Box, Skeleton } from '@chakra-ui/react';
-import React from 'react';
-
-interface Props {
-  hasDescription: boolean;
-}
-
-const ChartWidgetSkeleton = ({ hasDescription }: Props) => {
-  return (
-    <Box
-      height="235px"
-      paddingY={{ base: 3, lg: 4 }}
-    >
-      <Skeleton w="75%" h="24px"/>
-      { hasDescription && <Skeleton w="50%" h="18px" mt={ 1 }/> }
-
-      <Skeleton w="100%" h="150px" mt={ 5 }/>
-    </Box>
-  );
-};
-
-export default ChartWidgetSkeleton;

ui/stats/ChartWidgetContainer.tsx

@@ -14,13 +14,14 @@ type Props = {
   units?: string;
   interval: StatsIntervalIds;
   onLoadingError: () => void;
+  isPlaceholderData: boolean;
 }
 
 function formatDate(date: Date) {
   return date.toISOString().substring(0, 10);
 }
 
-const ChartWidgetContainer = ({ id, title, description, interval, onLoadingError, units }: Props) => {
+const ChartWidgetContainer = ({ id, title, description, interval, onLoadingError, units, isPlaceholderData }: Props) => {
   const selectedInterval = STATS_INTERVALS[interval];
 
   const endDate = selectedInterval.start ? formatDate(new Date()) : undefined;
@@ -32,6 +33,10 @@ const ChartWidgetContainer = ({ id, title, description, interval, onLoadingError
       from: startDate,
       to: endDate,
     },
+    queryOptions: {
+      enabled: !isPlaceholderData,
+      refetchOnMount: false,
+    },
   });
 
   const items = useMemo(() => data?.chart?.map((item) => {
@@ -52,6 +57,7 @@ const ChartWidgetContainer = ({ id, title, description, interval, onLoadingError
       units={ units }
       description={ description }
       isLoading={ isLoading }
+      minH="230px"
     />
   );
 };

ui/stats/ChartsWidgetsList.tsx

-import { Box, Grid, GridItem, Heading, List, ListItem, Skeleton } from '@chakra-ui/react';
+import { Box, Grid, Heading, List, ListItem, Skeleton } from '@chakra-ui/react';
 import React, { useCallback, useState } from 'react';
 
 import type { StatsChartsSection } from 'types/api/stats';
 import type { StatsIntervalIds } from 'types/client/stats';
 
 import { apos } from 'lib/html-entities';
-import ChartWidgetSkeleton from 'ui/shared/chart/ChartWidgetSkeleton';
 import EmptySearchResult from 'ui/shared/EmptySearchResult';
 
 import ChartsLoadingErrorAlert from './ChartsLoadingErrorAlert';
@@ -14,14 +13,12 @@ import ChartWidgetContainer from './ChartWidgetContainer';
 type Props = {
   filterQuery: string;
   isError: boolean;
-  isLoading: boolean;
+  isPlaceholderData: boolean;
   charts?: Array<StatsChartsSection>;
   interval: StatsIntervalIds;
 }
 
-const skeletonsCount = 4;
-
-const ChartsWidgetsList = ({ filterQuery, isError, isLoading, charts, interval }: Props) => {
+const ChartsWidgetsList = ({ filterQuery, isError, isPlaceholderData, charts, interval }: Props) => {
   const [ isSomeChartLoadingError, setIsSomeChartLoadingError ] = useState(false);
   const isAnyChartDisplayed = charts?.some((section) => section.charts.length > 0);
   const isEmptyChartList = Boolean(filterQuery) && !isAnyChartDisplayed;
@@ -30,29 +27,6 @@ const ChartsWidgetsList = ({ filterQuery, isError, isLoading, charts, interval }
     () => setIsSomeChartLoadingError(true),
     [ setIsSomeChartLoadingError ]);
 
-  const skeletonElement = [ ...Array(skeletonsCount) ]
-    .map((e, i) => (
-      <GridItem key={ i }>
-        <ChartWidgetSkeleton hasDescription={ true }/>
-      </GridItem>
-    ));
-
-  if (isLoading) {
-    return (
-      <>
-        <Skeleton w="30%" h="32px" mb={ 4 }/>
-        <Grid
-          templateColumns={{
-            lg: 'repeat(2, minmax(0, 1fr))',
-          }}
-          gap={ 4 }
-        >
-          { skeletonElement }
-        </Grid>
-      </>
-    );
-  }
-
   if (isError) {
     return <ChartsLoadingErrorAlert/>;
   }
@@ -77,32 +51,27 @@ const ChartsWidgetsList = ({ filterQuery, isError, isLoading, charts, interval }
                 marginBottom: 0,
               }}
             >
-              <Heading
-                size="md"
-                mb={ 4 }
-              >
-                { section.title }
-              </Heading>
+              <Skeleton isLoaded={ !isPlaceholderData } mb={ 4 } display="inline-block">
+                <Heading size="md" >
+                  { section.title }
+                </Heading>
+              </Skeleton>
 
               <Grid
-                templateColumns={{
-                  lg: 'repeat(2, minmax(0, 1fr))',
-                }}
+                templateColumns={{ lg: 'repeat(2, minmax(0, 1fr))' }}
                 gap={ 4 }
               >
                 { section.charts.map((chart) => (
-                  <GridItem
+                  <ChartWidgetContainer
                     key={ chart.id }
-                  >
-                    <ChartWidgetContainer
-                      id={ chart.id }
-                      title={ chart.title }
-                      description={ chart.description }
-                      interval={ interval }
-                      units={ chart.units || undefined }
-                      onLoadingError={ handleChartLoadingError }
-                    />
-                  </GridItem>
+                    id={ chart.id }
+                    title={ chart.title }
+                    description={ chart.description }
+                    interval={ interval }
+                    units={ chart.units || undefined }
+                    isPlaceholderData={ isPlaceholderData }
+                    onLoadingError={ handleChartLoadingError }
+                  />
                 )) }
               </Grid>
             </ListItem>

ui/stats/useStats.tsx

-import debounce from 'lodash/debounce';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 
 import type { StatsChartInfo, StatsChartsSection } from 'types/api/stats';
 import type { StatsIntervalIds } from 'types/client/stats';
 
 import useApiQuery from 'lib/api/useApiQuery';
+import useDebounce from 'lib/hooks/useDebounce';
+import { STATS_CHARTS } from 'stubs/stats';
 
 function isSectionMatches(section: StatsChartsSection, currentSection: string): boolean {
   return currentSection === 'all' || section.id === currentSection;
@@ -15,30 +16,30 @@ function isChartNameMatches(q: string, chart: StatsChartInfo) {
 }
 
 export default function useStats() {
-  const { data, isLoading, isError } = useApiQuery('stats_lines');
+  const { data, isPlaceholderData, isError } = useApiQuery('stats_lines', {
+    queryOptions: {
+      placeholderData: STATS_CHARTS,
+    },
+  });
 
   const [ currentSection, setCurrentSection ] = useState('all');
   const [ filterQuery, setFilterQuery ] = useState('');
-  const [ displayedCharts, setDisplayedCharts ] = useState(data?.sections);
   const [ interval, setInterval ] = useState<StatsIntervalIds>('oneMonth');
   const sectionIds = useMemo(() => data?.sections?.map(({ id }) => id), [ data ]);
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const debounceFilterCharts = useCallback(debounce(q => setFilterQuery(q), 500), []);
+  const debouncedFilterQuery = useDebounce(filterQuery, 500);
 
-  const filterCharts = useCallback((q: string, currentSection: string) => {
-    const charts = data?.sections
+  const displayedCharts = React.useMemo(() => {
+    return data?.sections
       ?.map((section) => {
-        const charts = section.charts.filter((chart) => isSectionMatches(section, currentSection) && isChartNameMatches(q, chart));
+        const charts = section.charts.filter((chart) => isSectionMatches(section, currentSection) && isChartNameMatches(debouncedFilterQuery, chart));
 
         return {
           ...section,
           charts,
         };
       }).filter((section) => section.charts.length > 0);
-
-    setDisplayedCharts(charts || []);
-  }, [ data ]);
+  }, [ currentSection, data?.sections, debouncedFilterQuery ]);
 
   const handleSectionChange = useCallback((newSection: string) => {
     setCurrentSection(newSection);
@@ -48,33 +49,33 @@ export default function useStats() {
     setInterval(newInterval);
   }, []);
 
-  useEffect(() => {
-    filterCharts(filterQuery, currentSection);
-  }, [ filterQuery, currentSection, filterCharts ]);
+  const handleFilterChange = useCallback((q: string) => {
+    setFilterQuery(q);
+  }, []);
 
   return React.useMemo(() => ({
     sections: data?.sections,
     sectionIds,
-    isLoading,
+    isPlaceholderData,
     isError,
     filterQuery,
     currentSection,
     handleSectionChange,
     interval,
     handleIntervalChange,
-    debounceFilterCharts,
+    handleFilterChange,
     displayedCharts,
   }), [
     data,
     sectionIds,
-    isLoading,
+    isPlaceholderData,
     isError,
     filterQuery,
     currentSection,
     handleSectionChange,
     interval,
     handleIntervalChange,
-    debounceFilterCharts,
+    handleFilterChange,
     displayedCharts,
   ]);
 }

ui/token/TokenDetails/TokenDetailsVerifiedInfo.tsx

-import { Flex, Link, Icon } from '@chakra-ui/react';
-import React from 'react';
-
-import type { TokenVerifiedInfo } from 'types/api/token';
-
-import iconDocs from 'icons/docs.svg';
-import iconEmail from 'icons/email.svg';
-import iconLink from 'icons/link.svg';
-import iconCoinGecko from 'icons/social/coingecko.svg';
-import iconCoinMarketCap from 'icons/social/coinmarketcap.svg';
-import iconDefiLlama from 'icons/social/defi_llama.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';
-import TextSeparator from 'ui/shared/TextSeparator';
-
-interface Props {
-  data: TokenVerifiedInfo;
-}
-
-interface TServiceLink {
-  field: keyof TokenVerifiedInfo;
-  icon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
-  hint: string;
-}
-const SOCIAL_LINKS: Array<TServiceLink> = [
-  { 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 PRICE_TICKERS: Array<TServiceLink> = [
-  { field: 'coinGeckoTicker', icon: iconCoinGecko, hint: 'Coin Gecko' },
-  { field: 'coinMarketCapTicker', icon: iconCoinMarketCap, hint: 'Coin Market Cap' },
-  { field: 'defiLlamaTicker', icon: iconDefiLlama, hint: 'Defi Llama' },
-];
-
-const ServiceLink = ({ href, hint, icon }: TServiceLink & { href: string | undefined }) => (
-  <Link
-    href={ href }
-    variant="secondary"
-    boxSize={ 5 }
-    aria-label={ hint }
-    title={ hint }
-    target="_blank"
-  >
-    <Icon as={ icon } boxSize={ 5 }/>
-  </Link>
-);
-
-// todo_tom DELETE ME
-const TokenDetailsVerifiedInfo = ({ data }: Props) => {
-  const websiteLink = (() => {
-    try {
-      const url = new URL(data.projectWebsite);
-      return (
-        <Flex alignItems="center" columnGap={ 1 } color="text_secondary" _hover={{ color: 'link_hovered' }}>
-          <Icon as={ iconLink } boxSize={ 6 }/>
-          <LinkExternal href={ data.projectWebsite } fontSize="md">{ url.host }</LinkExternal>
-        </Flex>
-      );
-    } catch (error) {
-      return null;
-    }
-  })();
-
-  const docsLink = (() => {
-    if (!data.docs) {
-      return null;
-    }
-
-    return (
-      <Flex alignItems="center" columnGap={ 1 } color="text_secondary" _hover={{ color: 'link_hovered' }}>
-        <Icon as={ iconDocs } boxSize={ 6 }/>
-        <LinkExternal href={ data.docs } fontSize="md">Documentation</LinkExternal>
-      </Flex>
-    );
-  })();
-
-  const supportLink = (() => {
-    if (!data.support) {
-      return null;
-    }
-
-    const isEmail = data.support.includes('@');
-    const href = isEmail ? `mailto:${ data.support }` : data.support;
-    return (
-      <Flex alignItems="center" columnGap={ 1 } color="text_secondary" _hover={{ color: 'link_hovered' }}>
-        <Icon as={ iconEmail } boxSize={ 6 }/>
-        <Link href={ href } target="_blank">
-          { data.support }
-        </Link>
-      </Flex>
-    );
-  })();
-
-  const socialLinks = SOCIAL_LINKS
-    .map((link) => ({ ...link, href: data[link.field] }))
-    .filter(({ href }) => href);
-
-  const priceTickersLinks = PRICE_TICKERS
-    .map((link) => ({ ...link, href: data[link.field] }))
-    .filter(({ href }) => href);
-
-  return (
-    <DetailsInfoItem
-      title="Links"
-      hint="Links to the project's official website and social media channels."
-    >
-      <Flex flexDir="column" rowGap={ 5 }>
-        <Flex
-          flexDir={{ base: 'column', lg: 'row' }}
-          alignItems={{ base: 'flex-start', lg: 'center' }}
-          columnGap={ 6 }
-          rowGap={ 2 }
-        >
-          { websiteLink }
-          { docsLink }
-          { supportLink }
-        </Flex>
-        { (socialLinks.length > 0 || priceTickersLinks.length > 0) && (
-          <Flex
-            columnGap={ 2 }
-            rowGap={ 2 }
-            flexWrap="wrap"
-          >
-            { socialLinks.map((link) => <ServiceLink key={ link.field } { ...link }/>) }
-            { priceTickersLinks.length > 0 && (
-              <>
-                <TextSeparator color="divider"/>
-                { priceTickersLinks.map((link) => <ServiceLink key={ link.field } { ...link }/>) }
-              </>
-            ) }
-          </Flex>
-        ) }
-      </Flex>
-    </DetailsInfoItem>
-  );
-};
-
-export default React.memo(TokenDetailsVerifiedInfo);

ui/token/TokenTransfer/TokenTransferListItem.tsx

@@ -89,7 +89,7 @@ const TokenTransferListItem = ({
           <Skeleton isLoaded={ !isLoading } flexShrink={ 0 } fontWeight={ 500 }>
             Value
           </Skeleton>
-          <Skeleton isLoaded={ !isLoading } variant="secondary">
+          <Skeleton isLoaded={ !isLoading } color="text_secondary">
             { value }
           </Skeleton>
           <Skeleton isLoaded={ !isLoading }>{ trimTokenSymbol(token.symbol) }</Skeleton>

ui/tokens/TokensListItem.tsx

@@ -77,12 +77,12 @@ const TokensTableItem = ({
       { totalValue?.usd && (
         <HStack spacing={ 3 }>
           <Skeleton isLoaded={ !isLoading } fontSize="sm" fontWeight={ 500 }>On-chain market cap</Skeleton>
-          <Skeleton isLoaded={ !isLoading } fontSize="sm" variant="secondary"><span>{ totalValue.usd }</span></Skeleton>
+          <Skeleton isLoaded={ !isLoading } fontSize="sm" color="text_secondary"><span>{ totalValue.usd }</span></Skeleton>
         </HStack>
       ) }
       <HStack spacing={ 3 }>
         <Skeleton isLoaded={ !isLoading } fontSize="sm" fontWeight={ 500 }>Holders</Skeleton>
-        <Skeleton isLoaded={ !isLoading } fontSize="sm" variant="secondary"><span>{ Number(holders).toLocaleString() }</span></Skeleton>
+        <Skeleton isLoaded={ !isLoading } fontSize="sm" color="text_secondary"><span>{ Number(holders).toLocaleString() }</span></Skeleton>
       </HStack>
     </ListItemMobile>
   );

ui/tx/internals/TxInternalsListItem.tsx

@@ -45,13 +45,13 @@ const TxInternalsListItem = ({ type, from, to, value, success, error, gas_limit:
       </Box>
       <HStack spacing={ 3 }>
         <Skeleton isLoaded={ !isLoading } fontSize="sm" fontWeight={ 500 }>Value { appConfig.network.currency.symbol }</Skeleton>
-        <Skeleton isLoaded={ !isLoading } fontSize="sm" variant="secondary">
+        <Skeleton isLoaded={ !isLoading } fontSize="sm" color="text_secondary">
           { BigNumber(value).div(BigNumber(10 ** appConfig.network.currency.decimals)).toFormat() }
         </Skeleton>
       </HStack>
       <HStack spacing={ 3 }>
         <Skeleton isLoaded={ !isLoading } fontSize="sm" fontWeight={ 500 }>Gas limit</Skeleton>
-        <Skeleton isLoaded={ !isLoading } fontSize="sm" variant="secondary">{ BigNumber(gasLimit).toFormat() }</Skeleton>
+        <Skeleton isLoaded={ !isLoading } fontSize="sm" color="text_secondary">{ BigNumber(gasLimit).toFormat() }</Skeleton>
       </HStack>
     </ListItemMobile>
   );