From 1c94112c3734cf286dd3e60ca1d4fe7ed3f9ff7d Mon Sep 17 00:00:00 2001 From: John Oshalusi Date: Tue, 20 Feb 2024 13:50:37 +0100 Subject: [PATCH] feat: move pin extension notification to main screen --- .../src/types/local-storage.ts | 1 + .../components/Layout/Layout.module.scss | 7 +++++++ .../browser-view/components/Layout/Layout.tsx | 17 +++++++++++++++++ .../components/HardwareWalletFlow.tsx | 3 +-- .../components/PinExtension.module.scss | 6 +++--- .../components/WalletSetupWizard.tsx | 3 +-- 6 files changed, 30 insertions(+), 7 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..7d4ed1d9d 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,8 @@ export const Layout = ({ children, drawerUIDefaultContent, isFullWidth }: Layout const { theme, setTheme } = useTheme(); const backgroundServices = useBackgroundServiceAPIContext(); + const [showPinExtension, { updateLocalStorage: setShowPinExtension }] = useLocalStorage('showPinExtension', true); + useEffect(() => { const openDrawer = async () => { const backgroundStorage = await backgroundServices.getBackgroundStorage(); @@ -50,6 +55,13 @@ export const Layout = ({ children, drawerUIDefaultContent, isFullWidth }: Layout return () => subscription.unsubscribe(); }, [backgroundServices, setTheme]); + useEffect(() => { + const timer = setTimeout(() => { + setShowPinExtension(false); + }, PIN_EXTENSION_TIMEOUT); + return () => clearTimeout(timer); + }, [setShowPinExtension]); + const debouncedToast = useMemo(() => debounce(toast.notify, toastThrottle), []); const showNetworkError = useCallback( () => debouncedToast({ text: t('general.errors.networkError') }), @@ -64,6 +76,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/wallet-setup/components/HardwareWalletFlow.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/wallet-setup/components/HardwareWalletFlow.tsx index 558665f97..eb1525cd8 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'; @@ -324,7 +323,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 && (