[DDW-676] Improve network status dialog

CHANGELOG.md

@@ -8,7 +8,7 @@ Changelog
 - Implemented the navigation for the Staking pages ([PR 1395](https://github.com/input-output-hk/daedalus/pull/1395), [PR 1400](https://github.com/input-output-hk/daedalus/pull/1400))
 - Implemented timestamp on paper wallet PDF's ([PR 1385](https://github.com/input-output-hk/daedalus/pull/1385), [PR 1400](https://github.com/input-output-hk/daedalus/pull/1400))
 - Implemented "Start of decentralisation notification" UI ([PR 1390](https://github.com/input-output-hk/daedalus/pull/1390))
-- Implemented new Network Status dialog design ([PR 1370](https://github.com/input-output-hk/daedalus/pull/1370), [PR 1402](https://github.com/input-output-hk/daedalus/pull/1402))
+- Implemented new Network Status dialog design ([PR 1370](https://github.com/input-output-hk/daedalus/pull/1370), [PR 1402](https://github.com/input-output-hk/daedalus/pull/1402), [PR 1404](https://github.com/input-output-hk/daedalus/pull/1404))
 - Implemented the wallet UTxO statistics screen ([PR 1353](https://github.com/input-output-hk/daedalus/pull/1353))
 - Implemented scroll error message into view ([PR 1383](https://github.com/input-output-hk/daedalus/pull/1383))
 - Implemented new Block-consolidation status design ([PR 1377](https://github.com/input-output-hk/daedalus/pull/1377))

source/common/ipc/api.js

@@ -70,6 +70,13 @@ export const GET_DISK_SPACE_STATUS_CHANNEL = 'GetDiskSpaceStatusChannel';
 export type GetDiskSpaceStatusRendererRequest = number | any;
 export type GetDiskSpaceStatusMainResponse = CheckDiskSpaceResponse;
 
+/**
+ * Channel for checking the state directory path
+ */
+export const GET_STATE_DIRECTORY_PATH_CHANNEL = 'GetStateDirectoryPathChannel';
+export type GetStateDirectoryPathRendererRequest = string | any;
+export type GetStateDirectoryPathMainResponse = any;
+
 /**
  * Channel for loading a base64 encoded asset from within the `source/renderer` folder
  */

source/common/types/environment.types.js

@@ -27,7 +27,6 @@ export type Environment = {
   isWindows: boolean,
   isMacOS: boolean,
   isLinux: boolean,
-  stateDirectoryPath: string,
   isInSafeMode: boolean,
 };
 

source/common/types/stateDirectoryPath.types.js

@@ -0,0 +1,4 @@
+// @flow
+export type CheckStateDirectoryPathResponse = {
+  stateDirectoryPath: string,
+};

source/main/environment.js

@@ -2,7 +2,6 @@
 import os from 'os';
 import { uniq, upperFirst, get, includes } from 'lodash';
 import { version } from '../../package.json';
-// import { stateDirectoryPath } from './config';
 import type { Environment } from '../common/types/environment.types';
 import {
   DEVELOPMENT,
@@ -82,7 +81,6 @@ export const environment: Environment = Object.assign(
     isWindows,
     isMacOS,
     isLinux,
-    stateDirectoryPath: '',
     isInSafeMode,
   },
   process.env

source/main/index.js

@@ -10,7 +10,7 @@ import { createMainWindow } from './windows/main';
 import { installChromeExtensions } from './utils/installChromeExtensions';
 import { environment } from './environment';
 import mainErrorHandler from './utils/mainErrorHandler';
-import { launcherConfig, frontendOnlyMode } from './config';
+import { launcherConfig, frontendOnlyMode, stateDirectoryPath } from './config';
 import { setupCardano } from './cardano/setup';
 import { CardanoNode } from './cardano/CardanoNode';
 import { safeExitWithCode } from './utils/safeExitWithCode';
@@ -20,6 +20,7 @@ import { detectSystemLocale } from './utils/detectSystemLocale';
 import { ensureXDGDataIsSet } from './cardano/config';
 import { rebuildApplicationMenu } from './ipc/rebuild-application-menu';
 import { detectSystemLocaleChannel } from './ipc/detect-system-locale';
+import { getStateDirectoryPathChannel } from './ipc/getStateDirectoryPathChannel';
 import { CardanoNodeStates } from '../common/types/cardano-node.types';
 import type { CheckDiskSpaceResponse } from '../common/types/no-disk-space.types';
 
@@ -143,6 +144,10 @@ const onAppReady = async () => {
 
   getNumberOfEpochsConsolidated();
 
+  getStateDirectoryPathChannel.onRequest(() =>
+    Promise.resolve(stateDirectoryPath)
+  );
+
   mainWindow.on('close', async event => {
     Logger.info(
       'mainWindow received <close> event. Safe exiting Daedalus now.'

source/main/ipc/getStateDirectoryPathChannel.js

@@ -0,0 +1,14 @@
+// @flow
+import { MainIpcChannel } from './lib/MainIpcChannel';
+import { GET_STATE_DIRECTORY_PATH_CHANNEL } from '../../common/ipc/api';
+import type {
+  GetStateDirectoryPathRendererRequest,
+  GetStateDirectoryPathMainResponse,
+} from '../../common/ipc/api';
+
+// IpcChannel<Incoming, Outgoing>
+
+export const getStateDirectoryPathChannel: MainIpcChannel<
+  GetStateDirectoryPathRendererRequest,
+  GetStateDirectoryPathMainResponse
+> = new MainIpcChannel(GET_STATE_DIRECTORY_PATH_CHANNEL);

source/renderer/app/components/status/NetworkStatus.js

@@ -100,7 +100,7 @@ const messages = defineMessages({
     defaultMessage: '!!!Cardano Network',
     description: 'Cardano Network',
   },
-  stateDirectory: {
+  stateDirectoryPath: {
     id: 'status.network.dialog.stateDirectory',
     defaultMessage: '!!!Daedalus State Directory',
     description: 'Daedalus State Directory',
@@ -494,7 +494,7 @@ export default class NetworkStatus extends Component<Props, State> {
       cardanoProcessID,
       cardanoAPIPort,
       cardanoNetwork,
-      daedalusStateDirectory,
+      daedalusStateDirectoryPath,
     } = coreInfo;
 
     const { isNodeRestarting } = this.state;
@@ -561,19 +561,11 @@ export default class NetworkStatus extends Component<Props, State> {
               </tr>
               <tr>
                 <td>{intl.formatMessage(messages.platform)}:</td>
-                <Tooltip skin={TooltipSkin} tip={platform}>
-                  <td>{platform}</td>
-                </Tooltip>
+                <td>{platform}</td>
               </tr>
               <tr className={styles.platformVersion}>
                 <td>{intl.formatMessage(messages.platformVersion)}:</td>
-                <Tooltip
-                  skin={TooltipSkin}
-                  tip={platformVersion}
-                  className={styles.platformTooltip}
-                >
-                  <td className={styles.platform}>{platformVersion}</td>
-                </Tooltip>
+                <td className={styles.platform}>{platformVersion}</td>
               </tr>
               <tr>
                 <td>{intl.formatMessage(messages.cpu)}:</td>
@@ -583,15 +575,11 @@ export default class NetworkStatus extends Component<Props, State> {
               </tr>
               <tr>
                 <td>{intl.formatMessage(messages.ram)}:</td>
-                <Tooltip skin={TooltipSkin} tip={ram}>
-                  <td>{ram}</td>
-                </Tooltip>
+                <td>{ram}</td>
               </tr>
               <tr>
                 <td>{intl.formatMessage(messages.availableDiskSpace)}:</td>
-                <Tooltip skin={TooltipSkin} tip={availableDiskSpace}>
-                  <td>{availableDiskSpace}</td>
-                </Tooltip>
+                <td>{availableDiskSpace}</td>
               </tr>
               <tr>
                 <th colSpan={2}>
@@ -601,21 +589,15 @@ export default class NetworkStatus extends Component<Props, State> {
               </tr>
               <tr>
                 <td>{intl.formatMessage(messages.daedalusVersion)}:</td>
-                <Tooltip skin={TooltipSkin} tip={daedalusVersion}>
-                  <td>{daedalusVersion}</td>
-                </Tooltip>
+                <td>{daedalusVersion}</td>
               </tr>
               <tr>
                 <td>{intl.formatMessage(messages.daedalusMainProcessID)}:</td>
-                <Tooltip skin={TooltipSkin} tip={daedalusMainProcessID}>
-                  <td>{daedalusMainProcessID}</td>
-                </Tooltip>
+                <td>{daedalusMainProcessID}</td>
               </tr>
               <tr>
                 <td>{intl.formatMessage(messages.daedalusProcessID)}:</td>
-                <Tooltip skin={TooltipSkin} tip={daedalusProcessID}>
-                  <td>{daedalusProcessID}</td>
-                </Tooltip>
+                <td>{daedalusProcessID}</td>
               </tr>
               <tr>
                 <td>{intl.formatMessage(messages.safeMode)}:</td>
@@ -627,33 +609,25 @@ export default class NetworkStatus extends Component<Props, State> {
               </tr>
               <tr>
                 <td>{intl.formatMessage(messages.cardanoVersion)}:</td>
-                <Tooltip skin={TooltipSkin} tip={cardanoVersion}>
-                  <td>{cardanoVersion}</td>
-                </Tooltip>
+                <td>{cardanoVersion}</td>
               </tr>
               <tr>
                 <td>{intl.formatMessage(messages.cardanoProcessID)}:</td>
-                <Tooltip skin={TooltipSkin} tip={cardanoProcessID}>
-                  <td>{cardanoProcessID}</td>
-                </Tooltip>
+                <td>{cardanoProcessID}</td>
               </tr>
               <tr>
                 <td>{intl.formatMessage(messages.cardanoApiPort)}:</td>
-                <Tooltip skin={TooltipSkin} tip={cardanoAPIPort}>
-                  <td>{cardanoAPIPort}</td>
-                </Tooltip>
+                <td>{cardanoAPIPort}</td>
               </tr>
               <tr>
                 <td>{intl.formatMessage(messages.cardanoNetwork)}:</td>
-                <Tooltip skin={TooltipSkin} tip={cardanoNetwork}>
-                  <td>{cardanoNetwork}</td>
-                </Tooltip>
+                <td>{cardanoNetwork}</td>
               </tr>
               <tr>
-                <td>{intl.formatMessage(messages.stateDirectory)}:</td>
-                <Tooltip skin={TooltipSkin} tip={daedalusStateDirectory}>
-                  <td className={styles.stateDirectory}>
-                    {daedalusStateDirectory}
+                <td>{intl.formatMessage(messages.stateDirectoryPath)}:</td>
+                <Tooltip skin={TooltipSkin} tip={daedalusStateDirectoryPath}>
+                  <td className={styles.stateDirectoryPath}>
+                    {daedalusStateDirectoryPath}
                   </td>
                 </Tooltip>
               </tr>
@@ -701,24 +675,15 @@ export default class NetworkStatus extends Component<Props, State> {
               </tr>
               <tr>
                 <td>{intl.formatMessage(messages.syncPercentage)}:</td>
-                <Tooltip
-                  skin={TooltipSkin}
-                  tip={`${syncPercentage.toFixed(2)}%`}
-                >
-                  <td>{syncPercentage.toFixed(2)}%</td>
-                </Tooltip>
+                <td>{syncPercentage.toFixed(2)}%</td>
               </tr>
               <tr>
                 <td>{intl.formatMessage(messages.networkBlockHeight)}:</td>
-                <Tooltip skin={TooltipSkin} tip={networkBlockHeight}>
-                  <td>{networkBlockHeight}</td>
-                </Tooltip>
+                <td>{networkBlockHeight}</td>
               </tr>
               <tr>
                 <td>{intl.formatMessage(messages.localBlockHeight)}:</td>
-                <Tooltip skin={TooltipSkin} tip={localBlockHeight}>
-                  <td>{localBlockHeight}</td>
-                </Tooltip>
+                <td>{localBlockHeight}</td>
               </tr>
               <tr>
                 <td>{intl.formatMessage(messages.remainingUnsyncedBlocks)}:</td>
@@ -728,37 +693,19 @@ export default class NetworkStatus extends Component<Props, State> {
               </tr>
               <tr>
                 <td>{intl.formatMessage(messages.latestLocalBlockAge)}:</td>
-                <Tooltip
-                  skin={TooltipSkin}
-                  tip={
-                    latestLocalBlockTimestamp >= 0
-                      ? `${latestLocalBlockAge} ms`
-                      : '-'
-                  }
-                >
-                  <td className={latestLocalBlockAgeClasses}>
-                    {latestLocalBlockTimestamp > 0
-                      ? `${latestLocalBlockAge} ms`
-                      : '-'}
-                  </td>
-                </Tooltip>
+                <td className={latestLocalBlockAgeClasses}>
+                  {latestLocalBlockTimestamp > 0
+                    ? `${latestLocalBlockAge} ms`
+                    : '-'}
+                </td>
               </tr>
               <tr>
                 <td>{intl.formatMessage(messages.latestNetworkBlockAge)}:</td>
-                <Tooltip
-                  skin={TooltipSkin}
-                  tip={
-                    latestNetworkBlockTimestamp > 0
-                      ? `${latestNetworkBlockAge} ms`
-                      : '-'
-                  }
-                >
-                  <td className={latestNetworkBlockAgeClasses}>
-                    {latestNetworkBlockTimestamp > 0
-                      ? `${latestNetworkBlockAge} ms`
-                      : '-'}
-                  </td>
-                </Tooltip>
+                <td className={latestNetworkBlockAgeClasses}>
+                  {latestNetworkBlockTimestamp > 0
+                    ? `${latestNetworkBlockAge} ms`
+                    : '-'}
+                </td>
               </tr>
               <tr>
                 <td>{intl.formatMessage(messages.localTimeDifference)}:</td>
@@ -773,20 +720,11 @@ export default class NetworkStatus extends Component<Props, State> {
                           messages.localTimeDifferenceCheckTime
                         )}
                   </button>
-                  <Tooltip
-                    skin={TooltipSkin}
-                    tip={
-                      isNTPServiceReachable
-                        ? `${localTimeDifference || 0} μs`
-                        : intl.formatMessage(messages.serviceUnreachable)
-                    }
-                  >
-                    <span className={localTimeDifferenceClasses}>
-                      {isNTPServiceReachable
-                        ? `${localTimeDifference || 0} μs`
-                        : intl.formatMessage(messages.serviceUnreachable)}
-                    </span>
-                  </Tooltip>
+                  <span className={localTimeDifferenceClasses}>
+                    {isNTPServiceReachable
+                      ? `${localTimeDifference || 0} μs`
+                      : intl.formatMessage(messages.serviceUnreachable)}
+                  </span>
                 </td>
               </tr>
               <tr>
@@ -845,26 +783,15 @@ export default class NetworkStatus extends Component<Props, State> {
               ) : null}
               <tr>
                 <td>{intl.formatMessage(messages.cardanoNodeState)}:</td>
-                <Tooltip
-                  skin={TooltipSkin}
-                  tip={upperFirst(
+                <td>
+                  {upperFirst(
                     cardanoNodeState != null
                       ? intl.formatMessage(
                           this.getLocalisationForCardanoNodeState()
                         )
                       : 'unknown'
                   )}
-                >
-                  <td>
-                    {upperFirst(
-                      cardanoNodeState != null
-                        ? intl.formatMessage(
-                            this.getLocalisationForCardanoNodeState()
-                          )
-                        : 'unknown'
-                    )}
-                  </td>
-                </Tooltip>
+                </td>
               </tr>
               <tr>
                 <td>{intl.formatMessage(messages.cardanoNodeResponding)}:</td>

source/renderer/app/components/status/NetworkStatus.scss

@@ -113,7 +113,7 @@
       max-width: 100px;
     }
 
-    &.stateDirectory {
+    &.stateDirectoryPath {
       max-width: 400px;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -140,6 +140,10 @@
     &.localTimeDifferenceItem {
       align-items: center;
       display: flex;
+
+      button {
+        padding-top: 0;
+      }
     }
   }
 

source/renderer/app/components/wallet/navigation/WalletNavigation.js

@@ -94,7 +94,7 @@ export default class WalletNavigation extends Component<Props> {
           {
             type: 'dropdown',
             id: 'settings',
-            label: intl.formatMessage(messages.settings),
+            label: intl.formatMessage(messages.more),
             icon: settingsIcon,
             options: [
               {

source/renderer/app/containers/status/NetworkStatusDialog.js

@@ -46,6 +46,7 @@ export default class NetworkStatusDialog extends Component<Props> {
       diskSpaceAvailable,
       tlsConfig,
       cardanoNodeID,
+      stateDirectoryPath,
     } = networkStatus;
 
     const systemInfo = {
@@ -65,7 +66,7 @@ export default class NetworkStatusDialog extends Component<Props> {
       cardanoProcessID: cardanoNodeID,
       cardanoAPIPort: tlsConfig ? tlsConfig.port : 0,
       cardanoNetwork: environment.network,
-      daedalusStateDirectory: environment.stateDirectoryPath,
+      daedalusStateDirectoryPath: stateDirectoryPath,
     };
 
     return (