From ba132c43f6e2b1867cd052d9b4ff306a97cd28f1 Mon Sep 17 00:00:00 2001
From: Pete Watters <2938440+pete-watters@users.noreply.github.com>
Date: Thu, 1 Aug 2024 11:12:41 +0100
Subject: [PATCH] chore: refactor switch-account context

---
 src/app/components/layout/headers/header.tsx  | 24 +++++++++----------
 src/app/components/layout/index.ts            |  1 -
 .../components/layout/layouts/home.layout.tsx | 15 ------------
 ...e.layout.tsx => switch-account.layout.tsx} |  2 +-
 .../send-crypto-asset-form.routes.tsx         |  4 ++--
 src/app/routes/app-routes.tsx                 |  7 ++++--
 6 files changed, 19 insertions(+), 34 deletions(-)
 delete mode 100644 src/app/components/layout/layouts/home.layout.tsx
 rename src/app/components/layout/layouts/{page.layout.tsx => switch-account.layout.tsx} (89%)

diff --git a/src/app/components/layout/headers/header.tsx b/src/app/components/layout/headers/header.tsx
index 39ebd0ebb46..90641b4f901 100644
--- a/src/app/components/layout/headers/header.tsx
+++ b/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>
   );
 }
diff --git a/src/app/components/layout/index.ts b/src/app/components/layout/index.ts
index 0fd29519a0c..9da37b9db05 100644
--- a/src/app/components/layout/index.ts
+++ b/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';
diff --git a/src/app/components/layout/layouts/home.layout.tsx b/src/app/components/layout/layouts/home.layout.tsx
deleted file mode 100644
index a371b7d229f..00000000000
--- a/src/app/components/layout/layouts/home.layout.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Outlet, useOutletContext } from 'react-router-dom';
-
-import { SwitchAccountOutletContext } from '@shared/switch-account';
-
-import { Content } from '../layouts/content.layout';
-
-export function HomeLayout() {
-  const { isShowingSwitchAccount, setIsShowingSwitchAccount } =
-    useOutletContext<SwitchAccountOutletContext>();
-  return (
-    <Content>
-      <Outlet context={{ isShowingSwitchAccount, setIsShowingSwitchAccount }} />
-    </Content>
-  );
-}
diff --git a/src/app/components/layout/layouts/page.layout.tsx b/src/app/components/layout/layouts/switch-account.layout.tsx
similarity index 89%
rename from src/app/components/layout/layouts/page.layout.tsx
rename to src/app/components/layout/layouts/switch-account.layout.tsx
index 5cab68681b4..2bfbff341f7 100644
--- a/src/app/components/layout/layouts/page.layout.tsx
+++ b/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 }} />;
diff --git a/src/app/pages/send/send-crypto-asset-form/send-crypto-asset-form.routes.tsx b/src/app/pages/send/send-crypto-asset-form/send-crypto-asset-form.routes.tsx
index c4ba921e18f..de69a0f8472 100644
--- a/src/app/pages/send/send-crypto-asset-form/send-crypto-asset-form.routes.tsx
+++ b/src/app/pages/send/send-crypto-asset-form/send-crypto-asset-form.routes.tsx
@@ -4,7 +4,7 @@ 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 { SwitchAccountLayout } from '@app/components/layout/layouts/switch-account.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 +43,7 @@ const broadcastErrorDialogRoute = (
 );
 
 export const sendCryptoAssetFormRoutes = (
-  <Route element={<PageLayout />}>
+  <Route>
     <Route
       path={RouteUrls.SendCryptoAsset}
       element={
diff --git a/src/app/routes/app-routes.tsx b/src/app/routes/app-routes.tsx
index 841dc6f6f87..ec3d37507bb 100644
--- a/src/app/routes/app-routes.tsx
+++ b/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>
               </>
             }
           >