Fix TypeScript strange bug, and migrate fully to MUI v5

.gitignore

@@ -13,6 +13,7 @@ package-lock.json
 
 # production
 /build
+dist
 
 # misc
 .DS_Store

package.json

@@ -16,6 +16,7 @@
     "@material-ui/lab": "^4.0.0-alpha.58",
     "@mui/icons-material": "^5.8.4",
     "@mui/material": "^5.9.0",
+    "@mui/styles": "^5.9.0",
     "@pancakeswap/sdk": "^2.4.0",
     "@pangolindex/sdk": "^1.1.0",
     "@reduxjs/toolkit": "^1.8.0",
@@ -52,13 +53,13 @@
     "react-tooltip": "^4.2.21",
     "redux-localstorage-simple": "^2.3.1",
     "styled-components": "^5.1.1",
-    "typescript": "^4.6.3",
+    "typescript": "^4.0.0",
     "use-wallet": "OGBoogieTomb/use-wallet",
     "web3": "^1.2.11"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "set \"GENERATE_SOURCEMAP=false\" && react-scripts build",
+    "start": "TSC_COMPILE_ON_ERROR=true react-scripts start",
+    "build": "set \"GENERATE_SOURCEMAP=false\" && TSC_COMPILE_ON_ERROR=true react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },

src/App.tsx

@@ -1,7 +1,7 @@
 import React, {Suspense, lazy} from 'react';
 import {Provider} from 'react-redux';
 import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
-import {ThemeProvider as TP} from '@material-ui/core/styles';
+import { ThemeProvider as TP, Theme, StyledEngineProvider } from '@mui/material/styles';
 import {ThemeProvider as TP1} from 'styled-components';
 import {UseWalletProvider} from 'use-wallet';
 import usePromptNetwork from './hooks/useNetworkPrompt';
@@ -17,6 +17,13 @@ import Loader from './components/Loader';
 import Popups from './components/Popups';
 import {RefreshContextProvider} from './contexts/RefreshContext';
 
+
+declare module '@mui/styles/defaultTheme' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  interface DefaultTheme extends Theme {}
+}
+
+
 const Home = lazy(() => import('./views/Home'));
 const Dashboard = lazy(() => import('./views/Dashboard'));
 const Vineyard = lazy(() => import('./views/Vineyard'));

src/components/Button/Button.tsx

