[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

View on GitHub
File Changes
m
+1/-0

                      
### 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))
  tlsConfigIsReady: Action<any> = new Action();
  restartNode: Action<any> = new Action();
  nodeImplementationUpdate: Action<any> = new Action();
+
  toggleSplash: Action<any> = new Action();
}
  onActivateCategory: Function,
  onOpenDialog: Function,
  onAddWallet: Function,
+
  onOpenSplashNetwork?: Function,
  isIncentivizedTestnet: boolean,
};

                      
export default class Sidebar extends Component<Props> {
  static defaultProps = {
    isShowingSubMenus: false,
+
    onOpenSplashNetwork: () => null,
  };

                      
  render() {
  };

                      
  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);
    }
+
// @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>
+
    );
+
  }
+
}
+
@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);
+
          }
+
        }
+
      }
+
    }
+
  }
+
}
        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}
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;
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;
    // 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) ||
+
// @flow
+
import React, { Component } from 'react';
+
import { observer, inject } from 'mobx-react';
+
import { defineMessages, intlShape } from 'react-intl';
+
import type { InjectedProps } from '../../types/injectedPropsType';
+
import SplashNetwork from '../../components/splash/Network';
+

                      
+
const messages = defineMessages({
+
  learnMoreLinkUrl: {
+
    id: 'static.splash.network.learnMore.linkUrl',
+
    defaultMessage: '!!!http://staking.cardano.org/',
+
    description: '"Learn more" link URL on the network splash screen',
+
  },
+
});
+

                      
+
type Props = InjectedProps;
+

                      
+
@inject('stores', 'actions')
+
@observer
+
export default class SplashNetworkPage extends Component<Props> {
+
  static contextTypes = {
+
    intl: intlShape.isRequired,
+
  };
+

                      
+
  static defaultProps = { actions: null, stores: {} };
+

                      
+
  handleLearnMoreClick = () => {
+
    const { intl } = this.context;
+
    const { stores } = this.props;
+
    const learnMoreLinkUrl = intl.formatMessage(messages.learnMoreLinkUrl);
+

                      
+
    stores.app.openExternalLink(learnMoreLinkUrl);
+
  };
+

                      
+
  render() {
+
    const { networkStatus: networkStatusActions } = this.props.actions;
+
    const { networkStatus: networkStatusStore } = this.props.stores;
+

                      
+
    return (
+
      <SplashNetwork
+
        isIncentivizedTestnet={networkStatusStore.isIncentivizedTestnet}
+
        onClose={() => networkStatusActions.toggleSplash.trigger()}
+
        onLearnMoreClick={this.handleLearnMoreClick}
+
      />
+
    );
+
  }
+
}
  "static.about.copyright": "!!!Input Output HK Limited. Licensed under",
  "static.about.license": "!!!MIT licence",
  "static.about.title": "!!!Daedalus",
+
  "static.splash.network.actionLabel": "!!!I understand",
+
  "static.splash.network.balanceCheck": "!!!Balance Check",
+
  "static.splash.network.incentivizedTestnet": "!!!Incentivized Testnet",
+
  "static.splash.network.incentivizedTestnetDescription": "!!!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.",
+
  "static.splash.network.learnMore": "!!!Learn more",
+
  "static.splash.network.learnMore.linkUrl": "!!!http://staking.cardano.org/",
+
  "static.splash.network.title": "!!!Daedalus",
  "status.icons.checkYourInternetConnection": "!!!Check your Internet connection!",
  "status.icons.isNodeRespondingLoading": "!!!Checking if Node is responding!",
  "status.icons.isNodeRespondingOff": "!!!Node is not responding!",
    ],
    "path": "source/renderer/app/components/sidebar/wallets/SidebarWalletsMenu.json"
  },
