Refactor: Box flex -> Stack

src/components/balances/AssetsTable/index.tsx

@@ -1,6 +1,6 @@
 import CheckBalance from '@/features/counterfactual/CheckBalance'
 import { type ReactElement } from 'react'
-import { Box, IconButton, Checkbox, Skeleton, SvgIcon, Tooltip, Typography } from '@mui/material'
+import { Stack, IconButton, Checkbox, Skeleton, SvgIcon, Tooltip, Typography } from '@mui/material'
 import type { TokenInfo } from '@safe-global/safe-gateway-typescript-sdk'
 import { TokenType } from '@safe-global/safe-gateway-typescript-sdk'
 import css from './styles.module.css'
@@ -185,7 +185,7 @@ const AssetsTable = ({
               sticky: true,
               collapsed: item.tokenInfo.address === hidingAsset,
               content: (
-                <Box display="flex" flexDirection="row" gap={1} alignItems="center">
+                <Stack direction="row" spacing={1} alignItems="center">
                   <>
                     <SendButton tokenInfo={item.tokenInfo} />
 
@@ -209,7 +209,7 @@ const AssetsTable = ({
                       </Track>
                     )}
                   </>
-                </Box>
+                </Stack>
               ),
             },
           },

src/components/balances/TokenListSelect/index.tsx

@@ -2,7 +2,7 @@ import { useAppDispatch, useAppSelector } from '@/store'
 import { selectSettings, setTokenList, TOKEN_LISTS } from '@/store/settingsSlice'
 import { FEATURES } from '@/utils/chains'
 import type { SelectChangeEvent } from '@mui/material'
-import { Box, SvgIcon, Tooltip, Typography, FormControl, InputLabel, Select, MenuItem } from '@mui/material'
+import { Stack, SvgIcon, Tooltip, Typography, FormControl, InputLabel, Select, MenuItem } from '@mui/material'
 import InfoIcon from '@/public/images/notifications/info.svg'
 import ExternalLink from '@/components/common/ExternalLink'
 import { OnboardingTooltip } from '@/components/common/OnboardingTooltip'
