diff --git a/src/components/Polling/index.tsx b/src/components/Polling/index.tsx
index 68ac264364..3eb9dade54 100644
--- a/src/components/Polling/index.tsx
+++ b/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 styled, { keyframes, useTheme } from 'styled-components/macro'
+import { useEffect, useMemo, useState } from 'react'
+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 }>`
- position: fixed;
- display: flex;
+const StyledPolling = styled.div`
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`
- display: none;
- `}
+ a {
+ 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 : (
- <>
-
- setIsHover(true)} onMouseLeave={() => setIsHover(false)} warning={warning}>
-
- {priceGwei ? (
-
-
-
- The current fast gas amount for sending a transaction on L1. Gas fees are paid in
- Ethereum's native currency Ether (ETH) and denominated in GWEI.
-
- }
- >
- {priceGwei.toString()} gwei
-
-
-
-
- ) : null}
-
-
- {
+ if (!chainId || !blockNumber) return ''
+ return getExplorerLink(chainId, blockNumber.toString(), ExplorerDataType.BLOCK)
+ }, [blockNumber, chainId])
+
+ if (isNftPage) {
+ return null
+ }
+
+ return (
+
+ setIsHover(true)} onMouseLeave={() => setIsHover(false)}>
+
+ {!!priceGwei && (
+
+
+
+ The current fast gas amount for sending a transaction on L1. Gas fees are paid in Ethereum's
+ native currency Ether (ETH) and denominated in GWEI.
+
+ }
+ >
+ {priceGwei.toString()} gwei
+
+
+
+
+ )}
+
+
+
+ The most recent block number on this network. Prices update on every block.}
>
- The most recent block number on this network. Prices update on every block.}
- >
- {blockNumber}
-
-
-
- {isMounting && }{' '}
-
- {warning && }
-
- >
+ {blockNumber}
+
+
+
+ {isMounting && }{' '}
+
+ {warning && }
+
)
}