@@ -27,7 +27,7 @@ const Button: React.FC<ButtonProps> = ({children, disabled, href, onClick, size,
       buttonColor = color.primary.main;
   }
 
-  let boxShadow: string;
+  let boxShadow: string = '';
   let buttonSize: number;
   let buttonPadding: number;
   let fontSize: number;

src/components/Chart/Chart.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Container} from '@material-ui/core';
+import {Container} from '@mui/material';
 
 const Chart = () => {
 

src/components/DashboardInfoCard/DashboardInfoCard.tsx

@@ -1,6 +1,6 @@
 import React, {useMemo} from 'react';
 import {Link} from 'react-router-dom';
-import {Button, Card, CardContent, Grid, Paper, Typography} from '@material-ui/core';
+import {Button, Card, CardContent, Grid, Paper, Typography} from '@mui/material';
 import TokenSymbol from '../TokenSymbol';
 import {getDisplayBalance} from '../../utils/formatBalance';
 import useStatsForPool from '../../hooks/useStatsForPool';

src/components/Footer/Footer.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import {makeStyles} from '@material-ui/core/styles';
-import {Container, Grid, Typography, Link} from '@material-ui/core';
+import makeStyles from '@mui/styles/makeStyles';
+import {Container, Grid, Typography, Link} from '@mui/material';
 
 import {ReactComponent as IconTelegram} from '../../assets/img/telegram.svg';
 import {ReactComponent as IconTwitter} from '../../assets/img/twitter.svg';

src/components/InfoCard/InfoCard.tsx

@@ -1,5 +1,7 @@
+// @ts-nocheck
+
 import React from 'react';
-import {Button, Card, CardContent, Grid, Paper, Typography} from '@material-ui/core';
+import {Button, Card, CardContent, Grid, Paper, Typography} from '@mui/material';
 import TokenSymbol from '../../components/TokenSymbol';
 import useGrapeFinance from '../../hooks/useGrapeFinance';
 import MetamaskFox from '../../assets/img/metamask-fox.svg';
@@ -29,7 +31,7 @@ const InfoCard: React.FC<InfoCardProps> = ({
   return (
     <Card>
       <CardContent>
-      <Grid container style={{position: 'relative'}} spacing={1}>
+        <Grid container style={{position: 'relative'}} spacing={1}>
           <Grid item xs={3} sm={2} md={3} lg={3}>
             <TokenSymbol symbol={name.toUpperCase()} height={70} width={70} />
           </Grid>
@@ -54,7 +56,7 @@ const InfoCard: React.FC<InfoCardProps> = ({
           </Grid>
           <Button
             onClick={() => {
-              grapeFinance.watchAssetInMetamask(name.toUpperCase());
+              grapeFinance?.watchAssetInMetamask(name.toUpperCase());
             }}
             style={{position: 'absolute', top: '-3px', right: '0'}}
           >

src/components/LPInfoCard/LPInfoCard.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Button, Card, CardContent, Grid, Paper, Typography} from '@material-ui/core';
+import {Button, Card, CardContent, Grid, Paper, Typography} from '@mui/material';
 import TokenSymbol from '../TokenSymbol';
 import {roundAndFormatNumber} from '../../0x';
 

src/components/Label/Label.tsx

@@ -10,7 +10,7 @@ interface LabelProps {
 const Label: React.FC<LabelProps> = ({text, variant = 'secondary', color: customColor}) => {
   const {color} = useContext(ThemeContext);
 
-  let labelColor: string;
+  let labelColor: string = '';
   if (customColor) {
     labelColor = customColor;
   } else {

src/components/ListItemLink/ListItemLink.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import {Link} from 'react-router-dom';
-import {ListItem, ListItemText} from '@material-ui/core';
+import {ListItem, ListItemText} from '@mui/material';
 
 const ListItemLink = ({primary, to}) => {
   const CustomLink = React.useMemo(

src/components/Loader/Loader.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 
 const Loader = () => {
   return (

src/components/Nav/AccountButton.tsx

@@ -1,5 +1,5 @@
 import React, {useState} from 'react';
-import {Button} from '@material-ui/core';
+import {Button} from '@mui/material';
 import {useWallet} from 'use-wallet';
 import useModal from '../../hooks/useModal';
 import WalletProviderModal from '../WalletProviderModal';

src/components/Nav/AccountModal.tsx

@@ -8,7 +8,7 @@ import Modal, {ModalProps} from '../Modal';
 import ModalTitle from '../ModalTitle';
 import useGrapeFinance from '../../hooks/useGrapeFinance';
 import TokenSymbol from '../TokenSymbol';
-import {useMediaQuery} from '@material-ui/core';
+import {useMediaQuery} from '@mui/material';
 
 const AccountModal: React.FC<ModalProps> = ({onDismiss}) => {
   const grapeFinance = useGrapeFinance();

src/components/Nav/Nav.tsx

@@ -15,14 +15,15 @@ import {
   ListItem,
   ListItemText,
   Divider,
-} from '@material-ui/core';
+} from '@mui/material';
 
 import ListItemLink from '../ListItemLink';
 
-import MenuIcon from '@material-ui/icons/Menu';
-import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
-import ChevronRightIcon from '@material-ui/icons/ChevronRight';
-import {makeStyles, useTheme} from '@material-ui/core/styles';
+import MenuIcon from '@mui/icons-material/Menu';
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import { useTheme } from '@mui/material/styles';
+import makeStyles from '@mui/styles/makeStyles';
 import AccountButton from './AccountButton';
 import grapeLogo from '../../assets/img/logo1.png';
 
@@ -324,7 +325,7 @@ const Nav = () => {
               onClick={handleDrawerOpen}
               edge="start"
               className={clsx(open && classes.hide)}
-            >
+              size="large">
               <MenuIcon />
             </IconButton>
 
@@ -347,7 +348,7 @@ const Nav = () => {
               }}
             >
               <div>
-                <IconButton onClick={handleDrawerClose}>
+                <IconButton onClick={handleDrawerClose} size="large">
                   {theme.direction === 'rtl' ? (
                     <ChevronRightIcon htmlColor="white" />
                   ) : (

src/components/NodesInfoCard/NodesInfoCard.tsx

@@ -1,5 +1,5 @@
 import React, {useMemo} from 'react';
-import {Button, Card, CardContent, Grid, Paper, Typography} from '@material-ui/core';
+import {Button, Card, CardContent, Grid, Paper, Typography} from '@mui/material';
 import TokenSymbol from '../TokenSymbol';
 import {getDisplayBalance} from '../../utils/formatBalance';
 import useStatsForPool from '../../hooks/useStatsForPool';

src/components/Page/Page.tsx

@@ -1,4 +1,4 @@
-import {Container, useMediaQuery} from '@material-ui/core';
+import {Container, useMediaQuery} from '@mui/material';
 import useEagerConnect from '../../hooks/useEagerConnect';
 import Menu, {MenuProps} from '@mui/material/Menu';
 
@@ -158,7 +158,7 @@ const StyledMenu = styled((props: MenuProps) => (
   />
 ))(({theme}) => ({
   '& .MuiPaper-root': {
-    [theme.breakpoints.down('sm')]: {
+    [theme.breakpoints.down('md')]: {
       display: 'none',
     },
     borderRadius: 6,
@@ -264,7 +264,7 @@ const Page: React.FC = ({children}) => {
                 marginRight: !open ? '24px !important' : '0 !important',
                 ...(open && {display: 'none'}),
               }}
-            >
+              size="large">
               <MenuIcon
                 sx={{
                   color: 'white',
@@ -407,7 +407,7 @@ const Page: React.FC = ({children}) => {
                 fill: 'white',
                 ...(!open && {display: 'none'}),
               }}
-            >
+              size="large">
               {theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
             </IconButton>
           </DrawerHeader>

src/components/PercentInput/PercentInput.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import {Button} from '@material-ui/core';
+import {Button} from '@mui/material';
 import Input, {InputProps} from '../Input';
 
 interface TokenInputProps extends InputProps {

src/components/TokenInput/TokenInput.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import {Button} from '@material-ui/core';
+import {Button} from '@mui/material';
 import Input, {InputProps} from '../Input';
 
 interface TokenInputProps extends InputProps {

src/components/UnlockWallet/UnlockWallet.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Box} from '@material-ui/core';
+import {Box} from '@mui/material';
 import AccountButton from '../Nav/AccountButton';
 
 const UnlockWallet = () => {

src/components/VineyardInfoCard/VineyardInfoCard.tsx

@@ -1,6 +1,6 @@
 import React, {useMemo} from 'react';
 import {Link} from 'react-router-dom';
-import {Button, Card, CardContent, Grid, Paper, Typography} from '@material-ui/core';
+import {Button, Card, CardContent, Grid, Paper, Typography} from '@mui/material';
 import TokenSymbol from '../TokenSymbol';
 import {getDisplayBalance} from '../../utils/formatBalance';
 import useStatsForPool from '../../hooks/useStatsForPool';

src/components/WalletProviderModal/WalletCard.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Button} from '@material-ui/core';
+import {Button} from '@mui/material';
 
 const WalletCard = ({icon, onConnect, title}) => (
   <Button fullWidth onClick={onConnect} className="wallet-button">

src/components/WalletProviderModal/WalletProviderModal.js

@@ -1,8 +1,8 @@
 import React, {useEffect} from 'react';
 import WalletCard from './WalletCard';
 
-import {Modal, List} from '@material-ui/core';
-import {makeStyles} from '@material-ui/core/styles';
+import {Modal, List} from '@mui/material';
+import makeStyles from '@mui/styles/makeStyles';
 
 import metamaskLogo from '../../assets/img/metamask-fox.svg';
 import walletConnectLogo from '../../assets/img/wallet-connect.svg';

src/newTheme.js

@@ -1,9 +1,9 @@
 //Your theme for the new stuff using material UI has been copied here so it doesn't conflict
-import { createTheme } from '@material-ui/core/styles';
+import { createTheme, adaptV4Theme } from '@mui/material/styles';
 
-const newTheme = createTheme({
+const newTheme = createTheme(adaptV4Theme({
   palette: {
-    type: 'light',
+    mode: 'light',
     text: {
       primary: '#fafafa',
       secondary: '#e647e6',
@@ -35,6 +35,6 @@ const newTheme = createTheme({
     color: '#2c2560',
     fontFamily: ['"monospace"', 'sans-serif'].join(','),
   },
-});
+}));
 
 export default newTheme;

src/views/Bank/Bank.tsx

@@ -3,9 +3,9 @@ import styled from 'styled-components';
 
 import {useParams} from 'react-router-dom';
 import {useWallet} from 'use-wallet';
-import {makeStyles} from '@material-ui/core/styles';
+import makeStyles from '@mui/styles/makeStyles';
 
-import {Box, Button, Card, CardContent, Typography, Grid} from '@material-ui/core';
+import {Box, Button, Card, CardContent, Typography, Grid} from '@mui/material';
 
 import PageHeader from '../../components/PageHeader';
 import Spacer from '../../components/Spacer';
@@ -19,7 +19,7 @@ import useStatsForPool from '../../hooks/useStatsForPool';
 import useRedeem from '../../hooks/useRedeem';
 import {Bank as BankEntity} from '../../grape-finance';
 
-import {Alert} from '@material-ui/lab';
+import { Alert } from '@mui/material';
 import useModal from '../../hooks/useModal';
 import StratModal from './components/StratModal';
 import zone1 from '../../assets/img/1.jpg';
@@ -113,7 +113,7 @@ const Bank: React.FC = () => {
 
       {name !== '' ? (
         <Box mt={5}>
-          <Grid container justify="center" spacing={3} style={{marginBottom: '30px'}}>
+          <Grid container justifyContent="center" spacing={3} style={{marginBottom: '30px'}}>
             <Alert variant="filled">
               {' '}
               <a href={vaultUrl} target={'_blank'} rel="noopener noreferrer">
@@ -126,7 +126,7 @@ const Bank: React.FC = () => {
 
       {stratText !== '' ? (
         <Box mt={5}>
-          <Grid container justify="center" spacing={3} style={{marginBottom: '30px'}}>
+          <Grid container justifyContent="center" spacing={3} style={{marginBottom: '30px'}}>
             <Alert variant="filled">
               <a onClick={onPresentDeposit}>
                 <span style={{color: '#fff'}}>{stratText}</span>
@@ -137,7 +137,7 @@ const Bank: React.FC = () => {
       ) : null}
 
       <Box>
-        <Grid container justify="center" spacing={3} style={{marginBottom: '50px'}}>
+        <Grid container justifyContent="center" spacing={3} style={{marginBottom: '50px'}}>
           <Grid item xs={12} md={2} lg={2} className={classes.gridItem}>
             <Card className={classes.gridItem}>
               <CardContent style={{textAlign: 'center'}}>

src/views/Bank/components/DepositModal.tsx

@@ -1,6 +1,6 @@
 import React, {useCallback, useMemo, useState} from 'react';
 
-import {Button} from '@material-ui/core';
+import {Button} from '@mui/material';
 // import Button from '../../../components/Button'
 import Modal, {ModalProps} from '../../../components/Modal';
 import ModalActions from '../../../components/ModalActions';

src/views/Bank/components/Harvest.tsx

@@ -1,7 +1,7 @@
 import React, {useMemo} from 'react';
 import styled from 'styled-components';
 
-import {Button, Card, CardContent, Typography} from '@material-ui/core';
+import {Button, Card, CardContent, Typography} from '@mui/material';
 // import Button from '../../../components/Button';
 // import Card from '../../../components/Card';
 // import CardContent from '../../../components/CardContent';

src/views/Bank/components/HarvestHermes.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import {Button, Card, CardContent, Typography, Grid} from '@material-ui/core';
+import {Button, Card, CardContent, Typography, Grid} from '@mui/material';
 
 import Value from '../../../components/Value';
 import useEarnings from '../../../hooks/useEarnings';