Merge pull request #24 from andrerfneves/feature/console-view-layout

Feature/console view layout

app/views/console.js

@@ -5,12 +5,37 @@ import React, { Component, Fragment } from 'react';
 import { ipcRenderer } from 'electron';
 import styled from 'styled-components';
 import generateRandomString from '../utils/generate-random-string';
+import { TextComponent } from '../components/text';
+
+import ConsoleSymbol from '../assets/images/console_zcash.svg';
 
 const Wrapper = styled.div`
   max-height: 100%;
   overflow-y: auto;
+  background-color: ${props => props.theme.colors.cardBackgroundColor};
+  margin-top: ${props => props.theme.layoutContentPaddingTop};
+  border-radius: ${props => props.theme.boxBorderRadius};
+  padding: 38px 33.5px;
 `;
 
+const ConsoleText = styled(TextComponent)`
+  font-family: 'Source Code Pro', monospace;
+`;
+
+const ConsoleImg = styled.img`
+  height: 200px;
+  width: auto;
+`;
+
+const initialLog = `
+  Thank you for running a Zcash node!
+  You're helping to strengthen the network and contributing to a social good :)
+
+  In order to ensure you are adequately protecting your privacy when using Zcash, please see <https://z.cash/support/security/>.
+`;
+
+const breakpoints = [1, 4, 7, 10, 13];
+
 type Props = {};
 
 type State = {
@@ -18,22 +43,13 @@ type State = {
 };
 
 export class ConsoleView extends Component<Props, State> {
-  scrollView = React.createRef();
-
   state = {
     log: '',
   };
 
   componentDidMount() {
     ipcRenderer.on('zcashd-log', (event, message) => {
-      this.setState(state => ({
-        log: `${state.log}\n${message}`,
-      }));
-
-      if (this.scrollView && this.scrollView.current) {
-        // eslint-disable-next-line
-        this.scrollView.current.scrollTop = this.scrollView.current.scrollHeight;
-      }
+      this.setState(() => ({ log: initialLog + message }));
     });
   }
 
@@ -41,14 +57,20 @@ export class ConsoleView extends Component<Props, State> {
     const { log } = this.state;
 
     return (
-      <Wrapper ref={this.scrollView}>
-        {log
-          && log.split('\n').map(item => (
-            <Fragment key={generateRandomString()}>
-              {item}
-              <br />
-            </Fragment>
-          ))}
+      <Wrapper>
+        {log ? (
+          <Fragment>
+            <ConsoleImg src={ConsoleSymbol} alt='Zcashd' />
+            {log.split('\n').map((item, idx) => (
+              <Fragment key={generateRandomString()}>
+                <ConsoleText value={item} />
+                {breakpoints.includes(idx) ? <br /> : null}
+              </Fragment>
+            ))}
+          </Fragment>
+        ) : (
+          <ConsoleText value='Waiting for daemon logs...' />
+        )}
       </Wrapper>
     );
   }

config/daemon/zcashd-child-process.js

@@ -31,7 +31,7 @@ const getDaemonOptions = ({ username, password }) => {
   const defaultOptions = [
     '-showmetrics',
     '--metricsui=0',
-    '-metricsrefreshtime=3',
+    '-metricsrefreshtime=1',
     `-rpcuser=${username}`,
     `-rpcpassword=${password}`,
   ];
@@ -92,7 +92,7 @@ const runDaemon: () => Promise<?ChildProcess> = () => new Promise(async (resolve
   );
 
   childProcess.stdout.on('data', (data) => {
-    if (mainWindow) mainWindow.webContents.send('zcashd-log', data.toString());
+    if (mainWindow && mainWindow.webContents) mainWindow.webContents.send('zcashd-log', data.toString());
     if (!resolved) {
       resolve(childProcess);
       resolved = true;

public/index.html

@@ -7,6 +7,7 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <link rel="shortcut icon" href="favicon.ico" />
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" />
 
     <title>Zcash Reference Wallet</title>
   </head>