chore: wip centralise headers and start storybook

src/app/components/network-mode-badge.tsx

@@ -8,6 +8,7 @@ import { RouteUrls } from '@shared/route-urls';
 
 import { useCurrentNetworkState } from '@app/store/networks/networks.hooks';
 
+// TODO - need to refactor this so network is checked at top level and can be passed to page container
 export const NetworkModeBadge = memo(() => {
   const navigate = useNavigate();
   const { chain, name } = useCurrentNetworkState();

src/app/components/request-password.tsx

@@ -1,7 +1,7 @@
 import { FormEvent, ReactNode, useCallback, useState } from 'react';
 
 import { SettingsSelectors } from '@tests/selectors/settings.selectors';
-import { Box, Stack, styled } from 'leather-styles/jsx';
+import { Stack, styled } from 'leather-styles/jsx';
 
 import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
 import { useKeyActions } from '@app/common/hooks/use-key-actions';
@@ -58,12 +58,9 @@ export function RequestPassword({
   }, [analytics, startWaitingMessage, stopWaitingMessage, unlockWallet, password, onSuccess]);
 
   if (sessionLocked) {
-    //     /Pete - finish getting this working and looking well
-
-    //     then figure out how to get rid of the global header here and other such details
-
+    // Pete - finish getting this working and looking well
+    // then figure out how to get rid of the global header here and other such details
     // get things working and then move on to popout headers
-
     // maybe re-open PR in meantime with new components in storybook
 
     return (

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

@@ -124,6 +124,8 @@ function SetPasswordPage() {
     >
       {({ dirty, isSubmitting, isValid }) => (
         <Form>
+          {/* <get this finished and clean, then two column then check and setup headers */}
+
           {/*  request password is the only required to work in small view need to work in small view */}
 
           {/* <          PETE working on this width of set a password now */}

src/app/ui/components/containers/footers/footer.tsx

@@ -18,6 +18,7 @@ export function Footer({ children, ...rest }: FooterProps) {
       zIndex={1}
       backgroundColor="accent.background-primary"
       minHeight="92px"
+      // == test this
       // maxWidth={{ base: '100vw', md: '450px' }}
       // changing this for new lock screen. Make sure it looks OK on others i.e. all one column layouts
       // maxWidth={{ base: '100vw', md: '100vw' }}

src/app/ui/components/containers/headers/components/network-mode-badge.tsx

@@ -0,0 +1,32 @@
+import { Flex, styled } from 'leather-styles/jsx';
+
+// TODO - need to refactor this so network is checked at top level and can be passed to page container
+export function NetworkModeBadge({
+  isTestnetChain,
+  name,
+  onClick,
+}: {
+  isTestnetChain: boolean;
+  name: string;
+  onClick: () => void;
+}) {
+  if (!isTestnetChain) return null;
+
+  return (
+    <Flex
+      _hover={{ cursor: 'pointer' }}
+      alignItems="center"
+      border="subdued"
+      borderRadius="md"
+      height="24px"
+      onClick={onClick}
+      px="space.03"
+      position="relative"
+      zIndex={999}
+    >
+      <styled.span color="accent.text-subdued" textStyle="label.03">
+        {name}
+      </styled.span>
+    </Flex>
+  );
+}

src/app/ui/components/containers/headers/header.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta } from '@storybook/react';
+
+import { Header as Component, HeaderProps } from './header';
+
+const meta: Meta<typeof Component> = {
+  component: Component,
+  tags: ['autodocs'],
+  title: 'Header',
+  args: {
+    variant: 'home',
+  },
+};
+
+// Notes
+/**
+ * In figma there is a few headers:
+ * FULLpage:
+ * - home - BG --Accent-background-primary, logo, network, menu - can't close
+ * - page - BG Accent-background-secondary, logo, network, menu, can close - X on right
+ * - onboarding  - BG Accent-background-secondary,logo can go back <- on left, no network or menu
+ *
+ * ALL seem very similar but with slight variants. Probably even the same component but with different BG colours / options
+ *
+ *
+ *
+ */
+
+export default meta;
+
+export function Header(args: HeaderProps) {
+  return <Component {...args} onClose={() => null} onGoBack={() => null} />;
+}
+
+export function LedgerHeader(args: HeaderProps) {
+  return (
+    <Component
+      {...args}
+      isWaitingOnPerformedAction
+      waitingOnPerformedActionMessage="Ledger device in use"
+      onClose={() => console.log('close it up')}
+      onGoBack={() => console.log('back in black')}
+    />
+  );
+}
+
+export function TitleHeader(args: HeaderProps) {
+  return <Component {...args} title="Some page" onGoBack={() => null} />;
+}

src/app/ui/components/containers/headers/header.tsx

@@ -0,0 +1,109 @@
+import { ReactNode } from 'react';
+
+import { OnboardingSelectors } from '@tests/selectors/onboarding.selectors';
+import { SettingsSelectors } from '@tests/selectors/settings.selectors';
+import { Flex, HStack, styled } from 'leather-styles/jsx';
+import { useHover } from 'use-events';
+
+import { LeatherButton } from '@app/ui/components/button';
+import { ArrowLeftIcon } from '@app/ui/components/icons/arrow-left-icon';
+import { CloseIcon } from '@app/ui/components/icons/close-icon';
+import { HamburgerIcon } from '@app/ui/components/icons/hamburger-icon';
+import { LeatherLogo } from '@app/ui/components/leather-logo';
+
+import { NetworkModeBadge } from './components/network-mode-badge';
+import { HeaderActionButton } from './header-action-button';
+
+// TODO - ideally this header will be more DUMB
+// - no knowledge of router - RouteUrls / useNavigate
+// - no state needed for Testnet
+// - using panda css instead of hover events
+
+// can't use navigate in here to make logo go to home. Need to pass that in from Container -> Page, same as Testnet I guess
+
+// Ledger:
+// seems to be the only thing using enableGoBack, waitingOnPerformedActionMessage, isWaitingOnPerformedAction
+// waitingOnPerformedActionMessage is always hardcoded as "Ledger device in use"
+// we use hover events to show isWaitingOnPerformedAction sometimes but only when hovering on the title?
+
+export interface HeaderProps {
+  variant: 'home' | 'page' | 'onboarding';
+  enableGoBack?: boolean; // seems this is needed in ledger and sendInscription. Would be good to merge it and onGoBack
+  isWaitingOnPerformedAction?: boolean; // seems this is needed for ledger - change it to ledgerAction?
+  onClose?(): void;
+  onGoBack?(): void;
+  title?: string;
+  waitingOnPerformedActionMessage?: string;
+}
+export function Header({
+  variant = 'page',
+  enableGoBack,
+  isWaitingOnPerformedAction,
+  onClose,
+  onGoBack, // title,
+  waitingOnPerformedActionMessage, // seems ledger needs this and it's always hardcoded as "Ledger device in use"
+  title, // should make this a consistent string and also have an option for bigTitle? a different variant perhaps?
+}: HeaderProps) {
+  const [isHovered, bind] = useHover();
+  return (
+    <styled.header
+      px="space.07"
+      py="space.05"
+      bgColor={variant === 'home' ? 'accent.background-primary' : 'accent.background-secondary'}
+      {...bind}
+    >
+      <Flex width="100%" maxWidth="882px" verticalAlign="middle" justifyContent="space-between">
+        <Flex>
+          {variant !== 'home' && (enableGoBack || onGoBack) ? (
+            <HeaderActionButton
+              icon={<ArrowLeftIcon />}
+              isWaitingOnPerformedAction={isWaitingOnPerformedAction}
+              onAction={onGoBack} // SMELL this needs to be cleaned as what if no onGoBack but enableGoBack?
+            />
+          ) : undefined}
+          <LeatherLogo
+            data-testid={OnboardingSelectors.LeatherLogoRouteToHome}
+            width="72px"
+            verticalAlign="middle"
+            // onClick={variant !== 'home' ? () => navigate(RouteUrls.Home) : undefined}
+          />
+        </Flex>
+        {/*  TODO improve this:
+         - I tried to get onHover to work with only panda - display={{ base: 'none', _hover: 'block' }} 
+         - it would only show up when I forced hover state in dev tools
+        */}
+        {isHovered && isWaitingOnPerformedAction && (
+          <styled.span color="accent.text-subdued" textStyle="caption.01">
+            {waitingOnPerformedActionMessage}
+          </styled.span>
+        )}
+        {title && (
+          <styled.span alignSelf="center" flexBasis="60%" textAlign="center" textStyle="heading.05">
+            {title}
+          </styled.span>
+        )}
+        <HStack alignItems="center" flexBasis="20%" justifyContent="flex-end">
+          {/* FIXME - network mode relies on accessing state so fails on Storybook  */}
+          <NetworkModeBadge isTestnetChain name="Testnet" onClick={() => null} />
+          {variant !== 'onboarding' && (
+            <LeatherButton
+              data-testid={SettingsSelectors.SettingsMenuBtn}
+              // onClick={() => setIsShowingSettings(!isShowingSettings)}
+              onClick={() => console.log('toggle setting')}
+              variant="ghost"
+            >
+              <HamburgerIcon />
+            </LeatherButton>
+          )}
+          {variant === 'page' && onClose && (
+            <HeaderActionButton
+              icon={<CloseIcon />}
+              isWaitingOnPerformedAction={isWaitingOnPerformedAction}
+              onAction={onClose}
+            />
+          )}
+        </HStack>
+      </Flex>
+    </styled.header>
+  );
+}

src/app/ui/components/containers/headers/home-header.tsx

@@ -16,6 +16,7 @@ import { ArrowLeftIcon } from '@app/ui/components/icons/arrow-left-icon';
 import { HamburgerIcon } from '@app/ui/components/icons/hamburger-icon';
 import { LeatherLogo } from '@app/ui/components/leather-logo';
 
+// maybe can avoid all this by using the variant for onBoarding / home?
 function isSettingsClickable(pathname: RouteUrls) {
   return (
     pathname !== RouteUrls.RequestDiagnostics &&