feat: Migrate to MUI v5

UnstoppableSwap · Aug 11, 2024 · 59393f4 · 59393f4
1 parent 3135e58
commit 59393f4
Show file tree

Hide file tree

Showing 90 changed files with 1,096 additions and 924 deletions.
diff --git a/src-gui/package.json b/src-gui/package.json
@@ -10,9 +10,12 @@
     "tauri": "tauri"
   },
   "dependencies": {
-    "@material-ui/core": "^4.12.4",
-    "@material-ui/icons": "^4.11.3",
-    "@material-ui/lab": "^4.0.0-alpha.61",
+    "@emotion/react": "^11.13.0",
+    "@emotion/styled": "^11.13.0",
+    "@mui/icons-material": "^5.16.7",
+    "@mui/lab": "^5.0.0-alpha.173",
+    "@mui/material": "^5.16.7",
+    "@mui/styles": "^5.16.7",
     "@reduxjs/toolkit": "^2.2.6",
     "@tauri-apps/api": ">=2.0.0-beta.0",
     "@tauri-apps/plugin-shell": ">=2.0.0-beta.0",
@@ -22,10 +25,10 @@
     "notistack": "^3.0.1",
     "pino": "^9.2.0",
     "pino-pretty": "^11.2.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
     "react-qr-code": "^2.0.15",
-    "react-redux": "^9.1.2",
+    "react-redux": "^8.0.1",
     "react-router-dom": "^6.24.1",
     "semver": "^7.6.2",
     "virtua": "^0.33.2"
@@ -36,7 +39,7 @@
     "@types/lodash": "^4.17.6",
     "@types/node": "^20.14.10",
     "@types/react": "^18.2.15",
-    "@types/react-dom": "^18.2.7",
+    "@types/react-dom": "^17.0.0",
     "@types/semver": "^7.5.8",
     "@vitejs/plugin-react": "^4.2.1",
     "internal-ip": "^7.0.0",

diff --git a/src-gui/src/renderer/components/App.tsx b/src-gui/src/renderer/components/App.tsx
@@ -1,6 +1,12 @@
-import { Box, makeStyles, CssBaseline } from "@material-ui/core";
-import { createTheme, ThemeProvider } from "@material-ui/core/styles";
-import { indigo } from "@material-ui/core/colors";
+import { Box, CssBaseline, adaptV4Theme } from "@mui/material";
+import makeStyles from "@mui/styles/makeStyles";
+import {
+  createTheme,
+  ThemeProvider,
+  Theme,
+  StyledEngineProvider,
+} from "@mui/material/styles";
+import { indigo } from "@mui/material/colors";
 import { MemoryRouter as Router, Routes, Route } from "react-router-dom";
 import Navigation, { drawerWidth } from "./navigation/Navigation";
 import HistoryPage from "./pages/history/HistoryPage";
@@ -9,6 +15,11 @@ import WalletPage from "./pages/wallet/WalletPage";
 import HelpPage from "./pages/help/HelpPage";
 import GlobalSnackbarProvider from "./snackbar/GlobalSnackbarProvider";
 
+declare module "@mui/styles/defaultTheme" {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  interface DefaultTheme extends Theme {}
+}
+
 const useStyles = makeStyles((theme) => ({
   innerContent: {
     padding: theme.spacing(4),
@@ -20,7 +31,7 @@ const useStyles = makeStyles((theme) => ({
 
 const theme = createTheme({
   palette: {
-    type: "dark",
+    mode: "dark",
     primary: {
       main: "#f4511e",
     },
@@ -29,9 +40,11 @@ const theme = createTheme({
   transitions: {
     create: () => "none",
   },
-  props: {
+  components: {
     MuiButtonBase: {
-      disableRipple: true,
+      defaultProps: {
+        disableRipple: true,
+      },
     },
   },
 });
@@ -54,14 +67,16 @@ function InnerContent() {
 
 export default function App() {
   return (
-    <ThemeProvider theme={theme}>
-      <GlobalSnackbarProvider>
-        <CssBaseline />
-        <Router>
-          <Navigation />
-          <InnerContent />
-        </Router>
-      </GlobalSnackbarProvider>
-    </ThemeProvider>
+    <StyledEngineProvider injectFirst>
+      <ThemeProvider theme={theme}>
+        <GlobalSnackbarProvider>
+          <CssBaseline />
+          <Router>
+            <Navigation />
+            <InnerContent />
+          </Router>
+        </GlobalSnackbarProvider>
+      </ThemeProvider>
+    </StyledEngineProvider>
   );
 }
diff --git a/src-gui/src/renderer/components/IpcInvokeButton.tsx b/src-gui/src/renderer/components/IpcInvokeButton.tsx
@@ -4,7 +4,7 @@ import {
   CircularProgress,
   IconButton,
   Tooltip,
-} from "@material-ui/core";
+} from "@mui/material";
 import { ReactElement, ReactNode, useEffect, useState } from "react";
 import { useSnackbar } from "notistack";
 import { useAppSelector } from "store/hooks";
@@ -139,7 +139,7 @@ export default function IpcInvokeButton<T>({
             onClick={handleClick}
             disabled={isDisabled}
             {...(rest as any)}
-          >
+            size="large">
             {actualEndIcon}
           </IconButton>
         ) : (

diff --git a/src-gui/src/renderer/components/PromiseInvokeButton.tsx b/src-gui/src/renderer/components/PromiseInvokeButton.tsx
@@ -1,5 +1,5 @@
-import { Button, ButtonProps, IconButton, Tooltip } from "@material-ui/core";
-import CircularProgress from "@material-ui/core/CircularProgress";
+import { Button, ButtonProps, IconButton, Tooltip } from "@mui/material";
+import CircularProgress from "@mui/material/CircularProgress";
 import { useSnackbar } from "notistack";
 import { ReactNode, useEffect, useState } from "react";
 
@@ -61,7 +61,11 @@ export default function PromiseInvokeButton<T>({
   const isDisabled = disabled || isLoading;
 
   return isIconButton ? (
-    <IconButton onClick={handleClick} disabled={isDisabled} {...(rest as any)}>
+    <IconButton
+      onClick={handleClick}
+      disabled={isDisabled}
+      {...(rest as any)}
+      size="large">
       {actualEndIcon}
     </IconButton>
   ) : (

diff --git a/src-gui/src/renderer/components/alert/FundsLeftInWalletAlert.tsx b/src-gui/src/renderer/components/alert/FundsLeftInWalletAlert.tsx
@@ -1,5 +1,5 @@
-import { Button } from "@material-ui/core";
-import Alert from "@material-ui/lab/Alert";
+import { Button } from "@mui/material";
+import Alert from '@mui/material/Alert';
 import { useNavigate } from "react-router-dom";
 import { useAppSelector } from "store/hooks";
 

diff --git a/src-gui/src/renderer/components/alert/MoneroWalletRpcUpdatingAlert.tsx b/src-gui/src/renderer/components/alert/MoneroWalletRpcUpdatingAlert.tsx
@@ -1,5 +1,5 @@
-import { Alert } from "@material-ui/lab";
-import { Box, LinearProgress } from "@material-ui/core";
+import { Alert } from '@mui/material';
+import { Box, LinearProgress } from "@mui/material";
 import { useAppSelector } from "store/hooks";
 
 export default function MoneroWalletRpcUpdatingAlert() {

diff --git a/src-gui/src/renderer/components/alert/RemainingFundsWillBeUsedAlert.tsx b/src-gui/src/renderer/components/alert/RemainingFundsWillBeUsedAlert.tsx
@@ -1,5 +1,6 @@
-import { Alert } from "@material-ui/lab";
-import { Box, makeStyles } from "@material-ui/core";
+import { Alert } from '@mui/material';
+import { Box } from "@mui/material";
+import makeStyles from '@mui/styles/makeStyles';
 import { useAppSelector } from "store/hooks";
 import WalletRefreshButton from "../pages/wallet/WalletRefreshButton";
 import { SatsAmount } from "../other/Units";

diff --git a/src-gui/src/renderer/components/alert/RpcStatusAlert.tsx b/src-gui/src/renderer/components/alert/RpcStatusAlert.tsx
@@ -1,5 +1,5 @@
-import { Alert } from "@material-ui/lab";
-import { CircularProgress } from "@material-ui/core";
+import { Alert } from '@mui/material';
+import { CircularProgress } from "@mui/material";
 import { useAppSelector } from "store/hooks";
 import { RpcProcessStateType } from "models/rpcModel";
 

diff --git a/src-gui/src/renderer/components/alert/SwapMightBeCancelledAlert.tsx b/src-gui/src/renderer/components/alert/SwapMightBeCancelledAlert.tsx
@@ -1,5 +1,5 @@
-import { makeStyles } from "@material-ui/core";
-import { Alert, AlertTitle } from "@material-ui/lab";
+import makeStyles from '@mui/styles/makeStyles';
+import { Alert, AlertTitle } from '@mui/material';
 import { useActiveSwapInfo } from "store/hooks";
 import {
   isSwapTimelockInfoCancelled,

diff --git a/src-gui/src/renderer/components/alert/SwapStatusAlert.tsx b/src-gui/src/renderer/components/alert/SwapStatusAlert.tsx
@@ -1,5 +1,6 @@
-import { Alert, AlertTitle } from "@material-ui/lab/";
-import { Box, makeStyles } from "@material-ui/core";
+import { Alert, AlertTitle } from "@mui/lab/";
+import { Box } from "@mui/material";
+import makeStyles from '@mui/styles/makeStyles';
 import { ReactNode } from "react";
 import { exhaustiveGuard } from "utils/typescriptUtils";
 import {
@@ -197,7 +198,8 @@ function SwapAlertStatusText({
       }
       return <ImmediateActionAlert />;
     default:
-      return exhaustiveGuard(swap.state_name);
+      throw new Error(`Unknown swap state: ${swap.state_name}`);
+    // return exhaustiveGuard(swap.state_name);
   }
 }
 

diff --git a/src-gui/src/renderer/components/alert/SwapTxLockAlertsBox.tsx b/src-gui/src/renderer/components/alert/SwapTxLockAlertsBox.tsx
@@ -1,4 +1,5 @@
-import { Box, makeStyles } from "@material-ui/core";
+import { Box } from "@mui/material";
+import makeStyles from '@mui/styles/makeStyles';
 import { useSwapInfosSortedByDate } from "store/hooks";
 import SwapStatusAlert from "./SwapStatusAlert";
 

diff --git a/src-gui/src/renderer/components/alert/UnfinishedSwapsAlert.tsx b/src-gui/src/renderer/components/alert/UnfinishedSwapsAlert.tsx
@@ -1,5 +1,5 @@
-import { Button } from "@material-ui/core";
-import Alert from "@material-ui/lab/Alert";
+import { Button } from "@mui/material";
+import Alert from '@mui/material/Alert';
 import { useNavigate } from "react-router-dom";
 import { useResumeableSwapsCount } from "store/hooks";
 

diff --git a/src-gui/src/renderer/components/icons/BitcoinIcon.tsx b/src-gui/src/renderer/components/icons/BitcoinIcon.tsx
@@ -1,5 +1,5 @@
-import { SvgIcon } from "@material-ui/core";
-import { SvgIconProps } from "@material-ui/core/SvgIcon/SvgIcon";
+import { SvgIcon } from "@mui/material";
+import { SvgIconProps } from "@mui/material/SvgIcon/SvgIcon";
 
 export default function BitcoinIcon(props: SvgIconProps) {
   return (

diff --git a/src-gui/src/renderer/components/icons/DiscordIcon.tsx b/src-gui/src/renderer/components/icons/DiscordIcon.tsx
@@ -1,5 +1,5 @@
-import { SvgIconProps } from "@material-ui/core/SvgIcon/SvgIcon";
-import { SvgIcon } from "@material-ui/core";
+import { SvgIconProps } from "@mui/material/SvgIcon/SvgIcon";
+import { SvgIcon } from "@mui/material";
 
 export default function DiscordIcon(props: SvgIconProps) {
   return (

diff --git a/src-gui/src/renderer/components/icons/LinkIconButton.tsx b/src-gui/src/renderer/components/icons/LinkIconButton.tsx
@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { IconButton } from "@material-ui/core";
+import { IconButton } from "@mui/material";
 
 export default function LinkIconButton({
   url,
@@ -9,7 +9,7 @@ export default function LinkIconButton({
   children: ReactNode;
 }) {
   return (
-    <IconButton component="span" onClick={() => window.open(url, "_blank")}>
+    <IconButton component="span" onClick={() => window.open(url, "_blank")} size="large">
       {children}
     </IconButton>
   );

diff --git a/src-gui/src/renderer/components/icons/MoneroIcon.tsx b/src-gui/src/renderer/components/icons/MoneroIcon.tsx
@@ -1,5 +1,5 @@
-import { SvgIcon } from "@material-ui/core";
-import { SvgIconProps } from "@material-ui/core/SvgIcon/SvgIcon";
+import { SvgIcon } from "@mui/material";
+import { SvgIconProps } from "@mui/material/SvgIcon/SvgIcon";
 
 export default function MoneroIcon(props: SvgIconProps) {
   return (

diff --git a/src-gui/src/renderer/components/icons/TorIcon.tsx b/src-gui/src/renderer/components/icons/TorIcon.tsx
@@ -1,5 +1,5 @@
-import { SvgIcon } from "@material-ui/core";
-import { SvgIconProps } from "@material-ui/core/SvgIcon/SvgIcon";
+import { SvgIcon } from "@mui/material";
+import { SvgIconProps } from "@mui/material/SvgIcon/SvgIcon";
 
 export default function TorIcon(props: SvgIconProps) {
   return (

diff --git a/src-gui/src/renderer/components/inputs/BitcoinAddressTextField.tsx b/src-gui/src/renderer/components/inputs/BitcoinAddressTextField.tsx
@@ -1,6 +1,6 @@
 import { useEffect } from "react";
-import { TextField } from "@material-ui/core";
-import { TextFieldProps } from "@material-ui/core/TextField/TextField";
+import { TextField } from "@mui/material";
+import { TextFieldProps } from "@mui/material/TextField/TextField";
 import { isBtcAddressValid } from "utils/conversionUtils";
 import { isTestnet } from "store/config";
 

diff --git a/src-gui/src/renderer/components/inputs/MoneroAddressTextField.tsx b/src-gui/src/renderer/components/inputs/MoneroAddressTextField.tsx
@@ -1,6 +1,6 @@
 import { useEffect } from "react";
-import { TextField } from "@material-ui/core";
-import { TextFieldProps } from "@material-ui/core/TextField/TextField";
+import { TextField } from "@mui/material";
+import { TextFieldProps } from "@mui/material/TextField/TextField";
 import { isXmrAddressValid } from "utils/conversionUtils";
 import { isTestnet } from "store/config";
 

diff --git a/src-gui/src/renderer/components/modal/DialogHeader.tsx b/src-gui/src/renderer/components/modal/DialogHeader.tsx
@@ -1,4 +1,6 @@
-import { DialogTitle, makeStyles, Typography } from "@material-ui/core";
+import { DialogTitle, Typography } from "@mui/material";
+
+import makeStyles from '@mui/styles/makeStyles';
 
 const useStyles = makeStyles({
   root: {
@@ -15,7 +17,7 @@ export default function DialogHeader({ title }: DialogTitleProps) {
   const classes = useStyles();
 
   return (
-    <DialogTitle disableTypography className={classes.root}>
+    <DialogTitle className={classes.root}>
       <Typography variant="h6">{title}</Typography>
     </DialogTitle>
   );

diff --git a/src-gui/src/renderer/components/modal/PaperTextBox.tsx b/src-gui/src/renderer/components/modal/PaperTextBox.tsx
@@ -1,4 +1,6 @@
-import { Button, makeStyles, Paper, Typography } from "@material-ui/core";
+import { Button, Paper, Typography } from "@mui/material";
+
+import makeStyles from "@mui/styles/makeStyles";
 
 const useStyles = makeStyles((theme) => ({
   logsOuter: {
@@ -21,7 +23,7 @@ export default function PaperTextBox({ stdOut }: { stdOut: string }) {
   }
 
   return (
-    <Paper className={classes.logsOuter} variant="outlined">
+    <Paper className={classes.logsOuter} variant="elevation">
       <Typography component="pre" variant="body2">
         {stdOut}
       </Typography>

diff --git a/src-gui/src/renderer/components/modal/SwapSuspendAlert.tsx b/src-gui/src/renderer/components/modal/SwapSuspendAlert.tsx
@@ -5,7 +5,7 @@ import {
   DialogContent,
   DialogContentText,
   DialogTitle,
-} from "@material-ui/core";
+} from "@mui/material";
 import IpcInvokeButton from "../IpcInvokeButton";
 
 type SwapCancelAlertProps = {

diff --git a/src-gui/src/renderer/components/modal/feedback/FeedbackDialog.tsx b/src-gui/src/renderer/components/modal/feedback/FeedbackDialog.tsx
@@ -9,7 +9,7 @@ import {
   MenuItem,
   Select,
   TextField,
-} from "@material-ui/core";
+} from "@mui/material";
 import { useState } from "react";
 import { useSnackbar } from "notistack";
 import { useActiveSwapInfo, useAppSelector } from "store/hooks";

diff --git a/src-gui/src/renderer/components/modal/listSellers/ListSellersDialog.tsx b/src-gui/src/renderer/components/modal/listSellers/ListSellersDialog.tsx
@@ -9,9 +9,9 @@ import {
   Button,
   Box,
   Chip,
-  makeStyles,
   Theme,
-} from "@material-ui/core";
+} from "@mui/material";
+import makeStyles from '@mui/styles/makeStyles';
 import { Multiaddr } from "multiaddr";
 import { useSnackbar } from "notistack";
 import IpcInvokeButton from "../../IpcInvokeButton";
@@ -91,6 +91,7 @@ export default function ListSellersDialog({
           discover providers and then connect and swap with them.
         </DialogContentText>
         <TextField
+          variant="standard"
           autoFocus
           margin="dense"
           label="Rendezvous point"
@@ -101,8 +102,7 @@ export default function ListSellersDialog({
           value={rendezvousAddress}
           onChange={handleMultiAddrChange}
           placeholder="/dns4/discover.unstoppableswap.net/tcp/8888/p2p/12D3KooWA6cnqJpVnreBVnoro8midDL9Lpzmg8oJPoAGi7YYaamE"
-          error={!!getMultiAddressError()}
-        />
+          error={!!getMultiAddressError()} />
         <Box className={classes.chipOuter}>
           {PRESET_RENDEZVOUS_POINTS.map((rAddress) => (
             <Chip

diff --git a/src-gui/src/renderer/components/modal/provider/ProviderInfo.tsx b/src-gui/src/renderer/components/modal/provider/ProviderInfo.tsx
@@ -1,5 +1,6 @@
-import { makeStyles, Box, Typography, Chip, Tooltip } from "@material-ui/core";
-import { VerifiedUser } from "@material-ui/icons";
+import { Box, Typography, Chip, Tooltip } from "@mui/material";
+import makeStyles from '@mui/styles/makeStyles';
+import { VerifiedUser } from "@mui/icons-material";
 import { satsToBtc, secondsToDays } from "utils/conversionUtils";
 import { ExtendedProviderStatus } from "models/apiModel";
 import {