From 64e3bbc422948f7f3b516183702dfdc3c5a1258b Mon Sep 17 00:00:00 2001 From: Pete Watters <2938440+pete-watters@users.noreply.github.com> Date: Mon, 19 Aug 2024 09:44:32 +0100 Subject: [PATCH 1/5] fix: do not capitalise add network --- src/app/features/add-network/add-network.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/features/add-network/add-network.tsx b/src/app/features/add-network/add-network.tsx index 22ce48149de..295347d049f 100644 --- a/src/app/features/add-network/add-network.tsx +++ b/src/app/features/add-network/add-network.tsx @@ -16,7 +16,7 @@ export function AddNetwork() { return ( <> - + From fcf0e0a584fead6b96dfa228adb275c6e3c0f555 Mon Sep 17 00:00:00 2001 From: Pete Watters <2938440+pete-watters@users.noreply.github.com> Date: Mon, 19 Aug 2024 13:55:56 +0100 Subject: [PATCH 2/5] fix: add default true to show settings to make sure it shows for locked screens, closes #5777 --- src/app/features/container/headers/page.header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/features/container/headers/page.header.tsx b/src/app/features/container/headers/page.header.tsx index acce74e4244..1e574c30b8c 100644 --- a/src/app/features/container/headers/page.header.tsx +++ b/src/app/features/container/headers/page.header.tsx @@ -28,7 +28,7 @@ export function PageHeader({ title, isSummaryPage, isSessionLocked, - isSettingsVisibleOnSm, + isSettingsVisibleOnSm = true, onBackLocation, }: PageHeaderProps) { const { isShowingSwitchAccount, setIsShowingSwitchAccount } = From e7aa1d39bf0624e1a02d758606553c5c52d03b67 Mon Sep 17 00:00:00 2001 From: Pete Watters <2938440+pete-watters@users.noreply.github.com> Date: Mon, 19 Aug 2024 14:48:51 +0100 Subject: [PATCH 3/5] fix: make headers more composable, prevent logo hover, closes leather-io/issues#4597 --- .../components/layout/headers/logo-box.tsx | 32 +++-------- .../container/headers/home.header.tsx | 33 ++++++++++++ ...{main.header.tsx => onboarding.header.tsx} | 21 ++++---- .../container/headers/page.header.tsx | 8 ++- .../container/headers/unlock.header.tsx | 53 +++++++++++++++++++ .../back-up-secret-key/back-up-secret-key.tsx | 4 +- .../onboarding/set-password/set-password.tsx | 4 +- src/app/pages/onboarding/sign-in/sign-in.tsx | 4 +- src/app/pages/unlock.tsx | 4 +- .../pages/view-secret-key/view-secret-key.tsx | 6 +-- src/app/routes/app-routes.tsx | 4 +- 11 files changed, 119 insertions(+), 54 deletions(-) create mode 100644 src/app/features/container/headers/home.header.tsx rename src/app/features/container/headers/{main.header.tsx => onboarding.header.tsx} (75%) create mode 100644 src/app/features/container/headers/unlock.header.tsx diff --git a/src/app/components/layout/headers/logo-box.tsx b/src/app/components/layout/headers/logo-box.tsx index cc33a7d529b..98e241e3c8e 100644 --- a/src/app/components/layout/headers/logo-box.tsx +++ b/src/app/components/layout/headers/logo-box.tsx @@ -1,34 +1,16 @@ -import { useLocation, useNavigate } from 'react-router-dom'; - import { OnboardingSelectors } from '@tests/selectors/onboarding.selectors'; -import { Box } from 'leather-styles/jsx'; +import { Box, BoxProps } from 'leather-styles/jsx'; import { Logo } from '@leather.io/ui'; -import { RouteUrls } from '@shared/route-urls'; - -export function LogoBox({ isSessionLocked }: { isSessionLocked?: boolean | undefined }) { - const navigate = useNavigate(); - const location = useLocation(); - - const shouldShowLogo = - location.pathname === RouteUrls.Home || location.pathname === RouteUrls.Activity; - - const hideBelow = shouldShowLogo ? undefined : isSessionLocked ? undefined : 'sm'; - const hideFrom = shouldShowLogo ? undefined : isSessionLocked ? 'sm' : undefined; +interface LogoBoxProps extends BoxProps { + onClick?(): void; +} +export function LogoBox({ onClick, ...props }: LogoBoxProps) { return ( - - navigate(RouteUrls.Home)} - /> + + ); } diff --git a/src/app/features/container/headers/home.header.tsx b/src/app/features/container/headers/home.header.tsx new file mode 100644 index 00000000000..b194920072f --- /dev/null +++ b/src/app/features/container/headers/home.header.tsx @@ -0,0 +1,33 @@ +import { useOutletContext } from 'react-router-dom'; + +import { SettingsSelectors } from '@tests/selectors/settings.selectors'; + +import { HamburgerIcon } from '@leather.io/ui'; + +import { SwitchAccountOutletContext } from '@shared/switch-account'; + +import { Header } from '@app/components/layout/headers/header'; +import { HeaderGrid, HeaderGridRightCol } from '@app/components/layout/headers/header-grid'; +import { LogoBox } from '@app/components/layout/headers/logo-box'; +import { Settings } from '@app/features/settings/settings'; + +export function HomeHeader() { + const { isShowingSwitchAccount, setIsShowingSwitchAccount } = + useOutletContext(); + + return ( +
+ } + rightCol={ + + } + toggleSwitchAccount={() => setIsShowingSwitchAccount(!isShowingSwitchAccount)} + /> + + } + /> +
+ ); +} diff --git a/src/app/features/container/headers/main.header.tsx b/src/app/features/container/headers/onboarding.header.tsx similarity index 75% rename from src/app/features/container/headers/main.header.tsx rename to src/app/features/container/headers/onboarding.header.tsx index 181f54031c7..888e881171f 100644 --- a/src/app/features/container/headers/main.header.tsx +++ b/src/app/features/container/headers/onboarding.header.tsx @@ -5,6 +5,7 @@ import { SharedComponentsSelectors } from '@tests/selectors/shared-component.sel import { ArrowLeftIcon, HamburgerIcon } from '@leather.io/ui'; +import { RouteUrls } from '@shared/route-urls'; import { SwitchAccountOutletContext } from '@shared/switch-account'; import { Header } from '@app/components/layout/headers/header'; @@ -13,29 +14,27 @@ import { HeaderGrid, HeaderGridRightCol } from '@app/components/layout/headers/h import { LogoBox } from '@app/components/layout/headers/logo-box'; import { Settings } from '@app/features/settings/settings'; -interface MainHeaderProps { - hideBackButton?: boolean; +interface OnboardingHeaderProps { hideLogo?: boolean; } -export function MainHeader({ hideBackButton = false, hideLogo = false }: MainHeaderProps) { +export function OnboardingHeader({ hideLogo = false }: OnboardingHeaderProps) { const { isShowingSwitchAccount, setIsShowingSwitchAccount } = useOutletContext(); const navigate = useNavigate(); + return ( <>
- {!hideBackButton && ( - } - onAction={() => navigate(-1)} - dataTestId={SharedComponentsSelectors.HeaderBackBtn} - /> - )} - {!hideLogo && } + } + onAction={() => navigate(-1)} + dataTestId={SharedComponentsSelectors.HeaderBackBtn} + /> + {!hideLogo && navigate(RouteUrls.Home)} />} } rightCol={ diff --git a/src/app/features/container/headers/page.header.tsx b/src/app/features/container/headers/page.header.tsx index 1e574c30b8c..7871903f64d 100644 --- a/src/app/features/container/headers/page.header.tsx +++ b/src/app/features/container/headers/page.header.tsx @@ -18,7 +18,6 @@ import { Settings } from '@app/features/settings/settings'; interface PageHeaderProps { title?: string; isSummaryPage?: boolean; - isSessionLocked?: boolean; isSettingsVisibleOnSm?: boolean; onBackLocation?: RouteUrls; onClose?(): void; @@ -26,8 +25,7 @@ interface PageHeaderProps { export function PageHeader({ title, - isSummaryPage, - isSessionLocked, + isSummaryPage = false, isSettingsVisibleOnSm = true, onBackLocation, }: PageHeaderProps) { @@ -37,7 +35,7 @@ export function PageHeader({ // pages with nested dialogs specify onBackLocation to prevent navigate(-1) re-opening the dialog const onGoBack = onBackLocation ? () => navigate(onBackLocation) : () => navigate(-1); - const canGoBack = !isSummaryPage && !isSessionLocked; + const canGoBack = !isSummaryPage; return ( <> @@ -52,7 +50,7 @@ export function PageHeader({ dataTestId={SharedComponentsSelectors.HeaderBackBtn} /> )} - + navigate(RouteUrls.Home)} /> } centerCol={title && {title}} diff --git a/src/app/features/container/headers/unlock.header.tsx b/src/app/features/container/headers/unlock.header.tsx new file mode 100644 index 00000000000..288e102df43 --- /dev/null +++ b/src/app/features/container/headers/unlock.header.tsx @@ -0,0 +1,53 @@ +import { useNavigate, useOutletContext } from 'react-router-dom'; + +import { SettingsSelectors } from '@tests/selectors/settings.selectors'; +import { SharedComponentsSelectors } from '@tests/selectors/shared-component.selectors'; + +import { ArrowLeftIcon, HamburgerIcon } from '@leather.io/ui'; + +import { RouteUrls } from '@shared/route-urls'; +import { SwitchAccountOutletContext } from '@shared/switch-account'; + +import { Header } from '@app/components/layout/headers/header'; +import { HeaderActionButton } from '@app/components/layout/headers/header-action-button'; +import { HeaderGrid, HeaderGridRightCol } from '@app/components/layout/headers/header-grid'; +import { LogoBox } from '@app/components/layout/headers/logo-box'; +import { Settings } from '@app/features/settings/settings'; + +export function UnlockHeader() { + const { isShowingSwitchAccount, setIsShowingSwitchAccount } = + useOutletContext(); + const navigate = useNavigate(); + + return ( + <> +
+ + } + onAction={() => navigate(-1)} + dataTestId={SharedComponentsSelectors.HeaderBackBtn} + /> + + navigate(RouteUrls.Home)} + hideBelow={undefined} + hideFrom="sm" + /> + + } + rightCol={ + + } + toggleSwitchAccount={() => setIsShowingSwitchAccount(!isShowingSwitchAccount)} + /> + + } + /> +
+ + ); +} diff --git a/src/app/pages/onboarding/back-up-secret-key/back-up-secret-key.tsx b/src/app/pages/onboarding/back-up-secret-key/back-up-secret-key.tsx index e44a75f6a75..6ec43938a1d 100644 --- a/src/app/pages/onboarding/back-up-secret-key/back-up-secret-key.tsx +++ b/src/app/pages/onboarding/back-up-secret-key/back-up-secret-key.tsx @@ -8,7 +8,7 @@ import { EyeSlashIcon, KeyIcon, LockIcon } from '@leather.io/ui'; import { RouteUrls } from '@shared/route-urls'; import { Content, TwoColumnLayout } from '@app/components/layout'; -import { MainHeader } from '@app/features/container/headers/main.header'; +import { OnboardingHeader } from '@app/features/container/headers/onboarding.header'; import { SecretKey } from '@app/features/secret-key-displayer/secret-key-displayer'; import { useDefaultWalletSecretKey } from '@app/store/in-memory-key/in-memory-key.selectors'; @@ -24,7 +24,7 @@ export const BackUpSecretKeyPage = memo(() => { return ( <> - + - + - + - + diff --git a/src/app/pages/view-secret-key/view-secret-key.tsx b/src/app/pages/view-secret-key/view-secret-key.tsx index 82a5a97a0fd..1e9feec5135 100644 --- a/src/app/pages/view-secret-key/view-secret-key.tsx +++ b/src/app/pages/view-secret-key/view-secret-key.tsx @@ -5,7 +5,7 @@ import { analytics } from '@shared/utils/analytics'; import { Content, TwoColumnLayout } from '@app/components/layout'; import { RequestPassword } from '@app/components/request-password'; -import { MainHeader } from '@app/features/container/headers/main.header'; +import { OnboardingHeader } from '@app/features/container/headers/onboarding.header'; import { SecretKey } from '@app/features/secret-key-displayer/secret-key-displayer'; import { useDefaultWalletSecretKey } from '@app/store/in-memory-key/in-memory-key.selectors'; @@ -20,7 +20,7 @@ export function ViewSecretKey() { if (showSecretKey) { return ( <> - + - + setShowSecretKey(true)} /> diff --git a/src/app/routes/app-routes.tsx b/src/app/routes/app-routes.tsx index 6392f92875c..e340e1781c7 100644 --- a/src/app/routes/app-routes.tsx +++ b/src/app/routes/app-routes.tsx @@ -15,7 +15,7 @@ import { SwitchAccountLayout } from '@app/components/layout/layouts/switch-accou import { LoadingSpinner } from '@app/components/loading-spinner'; import { AddNetwork } from '@app/features/add-network/add-network'; import { Container } from '@app/features/container/container'; -import { MainHeader } from '@app/features/container/headers/main.header'; +import { HomeHeader } from '@app/features/container/headers/home.header'; import { IncreaseBtcFeeDialog } from '@app/features/dialogs/increase-fee-dialog/increase-btc-fee-dialog'; import { IncreaseStxFeeDialog } from '@app/features/dialogs/increase-fee-dialog/increase-stx-fee-dialog'; import { leatherIntroDialogRoutes } from '@app/features/dialogs/leather-intro-dialog/leather-intro-dialog'; @@ -82,7 +82,7 @@ function useAppRoutes() { - + From 2539c1a2ad5d689f00c1441cca9e657c34927d8b Mon Sep 17 00:00:00 2001 From: Pete Watters <2938440+pete-watters@users.noreply.github.com> Date: Wed, 21 Aug 2024 13:43:33 +0100 Subject: [PATCH 4/5] chore: remove back button on unlock screen and remove fragment --- .../container/headers/unlock.header.tsx | 48 +++++++------------ 1 file changed, 16 insertions(+), 32 deletions(-) diff --git a/src/app/features/container/headers/unlock.header.tsx b/src/app/features/container/headers/unlock.header.tsx index 288e102df43..30d76864eb6 100644 --- a/src/app/features/container/headers/unlock.header.tsx +++ b/src/app/features/container/headers/unlock.header.tsx @@ -1,15 +1,13 @@ import { useNavigate, useOutletContext } from 'react-router-dom'; import { SettingsSelectors } from '@tests/selectors/settings.selectors'; -import { SharedComponentsSelectors } from '@tests/selectors/shared-component.selectors'; -import { ArrowLeftIcon, HamburgerIcon } from '@leather.io/ui'; +import { HamburgerIcon } from '@leather.io/ui'; import { RouteUrls } from '@shared/route-urls'; import { SwitchAccountOutletContext } from '@shared/switch-account'; import { Header } from '@app/components/layout/headers/header'; -import { HeaderActionButton } from '@app/components/layout/headers/header-action-button'; import { HeaderGrid, HeaderGridRightCol } from '@app/components/layout/headers/header-grid'; import { LogoBox } from '@app/components/layout/headers/logo-box'; import { Settings } from '@app/features/settings/settings'; @@ -20,34 +18,20 @@ export function UnlockHeader() { const navigate = useNavigate(); return ( - <> -
- - } - onAction={() => navigate(-1)} - dataTestId={SharedComponentsSelectors.HeaderBackBtn} - /> - - navigate(RouteUrls.Home)} - hideBelow={undefined} - hideFrom="sm" - /> - - } - rightCol={ - - } - toggleSwitchAccount={() => setIsShowingSwitchAccount(!isShowingSwitchAccount)} - /> - - } - /> -
- +
+ navigate(RouteUrls.Home)} hideBelow={undefined} hideFrom="sm" /> + } + rightCol={ + + } + toggleSwitchAccount={() => setIsShowingSwitchAccount(!isShowingSwitchAccount)} + /> + + } + /> +
); } From c2aaea52c3dfe30cc50d38f0afb61b1a15bd9c3d Mon Sep 17 00:00:00 2001 From: Pete Watters <2938440+pete-watters@users.noreply.github.com> Date: Wed, 21 Aug 2024 13:49:27 +0100 Subject: [PATCH 5/5] chore: hide lock option if wallet already locked --- src/app/components/layout/footer/footer.tsx | 3 +-- .../features/container/headers/unlock.header.tsx | 7 ++----- src/app/features/settings/settings.tsx | 15 ++++++++++----- 3 files changed, 13 insertions(+), 12 deletions(-) diff --git a/src/app/components/layout/footer/footer.tsx b/src/app/components/layout/footer/footer.tsx index 9343c63bb30..dbd6dc5c90f 100644 --- a/src/app/components/layout/footer/footer.tsx +++ b/src/app/components/layout/footer/footer.tsx @@ -9,8 +9,7 @@ export function Footer({ children, ...props }: HasChildren & FlexProps) { gap="space.05" p="space.05" bottom={0} - width="100vw" - maxWidth="100%" + width="100%" zIndex={1} minHeight="footerHeight" position="fixed" diff --git a/src/app/features/container/headers/unlock.header.tsx b/src/app/features/container/headers/unlock.header.tsx index 30d76864eb6..13852efc292 100644 --- a/src/app/features/container/headers/unlock.header.tsx +++ b/src/app/features/container/headers/unlock.header.tsx @@ -1,11 +1,10 @@ -import { useNavigate, useOutletContext } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; import { SettingsSelectors } from '@tests/selectors/settings.selectors'; import { HamburgerIcon } from '@leather.io/ui'; import { RouteUrls } from '@shared/route-urls'; -import { SwitchAccountOutletContext } from '@shared/switch-account'; import { Header } from '@app/components/layout/headers/header'; import { HeaderGrid, HeaderGridRightCol } from '@app/components/layout/headers/header-grid'; @@ -13,8 +12,6 @@ import { LogoBox } from '@app/components/layout/headers/logo-box'; import { Settings } from '@app/features/settings/settings'; export function UnlockHeader() { - const { isShowingSwitchAccount, setIsShowingSwitchAccount } = - useOutletContext(); const navigate = useNavigate(); return ( @@ -26,8 +23,8 @@ export function UnlockHeader() { rightCol={ } - toggleSwitchAccount={() => setIsShowingSwitchAccount(!isShowingSwitchAccount)} /> } diff --git a/src/app/features/settings/settings.tsx b/src/app/features/settings/settings.tsx index b6756b46988..8dac8e07c62 100644 --- a/src/app/features/settings/settings.tsx +++ b/src/app/features/settings/settings.tsx @@ -44,10 +44,15 @@ import { AdvancedMenuItems } from './components/advanced-menu-items'; import { LedgerDeviceItemRow } from './components/ledger-item-row'; interface SettingsProps { + canLockWallet?: boolean; triggerButton: React.ReactNode; - toggleSwitchAccount(): void; + toggleSwitchAccount?(): void; } -export function Settings({ triggerButton, toggleSwitchAccount }: SettingsProps) { +export function Settings({ + canLockWallet = true, + triggerButton, + toggleSwitchAccount, +}: SettingsProps) { const [showSignOut, setShowSignOut] = useState(false); const [showChangeTheme, setShowChangeTheme] = useState(false); const [showChangeNetwork, setShowChangeNetwork] = useState(false); @@ -70,7 +75,7 @@ export function Settings({ triggerButton, toggleSwitchAccount }: SettingsProps) () => [ showAdvancedMenuOptions && , - hasKeys && walletType === 'software' && ( + canLockWallet && hasKeys && walletType === 'software' && ( { void analytics.track('lock_session'); @@ -96,7 +101,7 @@ export function Settings({ triggerButton, toggleSwitchAccount }: SettingsProps) ), ].filter(Boolean), - [hasKeys, lockWallet, navigate, showAdvancedMenuOptions, showSignOut, walletType] + [canLockWallet, hasKeys, lockWallet, navigate, showAdvancedMenuOptions, showSignOut, walletType] ); return ( @@ -120,7 +125,7 @@ export function Settings({ triggerButton, toggleSwitchAccount }: SettingsProps) )} - {hasKeys && ( + {hasKeys && toggleSwitchAccount && (