Partially revert d7f9d98

revert.sh

@@ -0,0 +1,32 @@
+#!/bin/bash
+
+# Run `git diff` and parse the changed files
+echo "Fetching changed files..."
+changed_files=$(git diff --name-only)
+
+# Loop through each changed file
+for file in $changed_files; do
+  echo "Processing file: $file"
+
+  # Check if the file exists in the working directory
+  if [[ -f "$file" ]]; then
+    # Extract added/removed lines (lines starting with + or -)
+    diff_changes=$(git diff "$file" | grep -E '^\+|^\-')
+
+    # Check if the changes include invalid components (any letter except B and T)
+    invalid_changes=$(echo "$diff_changes" | grep -E '^\+.*<[^BT]|^\-.*<[^BT]')
+    valid_changes=$(echo "$diff_changes" | grep -E '^\+.*<(B|T)|^\-.*<(B|T)')
+
+    # Revert file if it contains invalid changes
+    if [[ -n "$invalid_changes" ]]; then
+      echo "Reverting changes in: $file (contains invalid components)"
+      git checkout -- "$file"
+    else
+      echo "Keeping changes in: $file (only modifies <B* or <T*)"
+    fi
+  else
+    echo "File does not exist in working directory: $file"
+  fi
+done
+
+echo "Done processing changes."

src/components/address-book/AddressBookTable/index.tsx

@@ -145,32 +145,32 @@ function AddressBookTable({ chain, setTxFlow }: AddressBookTableProps) {
         searchQuery={searchQuery}
         onSearchQueryChange={setSearchQuery}
       />
+
       <main>
         {filteredEntries.length > 0 ? (
           <EnhancedTable rows={rows} headCells={headCells} mobileVariant />
         ) : (
-          <Box
-            sx={{
-              bgcolor: 'background.paper',
-              borderRadius: 1,
-            }}
-          >
+          <Box bgcolor="background.paper" borderRadius={1}>
             <PagePlaceholder
               img={<NoEntriesIcon />}
               text={`No entries found${chain ? ` on ${chain.chainName}` : ''}`}
             />
           </Box>
         )}
       </main>
+
       {open[ModalType.EXPORT] && <ExportDialog handleClose={handleClose} />}
+
       {open[ModalType.IMPORT] && <ImportDialog handleClose={handleClose} />}
+
       {open[ModalType.ENTRY] && (
         <EntryDialog
           handleClose={handleClose}
           defaultValues={defaultValues}
           disableAddressInput={Boolean(defaultValues?.name)}
         />
       )}
+
       {open[ModalType.REMOVE] && <RemoveDialog handleClose={handleClose} address={defaultValues?.address || ''} />}
     </>
   )

src/components/address-book/ExportDialog/index.tsx

