stats gap fix

ui/home/Stats.tsx

@@ -30,13 +30,14 @@ const Stats = () => {
 
   let content;
 
+  const lastItemTouchStyle = { gridColumn: { base: 'span 2', lg: 'unset' } };
+
   if (isLoading) {
-    content = Array.from(Array(itemsCount)).map((item, index) => <StatsItemSkeleton key={ index }/>);
+    content = Array.from(Array(itemsCount)).map((item, index) => <StatsItemSkeleton key={ index } _last={ itemsCount % 2 ? lastItemTouchStyle : undefined }/>);
   }
 
-  const lastItemTouchStyle = { gridColumn: { base: 'span 2', lg: 'unset' } };
-
   if (data) {
+    const isOdd = Boolean(hasGasTracker && !data.gas_prices ? (itemsCount - 1) % 2 : itemsCount % 2);
     const gasLabel = hasGasTracker && data.gas_prices ? <StatsGasPrices gasPrices={ data.gas_prices }/> : null;
     content = (
       <>
@@ -63,14 +64,14 @@ const Stats = () => {
           icon={ walletIcon }
           title="Wallet addresses"
           value={ Number(data.total_addresses).toLocaleString() }
-          _last={ itemsCount % 2 ? lastItemTouchStyle : undefined }
+          _last={ isOdd ? lastItemTouchStyle : undefined }
         />
         { hasGasTracker && data.gas_prices && (
           <StatsItem
             icon={ gasIcon }
             title="Gas tracker"
             value={ `${ Number(data.gas_prices.average).toLocaleString() } Gwei` }
-            _last={ itemsCount % 2 ? lastItemTouchStyle : undefined }
+            _last={ isOdd ? lastItemTouchStyle : undefined }
             tooltipLabel={ gasLabel }
           />
         ) }

ui/home/StatsItemSkeleton.tsx

-import { Flex, Skeleton, useColorModeValue } from '@chakra-ui/react';
+import { Flex, Skeleton, useColorModeValue, chakra } from '@chakra-ui/react';
 import React from 'react';
 
-const StatsItemSkeleton = () => {
+const StatsItemSkeleton = ({ className }: {className?: string}) => {
   const bgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
 
   return (
@@ -13,6 +13,7 @@ const StatsItemSkeleton = () => {
       alignItems="center"
       columnGap={ 3 }
       rowGap={ 2 }
+      className={ className }
     >
       <Skeleton
         w="40px"
@@ -26,4 +27,4 @@ const StatsItemSkeleton = () => {
   );
 };
 
-export default StatsItemSkeleton;
+export default chakra(StatsItemSkeleton);