fix: Add info to tx creation

src/components/common/ConnectWallet/AccountCenter.tsx

@@ -56,7 +56,7 @@ const AccountCenter = ({ wallet }: { wallet: ConnectedWallet }) => {
     <>
       <ButtonBase onClick={handleClick} aria-describedby={id} disableRipple sx={{ alignSelf: 'stretch' }}>
         <Box className={css.buttonContainer}>
-          <WalletInfo wallet={wallet} balance={balance} />
+          <WalletInfo wallet={wallet} balance={balance} showBalance />
 
           <Box display="flex" alignItems="center" justifyContent="flex-end" marginLeft="auto">
             {open ? <ExpandLessIcon color="border" /> : <ExpandMoreIcon color="border" />}
@@ -109,7 +109,7 @@ const AccountCenter = ({ wallet }: { wallet: ConnectedWallet }) => {
             <Box className={css.row}>
               <Typography variant="caption">Balance</Typography>
               <Typography variant="body2">
-                <WalletBalance chainInfo={chainInfo} balance={balance} />
+                <WalletBalance balance={balance} />
               </Typography>
             </Box>
           </Box>

src/components/common/WalletBalance/index.tsx

@@ -1,16 +1,19 @@
-import { type ChainInfo } from '@safe-global/safe-gateway-typescript-sdk'
 import { formatVisualAmount } from '@/utils/formatters'
 import { Skeleton } from '@mui/material'
+import { type BigNumber } from 'ethers'
+import { useCurrentChain } from '@/hooks/useChains'
+
+const WalletBalance = ({ balance }: { balance: BigNumber | undefined }) => {
+  const currentChain = useCurrentChain()
 
-const WalletBalance = ({ chainInfo, balance }: { chainInfo: ChainInfo | undefined; balance: BigInt | undefined }) => {
   if (!balance) {
     return <Skeleton width={30} />
   }
 
   return (
     <>
-      {formatVisualAmount(balance.toString(10), chainInfo?.nativeCurrency.decimals ?? 18)}{' '}
-      {chainInfo?.nativeCurrency.symbol ?? 'ETH'}
+      {formatVisualAmount(balance, currentChain?.nativeCurrency.decimals ?? 18)}{' '}
+      {currentChain?.nativeCurrency.symbol ?? 'ETH'}
     </>
   )
 }

src/components/common/WalletInfo/index.tsx

@@ -12,10 +12,19 @@ import css from './styles.module.css'
 import Identicon from '@/components/common/Identicon'
 import classnames from 'classnames'
 import WalletBalance from '@/components/common/WalletBalance'
+import { type BigNumber } from 'ethers'
 
 export const UNKNOWN_CHAIN_NAME = 'Unknown'
 
-const WalletInfo = ({ wallet, balance }: { wallet: ConnectedWallet; balance: BigInt | undefined }): ReactElement => {
+const WalletInfo = ({
+  wallet,
+  balance,
+  showBalance = false,
+}: {
+  wallet: ConnectedWallet
+  balance?: BigNumber | undefined
+  showBalance?: boolean
+}): ReactElement => {
   const walletChain = useAppSelector((state) => selectChainById(state, wallet.chainId))
   const prefix = walletChain?.shortName
 
@@ -47,11 +56,13 @@ const WalletInfo = ({ wallet, balance }: { wallet: ConnectedWallet; balance: Big
           )}
         </Typography>
 
-        <Box display="flex" flexDirection="row" alignItems="center" gap={1}>
-          <Typography variant="caption" component="div" fontWeight="bold" className={css.balance}>
-            <WalletBalance chainInfo={walletChain} balance={balance} />
-          </Typography>
-        </Box>
+        {showBalance && (
+          <Box display="flex" flexDirection="row" alignItems="center" gap={1}>
+            <Typography variant="caption" component="div" fontWeight="bold" className={css.balance}>
+              <WalletBalance balance={balance} />
+            </Typography>
+          </Box>
+        )}
       </Box>
     </Box>
   )

src/components/tx/BalanceInfo/index.tsx

@@ -0,0 +1,28 @@
+import { Box, Stack, SvgIcon, Typography } from '@mui/material'
+import GasStationIcon from '@/public/images/common/gas-station.svg'
+import css from './styles.module.css'
+import useWalletBalance from '@/hooks/wallets/useWalletBalance'
+import WalletBalance from '@/components/common/WalletBalance'
+
+const BalanceInfo = () => {
+  const [balance] = useWalletBalance()
+
+  return (
+    <Box className={css.sponsoredBy}>
+      <SvgIcon component={GasStationIcon} inheritViewBox className={css.icon} />
+      <div>
+        <Stack direction="row" spacing={0.5} alignItems="center">
+          <Typography variant="body2" fontWeight={700} letterSpacing="0.1px">
+            Wallet balance
+          </Typography>
+        </Stack>
+
+        <Typography variant="body2" color="primary.light">
+          <WalletBalance balance={balance} />
+        </Typography>
+      </div>
+    </Box>
+  )
+}
+
+export default BalanceInfo

src/components/tx/BalanceInfo/styles.module.css

@@ -0,0 +1,20 @@
+.sponsoredBy {
+  padding: 8px 12px;
+  background-color: var(--color-background-main);
+  border-bottom-left-radius: 6px;
+  border-bottom-right-radius: 6px;
+  border-top: 1px solid var(--color-border-light);
+  display: flex;
+}
+
+.icon {
+  margin-right: 8px;
+  margin-top: -1px;
+  color: var(--color-text-secondary);
+  width: 24px;
+}
+
+.logo {
+  width: 16px;
+  height: 16px;
+}

src/components/tx/ExecutionMethodSelector/index.tsx

@@ -8,6 +8,7 @@ import SponsoredBy from '../SponsoredBy'
 import type { RelayResponse } from '@/services/tx/relaying'
 
 import css from './styles.module.css'
+import BalanceInfo from '@/components/tx/BalanceInfo'
 
 export const enum ExecutionMethod {
   RELAY = 'RELAY',
@@ -71,7 +72,7 @@ export const ExecutionMethodSelector = ({
         </FormControl>
       </div>
 
-      {shouldRelay && relays ? <SponsoredBy relays={relays} tooltip={tooltip} /> : null}
+      {shouldRelay && relays ? <SponsoredBy relays={relays} tooltip={tooltip} /> : wallet ? <BalanceInfo /> : null}
     </Box>
   )
 }

src/hooks/wallets/useWalletBalance.ts

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