Removing mui/lab (#196)

* Removing paths

* Moving pages

* Using LoadingButton

* Fixing /pages

jest.config.js

@@ -9,19 +9,7 @@ const customJestConfig = {
   testMatch: ['<rootDir>/tests/**/*.(test).(ts|tsx)'],
   moduleNameMapper: {
     '^@/tests/(.*)$': '<rootDir>/tests/$1',
-    '^@/pages/(.*)$': '<rootDir>/pages/$1',
-    '^@/view/(.*)$': '<rootDir>/src/view/$1',
-    '^@/utils/(.*)$': '<rootDir>/src/utils/$1',
-    '^@/constants/(.*)$': '<rootDir>/src/constants/$1',
-    '^@/context$': '<rootDir>/src/context',
-    '^@/context/(.*)$': '<rootDir>/src/context/$1',
-    '^@/components': '<rootDir>/src/view/components',
-    '^@/domain$': '<rootDir>/src/domain',
-    '^@/domain/(.*)$': '<rootDir>/src/domain/$1',
-    '^@/infrastructure$': '<rootDir>/src/infrastructure',
-    '^@/infrastructure/(.*)$': '<rootDir>/src/infrastructure/$1',
-    '^@/hooks': '<rootDir>/src/hooks',
-    '^@/hooks/(.*)$': '<rootDir>/src/hooks/$1'
+    '^@/components': '<rootDir>/src/view/components'
   }
 }
 module.exports = createJestConfig(customJestConfig)

package.json

@@ -20,7 +20,6 @@
     "@mui/icons-material": "^5.14.7",
     "@mui/lab": "^5.0.0-alpha.137",
     "@mui/material": "^5.11.4",
-    "@next/font": "13.4.19",
     "@polkadot/api": "^10.4.1",
     "@polkadot/api-contract": "^10.4.1",
     "@polkadot/extension-dapp": "^0.46.3",
@@ -81,7 +80,7 @@
     "prettier": "^2.8.3",
     "stylelint-config-prettier": "^9.0.4",
     "stylelint-prettier": "^3.0.0",
-    "typescript": "5.0.4"
+    "typescript": "5.1.3"
   },
   "lint-staged": {
     "src/**/*.{js,ts,jsx,tsx}": [

src/context/settingsTheme.tsx

@@ -4,7 +4,7 @@ import {
   getLocalStorageState,
   setLocalStorageState
 } from '@/utils/localStorage'
-import { Settings } from 'src/themes/types'
+import { Settings } from '@/themes/types'
 
 const ITEM_LOCAL_STORAGE = 'settingsTheme'
 

src/hooks/useDeployContract.ts

@@ -7,7 +7,7 @@ import { WeightV2 } from '@polkadot/types/interfaces'
 import { Bytes } from '@polkadot/types'
 
 import { GetServiceData } from '@/types'
-import { useNetworkAccountsContext } from 'src/context/NetworkAccountsContext'
+import { useNetworkAccountsContext } from '@/context/NetworkAccountsContext'
 import { BIG_ZERO_BN } from '@/constants/numbers'
 import { ContractConstructorDataForm } from '@/domain/wizard/step3DeployForm.types'
 import { deployContractService } from '@/infrastructure/deployContract'

src/hooks/useNetworkApi.ts

@@ -1,7 +1,7 @@
 import { ApiPromise } from '@polkadot/api'
 import { useApi } from 'useink'
 
-import { useNetworkAccountsContext } from 'src/context/NetworkAccountsContext'
+import { useNetworkAccountsContext } from '@/context/NetworkAccountsContext'
 
 export interface UseNetworkApi {
   apiPromise: ApiPromise

pages/404.tsx → src/pages/404.tsx

@@ -5,7 +5,7 @@ import { styled } from '@mui/material/styles'
 import Typography from '@mui/material/Typography'
 import Box, { BoxProps } from '@mui/material/Box'
 import Link from '@mui/material/Link'
-import BlankLayout from 'src/view/layout/BlankLayout'
+import BlankLayout from '@/view/layout/BlankLayout'
 
 const BoxWrapper = styled(Box)<BoxProps>(({ theme }) => ({
   [theme.breakpoints.down('md')]: {

pages/_app.tsx → src/pages/_app.tsx

@@ -5,20 +5,19 @@ import Head from 'next/head'
 import { EmotionCache } from '@emotion/cache'
 import { CacheProvider } from '@emotion/react'
 import PlausibleProvider from 'next-plausible'
-import '../styles/globals.css'
-import '../public/fonts/inter.css'
+import 'styles/globals.css'
 import 'react-toastify/dist/ReactToastify.css'
 
 import ThemeCustomization from '@/themes'
-import { MainLayout } from 'src/view/layout'
+import { MainLayout } from '@/view/layout'
 import { buildEmotionCache } from '@/utils/builderEmotionCache'
-import { SettingsConsumer } from 'src/context/settingsTheme'
-import { NetworkAccountsContextProvider } from 'src/context/NetworkAccountsContext'
+import { SettingsConsumer } from '@/context/settingsTheme'
+import { NetworkAccountsContextProvider } from '@/context/NetworkAccountsContext'
 import {
   AppNotificationContextProvider,
   StorageNotificationsRepository
-} from 'src/context/AppNotificationContext'
-import { CustomSnackBar as AppNotification } from 'src/view/components/Snackbar'
+} from '@/context/AppNotificationContext'
+import { CustomSnackBar as AppNotification } from '@/view/components/Snackbar'
 import { DAPP_CONFIG, DOMAIN } from '@/constants/config'
 import { UseInkProvider } from 'useink'
 import { CHAINS } from '@/constants/chains'

pages/index.tsx → src/pages/index.tsx

@@ -4,7 +4,7 @@ import { Stack, Typography } from '@mui/material'
 import { HomeButton } from '@/components'
 import { ROUTES, TOKEN_PATHS } from '@/constants/index'
 import { TokenType } from '@/domain'
-import { useNetworkAccountsContext } from 'src/context/NetworkAccountsContext'
+import { useNetworkAccountsContext } from '@/context/NetworkAccountsContext'
 import { ContractsTableWidget } from '@/view/HomeView/ContractsTableWidget'
 import { useListUserContracts } from '@/hooks/userContracts/useListUserContracts'
 

pages/wizard/index.tsx → src/pages/wizard/index.tsx

@@ -1,10 +1,10 @@
 import { Box } from '@mui/material'
 import { useRouter } from 'next/router'
 
-import FormWizard from 'src/view/wizardView'
+import FormWizard from '@/view/wizardView'
 import { isOfTypeTokens } from '@/domain'
-import LoadingSpinner from 'src/view/components/LoadingSpinner'
-import { HeadLine } from 'src/view/components/HeadLine'
+import LoadingSpinner from '@/view/components/LoadingSpinner'
+import { HeadLine } from '@/view/components/HeadLine'
 
 export default function WizardPage() {
   const router = useRouter()

src/themes/index.tsx

@@ -5,7 +5,7 @@ import { createTheme, ThemeProvider } from '@mui/material/styles'
 import Palette from './palette'
 import typographyOptions from './typography'
 import CustomShadows from './shadows'
-import { Settings } from 'src/themes/types'
+import { Settings } from '@/themes/types'
 import componentsOverride from './overrides'
 
 // ==============================|| DEFAULT THEME - MAIN  ||============================== //

src/view/HomeView/ContractsTableWidget/ContractsTable.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react'
 import {
   IconButton,
-  Chip,
   Table,
   TableBody,
   TableCell,
@@ -18,7 +17,7 @@ import { CopyToClipboardButton, TokenIconSvg } from '@/components'
 import { isoToReadableDate, truncateAddress } from '@/utils/formatString'
 import { TokenType } from '@/domain'
 import { ContractTableItem } from '@/domain/wizard/ContractTableItem'
-import { useRecentlyClicked } from 'src/hooks/useRecentlyClicked'
+import { useRecentlyClicked } from '@/hooks/useRecentlyClicked'
 import { MonoTypography } from '@/components'
 import { StyledTableContainer, TokenWrapper } from './styled'
 

src/view/components/LoadingButton/index.tsx

@@ -0,0 +1,56 @@
+import Box from '@mui/material/Box'
+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<
+    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, disabled, ...props },
+  ref
+) {
+  return (
+    <StyledButton
+      ref={ref}
+      {...props}
+      isLoading={!isLoading}
+      disabled={isLoading || disabled}
+      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
+          }}
+        />
+      )}
+    </StyledButton>
+  )
+})

src/view/components/LoadingButton/styled.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import { styled } from '@mui/material/styles'
+import { Button, ButtonProps } from '@mui/material'
+
+interface StyledButtonProps extends ButtonProps {
+  isLoading?: boolean
+}
+
+export const StyledButtonWrapper = React.forwardRef<
+  HTMLButtonElement,
+  StyledButtonProps
+>(function RefStyledButton({ isLoading, ...rest }, ref) {
+  return <Button ref={ref} {...rest} />
+})
+
+export const StyledButton = styled(StyledButtonWrapper, {
+  shouldForwardProp: prop => prop !== 'isLoading'
+})<StyledButtonProps>(({ 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/Logo/index.tsx

@@ -4,7 +4,7 @@ import NextLink from 'next/link'
 import { ROUTES } from '@/constants/routes'
 import Image from 'next/image'
 
-import { CW_POLKADOT, LOGO_POLKADOT } from 'src/constants/images'
+import { CW_POLKADOT, LOGO_POLKADOT } from '@/constants/images'
 
 export default function Logo() {
   return (

src/view/components/LogoMobile/index.tsx

@@ -1,7 +1,7 @@
 import { Stack } from '@mui/system'
 import Image from 'next/image'
 
-import { CW_POLKADOT, LOGO_POLKADOT } from 'src/constants/images'
+import { CW_POLKADOT, LOGO_POLKADOT } from '@/constants/images'
 
 export default function LogoMobile() {
   return (

src/view/components/Snackbar/index.tsx

@@ -4,7 +4,7 @@ import { ToastContainer, toast } from 'react-toastify'
 import {
   AppNotification,
   useAppNotificationContext
-} from 'src/context/AppNotificationContext'
+} from '@/context/AppNotificationContext'
 
 type SnackbarMessage = AppNotification
 

src/view/components/WalletConnectButton/index.tsx

@@ -2,8 +2,8 @@ import { useState } from 'react'
 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 { useNetworkAccountsContext } from '@/context/NetworkAccountsContext'
+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/layout/Header/MobileSection.tsx

@@ -10,9 +10,9 @@ import {
 } from '@mui/material'
 import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet'
 
-import Transitions from 'src/view/components/Transitions'
-import LogoMobile from 'src/view/components/LogoMobile'
-import { WalletConnectButton } from '@/view/components/WalletConnectButton'
+import Transitions from '@/components/Transitions'
+import LogoMobile from '@/components/LogoMobile'
+import { WalletConnectButton } from '@/components/WalletConnectButton'
 
 // ==============================|| HEADER CONTENT - MOBILE ||============================== //
 const MobileSection = () => {