partial: first codemod

new-lamassu-admin/src/App.jsx

@@ -6,8 +6,9 @@ import {
   StylesProvider,
   jssPreset,
   MuiThemeProvider,
-  makeStyles
+  StyledEngineProvider,
-} from '@mui/material/styles'
+  makeStyles,
+} from '@mui/material/styles';
 import { create } from 'jss'
 import extendJss from 'jss-plugin-extend'
 import React, { useContext, useState } from 'react'
@@ -153,15 +154,17 @@ const App = () => {
       <Router>
         <ApolloProvider>
           <StylesProvider jss={jss}>
+            <StyledEngineProvider injectFirst>
               <MuiThemeProvider theme={theme}>
                 <CssBaseline />
                 <Main />
               </MuiThemeProvider>
+            </StyledEngineProvider>
           </StylesProvider>
         </ApolloProvider>
       </Router>
     </AppContext.Provider>
-  )
+  );
 }
 
 export default App

new-lamassu-admin/src/components/booleanPropertiesTable/BooleanPropertiesTable.jsx

@@ -86,7 +86,8 @@ const BooleanPropertiesTable = memo(
                   ) : (
                     <IconButton
                       className={classes.transparentButton}
-                      onClick={() => setEditing(true)}>
+                      onClick={() => setEditing(true)}
+                      size="large">
                       {disabled ? <EditIconDisabled /> : <EditIcon />}
                     </IconButton>
                   )}
@@ -121,11 +122,11 @@ const BooleanPropertiesTable = memo(
                   </TableBody>
                 </Table>
               </Form>
-            )
+            );
           }}
         </Formik>
       </div>
-    )
+    );
   }
 )
 

new-lamassu-admin/src/components/editableTable/Row.jsx

@@ -77,7 +77,8 @@ const ActionCol = ({ disabled, editing }) => {
           <IconButton
             disabled={disableEdit}
             className={classes.editButton}
-            onClick={() => onEdit && onEdit(values.id)}>
+            onClick={() => onEdit && onEdit(values.id)}
+            size="large">
             {disableEdit ? <DisabledEditIcon /> : <EditIcon />}
           </IconButton>
         </Td>
@@ -88,7 +89,8 @@ const ActionCol = ({ disabled, editing }) => {
             disabled={disabled}
             onClick={() => {
               setDeleteDialog(true)
-            }}>
+            }}
+            size="large">
             {disabled ? <DisabledDeleteIcon /> : <DeleteIcon />}
           </IconButton>
           <DeleteDialog
@@ -114,7 +116,7 @@ const ActionCol = ({ disabled, editing }) => {
         </Td>
       )}
     </>
-  )
+  );
 }
 
 const ECol = ({ editing, focus, config, extraPaddingRight, extraPadding }) => {

new-lamassu-admin/src/components/inputs/base/Autocomplete.jsx

@@ -114,7 +114,7 @@ const Autocomplete = ({
           <Box
             width={18}
             height={18}
-            borderRadius={6}
+            borderRadius="6px"
             bgcolor={warningColors[props.warning]}
           />
         )
@@ -134,7 +134,7 @@ const Autocomplete = ({
         )
       }}
     />
-  )
+  );
 }
 
 export default Autocomplete

new-lamassu-admin/src/components/single-row-table/SingleRowTable.jsx

@@ -33,7 +33,7 @@ const SingleRowTable = ({
         <THead>
           <Th className={classes.head}>
             {title}
-            <IconButton onClick={onEdit} className={classes.button}>
+            <IconButton onClick={onEdit} className={classes.button} size="large">
               <EditIcon />
             </IconButton>
           </Th>
@@ -62,7 +62,7 @@ const SingleRowTable = ({
         </TBody>
       </Table>
     </>
-  )
+  );
 }
 
 export default SingleRowTable

new-lamassu-admin/src/pages/AddMachine/AddMachine.jsx

@@ -252,7 +252,7 @@ const AddMachine = memo(({ close, onPaired }) => {
           <div className={classes.wrapper}>
             <div className={classes.headerDiv}>
               <Title>Add Machine</Title>
-              <IconButton disableRipple={true} onClick={close}>
+              <IconButton disableRipple={true} onClick={close} size="large">
                 <SvgIcon color="error">
                   <CloseIcon />
                 </SvgIcon>
@@ -279,7 +279,7 @@ const AddMachine = memo(({ close, onPaired }) => {
         </DialogContent>
       </Dialog>
     </div>
-  )
+  );
 })
 
 export default AddMachine

new-lamassu-admin/src/pages/Authentication/Login.jsx

@@ -15,13 +15,13 @@ const Login = () => {
       spacing={0}
       direction="column"
       alignItems="center"
-      justify="center"
+      justifyContent="center"
       className={classes.welcomeBackground}>
       <Grid>
         <LoginCard />
       </Grid>
     </Grid>
-  )
+  );
 }
 
 export default Login

