update daemon startup process

package.json

@@ -132,7 +132,7 @@
     "yarn": "^1.3"
   },
   "lbrySettings": {
-    "lbrynetDaemonVersion": "0.20.4",
+    "lbrynetDaemonVersion": "0.21.1rc1",
     "lbrynetDaemonUrlTemplate": "https://github.com/lbryio/lbry/releases/download/vDAEMONVER/lbrynet-daemon-vDAEMONVER-OSNAME.zip",
     "lbrynetDaemonDir": "static/daemon",
     "lbrynetDaemonFileName": "lbrynet-daemon"

src/renderer/component/spinner/view.jsx

@@ -7,16 +7,18 @@ type Props = {
   dark?: boolean, // always a dark spinner
   light?: boolean, // always a light spinner
   theme: string,
+  type: ?string,
 };
 
 const Spinner = (props: Props) => {
-  const { dark, light, theme } = props;
+  const { dark, light, theme, type } = props;
 
   return (
     <div
       className={classnames('spinner', {
         'spinner--dark': !light && (dark || theme === LIGHT_THEME),
         'spinner--light': !dark && (light || theme === DARK_THEME),
+        'spinner--splash': type === 'splash',
       })}
     >
       <div className="rect rect1" />

src/renderer/component/splash/internal/load-screen.jsx

@@ -2,6 +2,7 @@
 import * as React from 'react';
 import Icon from 'component/common/icon';
 import * as icons from 'constants/icons';
+import Spinner from 'component/spinner';
 
 type Props = {
   message: string,
@@ -33,6 +34,7 @@ class LoadScreen extends React.PureComponent<Props> {
         )}
 
         {details && <div className="load-screen__details">{details}</div>}
+        <Spinner type="splash" />
       </div>
     );
   }

src/renderer/component/splash/view.jsx

@@ -1,3 +1,4 @@
+// @flow
 import * as React from 'react';
 import { Lbry, MODALS } from 'lbry-redux';
 import LoadScreen from './internal/load-screen';
@@ -5,10 +6,13 @@ import ModalWalletUnlock from 'modal/modalWalletUnlock';
 import ModalIncompatibleDaemon from 'modal/modalIncompatibleDaemon';
 import ModalUpgrade from 'modal/modalUpgrade';
 import ModalDownloading from 'modal/modalDownloading';
+import LoadScreen from './internal/load-screen';
 
 type Props = {
   checkDaemonVersion: () => Promise<any>,
   notifyUnlockWallet: () => Promise<any>,
+  daemonVersionMatched: boolean,
+  onReadyToLaunch: () => void,
   notification: ?{
     id: string,
   },
@@ -18,7 +22,6 @@ type State = {
   details: string,
   message: string,
   isRunning: boolean,
-  isLagging: boolean,
   launchedModal: boolean,
 };
 
@@ -30,31 +33,56 @@ export class SplashScreen extends React.PureComponent<Props, State> {
       details: __('Starting daemon'),
       message: __('Connecting'),
       isRunning: false,
-      isLagging: false,
       launchedModal: false,
     };
   }
 
+  componentDidMount() {
+    const { checkDaemonVersion } = this.props;
+
+    Lbry.connect()
+      .then(checkDaemonVersion)
+      .then(() => {
+        this.updateStatus();
+      })
+      .catch(() => {
+        this.setState({
+          message: __('Connection Failure'),
+          details: __(
+            'Try closing all LBRY processes and starting again. If this still happens, your anti-virus software or firewall may be preventing LBRY from connecting. Contact hello@lbry.io if you think this is a software bug.'
+          ),
+        });
+      });
+  }
+
   updateStatus() {
     Lbry.status().then(status => {
-      this._updateStatusCallback(status);
+      this.updateStatusCallback(status);
     });
   }
 
-  _updateStatusCallback(status) {
+  updateStatusCallback(status) {
     const { notifyUnlockWallet } = this.props;
     const { launchedModal } = this.state;
+    if (!status.wallet.is_unlocked) {
+      this.setState({
+        message: __('Unlock Wallet'),
+        details: __('Please unlock your wallet to proceed.'),
+        isRunning: true,
+      });
+    
+      if (launchedModal === false) {
+        this.setState({ launchedModal: true }, () => notifyUnlockWallet());
+      }
+      return;
+    }
 
-    const startupStatus = status.startup_status;
-    if (startupStatus.code === 'started') {
+    if (status.is_running) {
       // Wait until we are able to resolve a name before declaring
       // that we are done.
       // TODO: This is a hack, and the logic should live in the daemon
       // to give us a better sense of when we are actually started
       this.setState({
-        message: __('Testing Network'),
-        details: __('Waiting for name resolution'),
-        isLagging: false,
         isRunning: true,
       });
 
@@ -69,30 +97,28 @@ export class SplashScreen extends React.PureComponent<Props, State> {
       return;
     }
 
-    if (status.blockchain_status && status.blockchain_status.blocks_behind > 0) {
-      const format =
-        status.blockchain_status.blocks_behind == 1 ? '%s block behind' : '%s blocks behind';
+    if (status.blockchain_headers && status.blockchain_headers.download_progress < 100) {
       this.setState({
         message: __('Blockchain Sync'),
-        details: __(format, status.blockchain_status.blocks_behind),
-        isLagging: startupStatus.is_lagging,
+        details: `${__('Catching up with the blockchain')} (${
+          status.blockchain_headers.download_progress
+        }%)`,
       });
-    } else if (startupStatus.code === 'waiting_for_wallet_unlock') {
+    } else if (status.wallet && status.wallet.blocks_behind > 0) {
+      const format = status.wallet.blocks_behind === 1 ? '%s block behind' : '%s blocks behind';
       this.setState({
-        message: __('Unlock Wallet'),
-        details: __('Please unlock your wallet to proceed.'),
-        isLagging: false,
-        isRunning: true,
+        message: __('Blockchain Sync'),
+        details: __(format, status.wallet.blocks_behind),
       });
-
-      if (launchedModal === false) {
-        this.setState({ launchedModal: true }, () => notifyUnlockWallet());
-      }
-    } else {
+    } else if (
+      status.blockchain_headers &&
+      status.blockchain_headers.download_progress === 100 &&
+      status.wallet &&
+      status.wallet.blocks_behind === 0
+    ) {
       this.setState({
-        message: __('Network Loading'),
-        details: startupStatus.message + (startupStatus.is_lagging ? '' : '...'),
-        isLagging: startupStatus.is_lagging,
+        message: 'Network Loading',
+        details: 'Initializing LBRY service...',
       });
     }
     setTimeout(() => {
@@ -100,34 +126,16 @@ export class SplashScreen extends React.PureComponent<Props, State> {
     }, 500);
   }
 
-  componentDidMount() {
-    const { checkDaemonVersion } = this.props;
-
-    Lbry.connect()
-      .then(checkDaemonVersion)
-      .then(() => {
-        this.updateStatus();
-      })
-      .catch(() => {
-        this.setState({
-          isLagging: true,
-          message: __('Connection Failure'),
-          details: __(
-            'Try closing all LBRY processes and starting again. If this still happens, your anti-virus software or firewall may be preventing LBRY from connecting. Contact hello@lbry.io if you think this is a software bug.'
-          ),
-        });
-      });
-  }
-
   render() {
     const { notification } = this.props;
-    const { message, details, isLagging, isRunning } = this.state;
+    const { message, details, isRunning } = this.state;
 
     const notificationId = notification && notification.id;
 
+    // {notificationId === MODALS.WALLET_UNLOCK && <ModalWalletUnlock />}
     return (
       <React.Fragment>
-        <LoadScreen message={message} details={details} isWarning={isLagging} />
+        <LoadScreen message={message} details={details} />
         {/* Temp hack: don't show any modals on splash screen daemon is running;
             daemon doesn't let you quit during startup, so the "Quit" buttons
             in the modals won't work. */}

src/renderer/scss/component/_spinner.scss

@@ -42,6 +42,14 @@
   }
 }
 
+.spinner--splash {
+  margin-top: $spacing-vertical;
+
+  .rect {
+    background-color: var(--color-white);
+  }
+}
+
 @keyframes sk-stretchdelay {
   0%,
   40%,