@@ -58,7 +58,7 @@ const TokenListSelect = () => {
         >
           <MenuItem value={TOKEN_LISTS.TRUSTED}>
             <Track {...ASSETS_EVENTS.SHOW_DEFAULT_TOKENS}>
-              <Box display="flex" flexDirection="row" gap="4px" alignItems="center" minWidth={155}>
+              <Stack direction="row" spacing="4px" alignItems="center" minWidth={155}>
                 {TokenListLabel.TRUSTED}
                 <Tooltip
                   arrow
@@ -72,7 +72,7 @@ const TokenListSelect = () => {
                     <SvgIcon sx={{ display: 'block' }} color="border" fontSize="small" component={InfoIcon} />
                   </span>
                 </Tooltip>
-              </Box>
+              </Stack>
             </Track>
           </MenuItem>
 

src/components/balances/TokenMenu/index.tsx

@@ -2,7 +2,7 @@ import { Sticky } from '@/components/common/Sticky'
 import Track from '@/components/common/Track'
 import { ASSETS_EVENTS } from '@/services/analytics'
 import { VisibilityOffOutlined } from '@mui/icons-material'
-import { Box, Typography, Button } from '@mui/material'
+import { Stack, Typography, Button, Box } from '@mui/material'
 
 import css from './styles.module.css'
 
@@ -31,7 +31,7 @@ const TokenMenu = ({
             {selectedAssetCount} {selectedAssetCount === 1 ? 'token' : 'tokens'} selected
           </Typography>
         </Box>
-        <Box display="flex" flexDirection="row" gap={1}>
+        <Stack direction="row" spacing={1}>
           <Track {...ASSETS_EVENTS.CANCEL_HIDE_DIALOG}>
             <Button onClick={cancel} className={css.cancelButton} size="small" variant="outlined">
               Cancel
@@ -47,7 +47,7 @@ const TokenMenu = ({
               Save
             </Button>
           </Track>
-        </Box>
+        </Stack>
       </Box>
     </Sticky>
   )

src/components/batch/BatchIndicator/BatchTooltip.tsx

@@ -1,5 +1,5 @@
 import { type ReactElement, useEffect, useState } from 'react'
-import { Box, SvgIcon } from '@mui/material'
+import { Box, Stack, SvgIcon } from '@mui/material'
 
 import SuccessIcon from '@/public/images/common/success.svg'
 import { TxEvent, txSubscribe } from '@/services/tx/txEvents'
@@ -25,12 +25,12 @@ const BatchTooltip = ({ children }: { children: ReactElement }) => {
       open={showTooltip}
       onClose={() => setShowTooltip(false)}
       title={
-        <Box display="flex" flexDirection="column" alignItems="center" p={2} gap={2}>
+        <Stack alignItems="center" p={2} spacing={2}>
           <Box fontSize="53px">
             <SvgIcon component={SuccessIcon} inheritViewBox fontSize="inherit" />
           </Box>
           Transaction is added to batch
-        </Box>
+        </Stack>
       }
     >
       <div>{children}</div>

src/components/batch/BatchSidebar/EmptyBatch.tsx

@@ -4,10 +4,10 @@ import InfoIcon from '@/public/images/notifications/info.svg'
 import AssetsIcon from '@/public/images/sidebar/assets.svg'
 import AppsIcon from '@/public/images/apps/apps-icon.svg'
 import SettingsIcon from '@/public/images/sidebar/settings.svg'
-import { Box, SvgIcon, Typography } from '@mui/material'
+import { Box, Stack, SvgIcon, Typography } from '@mui/material'
 
 const EmptyBatch = ({ children }: { children: ReactNode }) => (
-  <Box display="flex" flexWrap="wrap" justifyContent="center" textAlign="center" mt={3} px={4}>
+  <Stack flexWrap="wrap" justifyContent="center" textAlign="center" mt={3} px={4}>
     <SvgIcon component={EmptyBatchIcon} inheritViewBox sx={{ fontSize: 110 }} />
 
     <Typography variant="h4" fontWeight={700}>
@@ -28,7 +28,7 @@ const EmptyBatch = ({ children }: { children: ReactNode }) => (
 
       <b>What type of transactions can you add to the batch?</b>
 
-      <Box display="flex" mt={3} gap={6}>
+      <Stack mt={3} spacing={6}>
         <div>
           <SvgIcon component={AssetsIcon} inheritViewBox />
           <div>Token and NFT transfers</div>
@@ -43,9 +43,9 @@ const EmptyBatch = ({ children }: { children: ReactNode }) => (
           <SvgIcon component={SettingsIcon} inheritViewBox />
           <div>Safe Account settings</div>
         </div>
-      </Box>
+      </Stack>
     </Typography>
-  </Box>
+  </Stack>
 )
 
 export default EmptyBatch

src/components/common/ConnectWallet/AccountCenter.tsx

@@ -1,6 +1,6 @@
 import type { MouseEvent } from 'react'
 import { useState } from 'react'
-import { Box, ButtonBase, Paper, Popover } from '@mui/material'
+import { Stack, ButtonBase, Paper, Popover, Box } from '@mui/material'
 import css from '@/components/common/ConnectWallet/styles.module.css'
 import ExpandLessIcon from '@mui/icons-material/ExpandLess'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
@@ -35,9 +35,9 @@ export const AccountCenter = ({ wallet }: { wallet: ConnectedWallet }) => {
         <Box className={css.buttonContainer}>
           <WalletOverview wallet={wallet} balance={balance} showBalance />
 
-          <Box display="flex" alignItems="center" justifyContent="flex-end" ml="auto">
+          <Stack alignItems="center" justifyContent="flex-end" ml="auto">
             {open ? <ExpandLessIcon color="border" /> : <ExpandMoreIcon color="border" />}
-          </Box>
+          </Stack>
         </Box>
       </ButtonBase>
 

src/components/common/CopyAddressButton/index.tsx

@@ -1,5 +1,5 @@
 import { checksumAddress } from '@/utils/addresses'
-import { Box, Typography } from '@mui/material'
+import { Stack, Typography } from '@mui/material'
 import type { ReactNode, ReactElement } from 'react'
 import CopyButton from '../CopyButton'
 import EthHashInfo from '../EthHashInfo'
@@ -22,7 +22,7 @@ const CopyAddressButton = ({
   const checksummedAddress = checksumAddress(address)
 
   const dialogContent = trusted ? undefined : (
-    <Box display="flex" flexDirection="column" gap={2}>
+    <Stack spacing={2}>
       <EthHashInfo
         address={checksummedAddress}
         shortAddress={false}
@@ -34,7 +34,7 @@ const CopyAddressButton = ({
         The copied address is linked to a transaction with an untrusted token. Make sure you are interacting with the
         right address.
       </Typography>
-    </Box>
+    </Stack>
   )
 
   return (

src/components/common/CopyTooltip/ConfirmCopyModal.tsx

@@ -9,7 +9,7 @@ import {
   DialogContent,
   DialogActions,
   Button,
-  Box,
+  Stack,
 } from '@mui/material'
 import WarningIcon from '@/public/images/notifications/warning.svg'
 import { type ReactElement, useEffect, type SyntheticEvent } from 'react'
@@ -35,21 +35,21 @@ const ConfirmCopyModal = ({ open, onClose, onCopy, children }: ConfirmCopyModalP
   return (
     <Dialog open={open} onClose={onClose}>
       <DialogTitle>
-        <Box data-testid="untrusted-token-warning" display="flex" flexDirection="row" alignItems="center" gap={1}>
+        <Stack data-testid="untrusted-token-warning" direction="row" alignItems="center" spacing={1}>
           <SvgIcon component={WarningIcon} inheritViewBox color="warning" sx={{ mb: -0.4 }} />
           <Typography variant="h6" fontWeight={700}>
             Before you copy
           </Typography>
           <IconButton aria-label="close" onClick={onClose} sx={{ marginLeft: 'auto' }}>
             <Close />
           </IconButton>
-        </Box>
+        </Stack>
       </DialogTitle>
       <Divider />
       <DialogContent>{children}</DialogContent>
       <Divider />
       <DialogActions sx={{ padding: 3 }}>
-        <Box className={css.dialogActions} gap={1}>
+        <Stack className={css.dialogActions} spacing={1}>
           <Track {...TX_LIST_EVENTS.COPY_WARNING_PROCEED}>
             <Button size="small" variant="text" color="primary" onClick={onCopy} fullWidth>
               Proceed and copy
@@ -60,7 +60,7 @@ const ConfirmCopyModal = ({ open, onClose, onCopy, children }: ConfirmCopyModalP
               Do not copy
             </Button>
           </Track>
-        </Box>
+        </Stack>
       </DialogActions>
     </Dialog>
   )

src/components/common/Countdown/index.tsx

@@ -1,4 +1,4 @@
-import { Typography, Box } from '@mui/material'
+import { Typography, Stack } from '@mui/material'
 import type { ReactElement } from 'react'
 
 export function _getCountdown(seconds: number): { days: number; hours: number; minutes: number } {
@@ -31,11 +31,11 @@ export function Countdown({ seconds }: { seconds: number }): ReactElement | null
   const { days, hours, minutes } = _getCountdown(seconds)
 
   return (
-    <Box display="flex" gap={1}>
+    <Stack spacing={1}>
       <TimeLeft value={days} unit="day" />
       <TimeLeft value={hours} unit="hr" />
       <TimeLeft value={minutes} unit="min" />
-    </Box>
+    </Stack>
   )
 }
 

src/components/common/EthHashInfo/SrcEthHashInfo/index.tsx

@@ -2,7 +2,7 @@ import classnames from 'classnames'
 import type { ReactNode, ReactElement, SyntheticEvent } from 'react'
 import { isAddress } from 'ethers'
 import { useTheme } from '@mui/material/styles'
-import { Box, SvgIcon, Tooltip } from '@mui/material'
+import { Box, Stack, SvgIcon, Tooltip } from '@mui/material'
 import AddressBookIcon from '@/public/images/sidebar/address-book.svg'
 import useMediaQuery from '@mui/material/useMediaQuery'
 import Identicon from '../../Identicon'
@@ -84,7 +84,7 @@ const SrcEthHashInfo = ({
 
       <Box overflow="hidden" className={onlyName ? css.inline : undefined} gap={0.5}>
         {name && (
-          <Box title={name} display="flex" alignItems="center" gap={0.5}>
+          <Stack title={name} alignItems="center" spacing={0.5}>
             <Box overflow="hidden" textOverflow="ellipsis">
               {name}
             </Box>
@@ -96,7 +96,7 @@ const SrcEthHashInfo = ({
                 </span>
               </Tooltip>
             )}
-          </Box>
+          </Stack>
         )}
 
         <div className={classnames(css.addressContainer, { [css.inline]: onlyName })}>

src/components/common/ExplorerButton/index.tsx

@@ -1,5 +1,5 @@
 import type { ReactElement, ComponentType, SyntheticEvent } from 'react'
-import { Box, IconButton, SvgIcon, Tooltip, Typography } from '@mui/material'
+import { Stack, IconButton, SvgIcon, Tooltip, Typography } from '@mui/material'
 import LinkIcon from '@/public/images/common/link.svg'
 import Link from 'next/link'
 
@@ -44,13 +44,13 @@ const ExplorerButton = ({
       href={href}
       onClick={onClick}
     >
-      <Box display="flex" alignItems="center">
+      <Stack alignItems="center">
         <Typography fontWeight={700} fontSize="small" mr="var(--space-1)" noWrap>
           View on explorer
         </Typography>
 
         <SvgIcon component={icon} inheritViewBox fontSize="small" />
-      </Box>
+      </Stack>
     </Link>
   )
 }