diff --git a/src/components/common/GasStation/index.tsx b/src/components/common/GasStation/index.tsx new file mode 100644 index 0000000000..2422f3fff4 --- /dev/null +++ b/src/components/common/GasStation/index.tsx @@ -0,0 +1,19 @@ +import { Box, SvgIcon, Typography } from '@mui/material' +import LocalGasStationIcon from '@mui/icons-material/LocalGasStation' +import useGasPrice from '@/hooks/useGasPrice' +import { formatVisualAmount } from '@/utils/formatters' + +const GasStation = () => { + const [gasPrice] = useGasPrice() + const maxFeePerGas = gasPrice?.maxFeePerGas + const gasGwei = maxFeePerGas ? formatVisualAmount(maxFeePerGas, 'gwei', 0) : '' + + return ( + + {gasGwei} + + + ) +} + +export default GasStation diff --git a/src/components/common/Header/index.tsx b/src/components/common/Header/index.tsx index c2695ab811..4ce9fe90dd 100644 --- a/src/components/common/Header/index.tsx +++ b/src/components/common/Header/index.tsx @@ -15,6 +15,7 @@ import SafeLogo from '@/public/images/logo.svg' import Link from 'next/link' import useSafeAddress from '@/hooks/useSafeAddress' import BatchIndicator from '@/components/batch/BatchIndicator' +import GasStation from '../GasStation' type HeaderProps = { onMenuToggle?: Dispatch> @@ -66,6 +67,10 @@ const Header = ({ onMenuToggle, onBatchToggle }: HeaderProps): ReactElement => { )} +
+ +
+