fix tests

ui/pages/Home.tsx

@@ -49,7 +49,7 @@ const Home = () => {
       </Box>
       <Stats/>
       <ChainIndicators/>
-      <AdBanner mt={{ base: 6, lg: 8 }} mx="auto"/>
+      <AdBanner mt={{ base: 6, lg: 8 }} mx="auto" display="flex" justifyContent="center"/>
       <Flex mt={ 8 } direction={{ base: 'column', lg: 'row' }} columnGap={ 12 } rowGap={ 8 }>
         <LatestBlocks/>
         <Box flexGrow={ 1 }>

ui/pages/Token.pw.tsx

@@ -67,7 +67,7 @@ test('base view', async({ mount, page, createSocket }) => {
 
   await insertAdPlaceholder(page);
 
-  await expect(component.locator('main')).toHaveScreenshot();
+  await expect(component).toHaveScreenshot();
 });
 
 test.describe('mobile', () => {
@@ -86,6 +86,6 @@ test.describe('mobile', () => {
 
     await insertAdPlaceholder(page);
 
-    await expect(component.locator('main')).toHaveScreenshot();
+    await expect(component).toHaveScreenshot();
   });
 });

ui/shared/DetailsSponsoredItem.tsx

@@ -22,7 +22,7 @@ const DetailsSponsoredItem = ({ isLoading }: Props) => {
   if (isMobile) {
     return (
       <GridItem mt={ 5 }>
-        <AdBanner mx="auto" isLoading={ isLoading }/>
+        <AdBanner mx="auto" isLoading={ isLoading } display="flex" justifyContent="center"/>
       </GridItem>
     );
   }

ui/shared/Utilization/Utilization.tsx

-import { Box, Flex, Text, chakra, useColorModeValue, Skeleton } from '@chakra-ui/react';
+import { Box, Flex, chakra, useColorModeValue, Skeleton } from '@chakra-ui/react';
 import clamp from 'lodash/clamp';
 import React from 'react';
 
@@ -18,13 +18,15 @@ const Utilization = ({ className, value, colorScheme = 'green', isLoading }: Pro
 
   return (
     <Flex className={ className } alignItems="center" columnGap="10px">
-      <Skeleton isLoaded={ !isLoading }>
-        <Box bg={ useColorModeValue('blackAlpha.200', 'whiteAlpha.200') } w={ `${ WIDTH }px` } h="4px" borderRadius="full" overflow="hidden">
+      <Skeleton isLoaded={ !isLoading } w={ `${ WIDTH }px` } h="4px" borderRadius="full" overflow="hidden">
+        <Box bg={ useColorModeValue('blackAlpha.200', 'whiteAlpha.200') } h="100%">
           <Box bg={ color } w={ valueString } h="100%"/>
         </Box>
       </Skeleton>
-      <Skeleton isLoaded={ !isLoading }>
-        <Text color={ color } fontWeight="bold">{ valueString }</Text>
+      <Skeleton isLoaded={ !isLoading } color={ color } fontWeight="bold">
+        <span>
+          { valueString }
+        </span>
       </Skeleton>
     </Flex>
   );

ui/token/TokenInventoryItem.tsx

@@ -40,15 +40,16 @@ const NFTItem = ({ item, isLoading }: Props) => {
         <Flex mb={ 2 } ml={ 1 }>
           <Text whiteSpace="pre" variant="secondary">ID# </Text>
           <TruncatedTextTooltip label={ item.id }>
+            <Skeleton isLoaded={ !isLoading } overflow="hidden">
               <LinkInternal
                 overflow="hidden"
-              whiteSpace="nowrap"
                 textOverflow="ellipsis"
+                whiteSpace="nowrap"
+                display="block"
               >
-              <Skeleton isLoaded={ !isLoading }>
                 { item.id }
-              </Skeleton>
               </LinkInternal>
+            </Skeleton>
           </TruncatedTextTooltip>
         </Flex>
       ) }

ui/token/TokenTransfer/TokenTransferListItem.tsx

-import { Text, Flex, Tag, Icon, useColorModeValue, Skeleton } from '@chakra-ui/react';
+import { Text, Flex, Icon, useColorModeValue, Skeleton } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
@@ -11,6 +11,7 @@ import trimTokenSymbol from 'lib/token/trimTokenSymbol';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
+import Tag from 'ui/shared/chakra/Tag';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import TokenTransferNft from 'ui/shared/TokenTransfer/TokenTransferNft';
 
@@ -63,12 +64,14 @@ const TokenTransferListItem = ({
         { timestamp && (
           <Text variant="secondary" fontWeight="400" fontSize="sm">
             <Skeleton isLoaded={ !isLoading } display="inline-block">
+              <span>
                 { timeAgo }
+              </span>
             </Skeleton>
           </Text>
         ) }
       </Flex>
-      { method && <Skeleton isLoaded={ !isLoading } borderRadius="sm"><Tag colorScheme="gray">{ method }</Tag></Skeleton> }
+      { method && <Tag isLoading={ isLoading }>{ method }</Tag> }
       <Flex w="100%" columnGap={ 3 }>
         <Address width="50%">
           <AddressIcon address={ from } isLoading={ isLoading }/>

ui/token/TokenTransfer/TokenTransferTableItem.tsx

@@ -44,15 +44,19 @@ const TokenTransferTableItem = ({
           </Address>
           { timestamp && (
             <Skeleton isLoaded={ !isLoading } display="inline-block" color="gray.500" fontWeight="400" ml="10px">
+              <span>
                 { timeAgo }
+              </span>
             </Skeleton>
           ) }
         </Grid>
       </Td>
       <Td>
+        { method ? (
           <Box my="3px">
             <Tag isLoading={ isLoading } isTruncated>{ method }</Tag>
           </Box>
+        ) : null }
       </Td>
       <Td>
         <Address display="inline-flex" maxW="100%" py="3px">