fix(extension): [LW-12155] switch to nami mode (#1682)

* feat: remove switch to nami mode from settings pages * feat: add switch to nami mode in dropdown menu * feat: augment nami mode switch styling * fix: [LW-12155]
input-output-hk · Jan 29, 2025 · cfd6b7b · cfd6b7b
1 parent 7957458
commit cfd6b7b
Show file tree

Hide file tree

Showing 7 changed files with 100 additions and 124 deletions.
diff --git a/...ension-wallet/src/components/MainMenu/DropdownMenuOverlay/DropdownMenuOverlay.module.scss b/...ension-wallet/src/components/MainMenu/DropdownMenuOverlay/DropdownMenuOverlay.module.scss
@@ -91,20 +91,20 @@
           width: size_unit(5.5);
         }
 
-        .ant-switch>div.ant-switch-handle {
+        .ant-switch > div.ant-switch-handle {
           height: size_unit(2.5);
           width: size_unit(2.5);
         }
 
-        .ant-switch>span.ant-switch-inner svg {
+        .ant-switch > span.ant-switch-inner svg {
           margin-top: 1px;
         }
 
-        .ant-switch.ant-switch-checked>span.ant-switch-inner {
+        .ant-switch.ant-switch-checked > span.ant-switch-inner {
           margin: 0 size_unit(35) 0 size_unit(0.5);
         }
 
-        .ant-switch.ant-switch-checked>div.ant-switch-handle {
+        .ant-switch.ant-switch-checked > div.ant-switch-handle {
           left: calc(100% - 20px - 2px);
         }
       }
@@ -211,3 +211,15 @@
 .extendedContainer {
   max-height: 600px;
 }
+
+.namiModeSwitch {
+  &:global(.ant-switch) {
+    background: var(--light-mode-mid-grey, var(--dark-mode-dark-grey)) !important;
+    &:focus {
+      box-shadow: none !important;
+    }
+  }
+  &:global(.ant-switch-checked) {
+    background: var(--switch-checked-bg-color) !important;
+  }
+}
diff --git a/...wser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/DropdownMenuOverlay.tsx b/...wser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/DropdownMenuOverlay.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, useCallback, useState, VFC, useMemo } from 'react';
+import React, { ReactNode, useCallback, useState, VFC, useMemo, useEffect } from 'react';
 import { Menu, MenuProps } from 'antd';
 import {
   AddNewWalletLink,
@@ -12,6 +12,7 @@ import {
   ThemeSwitcher,
   UserInfo
 } from './components';
+import { Switch } from '@lace/common';
 import styles from './DropdownMenuOverlay.module.scss';
 import { NetworkInfo } from './components/NetworkInfo';
 import { Sections } from './types';
@@ -24,6 +25,11 @@ import type { AnyBip32Wallet } from '@cardano-sdk/web-extension';
 import { WalletType } from '@cardano-sdk/web-extension';
 import { Wallet } from '@lace/cardano';
 import { usePostHogClientContext } from '@providers/PostHogClientProvider';
+import { BackgroundStorage } from '@lib/scripts/types';
+import { getBackgroundStorage, setBackgroundStorage } from '@lib/scripts/background/storage';
+import { useBackgroundServiceAPIContext } from '@providers';
+import { WarningModal } from '@src/views/browser-view/components';
+import { useTranslation } from 'react-i18next';
 
 interface Props extends MenuProps {
   isPopup?: boolean;
@@ -40,10 +46,22 @@ export const DropdownMenuOverlay: VFC<Props> = ({
   sendAnalyticsEvent,
   ...props
 }): React.ReactElement => {
+  const { t } = useTranslation();
   const posthog = usePostHogClientContext();
+  const backgroundServices = useBackgroundServiceAPIContext();
+
   const sharedWalletsEnabled = posthog?.isFeatureFlagEnabled('shared-wallets');
   const [currentSection, setCurrentSection] = useState<Sections>(Sections.Main);
   const { environmentName, setManageAccountsWallet, walletType, isSharedWallet, isHardwareWallet } = useWalletStore();
+  const [namiMigration, setNamiMigration] = useState<BackgroundStorage['namiMigration']>();
+  const [modalOpen, setModalOpen] = useState(false);
+  const useSwitchToNamiMode = posthog?.isFeatureFlagEnabled('use-switch-to-nami-mode');
+
+  useEffect(() => {
+    getBackgroundStorage()
+      .then((storage) => setNamiMigration(storage.namiMigration))
+      .catch(console.error);
+  }, []);
 
   const openWalletAccounts = (wallet: AnyBip32Wallet<Wallet.WalletMetadata, Wallet.AccountMetadata>) => {
     setManageAccountsWallet(wallet);
@@ -76,8 +94,47 @@ export const DropdownMenuOverlay: VFC<Props> = ({
 
   const showAddSharedWalletLink = sharedWalletsEnabled && !isSharedWallet && !isHardwareWallet;
 
+  const handleNamiModeChange = async (activated: boolean) => {
+    const mode = activated ? 'nami' : 'lace';
+    const migration: BackgroundStorage['namiMigration'] = {
+      ...namiMigration,
+      mode
+    };
+
+    setNamiMigration(migration);
+    backgroundServices.handleChangeMode({ mode });
+    await setBackgroundStorage({
+      namiMigration: migration
+    });
+    setModalOpen(false);
+    if (activated) {
+      await posthog.sendEvent(PostHogAction.SettingsSwitchToNamiClick);
+      try {
+        await backgroundServices.handleOpenPopup();
+      } catch (error) {
+        // improve logging
+        console.warn(error);
+      }
+    } else {
+      window.location.reload();
+    }
+  };
+
   return (
     <Menu {...props} className={styles.menuOverlay} data-testid="header-menu">
+      <WarningModal
+        header={
+          <div className={styles.switchToNamiModalTitle}>{t('browserView.settings.legacyMode.confirmation.title')}</div>
+        }
+        content={t('browserView.settings.legacyMode.confirmation.description')}
+        visible={modalOpen}
+        onCancel={() => setModalOpen(false)}
+        onConfirm={() => handleNamiModeChange(true)}
+        cancelLabel={t('browserView.settings.legacyMode.confirmation.cancel')}
+        confirmLabel={t('browserView.settings.legacyMode.confirmation.confirm')}
+        confirmCustomClassName={styles.settingsConfirmButton}
+        isPopupView={isPopup}
+      />
       {currentSection === Sections.Main && (
         <div
           className={classNames(
@@ -96,6 +153,17 @@ export const DropdownMenuOverlay: VFC<Props> = ({
             <Separator />
             {shouldShowSignMessage && getSignMessageLink()}
             <ThemeSwitcher isPopup={isPopup} />
+            {useSwitchToNamiMode && !isSharedWallet && (
+              <div className={styles.menuItemTheme}>
+                {t('browserView.settings.legacyMode.section')}
+                <Switch
+                  testId="settings-nami-mode-switch"
+                  checked={namiMigration?.mode === 'nami'}
+                  onChange={(checked) => (checked ? setModalOpen(true) : handleNamiModeChange(false))}
+                  className={styles.namiModeSwitch}
+                />
+              </div>
+            )}
             <NetworkChoise onClick={handleNetworkChoise} />
             {lockWalletButton && (
               <>

diff --git a/apps/browser-extension-wallet/src/features/settings/components/Settings.tsx b/apps/browser-extension-wallet/src/features/settings/components/Settings.tsx
@@ -3,9 +3,6 @@ import { ContentLayout } from '@components/Layout';
 import { useTranslation } from 'react-i18next';
 import { SettingsWallet, SettingsSecurity, SettingsHelp, SettingsLegal, SettingsPreferences } from '..';
 import { SettingsRemoveWallet } from '@src/views/browser-view/features/settings/components/SettingsRemoveWallet';
-import { SettingsSwitchToNami } from '@src/views/browser-view/features/settings/components/SettingsSwitchToNami';
-import { usePostHogClientContext } from '@providers/PostHogClientProvider';
-import { useWalletStore } from '@src/stores';
 
 export interface SettingsProps {
   defaultPassphraseVisible?: boolean;
@@ -14,9 +11,6 @@ export interface SettingsProps {
 
 export const Settings = ({ defaultPassphraseVisible, defaultMnemonic }: SettingsProps): React.ReactElement => {
   const { t } = useTranslation();
-  const posthog = usePostHogClientContext();
-  const { isSharedWallet } = useWalletStore();
-  const useSwitchToNamiMode = posthog?.isFeatureFlagEnabled('use-switch-to-nami-mode');
 
   return (
     <ContentLayout title={t('settings.title')} data-testid="settings-page-title">
@@ -30,7 +24,6 @@ export const Settings = ({ defaultPassphraseVisible, defaultMnemonic }: Settings
         />
         <SettingsHelp popupView />
         <SettingsLegal />
-        {useSwitchToNamiMode && !isSharedWallet && <SettingsSwitchToNami popupView />}
         <SettingsRemoveWallet popupView />
       </div>
     </ContentLayout>

diff --git a/apps/browser-extension-wallet/src/lib/scripts/background/services/utilityServices.ts b/apps/browser-extension-wallet/src/lib/scripts/background/services/utilityServices.ts
@@ -1,3 +1,4 @@
+/* eslint-disable no-magic-numbers */
 import { runtime, tabs, storage as webStorage } from 'webextension-polyfill';
 import {
   BackgroundService,
@@ -109,11 +110,20 @@ const handleOpenNamiBrowser = async (data: OpenNamiBrowserData) => {
 
 const handleOpenPopup = async () => {
   if (typeof chrome.action.openPopup !== 'function') return;
-  await closeAllLaceWindows();
-  // behaves inconsistently if executed without setTimeout
-  setTimeout(async () => {
-    await chrome.action.openPopup();
-  });
+  try {
+    const [currentWindow] = await tabs.query({ currentWindow: true, title: 'Lace' });
+    await closeAllLaceWindows();
+    // behaves inconsistently if executed without setTimeout
+    setTimeout(async () => {
+      if (currentWindow?.windowId) {
+        await chrome.windows.update(currentWindow.windowId, { focused: true });
+        await chrome.action.openPopup();
+      }
+    }, 30);
+  } catch (error) {
+    // unable to programatically open the popup again
+    console.error(error);
+  }
 };
 
 const handleChangeTheme = (data: ChangeThemeData) => requestMessage$.next({ type: MessageTypes.CHANGE_THEME, data });

diff --git a/...r-extension-wallet/src/views/browser-view/features/settings/components/SettingsLayout.tsx b/...r-extension-wallet/src/views/browser-view/features/settings/components/SettingsLayout.tsx
@@ -7,9 +7,6 @@ import { SettingsRemoveWallet } from './SettingsRemoveWallet';
 import { MidnightPreLaunchSettingsBanner } from '@lace/core';
 import { Box } from '@input-output-hk/lace-ui-toolkit';
 import MidnightPreLaunchBannerImage from '../../../../../../../../packages/core/src/ui/assets/images/midnight-launch-event-sidebar-banner.png';
-import { SettingsSwitchToNami } from './SettingsSwitchToNami';
-import { usePostHogClientContext } from '@providers/PostHogClientProvider';
-import { useWalletStore } from '@src/stores';
 
 export interface SettingsLayoutProps {
   defaultPassphraseVisible?: boolean;
@@ -21,9 +18,6 @@ export const SettingsLayout = ({
   defaultMnemonic
 }: SettingsLayoutProps): React.ReactElement => {
   const { t } = useTranslation();
-  const posthog = usePostHogClientContext();
-  const { isSharedWallet } = useWalletStore();
-  const useSwitchToNamiMode = posthog?.isFeatureFlagEnabled('use-switch-to-nami-mode');
 
   const sidePanelContent = (
     <div>
@@ -45,7 +39,6 @@ export const SettingsLayout = ({
         <SettingsSecurity defaultPassphraseVisible={defaultPassphraseVisible} defaultMnemonic={defaultMnemonic} />
         <SettingsHelp />
         <SettingsLegal />
-        {useSwitchToNamiMode && !isSharedWallet && <SettingsSwitchToNami />}
         <SettingsRemoveWallet />
       </SectionLayout>
     </Layout>

diff --git a/...nsion-wallet/src/views/browser-view/features/settings/components/SettingsSwitchToNami.tsx b/...nsion-wallet/src/views/browser-view/features/settings/components/SettingsSwitchToNami.tsx
diff --git a/packages/translation/src/lib/translations/browser-extension-wallet/en.json b/packages/translation/src/lib/translations/browser-extension-wallet/en.json
@@ -246,8 +246,6 @@
   "browserView.settings.help.support.title": "Support",
   "browserView.settings.help.title": "Support",
   "browserView.settings.legacyMode.section": "Nami mode",
-  "browserView.settings.legacyMode.interface.description1": "Revert to the Nami Wallet interface.",
-  "browserView.settings.legacyMode.interface.description2": "Some Lace features will not be available.",
   "browserView.settings.legacyMode.confirmation.title": "You're about to activate Nami mode.",
   "browserView.settings.legacyMode.confirmation.description": "In legacy mode, some Lace features will not be available. You can revert back to Lace at any point.",
   "browserView.settings.legacyMode.confirmation.cancel": "Back",