chore: refactor switch-account to use shared context

src/app/components/layout/headers/header.tsx

@@ -4,18 +4,16 @@ import type { HasChildren } from '@app/common/has-children';
 
 export function Header({ children, ...props }: HasChildren & BoxProps) {
   return (
-    <>
-      <styled.header
-        justifyContent="center"
-        margin={{ base: 0, md: 'auto' }}
-        p="space.04"
-        bg="transparent"
-        maxWidth={{ base: '100vw', md: 'fullPageMaxWidth' }}
-        width="100%"
-        {...props}
-      >
-        {children}
-      </styled.header>
-    </>
+    <styled.header
+      justifyContent="center"
+      margin={{ base: 0, md: 'auto' }}
+      p="space.04"
+      bg="transparent"
+      maxWidth={{ base: '100vw', md: 'fullPageMaxWidth' }}
+      width="100%"
+      {...props}
+    >
+      {children}
+    </styled.header>
   );
 }

src/app/components/layout/index.ts

@@ -4,7 +4,6 @@ export { Card } from './card/card';
 export { CardContent } from './card/card-content';
 export { AvailableBalance } from './footer/available-balance';
 
-export { HomeLayout } from './layouts/home.layout';
 export { Content } from './layouts/content.layout';
 export { TwoColumnLayout } from './layouts/two-column.layout';
 export { ContainerLayout } from './layouts/container.layout';

src/app/components/layout/layouts/page.layout.tsx → src/app/components/layout/layouts/switch-account.layout.tsx

@@ -2,7 +2,7 @@ import { Outlet, useOutletContext } from 'react-router-dom';
 
 import { SwitchAccountOutletContext } from '@shared/switch-account';
 
