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,7 +49,8 @@ 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 ] }>
+        <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)' }}
@@ -61,6 +62,7 @@ const StatsItem = ({ icon, title, value, className, tooltipLabel }: Props) => {
               />
             </Box>
           </Tooltip>
+        </LightMode>
       ) }
     </Flex>
   );