fix issue with zero values in gas tracker

ui/gasTracker/GasTrackerPriceSnippet.pw.tsx

-import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import * as statsMock from 'mocks/stats/index';
-import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
-import TestApp from 'playwright/TestApp';
+import { test, expect } from 'playwright/lib';
 import * as configs from 'playwright/utils/configs';
 
 import GasTrackerPriceSnippet from './GasTrackerPriceSnippet';
@@ -13,48 +11,57 @@ test.use({ viewport: configs.viewport.md });
 const data = statsMock.base.gas_prices.fast;
 const clip = { x: 0, y: 0, width: 334, height: 204 };
 
-test('with usd as primary unit +@dark-mode', async({ mount, page }) => {
-  await mount(
-    <TestApp>
+test('with usd as primary unit +@dark-mode', async({ render, page }) => {
+  await render(
     <GasTrackerPriceSnippet
       data={ data }
       type="fast"
       isLoading={ false }
-      />
-    </TestApp>,
+    />,
   );
   await expect(page).toHaveScreenshot({ clip });
 });
 
-test('loading state', async({ mount, page }) => {
-  await mount(
-    <TestApp>
+test('loading state', async({ render, page }) => {
+  await render(
     <GasTrackerPriceSnippet
       data={ data }
       type="fast"
       isLoading={ true }
-      />
-    </TestApp>,
+    />,
   );
   await expect(page).toHaveScreenshot({ clip });
 });
 
-const gweiUnitsTest = test.extend({
-  context: contextWithEnvs([
-    { name: 'NEXT_PUBLIC_GAS_TRACKER_UNITS', value: '["gwei","usd"]' },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ]) as any,
+test('with gwei as primary unit +@dark-mode', async({ render, page, mockEnvs }) => {
+  await mockEnvs([
+    [ 'NEXT_PUBLIC_GAS_TRACKER_UNITS', '["gwei","usd"]' ],
+  ]);
+  await render(
+    <GasTrackerPriceSnippet
+      data={ data }
+      type="slow"
+      isLoading={ false }
+    />,
+  );
+  await expect(page).toHaveScreenshot({ clip });
 });
 
-gweiUnitsTest('with gwei as primary unit +@dark-mode', async({ mount, page }) => {
-  await mount(
-    <TestApp>
+test('with zero values', async({ render, page }) => {
+  const data = {
+    fiat_price: '1.74',
+    price: 0.0,
+    time: 0,
+    base_fee: 0,
+    priority_fee: 0,
+  };
+
+  await render(
     <GasTrackerPriceSnippet
       data={ data }
       type="slow"
       isLoading={ false }
-      />
-    </TestApp>,
+    />,
   );
   await expect(page).toHaveScreenshot({ clip });
 });

ui/gasTracker/GasTrackerPriceSnippet.tsx

@@ -50,14 +50,14 @@ const GasTrackerPriceSnippet = ({ data, type, isLoading }: Props) => {
         </Skeleton>
       </Flex>
       <Skeleton isLoaded={ !isLoading } fontSize="sm" color="text_secondary" mt={ 3 } w="fit-content">
-        { data.price && data.fiat_price && <GasPrice data={ data } prefix={ `${ asymp } ` } unitMode="secondary"/> }
+        { data.price !== null && data.fiat_price !== null && <GasPrice data={ data } prefix={ `${ asymp } ` } unitMode="secondary"/> }
         <span> per transaction</span>
         { typeof data.time === 'number' && data.time > 0 && <span> / { (data.time / SECOND).toLocaleString(undefined, { maximumFractionDigits: 1 }) }s</span> }
       </Skeleton>
       <Skeleton isLoaded={ !isLoading } fontSize="sm" color="text_secondary" mt={ 2 } w="fit-content" whiteSpace="pre">
-        { data.base_fee && <span>Base { data.base_fee.toLocaleString(undefined, { maximumFractionDigits: 0 }) }</span> }
-        { data.base_fee && data.priority_fee && <span> / </span> }
-        { data.priority_fee && <span>Priority { data.priority_fee.toLocaleString(undefined, { maximumFractionDigits: 0 }) }</span> }
+        { typeof data.base_fee === 'number' && <span>Base { data.base_fee.toLocaleString(undefined, { maximumFractionDigits: 0 }) }</span> }
+        { typeof data.base_fee === 'number' && typeof data.priority_fee === 'number' && <span> / </span> }
+        { typeof data.priority_fee === 'number' && <span>Priority { data.priority_fee.toLocaleString(undefined, { maximumFractionDigits: 0 }) }</span> }
       </Skeleton>
     </Box>
   );

ui/pages/GasTracker.tsx

@@ -36,7 +36,8 @@ const GasTracker = () => {
       rowGap={ 1 }
       flexDir={{ base: 'column', lg: 'row' }}
     >
-      { data?.network_utilization_percentage && <GasTrackerNetworkUtilization percentage={ data.network_utilization_percentage } isLoading={ isLoading }/> }
+      { typeof data?.network_utilization_percentage === 'number' &&
+        <GasTrackerNetworkUtilization percentage={ data.network_utilization_percentage } isLoading={ isLoading }/> }
       { data?.gas_price_updated_at && (
         <Skeleton isLoaded={ !isLoading } whiteSpace="pre" display="flex" alignItems="center">
           <span>Last updated </span>