-export function PageLayout() {
+export function SwitchAccountLayout() {
   const { isShowingSwitchAccount, setIsShowingSwitchAccount } =
     useOutletContext<SwitchAccountOutletContext>();
   return <Outlet context={{ isShowingSwitchAccount, setIsShowingSwitchAccount }} />;

src/app/features/dialogs/switch-account-dialog/switch-account-dialog.tsx

@@ -23,7 +23,6 @@ interface SwitchAccountDialogProps {
 }
 
 export const SwitchAccountDialog = memo(({ isShowing, onClose }: SwitchAccountDialogProps) => {
-  console.info('SwitchAccountDialog render', isShowing);
   const currentAccountIndex = useCurrentAccountIndex();
   const createAccount = useCreateAccount();
   const { whenWallet } = useWalletType();

src/app/features/psbt-signer/psbt-signer.tsx

@@ -11,9 +11,7 @@ import { RouteUrls } from '@shared/route-urls';
 import { closeWindow } from '@shared/utils';
 
 import { SignPsbtArgs } from '@app/common/psbt/requests';
-import { Footer } from '@app/components/layout';
-import { CardContent } from '@app/components/layout';
-import { Card } from '@app/components/layout';
+import { Card, CardContent, Footer } from '@app/components/layout';
 import { PopupHeader } from '@app/features/container/headers/popup.header';
 import { useBreakOnNonCompliantEntity } from '@app/query/common/compliance-checker/compliance-checker.query';
 import { useOnOriginTabClose } from '@app/routes/hooks/use-on-tab-closed';

src/app/features/retrieve-taproot-to-native-segwit/components/retrieve-taproot-to-native-segwit.layout.tsx

@@ -2,8 +2,7 @@ import { Flex, styled } from 'leather-styles/jsx';
 
 import { BtcAvatarIcon, Button, Callout, Dialog } from '@leather.io/ui';
 
-import { Footer } from '@app/components/layout';
-import { Card } from '@app/components/layout';
+import { Card, Footer } from '@app/components/layout';
 import { DialogHeader } from '@app/components/layout/dialog-header';
 
 interface RetrieveTaprootToNativeSegwitLayoutProps {

src/app/pages/choose-account/choose-account.tsx

@@ -10,7 +10,6 @@ import { closeWindow } from '@shared/utils';
 import { useCancelAuthRequest } from '@app/common/authentication/use-cancel-auth-request';
 import { useAppDetails } from '@app/common/hooks/auth/use-app-details';
 import { RequesterFlag } from '@app/components/requester-flag';
-// import { Content } from '@app/components/layout';
 import { ChooseAccountsList } from '@app/pages/choose-account/components/accounts';
 import { useOnOriginTabClose } from '@app/routes/hooks/use-on-tab-closed';
 import { useStacksAccounts } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';

src/app/pages/home/home.tsx

@@ -24,9 +24,9 @@ import { AccountActions } from './components/account-actions';
 import { HomeTabs } from './components/home-tabs';
 
 export function Home() {
+  const { decodedAuthRequest } = useOnboardingState();
   const { isShowingSwitchAccount, setIsShowingSwitchAccount } =
     useOutletContext<SwitchAccountOutletContext>();
-  const { decodedAuthRequest } = useOnboardingState();
   const navigate = useNavigate();
   const account = useCurrentStacksAccount();
   const currentAccountIndex = useCurrentAccountIndex();

src/app/pages/onboarding/set-password/set-password.tsx

@@ -50,7 +50,7 @@ function SetPasswordPage() {
   const finishSignIn = useFinishAuthRequest();
   const navigate = useNavigate();
   const { decodedAuthRequest } = useOnboardingState();
-  debugger;
+
   useEffect(() => {
     void analytics.page('view', '/set-password');
   }, []);

src/app/pages/rpc-sign-bip322-message/rpc-sign-bip322-message.tsx

@@ -58,6 +58,7 @@ function RpcSignBip322Message() {
 
   return (
     <>
+      <Outlet />
       <PopupHeader showSwitchAccount balance="all" />
       <MessageSigningRequestLayout>
         <MessageSigningHeader
@@ -77,7 +78,6 @@ function RpcSignBip322Message() {
           mb="space.05"
         />
       </MessageSigningRequestLayout>
-      <Outlet />
     </>
   );
 }

src/app/pages/send/ordinal-inscription/send-inscription-review.tsx

@@ -13,8 +13,7 @@ import { analytics } from '@shared/utils/analytics';
 import { FormAddressDisplayer } from '@app/components/address-displayer/form-address-displayer';
 import { InfoCardRow, InfoCardSeparator } from '@app/components/info-card/info-card';
 import { InscriptionPreview } from '@app/components/inscription-preview-card/components/inscription-preview';
-import { Footer } from '@app/components/layout';
-import { Card } from '@app/components/layout';
+import { Card, Footer } from '@app/components/layout';
 import { DialogHeader } from '@app/components/layout/dialog-header';
 import { useCurrentNativeSegwitUtxos } from '@app/query/bitcoin/address/utxos-by-address.hooks';
 import { useAppDispatch } from '@app/store';

src/app/pages/send/ordinal-inscription/sent-inscription-summary.tsx

@@ -14,8 +14,7 @@ import { copyToClipboard } from '@app/common/utils/copy-to-clipboard';
 import { FormAddressDisplayer } from '@app/components/address-displayer/form-address-displayer';
 import { InfoCardBtn, InfoCardRow, InfoCardSeparator } from '@app/components/info-card/info-card';
 import { InscriptionPreview } from '@app/components/inscription-preview-card/components/inscription-preview';
-import { Footer } from '@app/components/layout';
-import { Card } from '@app/components/layout';
+import { Card, Footer } from '@app/components/layout';
 import { DialogHeader } from '@app/components/layout/dialog-header';
 import { useToast } from '@app/features/toasts/use-toast';
 

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

@@ -9,9 +9,7 @@ import {
   InfoCardRow,
   InfoCardSeparator,
 } from '@app/components/info-card/info-card';
-import { Footer } from '@app/components/layout';
-import { CardContent } from '@app/components/layout';
-import { Card } from '@app/components/layout';
+import { Card, CardContent, Footer } from '@app/components/layout';
 
 interface SendFormConfirmationProps {
   recipient: string;

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

@@ -14,11 +14,7 @@ import { StacksSendFormValues } from '@shared/models/form.model';
 import { RouteUrls } from '@shared/route-urls';
 
 import { FeesRow } from '@app/components/fees-row/fees-row';
-import { Footer } from '@app/components/layout';
-import { CardContent } from '@app/components/layout';
-import { Card } from '@app/components/layout';
-import { Page } from '@app/components/layout';
-import { AvailableBalance } from '@app/components/layout';
+import { AvailableBalance, Card, CardContent, Footer, Page } from '@app/components/layout';
 import { NonceSetter } from '@app/components/nonce-setter';
 import { useUpdatePersistedSendFormValues } from '@app/features/popup-send-form-restoration/use-update-persisted-send-form-values';
 import { HighFeeDialog } from '@app/features/stacks-high-fee-warning/stacks-high-fee-dialog';

src/app/pages/send/send-crypto-asset-form/send-crypto-asset-form.routes.tsx

@@ -4,7 +4,6 @@ import { Route } from 'react-router-dom';
 import { RouteUrls } from '@shared/route-urls';
 
 import { BroadcastErrorDialog } from '@app/components/broadcast-error-dialog/broadcast-error-dialog';
-import { PageLayout } from '@app/components/layout/layouts/page.layout';
 import { FullPageWithHeaderLoadingSpinner } from '@app/components/loading-spinner';
 import { EditNonceDialog } from '@app/features/dialogs/edit-nonce-dialog/edit-nonce-dialog';
 import { ledgerBitcoinTxSigningRoutes } from '@app/features/ledger/flows/bitcoin-tx-signing/ledger-bitcoin-sign-tx-container';
@@ -43,7 +42,7 @@ const broadcastErrorDialogRoute = (
 );
 
 export const sendCryptoAssetFormRoutes = (
-  <Route element={<PageLayout />}>
+  <Route>
     <Route
       path={RouteUrls.SendCryptoAsset}
       element={

src/app/pages/swap/components/swap-review.tsx

@@ -5,9 +5,7 @@ import { SwapSelectors } from '@tests/selectors/swap.selectors';
 import { Button } from '@leather.io/ui';
 
 import { LoadingKeys, useLoading } from '@app/common/hooks/use-loading';
-import { Footer } from '@app/components/layout';
-import { CardContent } from '@app/components/layout';
-import { Card } from '@app/components/layout';
+import { Card, CardContent, Footer } from '@app/components/layout';
 
 import { useSwapContext } from '../swap.context';
 import { SwapAssetsPair } from './swap-assets-pair/swap-assets-pair';

src/app/pages/swap/swap.tsx

@@ -7,9 +7,7 @@ import { useFormikContext } from 'formik';
 import { Button } from '@leather.io/ui';
 import { isUndefined } from '@leather.io/utils';
 
-import { Footer } from '@app/components/layout';
-import { CardContent } from '@app/components/layout';
-import { Card } from '@app/components/layout';
+import { Card, CardContent, Footer } from '@app/components/layout';
 import { LoadingSpinner } from '@app/components/loading-spinner';
 
 import { SwapAssetSelectBase } from './components/swap-asset-select/swap-asset-select-base';

src/app/routes/app-routes.tsx

@@ -10,7 +10,8 @@ import * as Sentry from '@sentry/react';
 
 import { RouteUrls } from '@shared/route-urls';
 
-import { HomeLayout } from '@app/components/layout/layouts/home.layout';
+import { Content } from '@app/components/layout/layouts/content.layout';
+import { SwitchAccountLayout } from '@app/components/layout/layouts/switch-account.layout';
 import { LoadingSpinner } from '@app/components/loading-spinner';
 import { AddNetwork } from '@app/features/add-network/add-network';
 import { Container } from '@app/features/container/container';
@@ -82,7 +83,9 @@ function useAppRoutes() {
             element={
               <>
                 <MainHeader hideBackButton />
-                <HomeLayout />
+                <Content>
+                  <SwitchAccountLayout />
+                </Content>
               </>
             }
           >
@@ -115,6 +118,7 @@ function useAppRoutes() {
             {ledgerStacksTxSigningRoutes}
           </Route>
           {/* Page Routes */}
+
           <Route
             path={RouteUrls.RetrieveTaprootFunds}
             element={<RetrieveTaprootToNativeSegwit />}