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 && } + ) }