chore: refactor containers to make them more composable, ref #4370

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

@@ -6,8 +6,8 @@ import get from 'lodash.get';
 
 import { Button, Dialog } 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';
+import { DialogHeader } from '@app/components/layout/dialog-header';
 
 export function BroadcastErrorDialog() {
   const navigate = useNavigate();

src/app/ui/components/containers/headers/dialog-header.tsx → src/app/components/layout/dialog-header.tsx

@@ -7,9 +7,10 @@ import { CloseIcon, IconButton } from '@leather.io/ui';
 interface DialogHeaderProps {
   onClose?(): void;
   title?: ReactNode;
+  variant?: 'default' | 'large';
 }
 
-export function DialogHeader({ onClose, title }: DialogHeaderProps) {
+export function DialogHeader({ onClose, title, variant = 'default' }: DialogHeaderProps) {
   return (
     <Flex
       justifyContent="flex-end"
@@ -21,7 +22,11 @@ export function DialogHeader({ onClose, title }: DialogHeaderProps) {
       minHeight="40px"
     >
       {title && (
-        <styled.h2 flex="1" textAlign="center" textStyle="heading.05">
+        <styled.h2
+          flex="1"
+          textAlign={variant === 'large' ? 'left' : 'center'}
+          textStyle={variant === 'large' ? 'heading.03' : 'heading.05'}
+        >
           {title}
         </styled.h2>
       )}

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,21 @@
+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,10 @@
+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 { 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/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/home.layout.tsx

@@ -0,0 +1,15 @@
+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>
+  );
+}

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

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

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>
+    </>
   );
 }

src/app/features/asset-list/stacks/sip10-token-asset-list/sip10-token-asset-list.tsx

@@ -25,7 +25,7 @@ export function Sip10TokenAssetList({
       {tokens.map(token => (
         <Sip10TokenAssetItem
           balance={token.balance}
-          key={token.info.name}
+          key={token.info.name + token.info.contractId}
           info={token.info}
           isLoading={isLoading}
           marketData={priceAsMarketData(

src/app/features/bitcoin-choose-fee/bitcoin-choose-fee.tsx

@@ -10,8 +10,8 @@ import type { TransferRecipient } from '@shared/models/form.model';
 import { BitcoinCustomFee } from '@app/components/bitcoin-custom-fee/bitcoin-custom-fee';
 import { MAX_FEE_RATE_MULTIPLIER } from '@app/components/bitcoin-custom-fee/hooks/use-bitcoin-custom-fee';
 import { OnChooseFeeArgs } from '@app/components/bitcoin-fees-list/bitcoin-fees-list';
+import { AvailableBalance } from '@app/components/layout/footer/available-balance';
 import { useCurrentBtcCryptoAssetBalanceNativeSegwit } from '@app/query/bitcoin/balance/btc-balance-native-segwit.hooks';
-import { AvailableBalance } from '@app/ui/components/containers/footers/available-balance';
 
 import { BitcoinChooseFeeLayout } from './components/bitcoin-choose-fee.layout';
 import { ChooseFeeSubtitle } from './components/choose-fee-subtitle';