Material v4-v5 upgrade and wagyu refactor

.gitignore

@@ -1,3 +1,4 @@
+.vscode/
 node_modules/
 dist/
 .pnp.*

package.json

@@ -12,8 +12,12 @@
     "@types/react-router-dom": "^5.1.8",
     "@types/styled-components": "^5.1.11",
     "@types/tmp": "^0.2.2",
+    "autoprefixer": "^10.4.19",
     "electron": "^28.2.2",
     "electron-builder": "^24.9.1",
+    "postcss": "^8.4.38",
+    "postcss-loader": "^8.1.1",
+    "tailwindcss": "^3.4.1",
     "ts-loader": "^9.2.3",
     "typescript": "^4.3.5",
     "webpack": "^5.88.2",
@@ -29,9 +33,13 @@
     "dist": "electron-builder"
   },
   "dependencies": {
-    "@material-ui/core": "^4.12.3",
-    "@material-ui/icons": "^4.11.2",
-    "@material-ui/lab": "^4.0.0-alpha.60",
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.15.10",
+    "@mui/lab": "^5.0.0-alpha.165",
+    "@mui/material": "^5.15.10",
+    "@mui/styled-engine-sc": "^6.0.0-alpha.16",
+    "@mui/styles": "^5.15.10",
     "css-loader": "^5.2.6",
     "file-loader": "^6.2.0",
     "git-revision-webpack-plugin": "^5.0.0",
@@ -41,7 +49,7 @@
     "react-router-dom": "^5.2.0",
     "shebang-loader": "^0.0.1",
     "style-loader": "^3.0.0",
-    "styled-components": "^5.3.0",
+    "styled-components": "^6.1.8",
     "typeface-roboto": "^1.1.13",
     "web3-utils": "^1.7.0"
   },

postcss.config.js

@@ -0,0 +1,4 @@
+const tailwindcss = require('tailwindcss');
+module.exports = {
+  plugins: [tailwindcss],
+};

src/electron/Eth2Deposit.ts

