Containers refactor III - This time its composable

package.json

@@ -140,7 +140,7 @@
     "@leather.io/models": "0.10.2",
     "@leather.io/query": "2.1.0",
     "@leather.io/tokens": "0.7.0",
-    "@leather.io/ui": "1.9.0",
+    "@leather.io/ui": "1.9.2",
     "@leather.io/utils": "0.11.0",
     "@ledgerhq/hw-transport-webusb": "6.27.19",
     "@noble/hashes": "1.4.0",

src/app/components/broadcast-error-dialog/broadcast-error-dialog.tsx

@@ -4,10 +4,9 @@ import GenericError from '@assets/images/generic-error.png';
 import { Flex, styled } from 'leather-styles/jsx';
 import get from 'lodash.get';
 
-import { Button, Dialog } from '@leather.io/ui';
+import { Button, Dialog, DialogHeader } from '@leather.io/ui';
 
-import { Footer } from '@app/ui/components/containers/footers/footer';
-import { DialogHeader } from '@app/ui/components/containers/headers/dialog-header';
+import { Footer } from '@app/components/layout';
 
 export function BroadcastErrorDialog() {
   const navigate = useNavigate();

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

@@ -0,0 +1,43 @@
+import { ChainID } from '@stacks/transactions';
+import { Flex, Grid, GridItem, type GridProps, HStack } from 'leather-styles/jsx';
+
+import { NetworkModeBadge } from '@leather.io/ui';
+
+import type { HasChildren } from '@app/common/has-children';
+import { useCurrentNetworkState } from '@app/store/networks/networks.hooks';
+
+interface HeaderGridProps extends GridProps {
+  leftCol: React.ReactNode;
+  centerCol?: React.ReactNode;
+  rightCol: React.ReactNode;
+}
+export function HeaderGrid({ leftCol, centerCol, rightCol, ...props }: HeaderGridProps) {
+  return (
+    <Grid
+      alignItems="center"
+      gridTemplateColumns={centerCol ? '2fr 4fr 2fr' : 'auto 4fr auto'}
+      gridAutoFlow="column"
+      width="100%"
+      {...props}
+    >
+      <GridItem justifySelf="start">
+        <Flex py={{ base: 0, md: 'space.01' }}>{leftCol}</Flex>
+      </GridItem>
+      {centerCol && <GridItem margin="auto">{centerCol}</GridItem>}
+      <GridItem>{rightCol}</GridItem>
+    </Grid>
+  );
+}
+
+export function HeaderGridRightCol({ children }: HasChildren) {
+  const { chain, name: chainName } = useCurrentNetworkState();
+  return (
+    <HStack alignItems="center" justifyContent="flex-end">
+      <NetworkModeBadge
+        isTestnetChain={chain.stacks.chainId === ChainID.Testnet}
+        name={chainName}
+      />
+      {children}
+    </HStack>
+  );
+}

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

@@ -0,0 +1,19 @@
+import { type BoxProps, styled } from 'leather-styles/jsx';
+
+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>
+  );
+}

src/app/components/layout/headers/logo-box.tsx

@@ -0,0 +1,26 @@
+import { useNavigate } from 'react-router-dom';
+
+import { OnboardingSelectors } from '@tests/selectors/onboarding.selectors';
+import { Box } 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();
+  return (
+    <Box
+      height="headerContainerHeight"
+      margin="auto"
+      px="space.02"
+      hideBelow={isSessionLocked ? undefined : 'sm'}
+      hideFrom={isSessionLocked ? 'sm' : undefined}
+    >
+      <Logo
+        data-testid={OnboardingSelectors.LogoRouteToHome}
+        onClick={() => navigate(RouteUrls.Home)}
+      />
+    </Box>
+  );
+}

src/app/components/layout/index.ts

@@ -0,0 +1,9 @@
+export { Page } from './page/page.layout';
+export { Footer } from './footer/footer';
+export { Card } from './card/card';
+export { CardContent } from './card/card-content';
+export { AvailableBalance } from './footer/available-balance';
+
+export { Content } from './layouts/content.layout';
+export { TwoColumnLayout } from './layouts/two-column.layout';
+export { ContainerLayout } from './layouts/container.layout';

src/app/components/layout/layouts/container.layout.tsx

@@ -0,0 +1,11 @@
+import { Flex } from 'leather-styles/jsx';
+
+import type { HasChildren } from '@app/common/has-children';
+
+export function ContainerLayout({ children }: HasChildren) {
+  return (
+    <Flex flexDirection="column" flexGrow={1} width="100%" height={{ base: '100vh', sm: '100%' }}>
+      {children}
+    </Flex>
+  );
+}

src/app/components/layout/layouts/content.layout.tsx

@@ -0,0 +1,11 @@
+import { Flex } from 'leather-styles/jsx';
+
+import type { HasChildren } from '@app/common/has-children';
+
+export function Content({ children }: HasChildren) {
+  return (
+    <Flex className="main-content" flexGrow={1} position="relative" width="100%">
+      {children}
+    </Flex>
+  );
+}

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

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

src/app/ui/pages/two-column.layout.tsx → src/app/components/layout/layouts/two-column.layout.tsx

