Merge pull request #40 from colfax23/cs/tweaks

UX Tweaks

src/react/components/Finish.tsx

@@ -1,8 +1,7 @@
-import { Grid, Typography } from '@material-ui/core';
+import { Button, Grid, Typography } from '@material-ui/core';
 import React, { FC, ReactElement, Dispatch, SetStateAction } from 'react';
 import styled from 'styled-components';
 import KeysCreated from './KeyGeneratioinFlow/4-KeysCreated';
-import StepNavigation from './StepNavigation';
 
 const ContentGrid = styled(Grid)`
   height: 320px;
@@ -21,7 +20,7 @@ const Finish: FC<Props> = (props): ReactElement => {
     <Grid container direction="column" spacing={2}>
       <Grid item>
         <Typography variant="h1">
-          Generate Keys
+          Create Keys
         </Typography>
       </Grid>
       <ContentGrid item container>
@@ -30,12 +29,13 @@ const Finish: FC<Props> = (props): ReactElement => {
         </Grid>
       </ContentGrid>
       {props.children}
-      <StepNavigation
-        onPrev={props.onStepBack}
-        onNext={props.onStepForward}
-        hideBack={true}
-        nextLabel="Finish"
-      />
+      <Grid item container justifyContent="space-between">
+        <Grid item xs={5} />
+        <Grid item xs={2}>
+          <Button variant="contained" color="primary" onClick={props.onStepForward} tabIndex={2}>Close</Button>
+        </Grid>
+        <Grid item xs={5} />
+      </Grid>
     </Grid>
   );
 }

src/react/components/KeyConfigurationWizard.tsx

@@ -168,7 +168,7 @@ const KeyConfigurationWizard: FC<Props> = (props): ReactElement => {
     <Grid container direction="column" spacing={2}>
       <Grid item>
         <Typography variant="h1">
-          Generate Keys
+          Create Keys
         </Typography>
       </Grid>
       <ContentGrid item container>

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

@@ -53,7 +53,7 @@ const KeyInputs = (props: GenerateKeysProps) => {
     <Grid container direction="column" spacing={3}>
       <Grid item xs={12}>
         <Typography variant="body1">
-          Nice!  Your Secret Recovery Phrase has been verified. Now lets collect some info about the keys to generate:
+          Nice!  Your Secret Recovery Phrase matches. Now let's collect some info about the keys to create:
         </Typography>
       </Grid>
       <Grid item xs={12}>

src/react/components/KeyGenerationWizard.tsx

@@ -145,7 +145,7 @@ const KeyGenerationWizard: FC<Props> = (props): ReactElement => {
     <Grid container direction="column" spacing={2}>
       <Grid item>
         <Typography variant="h1">
-          Generate Keys
+          Create Keys
         </Typography>
       </Grid>
       <ContentGrid item container>

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

@@ -25,9 +25,9 @@ const GenerateMnemonic: FC<{}> = (): ReactElement => {
         <Typography variant="body1" align="left">
           In this step, we'll be generating 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>
           <br/><br/>
-          It is *very* important to keep these safe and secure as you will need them to retrieve your funds later. Anybody with access to these will also be able to retrieve 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 keep these safe and secure 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>
           <br/><br/>
-          If possible, this should be run on a computer that is not connected to the internet. You can move Wagyu Key Gen to a USB stick, plug it into an offline machine, and run it from there if you'd like.
+          We recommend running Wagyu Key Gen from an offline machine. One way to do this is to move the application to a USB stick, plug it in to an offline machine, and run it from there.
         </Typography>
       </Grid>
       <Grid item xs={1} />

src/react/components/MnemonicGenerationFlow/3-VerifyMnemonic.tsx

@@ -31,7 +31,7 @@ const VerifyMnemonic: FC<VerifyMnemonicProps> = (props): ReactElement => {
         <Grid item xs={10}>
           <TextField
             id="verify-mnemonic"
-            label="Type your Secret Recovery Phrase here"
+            label="Confirm your Secret Recovery Phrase"
             multiline
             fullWidth
             rows={4}

src/react/components/MnemonicGenerationWizard.tsx

@@ -72,7 +72,7 @@ const MnemonicGenerationWizard: FC<Props> = (props): ReactElement => {
   const nextLabel = () => {
     switch (step) {
       case 0:
-        return "Generate";
+        return "Create";
       case 1:
         return "Next";
       case 2:
@@ -161,7 +161,7 @@ const MnemonicGenerationWizard: FC<Props> = (props): ReactElement => {
     <Grid container direction="column" spacing={2}>
       <Grid item>
         <Typography variant="h1">
-          Generate Secret Recovery Phrase
+          Create Secret Recovery Phrase
         </Typography>
       </Grid>
       <ContentGrid item container>

src/react/components/StepNavigation.tsx

@@ -1,6 +1,5 @@
 import React, { FC, ReactElement } from "react";
 import { Grid, Button } from "@material-ui/core";
-import styled from 'styled-components';
 
 type Props = {
   onPrev: () => void,
@@ -24,7 +23,7 @@ const StepNavigation: FC<Props> = (props): ReactElement => {
       </Grid>
       <Grid item xs={4} />
       <Grid item xs={2}>
-        {!props.hideNext && (
+        {!props.hideNext  && (
           <Button variant="contained" color="primary" disabled={props.disableNext} onClick={props.onNext} tabIndex={2}>{props.nextLabel}</Button>
         )}
       </Grid>

src/react/constants.ts

@@ -1,8 +1,8 @@
 import { StepKey } from './types';
 
 export const errors = {
-	MNEMONIC_FORMAT: "Secret Recovery Phrase is not in the right format, please double check.",
-	MNEMONICS_DONT_MATCH: "Secret Recovery Phrase does not match, please try again.",
+	MNEMONIC_FORMAT: "Invalid format. Your Secret Recovery Phrase should be a 24 word list.",
+	MNEMONICS_DONT_MATCH: "The Secret Recovery Phrase you entered does not match what was given to you. Please try again.",
 	NUMBER_OF_KEYS: "Please input number of keys.",
 	PASSWORD_STRENGTH: "Password must be at least 8 characters.",
 	PASSWORD_MATCH: "Passwords don't match.",
@@ -13,16 +13,16 @@ export const errors = {
 export const MNEMONIC_LENGTH = 24;
 
 export const tooltips = {
-	IMPORT_MNEMONIC: "If you've already generated a Secret Recovery Phrase, you can generate more keys from it by importing it here.",
-	NUMBER_OF_KEYS: "Enter how many new validator keys you'd like to generate.",
+	IMPORT_MNEMONIC: "If you've already created a Secret Recovery Phrase, you can create more keys from it by importing it here.",
+	NUMBER_OF_KEYS: "Enter how many new validator keys you'd like to create.",
 	PASSWORD: "Pick a strong password (at least 8 characters) that will be used to protect your keys.",
-	STARTING_INDEX: "Each key is generated sequentially, so we need to know how many you've generated in the past in order to create some new ones for you.",
+	STARTING_INDEX: "Each key is created sequentially, so we need to know how many you've created in the past in order to create some new ones for you.",
 };
 
 export const stepLabels = {
 	[StepKey.MnemonicImport]: 'Import Secret Recovery Phrase',
 	[StepKey.MnemonicGeneration]: 'Create Secret Recovery Phrase',
-	[StepKey.KeyConfiguration]: 'Configure Keys',
-	[StepKey.KeyGeneration]: 'Create Key Files',
+	[StepKey.KeyConfiguration]: 'Configure Validator Keys',
+	[StepKey.KeyGeneration]: 'Create Validator Key Files',
 	[StepKey.Finish]: 'Finish'
 };

src/react/pages/Home.tsx

@@ -9,34 +9,6 @@ import { NetworkPicker } from "../components/NetworkPicker";
 import { tooltips } from "../constants";
 import { Network, StepSequenceKey } from '../types'
 
-type ContainerProps = {
-  showNetworkPicker: boolean
-}
-
-const ModalBackground = styled.div`
-  display: none; /* Hidden by default */
-  position: fixed; /* Stay in place */
-  z-index: 1; /* Sit on top */
-  left: 0;
-  top: 0;
-  width: 100%; /* Full width */
-  height: 100%; /* Full height */
-  overflow: auto; /* Enable scroll if needed */
-  background-color: rgb(0,0,0); /* Fallback color */
-  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
-  ${(props: ContainerProps) => {
-    if (props.showNetworkPicker) {
-      return `
-        display: block;
-      `;
-    } else {
-      return `
-        display: none;
-      `;
-    }
-  }}
-`;
-
 const StyledMuiContainer = styled(Container)`
   display: flex;
   flex-direction: column;
@@ -53,12 +25,12 @@ const NetworkDiv = styled.div`
 
 const LandingHeader = styled(Typography)`
   font-size: 36px;
-  margin-top: 50px;
-  margin-bottom: 70px;
+  margin-top: 45px;
+  margin-bottom: 60px;
 `;
 
 const SubHeader = styled(Typography)`
-  margin-top: 110px;
+  margin-top: 100px;
 `;
 
 const Links = styled.div`
@@ -71,7 +43,7 @@ const StyledLink = styled(Typography)`
 `;
 
 const OptionsGrid = styled(Grid)`
-  margin-top: 55px;
+  margin-top: 50px;
   align-items: center;
 `;
 
@@ -97,7 +69,7 @@ const Home: FC<HomeProps> = (props): ReactElement => {
   }
 
   const sendToDiscord = () => {
-    shell.openExternal("https://invite.gg/ethstaker");
+    shell.openExternal("https://discord.io/ethstaker");
   }
 
   const handleOpenNetworkModal = () => {