refactor: migrate to mui v5

package.json

@@ -10,13 +10,13 @@
   "dependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
-    "@material-ui/core": "^4.12.3",
-    "@material-ui/icons": "^4.11.2",
-    "@material-ui/lab": "^4.0.0-alpha.60",
-    "@mui/material": "^6.1.1",
+    "@mui/icons-material": "^6.1.4",
+    "@mui/lab": "^6.0.0-beta.12",
+    "@mui/material": "^6.1.4",
+    "@mui/styles": "^6.1.4",
     "@mui/x-charts": "^7.18.0",
     "clipboardy": "^3.0.0",
-    "react": "^17.0.2",
+    "react": "^17.0.0",
     "react-dom": "^17.0.2",
     "react-syntax-highlighter": "^15.5.0",
     "socket.io-client": "^4.4.1",

src/components/APITable.tsx

@@ -1,14 +1,14 @@
 import {
   Box,
-  makeStyles,
   Paper,
   Table,
   TableBody,
   TableCell,
   TableContainer,
   TableHead,
   TableRow,
-} from "@material-ui/core";
+} from "@mui/material";
+import makeStyles from '@mui/styles/makeStyles';
 import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
 import js from "react-syntax-highlighter/dist/esm/languages/hljs/javascript";
 import a11yDark from "react-syntax-highlighter/dist/esm/styles/hljs/a11y-dark";

src/components/App.tsx

@@ -1,13 +1,21 @@
-import { Box, CssBaseline, makeStyles, useMediaQuery } from "@material-ui/core";
-import indigo from "@material-ui/core/colors/indigo";
-import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
+import { Box, CssBaseline, useMediaQuery, adaptV4Theme } from "@mui/material";
+import makeStyles from '@mui/styles/makeStyles';
+import { createTheme, ThemeProvider, Theme, StyledEngineProvider } from "@mui/material/styles";
 import DownloadButton from "./DownloadButton";
 import Footer from "./Footer";
 import LiquidityInfo from "./LiquidityInfo";
 import MarketingPhraseHeadline from "./MarketingPhraseHeadline";
 import ScreenshotSlideshow from "./ScreenshotSlideshow";
 import AlertsSection from "./sections/AlertsSection";
 import FeaturesSection from "./sections/FeaturesSection";
