From 1418d6685010175dba08b8ec0fcb3607f3622628 Mon Sep 17 00:00:00 2001 From: John Oshalusi Date: Thu, 29 Feb 2024 15:11:55 +0100 Subject: [PATCH] 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 --- .../src/types/local-storage.ts | 1 + .../components/Layout/Layout.module.scss | 7 +++++++ .../browser-view/components/Layout/Layout.tsx | 21 +++++++++++++++++++ .../DappBetaModal/DappBetaModal.tsx | 9 ++++---- .../components/HardwareWalletFlow.tsx | 3 +-- .../components/PinExtension.module.scss | 6 +++--- .../components/WalletSetupWizard.tsx | 3 +-- 7 files changed, 38 insertions(+), 12 deletions(-) diff --git a/apps/browser-extension-wallet/src/types/local-storage.ts b/apps/browser-extension-wallet/src/types/local-storage.ts index cca276bb4..4e7b152d1 100644 --- 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 index 13eb2fd04..b78daef77 100644 --- 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 index b70c0faf0..e4c08b0e6 100644 --- 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,6 +23,7 @@ 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(); @@ -28,6 +31,9 @@ export const Layout = ({ children, drawerUIDefaultContent, isFullWidth }: Layout 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)} > + {showPinExtension && ( +
+ +
+ )} {children} diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/components/DappBetaModal/DappBetaModal.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/components/DappBetaModal/DappBetaModal.tsx index 75e025c88..da1f8a04e 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/components/DappBetaModal/DappBetaModal.tsx +++ b/apps/browser-extension-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/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/HardwareWalletFlow.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/HardwareWalletFlow.tsx index a4271c368..436add464 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/HardwareWalletFlow.tsx +++ b/apps/browser-extension-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)} /> - : undefined}> + {hardwareWalletStepRenderFunctions.analytics()} {hardwareWalletStepRenderFunctions.connect()} diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/PinExtension.module.scss b/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/PinExtension.module.scss index e57fda519..52cf2f14a 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/PinExtension.module.scss +++ b/apps/browser-extension-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/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/WalletSetupWizard.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/WalletSetupWizard.tsx index eec47d192..397a7b839 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/WalletSetupWizard.tsx +++ b/apps/browser-extension-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 ( - : undefined}> + {currentStep === WalletSetupSteps.Legal && (