fix(mui): breaking changes after update to MUI 6

GemWallet · Dec 29, 2024 · a2af316 · a2af316
1 parent ea05681
commit a2af316
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 16 deletions.
diff --git a/packages/extension/src/components/pages/About/About.tsx b/packages/extension/src/components/pages/About/About.tsx
@@ -1,7 +1,7 @@
 import { FC, useCallback } from 'react';
 
 import LinkIcon from '@mui/icons-material/Link';
-import { List, ListItem, ListItemIcon, ListItemText, Typography } from '@mui/material';
+import { List, ListItemButton, ListItemIcon, ListItemText, Typography } from '@mui/material';
 import { useNavigate } from 'react-router-dom';
 
 import {
@@ -70,12 +70,12 @@ export const About: FC = () => {
         <Typography variant="subtitle2">Links</Typography>
         <List>
           {aboutLinks.map(({ name, url }) => (
-            <ListItem button key={name} onClick={() => openExternalLink(url)}>
+            <ListItemButton key={name} onClick={() => openExternalLink(url)}>
               <ListItemIcon>
                 <LinkIcon />
               </ListItemIcon>
               <ListItemText primary={name} />
-            </ListItem>
+            </ListItemButton>
           ))}
         </List>
       </div>

diff --git a/packages/extension/src/components/pages/AddNewTrustline/TokenModal.tsx b/packages/extension/src/components/pages/AddNewTrustline/TokenModal.tsx
@@ -3,7 +3,6 @@ import { FC } from 'react';
 import {
   Modal,
   List,
-  ListItem,
   ListItemText,
   ListItemAvatar,
   Avatar,
@@ -12,7 +11,8 @@ import {
   DialogActions,
   Button,
   DialogTitle,
-  CircularProgress
+  CircularProgress,
+  ListItemButton
 } from '@mui/material';
 
 import { convertHexCurrencyString } from '../../../utils';
@@ -93,7 +93,7 @@ export const TokenModal: FC<TokenModalProps> = ({
         ) : (
           <List style={{ maxHeight: '240px', overflow: 'auto', paddingTop: 0 }}>
             {tokens.map((token, index) => (
-              <ListItem button key={index} onClick={() => onSelectToken(token)}>
+              <ListItemButton key={index} onClick={() => onSelectToken(token)}>
                 <ListItemAvatar>
                   <Avatar src={token.icon} alt={`${token.currency} icon`} />
                 </ListItemAvatar>
@@ -127,7 +127,7 @@ export const TokenModal: FC<TokenModalProps> = ({
                   }}
                   secondaryTypographyProps={{ component: 'div' }}
                 />
-              </ListItem>
+              </ListItemButton>
             ))}
           </List>
         )}

diff --git a/packages/extension/src/components/pages/EditWallet/EditWallet.tsx b/packages/extension/src/components/pages/EditWallet/EditWallet.tsx
@@ -1,7 +1,7 @@
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 
 import NavigateNextIcon from '@mui/icons-material/NavigateNext';
-import { Button, CircularProgress, List, ListItem, ListItemText } from '@mui/material';
+import { Button, CircularProgress, List, ListItemButton, ListItemText } from '@mui/material';
 import { useNavigate, useParams } from 'react-router-dom';
 
 import { LIST_WALLETS_PATH } from '../../../constants';
@@ -109,13 +109,13 @@ export const EditWallet: FC = () => {
             </div>
             <List>
               {items.map(({ name, value, onClick }) => (
-                <ListItem button key={name} onClick={onClick}>
+                <ListItemButton key={name} onClick={onClick}>
                   <ListItemText primary={name} />
                   <div style={{ display: 'flex', alignItems: 'center' }}>
                     {value ? <ListItemText primary={value} /> : null}
                     <NavigateNextIcon />
                   </div>
-                </ListItem>
+                </ListItemButton>
               ))}
             </List>
           </div>

diff --git a/packages/extension/src/components/pages/Settings/MenuGroup.tsx b/packages/extension/src/components/pages/Settings/MenuGroup.tsx
@@ -2,7 +2,7 @@ import { CSSProperties, FC } from 'react';
 
 import NavigateNextIcon from '@mui/icons-material/NavigateNext';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
-import { ListItem, ListItemIcon, ListItemText } from '@mui/material';
+import { ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
 
 import { SECONDARY_GRAY } from '../../../constants';
 
@@ -60,16 +60,15 @@ export const MenuGroup: FC<MenuGroupProps> = ({ sectionName, items }) => {
       <div style={sectionHeaderStyle}>{sectionName}</div>
       <div style={groupStyles}>
         {items.map(({ name, type, onClick }, index, arr) => (
-          <ListItem
-            button
+          <ListItemButton
             key={name}
             onClick={onClick}
             style={{
               ...(index === 0
                 ? firstListItemStyles
                 : index === arr.length - 1
-                ? lastListItemStyles
-                : {}),
+                  ? lastListItemStyles
+                  : {}),
               ...(index !== arr.length - 1 ? listItemStyles : {})
             }}
             sx={{
@@ -91,7 +90,7 @@ export const MenuGroup: FC<MenuGroupProps> = ({ sectionName, items }) => {
                 <NavigateNextIcon />
               )}
             </ListItemIcon>
-          </ListItem>
+          </ListItemButton>
         ))}
       </div>
     </>