+
  {
+
    "descriptors": [
+
      {
+
        "defaultMessage": "!!!Daedalus",
+
        "description": "Daedalus",
+
        "end": {
+
          "column": 3,
+
          "line": 17
+
        },
+
        "file": "source/renderer/app/components/splash/Network.js",
+
        "id": "static.splash.network.title",
+
        "start": {
+
          "column": 9,
+
          "line": 13
+
        }
+
      },
+
      {
+
        "defaultMessage": "!!!Incentivized Testnet",
+
        "description": "Incentivized Testnet",
+
        "end": {
+
          "column": 3,
+
          "line": 22
+
        },
+
        "file": "source/renderer/app/components/splash/Network.js",
+
        "id": "static.splash.network.incentivizedTestnet",
+
        "start": {
+
          "column": 23,
+
          "line": 18
+
        }
+
      },
+
      {
+
        "defaultMessage": "!!!Balance Check",
+
        "description": "Balance Check",
+
        "end": {
+
          "column": 3,
+
          "line": 27
+
        },
+
        "file": "source/renderer/app/components/splash/Network.js",
+
        "id": "static.splash.network.balanceCheck",
+
        "start": {
+
          "column": 16,
+
          "line": 23
+
        }
+
      },
+
      {
+
        "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.",
+
        "end": {
+
          "column": 3,
+
          "line": 34
+
        },
+
        "file": "source/renderer/app/components/splash/Network.js",
+
        "id": "static.splash.network.incentivizedTestnetDescription",
+
        "start": {
+
          "column": 34,
+
          "line": 28
+
        }
+
      },
+
      {
+
        "defaultMessage": "!!!I understand",
+
        "description": "I understand",
+
        "end": {
+
          "column": 3,
+
          "line": 39
+
        },
+
        "file": "source/renderer/app/components/splash/Network.js",
+
        "id": "static.splash.network.actionLabel",
+
        "start": {
+
          "column": 15,
+
          "line": 35
+
        }
+
      },
+
      {
+
        "defaultMessage": "!!!Learn more",
+
        "description": "Learn more",
+
        "end": {
+
          "column": 3,
+
          "line": 44
+
        },
+
        "file": "source/renderer/app/components/splash/Network.js",
+
        "id": "static.splash.network.learnMore",
+
        "start": {
+
          "column": 13,
+
          "line": 40
+
        }
+
      }
+
    ],
+
    "path": "source/renderer/app/components/splash/Network.json"
+
  },
  {
    "descriptors": [
      {
    ],
    "path": "source/renderer/app/containers/settings/categories/SupportSettingsPage.json"
  },
+
  {
+
    "descriptors": [
+
      {
+
        "defaultMessage": "!!!http://staking.cardano.org/",
+
        "description": "\"Learn more\" link URL on the network splash screen",
+
        "end": {
+
          "column": 3,
+
          "line": 13
+
        },
+
        "file": "source/renderer/app/containers/splash/NetworkPage.js",
+
        "id": "static.splash.network.learnMore.linkUrl",
+
        "start": {
+
          "column": 20,
+
          "line": 9
+
        }
+
      }
+
    ],
+
    "path": "source/renderer/app/containers/splash/NetworkPage.json"
+
  },
  {
    "descriptors": [
      {
  "static.about.copyright": "Input Output HK Limited. Licensed under",
  "static.about.license": "Apache 2.0 license",
  "static.about.title": "Daedalus",
+
  "static.splash.network.actionLabel": "I understand",
+
  "static.splash.network.balanceCheck": "Balance Check",
+
  "static.splash.network.incentivizedTestnet": "Incentivized Testnet",
+
  "static.splash.network.incentivizedTestnetDescription": "<p>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.</p><p>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.</p>",
+
  "static.splash.network.learnMore": "Learn more",
+
  "static.splash.network.learnMore.linkUrl": "https://staking.cardano.org/en/",
+
  "static.splash.network.title": "Daedalus",
  "status.icons.checkYourInternetConnection": "Check your <b>Internet connection</b>",
  "status.icons.isNodeRespondingLoading": "Checking if Node is <b>responding</b>",
  "status.icons.isNodeRespondingOff": "Node <b>is not responding</b>",
  "static.about.copyright": "!!!Input Output HK Limited. Licensed under",
  "static.about.license": "!!!MIT licence",
  "static.about.title": "!!!Daedalus",
+
  "static.splash.network.actionLabel": "!!!I understand",
+
  "static.splash.network.balanceCheck": "!!!Balance Check",
+
  "static.splash.network.incentivizedTestnet": "!!!Incentivized Testnet",
+
  "static.splash.network.incentivizedTestnetDescription": "!!!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.",
+
  "static.splash.network.learnMore": "!!!Learn more",
+
  "static.splash.network.learnMore.linkUrl": "!!!http://staking.cardano.org/",
+
  "static.splash.network.title": "!!!Daedalus",
  "status.icons.checkYourInternetConnection": "!!!Check your Internet connection!",
  "status.icons.isNodeRespondingLoading": "!!!Checking if Node is responding!",
  "status.icons.isNodeRespondingOff": "!!!Node is not responding!",
  "static.about.copyright": "Input Output HK Limited. Licensed under",
  "static.about.license": "Apache 2.0 license",
  "static.about.title": "Daedalus",
+
  "static.splash.network.actionLabel": "了解した",
+
  "static.splash.network.balanceCheck": "模擬スナップショット",
+
  "static.splash.network.incentivizedTestnet": "インセンティブ付きテストネット",
+
  "static.splash.network.incentivizedTestnetDescription": "<p>Daedalusの本バージョンは、インセンティブ付きテストネット公開の第一段階である模擬スナップショット専用に作成されました。したがって、Cardanoメインネットとの互換性はありません。</p><p>模擬スナップショットは当面11月後半に予定されている公式の残高スナップショットに向けたリハーサルとなります。この初回テストにより鍵となる機能がテストできると同時に、ユーザーはインセンティブ付きテストネットに先立ち、メインネットのADA残高が正確にキャプチャーされるかを検証することができます。</p>",
+
  "static.splash.network.learnMore": "もっと知る",
+
  "static.splash.network.learnMore.linkUrl": "https://staking.cardano.org/ja/",
+
  "static.splash.network.title": "Daedalus",
  "status.icons.checkYourInternetConnection": "インターネット接続を確認してください。",
  "status.icons.isNodeRespondingLoading": "ノードが<b>応答しているかどうか</b>確認しています。",
  "status.icons.isNodeRespondingOff": "ノードが<b>応答していません。</b>",
  "static.about.copyright": "!!!Input Output HK Limited. Licensed under",
  "static.about.license": "!!!MIT licence",
  "static.about.title": "!!!Daedalus",
+
  "static.splash.network.actionLabel": "!!!I understand",
+
  "static.splash.network.balanceCheck": "!!!Balance Check",
+
  "static.splash.network.incentivizedTestnet": "!!!Incentivized Testnet",
+
  "static.splash.network.incentivizedTestnetDescription": "!!!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.",
+
  "static.splash.network.learnMore": "!!!Learn more",
+
  "static.splash.network.learnMore.linkUrl": "!!!http://staking.cardano.org/",
+
  "static.splash.network.title": "!!!Daedalus",
  "status.icons.checkYourInternetConnection": "!!!Check your Internet connection!",
  "status.icons.isNodeRespondingLoading": "!!!Checking if Node is responding!",
  "status.icons.isNodeRespondingOff": "!!!Node is not responding!",
  "static.about.copyright": "!!!Input Output HK Limited. Licensed under",
  "static.about.license": "!!!MIT licence",
  "static.about.title": "!!!Daedalus",
+
  "static.splash.network.actionLabel": "!!!I understand",
+
  "static.splash.network.balanceCheck": "!!!Balance Check",
+
  "static.splash.network.incentivizedTestnet": "!!!Incentivized Testnet",
+
  "static.splash.network.incentivizedTestnetDescription": "!!!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.",
+
  "static.splash.network.learnMore": "!!!Learn more",
+
  "static.splash.network.learnMore.linkUrl": "!!!http://staking.cardano.org/",
+
  "static.splash.network.title": "!!!Daedalus",
  "status.icons.checkYourInternetConnection": "!!!Check your Internet connection!",
  "status.icons.isNodeRespondingLoading": "!!!Checking if Node is responding!",
  "status.icons.isNodeRespondingOff": "!!!Node is not responding!",
  @observable isNodeStopped = false; // 'true' if node is in `NODE_STOPPED_STATES` states
  @observable isNodeTimeCorrect = true; // Is 'true' in case local and global time are in sync
  @observable isSystemTimeIgnored = false; // Tracks if NTP time checks are ignored
+
  @observable isSplashShown = true; // Visibility of splash screen

                      
  @observable hasBeenConnected = false;
  @observable syncProgress = null;
    // ========== IPC CHANNELS =========== //

                      
    this.actions.networkStatus.restartNode.listen(this._restartNode);
+
    this.actions.networkStatus.toggleSplash.listen(this._toggleSplash);

                      
    // Request node state
    this._requestCardanoState();
    }
  };

                      
+
  @action _toggleSplash = () => {
+
    runInAction('Toggle splash visibility', () => {
+
      this.isSplashShown = !this.isSplashShown;
+
    });
+
  };
+

                      
  teardown() {
    super.teardown();

                      
    '--theme-sidebar-category-networkInfo-background-color': '#eb2256',
    '--theme-sidebar-category-networkInfo-text-color': '#121326',
  },
+
  splash: {
+
    '--theme-splash-network-background-color': 'rgba(32, 34, 37, 0.96)',
+
    '--theme-splash-network-background-color1': 'rgba(18, 19, 38, 1)',
+
    '--theme-splash-network-background-color2': 'rgba(18, 19, 38, 0.91)',
+
    '--theme-splash-network-background-color3': 'rgba(18, 19, 38, 0.31)',
+
    '--theme-splash-network-background-color4': 'rgba(18, 19, 38, 0)',
+
    '--theme-splash-network-background-color5': 'rgba(0, 0, 0, 0)',
+
    '--theme-splash-network-background-color6': 'rgba(18, 19, 38, 0.31)',
+
    '--theme-splash-network-background-color7': 'rgba(18, 19, 38, 0.91)',
+
    '--theme-splash-network-background-color8': 'rgba(18, 19, 38, 1)',
+
    '--theme-splash-network-logo-fill-color': '#fff',
+
    '--theme-splash-network-title-color': '#fff',
+
    '--theme-splash-network-subTitle1-color': 'rgba(255, 255, 255, 0.5)',
+
    '--theme-splash-network-subTitle2-color': 'rgba(255, 255, 255, 0.5)',
+
    '--theme-splash-network-description-background-color': 'rgba(0, 0, 0, 0.1)',
+
    '--theme-splash-network-description-color': 'rgba(255, 255, 255, 0.7)',
+
    '--theme-splash-network-learn-more-color': '#fff',
+
  },
  stakePools: {
    '--theme-staking-stake-pool-background-color': '#fafbfc',
    '--theme-staking-stake-pool-border-color': '#c6cdd6',
    '--theme-sidebar-category-networkInfo-background-color': '#eb2256',
    '--theme-sidebar-category-networkInfo-text-color': '#121326',
  },
+
  splash: {
+
    '--theme-splash-network-background-color': 'rgba(38, 51, 69, 0.96)',
+
    '--theme-splash-network-background-color1': 'rgba(18, 19, 38, 1)',
+
    '--theme-splash-network-background-color2': 'rgba(18, 19, 38, 0.91)',
+
    '--theme-splash-network-background-color3': 'rgba(18, 19, 38, 0.31)',
+
    '--theme-splash-network-background-color4': 'rgba(18, 19, 38, 0)',
+
    '--theme-splash-network-background-color5': 'rgba(0, 0, 0, 0)',
+
    '--theme-splash-network-background-color6': 'rgba(18, 19, 38, 0.31)',
+
    '--theme-splash-network-background-color7': 'rgba(18, 19, 38, 0.91)',
+
    '--theme-splash-network-background-color8': 'rgba(18, 19, 38, 1)',
+
    '--theme-splash-network-logo-fill-color': '#e9f4fe',
+
    '--theme-splash-network-title-color': '#e9f4fe',
+
    '--theme-splash-network-subTitle1-color': 'rgba(233, 244, 254, 0.5)',
+
    '--theme-splash-network-subTitle2-color': 'rgba(233, 244, 254, 0.5)',
+
    '--theme-splash-network-description-background-color': 'rgba(0, 0, 0, 0.1)',
+
    '--theme-splash-network-description-color': 'rgba(233, 244, 254, 0.7)',
+
    '--theme-splash-network-learn-more-color': '#e9f4fe',
+
  },
  stakePools: {
    '--theme-staking-stake-pool-background-color': '#263345',
    '--theme-staking-stake-pool-border-color': '#263345',
    '--theme-sidebar-category-networkInfo-background-color': '#eb2256',
    '--theme-sidebar-category-networkInfo-text-color': '#121326',
  },
+
  splash: {
+
    '--theme-splash-network-background-color': 'rgba(42, 43, 60, 0.96)',
+
    '--theme-splash-network-background-color1': 'rgba(18, 19, 38, 1)',
+
    '--theme-splash-network-background-color2': 'rgba(18, 19, 38, 0.91)',
+
    '--theme-splash-network-background-color3': 'rgba(18, 19, 38, 0.31)',
+
    '--theme-splash-network-background-color4': 'rgba(18, 19, 38, 0)',
+
    '--theme-splash-network-background-color5': 'rgba(0, 0, 0, 0)',
+
    '--theme-splash-network-background-color6': 'rgba(18, 19, 38, 0.31)',
+
    '--theme-splash-network-background-color7': 'rgba(18, 19, 38, 0.91)',
+
    '--theme-splash-network-background-color8': 'rgba(18, 19, 38, 1)',
+
    '--theme-splash-network-logo-fill-color': '#fff',
+
    '--theme-splash-network-title-color': '#fff',
+
    '--theme-splash-network-subTitle1-color': 'rgba(255, 255, 255, 0.5)',
+
    '--theme-splash-network-subTitle2-color': 'rgba(255, 255, 255, 0.5)',
+
    '--theme-splash-network-description-background-color': 'rgba(0, 0, 0, 0.1)',
+
    '--theme-splash-network-description-color': 'rgba(255, 255, 255, 0.7)',
+
    '--theme-splash-network-learn-more-color': '#fff',
+
  },
  stakePools: {
    '--theme-staking-stake-pools-title-color': '#ffffff',
    '--theme-staking-stake-pools-search-button-color': '#ffffff',
Diff too large – View on GitHub