Merge branch 'develop' of github.com:andrerfneves/zcash-reference-wallet into hotfix/mac-build-pipeline

app/assets/images/zcash-simple-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="19.818" height="35.161" viewBox="0 0 19.818 35.161"><defs><style>.a{fill:#FCD639;}</style></defs><path class="a" d="M541.425,662.318v4.555h-7.678v5.678H545.5l-11.751,16v4.261h7.678v4.665h4.563v-4.665h7.577v-5.666H541.788l11.777-16v-4.273h-7.577v-4.555Z" transform="translate(-533.747 -662.318)"/></svg>

app/components/loading-screen.js

@@ -2,19 +2,51 @@
 import React from 'react';
 import styled from 'styled-components';
 
+import CircleProgressComponent from 'react-circle';
 import { TextComponent } from './text';
 
+import zcashLogo from '../assets/images/zcash-simple-icon.svg';
+
+import theme from '../theme';
+
 const Wrapper = styled.div`
   width: 100vw;
   height: 100vh;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  background-color: ${props => props.theme.colors.background};
+  background-color: ${props => props.theme.colors.cardBackgroundColor};
 `;
 
-export const LoadingScreen = () => (
+const CircleWrapper = styled.div`
+  width: 125px;
+  height: 125px;
+  position: relative;
+  margin-bottom: 25px;
+`;
+
+const Logo = styled.img`
+  z-index: 10;
+  position: absolute;
+  width: 50px;
+  height: 50px;
+  top: calc(50% - 25px);
+  left: calc(50% - 25px);
+`;
+
+export const LoadingScreen = ({ progress }: { progress: number }) => (
   <Wrapper>
-    <TextComponent value='Loading daemon...' />
+    <CircleWrapper>
+      <Logo src={zcashLogo} alt='Zcash logo' />
+      <CircleProgressComponent
+        progress={progress}
+        responsive
+        showPercentage={false}
+        progressColor={theme.colors.activeItem}
+        bgColor={theme.colors.inactiveItem}
+      />
+    </CircleWrapper>
+    <TextComponent value='Zcash Application Starting' />
   </Wrapper>
 );

app/components/with-daemon-status-check.js

@@ -5,12 +5,13 @@ import { LoadingScreen } from './loading-screen';
 
 import rpc from '../../services/api';
 
+type Props = {};
+
 type State = {
   isRunning: boolean,
+  progress: number,
 };
 
-type Props = {};
-
 /* eslint-disable max-len */
 export const withDaemonStatusCheck = <PassedProps: {}>(
   WrappedComponent: ComponentType<PassedProps>,
@@ -19,6 +20,7 @@ export const withDaemonStatusCheck = <PassedProps: {}>(
 
     state = {
       isRunning: false,
+      progress: 0,
     };
 
     componentDidMount() {
@@ -35,24 +37,36 @@ export const withDaemonStatusCheck = <PassedProps: {}>(
     }
 
     runTest = () => {
-      rpc.getinfo().then((response) => {
-        if (response) {
-          this.setState(() => ({ isRunning: true }));
-          if (this.timer) {
-            clearInterval(this.timer);
-            this.timer = null;
+      rpc
+        .getinfo()
+        .then((response) => {
+          if (response) {
+            setTimeout(() => {
+              this.setState(() => ({ isRunning: true }));
+            }, 500);
+            this.setState(() => ({ progress: 100 }));
+
+            if (this.timer) {
+              clearInterval(this.timer);
+              this.timer = null;
+            }
           }
-        }
-      });
+        })
+        .catch(() => {
+          this.setState((state) => {
+            const newProgress = state.progress > 70 ? state.progress + 2.5 : state.progress + 5;
+            return { progress: newProgress > 95 ? 95 : newProgress };
+          });
+        });
     };
 
     render() {
-      const { isRunning } = this.state;
+      const { isRunning, progress } = this.state;
 
       if (isRunning) {
         return <WrappedComponent {...this.props} {...this.state} />;
       }
 
-      return <LoadingScreen />;
+      return <LoadingScreen progress={progress} />;
     }
   };

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;

package.json

@@ -106,6 +106,7 @@
     "process-exists": "^3.1.0",
     "qrcode.react": "^0.8.0",
     "react": "^16.6.0",
+    "react-circle": "^1.1.1",
     "react-click-outside": "tj/react-click-outside",
     "react-dom": "^16.6.0",
     "react-popover": "^0.5.10",

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>

yarn.lock

@@ -13446,6 +13446,11 @@ re-resizable@^4.11.0:
   resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-4.11.0.tgz#d5df10bda445c4ec0945751a223bf195afb61890"
   integrity sha512-dye+7rERqNf/6mDT1iwps+4Gf42420xuZgygF33uX178DxffqcyeuHbBuJ382FIcB5iP6mMZOhfW7kI0uXwb/Q==
 
+react-circle@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/react-circle/-/react-circle-1.1.1.tgz#f97ccf3e2a37a91ea50280ea8262420e0d1de60c"
+  integrity sha512-iphQfy+MRuNuBqJyZlGKbxyBJhDszaiT5eTiilFFPuwo5nsW5k/uH0KCq/sXXBMiJpLJ/Ly3arkUDvrK62Zung==
+
 react-click-outside@tj/react-click-outside:
   version "1.1.1"
   resolved "https://codeload.github.com/tj/react-click-outside/tar.gz/a833ddc5be47490307f9fcc6ed09d8c353108510"