Upgrade to React 17

web/.gitignore

@@ -23,3 +23,4 @@ yarn-debug.log*
 yarn-error.log*
 
 src/react-app-env.d.ts
+.eslintcache

web/package.json

@@ -3,12 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@material-ui/core": "^4.11.0",
-    "bip39": "^3.0.2",
-    "notistack": "^1.0.1",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
-    "react-scripts": "3.4.3",
+    "@material-ui/core": "^4.11.2",
+    "bip39": "^3.0.3",
+    "notistack": "^1.0.2",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "react-scripts": "4.0.1",
     "secretjs": "0.10.3"
   },
   "scripts": {
@@ -33,14 +33,14 @@
     ]
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.8",
-    "@types/jest": "^26.0.15",
-    "@types/node": "^14.14.0",
-    "@types/react": "^16.9.53",
-    "@types/react-dom": "^16.9.8",
+    "@testing-library/jest-dom": "^5.11.6",
+    "@testing-library/react": "^11.2.2",
+    "@testing-library/user-event": "^12.5.0",
+    "@types/jest": "^26.0.16",
+    "@types/node": "^14.14.10",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
     "env-cmd": "^10.1.0",
-    "prettier": "^2.1.2"
+    "prettier": "^2.2.1"
   }
 }

web/src/Banner.tsx

@@ -18,7 +18,7 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-export default () => {
+const Banner = () => {
   const classes = useStyles();
 
   return (
@@ -41,3 +41,4 @@ export default () => {
     </div>
   );
 };
+export default Banner;

web/src/GamePlaying.tsx

@@ -56,7 +56,7 @@ enum DisplayContent {
   Ending,
 }
 
-export default (props: Props) => {
+const GamePlaying = (props: Props) => {
   const classes = useStyles();
   const { game, playHandsign, leaveGame, claimInactivity, enqueueSnackbar } = props;
   const [pickedRound, setPickedRound] = useState<number>();
@@ -221,3 +221,5 @@ export default (props: Props) => {
     </div>
   );
 };
+
+export default GamePlaying;

web/src/components/GameTicker.tsx

@@ -8,7 +8,7 @@ interface Props {
   setGame: Function;
 }
 
-export default (props: React.PropsWithChildren<Props>) => {
+const GameTicker = (props: React.PropsWithChildren<Props>) => {
   const { children, client, game, setGame } = props;
 
   useEffect(() => {
@@ -26,3 +26,5 @@ export default (props: React.PropsWithChildren<Props>) => {
 
   return <div>{children}</div>;
 };
+
+export default GameTicker;

web/src/components/HandsignImg.tsx

@@ -26,7 +26,7 @@ interface Props {
   onClick?: Function;
 }
 
-export default (props: Props) => {
+const HandsignImg = (props: Props) => {
   const classes = useStyles();
   let handsignImg = classes.handsignImg;
   if (props.onClick) {
@@ -56,3 +56,5 @@ export default (props: Props) => {
     </div>
   );
 };
+
+export default HandsignImg;

web/src/components/RoundEnd.tsx

@@ -29,7 +29,7 @@ interface Props {
   rounds: Array<Round | undefined>;
 }
 
-export default (props: Props) => {
+const RoundEnd = (props: Props) => {
   const classes = useStyles();
   const { round, rounds } = props;
   const [currentRound, setCurrentRound] = useState<number>(round);
@@ -75,3 +75,5 @@ export default (props: Props) => {
     </div>
   );
 };
+
+export default RoundEnd;

web/src/components/ScoreStar.tsx

@@ -16,10 +16,12 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-export default (props: Props) => {
+const ScoreStar = (props: Props) => {
   const classes = useStyles();
   const { pos, score, className } = props;
   const cls = clsx(className, classes.star);
 
   return <img src={pos < score ? starGold : starBlank} alt={'star blank'} className={cls} />;
 };
+
+export default ScoreStar;

web/src/index.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
-import * as serviceWorker from './serviceWorker';
 import { SnackbarProvider } from 'notistack';
 
 ReactDOM.render(
@@ -17,5 +16,3 @@ ReactDOM.render(
   </React.StrictMode>,
   document.getElementById('root'),
 );
-
-serviceWorker.unregister();

web/src/wallet/ClientLoader.tsx

@@ -14,7 +14,7 @@ interface Props {
   cancel: Function;
 }
 
-export default (props: React.PropsWithChildren<Props>) => {
+const ClientLoader = (props: React.PropsWithChildren<Props>) => {
   const { walletType, config, setClient, cancel } = props;
 
   useEffect(() => {
@@ -69,3 +69,5 @@ export default (props: React.PropsWithChildren<Props>) => {
     </div>
   );
 };
+
+export default ClientLoader;

web/src/wallet/SelectWalletModal.tsx

@@ -32,7 +32,7 @@ interface Props {
   setClient: (client: SecretJS.SigningCosmWasmClient) => void;
 }
 
-export default (props: Props) => {
+const SelectWalletModal = (props: Props) => {
   const classes = useStyles();
   const { walletType, setWalletType, client, setClient } = props;
 
@@ -76,3 +76,5 @@ export default (props: Props) => {
     </div>
   );
 };
+
+export default SelectWalletModal;

web/src/wallet/Wallet.tsx

@@ -30,7 +30,7 @@ interface Props {
   faucetUrl: string | undefined;
 }
 
-export default (props: Props) => {
+const Wallet = (props: Props) => {
   const classes = useStyles();
   const { client, setClient, faucetUrl } = props;
   const [walletType, setWalletType] = useLocalStorage<WalletType | undefined>(
@@ -118,3 +118,5 @@ const getScrtBalance = (account: SecretJS.Account | undefined): number => {
   }
   return 0;
 };
+
+export default Wallet;

web/src/wallet/keplrWallet.ts

@@ -1,6 +1,6 @@
 import * as SecretJS from 'secretjs';
 
-export default async (
+const keplrWallet = async (
   chainId: string,
   chainName: string,
   suggestChain: boolean,
@@ -141,3 +141,5 @@ export default async (
 
   setClient(secretJsClient);
 };
+
+export default keplrWallet;

web/src/wallet/localWallet.ts

@@ -1,7 +1,7 @@
 import * as SecretJS from 'secretjs';
 import * as bip39 from 'bip39';
 
-export default async (lcdUrl: string, setClient: Function) => {
+const localWallet = async (lcdUrl: string, setClient: Function) => {
   let mnemonic = localStorage.getItem('mnemonic');
   if (!mnemonic) {
     mnemonic = bip39.generateMnemonic();
@@ -41,3 +41,5 @@ export default async (lcdUrl: string, setClient: Function) => {
   );
   setClient(secretJsClient);
 };
+
+export default localWallet;

web/tsconfig.json

@@ -17,7 +17,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react"
+    "jsx": "react",
+    "noFallthroughCasesInSwitch": true
   },
   "include": [
     "src"