@@ -1,10 +1,12 @@
+import { ReactNode } from 'react';
+
 import { Box, Flex, Stack, styled } from 'leather-styles/jsx';
 
 interface TwoColumnLayoutProps {
-  title: React.JSX.Element;
-  content: React.JSX.Element;
-  action?: React.JSX.Element;
-  children: React.JSX.Element;
+  title: ReactNode;
+  content: ReactNode;
+  action?: ReactNode;
+  children: ReactNode;
   wideChild?: boolean;
 }
 

src/app/ui/layout/page/page.layout.stories.tsx → src/app/components/layout/page/page.layout.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta } from '@storybook/react';
 
-import { Card } from '@app/ui/layout/card/card.stories';
+import { Card } from '@app/components/layout/card/card.stories';
 
 import { Page as Component } from './page.layout';
 

src/app/components/request-password.tsx

@@ -10,9 +10,7 @@ import { analytics } from '@shared/utils/analytics';
 import { useKeyActions } from '@app/common/hooks/use-key-actions';
 import { buildEnterKeyEvent } from '@app/common/hooks/use-modifier-key';
 import { WaitingMessages, useWaitingMessage } from '@app/common/hooks/use-waiting-message';
-import { Footer } from '@app/ui/components/containers/footers/footer';
-import { Card } from '@app/ui/layout/card/card';
-import { Page } from '@app/ui/layout/page/page.layout';
+import { Card, Footer, Page } from '@app/components/layout';
 
 import { ErrorLabel } from './error-label';
 

src/app/features/add-network/add-network.tsx

@@ -5,8 +5,8 @@ import { Stack, styled } from 'leather-styles/jsx';
 import { Button } from '@leather.io/ui';
 
 import { ErrorLabel } from '@app/components/error-label';
-import { Card } from '@app/ui/layout/card/card';
-import { Page } from '@app/ui/layout/page/page.layout';
+import { Card, Content, Page } from '@app/components/layout';
+import { PageHeader } from '@app/features/container/headers/page.header';
 
 import { AddNetworkForm } from './add-network-form';
 import { useAddNetwork } from './use-add-network';
@@ -15,49 +15,58 @@ export function AddNetwork() {
   const { error, initialFormValues, loading, onSubmit } = useAddNetwork();
 
   return (
-    <Page>
-      <Formik initialValues={initialFormValues} onSubmit={onSubmit}>
-        {() => (
-          <Card>
-            <Form data-testid={NetworkSelectors.NetworkPageReady}>
-              <Stack
-                gap="space.05"
-                maxWidth="pageWidth"
-                px={['space.05', 'space.04']}
-                textAlign={['left', 'center']}
-                my="space.05"
-              >
-                <styled.span textStyle="body.02">
-                  Use this form to add a new instance of the{' '}
-                  <a
-                    href="https://github.com/blockstack/stacks-blockchain-api"
-                    target="_blank"
-                    rel="noreferrer"
+    <>
+      <PageHeader title="Add Network" />
+      <Content>
+        <Page>
+          <Formik initialValues={initialFormValues} onSubmit={onSubmit}>
+            {() => (
+              <Card>
+                <Form data-testid={NetworkSelectors.NetworkPageReady}>
+                  <Stack
+                    gap="space.05"
+                    maxWidth="pageWidth"
+                    px={['space.05', 'space.04']}
+                    textAlign={['left', 'center']}
+                    my="space.05"
                   >
-                    Stacks Blockchain API
-                  </a>{' '}
-                  or{' '}
-                  <a href="https://github.com/Blockstream/esplora" target="_blank" rel="noreferrer">
-                    Bitcoin Blockchain API
-                  </a>
-                  . Make sure you review and trust the host before you add it.
-                </styled.span>
-                <AddNetworkForm />
-                {error ? (
-                  <ErrorLabel data-testid={NetworkSelectors.ErrorText}>{error}</ErrorLabel>
-                ) : null}
-                <Button
-                  aria-busy={loading}
-                  data-testid={NetworkSelectors.AddNetworkBtn}
-                  type="submit"
-                >
-                  Add network
-                </Button>
-              </Stack>
-            </Form>
-          </Card>
-        )}
-      </Formik>
-    </Page>
+                    <styled.span textStyle="body.02">
+                      Use this form to add a new instance of the{' '}
+                      <a
+                        href="https://github.com/blockstack/stacks-blockchain-api"
+                        target="_blank"
+                        rel="noreferrer"
+                      >
+                        Stacks Blockchain API
+                      </a>{' '}
+                      or{' '}
+                      <a
+                        href="https://github.com/Blockstream/esplora"
+                        target="_blank"
+                        rel="noreferrer"
+                      >
+                        Bitcoin Blockchain API
+                      </a>
+                      . Make sure you review and trust the host before you add it.
+                    </styled.span>
+                    <AddNetworkForm />
+                    {error ? (
+                      <ErrorLabel data-testid={NetworkSelectors.ErrorText}>{error}</ErrorLabel>
+                    ) : null}
+                    <Button
+                      aria-busy={loading}
+                      data-testid={NetworkSelectors.AddNetworkBtn}
+                      type="submit"
+                    >
+                      Add network
+                    </Button>
+                  </Stack>
+                </Form>
+              </Card>
+            )}
+          </Formik>
+        </Page>
+      </Content>
+    </>
   );
 }