fix(polling): correct gas price color (#5413)

* fix(polling): correct gas price color

* pr feedback

src/components/Polling/index.tsx

@@ -9,29 +9,42 @@ import useMachineTimeMs from 'hooks/useMachineTime'
 import JSBI from 'jsbi'
 import useBlockNumber from 'lib/hooks/useBlockNumber'
 import ms from 'ms.macro'
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
-import styled, { keyframes, useTheme } from 'styled-components/macro'
+import styled, { keyframes } from 'styled-components/macro'
 import { ExternalLink, ThemedText } from 'theme'
 import { ExplorerDataType, getExplorerLink } from 'utils/getExplorerLink'
 
 import { MouseoverTooltip } from '../Tooltip'
 import { ChainConnectivityWarning } from './ChainConnectivityWarning'
 
-const StyledPolling = styled.div<{ warning: boolean }>`
+const StyledPolling = styled.div`
-  position: fixed;
-  display: flex;
   align-items: center;
-  right: 0;
   bottom: 0;
+  color: ${({ theme }) => theme.textTertiary};
+  display: none;
   padding: 1rem;
-  color: ${({ theme, warning }) => (warning ? theme.deprecated_yellow3 : theme.deprecated_green1)};
+  position: fixed;
+  right: 0;
   transition: 250ms ease color;
 
-  ${({ theme }) => theme.deprecated_mediaWidth.deprecated_upToMedium`
+  a {
-    display: none;
+    color: unset;
-  `}
+  }
+  a:hover {
+    color: unset;
+    text-decoration: none;
+  }
+
+  @media screen and (min-width: ${({ theme }) => theme.breakpoint.md}px) {
+    display: flex;
+  }
 `
-const StyledPollingNumber = styled(ThemedText.DeprecatedSmall)<{ breathe: boolean; hovering: boolean }>`
+const StyledPollingBlockNumber = styled(ThemedText.DeprecatedSmall)<{
+  breathe: boolean
+  hovering: boolean
+  warning: boolean
+}>`
+  color: ${({ theme, warning }) => (warning ? theme.deprecated_yellow3 : theme.deprecated_green1)};
   transition: opacity 0.25s ease;
   opacity: ${({ breathe, hovering }) => (hovering ? 0.7 : breathe ? 1 : 0.5)};
   :hover {
@@ -106,7 +119,6 @@ export default function Polling() {
   const [isHover, setIsHover] = useState(false)
   const machineTime = useMachineTimeMs(NETWORK_HEALTH_CHECK_MS)
   const blockTime = useCurrentBlockTimestamp()
-  const theme = useTheme()
   const isNftPage = useIsNftPage()
 
   const ethGasPrice = useGasPrice()
@@ -137,46 +149,49 @@ export default function Polling() {
 
   //TODO - chainlink gas oracle is really slow. Can we get a better data source?
 
-  return isNftPage ? null : (
+  const blockExternalLinkHref = useMemo(() => {
-    <>
+    if (!chainId || !blockNumber) return ''
-      <RowFixed>
+    return getExplorerLink(chainId, blockNumber.toString(), ExplorerDataType.BLOCK)
-        <StyledPolling onMouseEnter={() => setIsHover(true)} onMouseLeave={() => setIsHover(false)} warning={warning}>
+  }, [blockNumber, chainId])
-          <ExternalLink href="https://etherscan.io/gastracker">
+
-            {priceGwei ? (
+  if (isNftPage) {
-              <RowFixed style={{ marginRight: '8px' }}>
+    return null
-                <ThemedText.DeprecatedMain fontSize="11px" mr="8px" color={theme.deprecated_text3}>
+  }
-                  <MouseoverTooltip
+
-                    text={
+  return (
-                      <Trans>
+    <RowFixed>
-                        The current fast gas amount for sending a transaction on L1. Gas fees are paid in
+      <StyledPolling onMouseEnter={() => setIsHover(true)} onMouseLeave={() => setIsHover(false)}>
-                        Ethereum&apos;s native currency Ether (ETH) and denominated in GWEI.
+        <ExternalLink href="https://etherscan.io/gastracker">
-                      </Trans>
+          {!!priceGwei && (
-                    }
+            <RowFixed style={{ marginRight: '8px' }}>
-                  >
+              <ThemedText.DeprecatedMain fontSize="11px" mr="8px">
-                    {priceGwei.toString()} <Trans>gwei</Trans>
+                <MouseoverTooltip
-                  </MouseoverTooltip>
+                  text={
-                </ThemedText.DeprecatedMain>
+                    <Trans>
-                <StyledGasDot />
+                      The current fast gas amount for sending a transaction on L1. Gas fees are paid in Ethereum&apos;s
-              </RowFixed>
+                      native currency Ether (ETH) and denominated in GWEI.
-            ) : null}
+                    </Trans>
-          </ExternalLink>
+                  }
-          <StyledPollingNumber breathe={isMounting} hovering={isHover}>
+                >
-            <ExternalLink
+                  {priceGwei.toString()} <Trans>gwei</Trans>
-              href={
+                </MouseoverTooltip>
-                chainId && blockNumber ? getExplorerLink(chainId, blockNumber.toString(), ExplorerDataType.BLOCK) : ''
+              </ThemedText.DeprecatedMain>
-              }
+              <StyledGasDot />
+            </RowFixed>
+          )}
+        </ExternalLink>
+        <StyledPollingBlockNumber breathe={isMounting} hovering={isHover} warning={warning}>
+          <ExternalLink href={blockExternalLinkHref}>
+            <MouseoverTooltip
+              text={<Trans>The most recent block number on this network. Prices update on every block.</Trans>}
             >
-              <MouseoverTooltip
+              {blockNumber}&ensp;
-                text={<Trans>The most recent block number on this network. Prices update on every block.</Trans>}
+            </MouseoverTooltip>
-              >
+          </ExternalLink>
-                {blockNumber}&ensp;
+        </StyledPollingBlockNumber>
-              </MouseoverTooltip>
+        <StyledPollingDot warning={warning}>{isMounting && <Spinner warning={warning} />}</StyledPollingDot>{' '}
-            </ExternalLink>
+      </StyledPolling>
-          </StyledPollingNumber>
+      {warning && <ChainConnectivityWarning />}
-          <StyledPollingDot warning={warning}>{isMounting && <Spinner warning={warning} />}</StyledPollingDot>{' '}
+    </RowFixed>
-        </StyledPolling>
-        {warning && <ChainConnectivityWarning />}
-      </RowFixed>
-    </>
   )
 }