Refactor: restore old MUI props (#4620)

safe-global · Dec 6, 2024 · d8fd62f · d8fd62f
1 parent 17e32e5
commit d8fd62f
Show file tree

Hide file tree

Showing 184 changed files with 809 additions and 2,553 deletions.
diff --git a/next.config.mjs b/next.config.mjs
@@ -77,6 +77,7 @@ const nextConfig = {
       ...config.resolve.alias,
       'bn.js': path.resolve('./node_modules/bn.js/lib/bn.js'),
       'mainnet.json': path.resolve('./node_modules/@ethereumjs/common/dist.browser/genesisStates/mainnet.json'),
+      '@mui/material$': path.resolve('./src/components/common/Mui'),
     }
 
     if (dev) {

diff --git a/src/components/address-book/AddressBookTable/index.tsx b/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 || ''} />}
     </>
   )

diff --git a/src/components/address-book/EntryDialog/index.tsx b/src/components/address-book/EntryDialog/index.tsx
@@ -61,11 +61,7 @@ function EntryDialog({
       <FormProvider {...methods}>
         <form onSubmit={onSubmit}>
           <DialogContent>
-            <Box
-              sx={{
-                mb: 2,
-              }}
-            >
+            <Box mb={2}>
               <NameInput data-testid="name-input" label="Name" autoFocus name="name" required />
             </Box>
 

diff --git a/src/components/address-book/ExportDialog/index.tsx b/src/components/address-book/ExportDialog/index.tsx
@@ -71,11 +71,7 @@ function ExportDialog({
           .
         </Typography>
 
-        <Typography
-          sx={{
-            mt: 1,
-          }}
-        >
+        <Typography mt={1}>
           <ExternalLink
             href={HelpCenterArticle.ADDRESS_BOOK_DATA}
             title="Learn about the address book import and export"
@@ -84,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 }}>

diff --git a/src/components/balances/AssetsTable/index.tsx b/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 && (
@@ -189,14 +185,7 @@ const AssetsTable = ({
               sticky: true,
               collapsed: item.tokenInfo.address === hidingAsset,
               content: (
-                <Box
-                  sx={{
-                    display: 'flex',
-                    flexDirection: 'row',
-                    gap: 1,
-                    alignItems: 'center',
-                  }}
-                >
+                <Box display="flex" flexDirection="row" gap={1} alignItems="center">
                   <>
                     <SendButton tokenInfo={item.tokenInfo} />
 

diff --git a/src/components/balances/HiddenTokenButton/index.tsx b/src/components/balances/HiddenTokenButton/index.tsx
@@ -39,11 +39,7 @@ const HiddenTokenButton = ({
         >
           <>
             <VisibilityOutlined fontSize="small" />
-            <Typography
-              sx={{
-                fontSize: 'medium',
-              }}
-            >
+            <Typography fontSize="medium">
               {hiddenAssetCount === 0
                 ? 'Hide tokens'
                 : `${hiddenAssetCount} hidden token${maybePlural(hiddenAssetCount)}`}{' '}

diff --git a/src/components/balances/TokenListSelect/index.tsx b/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

diff --git a/src/components/balances/TokenMenu/index.tsx b/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

diff --git a/src/components/batch/BatchIndicator/BatchTooltip.tsx b/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

diff --git a/src/components/batch/BatchSidebar/BatchTxItem.tsx b/src/components/batch/BatchSidebar/BatchTxItem.tsx
@@ -63,11 +63,7 @@ const BatchTxItem = ({ id, count, timestamp, txDetails, onDelete }: BatchTxItemP
           >
             <TxType tx={txSummary} />
 
-            <Box
-              sx={{
-                flex: 1,
-              }}
-            >
+            <Box flex={1}>
               <TxInfo info={txDetails.txInfo} />
             </Box>
 
@@ -79,12 +75,7 @@ const BatchTxItem = ({ id, count, timestamp, txDetails, onDelete }: BatchTxItemP
                   <SvgIcon component={DeleteIcon} inheritViewBox fontSize="small" />
                 </ButtonBase>
 
-                <Box
-                  className={css.separator}
-                  sx={{
-                    mr: 2,
-                  }}
-                />
+                <Box className={css.separator} mr={2} />
               </>
             )}
           </Box>

diff --git a/src/components/batch/BatchSidebar/EmptyBatch.tsx b/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>

diff --git a/src/components/batch/BatchSidebar/index.tsx b/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>
 

diff --git a/src/components/common/AddressInput/index.tsx b/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>
           ),

diff --git a/src/components/common/AddressInputReadOnly/index.tsx b/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>

diff --git a/src/components/common/BuyCryptoButton/index.tsx b/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">

diff --git a/src/components/common/ChainIndicator/index.tsx b/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>
           )}

diff --git a/src/components/common/Chip/index.tsx b/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>
-Original file line number
+Diff line change
@@ Expand Up / @@ -140,6 +140,7 @@ const AddressInput = ({ @@
                   ) : (
                     <Skeleton variant="circular" width={32} height={32} animation={false} />
                   )}
                   {!rawValueRef.current.startsWith(`${currentShortName}:`) && <>{currentShortName}:</>}
                 </InputAdornment>
               ),
@@ Expand Down @@