+import { indigo } from '@mui/material/colors';
+
+
+declare module '@mui/styles/defaultTheme' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  interface DefaultTheme extends Theme {}
+}
+
 
 const useStyles = makeStyles((theme) => ({
   main: {
@@ -23,30 +31,30 @@ const useStyles = makeStyles((theme) => ({
     marginRight: "auto",
     display: "grid",
     flexDirection: "column",
-    padding: theme.spacing(2),
-    gridGap: theme.spacing(6),
+    padding: "1rem",
+    gridGap: "1rem",
     flex: 1,
     alignItems: "center",
   },
   faqAlertSection: {
     display: "flex",
     flexDirection: "column",
-    gap: theme.spacing(2),
+    gap: "1rem",
   },
 }));
 
-let theme = createMuiTheme({
+let theme = createTheme(adaptV4Theme({
   palette: {
-    type: "dark",
+    mode: "dark",
     primary: {
       main: "#f4511e",
     },
     secondary: indigo,
   },
-});
+}));
 
 function Content() {
-  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
   const classes = useStyles();
 
   if (!isMobile) {
@@ -82,13 +90,13 @@ function Content() {
     );
   } else {
     return (
-      <Box className={classes.content}>
+      (<Box className={classes.content}>
         <MarketingPhraseHeadline />
         <Box
           display="flex"
           alignItems="center"
           flexDirection="column"
-          gridGap="20px"
+          gap="20px"
         >
           <ScreenshotSlideshow />
           <DownloadButton />
@@ -98,7 +106,7 @@ function Content() {
           <LiquidityInfo />
           <AlertsSection />
         </Box>
-      </Box>
+      </Box>)
     );
   }
 }
@@ -107,12 +115,14 @@ export default function App() {
   const classes = useStyles();
 
   return (
-    <ThemeProvider theme={theme}>
-      <CssBaseline />
-      <Box className={classes.main}>
-        <Content />
-        <Footer />
-      </Box>
-    </ThemeProvider>
+    <StyledEngineProvider injectFirst>
+      (<ThemeProvider theme={theme}>
+        <CssBaseline />
+        <Box className={classes.main}>
+          <Content />
+          <Footer />
+        </Box>
+      </ThemeProvider>)
+    </StyledEngineProvider>
   );
 }

src/components/DownloadButton.tsx

@@ -1,15 +1,7 @@
-import {
-  Box,
-  Button,
-  IconButton,
-  Link,
-  makeStyles,
-  MenuItem,
-  Select,
-  Typography,
-} from "@material-ui/core";
-import GetAppIcon from "@material-ui/icons/GetApp";
-import GitHubIcon from "@material-ui/icons/GitHub";
+import { Box, Button, IconButton, Link, MenuItem, Select, Typography } from "@mui/material";
+import makeStyles from '@mui/styles/makeStyles';
+import GetAppIcon from "@mui/icons-material/GetApp";
+import GitHubIcon from "@mui/icons-material/GitHub";
 import { useEffect, useState } from "react";
 import AppleIcon from "./icons/AppleIcon";
 import LinuxIcon from "./icons/LinuxIcon";
@@ -85,7 +77,7 @@ export default function DownloadButton() {
   }, [os]);
 
   return (
-    <Box className={classes.outer}>
+    (<Box className={classes.outer}>
       <Box className={classes.upperBox}>
         <a href={downloadLink} className={classes.downloadButtonOuter}>
           <Button
@@ -116,11 +108,15 @@ export default function DownloadButton() {
         </Select>
       </Box>
       <Typography variant="caption" color="textSecondary">
-        <Link target="_blank" href={ALL_DOWNLOADS} color="textSecondary">
+        <Link
+          target="_blank"
+          href={ALL_DOWNLOADS}
+          color="textSecondary"
+          underline="hover">
           All downloads
         </Link>{" "}
         | v{VERSION} | Current version
       </Typography>
-    </Box>
+    </Box>)
   );
 }

src/components/DownloadDialog.tsx

@@ -5,7 +5,7 @@ import {
   DialogTitle,
   DialogActions,
   Button,
-} from "@material-ui/core";
+} from "@mui/material";
 
 export const GITHUB_URL =
   "https://github.com/UnstoppableSwap/unstoppableswap-gui";

src/components/Footer.tsx

@@ -1,9 +1,10 @@
-import { Box, Icon, makeStyles } from "@material-ui/core";
-import GitHubIcon from "@material-ui/icons/GitHub";
-import IconButton from "@material-ui/core/IconButton";
+import { Box, Icon } from "@mui/material";
+import makeStyles from '@mui/styles/makeStyles';
+import GitHubIcon from "@mui/icons-material/GitHub";
+import IconButton from "@mui/material/IconButton";
 import { GITHUB_URL } from "./DownloadDialog";
-import TwitterIcon from "@material-ui/icons/Twitter";
-import YouTubeIcon from "@material-ui/icons/YouTube";
+import TwitterIcon from "@mui/icons-material/Twitter";
+import YouTubeIcon from "@mui/icons-material/YouTube";
 import DiscordIcon from "./icons/DiscordIcon";
 
 const TWITTER_URL = "https://twitter.com/UnstoppableSwap";
@@ -32,15 +33,15 @@ export const Footer = () => {
   ];
 
   return (
-    <Box className={classes.root}>
+    (<Box className={classes.root}>
       {links.map(([icon, link], i) => {
         return (
-          <IconButton key={i} onClick={() => window.open(link, "_blank")}>
+          (<IconButton key={i} onClick={() => window.open(link, "_blank")} size="large">
             {icon}
-          </IconButton>
+          </IconButton>)
         );
       })}
-    </Box>
+    </Box>)
   );
 };
 

src/components/LiquidityInfo.tsx

@@ -1,11 +1,5 @@
-import {
-  Divider,
-  makeStyles,
-  Paper,
-  Typography,
-  useMediaQuery,
-  useTheme,
-} from "@material-ui/core";
+import { Divider, Paper, Typography, useMediaQuery, useTheme } from "@mui/material";
+import makeStyles from '@mui/styles/makeStyles';
 import { Box } from "@mui/material";
 import React, { useEffect, useState } from "react";
 import useStore from "../store";
@@ -44,18 +38,16 @@ const useStyles = makeStyles((theme) => ({
   },
   divider: {
     height: 100,
-    //   margin: theme.spacing(0, 2),
   },
   dividerHorizontal: {
     width: "100%",
-    //   margin: theme.spacing(2, 0),
   },
 }));
 
 export default function LiquidityInfo() {
   const classes = useStyles();
   const theme = useTheme();
-  const isNarrowScreen = useMediaQuery(theme.breakpoints.down("sm"));
+  const isNarrowScreen = useMediaQuery(theme.breakpoints.down('md'));
 
   const providers = useStore(
     (state) =>

src/components/MarketingPhraseHeadline.tsx

@@ -1,4 +1,5 @@
-import { Box, makeStyles, Typography } from "@material-ui/core";
+import { Box, Typography } from "@mui/material";
+import makeStyles from '@mui/styles/makeStyles';
 import { useState } from "react";
 
 const WORD_CHANGE_INTERVAL_SECS = 3;

src/components/ProviderTable.tsx

@@ -9,14 +9,14 @@ import {
   Switch,
   FormControlLabel,
   Box,
-  makeStyles,
   CircularProgress,
   LinearProgress,
   TableBody,
   Typography,
-} from "@material-ui/core";
-import IconButton from "@material-ui/core/IconButton";
-import CopyIcon from "@material-ui/icons/FileCopy";
+} from "@mui/material";
+import makeStyles from '@mui/styles/makeStyles';
+import IconButton from "@mui/material/IconButton";
+import CopyIcon from "@mui/icons-material/FileCopy";
 import { useState } from "react";
 import clipboard from "clipboardy";
 
@@ -33,13 +33,13 @@ function getCombinedMultiAddr(provider: {
 
 function ProviderCopyButton(provider: { multiAddr: string; peerId: string }) {
   return (
-    <IconButton
+    (<IconButton
       onClick={() => {
         clipboard.write(getCombinedMultiAddr(provider));
       }}
-    >
+      size="large">
       <CopyIcon />
-    </IconButton>
+    </IconButton>)
   );
 }
 

src/components/ScreenshotSlideshow.tsx

@@ -5,8 +5,9 @@ import Page4Screenshot from "../page_4_gui.png";
 import Page5Screenshot from "../page_5_gui.png";
 import Page7Screenshot from "../page_7_gui.png";
 
-import { Box, makeStyles } from "@material-ui/core";
-import { Pagination } from "@material-ui/lab";
+import { Box } from "@mui/material";
+import makeStyles from '@mui/styles/makeStyles';
+import { Pagination } from '@mui/material';
 import { useEffect, useState } from "react";
 
 const useStyles = makeStyles((theme) => ({

src/components/Units.tsx

@@ -1,4 +1,4 @@
-import { Tooltip } from "@material-ui/core";
+import { Tooltip } from "@mui/material";
 import { ReactNode } from "react";
 import { piconerosToXmr, satsToBtc } from "../utils";
 import BitcoinIcon from "./icons/BitcoinIcon";

src/components/alerts/BetaAlert.tsx

@@ -1,5 +1,5 @@
-import { Alert, AlertTitle } from "@material-ui/lab";
-import { TextField } from "@material-ui/core";
+import { Alert, AlertTitle } from '@mui/material';
+import { TextField } from "@mui/material";
 
 export default function BetaAlert() {
   return (

src/components/alerts/FundingAlert.tsx

@@ -1,23 +1,22 @@
-import { Alert, AlertTitle } from "@material-ui/lab";
-import { TextField } from "@material-ui/core";
+import { Alert, AlertTitle } from '@mui/material';
+import { TextField } from "@mui/material";
 
 export default function FundingAlert() {
   return (
-    <Alert severity="info">
-      <AlertTitle>We need your support</AlertTitle>
-      This project is still under active development. Please visit the COMIT
-      team's Github repository if you are a developer and would like to help.
-      You can also help us fund our operations by directly donating to:
-      <TextField
+    (<Alert severity="info">
+      <AlertTitle>We need your support</AlertTitle>This project is still under active development. Please visit the COMIT
+            team's Github repository if you are a developer and would like to help.
+            You can also help us fund our operations by directly donating to:
+            <TextField
+        variant="standard"
         label="Monero Donation Address"
         fullWidth
-        value="49LEH26DJGuCyr8xzRAzWPUryzp7bpccC7Hie1DiwyfJEyUKvMFAethRLybDYrFdU1eHaMkKQpUPebY4WT3cSjEvThmpjPa"
-      />
+        value="49LEH26DJGuCyr8xzRAzWPUryzp7bpccC7Hie1DiwyfJEyUKvMFAethRLybDYrFdU1eHaMkKQpUPebY4WT3cSjEvThmpjPa" />
       <TextField
+        variant="standard"
         label="Bitcoin Donation Address"
         fullWidth
-        value="bc1qz6lfs0r206396a9psunmkfpqh7sdf2zh3e7tnf"
-      />
-    </Alert>
+        value="bc1qz6lfs0r206396a9psunmkfpqh7sdf2zh3e7tnf" />
+    </Alert>)
   );
 }

src/components/icons/AppleIcon.tsx

@@ -1,4 +1,4 @@
-import { SvgIcon } from "@material-ui/core";
+import { SvgIcon } from "@mui/material";
 
 export default function AppleIcon() {
   return (