Feat: show balances in the Safe List (#3546)

src/components/common/EthHashInfo/index.tsx

@@ -17,7 +17,8 @@ const EthHashInfo = ({
   const chain = useChain(props.chainId || currentChainId)
   const addressBooks = useAllAddressBooks()
   const link = chain && props.hasExplorer ? getBlockExplorerLink(chain, props.address) : undefined
-  const name = showName && chain ? addressBooks?.[chain.chainId]?.[props.address] || props.name : undefined
+  const addressBookName = chain ? addressBooks?.[chain.chainId]?.[props.address] : undefined
+  const name = showName ? addressBookName || props.name : undefined
 
   return (
     <SrcEthHashInfo

src/components/dashboard/Overview/Overview.tsx

@@ -4,17 +4,15 @@ import QrCodeButton from '@/components/sidebar/QrCodeButton'
 import { TxModalContext } from '@/components/tx-flow'
 import { NewTxFlow } from '@/components/tx-flow/flows'
 import { OVERVIEW_EVENTS, trackEvent } from '@/services/analytics'
-import { useAppSelector } from '@/store'
-import { selectCurrency } from '@/store/settingsSlice'
-import { formatCurrency } from '@/utils/formatNumber'
-import { useContext, useMemo, type ReactElement } from 'react'
+import { useContext, type ReactElement } from 'react'
 import { Button, Grid, Skeleton, Typography } from '@mui/material'
 import { WidgetBody, WidgetContainer } from '../styled'
 import useSafeInfo from '@/hooks/useSafeInfo'
 import { useVisibleBalances } from '@/hooks/useVisibleBalances'
 import ArrowIconNW from '@/public/images/common/arrow-top-right.svg'
 import ArrowIconSE from '@/public/images/common/arrow-se.svg'
 import BuyCryptoButton from '@/components/common/BuyCryptoButton'
+import FiatValue from '@/components/common/FiatValue'
 
 const SkeletonOverview = (
   <>
@@ -35,16 +33,10 @@ const SkeletonOverview = (
 )
 
 const Overview = (): ReactElement => {
-  const currency = useAppSelector(selectCurrency)
   const { safe, safeLoading, safeLoaded } = useSafeInfo()
   const { balances, loading: balancesLoading } = useVisibleBalances()
   const { setTxFlow } = useContext(TxModalContext)
 
-  const fiatTotal = useMemo(
-    () => (balances.fiatTotal ? formatCurrency(balances.fiatTotal, currency) : ''),
-    [currency, balances.fiatTotal],
-  )
-
   const isInitialState = !safeLoaded && !safeLoading
   const isLoading = safeLoading || balancesLoading || isInitialState
 
@@ -67,7 +59,7 @@ const Overview = (): ReactElement => {
                 </Typography>
                 <Typography component="div" variant="h1" fontSize={44} lineHeight="40px">
                   {safe.deployed ? (
-                    fiatTotal
+                    <FiatValue value={balances.fiatTotal} />
                   ) : (
                     <TokenAmount
                       value={balances.items[0].balance}

src/components/new-safe/OwnerRow/index.tsx

@@ -52,17 +52,19 @@ export const OwnerRow = ({
     [getValues],
   )
 
-  const { ens, name, resolving } = useAddressResolver(owner.address)
+  const { name, ens, resolving } = useAddressResolver(owner.address)
 
   useEffect(() => {
-    if (ens) {
-      setValue(`${fieldName}.ens`, ens)
-    }
-
     if (name && !getValues(`${fieldName}.name`)) {
       setValue(`${fieldName}.name`, name)
     }
-  }, [ens, setValue, getValues, name, fieldName])
+  }, [setValue, getValues, name, fieldName])
+
+  useEffect(() => {
+    if (ens) {
+      setValue(`${fieldName}.ens`, ens)
+    }
+  }, [ens, setValue, fieldName])
 
   const walletIsOwner = owner.address === wallet?.address
 

src/components/new-safe/load/steps/SetAddressStep/index.tsx

@@ -60,7 +60,6 @@ const SetAddressStep = ({ data, onSubmit, onBack }: StepRenderProps<LoadSafeForm
   } = formMethods
 
   const safeAddress = watch(Field.address)
-
   const randomName = useMnemonicSafeName()
   const { ens, name, resolving } = useAddressResolver(safeAddress)
 

src/components/sidebar/SidebarHeader/index.tsx

@@ -1,17 +1,15 @@
 import TokenAmount from '@/components/common/TokenAmount'
 import CounterfactualStatusButton from '@/features/counterfactual/CounterfactualStatusButton'
-import { type ReactElement, useMemo } from 'react'
+import { type ReactElement } from 'react'
 import Typography from '@mui/material/Typography'
 import IconButton from '@mui/material/IconButton'
 import Skeleton from '@mui/material/Skeleton'
 import Tooltip from '@mui/material/Tooltip'
 
-import { formatCurrency } from '@/utils/formatNumber'
 import useSafeInfo from '@/hooks/useSafeInfo'
 import SafeIcon from '@/components/common/SafeIcon'
 import NewTxButton from '@/components/sidebar/NewTxButton'
 import { useAppSelector } from '@/store'
-import { selectCurrency } from '@/store/settingsSlice'
 
 import css from './styles.module.css'
 import QrIconBold from '@/public/images/sidebar/qr-bold.svg'
@@ -31,10 +29,10 @@ import EnvHintButton from '@/components/settings/EnvironmentVariables/EnvHintBut
 import useSafeAddress from '@/hooks/useSafeAddress'
 import ExplorerButton from '@/components/common/ExplorerButton'
 import CopyTooltip from '@/components/common/CopyTooltip'
+import FiatValue from '@/components/common/FiatValue'
 import { useAddressResolver } from '@/hooks/useAddressResolver'
 
 const SafeHeader = (): ReactElement => {
-  const currency = useAppSelector(selectCurrency)
   const { balances } = useVisibleBalances()
   const safeAddress = useSafeAddress()
   const { safe } = useSafeInfo()
@@ -43,11 +41,6 @@ const SafeHeader = (): ReactElement => {
   const settings = useAppSelector(selectSettings)
   const { ens } = useAddressResolver(safeAddress)
 
-  const fiatTotal = useMemo(
-    () => (balances.fiatTotal ? formatCurrency(balances.fiatTotal, currency) : ''),
-    [currency, balances.fiatTotal],
-  )
-
   const addressCopyText = settings.shortName.copy && chain ? `${chain.shortName}:${safeAddress}` : safeAddress
 
   const blockExplorerLink = chain ? getBlockExplorerLink(chain, safeAddress) : undefined
@@ -76,7 +69,11 @@ const SafeHeader = (): ReactElement => {
 
             <Typography data-testid="currency-section" variant="body2" fontWeight={700}>
               {safe.deployed ? (
-                fiatTotal || <Skeleton variant="text" width={60} />
+                balances.fiatTotal ? (
+                  <FiatValue value={balances.fiatTotal} />
+                ) : (
+                  <Skeleton variant="text" width={60} />
+                )
               ) : (
                 <TokenAmount
                   value={balances.items[0]?.balance}

src/components/welcome/MyAccounts/AccountItem.tsx

@@ -1,6 +1,6 @@
 import { LoopIcon } from '@/features/counterfactual/CounterfactualStatusButton'
 import { selectUndeployedSafe } from '@/features/counterfactual/store/undeployedSafesSlice'
-import type { ChainInfo } from '@safe-global/safe-gateway-typescript-sdk'
+import type { ChainInfo, SafeOverview } from '@safe-global/safe-gateway-typescript-sdk'
 import { useCallback, useMemo } from 'react'
 import { ListItemButton, Box, Typography, Chip } from '@mui/material'
 import Link from 'next/link'
@@ -21,16 +21,18 @@ import { sameAddress } from '@/utils/addresses'
 import classnames from 'classnames'
 import { useRouter } from 'next/router'
 import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline'
+import type { SafeItem } from './useAllSafes'
+import FiatValue from '@/components/common/FiatValue'
+import QueueActions from './QueueActions'
 
 type AccountItemProps = {
-  chainId: string
-  address: string
-  threshold?: number
-  owners?: number
+  safeItem: SafeItem
+  safeOverview?: SafeOverview
   onLinkClick?: () => void
 }
 
-const AccountItem = ({ onLinkClick, chainId, address, ...rest }: AccountItemProps) => {
+const AccountItem = ({ onLinkClick, safeItem, safeOverview }: AccountItemProps) => {
+  const { chainId, address } = safeItem
   const chain = useAppSelector((state) => selectChainById(state, chainId))
   const undeployedSafe = useAppSelector((state) => selectUndeployedSafe(state, chainId, address))
   const safeAddress = useSafeAddress()
@@ -73,7 +75,9 @@ const AccountItem = ({ onLinkClick, chainId, address, ...rest }: AccountItemProp
     >
       <Track {...OVERVIEW_EVENTS.OPEN_SAFE} label={trackingLabel}>
         <Link onClick={onLinkClick} href={href} className={css.safeLink}>
-          <SafeIcon address={address} {...rest} />
+          <Box pr={2.5}>
+            <SafeIcon address={address} owners={safeOverview?.owners.length} threshold={safeOverview?.threshold} />
+          </Box>
 
           <Typography variant="body2" component="div" className={css.safeAddress}>
             {name && (
@@ -105,13 +109,22 @@ const AccountItem = ({ onLinkClick, chainId, address, ...rest }: AccountItemProp
             )}
           </Typography>
 
-          <Box flex={1} />
+          <Typography variant="body2" fontWeight="bold">
+            {safeOverview?.fiatTotal && <FiatValue value={safeOverview.fiatTotal} />}
+          </Typography>
 
           <ChainIndicator chainId={chainId} responsive />
         </Link>
       </Track>
 
       <SafeListContextMenu name={name} address={address} chainId={chainId} />
+
+      <QueueActions
+        queued={safeOverview?.queued || 0}
+        awaitingConfirmation={safeOverview?.awaitingConfirmation || 0}
+        safeAddress={address}
+        chainShortName={chain?.shortName || ''}
+      />
     </ListItemButton>
   )
 }