Removing mui/lab

src/view/components/LoadingButton/index.tsx

@@ -0,0 +1,54 @@
+import Box from '@mui/material/Box'
+import Button, { ButtonProps } from '@mui/material/Button'
+import CircularProgress from '@mui/material/CircularProgress'
+import * as React from 'react'
+import { ReactNode } from 'react'
+
+export interface LoadingButtonProps
+  extends Pick<
+    ButtonProps,
+    'ref' | 'onClick' | 'variant' | 'size' | 'children' | 'sx' | 'disabled'
+  > {
+  isLoading?: boolean
+  startIcon?: ReactNode
+  endIcon?: ReactNode
+}
+
+export const LoadingButton: React.FC<LoadingButtonProps> = React.forwardRef<
+  HTMLButtonElement,
+  LoadingButtonProps
+>(function RefLoadingButton(
+  { isLoading, children, startIcon, endIcon, ...props },
+  ref
+) {
+  return (
+    <Button
+      ref={ref}
+      {...props}
+      disabled={isLoading}
+      sx={{ position: 'relative' }}
+      startIcon={startIcon}
+      endIcon={endIcon}
+    >
+      <Box
+        sx={{
+          visibility: isLoading ? 'hidden' : 'visible'
+        }}
+      >
+        {children}
+      </Box>
+      {isLoading && (
+        <CircularProgress
+          size={24}
+          sx={{
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            marginTop: '-12px', // half of size
+            marginLeft: '-12px' // half of size
+          }}
+        />
+      )}
+    </Button>
+  )
+})

src/view/components/WalletConnectButton/index.tsx

@@ -3,7 +3,10 @@ import { styled } from '@mui/material/styles'
 import WarningIcon from '@mui/icons-material/Warning'
 
 import { useNetworkAccountsContext } from 'src/context/NetworkAccountsContext'
-import { StyledButton, MyButtonProps } from '../Button'
+import {
+  LoadingButton,
+  LoadingButtonProps
+} from '@/components/LoadingButton/index'
 import { AccountSelect } from './AccountSelect'
 import { ModalWallet } from '../ModalWallet'
 import { Box } from '@mui/material'
@@ -12,14 +15,16 @@ import CircleIcon from '@mui/icons-material/Circle'
 import { useRecentlyClicked } from '@/hooks/useRecentlyClicked'
 import { useDelay } from '@/hooks/useDelay'
 
-export const ButtonConnection = styled(StyledButton)<MyButtonProps>(() => ({
-  fontSize: '1rem',
-  height: '2.5rem',
-  borderRadius: '1.5rem',
-  margin: '0.5rem 0',
-  padding: '1.3rem',
-  textTransform: 'none'
-}))
+export const ButtonConnection = styled(LoadingButton)<LoadingButtonProps>(
+  () => ({
+    fontSize: '1rem',
+    height: '2.5rem',
+    borderRadius: '1.5rem',
+    margin: '0.5rem 0',
+    padding: '1.3rem',
+    textTransform: 'none'
+  })
+)
 
 export const WalletConnectButton = () => {
   const {
@@ -44,7 +49,7 @@ export const WalletConnectButton = () => {
         <ButtonConnection
           ref={buttonRef}
           size="small"
-          loading={isLoading}
+          isLoading={isLoading}
           onClick={() => setOpenModal(true)}
         >
           Connect your wallet{' '}

src/view/components/index.ts

@@ -1,6 +1,6 @@
 export * as Transitions from './Transitions'
 export * from './HomeButton'
-export * from './Button'
+export * from './LoadingButton'
 export { default as Stepper } from './StepperWrapper'
 export * from './ModalMessage'
 export * from './MonoTypography'

src/view/wizardView/BackNextButtons.tsx

@@ -1,7 +1,7 @@
 import { Grid, Box, styled, BoxProps } from '@mui/material'
 import { West as WestIcon, East as EastIcon } from '@mui/icons-material'
 
-import { StyledButton as Button, MyButtonProps } from '@/components'
+import { LoadingButton as Button, LoadingButtonProps } from '@/components'
 
 type Props = {
   nextLabel?: React.ReactNode
@@ -10,8 +10,8 @@ type Props = {
   handleBack: () => void
   isNextDisabled?: boolean
   isDoingNext?: boolean
-  nextButtonProps?: MyButtonProps
-  backButtonProps?: MyButtonProps
+  nextButtonProps?: LoadingButtonProps
+  backButtonProps?: LoadingButtonProps
   hiddenBack?: boolean
 }
 

src/view/wizardView/Step3Deploy/index.tsx

@@ -182,7 +182,7 @@ export default function Step3Deploy({
           ref: refButton,
           endIcon: isButtonNextDisabled ? '🚫' : '🚀',
           disabled: isButtonNextDisabled,
-          loading: _isDeploying,
+          isLoading: _isDeploying,
           ...(contractConstructorFields.length && {
             type: 'submit',
             form: 'deploy-form'

src/view/wizardView/index.tsx

@@ -1,10 +1,18 @@
 import React, { useMemo, useState } from 'react'
-import { Typography, StepLabel, Step, Stepper, Box, Grid } from '@mui/material'
+import {
+  Typography,
+  StepLabel,
+  Step,
+  Stepper,
+  Box,
+  Grid,
+  Button
+} from '@mui/material'
 import NextLink from 'next/link'
 import dynamic from 'next/dynamic'
 
 import Step1Extensions from './Step1Extensions'
-import { StyledButton as Button, Stepper as StepperWrapper } from '@/components'
+import { Stepper as StepperWrapper } from '@/components'
 import { StepsSCWizardContext } from '@/context'
 import { ControlsToken, ROUTES } from '@/constants/index'
 import {