diff --git a/src/app/components/network-mode-badge.tsx b/src/app/components/network-mode-badge.tsx index 8e7b51ab1e..6f01a92886 100644 --- a/src/app/components/network-mode-badge.tsx +++ b/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(); diff --git a/src/app/components/request-password.tsx b/src/app/components/request-password.tsx index 1c3ab7ff2a..e8f5eb4f54 100644 --- a/src/app/components/request-password.tsx +++ b/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 ( diff --git a/src/app/pages/onboarding/set-password/set-password.tsx b/src/app/pages/onboarding/set-password/set-password.tsx index ab3cea7a35..04d1bad75e 100644 --- a/src/app/pages/onboarding/set-password/set-password.tsx +++ b/src/app/pages/onboarding/set-password/set-password.tsx @@ -124,6 +124,8 @@ function SetPasswordPage() { > {({ dirty, isSubmitting, isValid }) => (
+ {/* void; +}) { + if (!isTestnetChain) return null; + + return ( + + + {name} + + + ); +} diff --git a/src/app/ui/components/containers/headers/header.stories.tsx b/src/app/ui/components/containers/headers/header.stories.tsx new file mode 100644 index 0000000000..6af62243c0 --- /dev/null +++ b/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 = { + 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 null} onGoBack={() => null} />; +} + +export function LedgerHeader(args: HeaderProps) { + return ( + console.log('close it up')} + onGoBack={() => console.log('back in black')} + /> + ); +} + +export function TitleHeader(args: HeaderProps) { + return null} />; +} diff --git a/src/app/ui/components/containers/headers/header.tsx b/src/app/ui/components/containers/headers/header.tsx new file mode 100644 index 0000000000..ae0a7c3f1e --- /dev/null +++ b/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 ( + + + + {variant !== 'home' && (enableGoBack || onGoBack) ? ( + } + isWaitingOnPerformedAction={isWaitingOnPerformedAction} + onAction={onGoBack} // SMELL this needs to be cleaned as what if no onGoBack but enableGoBack? + /> + ) : undefined} + navigate(RouteUrls.Home) : undefined} + /> + + {/* 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 && ( + + {waitingOnPerformedActionMessage} + + )} + {title && ( + + {title} + + )} + + {/* FIXME - network mode relies on accessing state so fails on Storybook */} + null} /> + {variant !== 'onboarding' && ( + setIsShowingSettings(!isShowingSettings)} + onClick={() => console.log('toggle setting')} + variant="ghost" + > + + + )} + {variant === 'page' && onClose && ( + } + isWaitingOnPerformedAction={isWaitingOnPerformedAction} + onAction={onClose} + /> + )} + + + + ); +} diff --git a/src/app/ui/components/containers/headers/home-header.tsx b/src/app/ui/components/containers/headers/home-header.tsx index 577757df04..1fe8881bc7 100644 --- a/src/app/ui/components/containers/headers/home-header.tsx +++ b/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 &&