@@ -80,6 +80,7 @@ function ExportDialog({
           </ExternalLink>
         </Typography>
       </DialogContent>
+
       <DialogActions>
         <Button onClick={handleClose}>Cancel</Button>
         <CSVDownloader filename={filename} bom config={{ delimiter: ',' }} data={csvData} style={{ order: 2 }}>

src/components/balances/AssetsTable/index.tsx

@@ -157,11 +157,7 @@ const AssetsTable = ({
               rawValue: rawFiatValue,
               collapsed: item.tokenInfo.address === hidingAsset,
               content: (
-                <Typography
-                  sx={{
-                    textAlign: 'right',
-                  }}
-                >
+                <Typography textAlign="right">
                   <FiatValue value={item.fiatBalance} />
 
                   {rawFiatValue === 0 && (

src/components/balances/TokenListSelect/index.tsx

@@ -35,6 +35,7 @@ const TokenListSelect = () => {
   return (
     <FormControl size="small">
       <InputLabel id="tokenlist-select-label">Token list</InputLabel>
+
       <OnboardingTooltip
         widgetLocalStorageId={LS_TOKENLIST_ONBOARDING}
         text={
@@ -57,15 +58,7 @@ const TokenListSelect = () => {
         >
           <MenuItem value={TOKEN_LISTS.TRUSTED}>
             <Track {...ASSETS_EVENTS.SHOW_DEFAULT_TOKENS}>
-              <Box
-                sx={{
-                  display: 'flex',
-                  flexDirection: 'row',
-                  gap: '4px',
-                  alignItems: 'center',
-                  minWidth: 155,
-                }}
-              >
+              <Box display="flex" flexDirection="row" gap="4px" alignItems="center" minWidth={155}>
                 {TokenListLabel.TRUSTED}
                 <Tooltip
                   arrow

src/components/balances/TokenMenu/index.tsx

@@ -27,22 +27,11 @@ const TokenMenu = ({
       <Box className={css.wrapper}>
         <Box className={css.hideTokensHeader}>
           <VisibilityOffOutlined />
-          <Typography
-            variant="body2"
-            sx={{
-              lineHeight: 'inherit',
-            }}
-          >
+          <Typography variant="body2" lineHeight="inherit">
             {selectedAssetCount} {selectedAssetCount === 1 ? 'token' : 'tokens'} selected
           </Typography>
         </Box>
-        <Box
-          sx={{
-            display: 'flex',
-            flexDirection: 'row',
-            gap: 1,
-          }}
-        >
+        <Box display="flex" flexDirection="row" gap={1}>
           <Track {...ASSETS_EVENTS.CANCEL_HIDE_DIALOG}>
             <Button onClick={cancel} className={css.cancelButton} size="small" variant="outlined">
               Cancel

src/components/batch/BatchIndicator/BatchTooltip.tsx

@@ -25,20 +25,8 @@ const BatchTooltip = ({ children }: { children: ReactElement }) => {
       open={showTooltip}
       onClose={() => setShowTooltip(false)}
       title={
-        <Box
-          sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'center',
-            p: 2,
-            gap: 2,
-          }}
-        >
-          <Box
-            sx={{
-              fontSize: '53px',
-            }}
-          >
+        <Box display="flex" flexDirection="column" alignItems="center" p={2} gap={2}>
+          <Box fontSize="53px">
             <SvgIcon component={SuccessIcon} inheritViewBox fontSize="inherit" />
           </Box>
           Transaction is added to batch

src/components/batch/BatchSidebar/EmptyBatch.tsx

@@ -7,66 +7,28 @@ import SettingsIcon from '@/public/images/sidebar/settings.svg'
 import { Box, SvgIcon, Typography } from '@mui/material'
 
 const EmptyBatch = ({ children }: { children: ReactNode }) => (
-  <Box
-    sx={{
-      display: 'flex',
-      flexWrap: 'wrap',
-      justifyContent: 'center',
-      textAlign: 'center',
-      mt: 3,
-      px: 4,
-    }}
-  >
+  <Box display="flex" flexWrap="wrap" justifyContent="center" textAlign="center" mt={3} px={4}>
     <SvgIcon component={EmptyBatchIcon} inheritViewBox sx={{ fontSize: 110 }} />
 
-    <Typography
-      variant="h4"
-      sx={{
-        fontWeight: 700,
-      }}
-    >
+    <Typography variant="h4" fontWeight={700}>
       Add an initial transaction to the batch
     </Typography>
 
-    <Typography
-      variant="body2"
-      sx={{
-        mt: 2,
-        mb: 4,
-        px: 8,
-        textWrap: 'balance',
-      }}
-    >
+    <Typography variant="body2" mt={2} mb={4} px={8} sx={{ textWrap: 'balance' }}>
       Save gas and signatures by adding multiple Safe transactions to a single batch transaction. You can reorder and
       delete individual transactions in a batch.
     </Typography>
 
     {children}
 
-    <Typography
-      variant="body2"
-      sx={{
-        color: 'border.main',
-        mt: 8,
-      }}
-    >
-      <Box
-        sx={{
-          mb: 1,
-        }}
-      >
+    <Typography variant="body2" color="border.main" mt={8}>
+      <Box mb={1}>
         <SvgIcon component={InfoIcon} inheritViewBox />
       </Box>
 
       <b>What type of transactions can you add to the batch?</b>
 
-      <Box
-        sx={{
-          display: 'flex',
-          mt: 3,
-          gap: 6,
-        }}
-      >
+      <Box display="flex" mt={3} gap={6}>
         <div>
           <SvgIcon component={AssetsIcon} inheritViewBox />
           <div>Token and NFT transfers</div>

src/components/batch/BatchSidebar/index.tsx

@@ -62,13 +62,7 @@ const BatchSidebar = ({ isOpen, onToggle }: { isOpen: boolean; onToggle: (open:
   return (
     <Drawer variant="temporary" anchor="right" open={isOpen} onClose={closeSidebar} transitionDuration={100}>
       <aside className={css.aside}>
-        <Typography
-          variant="h4"
-          sx={{
-            fontWeight: 700,
-            mb: 1,
-          }}
-        >
+        <Typography variant="h4" fontWeight={700} mb={1}>
           Batched transactions
         </Typography>
 

src/components/common/AddressInput/index.tsx

@@ -140,6 +140,7 @@ const AddressInput = ({
               ) : (
                 <Skeleton variant="circular" width={32} height={32} animation={false} />
               )}
+
               {!rawValueRef.current.startsWith(`${currentShortName}:`) && <>{currentShortName}:</>}
             </InputAdornment>
           ),

src/components/common/AddressInputReadOnly/index.tsx

@@ -7,13 +7,7 @@ const AddressInputReadOnly = ({ address }: { address: string }): ReactElement =>
   return (
     <div className={css.input} data-testid="address-book-recipient">
       <InputAdornment position="start">
-        <Typography
-          variant="body2"
-          component="div"
-          sx={{
-            width: 1,
-          }}
-        >
+        <Typography variant="body2" component="div" width={1}>
           <EthHashInfo address={address} shortAddress={false} copyAddress={false} />
         </Typography>
       </InputAdornment>

src/components/common/BuyCryptoButton/index.tsx

@@ -37,15 +37,7 @@ const buttonStyles = {
 const BuyCryptoOption = ({ name, children }: { name: string; children: ReactNode }) => {
   return (
     <ButtonBase className={css.button}>
-      <Typography
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          fontWeight: 'bold',
-          fontSize: '18px',
-          gap: 1,
-        }}
-      >
+      <Typography display="flex" alignItems="center" fontWeight="bold" fontSize="18px" gap={1}>
         {children}
         {name}
       </Typography>
@@ -57,11 +49,7 @@ const BuyCryptoOption = ({ name, children }: { name: string; children: ReactNode
 const _BuyCryptoOptions = ({ rampLink }: { rampLink?: LinkProps['href'] }) => {
   if (rampLink) {
     return (
-      <Box
-        sx={{
-          position: 'relative',
-        }}
-      >
+      <Box position="relative">
         <Track {...OVERVIEW_EVENTS.BUY_CRYPTO_BUTTON} label="onboarding">
           <Link href={rampLink} passHref>
             <BuyCryptoOption name="Ramp">

src/components/common/ChainIndicator/index.tsx

@@ -84,13 +84,7 @@ const ChainIndicator = ({
         <Stack>
           <span className={css.name}>{chainConfig.chainName}</span>
           {fiatValue && (
-            <Typography
-              sx={{
-                fontWeight: 700,
-                textAlign: 'left',
-                fontSize: '14px',
-              }}
-            >
+            <Typography fontWeight={700} textAlign="left" fontSize="14px">
               <FiatValue value={fiatValue} />
             </Typography>
           )}

src/components/common/Chip/index.tsx

@@ -17,14 +17,12 @@ export function Chip({ sx, label = 'New' }: Props) {
       label={
         <Typography
           variant="caption"
+          fontWeight="bold"
+          display="flex"
+          alignItems="center"
+          gap={1}
+          letterSpacing="1px"
           component="span"
-          sx={{
-            fontWeight: 'bold',
-            display: 'flex',
-            alignItems: 'center',
-            gap: 1,
-            letterSpacing: '1px',
-          }}
         >
           {label}
         </Typography>

src/components/common/ConnectWallet/AccountCenter.tsx

@@ -35,18 +35,12 @@ export const AccountCenter = ({ wallet }: { wallet: ConnectedWallet }) => {
         <Box className={css.buttonContainer}>
           <WalletOverview wallet={wallet} balance={balance} showBalance />
 
-          <Box
-            sx={{
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'flex-end',
-              marginLeft: 'auto',
-            }}
-          >
+          <Box display="flex" alignItems="center" justifyContent="flex-end" marginLeft="auto">
             {open ? <ExpandLessIcon color="border" /> : <ExpandMoreIcon color="border" />}
           </Box>
         </Box>
       </ButtonBase>
+
       <Popover
         id={id}
         open={open}

src/components/common/CopyAddressButton/index.tsx

@@ -22,13 +22,7 @@ const CopyAddressButton = ({
   const checksummedAddress = checksumAddress(address)
 
   const dialogContent = trusted ? undefined : (
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 2,
-      }}
-    >
+    <Box display="flex" flexDirection="column" gap={2}>
       <EthHashInfo
         address={checksummedAddress}
         shortAddress={false}