Skip to content

Commit

Permalink
Merge pull request #189 from valefar-on-discord/main
Browse files Browse the repository at this point in the history
Material v4-v5 upgrade and wagyu refactor
  • Loading branch information
remyroy authored Apr 2, 2024
2 parents bbb8ec7 + bcd96da commit 22ee337
Show file tree
Hide file tree
Showing 178 changed files with 4,374 additions and 21,996 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
.vscode/
node_modules/
dist/
.pnp.*
Expand Down
16 changes: 12 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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"
},
Expand Down
4 changes: 4 additions & 0 deletions postcss.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
const tailwindcss = require('tailwindcss');
module.exports = {
plugins: [tailwindcss],
};
10 changes: 5 additions & 5 deletions src/electron/Eth2Deposit.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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();
Expand Down
103 changes: 75 additions & 28 deletions src/react/App.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
};

Expand Down
64 changes: 64 additions & 0 deletions src/react/BTECContext.tsx
Original file line number Diff line number Diff line change
@@ -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;
28 changes: 28 additions & 0 deletions src/react/GlobalContext.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { Dispatch, SetStateAction, createContext, useState } from "react";

import { Network } from "./types";

interface GlobalContextType {
network: Network;
setNetwork: Dispatch<SetStateAction<Network>>;
}

export const GlobalContext = createContext<GlobalContextType>({
network: Network.MAINNET,
setNetwork: () => {},
});

/**
* Global context for the network which is used across the application
*/
const GlobalContextWrapper = ({ children }: { children: React.ReactNode}) => {
const [network, setNetwork] = useState<Network>(Network.MAINNET);

return (
<GlobalContext.Provider value={{ network, setNetwork }}>
{children}
</GlobalContext.Provider>
);
};

export default GlobalContextWrapper;
64 changes: 64 additions & 0 deletions src/react/KeyCreationContext.tsx
Original file line number Diff line number Diff line change
@@ -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;
Loading

0 comments on commit 22ee337

Please sign in to comment.