new-lamassu-admin/src/pages/Authentication/Register.jsx

@@ -131,7 +131,7 @@ const Register = () => {
       spacing={0}
       direction="column"
       alignItems="center"
-      justify="center"
+      justifyContent="center"
       className={classes.welcomeBackground}>
       <Grid>
         <div>
@@ -214,7 +214,7 @@ const Register = () => {
         </div>
       </Grid>
     </Grid>
-  )
+  );
 }
 
 export default Register

new-lamassu-admin/src/pages/Authentication/Reset2FA.jsx

@@ -121,7 +121,7 @@ const Reset2FA = () => {
       spacing={0}
       direction="column"
       alignItems="center"
-      justify="center"
+      justifyContent="center"
       className={classes.welcomeBackground}>
       <Grid>
         <div>
@@ -205,7 +205,7 @@ const Reset2FA = () => {
         </div>
       </Grid>
     </Grid>
-  )
+  );
 }
 
 export default Reset2FA

new-lamassu-admin/src/pages/Authentication/ResetPassword.jsx

@@ -96,7 +96,7 @@ const ResetPassword = () => {
       spacing={0}
       direction="column"
       alignItems="center"
-      justify="center"
+      justifyContent="center"
       className={classes.welcomeBackground}>
       <Grid>
         <div>
@@ -164,7 +164,7 @@ const ResetPassword = () => {
         </div>
       </Grid>
     </Grid>
-  )
+  );
 }
 
 export default ResetPassword

new-lamassu-admin/src/pages/Blacklist/BlacklistAdvanced.jsx

@@ -64,7 +64,8 @@ const BlacklistAdvanced = ({
       view: it => (
         <IconButton
           className={classes.deleteButton}
-          onClick={() => setSelectedMessage(it)}>
+          onClick={() => setSelectedMessage(it)}
+          size="large">
           <EditIcon />
         </IconButton>
       )
@@ -81,7 +82,8 @@ const BlacklistAdvanced = ({
           disabled={
             !R.isNil(R.path(['allowToggle'], it)) &&
             !R.path(['allowToggle'], it)
-          }>
+          }
+          size="large">
           {R.path(['allowToggle'], it) ? (
             <DeleteIcon />
           ) : (

new-lamassu-admin/src/pages/Blacklist/BlacklistTable.jsx

@@ -49,7 +49,8 @@ const BlacklistTable = ({
           onClick={() => {
             setDeleteDialog(true)
             setToBeDeleted(it)
-          }}>
+          }}
+          size="large">
           <DeleteIcon />
         </IconButton>
       )

new-lamassu-admin/src/pages/Customers/helper.jsx

@@ -317,7 +317,7 @@ const ManualDataEntry = ({ selectedValues, customInfoRequirementOptions }) => {
           fullWidth
           label={`Available requests`}
           className={classes.picker}
-          getOptionSelected={R.eqProps('code')}
+          isOptionEqualToValue={R.eqProps('code')}
           labelProp={'display'}
           options={customInfoRequirementOptions}
           onChange={(evt, it) => {}}
@@ -343,7 +343,7 @@ const ManualDataEntry = ({ selectedValues, customInfoRequirementOptions }) => {
           }></Upload>
       )}
     </>
-  )
+  );
 }
 
 const customElements = {

new-lamassu-admin/src/pages/LoyaltyPanel/IndividualDiscounts.jsx

@@ -144,7 +144,8 @@ const IndividualDiscounts = () => {
           onClick={() => {
             setDeleteDialog(true)
             setToBeDeleted({ variables: { discountId: t.id } })
-          }}>
+          }}
+          size="large">
           <DeleteIcon />
         </IconButton>
       )

new-lamassu-admin/src/pages/LoyaltyPanel/PromoCodes.jsx

@@ -120,7 +120,8 @@ const PromoCodes = () => {
           onClick={() => {
             setDeleteDialog(true)
             setToBeDeleted({ variables: { codeId: t.id } })
-          }}>
+          }}
+          size="large">
           <DeleteIcon />
         </IconButton>
       )

new-lamassu-admin/src/pages/Maintenance/CashUnits.jsx

@@ -200,9 +200,7 @@ const CashCassettes = () => {
     />
   )
 
-  return (
+  return (!dataLoading && (<>
-    !dataLoading && (
-      <>
     <TitleSection
       title="Cash boxes & cassettes"
       buttons={[
@@ -258,7 +256,8 @@ const CashCassettes = () => {
             )}
             <IconButton
               onClick={() => setEditingSchema(true)}
-                  className={classes.button}>
+              className={classes.button}
+              size="large">
               <EditIcon />
             </IconButton>
           </Box>
@@ -349,9 +348,7 @@ const CashCassettes = () => {
         </DialogActions>
       </Modal>
     )}
-      </>
+  </>));
-    )
-  )
 }
 
 export default CashCassettes

