[DDW-881] Enhance logic for updating menus

CHANGELOG.md

@@ -9,6 +9,10 @@
 - Implemented new token picker ([PR 2787](https://github.com/input-output-hk/daedalus/pull/2787))
 - Improved wallet send form ([PR 2791](https://github.com/input-output-hk/daedalus/pull/2791))
 
+### Fixes
+
+ - Fixed behaviour of wallet settings option of the app menu ([PR 2838](https://github.com/input-output-hk/daedalus/pull/2838))
+
 ### Chores
 
 - Updated the list of team members ([PR 2805](https://github.com/input-output-hk/daedalus/pull/2805))

source/common/config/electron-store.config.js

@@ -16,7 +16,6 @@ export const STORAGE_KEYS: {
   APP_AUTOMATIC_UPDATE_FAILED: 'APP-AUTOMATIC-UPDATE-FAILED',
   APP_UPDATE_COMPLETED: 'APP-UPDATE-COMPLETED',
   ASSET_DATA: 'ASSET-DATA',
-  ASSET_SETTINGS_DIALOG_WAS_OPENED: 'ASSET-SETTINGS-DIALOG-WAS-OPENED',
   CURRENCY_ACTIVE: 'CURRENCY-ACTIVE',
   CURRENCY_SELECTED: 'CURRENCY-SELECTED',
   DATA_LAYER_MIGRATION_ACCEPTANCE: 'DATA-LAYER-MIGRATION-ACCEPTANCE',

source/common/ipc/api.js

@@ -180,9 +180,19 @@ export type SubmitBugReportRequestMainResponse = void;
 /**
  * Channel to rebuild the electron application menu after the language setting changes
  */
+export type WalletSettingsStateValue = 'hidden' | 'disabled' | 'enabled';
+export const WalletSettingsStateEnum: EnumMap<
+  WalletSettingsStateValue,
+  WalletSettingsStateValue
+> = {
+  hidden: 'hidden',
+  disabled: 'disabled',
+  enabled: 'enabled',
+};
 export const REBUILD_APP_MENU_CHANNEL = 'REBUILD_APP_MENU_CHANNEL';
 export type RebuildAppMenuRendererRequest = {
   isNavigationEnabled: boolean,
+  walletSettingsState: WalletSettingsStateValue,
 };
 export type RebuildAppMenuMainResponse = void;
 
@@ -308,14 +318,6 @@ export const GENERATE_WALLET_MIGRATION_REPORT_CHANNEL =
 export type GenerateWalletMigrationReportRendererRequest = WalletMigrationReportData;
 export type GenerateWalletMigrationReportMainResponse = void;
 
-/**
- * Channel for enabling application menu navigation
- */
-export const ENABLE_APPLICATION_MENU_NAVIGATION_CHANNEL =
-  'ENABLE_APPLICATION_MENU_NAVIGATION_CHANNEL';
-export type EnableApplicationMenuNavigationRendererRequest = void;
-export type EnableApplicationMenuNavigationMainResponse = void;
-
 /**
  * Channel for generating wallet migration report
  */

source/main/index.js

@@ -4,6 +4,7 @@ import path from 'path';
 import { app, dialog, BrowserWindow, screen, shell } from 'electron';
 import { client } from 'electron-connect';
 import EventEmitter from 'events';
+import { WalletSettingsStateEnum } from '../common/ipc/api';
 import { requestElectronStore } from './ipc/electronStoreConversation';
 import { logger } from './utils/logging';
 import {
@@ -45,7 +46,6 @@ import type {
 import { logUsedVersion } from './utils/logUsedVersion';
 import { setStateSnapshotLogChannel } from './ipc/set-log-state-snapshot';
 import { generateWalletMigrationReportChannel } from './ipc/generateWalletMigrationReportChannel';
-import { enableApplicationMenuNavigationChannel } from './ipc/enableApplicationMenuNavigationChannel';
 import { pauseActiveDownloads } from './ipc/downloadManagerChannel';
 import {
   restoreSavedWindowBounds,
@@ -186,25 +186,16 @@ const onAppReady = async () => {
 
   buildAppMenus(mainWindow, cardanoNode, userLocale, {
     isNavigationEnabled: false,
+    walletSettingsState: WalletSettingsStateEnum.hidden,
   });
 
-  enableApplicationMenuNavigationChannel.onReceive(
-    () =>
-      new Promise((resolve) => {
-        const locale = getLocale(network);
-        buildAppMenus(mainWindow, cardanoNode, locale, {
-          isNavigationEnabled: true,
-        });
-        resolve();
-      })
-  );
-
   rebuildApplicationMenu.onReceive(
-    (data) =>
+    ({ walletSettingsState, isNavigationEnabled }) =>
       new Promise((resolve) => {
         const locale = getLocale(network);
         buildAppMenus(mainWindow, cardanoNode, locale, {
-          isNavigationEnabled: data.isNavigationEnabled,
+          isNavigationEnabled,
+          walletSettingsState,
         });
         mainWindow.updateTitle(locale);
         resolve();

source/main/menus/osx.js

@@ -8,6 +8,8 @@ import { environment } from '../environment';
 import { showUiPartChannel } from '../ipc/control-ui-parts';
 import { NOTIFICATIONS } from '../../common/ipc/constants';
 import { generateSupportRequestLink } from '../../common/utils/reporting';
+import { WalletSettingsStateEnum } from '../../common/ipc/api';
+import type { WalletSettingsStateValue } from '../../common/ipc/api';
 import { getRtsFlags } from '../utils/rtsFlags';
 
 const id = 'menu';
@@ -22,6 +24,7 @@ export const osxMenu = (
   translations: {},
   locale: string,
   isNavigationEnabled: boolean,
+  walletSettingsState: WalletSettingsStateValue,
   translation: Function = getTranslation(translations, id)
 ) => [
   {
@@ -58,7 +61,10 @@ export const osxMenu = (
         click() {
           actions.openWalletSettingsPage();
         },
-        enabled: isNavigationEnabled,
+        enabled:
+          isNavigationEnabled &&
+          walletSettingsState === WalletSettingsStateEnum.enabled,
+        visible: walletSettingsState !== WalletSettingsStateEnum.hidden,
       },
       { type: 'separator' },
       {

source/main/menus/win-linux.js

@@ -8,6 +8,8 @@ import { environment } from '../environment';
 import { NOTIFICATIONS } from '../../common/ipc/constants';
 import { showUiPartChannel } from '../ipc/control-ui-parts';
 import { generateSupportRequestLink } from '../../common/utils/reporting';
+import { WalletSettingsStateEnum } from '../../common/ipc/api';
+import type { WalletSettingsStateValue } from '../../common/ipc/api';
 import { getRtsFlags } from '../utils/rtsFlags';
 
 const id = 'menu';
@@ -22,6 +24,7 @@ export const winLinuxMenu = (
   translations: {},
   locale: string,
   isNavigationEnabled: boolean,
+  walletSettingsState: WalletSettingsStateValue,
   translation: Function = getTranslation(translations, id)
 ) => [
   {
@@ -118,7 +121,10 @@ export const winLinuxMenu = (
         click() {
           actions.openWalletSettingsPage();
         },
-        enabled: isNavigationEnabled,
+        enabled:
+          isNavigationEnabled &&
+          walletSettingsState === WalletSettingsStateEnum.enabled,
+        visible: walletSettingsState !== WalletSettingsStateEnum.hidden,
       },
       {
         type: 'separator',

source/main/utils/buildAppMenus.js

@@ -1,5 +1,6 @@
 // @flow
 import { app, BrowserWindow, dialog, globalShortcut, Menu } from 'electron';
+import type { WalletSettingsStateValue } from '../../common/ipc/api';
 import { environment } from '../environment';
 import { winLinuxMenu } from '../menus/win-linux';
 import { osxMenu } from '../menus/osx';
@@ -12,17 +13,19 @@ import { getTranslation } from './getTranslation';
 import { setRtsFlagsAndRestart } from './rtsFlags';
 import { RTS_FLAGS } from '../config';
 
+type Data = {
+  isNavigationEnabled: boolean,
+  walletSettingsState: WalletSettingsStateValue,
+};
+
 export const buildAppMenus = async (
   mainWindow: BrowserWindow,
   cardanoNode: ?CardanoNode,
   locale: string,
-  data: {
-    isNavigationEnabled: boolean,
-  }
+  { isNavigationEnabled, walletSettingsState }: Data
 ) => {
   const { ABOUT, DAEDALUS_DIAGNOSTICS, ITN_REWARDS_REDEMPTION } = DIALOGS;
   const { SETTINGS, WALLET_SETTINGS } = PAGES;
-  const { isNavigationEnabled } = data;
 
   const { isMacOS, isBlankScreenFixActive } = environment;
   const translations = require(`../locales/${locale}`);
@@ -146,7 +149,8 @@ export const buildAppMenus = async (
         menuActions,
         translations,
         locale,
-        isNavigationEnabled
+        isNavigationEnabled,
+        walletSettingsState
       )
     );
     Menu.setApplicationMenu(menu);
@@ -158,7 +162,8 @@ export const buildAppMenus = async (
         menuActions,
         translations,
         locale,
-        isNavigationEnabled
+        isNavigationEnabled,
+        walletSettingsState
       )
     );
     mainWindow.setMenu(menu);

source/renderer/app/App.js

@@ -20,6 +20,7 @@ import { DIALOGS } from '../../common/ipc/constants';
 import type { StoresMap } from './stores/index';
 import type { ActionsMap } from './actions/index';
 import NewsFeedContainer from './containers/news/NewsFeedContainer';
+import { MenuUpdater } from './containers/MenuUpdater';
 
 @observer
 export default class App extends Component<{
@@ -56,6 +57,7 @@ export default class App extends Component<{
       <Fragment>
         <ThemeManager variables={themeVars} />
         <Provider stores={stores} actions={actions}>
+          <MenuUpdater />
           <ThemeProvider
             theme={daedalusTheme}
             skins={SimpleSkins}

source/renderer/app/actions/assets-actions.js

@@ -5,12 +5,12 @@ import type { AssetToken } from '../api/assets/types';
 // ======= ASSETS ACTIONS =======
 
 export default class AssetsActions {
-  onAssetSettingsOpen: Action<{ asset: AssetToken }> = new Action();
+  setEditedAsset: Action<{ asset: AssetToken }> = new Action();
   onAssetSettingsSubmit: Action<{
     asset: AssetToken,
     decimals: number,
   }> = new Action();
-  onAssetSettingsCancel: Action<any> = new Action();
+  unsetEditedAsset: Action<any> = new Action();
   onOpenAssetSend: Action<{ uniqueId: string }> = new Action();
   onCopyAssetParam: Action<{ param: string, fullValue: string }> = new Action();
   onToggleFavorite: Action<{

source/renderer/app/api/utils/localStorage.js

@@ -375,15 +375,6 @@ export default class LocalStorageApi {
       `${policyId}${assetName}`
     );
 
-  getAssetSettingsDialogWasOpened = (): Promise<boolean> =>
-    LocalStorageApi.get(keys.ASSET_SETTINGS_DIALOG_WAS_OPENED, false);
-
-  setAssetSettingsDialogWasOpened = (): Promise<void> =>
-    LocalStorageApi.set(keys.ASSET_SETTINGS_DIALOG_WAS_OPENED, true);
-
-  unsetAssetSettingsDialogWasOpened = (): Promise<void> =>
-    LocalStorageApi.unset(keys.ASSET_SETTINGS_DIALOG_WAS_OPENED);
-
   getSmashServer = (): Promise<string> =>
     LocalStorageApi.get(keys.SMASH_SERVER);
 

source/renderer/app/components/assets/Asset.js

@@ -221,17 +221,12 @@ export default class Asset extends Component<Props, State> {
   }
 
   renderPillPopOverContainer = () => {
-    const {
-      asset,
-      onCopyAssetParam,
-      assetSettingsDialogWasOpened,
-    } = this.props;
+    const { asset, onCopyAssetParam } = this.props;
     const pillContent = this.renderPillContent();
     const popOverContent = (
       <AssetContent
         asset={asset}
         onCopyAssetParam={onCopyAssetParam}
-        assetSettingsDialogWasOpened={assetSettingsDialogWasOpened}
         className={styles.popOverContent}
         highlightFingerprint
       />

source/renderer/app/components/wallet/WalletSendForm.js

@@ -1,5 +1,5 @@
 // @flow
-import React, { Component, Fragment } from 'react';
+import React, { Component, Fragment, createRef } from 'react';
 import type { Node } from 'react';
 import type { Field } from 'mobx-react-form';
 import { observer } from 'mobx-react';
@@ -39,7 +39,8 @@ import type { HwDeviceStatus } from '../../domains/Wallet';
 import type { AssetToken, ApiTokens } from '../../api/assets/types';
 import type { ReactIntlMessage } from '../../types/i18nTypes';
 import { DiscreetWalletAmount } from '../../features/discreet-mode';
-import WalletTokenPicker from './tokens/wallet-token-picker/WalletTokenPicker';
+import WalletTokenPickerDialogContainer from '../../containers/tokens/WalletTokenPickerDialogContainer';
+import type { Api } from '../../containers/tokens/WalletTokenPickerDialogContainer';
 
 messages.fieldIsRequired = globalMessages.fieldIsRequired;
 
@@ -99,7 +100,6 @@ type State = {
   isResetButtonDisabled: boolean,
   isReceiverAddressValid: boolean,
   isTransactionFeeCalculated: boolean,
-  isTokenPickerOpen: boolean,
   isCalculatingTransactionFee: boolean,
   adaInputState: AdaInputState,
 };
@@ -121,7 +121,6 @@ export default class WalletSendForm extends Component<Props, State> {
     isResetButtonDisabled: true,
     isReceiverAddressValid: false,
     isTransactionFeeCalculated: false,
-    isTokenPickerOpen: false,
     isCalculatingTransactionFee: false,
     adaInputState: AdaInputStateType.None,
   };
@@ -186,6 +185,8 @@ export default class WalletSendForm extends Component<Props, State> {
     return this.availableAssets.length > 0;
   }
 
+  walletTokenPickerRef = createRef<Api>();
+
   getAssetByUniqueId = (uniqueId: string): ?AssetToken => {
     const { assets: allAssets } = this.props;
     return allAssets.find((asset) => asset.uniqueId === uniqueId);
@@ -1016,7 +1017,7 @@ export default class WalletSendForm extends Component<Props, State> {
                 label={intl.formatMessage(messages.addAssetButtonLabel)}
                 disabled={!this.hasAvailableAssets}
                 onClick={() => {
-                  this.setState({ isTokenPickerOpen: true });
+                  this.walletTokenPickerRef?.current?.open?.();
                 }}
               />
             </div>
@@ -1046,7 +1047,6 @@ export default class WalletSendForm extends Component<Props, State> {
       transactionFeeError,
       isResetButtonDisabled,
       isTransactionFeeCalculated,
-      isTokenPickerOpen,
       selectedAssetUniqueIds,
     } = this.state;
     const {
@@ -1170,21 +1170,16 @@ export default class WalletSendForm extends Component<Props, State> {
           />
         ) : null}
 
-        {isTokenPickerOpen && (
-          <WalletTokenPicker
-            assets={assets}
-            previouslyCheckedIds={selectedAssetUniqueIds}
-            tokenFavorites={tokenFavorites}
-            walletName={walletName}
-            onCancel={() => {
-              this.setState({ isTokenPickerOpen: false });
-            }}
-            onAdd={(checked) => {
-              this.setState({ isTokenPickerOpen: false });
-              checked.forEach(this.addAssetRow);
-            }}
-          />
-        )}
+        <WalletTokenPickerDialogContainer
+          ref={this.walletTokenPickerRef}
+          assets={assets}
+          previouslyCheckedIds={selectedAssetUniqueIds}
+          tokenFavorites={tokenFavorites}
+          walletName={walletName}
+          onAdd={(checked) => {
+            checked.forEach(this.addAssetRow);
+          }}
+        />
       </div>
     );
   }