[DDW-1042]: Implement network splash screen (#1655)

* [DDW-1042]: Initial Network splash screen component

* [DDW-1042]: Implement network splash screen

* [DDW-1042]: Add network splash screen story

* [DDW-1042]: Add network splash screen japanese translations

* [DDW-1042]: Fix fonts on network splash screen

* [DDW-1042]: Fix network splash screen story

* [DDW-1042] Adds CHANGELOG entry

* [DDW-1042]: Fix splash variable name and function call hander

* [DDW-1042]: Hide network splash in test env

* [DDW-1042]: Apply max height limitation on network splash description

* [DDW-1042]: Update theme variables on network splash screen

CHANGELOG.md

@@ -5,6 +5,7 @@ Changelog
 
 ### Features
 
+- Implemented "Network info" overlay ([PR 1655](https://github.com/input-output-hk/daedalus/pull/1655))
 - Disable "Manual update" notification for Incentivized Testnet version of Daedalus ([PR 1652](https://github.com/input-output-hk/daedalus/pull/1652))
 - Update rewards screen for incentivized testnet ([PR 1643](https://github.com/input-output-hk/daedalus/pull/1643))
 - Implement restoration of both 12 and 15 mnemonic words phrases in Wallet Restore dialog ([PR 1629](https://github.com/input-output-hk/daedalus/pull/1629))

source/renderer/app/actions/network-status-actions.js

@@ -8,4 +8,5 @@ export default class NetworkStatusActions {
   tlsConfigIsReady: Action<any> = new Action();
   restartNode: Action<any> = new Action();
   nodeImplementationUpdate: Action<any> = new Action();
+  toggleSplash: Action<any> = new Action();
 }

source/renderer/app/components/sidebar/Sidebar.js

@@ -24,6 +24,7 @@ type Props = {
   onActivateCategory: Function,
   onOpenDialog: Function,
   onAddWallet: Function,
+  onOpenSplashNetwork?: Function,
   isIncentivizedTestnet: boolean,
 };
 
@@ -41,6 +42,7 @@ export type SidebarMenus = ?{
 export default class Sidebar extends Component<Props> {
   static defaultProps = {
     isShowingSubMenus: false,
+    onOpenSplashNetwork: () => null,
   };
 
   render() {
@@ -118,11 +120,17 @@ export default class Sidebar extends Component<Props> {
   };
 
   handleClick = (categoryRoute: string) => {
-    const { onActivateCategory, onOpenDialog } = this.props;
+    const {
+      onActivateCategory,
+      onOpenDialog,
+      onOpenSplashNetwork,
+    } = this.props;
     if (categoryRoute === ROUTES.PAPER_WALLET_CREATE_CERTIFICATE) {
       onOpenDialog(InstructionsDialog);
     } else if (categoryRoute === ROUTES.NETWORK_INFO) {
-      // TODO: waiting for the Network Info screen to be done
+      if (onOpenSplashNetwork) {
+        onOpenSplashNetwork();
+      }
     } else {
       onActivateCategory(categoryRoute);
     }

source/renderer/app/components/splash/Network.js

@@ -0,0 +1,101 @@
+// @flow
+import React, { Component } from 'react';
+import { defineMessages, intlShape, FormattedHTMLMessage } from 'react-intl';
+import SVGInline from 'react-svg-inline';
+import { Button } from 'react-polymorph/lib/components/Button';
+import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
+import backgroundImage from '../../assets/images/splash-network-bg-faded.inline.svg';
+import daedalusIcon from '../../assets/images/daedalus-logo-loading-grey.inline.svg';
+import externalLinkIcon from '../../assets/images/link-ic.inline.svg';
+import styles from './Network.scss';
+
+const messages = defineMessages({
+  title: {
+    id: 'static.splash.network.title',
+    defaultMessage: '!!!Daedalus',
+    description: 'Daedalus',
+  },
+  incentivizedTestnet: {
+    id: 'static.splash.network.incentivizedTestnet',
+    defaultMessage: '!!!Incentivized Testnet',
+    description: 'Incentivized Testnet',
+  },
+  balanceCheck: {
+    id: 'static.splash.network.balanceCheck',
+    defaultMessage: '!!!Balance Check',
+    description: 'Balance Check',
+  },
+  incentivizedTestnetDescription: {
+    id: 'static.splash.network.incentivizedTestnetDescription',
+    defaultMessage:
+      '!!!This version of Daedalus has been created specifically for the balance check, the first stage in the roll-out of the Incentivized Testnet. It is not compatible with the Cardano mainnet. The balance check is a practice run for the official balance snapshot that is currently planned for later in November. This initial test will allow us to test core functionality, while enabling users to validate that the value of their mainnet ada balances is accurately captured ahead of the Incentivized Testnet.',
+    description:
+      'This version of Daedalus has been created specifically for the balance check, the first stage in the roll-out of the Incentivized Testnet. It is not compatible with the Cardano mainnet. The balance check is a practice run for the official balance snapshot that is currently planned for later in November. This initial test will allow us to test core functionality, while enabling users to validate that the value of their mainnet ada balances is accurately captured ahead of the Incentivized Testnet.',
+  },
+  actionLabel: {
+    id: 'static.splash.network.actionLabel',
+    defaultMessage: '!!!I understand',
+    description: 'I understand',
+  },
+  learnMore: {
+    id: 'static.splash.network.learnMore',
+    defaultMessage: '!!!Learn more',
+    description: 'Learn more',
+  },
+});
+
+type Props = {
+  isIncentivizedTestnet: boolean,
+  onClose: Function,
+  onLearnMoreClick: Function,
+};
+
+export default class SplashNetwork extends Component<Props> {
+  static contextTypes = {
+    intl: intlShape.isRequired,
+  };
+
+  render() {
+    const { intl } = this.context;
+    const { isIncentivizedTestnet, onClose, onLearnMoreClick } = this.props;
+    const title = intl.formatMessage(messages.title);
+    const subTitle1 = intl.formatMessage(messages.incentivizedTestnet);
+    const subTitle2 = intl.formatMessage(messages.balanceCheck);
+    const description = (
+      <FormattedHTMLMessage {...messages.incentivizedTestnetDescription} />
+    );
+    const actionLabel = intl.formatMessage(messages.actionLabel);
+
+    return (
+      <div className={styles.component}>
+        <div className={styles.backgroundContainer}>
+          {isIncentivizedTestnet && (
+            <>
+              <div className={styles.backgroundOverlay} />
+              <SVGInline
+                svg={backgroundImage}
+                className={styles.backgroundImage}
+              />
+            </>
+          )}
+        </div>
+        <div className={styles.content}>
+          <SVGInline svg={daedalusIcon} className={styles.daedalusIcon} />
+          <div className={styles.title}>{title}</div>
+          <div className={styles.subTitle1}>{subTitle1}</div>
+          <div className={styles.subTitle2}>{subTitle2}</div>
+          <div className={styles.description}>{description}</div>
+          <div className={styles.action}>
+            <Button label={actionLabel} onClick={onClose} skin={ButtonSkin} />
+          </div>
+          <div className={styles.learnMore}>
+            <button onClick={onLearnMoreClick}>
+              {intl.formatMessage(messages.learnMore)}
+              <SVGInline svg={externalLinkIcon} />
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

source/renderer/app/components/splash/Network.scss

@@ -0,0 +1,169 @@
+@import '../../themes/mixins/link';
+
+.component {
+  height: 100%;
+  padding: 16px;
+  position: relative;
+  width: 100%;
+
+  .backgroundContainer {
+    background-color: var(--theme-splash-network-background-color);
+    height: 100%;
+    left: 0;
+    object-fit: contain;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: 1000;
+
+    .backgroundOverlay {
+      background-image: linear-gradient(
+        0deg,
+        var(--theme-splash-network-background-color1) 0%,
+        var(--theme-splash-network-background-color2) 10%,
+        var(--theme-splash-network-background-color3) 16%,
+        var(--theme-splash-network-background-color4) 20%,
+        var(--theme-splash-network-background-color5) 80%,
+        var(--theme-splash-network-background-color6) 84%,
+        var(--theme-splash-network-background-color7) 90%,
+        var(--theme-splash-network-background-color8) 100%
+      );
+      height: 100%;
+      position: absolute;
+      width: 100%;
+      z-index: 1500;
+    }
+
+    .backgroundImage {
+      display: block;
+      height: 100%;
+      opacity: 0.1;
+      position: relative;
+      width: 100%;
+
+      & > svg {
+        display: block;
+        left: 50%;
+        position: absolute;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 1186px;
+      }
+    }
+  }
+
+  .content {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    font-family: var(--font-regular);
+    height: 100%;
+    justify-content: center;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: 2000;
+
+    .daedalusIcon {
+      height: 135px;
+      object-fit: contain;
+      width: 173px;
+
+      svg {
+        path {
+          fill: var(--theme-splash-network-logo-fill-color);
+        }
+      }
+    }
+    .title {
+      color: var(--theme-splash-network-title-color);
+      font-size: 20px;
+      font-weight: 600;
+      line-height: 1.2;
+      letter-spacing: 1px;
+      margin-bottom: 5px;
+      margin-top: 30px;
+      text-transform: uppercase;
+    }
+    .subTitle1 {
+      color: var(--theme-splash-network-subTitle1-color);
+      font-size: 20px;
+      font-weight: 600;
+      letter-spacing: 1px;
+      line-height: 1.2;
+      margin-bottom: 5px;
+      text-transform: uppercase;
+    }
+    .subTitle2 {
+      color: var(--theme-splash-network-subTitle2-color);
+      font-size: 16px;
+      font-weight: 600;
+      letter-spacing: 0.8px;
+      line-height: 1.38;
+      margin-bottom: 20px;
+      text-transform: uppercase;
+    }
+    .description {
+      background-color: var(
+        --theme-splash-network-description-background-color
+      );
+      border-radius: 4px;
+      color: var(--theme-splash-network-description-color);
+      font-size: 14px;
+      line-height: 1.43;
+      margin-bottom: 30px;
+      max-height: 190px;
+      max-width: 608px;
+      overflow-y: scroll;
+      padding: 12px 24px;
+
+      p {
+        margin-bottom: 12px;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+    .action {
+      button {
+        min-height: 50px;
+      }
+    }
+    .learnMore {
+      margin-top: 20px;
+
+      button {
+        align-items: center;
+        border-bottom: 1px solid var(--theme-splash-network-learn-more-color);
+        color: var(--theme-splash-network-learn-more-color);
+        cursor: pointer;
+        display: flex;
+        font-size: 14px;
+        line-height: 1.36;
+        opacity: 0.8;
+        padding-bottom: 1px;
+
+        :global {
+          .SVGInline {
+            height: 15px;
+          }
+        }
+
+        svg {
+          height: 13px;
+          margin-left: 2px;
+          object-fit: contain;
+          width: 13px;
+
+          & > g {
+            fill: transparent;
+            stroke: var(--theme-splash-network-learn-more-color);
+          }
+        }
+      }
+    }
+  }
+}

source/renderer/app/containers/MainLayout.js

@@ -60,6 +60,7 @@ export default class MainLayout extends Component<InjectedContainerProps> {
         onSubmitSupportRequest={() =>
           actions.router.goToRoute.trigger({ route: ROUTES.SETTINGS.SUPPORT })
         }
+        onOpenSplashNetwork={() => actions.networkStatus.toggleSplash.trigger()}
         pathname={this.props.stores.router.location.pathname}
         currentTheme={currentTheme}
         network={network}

source/renderer/app/containers/Root.js

@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import { inject, observer } from 'mobx-react';
 import WalletAddPage from './wallet/WalletAddPage';
 import LoadingPage from './loading/LoadingPage';
+import SplashNetworkPage from './splash/NetworkPage';
 import type { InjectedContainerProps } from '../types/injectedPropsType';
 
 type Props = InjectedContainerProps;
@@ -12,7 +13,7 @@ type Props = InjectedContainerProps;
 export default class Root extends Component<Props> {
   render() {
     const { stores, actions, children } = this.props;
-    const { networkStatus, profile, wallets, staking } = stores;
+    const { app, networkStatus, profile, wallets, staking } = stores;
     const { isStakingPage } = staking;
     const { isProfilePage, isSettingsPage } = profile;
     const { hasLoadedWallets } = wallets;
@@ -32,6 +33,14 @@ export default class Root extends Component<Props> {
     // for all the screens except of the "Network status" screen.
     const isNodeInStoppingSequence = isNodeStopping || isNodeStopped;
 
+    if (
+      !app.isSetupPage &&
+      !app.environment.isTest &&
+      networkStatus.isSplashShown
+    ) {
+      return <SplashNetworkPage />;
+    }
+
     // Just render any page that doesn't require wallets to be loaded or node to be connected
     if (
       (isPageThatDoesntNeedWallets && !isNodeInStoppingSequence) ||