new-lamassu-admin/src/pages/Maintenance/helper.jsx

@@ -132,10 +132,11 @@ const getElements = (
             onClick={() => {
               !R.isNil(setMachineId) && setMachineId(m.id ?? m.deviceId)
               setWizard(true)
-            }}>
+            }}
+            size="large">
             <EditIcon />
           </IconButton>
-        )
+        );
       }
     }
   ]

new-lamassu-admin/src/pages/Notifications/components/EditHeader.jsx

@@ -20,7 +20,8 @@ const Header = ({ title, editing, disabled, setEditing }) => {
         <IconButton
           onClick={() => setEditing(true)}
           className={classes.button}
-          disabled={disabled}>
+          disabled={disabled}
+          size="large">
           {disabled ? <DisabledEditIcon /> : <EditIcon />}
         </IconButton>
       )}
@@ -35,7 +36,7 @@ const Header = ({ title, editing, disabled, setEditing }) => {
         </div>
       )}
     </div>
-  )
+  );
 }
 
 export default Header

new-lamassu-admin/src/pages/OperatorInfo/ContactInfo.jsx

@@ -221,7 +221,8 @@ const ContactInfo = ({ wizard }) => {
           {!editing && (
             <IconButton
               className={classes.transparentButton}
-              onClick={() => setEditing(true)}>
+              onClick={() => setEditing(true)}
+              size="large">
               <EditIcon />
             </IconButton>
           )}
@@ -311,7 +312,7 @@ const ContactInfo = ({ wizard }) => {
         </div>
       )}
     </>
-  )
+  );
 }
 
 export default ContactInfo

new-lamassu-admin/src/pages/OperatorInfo/SMSNotices/SMSNotices.jsx

@@ -180,7 +180,8 @@ const SMSNotices = () => {
             setPreviewOpen(false)
             setSelectedSMS(it)
             setShowModal(true)
-          }}>
+          }}
+          size="large">
           <EditIcon />
         </IconButton>
       )
@@ -221,7 +222,8 @@ const SMSNotices = () => {
             R.equals(selectedSMS, it)
               ? setPreviewOpen(!previewOpen)
               : setPreviewOpen(true)
-          }}>
+          }}
+          size="large">
           {R.equals(selectedSMS, it) && previewOpen ? (
             <ExpandIconOpen />
           ) : (

new-lamassu-admin/src/pages/OperatorInfo/TermsConditions.jsx

@@ -233,7 +233,8 @@ const TermsConditions = () => {
         {!editing && (
           <IconButton
             className={classes.transparentButton}
-            onClick={() => setEditing(true)}>
+            onClick={() => setEditing(true)}
+            size="large">
             <EditIcon />
           </IconButton>
         )}
@@ -287,7 +288,7 @@ const TermsConditions = () => {
         )}
       </Formik>
     </>
-  )
+  );
 }
 
 export default TermsConditions

new-lamassu-admin/src/pages/Services/schemas/bitgo.js

@@ -144,6 +144,6 @@ export default {
       environment: Yup.string('The environment must be a string')
         .matches(/(prod|test)/)
         .required('The environment is required')
-    })
+    });
   }
 }

new-lamassu-admin/src/pages/Services/schemas/galoy.js

@@ -57,6 +57,6 @@ export default {
       endpoint: Yup.string('The endpoint must be a string')
         .max(100, 'The endpoint is too long')
         .required('The endpoint is required')
-    })
+    });
   }
 }

new-lamassu-admin/src/pages/SessionManagement/SessionManagement.jsx

@@ -98,7 +98,8 @@ const SessionManagement = () => {
         <IconButton
           onClick={() => {
             deleteSession({ variables: { sid: s.sid } })
-          }}>
+          }}
+          size="large">
           <DeleteIcon />
         </IconButton>
       )

new-lamassu-admin/src/pages/Transactions/CopyToClipboard.jsx

@@ -71,7 +71,7 @@ const CopyToClipboard = ({
         </>
       )}
     </div>
-  )
+  );
 }
 
 export default CopyToClipboard

new-lamassu-admin/src/pages/Triggers/CustomInfoRequests/CustomInfoRequests.jsx

