UnstoppableSwap · binarybaron · Nov 26, 2024
diff --git a/src-gui/package.json b/src-gui/package.json
@@ -15,10 +15,13 @@
     "tauri": "tauri"
   },
   "dependencies": {
+    "@emotion/react": "^11.13.5",
+    "@emotion/styled": "^11.13.5",
     "@fontsource/roboto": "^5.1.0",
-    "@material-ui/core": "^4.12.4",
-    "@material-ui/icons": "^4.11.3",
-    "@material-ui/lab": "^4.0.0-alpha.61",
+    "@mui/icons-material": "^5.0.0",
+    "@mui/lab": "^6.0.0-alpha",
+    "@mui/material": "^6.0.0",
+    "@mui/styles": "^6.0.0",
     "@reduxjs/toolkit": "^2.3.0",
     "@tauri-apps/api": "^2.0.0",
     "@tauri-apps/plugin-cli": "^2.0.0",
@@ -35,10 +38,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.0",
     "react-router-dom": "^6.28.0",
     "redux-persist": "^6.0.0",
     "semver": "^7.6.2",
@@ -68,4 +71,4 @@
     "vite-tsconfig-paths": "^4.3.2",
     "vitest": "^2.1.1"
   }
-}
+}
diff --git a/src-gui/src/renderer/components/App.tsx b/src-gui/src/renderer/components/App.tsx
@@ -1,5 +1,6 @@
-import { Box, CssBaseline, makeStyles } from "@material-ui/core";
-import { ThemeProvider } from "@material-ui/core/styles";
+import { Box, CssBaseline } from "@mui/material";
+import makeStyles from '@mui/styles/makeStyles';
+import { ThemeProvider, Theme, StyledEngineProvider } from "@mui/material/styles";
 import "@tauri-apps/plugin-shell";
 import { Route, MemoryRouter as Router, Routes } from "react-router-dom";
 import Navigation, { drawerWidth } from "./navigation/Navigation";
@@ -15,6 +16,13 @@ import { useEffect } from "react";
 import { setupBackgroundTasks } from "renderer/background";
 import "@fontsource/roboto";
 
+
+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),
@@ -32,16 +40,18 @@ export default function App() {
   const theme = useSettings((s) => s.theme);
 
   return (
-    <ThemeProvider theme={themes[theme]}>
-      <GlobalSnackbarProvider>
-        <CssBaseline />
-        <Router>
-          <Navigation />
-          <InnerContent />
-          <UpdaterDialog />
-        </Router>
-      </GlobalSnackbarProvider>
-    </ThemeProvider>
+    <StyledEngineProvider injectFirst>
+      (<ThemeProvider theme={themes[theme]}>
+        <GlobalSnackbarProvider>
+          <CssBaseline />
+          <Router>
+            <Navigation />
+            <InnerContent />
+            <UpdaterDialog />
+          </Router>
+        </GlobalSnackbarProvider>
+      </ThemeProvider>)
+    </StyledEngineProvider>
   );
 }
 

diff --git a/src-gui/src/renderer/components/ExampleComponent.tsx b/src-gui/src/renderer/components/ExampleComponent.tsx
@@ -0,0 +1 @@
+
diff --git a/src-gui/src/renderer/components/PromiseInvokeButton.tsx b/src-gui/src/renderer/components/PromiseInvokeButton.tsx
@@ -4,8 +4,8 @@ import {
   IconButton,
   IconButtonProps,
   Tooltip,
-} from "@material-ui/core";
-import CircularProgress from "@material-ui/core/CircularProgress";
+} from "@mui/material";
+import CircularProgress from "@mui/material/CircularProgress";
 import { useSnackbar } from "notistack";
 import { ReactNode, useState } from "react";
 import { useIsContextAvailable } from "store/hooks";
