Added fixed version footer

src/react/components/KeyConfigurationWizard.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import KeyInputs from './KeyGeneratioinFlow/0-KeyInputs';
 import VerifyKeysPassword from './KeyGeneratioinFlow/1-VerifyKeysPassword';
 import StepNavigation from './StepNavigation';
+import VersionFooter from './VersionFooter';
 
 const ContentGrid = styled(Grid)`
   height: 320px;
@@ -183,6 +184,7 @@ const KeyConfigurationWizard: FC<Props> = (props): ReactElement => {
         backLabel={prevLabel()}
         nextLabel={nextLabel()}
       />
+      <VersionFooter />
     </Grid>
   );
 }

src/react/components/KeyGeneratioinFlow/4-KeysCreated.tsx

@@ -3,6 +3,7 @@ import { shell } from 'electron';
 import React, { FC, ReactElement } from 'react';
 import styled from 'styled-components';
 import { Network } from '../../types';
+import VersionFooter from '../VersionFooter';
 
 type KeysCreatedProps = {
   folderPath: string,
@@ -46,6 +47,7 @@ const KeysCreated: FC<KeysCreatedProps> = (props): ReactElement => {
           </Box>
       </Grid>
       <Grid item xs={1} />
+      <VersionFooter />
     </Grid>
   );
 }

src/react/components/KeyGenerationWizard.tsx

@@ -9,6 +9,7 @@ import StepNavigation from './StepNavigation';
 import { Network } from '../types';
 import { doesDirectoryExist, isDirectoryWritable } from '../commands/BashUtils';
 import { errors } from '../constants';
+import VersionFooter from './VersionFooter';
 
 const ContentGrid = styled(Grid)`
   height: 320px;
@@ -178,6 +179,7 @@ const KeyGenerationWizard: FC<Props> = (props): ReactElement => {
         hideBack={step === 1}
         hideNext={step === 1}
       />
+      <VersionFooter />
     </Grid>
   );
 }

src/react/components/MnemonicGenerationWizard.tsx

@@ -7,6 +7,7 @@ import GenerateMnemonic from './MnemonicGenerationFlow/0-GenerateMnemonic';
 import ShowMnemonic from './MnemonicGenerationFlow/1-2-ShowMnemonic';
 import VerifyMnemonic from './MnemonicGenerationFlow/3-VerifyMnemonic';
 import StepNavigation from './StepNavigation';
+import VersionFooter from './VersionFooter';
 
 const ContentGrid = styled(Grid)`
   height: 320px;
@@ -160,6 +161,7 @@ const MnemonicGenerationWizard: FC<Props> = (props): ReactElement => {
         disableBack={disableNext()}
         disableNext={disableNext()}
       />
+      <VersionFooter />
     </Grid>
   );
 }

src/react/components/MnemonicImport.tsx

@@ -5,6 +5,7 @@ import { validateMnemonic } from '../commands/Eth2Deposit';
 import ValidatingMnemonic from './MnemonicImportFlow/1-ValidatingMnemonic';
 import { errors, MNEMONIC_LENGTH } from "../constants";
 import StepNavigation from './StepNavigation';
+import VersionFooter from "./VersionFooter";
 
 const ContentGrid = styled(Grid)`
   height: 320px;
@@ -109,6 +110,7 @@ const MnemonicImport: FC<Props> = (props): ReactElement => {
         disableBack={step === 1}
         disableNext={disableImport || step === 1}
       />
+      <VersionFooter />
     </Grid>
   )
 }

src/react/components/VersionFooter.tsx

@@ -0,0 +1,32 @@
+import { Grid, Typography } from "@material-ui/core";
+import React from "react";
+import styled from "styled-components";
+
+declare var VERSION: string;
+declare var COMMITHASH: string;
+
+const SoftText = styled(Typography)`
+  color: gray;
+  text-align: center;
+  font-size: 10px;
+`;
+
+const Container = styled.div`
+  position: fixed;
+  bottom: 40;
+  width: 100%;
+`;
+
+const VersionFooter = () => {
+  return(
+    <Container>
+      <Grid container direction="column">
+        <Grid item justifyContent="center" xs={12}>
+          <SoftText>Version: {VERSION} - Commit Hash: {COMMITHASH}</SoftText>
+        </Grid>
+      </Grid>
+    </Container>
+  )
+}
+
+export default VersionFooter;

src/react/pages/Home.tsx

@@ -8,6 +8,7 @@ import { KeyIcon } from "../components/icons/KeyIcon";
 import { NetworkPicker } from "../components/NetworkPicker";
 import { tooltips } from "../constants";
 import { Network, StepSequenceKey } from '../types'
+import VersionFooter from "../components/VersionFooter";
 
 const StyledMuiContainer = styled(Container)`
   display: flex;
@@ -154,6 +155,7 @@ const Home: FC<HomeProps> = (props): ReactElement => {
           </Tooltip>
         </Grid>
       </OptionsGrid>
+      <VersionFooter />
     </StyledMuiContainer>
   );
 };

webpack.react.config.js

@@ -4,6 +4,13 @@
 // pull in the 'path' module from node
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const webpack = require('webpack');
+
+const { GitRevisionPlugin } = require('git-revision-webpack-plugin');
+const gitRevisionPlugin = new GitRevisionPlugin({
+  branch: true,
+  commithashCommand: 'rev-list --max-count=1 --no-merges --abbrev-commit HEAD',
+});
 
 // export the configuration as an object
 module.exports = {
@@ -46,6 +53,13 @@ module.exports = {
     new HtmlWebpackPlugin({
       template: 'src/react/index.html',
     }),
+    gitRevisionPlugin,
+    new webpack.DefinePlugin({
+      VERSION: JSON.stringify(gitRevisionPlugin.version()),
+      COMMITHASH: JSON.stringify(gitRevisionPlugin.commithash()),
+      BRANCH: JSON.stringify(gitRevisionPlugin.branch()),
+      LASTCOMMITDATETIME: JSON.stringify(gitRevisionPlugin.lastcommitdatetime()),
+    })
   ],
   target: 'electron-renderer'
 };