From 797d1c65f01468e60570d5ce3904adb4c3eab79b Mon Sep 17 00:00:00 2001
From: katspaugh <katspaugh@gmail.com>
Date: Wed, 16 Aug 2023 18:08:56 +0200
Subject: [PATCH] Feat: gas price in header

---
 src/components/common/GasStation/index.tsx | 19 +++++++++++++++++++
 src/components/common/Header/index.tsx     |  5 +++++
 2 files changed, 24 insertions(+)
 create mode 100644 src/components/common/GasStation/index.tsx

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 (
+    <Box display="flex" alignItems="center">
+      <Typography sx={{ minWidth: '1.4em' }}>{gasGwei}</Typography>
+      <SvgIcon component={LocalGasStationIcon} inheritViewBox fontSize="small" />
+    </Box>
+  )
+}
+
+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<SetStateAction<boolean>>
@@ -66,6 +67,10 @@ const Header = ({ onMenuToggle, onBatchToggle }: HeaderProps): ReactElement => {
         </div>
       )}
 
+      <div className={css.element}>
+        <GasStation />
+      </div>
+
       <div className={classnames(css.element, css.hideMobile)}>
         <BatchIndicator onClick={handleBatchToggle} />
       </div>