Merge pull request #57 from samuelmarshall/update

Update react and dependencies

Author: adrianmcli

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn tsc

.husky/pre-push

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn test

package.json

@@ -15,64 +15,61 @@
     "bundle": "parcel build src/app/index.html -d dist/app --no-source-maps",
     "test": "jest",
     "test:ci": "jest --runInBand",
-    "prepublish": "yarn build"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "yarn tsc",
-      "pre-push": "yarn test"
-    }
+    "prepublish": "yarn build",
+    "prepare": "husky install"
   },
   "dependencies": {
-    "chalk": "^4.0.0",
-    "chokidar": "^3.4.0",
+    "chalk": "^4.1.2",
+    "chokidar": "^3.5.3",
     "clear": "^0.1.0",
-    "commander": "^5.1.0",
-    "express": "^4.17.1",
-    "figlet": "^1.4.0",
-    "parcel-bundler": "^1.12.4",
-    "query-string": "^6.12.1",
-    "ws": "^7.3.0"
+    "commander": "^9.4.0",
+    "debug": "^4.3.4",
+    "express": "^4.18.1",
+    "figlet": "^1.5.2",
+    "parcel-bundler": "1.12.3",
+    "query-string": "^7.1.1",
+    "ws": "^8.8.1"
   },
   "devDependencies": {
-    "@studydefi/money-legos": "^2.1.3",
-    "@testing-library/react": "^10.0.4",
-    "@testing-library/react-hooks": "^3.2.1",
-    "@types/clear": "^0.1.0",
-    "@types/express": "^4.17.6",
-    "@types/figlet": "^1.2.0",
-    "@types/jest": "^25.2.3",
-    "@types/node": "^14.0.1",
-    "@types/parcel-bundler": "^1.12.1",
-    "@types/puppeteer": "^3.0.0",
-    "@types/react": "^16.9.35",
-    "@types/react-dom": "^16.9.8",
-    "@types/react-modal": "^3.10.5",
-    "@types/styled-components": "^5.1.0",
-    "@types/ws": "^7.2.4",
-    "abi-decoder": "^2.3.0",
-    "ethers": "^4.0.47",
-    "ganache-cli": "^6.9.1",
-    "get-port": "^5.1.1",
-    "husky": "^4.2.5",
-    "jest": "^26.0.1",
-    "jest-puppeteer": "^4.4.0",
-    "nodemon": "^2.0.4",
-    "parcel-plugin-bundle-visualiser": "^1.2.0",
-    "puppeteer": "^3.1.0",
-    "random-words": "^1.1.1",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-modal": "^3.11.2",
-    "react-test-renderer": "^16.13.1",
-    "react-use": "^15.1.0",
-    "react95": "^3.0.0-beta.24",
-    "styled-components": "^5.1.0",
-    "tcp-port-used": "^1.0.1",
-    "truffle": "^5.1.27",
-    "ts-jest": "^26.0.0",
-    "ts-node": "^8.10.1",
-    "typescript": "^3.9.2",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@types/clear": "^0.1.2",
+    "@types/express": "^4.17.13",
+    "@types/figlet": "^1.5.5",
+    "@types/jest": "^28.1.8",
+    "@types/node": "^18.7.13",
+    "@types/parcel-bundler": "^1.12.3",
+    "@types/puppeteer": "^5.4.6",
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
+    "@types/react-modal": "^3.13.1",
+    "@types/styled-components": "^5.1.26",
+    "@types/tcp-port-used": "^1.0.1",
+    "@types/ws": "^8.5.3",
+    "abi-decoder": "^2.4.0",
+    "ethers": "^5.7.0",
+    "get-port": "5.1.1",
+    "husky": "^8.0.0",
+    "jest": "^29.0.1",
+    "jest-environment-jsdom": "^29.0.1",
+    "jest-puppeteer": "^6.1.1",
+    "jest-styled-components": "^7.1.0",
+    "nodemon": "^2.0.19",
+    "puppeteer": "^16.2.0",
+    "random-words": "^1.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-modal": "^3.15.1",
+    "react-test-renderer": "^18.2.0",
+    "react95": "3.0.0",
+    "styled-components": "^5.3.5",
+    "tcp-port-used": "^1.0.2",
+    "ts-jest": "29.0.0-next.0",
+    "ts-node": "^10.9.1",
+    "typescript": "^4.8.2",
     "unstated-next": "^1.1.0"
+  },
+  "engines": {
+    "node": "16"
   }
 }

src/app/containers/Connection.ts

@@ -1,7 +1,7 @@
 import { createContainer } from "unstated-next";
 import { useState, useEffect } from "react";
 import { ethers } from "ethers";
