feat: move pin extension notification to main screen (#902)

* feat: move pin extension notification to main screen * fix: start notification timeout only when modal is close * fix: notification useEffect improvement
input-output-hk · Mar 5, 2024 · 47906a0 · 47906a0
1 parent 87b66a6
commit 47906a0
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 12 deletions.
diff --git a/apps/browser-extension-wallet/src/types/local-storage.ts b/apps/browser-extension-wallet/src/types/local-storage.ts
@@ -54,4 +54,5 @@ export interface ILocalStorage {
   multidelegationFirstVisitSincePortfolioPersistence?: boolean;
   unconfirmedTransactions: UnconfirmedTransaction[];
   stakingBrowserPreferences: StakingBrowserPreferences;
+  showPinExtension?: boolean;
 }
diff --git a/apps/browser-extension-wallet/src/views/browser-view/components/Layout/Layout.module.scss b/apps/browser-extension-wallet/src/views/browser-view/components/Layout/Layout.module.scss
@@ -118,3 +118,10 @@ $main-gap: 49px;
     @include content_grid($col-width-large, $grid-gap-large);
   }
 }
+
+.pinExtension {
+  position: absolute;
+  top: 10px;
+  right: 80px;
+  z-index: 100;
+}
diff --git a/apps/browser-extension-wallet/src/views/browser-view/components/Layout/Layout.tsx b/apps/browser-extension-wallet/src/views/browser-view/components/Layout/Layout.tsx
@@ -12,6 +12,8 @@ import { DrawerContent, DrawerUIContainer } from '../Drawer';
 import { useNetworkError } from '@hooks/useNetworkError';
 import { LeftSidePanel } from '../LeftSidePanel';
 import styles from './Layout.module.scss';
