Using LoadingButton

src/view/components/LoadingButton/index.tsx

@@ -1,8 +1,9 @@
 import Box from '@mui/material/Box'
-import Button, { ButtonProps } from '@mui/material/Button'
+import { ButtonProps } from '@mui/material/Button'
 import CircularProgress from '@mui/material/CircularProgress'
 import * as React from 'react'
 import { ReactNode } from 'react'
+import { StyledButton } from './styled'
 
 export interface LoadingButtonProps
   extends Pick<
@@ -22,9 +23,10 @@ export const LoadingButton: React.FC<LoadingButtonProps> = React.forwardRef<
   ref
 ) {
   return (
-    <Button
+    <StyledButton
       ref={ref}
       {...props}
+      isLoading={!isLoading}
       disabled={isLoading}
       sx={{ position: 'relative' }}
       startIcon={startIcon}
@@ -49,6 +51,6 @@ export const LoadingButton: React.FC<LoadingButtonProps> = React.forwardRef<
           }}
         />
       )}
-    </Button>
+    </StyledButton>
   )
 })

src/view/components/LoadingButton/styled.tsx

@@ -0,0 +1,37 @@
+import { styled } from '@mui/material/styles'
+import { Button, ButtonProps } from '@mui/material'
+
+export const StyledButton = styled(Button)<
+  ButtonProps & { isLoading: boolean }
+>(({ theme, isLoading }) => ({
+  textTransform: 'uppercase',
+  color: theme.palette.primary.main,
+  fontSize: '1.4rem',
+  borderRadius: '5rem',
+  padding: '8px 16px',
+  minWidth: '11rem',
+  border: '1px solid',
+  backgroundColor: '#e6007b2f',
+
+  '&:hover': {
+    backgroundColor: '#e6007b83',
+    color: 'white',
+    border: '1px solid #c00569 '
+  },
+
+  ...(!isLoading && {
+    '&:disabled': {
+      color: theme.palette.grey[600]
+    }
+  }),
+
+  '&.MuiButton-outlined': {
+    color: 'white',
+    borderColor: theme.palette.primary.main,
+    backgroundColor: 'transparent',
+    '&:hover': {
+      backgroundColor: theme.palette.primary.main,
+      border: '1px solid'
+    }
+  }
+}))

src/view/components/WalletConnectButton/index.tsx

@@ -3,7 +3,7 @@ import { styled } from '@mui/material/styles'
 import WarningIcon from '@mui/icons-material/Warning'
 
 import { useNetworkAccountsContext } from '@/context/NetworkAccountsContext'
-import { StyledButton, MyButtonProps } from '@/components'
+import { LoadingButton, LoadingButtonProps } from '@/components'
 import { AccountSelect } from './AccountSelect'
 import { ModalWallet } from '../ModalWallet'
 import { Box } from '@mui/material'
@@ -12,14 +12,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 +46,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,7 @@
 export * as Transitions from './Transitions'
 export * from './HomeButton'
-export * from './Button'
+export * from './LoadingButton/styled'
+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 {