feat: show wallet balance in header

src/components/common/ConnectWallet/AccountCenter.tsx

@@ -1,6 +1,6 @@
 import type { MouseEvent } from 'react'
 import { useState } from 'react'
-import { Box, Button, ButtonBase, Paper, Popover, Typography } from '@mui/material'
+import { Box, Button, ButtonBase, Paper, Popover, Skeleton, Typography } from '@mui/material'
 import css from '@/components/common/ConnectWallet/styles.module.css'
 import EthHashInfo from '@/components/common/EthHashInfo'
 import ExpandLessIcon from '@mui/icons-material/ExpandLess'

src/components/common/WalletInfo/index.tsx

@@ -1,4 +1,4 @@
-import { Box, Typography } from '@mui/material'
+import { Box, Skeleton, Typography } from '@mui/material'
 import { Suspense } from 'react'
 import type { ReactElement } from 'react'
 
@@ -9,33 +9,52 @@ import { useAppSelector } from '@/store'
 import { selectChainById } from '@/store/chainsSlice'
 
 import css from './styles.module.css'
+import useWalletBalance from '@/hooks/wallets/useWalletBalance'
+import { formatVisualAmount } from '@/utils/formatters'
 
 export const UNKNOWN_CHAIN_NAME = 'Unknown'
 
 const WalletInfo = ({ wallet }: { wallet: ConnectedWallet }): ReactElement => {
   const walletChain = useAppSelector((state) => selectChainById(state, wallet.chainId))
   const prefix = walletChain?.shortName
+  const [balance, balanceError, balanceLoading] = useWalletBalance()
 
   return (
     <Box className={css.container}>
       <Box className={css.imageContainer}>
         <Suspense>
           <WalletIcon provider={wallet.label} icon={wallet.icon} />
-        </Suspense>
+        </Suspense>{' '}
       </Box>
 
       <Box className={css.walletDetails}>
-        <Typography variant="caption" component="div" className={css.walletName}>
-          {wallet.label} @ {walletChain?.chainName || UNKNOWN_CHAIN_NAME}
-        </Typography>
-
         <Typography variant="caption" fontWeight="bold" component="div">
           {wallet.ens ? (
             <div>{wallet.ens}</div>
           ) : (
-            <EthHashInfo prefix={prefix || ''} address={wallet.address} showName={false} showAvatar avatarSize={12} />
+            <EthHashInfo
+              showPrefix={false}
+              prefix={prefix || ''}
+              address={wallet.address}
+              showName={false}
+              showAvatar={false}
+            />
           )}
         </Typography>
+
+        <Box display="flex" flexDirection="row" alignItems="center" gap={1}>
+          <Typography variant="caption" component="div" className={css.balance}>
+            {balance !== undefined ? (
+              <>
+                {' '}
+                {formatVisualAmount(balance.toString(10), walletChain?.nativeCurrency.decimals ?? 18)}{' '}
+                {walletChain?.nativeCurrency.symbol ?? 'ETH'}
+              </>
+            ) : (
+              <Skeleton />
+            )}
+          </Typography>
+        </Box>
       </Box>
     </Box>
   )

src/components/common/WalletInfo/styles.module.css

@@ -28,7 +28,7 @@
     height: auto;
   }
 
-  .walletName {
+  .balance {
     display: none;
   }
 }

src/hooks/wallets/useWalletBalance.ts

@@ -0,0 +1,19 @@
+import useAsync from '../useAsync'
+import useWallet from './useWallet'
+
+const useWalletBalance = () => {
+  const wallet = useWallet()
+
+  return useAsync<BigInt | undefined>(async () => {
+    if (!wallet) {
+      return undefined
+    }
+    const balanceString = await wallet.provider.request({
+      method: 'eth_getBalance',
+      params: [wallet.address, 'latest'],
+    })
+    return BigInt(balanceString)
+  }, [wallet])
+}
+
+export default useWalletBalance