@@ -135,7 +135,7 @@ const createMnemonic = async (language: string): Promise<string> => {
     executable = SFE_PATH;
     args = [CREATE_MNEMONIC_SUBCOMMAND, DIST_WORD_LIST_PATH, "--language", language]
   } else {
-    if (!await requireDepositPackages()) {
+    if (!(await requireDepositPackages())) {
       throw new Error("Failed to create mnemonic, don't have the required packages.");
     }
     env.PYTHONPATH = await getPythonPath();
@@ -203,7 +203,7 @@ const generateKeys = async (
     args = args.concat([DIST_WORD_LIST_PATH, mnemonic, index.toString(), count.toString(), folder,
       network.toLowerCase(), password]);
   } else {
-    if(!await requireDepositPackages()) {
+    if(!(await requireDepositPackages())) {
       throw new Error("Failed to generate keys, don't have the required packages.");
     }
     env.PYTHONPATH = await getPythonPath();
@@ -244,7 +244,7 @@ const validateMnemonic = async (
     executable = SFE_PATH;
     args = [VALIDATE_MNEMONIC_SUBCOMMAND, DIST_WORD_LIST_PATH, mnemonic];
   } else {
-    if(!await requireDepositPackages()) {
+    if(!(await requireDepositPackages())) {
       throw new Error("Failed to validate mnemonic, don't have the required packages.");
     }
     env.PYTHONPATH = await getPythonPath();
@@ -286,7 +286,7 @@ const validateBLSCredentials = async (
     executable = SFE_PATH;
     args = [VALIDATE_BLS_CREDENTIALS_SUBCOMMAND, chain.toLowerCase(), mnemonic, index.toString(), withdrawal_credentials];
   } else {
-    if(!await requireDepositPackages()) {
+    if(!(await requireDepositPackages())) {
       throw new Error("Failed to validate BLS credentials, don't have the required packages.");
     }
     env.PYTHONPATH = await getPythonPath();
@@ -341,7 +341,7 @@ if (await doesFileExist(BUNDLED_SFE_PATH)) {
   args = args.concat([folder, chain.toLowerCase(), mnemonic, index.toString(), indices,
     withdrawal_credentials, execution_address]);
 } else {
-  if(!await requireDepositPackages()) {
+  if(!(await requireDepositPackages())) {
     throw new Error("Failed to generate BTEC, don't have the required packages.");
   }
   env.PYTHONPATH = await getPythonPath();

src/react/App.tsx

@@ -1,41 +1,88 @@
-import { CssBaseline, ThemeProvider } from "@material-ui/core";
-import React, { FC, ReactElement, useState } from "react";
+import { CssBaseline, ThemeProvider, StyledEngineProvider } from "@mui/material";
+import { FC, ReactElement } from "react";
 import { HashRouter, Route, Switch } from "react-router-dom";
-import styled from "styled-components";
-import 'typeface-roboto';
+
+import BTECContextWrapper from "./BTECContext";
 import { OnlineDetector } from "./components/OnlineDetector";
+import VersionFooter from "./components/VersionFooter";
+import { paths } from "./constants";
+import GlobalContextWrapper from "./GlobalContext";
+import KeyCreationContextWrapper from "./KeyCreationContext";
+import ConfigureValidatorKeys from "./pages/ConfigureValidatorKeys";
+import ConfigureWithdrawalAddress from "./pages/ConfigureWithdrawalAddress";
+import CreateCredentialsChange from "./pages/CreateCredentialsChange";
+import CreateMnemonic from "./pages/CreateMnemonic";
+import CreateValidatorKeys from "./pages/CreateValidatorKeys";
+import FinishCredentialsGeneration from "./pages/FinishCredentialsGeneration";
+import FinishKeyGeneration from "./pages/FinishKeyGeneration";
 import Home from "./pages/Home";
-import MainWizard from "./pages/MainWizard";
+import MnemonicImport from "./pages/MnemonicImport";
 import theme from "./theme";
-import { Network } from './types';
-
-const Container = styled.main`
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-`;
 
 /**
- * The React app top level including theme and routing.
+ * Routing for the application. Broken into four sections:
+ * - Primary home page
+ * - Routes for creating a mnemonic and validator keys
+ * - Routes for using an existing mnemonic to create validator keys
+ * - Routes for generating the credentials change
  *
- * @returns the react element containing the app
+ * Each of the three flows is wrapped in a React Context that will store
+ * the inputs of the user to be accessible across each page. This prevents
+ * prop drilling
  */
 const App: FC = (): ReactElement => {
-  const [network, setNetwork] = useState<Network>(Network.MAINNET);
-
   return (
-    <ThemeProvider theme={theme}>
-      <CssBaseline />
-      <HashRouter>
-        <Container>
-          <OnlineDetector />
-          <Switch>
-            <Route exact path="/" render={() => <Home network={network} setNetwork={setNetwork} />} />
-            <Route exact path="/wizard/:stepSequenceKey" render={() => <MainWizard network={network} />} />
-          </Switch>
-        </Container>
-      </HashRouter>
-    </ThemeProvider>
+    <StyledEngineProvider injectFirst>
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        <HashRouter>
+          <GlobalContextWrapper>
+            <main className="tw-flex tw-flex-col tw-h-[100vh]">
+              <OnlineDetector />
+              <Switch>
+                <Route exact path="/" render={() => <Home />} />
+
+                <Route>
+
+                  {/* Create Mnemonic & Keys Flow */}
+                  <KeyCreationContextWrapper>
+                    <Switch>
+                      <Route path={paths.CREATE_MNEMONIC} children={() => <CreateMnemonic />} />
+                      <Route path={paths.CONFIGURE_CREATE} children={() => <ConfigureValidatorKeys />} />
+                      <Route path={paths.CREATE_KEYS_CREATE} children={() => <CreateValidatorKeys />} />
+                      <Route path={paths.FINISH_CREATE} children={() => <FinishKeyGeneration />} />
+                    </Switch>
+                  </KeyCreationContextWrapper>
+
+
+                  {/* Import Mnemonic & Generate Keys Flow */}
+                  <KeyCreationContextWrapper>
+                    <Switch>
+                      <Route path={paths.EXISTING_IMPORT} render={() => <MnemonicImport />} />
+                      <Route path={paths.CONFIGURE_EXISTING} render={() => <ConfigureValidatorKeys />} />
+                      <Route path={paths.CREATE_KEYS_EXISTING} render={() => <CreateValidatorKeys />} />
+                      <Route path={paths.FINISH_EXISTING} render={() => <FinishKeyGeneration />} />
+                    </Switch>
+                  </KeyCreationContextWrapper>
+
+
+                  {/* Update Withdrawal Credentials Flow */}
+                  <BTECContextWrapper>
+                    <Switch>
+                      <Route path={paths.BTEC_IMPORT} render={() => <MnemonicImport />} />
+                      <Route path={paths.CONFIGURE_BTEC} render={() => <ConfigureWithdrawalAddress />} />
+                      <Route path={paths.CREATE_CREDENTIALS} render={() => <CreateCredentialsChange />} />
+                      <Route path={paths.FINISH_CREDENTIALS} render={() => <FinishCredentialsGeneration />} />
+                    </Switch>
+                  </BTECContextWrapper>
+                </Route>
+              </Switch>
+              <VersionFooter />
+            </main>
+          </GlobalContextWrapper>
+        </HashRouter>
+      </ThemeProvider>
+    </StyledEngineProvider>
   );
 };
 

src/react/BTECContext.tsx

@@ -0,0 +1,64 @@
+import { Dispatch, SetStateAction, createContext, useState } from "react";
+
+interface BTECContextType {
+  btecCredentials: string;
+  setBTECCredentials: Dispatch<SetStateAction<string>>;
+  btecIndices: string;
+  setBTECIndices: Dispatch<SetStateAction<string>>;
+  folderLocation: string;
+  setFolderLocation: Dispatch<SetStateAction<string>>;
+  index: number;
+  setIndex: Dispatch<SetStateAction<number>>;
+  mnemonic: string;
+  setMnemonic: Dispatch<SetStateAction<string>>;
+  withdrawalAddress: string;
+  setWithdrawalAddress: Dispatch<SetStateAction<string>>;
+}
+
+export const BTECContext = createContext<BTECContextType>({
+  btecCredentials: "",
+  setBTECCredentials: () => {},
+  btecIndices: "",
+  setBTECIndices: () => {},
+  folderLocation: "",
+  setFolderLocation: () => {},
+  index: 0,
+  setIndex: () => {},
+  mnemonic: "",
+  setMnemonic: () => {},
+  withdrawalAddress: "",
+  setWithdrawalAddress: () => {},
+});
+
+/**
+ * Context for making the withdrawal credentials change
+ */
+const BTECContextWrapper = ({ children }: { children: React.ReactNode}) => {
+  const [btecIndices, setBTECIndices] = useState<string>("");
+  const [btecCredentials, setBTECCredentials] = useState<string>("");
+  const [folderLocation, setFolderLocation] = useState<string>("");
+  const [index, setIndex] = useState<number>(0);
+  const [mnemonic, setMnemonic] = useState<string>("");
+  const [withdrawalAddress, setWithdrawalAddress] = useState<string>("");
+
+  return (
+    <BTECContext.Provider value={{
+      btecCredentials,
+      setBTECCredentials,
+      btecIndices,
+      setBTECIndices,
+      folderLocation,
+      setFolderLocation,
+      index,
+      setIndex,
+      mnemonic,
+      setMnemonic,
+      withdrawalAddress,
+      setWithdrawalAddress,
+    }}>
+      {children}
+    </BTECContext.Provider>
+  );
+};
+
+export default BTECContextWrapper;

src/react/KeyCreationContext.tsx

@@ -0,0 +1,64 @@
+import { Dispatch, SetStateAction, createContext, useState } from "react";
+
+interface KeyCreationContextType {
+  folderLocation: string;
+  setFolderLocation: Dispatch<SetStateAction<string>>;
+  index: number;
+  setIndex: Dispatch<SetStateAction<number>>;
+  mnemonic: string;
+  setMnemonic: Dispatch<SetStateAction<string>>;
+  numberOfKeys: number;
+  setNumberOfKeys: Dispatch<SetStateAction<number>>;
+  password: string;
+  setPassword: Dispatch<SetStateAction<string>>;
+  withdrawalAddress: string;
+  setWithdrawalAddress: Dispatch<SetStateAction<string>>;
+}
+
+export const KeyCreationContext = createContext<KeyCreationContextType>({
+  folderLocation: "",
+  setFolderLocation: () => {},
+  index: 0,
+  setIndex: () => {},
+  mnemonic: "",
+  setMnemonic: () => {},
+  numberOfKeys: 1,
+  setNumberOfKeys: () => {},
+  password: "",
+  setPassword: () => {},
+  withdrawalAddress: "",
+  setWithdrawalAddress: () => {},
+});
+
+/**
+ * Context for generating a validator key for both using an existing mnemonic or a new one
+ */
+const KeyCreationContextWrapper = ({ children }: { children: React.ReactNode}) => {
+  const [folderLocation, setFolderLocation] = useState<string>("");
+  const [index, setIndex] = useState<number>(0);
+  const [mnemonic, setMnemonic] = useState<string>("");
+  const [numberOfKeys, setNumberOfKeys] = useState<number>(1);
+  const [password, setPassword] = useState<string>("");
+  const [withdrawalAddress, setWithdrawalAddress] = useState<string>("");
+
+  return (
+    <KeyCreationContext.Provider value={{
+      folderLocation,
+      setFolderLocation,
+      index,
+      setIndex,
+      mnemonic,
+      setMnemonic,
+      numberOfKeys,
+      setNumberOfKeys,
+      password,
+      setPassword,
+      withdrawalAddress,
+      setWithdrawalAddress,
+    }}>
+      {children}
+    </KeyCreationContext.Provider>
+  );
+};
+
+export default KeyCreationContextWrapper;