[DDW-64] Handle non-responding wallets

CHANGELOG.md

@@ -5,6 +5,7 @@ Changelog
 
 ### Features
 
+- Implemented non-responding wallets handling ([PR 1901](https://github.com/input-output-hk/daedalus/pull/1901))
 - Added support for building both `cardano-node` and `jormungandr` installers ([PR 1894](https://github.com/input-output-hk/daedalus/pull/1894))
 - Added support for `cardano-node` "Selfnode" network ([PR 1897](https://github.com/input-output-hk/daedalus/pull/1897))
 - Enabled Byron wallet creation for Haskell node builds ([PR 1895](https://github.com/input-output-hk/daedalus/pull/1895))

nix/sources.json

@@ -41,10 +41,10 @@
         "homepage": null,
         "owner": "input-output-hk",
         "repo": "cardano-wallet",
-        "rev": "3bd1eafc881dd7816ca30c6f3762804567575d12",
-        "sha256": "06sy54h1xv714ms4sksdbh3x1w8lil4z9i579wdc85c5dkj0sdc6",
+        "rev": "59f5f43b4b44f637d4bbfb5328b431861faa4401",
+        "sha256": "0imrrkgd0g5320k1wfwprlgfx9s2hqlh6cij3rqjyw3z1xgjfvcw",
         "type": "tarball",
-        "url": "https://github.com/input-output-hk/cardano-wallet/archive/3bd1eafc881dd7816ca30c6f3762804567575d12.tar.gz",
+        "url": "https://github.com/input-output-hk/cardano-wallet/archive/59f5f43b4b44f637d4bbfb5328b431861faa4401.tar.gz",
         "url_template": "https://github.com/<owner>/<repo>/archive/<rev>.tar.gz",
         "version": "v2020-03-16"
     },

source/renderer/app/api/api.js

@@ -1688,7 +1688,7 @@ export default class AdaApi {
   setTestingNewsFeed: (testingNewsFeedData: GetNewsResponse) => void;
   setTestingStakePools: (testingStakePoolsData: Array<StakePoolProps>) => void;
   setTestingWallets: (testingWalletsData: Array<WalletProps>) => void;
-  setTestingWallet: (testingWalletData: Object, walletIndex?: 0) => void;
+  setTestingWallet: (testingWalletData: Object, walletIndex?: number) => void;
 
   // Stake pools testing utility
   setFakeStakePoolsJsonForTesting: (
@@ -1707,9 +1707,9 @@ const _createWalletFromServerData = action(
       address_pool_gap: addressPoolGap,
       balance,
       name,
-      state,
       passphrase,
       delegation,
+      state: syncState,
       isLegacy = false,
     } = wallet;
 
@@ -1753,7 +1753,7 @@ const _createWalletFromServerData = action(
       reward: walletRewardAmount,
       passwordUpdateDate:
         passphraseLastUpdatedAt && new Date(passphraseLastUpdatedAt),
-      syncState: state,
+      syncState,
       isLegacy,
       delegatedStakePoolId,
       delegationStakePoolStatus,

source/renderer/app/api/wallets/types.js

@@ -71,7 +71,11 @@ export type WalletUnit = WalletUnits.LOVELACE | WalletUnits.ADA;
 
 export type AdaWallets = Array<AdaWallet>;
 
-export type SyncStateStatus = 'ready' | 'restoring' | 'syncing';
+export type SyncStateStatus =
+  | 'ready'
+  | 'restoring'
+  | 'syncing'
+  | 'not_responding';
 
 export type DelegationStatus = 'delegating' | 'not_delegating';
 

source/renderer/app/components/sidebar/wallets/SidebarWalletMenuItem.js

@@ -18,6 +18,7 @@ type Props = {
   isIncentivizedTestnet: boolean,
   restoreProgress?: number,
   isLegacy: boolean,
+  isNotResponding: boolean,
   recoveryPhraseVerificationStatus: string,
 };
 
@@ -34,6 +35,7 @@ export default class SidebarWalletMenuItem extends Component<Props> {
       isIncentivizedTestnet,
       restoreProgress,
       isLegacy,
+      isNotResponding,
       recoveryPhraseVerificationStatus,
     } = this.props;
 
@@ -47,6 +49,7 @@ export default class SidebarWalletMenuItem extends Component<Props> {
             `recoveryPhraseVerificationStatus-${recoveryPhraseVerificationStatus}`
           ]
         : null,
+      isNotResponding ? styles.notResponding : null,
     ]);
 
     return (

source/renderer/app/components/sidebar/wallets/SidebarWalletMenuItem.scss

@@ -33,6 +33,12 @@
   }
 }
 
+.notResponding {
+  .meta {
+    opacity: 0.5;
+  }
+}
+
 .active {
   background-color: var(--theme-sidebar-menu-item-background-color-active);
 

source/renderer/app/components/sidebar/wallets/SidebarWalletsMenu.js

@@ -74,6 +74,7 @@ export default class SidebarWalletsMenu extends Component<Props> {
                 isRestoreActive={wallet.isRestoreActive}
                 isIncentivizedTestnet={isIncentivizedTestnet}
                 restoreProgress={wallet.restoreProgress}
+                isNotResponding={wallet.isNotResponding}
                 isLegacy={wallet.isLegacy}
                 recoveryPhraseVerificationStatus={
                   wallet.recoveryPhraseVerificationStatus

source/renderer/app/components/wallet/layouts/WalletWithNavigation.js

@@ -4,14 +4,18 @@ import type { Node } from 'react';
 import { observer } from 'mobx-react';
 import WalletNavigation from '../navigation/WalletNavigation';
 import styles from './WalletWithNavigation.scss';
+import NotResponding from '../not-responding/NotResponding';
 
 type Props = {
   children?: Node,
   activeItem: string,
   isActiveScreen: Function,
   isLegacy: boolean,
   onWalletNavItemClick: Function,
+  onRestartNode: Function,
+  onOpenExternalLink: Function,
   hasNotification?: boolean,
+  isNotResponding: boolean,
 };
 
 @observer
@@ -24,9 +28,19 @@ export default class WalletWithNavigation extends Component<Props> {
       onWalletNavItemClick,
       activeItem,
       hasNotification,
+      isNotResponding,
+      onRestartNode,
+      onOpenExternalLink,
     } = this.props;
     return (
       <div className={styles.component}>
+        {isNotResponding && (
+          <NotResponding
+            walletName={activeItem}
+            onRestartNode={onRestartNode}
+            onOpenExternalLink={onOpenExternalLink}
+          />
+        )}
         <div className={styles.navigation}>
           <WalletNavigation
             isActiveNavItem={isActiveScreen}

source/renderer/app/components/wallet/not-responding/NotResponding.js

@@ -0,0 +1,90 @@
+// @flow
+import React, { Component } from 'react';
+import SVGInline from 'react-svg-inline';
+import { defineMessages, intlShape, FormattedHTMLMessage } from 'react-intl';
+import { Button } from 'react-polymorph/lib/components/Button';
+import { ButtonSkin } from 'react-polymorph/lib/skins/simple/ButtonSkin';
+import { Link } from 'react-polymorph/lib/components/Link';
+import { LinkSkin } from 'react-polymorph/lib/skins/simple/LinkSkin';
+import icon from '../../../assets/images/not-responding.inline.svg';
+import styles from './NotResponding.scss';
+
+type Props = {
+  walletName: string,
+  onRestartNode: Function,
+  onOpenExternalLink: Function,
+};
+
+const messages = defineMessages({
+  title: {
+    id: 'wallet.notResponding.title',
+    defaultMessage: '!!!The wallet is not responding.',
+    description: 'Title on the NotResponding dialog.',
+  },
+  description: {
+    id: 'wallet.notResponding.description',
+    defaultMessage:
+      '!!!The {walletName} wallet is not responding. This is caused by a known but rare issue, which is currently being fixed. Please restart the Cardano node by clicking the button below, which should resolve the issue. If the issue persists, or if it happens again, please submit a support request.',
+    description: 'Description on the NotResponding dialog.',
+  },
+  restartNodeButtonLabel: {
+    id: 'wallet.notResponding.restartNodeButtonLabel',
+    defaultMessage: '!!!Restart Cardano Node',
+    description: 'Restart Node Button Label on the NotResponding dialog.',
+  },
+  submitSupportRequestLabel: {
+    id: 'wallet.notResponding.submitSupportRequestLabel',
+    defaultMessage: '!!!Submit a support request',
+    description: 'Submit Support Request Label on the NotResponding dialog',
+  },
+  submitSupportRequestUrl: {
+    id: 'wallet.notResponding.submitSupportRequestUrl',
+    defaultMessage: '!!!https://iohk.zendesk.com/hc/en-us/requests/new/',
+    description: 'Submit Support Request Url on the NotResponding dialog',
+  },
+});
+
+export default class NotResponding extends Component<Props> {
+  static contextTypes = {
+    intl: intlShape.isRequired,
+  };
+
+  render() {
+    const { intl } = this.context;
+    const { walletName, onRestartNode, onOpenExternalLink } = this.props;
+    return (
+      <div className={styles.component}>
+        <div className={styles.content}>
+          <SVGInline svg={icon} className={styles.icon} />
+          <div className={styles.title}>
+            {intl.formatMessage(messages.title)}
+          </div>
+          <div className={styles.description}>
+            <FormattedHTMLMessage
+              {...messages.description}
+              values={{
+                walletName,
+              }}
+            />
+          </div>
+          <Button
+            className={styles.restartNodeButton}
+            label={intl.formatMessage(messages.restartNodeButtonLabel)}
+            onClick={onRestartNode}
+            skin={ButtonSkin}
+          />
+          <Link
+            className={styles.submitSupportLink}
+            onClick={() =>
+              onOpenExternalLink(
+                intl.formatMessage(messages.submitSupportRequestUrl)
+              )
+            }
+            label={intl.formatMessage(messages.submitSupportRequestLabel)}
+            skin={LinkSkin}
+          />
+        </div>
+      </div>
+    );
+  }
+}

source/renderer/app/components/wallet/not-responding/NotResponding.scss

@@ -0,0 +1,91 @@
+@import '../../../themes/mixins/link';
+
+.component {
+  background: var(--theme-wallet-not-responding-background-color);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: center;
+  position: absolute;
+  width: 100%;
+  z-index: 9;
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    margin: 0 auto;
+    text-align: center;
+    width: 618px;
+
+    .icon {
+      margin-bottom: 36px;
+      svg {
+        height: 73px;
+        width: 82px;
+        path,
+        circle {
+          stroke: var(--theme-wallet-not-responding-icon-color);
+        }
+        path:nth-child(4) {
+          fill: var(--theme-wallet-not-responding-icon-color);
+        }
+      }
+    }
+    .title {
+      color: var(--theme-wallet-not-responding-title-text-color);
+      font-family: var(--font-regular);
+      font-size: 20px;
+      line-height: 1.2;
+      margin-bottom: 16px;
+      text-align: center;
+    }
+    .description {
+      background-color: var(
+        --theme-wallet-not-responding-description-background-color
+      );
+      border-radius: 4px;
+      margin-bottom: 30px;
+      padding: 12px 24px;
+      text-align: left;
+      p {
+        color: var(--theme-wallet-not-responding-title-text-color);
+        font-family: var(--font-regular);
+        font-size: 14px;
+        line-height: 1.43;
+        margin-bottom: 10px;
+        opacity: 0.7;
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+    .restartNodeButton {
+      background-color: var(
+        --theme-wallet-not-responding-button-background-color
+      );
+      border: solid 1px var(--theme-wallet-not-responding-button-border-color);
+      color: var(--theme-wallet-not-responding-button-text-color);
+      font-weight: 500;
+      line-height: 1.36;
+      margin: 0 auto 20px;
+
+      &:hover {
+        background-color: var(
+          --theme-wallet-not-responding-button-background-color-hover
+        );
+        border: none;
+        color: var(--theme-wallet-not-responding-button-text-color-hover);
+      }
+    }
+    .submitSupportLink {
+      border-bottom: 1px solid
+        var(--theme-wallet-not-responding-link-text-color);
+      color: var(--theme-wallet-not-responding-link-text-color);
+      margin: 0 auto;
+      opacity: 0.8;
+      &:after {
+        background-color: var(--theme-wallet-not-responding-link-text-color);
+      }
+    }
+  }
+}

source/renderer/app/containers/wallet/Wallet.js

@@ -50,6 +50,7 @@ export default class Wallet extends Component<Props> {
 
   render() {
     const { wallets, app } = this.props.stores;
+    const { restartNode } = this.props.actions.networkStatus;
     const { active: activeWallet } = wallets;
 
     if (!activeWallet) {
@@ -68,10 +69,11 @@ export default class Wallet extends Component<Props> {
       recoveryPhraseVerificationStatus ===
         WalletRecoveryPhraseVerificationStatuses.NOTIFICATION &&
       !isIncentivizedTestnet;
+    const { isNotResponding, isRestoring } = activeWallet;
 
     return (
       <MainLayout>
-        {activeWallet.isRestoring ? (
+        {isRestoring ? (
           <RestoreNotification
             restoreProgress={activeWallet.restorationProgress}
           />
@@ -83,6 +85,11 @@ export default class Wallet extends Component<Props> {
           activeItem={app.currentPage}
           isLegacy={activeWallet.isLegacy}
           hasNotification={hasNotification}
+          isNotResponding={isNotResponding}
+          onRestartNode={() => restartNode.trigger()}
+          onOpenExternalLink={(url: string) =>
+            this.props.stores.app.openExternalLink(url)
+          }
         >
           {this.props.children}
         </WalletWithNavigation>