@@ -178,9 +178,7 @@ const CustomInfoRequests = ({
     </>
   )
 
-  return (
+  return (!configLoading && (<>
-    !configLoading && (
-      <>
     {customRequests.length > 0 && (
       <DataTable
         emptyText="No custom info requests so far"
@@ -218,10 +216,11 @@ const CustomInfoRequests = ({
                   onClick={() => {
                     setToBeEdited(it)
                     return toggleWizard()
-                      }}>
+                  }}
+                  size="large">
                   <EditIcon />
                 </IconButton>
-                  )
+              );
             }
           },
           {
@@ -235,10 +234,11 @@ const CustomInfoRequests = ({
                   onClick={() => {
                     setToBeDeleted(it.id)
                     return setDeleteDialog(true)
-                      }}>
+                  }}
+                  size="large">
                   <DeleteIcon />
                 </IconButton>
-                  )
+              );
             }
           }
         ]}
@@ -278,7 +278,6 @@ const CustomInfoRequests = ({
         existingRequirements={customRequests}
       />
     )}
-
     <DeleteDialog
       errorMessage={hasError ? 'Failed to delete' : ''}
       open={deleteDialog}
@@ -290,9 +289,7 @@ const CustomInfoRequests = ({
       extraMessage={detailedDeleteMsg}
       onConfirmed={() => handleDelete(toBeDeleted)}
     />
-      </>
+  </>));
-    )
-  )
 }
 
 export default CustomInfoRequests

new-lamassu-admin/src/pages/Triggers/components/helper.js

@@ -63,7 +63,7 @@ const getOverridesSchema = (values, customInfoRequests) => {
       .label('Automation')
       .matches(/(Manual|Automatic)/)
       .required()
-  })
+  });
 }
 
 const getDefaultSettings = () => {

new-lamassu-admin/src/pages/Wallet/WizardStep.jsx

@@ -165,7 +165,7 @@ const WizardStep = ({
             fullWidth
             label={`Select ${displayName}`}
             className={classes.picker}
-            getOptionSelected={R.eqProps('code')}
+            isOptionEqualToValue={R.eqProps('code')}
             labelProp={'display'}
             options={unfilled}
             onChange={(evt, it) => {
@@ -194,7 +194,7 @@ const WizardStep = ({
         </div>
       )}
     </>
-  )
+  );
 }
 
 export default WizardStep

new-lamassu-admin/src/pages/Wizard/components/Footer.jsx

@@ -52,13 +52,13 @@ function Footer({ currentStep, steps, subtitle, text, exImage, open, start }) {
       variant={'persistent'}
       classes={{ paperAnchorDockedBottom: classes.drawer }}>
       <div className={classnames(wrapperClassNames)}>
-        <Grid container direction="row" justify="center" alignItems="baseline">
+        <Grid container direction="row" justifyContent="center" alignItems="baseline">
           <Grid
             item
             xs={5}
             container
             direction={open ? 'column' : 'row'}
-            justify="flex-start"
+            justifyContent="flex-start"
             alignItems="baseline">
             <H2 className={classes.title}>Setup Lamassu Admin</H2>
             <Info2 className={classes.subtitle}>{subtitle}</Info2>
@@ -69,7 +69,7 @@ function Footer({ currentStep, steps, subtitle, text, exImage, open, start }) {
             xs={4}
             container
             direction="column"
-            justify="flex-start"
+            justifyContent="flex-start"
             alignItems="flex-end"
             spacing={5}>
             <Grid item xs={12}>
@@ -83,14 +83,14 @@ function Footer({ currentStep, steps, subtitle, text, exImage, open, start }) {
           <Grid
             container
             direction="row"
-            justify="center"
+            justifyContent="center"
             alignItems="baseline">
             <Grid
               item
               xs={5}
               container
               direction="column"
-              justify="flex-start"
+              justifyContent="flex-start"
               alignItems="flex-start">
               <Link
                 onClick={() => {
@@ -104,7 +104,7 @@ function Footer({ currentStep, steps, subtitle, text, exImage, open, start }) {
               xs={4}
               container
               direction="column"
-              justify="flex-start"
+              justifyContent="flex-start"
               alignItems="flex-end"
               spacing={5}>
               <Grid item>
@@ -129,7 +129,7 @@ function Footer({ currentStep, steps, subtitle, text, exImage, open, start }) {
         <img width={1152} src={exImage} alt="" />
       </Modal>
     </Drawer>
-  )
+  );
 }
 
 export default Footer

new-lamassu-admin/src/styling/theme.js

@@ -1,4 +1,4 @@
-import { createTheme } from '@mui/material/styles'
+import { createTheme, adaptV4Theme } from '@mui/material/styles';
 
 import typographyStyles from 'src/components/typography/styles'
 
@@ -18,7 +18,7 @@ import {
 
 const { p } = typographyStyles
 
-export default createTheme({
+export default createTheme(adaptV4Theme({
   typography: {
     fontFamily: inputFontFamily,
     body1: { ...p }
@@ -158,4 +158,4 @@ export default createTheme({
       }
     }
   }
-})
+}))