@@ -77,14 +77,14 @@ export default function PromiseInvokeButton<T>({
       : tooltipTitle) ?? "";
 
   return (
-    <Tooltip title={actualTooltipTitle}>
+    (<Tooltip title={actualTooltipTitle}>
       <span>
         {isIconButton ? (
           <IconButton
             onClick={handleClick}
             disabled={isDisabled}
             {...(rest as IconButtonProps)}
-          >
+            size="large">
             {actualEndIcon}
           </IconButton>
         ) : (
@@ -96,6 +96,6 @@ export default function PromiseInvokeButton<T>({
           />
         )}
       </span>
-    </Tooltip>
+    </Tooltip>)
   );
 }
diff --git a/src-gui/src/renderer/components/alert/BackgroundRefundAlert.tsx b/src-gui/src/renderer/components/alert/BackgroundRefundAlert.tsx
@@ -1,7 +1,7 @@
 import { BackgroundRefundState } from "models/tauriModel";
 import { useAppSelector } from "store/hooks";
 import { LoadingSpinnerAlert } from "./LoadingSpinnerAlert";
-import { AlertTitle } from "@material-ui/lab";
+import { AlertTitle } from '@mui/material';
 import TruncatedText from "../other/TruncatedText";
 import { useSnackbar } from "notistack";
 import { useEffect } from "react";

diff --git a/src-gui/src/renderer/components/alert/DaemonStatusAlert.tsx b/src-gui/src/renderer/components/alert/DaemonStatusAlert.tsx
@@ -1,5 +1,6 @@
-import { Box, Button, LinearProgress, makeStyles } from "@material-ui/core";
-import { Alert } from "@material-ui/lab";
+import { Box, Button, LinearProgress } from "@mui/material";
+import makeStyles from '@mui/styles/makeStyles';
+import { Alert } from '@mui/material';
 import { useNavigate } from "react-router-dom";
 import { useAppSelector } from "store/hooks";
 import { exhaustiveGuard } from "utils/typescriptUtils";

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/LoadingSpinnerAlert.tsx b/src-gui/src/renderer/components/alert/LoadingSpinnerAlert.tsx
@@ -1,5 +1,6 @@
-import { CircularProgress } from "@material-ui/core";
-import { AlertProps, Alert } from "@material-ui/lab";
+import { CircularProgress } from "@mui/material";
+import { Alert } from '@mui/material';
+import { AlertProps } from '@mui/lab';
 
 export function LoadingSpinnerAlert({ ...rest }: AlertProps) {
     return <Alert icon={<CircularProgress size={22} />} {...rest} />;

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 { Box, LinearProgress } from "@material-ui/core";
-import { Alert } from "@material-ui/lab";
+import { Box, LinearProgress } from "@mui/material";
+import { Alert } 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 { Box, makeStyles } from "@material-ui/core";
-import { Alert } from "@material-ui/lab";
+import { Box } from "@mui/material";
+import makeStyles from '@mui/styles/makeStyles';
+import { Alert } from '@mui/material';
 import { useAppSelector } from "store/hooks";
 import { SatsAmount } from "../other/Units";
 import WalletRefreshButton from "../pages/wallet/WalletRefreshButton";

diff --git a/src-gui/src/renderer/components/alert/SwapStatusAlert/SwapStatusAlert.tsx b/src-gui/src/renderer/components/alert/SwapStatusAlert/SwapStatusAlert.tsx
@@ -1,5 +1,6 @@
-import { Box, makeStyles } from "@material-ui/core";
-import { Alert, AlertTitle } from "@material-ui/lab/";
+import { Box } from "@mui/material";
+import makeStyles from '@mui/styles/makeStyles';
+import { Alert, AlertTitle } from "@mui/lab/";
 import {
   BobStateName,
   GetSwapInfoResponseExt,

diff --git a/src-gui/src/renderer/components/alert/SwapStatusAlert/TimelockTimeline.tsx b/src-gui/src/renderer/components/alert/SwapStatusAlert/TimelockTimeline.tsx
@@ -1,4 +1,4 @@
-import { useTheme, Tooltip, Typography, Box, LinearProgress, Paper } from "@material-ui/core";
+import { useTheme, Tooltip, Typography, Box, LinearProgress, Paper } from "@mui/material";
 import { ExpiredTimelocks } from "models/tauriModel";
 import { GetSwapInfoResponseExt, getAbsoluteBlock } from "models/tauriModelExt";
 import HumanizedBitcoinBlockDuration from "renderer/components/other/HumanizedBitcoinBlockDuration";
@@ -28,16 +28,23 @@ function TimelineSegment({
     const theme = useTheme();
 
     return (
-        <Tooltip title={<Typography variant="caption">{segment.title}</Typography>}>
-            <Box sx={{
+        (<Tooltip title={<Typography variant="caption">{segment.title}</Typography>}>
+            <Box sx={[{
                 display: 'flex',
                 flexDirection: 'column',
                 alignItems: 'center',
                 justifyContent: 'center',
                 bgcolor: segment.bgcolor,
-                width: `${durationOfSegment ? ((durationOfSegment / totalBlocks) * 85) : 15}%`,
-                position: 'relative',
-            }} style={{
+                position: 'relative'
+            }, durationOfSegment ? {
+                width: {
+                    width: ((durationOfSegment / totalBlocks) * 85)
+                }
+            } : {
+                width: {
+                    width: 15
+                }
+            }]} style={{
                 opacity: isActive ? 1 : 0.3
             }}>
                 {isActive && (
@@ -88,7 +95,7 @@ function TimelineSegment({
                     </Typography>
                 )}
             </Box>
-        </Tooltip>
+        </Tooltip>)
     );
 }
 

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/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 { useResumeableSwapsCountExcludingPunished } 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 { 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 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,4 +1,4 @@
-import { IconButton } from "@material-ui/core";
+import { IconButton } from "@mui/material";
 import { open } from "@tauri-apps/plugin-shell";
 import { ReactNode } from "react";
 
@@ -10,8 +10,8 @@ export default function LinkIconButton({
   children: ReactNode;
 }) {
   return (
-    <IconButton component="span" onClick={() => open(url)}>
+    (<IconButton component="span" onClick={() => open(url)} size="large">
       {children}
-    </IconButton>
+    </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,5 +1,5 @@
-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 { useEffect } from "react";
 import { isTestnet } from "store/config";
 import { isBtcAddressValid } from "utils/conversionUtils";

diff --git a/src-gui/src/renderer/components/inputs/MoneroAddressTextField.tsx b/src-gui/src/renderer/components/inputs/MoneroAddressTextField.tsx
@@ -1,12 +1,24 @@
-import { Box, Button, Dialog, DialogActions, DialogContent, IconButton, List, ListItem, ListItemText, TextField } from "@material-ui/core";
-import { TextFieldProps } from "@material-ui/core/TextField/TextField";
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  IconButton,
+  List,
+  ListItemText,
+  TextField,
+} from "@mui/material";
+import { TextFieldProps } from "@mui/material/TextField/TextField";
 import { useEffect, useState } from "react";
 import { getMoneroAddresses } from "renderer/rpc";
 import { isTestnet } from "store/config";
 import { isXmrAddressValid } from "utils/conversionUtils";
-import ImportContactsIcon from '@material-ui/icons/ImportContacts';
+import ImportContactsIcon from '@mui/icons-material/ImportContacts';
 import TruncatedText from "../other/TruncatedText";
 
+import ListItemButton from "@mui/material/ListItemButton";
+
 type MoneroAddressTextFieldProps = TextFieldProps & {
   address: string;
   onAddressChange: (address: string) => void;
@@ -93,7 +105,7 @@ function RecentlyUsedAddressesDialog({
   onAddressSelect
 }: RecentlyUsedAddressesDialogProps) {
   return (
-    <Dialog
+    (<Dialog
       open={open}
       onClose={onClose}
       maxWidth="sm"
@@ -102,12 +114,8 @@ function RecentlyUsedAddressesDialog({
       <DialogContent>
         <List>
           {addresses.map((addr) => (
-            <ListItem 
-              button 
-              key={addr}
-              onClick={() => onAddressSelect(addr)}
-            >
-              <ListItemText 
+            <ListItemButton key={addr} onClick={() => onAddressSelect(addr)}>
+              <ListItemText
                 primary={
                   <Box fontFamily="monospace">
                     <TruncatedText limit={40} truncateMiddle>
@@ -117,19 +125,19 @@ function RecentlyUsedAddressesDialog({
                 }
                 secondary="Recently used as a redeem address"
               />
-            </ListItem>
+            </ListItemButton>
           ))}
         </List>
       </DialogContent>
       <DialogActions>
-        <Button 
+        <Button
           onClick={onClose}
           variant="contained"
           color="primary"
         >
           Close
         </Button>
       </DialogActions>
-    </Dialog>
+    </Dialog>)
   );
 }
diff --git a/src-gui/src/renderer/components/modal/DialogHeader.tsx b/src-gui/src/renderer/components/modal/DialogHeader.tsx
@@ -1,4 +1,5 @@
-import { DialogTitle, makeStyles, Typography } from "@material-ui/core";
+import { DialogTitle, Typography } from "@mui/material";
+import makeStyles from '@mui/styles/makeStyles';
 import { ReactNode } from "react";
 
 const useStyles = makeStyles({
@@ -16,8 +17,8 @@ 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>
+    </DialogTitle>)
   );
 }