+import { PinExtension } from '@views/browser/features/wallet-setup/components/PinExtension';
+import { useLocalStorage } from '@hooks';
 
 interface LayoutProps {
   children: React.ReactNode;
@@ -21,13 +23,17 @@ interface LayoutProps {
 
 const toastThrottle = 500;
 const isFlexible = process.env.USE_DESKTOP_LAYOUT === 'true';
+const PIN_EXTENSION_TIMEOUT = 5000;
 
 export const Layout = ({ children, drawerUIDefaultContent, isFullWidth }: LayoutProps): React.ReactElement => {
   const { t } = useTranslation();
   const [, setDrawerConfig] = useDrawer();
   const { theme, setTheme } = useTheme();
   const backgroundServices = useBackgroundServiceAPIContext();
 
+  const [showPinExtension, { updateLocalStorage: setShowPinExtension }] = useLocalStorage('showPinExtension', true);
+  const [showDappBetaModal] = useLocalStorage('showDappBetaModal', true);
+
   useEffect(() => {
     const openDrawer = async () => {
       const backgroundStorage = await backgroundServices.getBackgroundStorage();
@@ -50,6 +56,16 @@ export const Layout = ({ children, drawerUIDefaultContent, isFullWidth }: Layout
     return () => subscription.unsubscribe();
   }, [backgroundServices, setTheme]);
 
+  useEffect(() => {
+    if (showDappBetaModal) return;
+    const timer = window.setTimeout(() => {
+      setShowPinExtension(false);
+    }, PIN_EXTENSION_TIMEOUT);
+
+    // eslint-disable-next-line consistent-return
+    return () => window.clearTimeout(timer);
+  }, [setShowPinExtension, showDappBetaModal]);
+
   const debouncedToast = useMemo(() => debounce(toast.notify, toastThrottle), []);
   const showNetworkError = useCallback(
     () => debouncedToast({ text: t('general.errors.networkError') }),
@@ -64,6 +80,11 @@ export const Layout = ({ children, drawerUIDefaultContent, isFullWidth }: Layout
       className={classnames(styles.layoutGridContainer, isFullWidth && styles.fullWidth, isFlexible && styles.flexible)}
     >
       <LeftSidePanel theme={theme.name} />
+      {showPinExtension && (
+        <div className={styles.pinExtension}>
+          <PinExtension />
+        </div>
+      )}
       {children}
       <DrawerUIContainer defaultContent={drawerUIDefaultContent} />
     </div>

diff --git a/...on-wallet/src/views/browser-view/features/dapp/components/DappBetaModal/DappBetaModal.tsx b/...on-wallet/src/views/browser-view/features/dapp/components/DappBetaModal/DappBetaModal.tsx
@@ -1,26 +1,25 @@
 import { useExternalLinkOpener } from '@providers';
-import { getValueFromLocalStorage, saveValueInLocalStorage } from '@src/utils/local-storage';
 import { WarningModal } from '@src/views/browser-view/components';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useLocalStorage } from '@hooks';
 
 export const DappBetaModal = (): React.ReactElement => {
   const { t } = useTranslation();
   const [isModalVisible, setIsModalVisible] = useState(false);
+  const [showDappBetaModal, { updateLocalStorage: setShowDappBetaModal }] = useLocalStorage('showDappBetaModal', true);
   const openExternalLink = useExternalLinkOpener();
 
   useEffect(() => {
-    const showDappBetaModal = getValueFromLocalStorage('showDappBetaModal', true);
     setIsModalVisible(showDappBetaModal);
-  }, []);
+  }, [showDappBetaModal]);
 
   const onClose = () => {
-    saveValueInLocalStorage({ key: 'showDappBetaModal', value: false });
+    setShowDappBetaModal(false);
     setIsModalVisible(false);
   };
 
   const onLearnMore = () => {
-    const showDappBetaModal = getValueFromLocalStorage('showDappBetaModal', true);
     if (showDappBetaModal) openExternalLink(process.env.FAQ_URL);
     onClose();
   };

diff --git a/...ion-wallet/src/views/browser-view/features/wallet-setup/components/HardwareWalletFlow.tsx b/...ion-wallet/src/views/browser-view/features/wallet-setup/components/HardwareWalletFlow.tsx
@@ -15,7 +15,6 @@ import React, { useState, useCallback, useEffect } from 'react';
 import { Switch, Route, useHistory, useLocation } from 'react-router-dom';
 import { Wallet } from '@lace/cardano';
 import { WalletSetupLayout } from '@src/views/browser-view/components/Layout';
-import { PinExtension } from './PinExtension';
 import { ErrorDialog, HWErrorCode } from './ErrorDialog';
 import { StartOverDialog } from '@views/browser/features/wallet-setup/components/StartOverDialog';
 import { useTranslation } from 'react-i18next';
@@ -320,7 +319,7 @@ export const HardwareWalletFlow = ({
         onStartOver={handleStartOver}
         onClose={() => setIsStartOverDialogVisible(false)}
       />
-      <WalletSetupLayout prompt={location.pathname.endsWith('finish') ? <PinExtension /> : undefined}>
+      <WalletSetupLayout>
         <Switch>
           <Route path={route('analytics')}>{hardwareWalletStepRenderFunctions.analytics()}</Route>
           <Route path={route('connect')}>{hardwareWalletStepRenderFunctions.connect()}</Route>

diff --git a/...n-wallet/src/views/browser-view/features/wallet-setup/components/PinExtension.module.scss b/...n-wallet/src/views/browser-view/features/wallet-setup/components/PinExtension.module.scss
@@ -7,7 +7,7 @@
   gap: size_unit(2);
   width: 300px;
   padding: size_unit(2);
-  background: var(--color-white, var(--dark-mode-dark-grey-plus));
+  background: var(--primary-default, #7E5BF0);
   box-shadow: var(--shadows-lighter-assets);
   border-radius: 11px;
 
@@ -25,12 +25,12 @@
 
     h5 {
       @include text-bodySmall-bold;
-      color: var(--text-color-primary);
+      color: var(--text-color-white, #ffffff) !important;
     }
 
     p {
       @include text-bodySmall-semi-bold;
-      color: var(--text-color-secondary);
+      color: var(--text-color-white, #ffffff);
       display: flex;
       align-items: center;
       gap: 4px;

diff --git a/...sion-wallet/src/views/browser-view/features/wallet-setup/components/WalletSetupWizard.tsx b/...sion-wallet/src/views/browser-view/features/wallet-setup/components/WalletSetupWizard.tsx
@@ -28,7 +28,6 @@ import {
 } from '@providers/AnalyticsProvider/analyticsTracker';
 import { config } from '@src/config';
 
-import { PinExtension } from './PinExtension';
 import { Fallback } from './Fallback';
 
 import { passwordTranslationMap } from '../constants';
@@ -449,7 +448,7 @@ export const WalletSetupWizard = ({
   }, [shouldDisplayExperiment]);
 
   return (
-    <WalletSetupLayout prompt={currentStep === WalletSetupSteps.Finish ? <PinExtension /> : undefined}>
+    <WalletSetupLayout>
       {currentStep === WalletSetupSteps.Legal && (
         <WalletSetupLegalStep
           onBack={moveBack}