Merge pull request #85 from colfax23/cs/error-fixes

Cs/error fixes

src/react/components/KeyConfigurationWizard.tsx

@@ -13,9 +13,9 @@ const ContentGrid = styled(Grid)`
 type Props = {
   onStepBack: () => void,
   onStepForward: () => void,
-  keyGenerationStartIndex: number | null,
-  initialKeyGenerationStartIndex: number | null,
-  setKeyGenerationStartIndex: Dispatch<SetStateAction<number | null>>,
+  keyGenerationStartIndex: number,
+  initialKeyGenerationStartIndex: number,
+  setKeyGenerationStartIndex: Dispatch<SetStateAction<number>>,
   showKeyGenerationStartIndexInput: boolean,
   numberOfKeys: number,
   setNumberOfKeys: Dispatch<SetStateAction<number>>,
@@ -114,7 +114,7 @@ const KeyConfigurationWizard: FC<Props> = (props): ReactElement => {
       setPasswordStrengthError(false);
     }
 
-    if (props.keyGenerationStartIndex == null || props.keyGenerationStartIndex < 0) {
+    if (props.keyGenerationStartIndex < 0) {
       setStartingIndexError(true);
       isError = true;
     } else {

src/react/components/KeyGeneratioinFlow/0-KeyInputs.tsx

@@ -6,8 +6,8 @@ import { errors, tooltips } from '../../constants';
 type GenerateKeysProps = {
   numberOfKeys: number,
   setNumberOfKeys: Dispatch<SetStateAction<number>>,
-  index: number | null,
-  setIndex: Dispatch<SetStateAction<number | null>>,
+  index: number,
+  setIndex: Dispatch<SetStateAction<number>>,
   showIndexInput: boolean,
   password: string,
   setPassword: Dispatch<SetStateAction<string>>,

src/react/components/KeyGenerationWizard.tsx

@@ -20,7 +20,7 @@ type Props = {
   onStepForward: () => void,
   network: Network,
   mnemonic: string,
-  keyGenerationStartIndex: number | null,
+  keyGenerationStartIndex: number,
   numberOfKeys: number,
   password: string,
   folderPath: string,

src/react/components/MnemonicGenerationFlow/0-GenerateMnemonic.tsx

@@ -1,7 +1,7 @@
-import { Box, Grid, Typography } from '@material-ui/core';
 import React, { FC, ReactElement, Dispatch, SetStateAction } from 'react';
+import { Box, Grid, Link, Typography } from '@material-ui/core';
 import { shell } from "electron";
-import styled from "styled-components";
+import styled from 'styled-components';
 
 type GenerateMnemonicProps = {
   setGenerateError: Dispatch<SetStateAction<boolean>>,
@@ -10,14 +10,8 @@ type GenerateMnemonicProps = {
   generateErrorMsg: string,
 }
 
-const StyledLink = styled(Typography)`
-  cursor: pointer;
-  display: inline;
-`;
-
-const LoudText = styled(Typography)`
+const LoudText = styled.span`
   color: cyan;
-  display: inline;
 `;
 
 const GenerateMnemonic: FC<GenerateMnemonicProps> = (props): ReactElement => {
@@ -36,12 +30,12 @@ const GenerateMnemonic: FC<GenerateMnemonicProps> = (props): ReactElement => {
       <Grid item xs={10}>
         <Box sx={{ m: 2 }}>
           <Typography variant="body1" align="left">
-            In this step, we'll generate a Secret Recovery Phrase (traditionally referred to as a "mnemonic") and a set of validator keys for you. For more information, visit: <StyledLink display="inline" color="primary" onClick={sendToKeyInfo}>What are ETH 2.0 Keys?</StyledLink>
+            In this step, we'll generate a Secret Recovery Phrase (traditionally referred to as a "mnemonic") and a set of validator keys for you. For more information, visit: <Link display="inline" component="button" onClick={sendToKeyInfo}>What are ETH 2.0 Keys?</Link>
           </Typography>
         </Box>
         <Box sx={{ m: 2 }}>
           <Typography variant="body1" align="left" gutterBottom>
-            It is <b>very</b> important to <LoudText>keep both your secret recovery phrase and your validator keys safe and secure</LoudText> as you will need them to retrieve your funds later. Anybody with access to these will also be able to steal your funds! For tips on storage, see: <StyledLink display="inline" color="primary" onClick={sendToPassphraseProtection}>How to protect your seed phrase.</StyledLink>
+            It is <b>very</b> important to <LoudText>keep both your secret recovery phrase and your validator keys safe and secure</LoudText> as you will need them to retrieve your funds later. Anybody with access to these will also be able to steal your funds! For tips on storage, see: <Link display="inline" component="button" onClick={sendToPassphraseProtection}>How to protect your seed phrase.</Link>
           </Typography>
         </Box>
         <Box sx={{ m: 2 }}>

src/react/pages/Home.tsx

@@ -124,7 +124,10 @@ const Home: FC<HomeProps> = (props): ReactElement => {
         open={showNetworkModal}
         onClose={handleCloseNetworkModal}
       >
-        <NetworkPicker handleCloseNetworkModal={handleCloseNetworkModal} setNetwork={props.setNetwork} network={props.network}></NetworkPicker>
+        {/* Added <div> here per the following link to fix error https://stackoverflow.com/a/63521049/5949270 */}
+        <div>
+          <NetworkPicker handleCloseNetworkModal={handleCloseNetworkModal} setNetwork={props.setNetwork} network={props.network}></NetworkPicker>
+        </div>
       </Modal>
 
       <LandingHeader variant="h1">Welcome!</LandingHeader>

src/react/pages/MainWizard.tsx

@@ -48,13 +48,11 @@ type WizardProps = {
 const Wizard: FC<WizardProps> = (props): ReactElement => {
   const { stepSequenceKey } = useParams<RouteParams>();
   const history = useHistory();
-  const initialKeyGenerationStartIndex =
-    stepSequenceKey === StepSequenceKey.MnemonicGeneration ? 0 : null;
 
   const [mnemonic, setMnemonic] = useState("");
   const [mnemonicToVerify, setMnemonicToVerify] = useState("");
   const [activeStepIndex, setActiveStepIndex] = useState(0);
-  const [keyGenerationStartIndex, setKeyGenerationStartIndex] = useState(initialKeyGenerationStartIndex);
+  const [keyGenerationStartIndex, setKeyGenerationStartIndex] = useState(0);
   const [numberOfKeys, setNumberOfKeys] = useState(1);
   const [password, setPassword] = useState("");
   const [folderPath, setFolderPath] = useState("");
@@ -113,9 +111,9 @@ const Wizard: FC<WizardProps> = (props): ReactElement => {
           <KeyConfigurationWizard
             {...commonProps}
             keyGenerationStartIndex={keyGenerationStartIndex}
-            initialKeyGenerationStartIndex={initialKeyGenerationStartIndex}
+            initialKeyGenerationStartIndex={0}
             setKeyGenerationStartIndex={setKeyGenerationStartIndex}
-            showKeyGenerationStartIndexInput={initialKeyGenerationStartIndex == null}
+            showKeyGenerationStartIndexInput={stepSequenceKey === StepSequenceKey.MnemonicImport}
             numberOfKeys={numberOfKeys}
             setNumberOfKeys={setNumberOfKeys}
             password={password}