chore: refactor headers to favour composition over configuration

leather-io · Aug 21, 2024 · 54e2cb5 · 54e2cb5
1 parent 6a9363a
commit 54e2cb5
Show file tree

Hide file tree

Showing 11 changed files with 115 additions and 49 deletions.
diff --git a/src/app/components/layout/headers/logo-box.tsx b/src/app/components/layout/headers/logo-box.tsx
@@ -1,33 +1,16 @@
-import { 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';
-
-interface LogoBoxProps {
-  isHomePage?: boolean;
-  isSessionLocked?: boolean;
+interface LogoBoxProps extends BoxProps {
+  onClick?(): void;
 }
 
-export function LogoBox({ isHomePage = false, isSessionLocked = false }: LogoBoxProps) {
-  const navigate = useNavigate();
-
+export function LogoBox({ onClick, ...props }: LogoBoxProps) {
   return (
-    <Box
-      height="headerContainerHeight"
-      margin="auto"
-      px="space.02"
-      // Logo must always appear on Home but disappear on ROUTE_URLS.UNLOCK large view
-      hideBelow={isHomePage || isSessionLocked ? undefined : 'sm'}
-      hideFrom={!isHomePage && isSessionLocked ? 'sm' : undefined}
-    >
-      <Logo
-        data-testid={OnboardingSelectors.LogoRouteToHome}
-        onClick={() => navigate(RouteUrls.Home)}
-      />
+    <Box height="headerContainerHeight" margin="auto" px="space.02" hideBelow="sm" {...props}>
+      <Logo data-testid={OnboardingSelectors.LogoRouteToHome} onClick={onClick} />
     </Box>
   );
 }
diff --git a/src/app/features/container/headers/home.header.tsx 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<SwitchAccountOutletContext>();
+
+  return (
+    <Header paddingLeft={{ base: undefined, sm: 0 }}>
+      <HeaderGrid
+        leftCol={<LogoBox />}
+        rightCol={
+          <HeaderGridRightCol>
+            <Settings
+              triggerButton={<HamburgerIcon data-testid={SettingsSelectors.SettingsMenuBtn} />}
+              toggleSwitchAccount={() => setIsShowingSwitchAccount(!isShowingSwitchAccount)}
+            />
+          </HeaderGridRightCol>
+        }
+      />
+    </Header>
+  );
+}
diff --git a/...eatures/container/headers/main.header.tsx → ...s/container/headers/onboarding.header.tsx b/...eatures/container/headers/main.header.tsx → ...s/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,13 +14,11 @@ 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 {
-  isHomePage?: boolean;
-  hideBackButton?: boolean;
+interface OnboardingHeaderProps {
   hideLogo?: boolean;
 }
 
-export function MainHeader({ isHomePage = false, hideLogo = false }: MainHeaderProps) {
+export function OnboardingHeader({ hideLogo = false }: OnboardingHeaderProps) {
   const { isShowingSwitchAccount, setIsShowingSwitchAccount } =
     useOutletContext<SwitchAccountOutletContext>();
   const navigate = useNavigate();
@@ -30,14 +29,12 @@ export function MainHeader({ isHomePage = false, hideLogo = false }: MainHeaderP
         <HeaderGrid
           leftCol={
             <>
-              {!isHomePage && (
-                <HeaderActionButton
-                  icon={<ArrowLeftIcon />}
-                  onAction={() => navigate(-1)}
-                  dataTestId={SharedComponentsSelectors.HeaderBackBtn}
-                />
-              )}
-              {!hideLogo && <LogoBox isHomePage={isHomePage} />}
+              <HeaderActionButton
+                icon={<ArrowLeftIcon />}
+                onAction={() => navigate(-1)}
+                dataTestId={SharedComponentsSelectors.HeaderBackBtn}
+              />
+              {!hideLogo && <LogoBox onClick={() => navigate(RouteUrls.Home)} />}
             </>
           }
           rightCol={

diff --git a/src/app/features/container/headers/page.header.tsx b/src/app/features/container/headers/page.header.tsx
@@ -52,7 +52,7 @@ export function PageHeader({
                   dataTestId={SharedComponentsSelectors.HeaderBackBtn}
                 />
               )}
-              <LogoBox isSessionLocked={isSessionLocked} />
+              <LogoBox onClick={() => navigate(RouteUrls.Home)} />
             </>
           }
           centerCol={title && <styled.span textStyle="heading.05">{title}</styled.span>}

diff --git a/src/app/features/container/headers/unlock.header.tsx 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<SwitchAccountOutletContext>();
+  const navigate = useNavigate();
+
+  return (
+    <>
+      <Header paddingLeft={{ base: undefined, sm: 0 }}>
+        <HeaderGrid
+          leftCol={
+            <>
+              <HeaderActionButton
+                icon={<ArrowLeftIcon />}
+                onAction={() => navigate(-1)}
+                dataTestId={SharedComponentsSelectors.HeaderBackBtn}
+              />
+
+              <LogoBox
+                onClick={() => navigate(RouteUrls.Home)}
+                hideBelow={undefined}
+                hideFrom="sm"
+              />
+            </>
+          }
+          rightCol={
+            <HeaderGridRightCol>
+              <Settings
+                triggerButton={<HamburgerIcon data-testid={SettingsSelectors.SettingsMenuBtn} />}
+                toggleSwitchAccount={() => setIsShowingSwitchAccount(!isShowingSwitchAccount)}
+              />
+            </HeaderGridRightCol>
+          }
+        />
+      </Header>
+    </>
+  );
+}
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
@@ -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 (
     <>
-      <MainHeader />
+      <OnboardingHeader />
       <Content>
         <TwoColumnLayout
           title="Back up your Secret Key"

diff --git a/src/app/pages/onboarding/set-password/set-password.tsx b/src/app/pages/onboarding/set-password/set-password.tsx
@@ -20,7 +20,7 @@ import {
   validatePassword,
 } from '@app/common/validation/validate-password';
 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 { OnboardingGate } from '@app/routes/onboarding-gate';
 import { useStacksAccounts } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
 
@@ -111,7 +111,7 @@ function SetPasswordPage() {
   });
   return (
     <>
-      <MainHeader />
+      <OnboardingHeader />
       <Content>
         <Formik
           initialValues={setPasswordFormValues}

diff --git a/src/app/pages/onboarding/sign-in/sign-in.tsx b/src/app/pages/onboarding/sign-in/sign-in.tsx
@@ -4,7 +4,7 @@ import { Link } from '@leather.io/ui';
 import { createNullArrayOfLength } from '@leather.io/utils';
 
 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 { MnemonicForm } from '@app/pages/onboarding/sign-in/mnemonic-form';
 
 export function SignIn() {
@@ -20,7 +20,7 @@ export function SignIn() {
 
   return (
     <>
-      <MainHeader />
+      <OnboardingHeader />
       <Content>
         <TwoColumnLayout
           title={

diff --git a/src/app/pages/unlock.tsx b/src/app/pages/unlock.tsx
@@ -2,7 +2,7 @@ import { Outlet, useNavigate } from 'react-router-dom';
 
 import { Content } from '@app/components/layout';
 import { RequestPassword } from '@app/components/request-password';
-import { PageHeader } from '@app/features/container/headers/page.header';
+import { UnlockHeader } from '@app/features/container/headers/unlock.header';
 
 export function Unlock() {
   const navigate = useNavigate();
@@ -12,7 +12,7 @@ export function Unlock() {
 
   return (
     <>
-      <PageHeader isSessionLocked />
+      <UnlockHeader />
       <Content>
         <RequestPassword onSuccess={returnToPreviousRoute} />
         <Outlet />

diff --git 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 (
       <>
-        <MainHeader />
+        <OnboardingHeader />
         <Content>
           <TwoColumnLayout
             title={
@@ -46,7 +46,7 @@ export function ViewSecretKey() {
 
   return (
     <>
-      <MainHeader hideLogo />
+      <OnboardingHeader hideLogo />
       <Content>
         <RequestPassword onSuccess={() => setShowSecretKey(true)} />
         <Outlet />

diff --git 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() {
           <Route
             element={
               <>
-                <MainHeader isHomePage hideBackButton />
+                <HomeHeader />
                 <Content>
                   <SwitchAccountLayout />
                 </Content>