chore: wip

src/app/features/container/containers/home/home.layout.tsx

@@ -10,8 +10,7 @@ import { Settings } from '../../../settings/settings';
 import { ContainerLayout } from '../container.layout';
 import { HomeHeader } from './home-header';
 
-// props need to be optional because of the way the container is structured
-// they aren't provided in app-routes and are instead fed via the outlet context
+// props are optional as populated by the outlet context
 interface HomeLayoutProps {
   children?: React.JSX.Element | React.JSX.Element[];
   isShowingSwitchAccount?: boolean;

src/app/features/container/containers/page/page.context.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, createContext, useContext, useEffect, useReducer, useRef } from 'react';
+import { ReactNode, createContext, useContext, useEffect, useReducer } from 'react';
 
 import { RouteUrls } from '@shared/route-urls';
 

src/app/features/container/containers/page/page.header.tsx

@@ -1,19 +1,16 @@
-import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { ChainID } from '@stacks/transactions';
 import { OnboardingSelectors } from '@tests/selectors/onboarding.selectors';
-import { SettingsSelectors } from '@tests/selectors/settings.selectors';
 import { SharedComponentsSelectors } from '@tests/selectors/shared-component.selectors';
 import { Box, Flex, Grid, GridItem, HStack, styled } from 'leather-styles/jsx';
 
-import { ArrowLeftIcon, CloseIcon, HamburgerIcon, Logo, NetworkModeBadge } from '@leather.io/ui';
+import { ArrowLeftIcon, CloseIcon, Logo, NetworkModeBadge } from '@leather.io/ui';
 
 import { RouteUrls } from '@shared/route-urls';
 
 import { useCurrentNetworkState } from '@app/store/networks/networks.hooks';
 
-import { Settings } from '../../../settings/settings';
 import { HeaderActionButton } from '../headers/components/header-action-button';
 import { usePageContext } from './page.context';
 
@@ -39,11 +36,16 @@ function LogoBox({ isSessionLocked }: { isSessionLocked: boolean | undefined })
   );
 }
 
-export function PageHeader() {
+interface PageHeaderProps {
+  // isShowingSwitchAccount?: boolean;
+  // setIsShowingSwitchAccount?(isShowingSwitchAccount: boolean): void;
+  settingsMenu: React.ReactNode;
+}
+
+export function PageHeader({ settingsMenu }: PageHeaderProps) {
   const navigate = useNavigate();
   const { chain, name: chainName } = useCurrentNetworkState();
 
-  const [isShowingSwitchAccount, setIsShowingSwitchAccount] = useState(false);
   const {
     state: { title, isSummaryPage, isSessionLocked, isSettingsVisibleOnSm, onBackLocation },
   } = usePageContext();
@@ -89,15 +91,9 @@ export function PageHeader() {
             />
 
             {!isSummaryPage && (
-              <Settings
-                triggerButton={
-                  <HamburgerIcon
-                    data-testid={SettingsSelectors.SettingsMenuBtn}
-                    hideBelow={isSettingsVisibleOnSm ? undefined : 'sm'}
-                  />
-                }
-                toggleSwitchAccount={() => setIsShowingSwitchAccount(!isShowingSwitchAccount)}
-              />
+              <styled.div hideBelow={isSettingsVisibleOnSm ? undefined : 'sm'}>
+                {settingsMenu}
+              </styled.div>
             )}
             {isSummaryPage && (
               <HeaderActionButton

src/app/features/container/containers/page/page.layout.tsx

@@ -1,14 +1,39 @@
+import { SettingsSelectors } from '@tests/selectors/settings.selectors';
+
+import { HamburgerIcon } from '@leather.io/ui';
+
+import { Settings } from '../../../settings/settings';
 import { ContainerLayout } from '../container.layout';
 import { PageProvider } from './page.context';
 import { PageHeader } from './page.header';
 
 interface PageLayoutProps {
   children?: React.JSX.Element | React.JSX.Element[];
+  isShowingSwitchAccount?: boolean;
+  setIsShowingSwitchAccount?(isShowingSwitchAccount: boolean): void;
 }
-export function PageLayout({ children }: PageLayoutProps) {
+export function PageLayout({
+  children,
+  isShowingSwitchAccount,
+  setIsShowingSwitchAccount,
+}: PageLayoutProps) {
   return (
     <PageProvider>
-      <ContainerLayout header={<PageHeader />} content={children} />
+      <ContainerLayout
+        header={
+          <PageHeader
+            settingsMenu={
+              setIsShowingSwitchAccount && (
+                <Settings
+                  triggerButton={<HamburgerIcon data-testid={SettingsSelectors.SettingsMenuBtn} />}
+                  toggleSwitchAccount={() => setIsShowingSwitchAccount(!isShowingSwitchAccount)}
+                />
+              )
+            }
+          />
+        }
+        content={children}
+      />
     </PageProvider>
   );
 }

src/app/pages/send/send-crypto-asset-form/form/stacks/stacks-send-form-confirmation.tsx

@@ -7,7 +7,7 @@ import type { CryptoCurrencies } from '@leather.io/models';
 import { InfoCircleIcon } from '@leather.io/ui';
 
 import { useLocationStateWithCache } from '@app/common/hooks/use-location-state';
-import { useUpdatePageHeaderContext } from '@app/features/container/containers/page/page.context';
+// import { useUpdatePageHeaderContext } from '@app/features/container/containers/page/page.context';
 import { useStacksBroadcastTransaction } from '@app/features/stacks-transaction-request/hooks/use-stacks-broadcast-transaction';
 import { useStacksTransactionSummary } from '@app/features/stacks-transaction-request/hooks/use-stacks-transaction-summary';
 import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';

src/app/routes/components/route-wrapper.tsx

@@ -1,4 +1,4 @@
-import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
+import { Navigate, Route, Routes } from 'react-router-dom';
 
 import { RouteUrls } from '@shared/route-urls';