Feat: gas price in header

src/components/common/GasStation/index.tsx

@@ -0,0 +1,21 @@
+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" gap={0.5}>
+      <Typography minWidth={gasGwei.length * 0.75 + 'em'} fontWeight="bold">
+        {gasGwei}
+      </Typography>
+      <SvgIcon component={LocalGasStationIcon} inheritViewBox fontSize="small" />
+    </Box>
+  )
+}
+
+export default GasStation

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>>
@@ -76,6 +77,10 @@ const Header = ({ onMenuToggle, onBatchToggle }: HeaderProps): ReactElement => {
         <NotificationCenter />
       </div>
 
+      <div className={css.element}>
+        <GasStation />
+      </div>
+
       <div className={classnames(css.element, css.connectWallet)}>
         <ConnectWallet />
       </div>

src/hooks/__tests__/useGasPrice.test.ts

@@ -1,6 +1,6 @@
 import { BigNumber } from 'ethers'
 import { act, renderHook } from '@/tests/test-utils'
-import useGasPrice from '@/hooks/useGasPrice'
+import { useGasPriceAsync as useGasPrice } from '@/hooks/useGasPrice'
 import { useCurrentChain } from '../useChains'
 
 // mock useWeb3Readonly

src/hooks/useGasPrice.ts

@@ -1,3 +1,4 @@
+import { useContext, createContext } from 'react'
 import { BigNumber } from 'ethers'
 import type { FeeData } from '@ethersproject/abstract-provider'
 import type {
@@ -124,7 +125,12 @@ const getGasParameters = (
     maxPriorityFeePerGas: undefined,
   }
 }
-const useGasPrice = (): AsyncResult<GasFeeParams> => {
+
+type AsyncGasPrice = AsyncResult<GasFeeParams>
+
+export const GasContext = createContext<AsyncGasPrice>([undefined, undefined, true])
+
+export const useGasPriceAsync = (): AsyncGasPrice => {
   const chain = useCurrentChain()
   const gasPriceConfigs = chain?.gasPrice
   const [counter] = useIntervalCounter(REFRESH_DELAY)
@@ -154,4 +160,8 @@ const useGasPrice = (): AsyncResult<GasFeeParams> => {
   return [gasPrice, gasPriceError, isLoading]
 }
 
+const useGasPrice = (): AsyncResult<GasFeeParams> => {
+  return useContext(GasContext)
+}
+
 export default useGasPrice

src/pages/_app.tsx

@@ -37,6 +37,7 @@ import useSafeMessageNotifications from '@/hooks/messages/useSafeMessageNotifica
 import useSafeMessagePendingStatuses from '@/hooks/messages/useSafeMessagePendingStatuses'
 import useChangedValue from '@/hooks/useChangedValue'
 import { TxModalProvider } from '@/components/tx-flow'
+import { GasContext, useGasPriceAsync } from '@/hooks/useGasPrice'
 
 const GATEWAY_URL = IS_PRODUCTION || cgwDebugStorage.get() ? GATEWAY_URL_PRODUCTION : GATEWAY_URL_STAGING
 
@@ -67,13 +68,16 @@ const clientSideEmotionCache = createEmotionCache()
 export const AppProviders = ({ children }: { children: ReactNode | ReactNode[] }) => {
   const isDarkMode = useDarkMode()
   const themeMode = isDarkMode ? 'dark' : 'light'
+  const gasPrice = useGasPriceAsync()
 
   return (
     <SafeThemeProvider mode={themeMode}>
       {(safeTheme: Theme) => (
         <ThemeProvider theme={safeTheme}>
           <Sentry.ErrorBoundary showDialog fallback={ErrorBoundary}>
-            <TxModalProvider>{children}</TxModalProvider>
+            <GasContext.Provider value={gasPrice}>
+              <TxModalProvider>{children}</TxModalProvider>
+            </GasContext.Provider>
           </Sentry.ErrorBoundary>
         </ThemeProvider>
       )}