fix gas price tooltip

types/api/stats.ts

@@ -7,7 +7,7 @@ export type HomeStats = {
   total_gas_used: string;
   transactions_today: string;
   gas_used_today: string;
-  gas_prices: GasPrices;
+  gas_prices: GasPrices | null;
   static_gas_price: string;
   market_cap: string;
   network_utilization_percentage: number;

ui/home/Stats.tsx

@@ -45,7 +45,7 @@ const Stats = () => {
   const lastItemTouchStyle = { gridColumn: { base: 'span 2', lg: 'unset' } };
 
   if (data) {
-    const gasLabel = hasGasTracker ? <StatsGasPrices gasPrices={ data.gas_prices }/> : null;
+    const gasLabel = hasGasTracker && data.gas_prices ? <StatsGasPrices gasPrices={ data.gas_prices }/> : null;
     content = (
       <>
         <StatsItem
@@ -71,7 +71,7 @@ const Stats = () => {
           value={ Number(data.total_addresses).toLocaleString() }
           _last={ itemsCount % 2 ? lastItemTouchStyle : undefined }
         />
-        { hasGasTracker && (
+        { hasGasTracker && data.gas_prices && (
           <StatsItem
             icon={ gasIcon }
             title="Gas tracker"

ui/home/StatsItem.tsx

-import { Box, Flex, Icon, Text, useColorModeValue, chakra, Tooltip } from '@chakra-ui/react';
+import { Box, Flex, Icon, Text, useColorModeValue, chakra, Tooltip, LightMode } from '@chakra-ui/react';
 import React from 'react';
 
 import infoIcon from 'icons/info.svg';
@@ -49,18 +49,20 @@ const StatsItem = ({ icon, title, value, className, tooltipLabel }: Props) => {
         <Text fontWeight={ 500 } fontSize="md" color={ useColorModeValue('black', 'white') }>{ value }</Text>
       </Flex>
       { tooltipLabel && (
-        <Tooltip label={ tooltipLabel } hasArrow={ false } borderRadius="12px" placement="bottom-end" offset={ [ 0, 0 ] }>
-          <Box
-            position="absolute"
-            top={{ base: 'calc(50% - 12px)', lg: '10px', xl: 'calc(50% - 12px)' }}
-            right="10px">
-            <Icon
-              as={ infoIcon }
-              boxSize={ 6 }
-              color={ infoColor }
-            />
-          </Box>
-        </Tooltip>
+        <LightMode>
+          <Tooltip label={ tooltipLabel } hasArrow={ false } borderRadius="12px" placement="bottom-end" offset={ [ 0, 0 ] } bgColor="blackAlpha.900">
+            <Box
+              position="absolute"
+              top={{ base: 'calc(50% - 12px)', lg: '10px', xl: 'calc(50% - 12px)' }}
+              right="10px">
+              <Icon
+                as={ infoIcon }
+                boxSize={ 6 }
+                color={ infoColor }
+              />
+            </Box>
+          </Tooltip>
+        </LightMode>
       ) }
     </Flex>
   );