-import { JsonRpcProvider, Web3Provider } from "ethers/providers";
+import { JsonRpcProvider, Web3Provider } from "@ethersproject/providers";
 
 export enum Method {
   Localhost = "Localhost",

src/app/containers/Contracts.test.ts

@@ -1,3 +1,6 @@
+/**
+ * @jest-environment jsdom
+ */
 import { act, renderHook } from "@testing-library/react-hooks";
 import { useContracts } from "./Contracts";
 

src/app/containers/Network.ts

@@ -1,7 +1,7 @@
 import { createContainer } from "unstated-next";
 import { useState, useEffect } from "react";
 import Connection from "./Connection";
-import { Network } from "ethers/utils";
+import { Network } from "@ethersproject/networks";
 
 export function useNetwork() {
   const { provider } = Connection.useContainer();

src/app/features/common/Layout.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import styled, { ThemeProvider } from "styled-components";
-import { themes, Window, WindowHeader, WindowContent } from "react95";
+import { Window, WindowHeader, WindowContent } from "react95";
+import original from "react95/dist/themes/original"
 
 const AppContainer = styled.div`
   width: 100%;
@@ -20,13 +21,9 @@ const Content = styled(WindowContent)`
   overflow: auto;
 `;
 
-const appTheme = {
-  ...themes.default,
-};
-
 const Layout = ({ children }) => (
   <>
-    <ThemeProvider theme={appTheme}>
+    <ThemeProvider theme={original}>
       <AppContainer>
         <Container shadow={false}>
           <WindowHeader>Eth95.exe</WindowHeader>

src/app/features/function-call/useCallFunction.ts

@@ -19,7 +19,7 @@ const useCallFunction = (args, types, fn, opts) => {
     decoded.forEach((evt) => {
       const values = evt.events.map((x) => {
         if (x.type === "bytes32") {
-          return ethers.utils.parseBytes32String(x.value);
+          ethers.BigNumber.from(x.value).toString();
         }
         return x.value;
       });
@@ -31,7 +31,7 @@ const useCallFunction = (args, types, fn, opts) => {
     // handle array and int types
     const processedArgs = args.map((arg, idx) => {
       const type = types[idx];
-      if (type.substring(0, 4) === "uint") return ethers.utils.bigNumberify(arg);
+      if (type.substring(0, 4) === "uint") return ethers.BigNumber.from(arg);
       if (type.slice(-2) === "[]") return JSON.parse(arg);
       return arg;
     });

src/app/features/function-info/FunctionInfo.tsx

@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from "react";
 import styled from "styled-components";
-import { useEvent } from "react-use";
 
 import FunctionDetails from "./FunctionDetails";
 import FunctionList from "./FunctionList";
@@ -31,7 +30,7 @@ const FunctionInfo = ({ contract }) => {
   }
 
   // keyboard press behaviour (should really be somewhere else)
-  useEvent("keydown", (e) => {
+  const keyHandler = e => {
     if (e.key === "ArrowUp") {
       e.preventDefault();
       if (selectedIdx !== null) {
@@ -50,7 +49,15 @@ const FunctionInfo = ({ contract }) => {
         shiftDown();
       }
     }
-  });
+  }
+
+  // add event listener on initial render, and remove on cleanup
+  useEffect(() => {
+    window.addEventListener('keydown', keyHandler)
+    return () => {
+      window.removeEventListener('keydown', keyHandler)
+    }
+  }, [])
 
   // unselect functions if the contract changes
   useEffect(() => {

src/index.ts

@@ -4,7 +4,7 @@ import path from "path";
 import chalk from "chalk";
 import clear from "clear";
 import figlet from "figlet";
-import program from "commander";
+import { program } from "commander";
 
 import log from "./logger";
 import startServer from "./server";
@@ -31,15 +31,16 @@ program
   .parse(process.argv);
 
 program.outputHelp();
+const options = program.opts();
 console.log("");
 
 // determine what path (if any) to try
 let targetPath;
 if (program.args[0]) {
   targetPath = program.args[0];
-} else if (program.truffle) {
+} else if (options.truffle) {
   targetPath = "./build/contracts";
-} else if (program.buidler) {
+} else if (options.buidler) {
   targetPath = "./artifacts";
 }
 
@@ -55,11 +56,11 @@ if (targetPath) {
 
   log.info(`Artifact directory: ${chalk.yellow(artifactPath)}`);
   startServer({
-    port: program.port || 3000,
+    port: options.port || 3000,
     artifactPath,
   });
 } else {
   startServer({
-    port: program.port || 3000,
+    port: options.port || 3000,
   });
 }