diff --git a/src/app/components/broadcast-error-dialog/broadcast-error-dialog.tsx b/src/app/components/broadcast-error-dialog/broadcast-error-dialog.tsx index 946a40edfef..1bd742258f1 100644 --- a/src/app/components/broadcast-error-dialog/broadcast-error-dialog.tsx +++ b/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(); diff --git a/src/app/ui/layout/card/card-content.tsx b/src/app/components/layout/card/card-content.tsx similarity index 100% rename from src/app/ui/layout/card/card-content.tsx rename to src/app/components/layout/card/card-content.tsx diff --git a/src/app/ui/layout/card/card.stories.tsx b/src/app/components/layout/card/card.stories.tsx similarity index 100% rename from src/app/ui/layout/card/card.stories.tsx rename to src/app/components/layout/card/card.stories.tsx diff --git a/src/app/ui/layout/card/card.tsx b/src/app/components/layout/card/card.tsx similarity index 100% rename from src/app/ui/layout/card/card.tsx rename to src/app/components/layout/card/card.tsx diff --git a/src/app/ui/components/containers/headers/dialog-header.tsx b/src/app/components/layout/dialog-header.tsx similarity index 66% rename from src/app/ui/components/containers/headers/dialog-header.tsx rename to src/app/components/layout/dialog-header.tsx index 40d0f58093a..4fed3c77c90 100644 --- a/src/app/ui/components/containers/headers/dialog-header.tsx +++ b/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 ( {title && ( - + {title} )} diff --git a/src/app/ui/components/containers/footers/available-balance.tsx b/src/app/components/layout/footer/available-balance.tsx similarity index 100% rename from src/app/ui/components/containers/footers/available-balance.tsx rename to src/app/components/layout/footer/available-balance.tsx diff --git a/src/app/ui/components/containers/footers/footer.stories.tsx b/src/app/components/layout/footer/footer.stories.tsx similarity index 100% rename from src/app/ui/components/containers/footers/footer.stories.tsx rename to src/app/components/layout/footer/footer.stories.tsx diff --git a/src/app/ui/components/containers/footers/footer.tsx b/src/app/components/layout/footer/footer.tsx similarity index 100% rename from src/app/ui/components/containers/footers/footer.tsx rename to src/app/components/layout/footer/footer.tsx diff --git a/src/app/ui/components/containers/headers/components/header-action-button.tsx b/src/app/components/layout/headers/header-action-button.tsx similarity index 100% rename from src/app/ui/components/containers/headers/components/header-action-button.tsx rename to src/app/components/layout/headers/header-action-button.tsx diff --git a/src/app/components/layout/headers/header-grid.tsx b/src/app/components/layout/headers/header-grid.tsx new file mode 100644 index 00000000000..e48f7fed6df --- /dev/null +++ b/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 ( + + + {leftCol} + + {centerCol && {centerCol}} + {rightCol} + + ); +} + +export function HeaderGridRightCol({ children }: HasChildren) { + const { chain, name: chainName } = useCurrentNetworkState(); + return ( + + + {children} + + ); +} diff --git a/src/app/components/layout/headers/header.tsx b/src/app/components/layout/headers/header.tsx new file mode 100644 index 00000000000..39ebd0ebb46 --- /dev/null +++ b/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 ( + <> + + {children} + + + ); +} diff --git a/src/app/components/layout/headers/logo-box.tsx b/src/app/components/layout/headers/logo-box.tsx new file mode 100644 index 00000000000..0d64d7a16a6 --- /dev/null +++ b/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 ( + + navigate(RouteUrls.Home)} + /> + + ); +} diff --git a/src/app/components/layout/index.ts b/src/app/components/layout/index.ts new file mode 100644 index 00000000000..0fd29519a0c --- /dev/null +++ b/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'; diff --git a/src/app/components/layout/layouts/container.layout.tsx b/src/app/components/layout/layouts/container.layout.tsx new file mode 100644 index 00000000000..78b8ca731bb --- /dev/null +++ b/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 ( + + {children} + + ); +} diff --git a/src/app/components/layout/layouts/content.layout.tsx b/src/app/components/layout/layouts/content.layout.tsx new file mode 100644 index 00000000000..80ce69e9175 --- /dev/null +++ b/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 ( + + {children} + + ); +} diff --git a/src/app/components/layout/layouts/home.layout.tsx b/src/app/components/layout/layouts/home.layout.tsx new file mode 100644 index 00000000000..a371b7d229f --- /dev/null +++ b/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(); + return ( + + + + ); +} diff --git a/src/app/components/layout/layouts/page.layout.tsx b/src/app/components/layout/layouts/page.layout.tsx new file mode 100644 index 00000000000..5cab68681b4 --- /dev/null +++ b/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(); + return ; +} diff --git a/src/app/ui/pages/two-column.layout.stories.tsx b/src/app/components/layout/layouts/two-column.layout.stories.tsx similarity index 100% rename from src/app/ui/pages/two-column.layout.stories.tsx rename to src/app/components/layout/layouts/two-column.layout.stories.tsx diff --git a/src/app/ui/pages/two-column.layout.tsx b/src/app/components/layout/layouts/two-column.layout.tsx similarity index 100% rename from src/app/ui/pages/two-column.layout.tsx rename to src/app/components/layout/layouts/two-column.layout.tsx diff --git a/src/app/ui/layout/page/page.layout.stories.tsx b/src/app/components/layout/page/page.layout.stories.tsx similarity index 83% rename from src/app/ui/layout/page/page.layout.stories.tsx rename to src/app/components/layout/page/page.layout.stories.tsx index 8b972aa73d1..3034f56b11b 100644 --- a/src/app/ui/layout/page/page.layout.stories.tsx +++ b/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'; diff --git a/src/app/ui/layout/page/page.layout.tsx b/src/app/components/layout/page/page.layout.tsx similarity index 100% rename from src/app/ui/layout/page/page.layout.tsx rename to src/app/components/layout/page/page.layout.tsx diff --git a/src/app/components/request-password.tsx b/src/app/components/request-password.tsx index 7993607fc71..080aeefab16 100644 --- a/src/app/components/request-password.tsx +++ b/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'; diff --git a/src/app/features/add-network/add-network.tsx b/src/app/features/add-network/add-network.tsx index f3a23a4e31c..7328728f12e 100644 --- a/src/app/features/add-network/add-network.tsx +++ b/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 ( - - - {() => ( - -
- - - Use this form to add a new instance of the{' '} - + + + + + {() => ( + + + - Stacks Blockchain API - {' '} - or{' '} - - Bitcoin Blockchain API - - . Make sure you review and trust the host before you add it. - - - {error ? ( - {error} - ) : null} - - -
- - )} - - + + Use this form to add a new instance of the{' '} + + Stacks Blockchain API + {' '} + or{' '} + + Bitcoin Blockchain API + + . Make sure you review and trust the host before you add it. + + + {error ? ( + {error} + ) : null} + + + + + )} + + + + ); } diff --git a/src/app/features/asset-list/stacks/sip10-token-asset-list/sip10-token-asset-list.tsx b/src/app/features/asset-list/stacks/sip10-token-asset-list/sip10-token-asset-list.tsx index 3a8933f4dfd..81a3ebcf260 100644 --- a/src/app/features/asset-list/stacks/sip10-token-asset-list/sip10-token-asset-list.tsx +++ b/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 => ( closeWindow()); useOnSignOut(() => closeWindow()); @@ -67,37 +34,8 @@ export function Container() { useEffect(() => void analytics.page('view', `${pathname}`), [pathname]); - const variant = getPageVariant(pathname); - - const displayHeader = !isLandingPage(pathname) && !isNoHeaderPopup(pathname); - const isSessionLocked = getIsSessionLocked(pathname); - - // TODO: Refactor? This is very hard to manage with dynamic routes. Temporarily - // added a fix to catch the swap route: '/swap/:base/:quote?' - function getOnGoBackLocation(pathname: RouteUrls) { - if (pathname.includes('/swap')) return navigate(RouteUrls.Home); - switch (pathname) { - case RouteUrls.Fund.replace(':currency', 'STX'): - case RouteUrls.Fund.replace(':currency', 'BTC'): - case RouteUrls.SendCryptoAssetForm.replace(':symbol', 'stx'): - case RouteUrls.SendCryptoAssetForm.replace(':symbol', 'btc'): - return navigate(RouteUrls.Home); - case RouteUrls.SendStxConfirmation: - return navigate(RouteUrls.SendCryptoAssetForm.replace(':symbol', 'stx')); - case RouteUrls.SendBtcConfirmation: - return navigate(RouteUrls.SendCryptoAssetForm.replace(':symbol', 'btc')); - default: - return navigate(-1); - } - } - if (!hasStateRehydrated) return ; - const showLogoSm = variant === 'home' || isSessionLocked || isKnownPopupRoute(pathname); - const hideSettings = - isKnownPopupRoute(pathname) || isSummaryPage(pathname) || variant === 'onboarding'; - - const isLogoClickable = variant !== 'home' && !isRpcRoute(pathname); return ( <> {isShowingSwitchAccount && ( @@ -106,76 +44,8 @@ export function Container() { onClose={() => setIsShowingSwitchAccount(false)} /> )} - - getOnGoBackLocation(pathname) : undefined} - onClose={isSummaryPage(pathname) ? () => navigate(RouteUrls.Home) : undefined} - settingsMenu={ - hideSettings ? null : ( - - } - toggleSwitchAccount={() => setIsShowingSwitchAccount(!isShowingSwitchAccount)} - /> - ) - } - networkBadge={ - - } - title={getTitleFromUrl(pathname)} - logo={ - !hideLogo(pathname) && ( - - navigate(RouteUrls.Home) : undefined} - /> - - ) - } - account={ - showAccountInfo(pathname) && ( - - setIsShowingSwitchAccount(!isShowingSwitchAccount) - } - /> - } - > - - - ) - } - totalBalance={ - showBalanceInfo(pathname) && ( - - ) - } - /> - ) : null - } - > + diff --git a/src/app/features/container/headers/main.header.tsx b/src/app/features/container/headers/main.header.tsx new file mode 100644 index 00000000000..181f54031c7 --- /dev/null +++ b/src/app/features/container/headers/main.header.tsx @@ -0,0 +1,53 @@ +import { useNavigate, useOutletContext } from 'react-router-dom'; + +import { SettingsSelectors } from '@tests/selectors/settings.selectors'; +import { SharedComponentsSelectors } from '@tests/selectors/shared-component.selectors'; + +import { ArrowLeftIcon, HamburgerIcon } from '@leather.io/ui'; + +import { SwitchAccountOutletContext } from '@shared/switch-account'; + +import { Header } from '@app/components/layout/headers/header'; +import { HeaderActionButton } from '@app/components/layout/headers/header-action-button'; +import { HeaderGrid, HeaderGridRightCol } from '@app/components/layout/headers/header-grid'; +import { LogoBox } from '@app/components/layout/headers/logo-box'; +import { Settings } from '@app/features/settings/settings'; + +interface MainHeaderProps { + hideBackButton?: boolean; + hideLogo?: boolean; +} + +export function MainHeader({ hideBackButton = false, hideLogo = false }: MainHeaderProps) { + const { isShowingSwitchAccount, setIsShowingSwitchAccount } = + useOutletContext(); + const navigate = useNavigate(); + return ( + <> +
+ + {!hideBackButton && ( + } + onAction={() => navigate(-1)} + dataTestId={SharedComponentsSelectors.HeaderBackBtn} + /> + )} + {!hideLogo && } + + } + rightCol={ + + } + toggleSwitchAccount={() => setIsShowingSwitchAccount(!isShowingSwitchAccount)} + /> + + } + /> +
+ + ); +} diff --git a/src/app/features/container/headers/page.header.tsx b/src/app/features/container/headers/page.header.tsx new file mode 100644 index 00000000000..acce74e4244 --- /dev/null +++ b/src/app/features/container/headers/page.header.tsx @@ -0,0 +1,83 @@ +import { useNavigate, useOutletContext } from 'react-router-dom'; + +import { SettingsSelectors } from '@tests/selectors/settings.selectors'; +import { SharedComponentsSelectors } from '@tests/selectors/shared-component.selectors'; +import { styled } from 'leather-styles/jsx'; + +import { ArrowLeftIcon, CloseIcon, HamburgerIcon } from '@leather.io/ui'; + +import { RouteUrls } from '@shared/route-urls'; +import { SwitchAccountOutletContext } from '@shared/switch-account'; + +import { Header } from '@app/components/layout/headers/header'; +import { HeaderActionButton } from '@app/components/layout/headers/header-action-button'; +import { HeaderGrid, HeaderGridRightCol } from '@app/components/layout/headers/header-grid'; +import { LogoBox } from '@app/components/layout/headers/logo-box'; +import { Settings } from '@app/features/settings/settings'; + +interface PageHeaderProps { + title?: string; + isSummaryPage?: boolean; + isSessionLocked?: boolean; + isSettingsVisibleOnSm?: boolean; + onBackLocation?: RouteUrls; + onClose?(): void; +} + +export function PageHeader({ + title, + isSummaryPage, + isSessionLocked, + isSettingsVisibleOnSm, + onBackLocation, +}: PageHeaderProps) { + const { isShowingSwitchAccount, setIsShowingSwitchAccount } = + useOutletContext(); + const navigate = useNavigate(); + + // pages with nested dialogs specify onBackLocation to prevent navigate(-1) re-opening the dialog + const onGoBack = onBackLocation ? () => navigate(onBackLocation) : () => navigate(-1); + const canGoBack = !isSummaryPage && !isSessionLocked; + + return ( + <> +
+ + {canGoBack && ( + } + onAction={onGoBack} + dataTestId={SharedComponentsSelectors.HeaderBackBtn} + /> + )} + + + } + centerCol={title && {title}} + rightCol={ + + {isSummaryPage ? ( + } + dataTestId={SharedComponentsSelectors.HeaderCloseBtn} + onAction={() => navigate(RouteUrls.Home)} + /> + ) : ( + + + } + toggleSwitchAccount={() => setIsShowingSwitchAccount(!isShowingSwitchAccount)} + /> + + )} + + } + /> +
+ + ); +} diff --git a/src/app/features/container/headers/popup.header.tsx b/src/app/features/container/headers/popup.header.tsx new file mode 100644 index 00000000000..c29a71c5d6f --- /dev/null +++ b/src/app/features/container/headers/popup.header.tsx @@ -0,0 +1,53 @@ +import { useOutletContext } from 'react-router-dom'; + +import { Box } from 'leather-styles/jsx'; + +import { Flag, Logo } from '@leather.io/ui'; + +import { SwitchAccountOutletContext } from '@shared/switch-account'; + +import { Header } from '@app/components/layout/headers/header'; +import { HeaderGrid, HeaderGridRightCol } from '@app/components/layout/headers/header-grid'; +import { CurrentAccountAvatar } from '@app/features/current-account/current-account-avatar'; +import { CurrentAccountName } from '@app/features/current-account/current-account-name'; +import { TotalBalance } from '@app/features/total-balance/total-balance'; + +interface PopupHeaderProps { + showSwitchAccount?: boolean; + balance?: 'all' | 'stx'; +} + +export function PopupHeader({ showSwitchAccount, balance }: PopupHeaderProps) { + const { isShowingSwitchAccount, setIsShowingSwitchAccount } = + useOutletContext(); + return ( +
+ + {showSwitchAccount ? ( + } + onClick={() => setIsShowingSwitchAccount(!isShowingSwitchAccount)} + cursor="pointer" + > + + + ) : ( + + + + )} + + } + rightCol={ + + {balance && } + + } + /> +
+ ); +} diff --git a/src/app/features/container/utils/get-popup-header.ts b/src/app/features/container/utils/get-popup-header.ts deleted file mode 100644 index 52d71c014eb..00000000000 --- a/src/app/features/container/utils/get-popup-header.ts +++ /dev/null @@ -1,87 +0,0 @@ -import { RouteUrls } from '@shared/route-urls'; - -export function isRpcRoute(pathname: RouteUrls) { - switch (pathname) { - case RouteUrls.PsbtRequest: - case RouteUrls.SignatureRequest: - case RouteUrls.RpcStacksSignature: - case RouteUrls.RpcSignBip322Message: - case RouteUrls.RpcStacksSignature: - case RouteUrls.RpcSignPsbt: - case RouteUrls.RpcSignPsbtSummary: - case RouteUrls.RpcSendTransfer: - case RouteUrls.RpcSendTransferChooseFee: - case RouteUrls.RpcSendTransferConfirmation: - case RouteUrls.RpcSendTransferSummary: - return true; - default: - return false; - } -} - -export function showAccountInfo(pathname: RouteUrls) { - switch (pathname) { - case RouteUrls.PsbtRequest: - case RouteUrls.TransactionRequest: - case RouteUrls.ProfileUpdateRequest: - case RouteUrls.RpcSendTransfer: - case RouteUrls.RpcSignPsbt: - case RouteUrls.RpcSignBip322Message: - case RouteUrls.SignatureRequest: - case RouteUrls.RpcStacksSignature: - return true; - default: - return false; - } -} - -export function showBalanceInfo(pathname: RouteUrls) { - switch (pathname) { - case RouteUrls.ProfileUpdateRequest: - case RouteUrls.RpcSendTransfer: - case RouteUrls.PsbtRequest: - case RouteUrls.RpcSignBip322Message: - case RouteUrls.RpcStacksSignature: - case RouteUrls.TransactionRequest: - return true; - default: - return false; - } -} - -export function getDisplayAddresssBalanceOf(pathname: RouteUrls) { - switch (pathname) { - case RouteUrls.ProfileUpdateRequest: - case RouteUrls.RpcSendTransfer: - case RouteUrls.PsbtRequest: - case RouteUrls.RpcSignBip322Message: - return 'all'; - case RouteUrls.RpcStacksSignature: - case RouteUrls.TransactionRequest: - default: - return 'stx'; - } -} - -export function isKnownPopupRoute(pathname: RouteUrls) { - switch (pathname) { - case RouteUrls.TransactionRequest: - case RouteUrls.ProfileUpdateRequest: - case RouteUrls.PsbtRequest: - case RouteUrls.SignatureRequest: - case RouteUrls.RpcGetAddresses: - case RouteUrls.RpcSendTransfer: - case RouteUrls.SignatureRequest: - case RouteUrls.RpcSignBip322Message: - case RouteUrls.RpcStacksSignature: - case RouteUrls.RpcSignPsbt: - case RouteUrls.RpcSignPsbtSummary: - case RouteUrls.RpcSendTransfer: - case RouteUrls.RpcSendTransferChooseFee: - case RouteUrls.RpcSendTransferConfirmation: - case RouteUrls.RpcSendTransferSummary: - return true; - default: - return false; - } -} diff --git a/src/app/features/container/utils/get-title-from-url.ts b/src/app/features/container/utils/get-title-from-url.ts deleted file mode 100644 index c23fa79d6dc..00000000000 --- a/src/app/features/container/utils/get-title-from-url.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { RouteUrls } from '@shared/route-urls'; - -export function getTitleFromUrl(pathname: RouteUrls) { - if (pathname.match(RouteUrls.SendCryptoAsset)) { - // don't show send on first step of send flow or popuop transfer - if (pathname === RouteUrls.SendCryptoAsset) return undefined; - if (pathname === RouteUrls.RpcSendTransfer) return undefined; - return 'Send'; - } - - switch (pathname) { - case RouteUrls.AddNetwork: - return 'Add a network'; - case RouteUrls.SendBrc20ChooseFee: - return 'Choose fee'; - case RouteUrls.SendBrc20Confirmation: - case RouteUrls.SwapReview: - case RouteUrls.SendBrc20Confirmation: - case '/send/btc/confirm': - return 'Review'; - case RouteUrls.Swap: - return 'Swap'; - case RouteUrls.SentStxTxSummary: - case RouteUrls.SentBtcTxSummary: - return 'Sent'; - case RouteUrls.SentBrc20Summary: - return 'Creating transfer inscription'; - case RouteUrls.SendBrc20Confirmation: - default: - return undefined; - } -} diff --git a/src/app/features/container/utils/route-helpers.ts b/src/app/features/container/utils/route-helpers.ts deleted file mode 100644 index 7e7f66f31fa..00000000000 --- a/src/app/features/container/utils/route-helpers.ts +++ /dev/null @@ -1,80 +0,0 @@ -import { RouteUrls } from '@shared/route-urls'; - -import { isKnownPopupRoute } from './get-popup-header'; - -function isHomePage(pathname: RouteUrls) { - return ( - pathname === RouteUrls.Home || - pathname.match(RouteUrls.Activity) || - pathname.match(RouteUrls.Receive) || - pathname.match(RouteUrls.SendOrdinalInscription) - ); -} - -export function isLandingPage(pathname: RouteUrls) { - return pathname.match(RouteUrls.Onboarding); // need to match get-started/ledger -} - -function isOnboardingPage(pathname: RouteUrls) { - return ( - pathname === RouteUrls.BackUpSecretKey || - pathname === RouteUrls.SetPassword || - pathname === RouteUrls.SignIn || - pathname === RouteUrls.ViewSecretKey - ); -} - -function isFundPage(pathname: RouteUrls) { - return ( - pathname === RouteUrls.Fund.replace(':currency', 'STX') || - pathname === RouteUrls.Fund.replace(':currency', 'BTC') - ); -} - -export function getPageVariant(pathname: RouteUrls) { - if (isFundPage(pathname)) return 'fund'; - if (isHomePage(pathname)) return 'home'; - if (isOnboardingPage(pathname)) return 'onboarding'; - return 'page'; -} - -export function getIsSessionLocked(pathname: RouteUrls) { - return pathname === RouteUrls.Unlock; -} - -export function isSummaryPage(pathname: RouteUrls) { - /* TODO refactor the summary routes to make this cleaner - we need to block going back from summary pages catching the dynamic routes: - SentBtcTxSummary = '/sent/btc/:txId', - SentStxTxSummary = '/sent/stx/:txId', - SentBrc20Summary = '/send/brc20/:ticker/summary', - RpcSignPsbtSummary = '/sign-psbt/summary', - RpcSendTransferSummary = '/send-transfer/summary', - */ - return pathname.match('/sent/stx/') || pathname.match('/sent/btc/' || pathname.match('summary')); -} - -export function canGoBack(pathname: RouteUrls) { - if (getIsSessionLocked(pathname) || isKnownPopupRoute(pathname) || isSummaryPage(pathname)) { - return false; - } - return true; -} - -export function hideLogo(pathname: RouteUrls) { - return pathname === RouteUrls.RpcGetAddresses || pathname === RouteUrls.ViewSecretKey; -} - -export function isNoHeaderPopup(pathname: RouteUrls) { - return pathname === RouteUrls.RpcGetAddresses || pathname === RouteUrls.ChooseAccount; -} - -export function hideSettingsOnSm(pathname: RouteUrls) { - switch (pathname) { - case RouteUrls.SendCryptoAsset: - case RouteUrls.FundChooseCurrency: - return true; - default: - return false; - } -} diff --git a/src/app/features/current-account/current-account-avatar.tsx b/src/app/features/current-account/current-account-avatar.tsx index 0187c47fd33..11c4149113e 100644 --- a/src/app/features/current-account/current-account-avatar.tsx +++ b/src/app/features/current-account/current-account-avatar.tsx @@ -1,5 +1,3 @@ -import { memo } from 'react'; - import { CircleProps } from 'leather-styles/jsx'; import { useCurrentAccountDisplayName } from '@app/common/hooks/account/use-account-names'; @@ -9,17 +7,12 @@ import { AccountAvatar } from '@app/ui/components/account/account-avatar/account interface CurrentAccountAvatar extends CircleProps { toggleSwitchAccount(): void; } -export const CurrentAccountAvatar = memo(({ toggleSwitchAccount }: CurrentAccountAvatar) => { +export function CurrentAccountAvatar() { const stacksAccount = useCurrentStacksAccount(); const { data: name = 'Account' } = useCurrentAccountDisplayName(); if (!stacksAccount) return null; return ( - toggleSwitchAccount()} - publicKey={stacksAccount.stxPublicKey} - /> + ); -}); +} diff --git a/src/app/features/dialogs/edit-nonce-dialog/edit-nonce-dialog.tsx b/src/app/features/dialogs/edit-nonce-dialog/edit-nonce-dialog.tsx index 35389fa1f3d..b4e85091017 100644 --- a/src/app/features/dialogs/edit-nonce-dialog/edit-nonce-dialog.tsx +++ b/src/app/features/dialogs/edit-nonce-dialog/edit-nonce-dialog.tsx @@ -10,7 +10,7 @@ import { StacksSendFormValues, StacksTransactionFormValues } from '@shared/model import { useOnMount } from '@app/common/hooks/use-on-mount'; import { openInNewTab } from '@app/common/utils/open-in-new-tab'; -import { DialogHeader } from '@app/ui/components/containers/headers/dialog-header'; +import { DialogHeader } from '@app/components/layout/dialog-header'; import { EditNonceForm } from './components/edit-nonce-form'; diff --git a/src/app/features/dialogs/increase-fee-dialog/increase-btc-fee-dialog.tsx b/src/app/features/dialogs/increase-fee-dialog/increase-btc-fee-dialog.tsx index 8a382bca309..4b1176eaa3b 100644 --- a/src/app/features/dialogs/increase-fee-dialog/increase-btc-fee-dialog.tsx +++ b/src/app/features/dialogs/increase-fee-dialog/increase-btc-fee-dialog.tsx @@ -14,10 +14,10 @@ import { useLocationStateWithCache } from '@app/common/hooks/use-location-state' import { getBitcoinTxValue } from '@app/common/transactions/bitcoin/utils'; import { BitcoinCustomFeeInput } from '@app/components/bitcoin-custom-fee/bitcoin-custom-fee-input'; import { BitcoinTransactionItem } from '@app/components/bitcoin-transaction-item/bitcoin-transaction-item'; +import { Footer } from '@app/components/layout'; +import { DialogHeader } from '@app/components/layout/dialog-header'; import { useBtcCryptoAssetBalanceNativeSegwit } from '@app/query/bitcoin/balance/btc-balance-native-segwit.hooks'; import { useCurrentAccountNativeSegwitIndexZeroSigner } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks'; -import { Footer } from '@app/ui/components/containers/footers/footer'; -import { DialogHeader } from '@app/ui/components/containers/headers/dialog-header'; import { IncreaseFeeActions } from './components/increase-fee-actions'; import { useBtcIncreaseFee } from './hooks/use-btc-increase-fee'; diff --git a/src/app/features/dialogs/increase-fee-dialog/increase-stx-fee-dialog.tsx b/src/app/features/dialogs/increase-fee-dialog/increase-stx-fee-dialog.tsx index 00730e1e7c4..2f87abdfb4a 100644 --- a/src/app/features/dialogs/increase-fee-dialog/increase-stx-fee-dialog.tsx +++ b/src/app/features/dialogs/increase-fee-dialog/increase-stx-fee-dialog.tsx @@ -21,14 +21,14 @@ import { useRefreshAllAccountData } from '@app/common/hooks/account/use-refresh- import { stacksValue } from '@app/common/stacks-utils'; import { safelyFormatHexTxid } from '@app/common/utils/safe-handle-txid'; import { stxFeeValidator } from '@app/common/validation/forms/fee-validators'; +import { Footer } from '@app/components/layout'; +import { DialogHeader } from '@app/components/layout/dialog-header'; import { LoadingSpinner } from '@app/components/loading-spinner'; import { StacksTransactionItem } from '@app/components/stacks-transaction-item/stacks-transaction-item'; import { useStacksBroadcastTransaction } from '@app/features/stacks-transaction-request/hooks/use-stacks-broadcast-transaction'; import { useToast } from '@app/features/toasts/use-toast'; import { useCurrentStacksAccountAddress } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks'; import { useSubmittedTransactionsActions } from '@app/store/submitted-transactions/submitted-transactions.hooks'; -import { Footer } from '@app/ui/components/containers/footers/footer'; -import { DialogHeader } from '@app/ui/components/containers/headers/dialog-header'; import { IncreaseFeeActions } from './components/increase-fee-actions'; import { IncreaseFeeField } from './components/increase-fee-field'; diff --git a/src/app/features/dialogs/switch-account-dialog/switch-account-dialog.tsx b/src/app/features/dialogs/switch-account-dialog/switch-account-dialog.tsx index 79067374066..617e6b2aa98 100644 --- a/src/app/features/dialogs/switch-account-dialog/switch-account-dialog.tsx +++ b/src/app/features/dialogs/switch-account-dialog/switch-account-dialog.tsx @@ -7,27 +7,23 @@ import { Button, Dialog } from '@leather.io/ui'; import { useCreateAccount } from '@app/common/hooks/account/use-create-account'; import { useWalletType } from '@app/common/use-wallet-type'; +import { Footer } from '@app/components/layout'; +import { DialogHeader } from '@app/components/layout/dialog-header'; import { useCurrentAccountIndex } from '@app/store/accounts/account'; import { useFilteredBitcoinAccounts } from '@app/store/accounts/blockchain/bitcoin/bitcoin.ledger'; import { useStacksAccounts } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks'; -import { Footer } from '@app/ui/components/containers/footers/footer'; -import { DialogHeader } from '@app/ui/components/containers/headers/dialog-header'; import { VirtuosoWrapper } from '@app/ui/components/virtuoso'; import { AccountListUnavailable } from './components/account-list-unavailable'; import { SwitchAccountListItem } from './components/switch-account-list-item'; -export interface SwitchAccountOutletContext { - isShowingSwitchAccount: boolean; - setIsShowingSwitchAccount(isShowing: boolean): void; -} - interface SwitchAccountDialogProps { isShowing: boolean; onClose(): void; } export const SwitchAccountDialog = memo(({ isShowing, onClose }: SwitchAccountDialogProps) => { + console.info('SwitchAccountDialog render', isShowing); const currentAccountIndex = useCurrentAccountIndex(); const createAccount = useCreateAccount(); const { whenWallet } = useWalletType(); diff --git a/src/app/features/ledger/flows/jwt-signing/ledger-sign-jwt-container.tsx b/src/app/features/ledger/flows/jwt-signing/ledger-sign-jwt-container.tsx index 975596b33a7..d6622cd8b9f 100644 --- a/src/app/features/ledger/flows/jwt-signing/ledger-sign-jwt-container.tsx +++ b/src/app/features/ledger/flows/jwt-signing/ledger-sign-jwt-container.tsx @@ -17,6 +17,7 @@ import { useDefaultRequestParams } from '@app/common/hooks/use-default-request-s import { useKeyActions } from '@app/common/hooks/use-key-actions'; import { useScrollLock } from '@app/common/hooks/use-scroll-lock'; import { makeLedgerCompatibleUnsignedAuthResponsePayload } from '@app/common/unsafe-auth-response'; +import { DialogHeader } from '@app/components/layout/dialog-header'; import { useCancelLedgerAction } from '@app/features/ledger/utils/generic-ledger-utils'; import { getStacksAppVersion, @@ -26,7 +27,6 @@ import { useCurrentStacksAccount, useStacksAccounts, } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks'; -import { DialogHeader } from '@app/ui/components/containers/headers/dialog-header'; import { useLedgerNavigate } from '../../hooks/use-ledger-navigate'; import { checkLockedDeviceError, useLedgerResponseState } from '../../utils/generic-ledger-utils'; diff --git a/src/app/features/ledger/flows/stacks-message-signing/ledger-stacks-sign-msg-container.tsx b/src/app/features/ledger/flows/stacks-message-signing/ledger-stacks-sign-msg-container.tsx index c0436f993c7..fe0a7462c6e 100644 --- a/src/app/features/ledger/flows/stacks-message-signing/ledger-stacks-sign-msg-container.tsx +++ b/src/app/features/ledger/flows/stacks-message-signing/ledger-stacks-sign-msg-container.tsx @@ -12,6 +12,7 @@ import { UnsignedMessage, whenSignableMessageOfType } from '@shared/signature/si import { useScrollLock } from '@app/common/hooks/use-scroll-lock'; import { appEvents } from '@app/common/publish-subscribe'; +import { DialogHeader } from '@app/components/layout/dialog-header'; import { useCancelLedgerAction } from '@app/features/ledger/utils/generic-ledger-utils'; import { getStacksAppVersion, @@ -21,7 +22,6 @@ import { } from '@app/features/ledger/utils/stacks-ledger-utils'; import { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks'; import { StacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.models'; -import { DialogHeader } from '@app/ui/components/containers/headers/dialog-header'; import { useLedgerAnalytics } from '../../hooks/use-ledger-analytics.hook'; import { useLedgerNavigate } from '../../hooks/use-ledger-navigate'; diff --git a/src/app/features/ledger/generic-flows/request-keys/request-keys-flow.tsx b/src/app/features/ledger/generic-flows/request-keys/request-keys-flow.tsx index 5be63817bbc..29727e22fe0 100644 --- a/src/app/features/ledger/generic-flows/request-keys/request-keys-flow.tsx +++ b/src/app/features/ledger/generic-flows/request-keys/request-keys-flow.tsx @@ -3,7 +3,7 @@ import { Outlet } from 'react-router-dom'; import { Dialog } from '@leather.io/ui'; import { useScrollLock } from '@app/common/hooks/use-scroll-lock'; -import { DialogHeader } from '@app/ui/components/containers/headers/dialog-header'; +import { DialogHeader } from '@app/components/layout/dialog-header'; import { useLedgerNavigate } from '../../hooks/use-ledger-navigate'; import { LedgerRequestKeysContext, LedgerRequestKeysProvider } from './ledger-request-keys.context'; diff --git a/src/app/features/ledger/generic-flows/tx-signing/tx-signing-flow.tsx b/src/app/features/ledger/generic-flows/tx-signing/tx-signing-flow.tsx index b08d07d70a7..c1c05c1b55a 100644 --- a/src/app/features/ledger/generic-flows/tx-signing/tx-signing-flow.tsx +++ b/src/app/features/ledger/generic-flows/tx-signing/tx-signing-flow.tsx @@ -3,7 +3,7 @@ import { Outlet } from 'react-router-dom'; import { Dialog } from '@leather.io/ui'; import { useScrollLock } from '@app/common/hooks/use-scroll-lock'; -import { DialogHeader } from '@app/ui/components/containers/headers/dialog-header'; +import { DialogHeader } from '@app/components/layout/dialog-header'; import { LedgerTxSigningContext, LedgerTxSigningProvider } from './ledger-sign-tx.context'; diff --git a/src/app/features/ledger/generic-steps/connect-device/connect-ledger-start.tsx b/src/app/features/ledger/generic-steps/connect-device/connect-ledger-start.tsx index 9db6583a8aa..a749aca2443 100644 --- a/src/app/features/ledger/generic-steps/connect-device/connect-ledger-start.tsx +++ b/src/app/features/ledger/generic-steps/connect-device/connect-ledger-start.tsx @@ -7,7 +7,7 @@ import { closeWindow } from '@shared/utils'; import { doesBrowserSupportWebUsbApi, whenPageMode } from '@app/common/utils'; import { openIndexPageInNewTab } from '@app/common/utils/open-in-new-tab'; -import { DialogHeader } from '@app/ui/components/containers/headers/dialog-header'; +import { DialogHeader } from '@app/components/layout/dialog-header'; import { immediatelyAttemptLedgerConnection } from '../../hooks/use-when-reattempt-ledger-connection'; import { ConnectLedger } from './connect-ledger'; diff --git a/src/app/features/ledger/generic-steps/unsupported-browser/unsupported-browser.layout.tsx b/src/app/features/ledger/generic-steps/unsupported-browser/unsupported-browser.layout.tsx index 4486d86e91e..7d795b5605c 100644 --- a/src/app/features/ledger/generic-steps/unsupported-browser/unsupported-browser.layout.tsx +++ b/src/app/features/ledger/generic-steps/unsupported-browser/unsupported-browser.layout.tsx @@ -4,8 +4,8 @@ import { styled } from 'leather-styles/jsx'; import { Dialog, Link } from '@leather.io/ui'; +import { DialogHeader } from '@app/components/layout/dialog-header'; import { UnsupportedBrowserImg } from '@app/features/ledger/illustrations/ledger-illu-unsupported-browser'; -import { DialogHeader } from '@app/ui/components/containers/headers/dialog-header'; import { LedgerTitle } from '../../components/ledger-title'; import { LedgerWrapper } from '../../components/ledger-wrapper'; diff --git a/src/app/features/psbt-signer/components/psbt-request-actions.tsx b/src/app/features/psbt-signer/components/psbt-request-actions.tsx index 6b8746b8b7f..d940cc6d347 100644 --- a/src/app/features/psbt-signer/components/psbt-request-actions.tsx +++ b/src/app/features/psbt-signer/components/psbt-request-actions.tsx @@ -1,6 +1,6 @@ import { Button } from '@leather.io/ui'; -import { Footer } from '@app/ui/components/containers/footers/footer'; +import { Footer } from '@app/components/layout'; interface PsbtRequestActionsProps { isLoading?: boolean; diff --git a/src/app/features/psbt-signer/psbt-signer.tsx b/src/app/features/psbt-signer/psbt-signer.tsx index 50073036c2d..6a426654206 100644 --- a/src/app/features/psbt-signer/psbt-signer.tsx +++ b/src/app/features/psbt-signer/psbt-signer.tsx @@ -11,13 +11,14 @@ import { RouteUrls } from '@shared/route-urls'; import { closeWindow } from '@shared/utils'; import { SignPsbtArgs } from '@app/common/psbt/requests'; +import { Footer } from '@app/components/layout'; +import { CardContent } from '@app/components/layout'; +import { Card } from '@app/components/layout'; +import { PopupHeader } from '@app/features/container/headers/popup.header'; import { useBreakOnNonCompliantEntity } from '@app/query/common/compliance-checker/compliance-checker.query'; import { useOnOriginTabClose } from '@app/routes/hooks/use-on-tab-closed'; import { useCurrentAccountNativeSegwitIndexZeroSigner } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks'; import { useCurrentAccountTaprootIndexZeroSigner } from '@app/store/accounts/blockchain/bitcoin/taproot-account.hooks'; -import { Footer } from '@app/ui/components/containers/footers/footer'; -import { Card } from '@app/ui/layout/card/card'; -import { CardContent } from '@app/ui/layout/card/card-content'; import * as Psbt from './components'; import { usePsbtDetails } from './hooks/use-psbt-details'; @@ -93,6 +94,7 @@ export function PsbtSigner(props: PsbtSignerProps) { return ( + diff --git a/src/app/features/retrieve-taproot-to-native-segwit/components/retrieve-taproot-to-native-segwit.layout.tsx b/src/app/features/retrieve-taproot-to-native-segwit/components/retrieve-taproot-to-native-segwit.layout.tsx index d72d6a97620..7e1b60b1422 100644 --- a/src/app/features/retrieve-taproot-to-native-segwit/components/retrieve-taproot-to-native-segwit.layout.tsx +++ b/src/app/features/retrieve-taproot-to-native-segwit/components/retrieve-taproot-to-native-segwit.layout.tsx @@ -2,9 +2,9 @@ import { Flex, styled } from 'leather-styles/jsx'; import { BtcAvatarIcon, Button, Callout, 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 { Card } from '@app/ui/layout/card/card'; +import { Footer } from '@app/components/layout'; +import { Card } from '@app/components/layout'; +import { DialogHeader } from '@app/components/layout/dialog-header'; interface RetrieveTaprootToNativeSegwitLayoutProps { isBroadcasting: boolean; diff --git a/src/app/features/settings/network/network.tsx b/src/app/features/settings/network/network.tsx index a79ef308ab0..c35adafa658 100644 --- a/src/app/features/settings/network/network.tsx +++ b/src/app/features/settings/network/network.tsx @@ -8,11 +8,11 @@ import { Button, Dialog } from '@leather.io/ui'; import { RouteUrls } from '@shared/route-urls'; import { analytics } from '@shared/utils/analytics'; +import { Footer } from '@app/components/layout'; +import { DialogHeader } from '@app/components/layout/dialog-header'; import { NetworkListItem } from '@app/features/settings/network/network-list-item'; import { useCurrentNetworkState, useNetworksActions } from '@app/store/networks/networks.hooks'; import { useNetworks } from '@app/store/networks/networks.selectors'; -import { Footer } from '@app/ui/components/containers/footers/footer'; -import { DialogHeader } from '@app/ui/components/containers/headers/dialog-header'; const defaultNetworkIds = Object.values(WalletDefaultNetworkConfigurationIds) as string[]; diff --git a/src/app/features/settings/sign-out/sign-out.tsx b/src/app/features/settings/sign-out/sign-out.tsx index 04e83ee6e6b..1ced3982d6a 100644 --- a/src/app/features/settings/sign-out/sign-out.tsx +++ b/src/app/features/settings/sign-out/sign-out.tsx @@ -5,8 +5,8 @@ import { Flex, HStack, styled } from 'leather-styles/jsx'; import { Button, Callout, Dialog } from '@leather.io/ui'; import { useWalletType } from '@app/common/use-wallet-type'; -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'; interface SignOutDialogProps { isShowing: boolean; diff --git a/src/app/features/settings/theme/theme-dialog.tsx b/src/app/features/settings/theme/theme-dialog.tsx index 96cd5117739..ac7e0ef14a9 100644 --- a/src/app/features/settings/theme/theme-dialog.tsx +++ b/src/app/features/settings/theme/theme-dialog.tsx @@ -5,7 +5,7 @@ import { Dialog } from '@leather.io/ui'; import { analytics } from '@shared/utils/analytics'; import { UserSelectedTheme, themeLabelMap, useThemeSwitcher } from '@app/common/theme-provider'; -import { DialogHeader } from '@app/ui/components/containers/headers/dialog-header'; +import { DialogHeader } from '@app/components/layout/dialog-header'; import { ThemeListItem } from './theme-list-item'; diff --git a/src/app/features/stacks-high-fee-warning/stacks-high-fee-dialog.tsx b/src/app/features/stacks-high-fee-warning/stacks-high-fee-dialog.tsx index 9ebcd5850e7..d93d699812d 100644 --- a/src/app/features/stacks-high-fee-warning/stacks-high-fee-dialog.tsx +++ b/src/app/features/stacks-high-fee-warning/stacks-high-fee-dialog.tsx @@ -7,8 +7,8 @@ import { Button, Caption, Dialog, ErrorIcon, Link, Title } from '@leather.io/ui' import { StacksSendFormValues } from '@shared/models/form.model'; import { openInNewTab } from '@app/common/utils/open-in-new-tab'; -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'; import { useStacksHighFeeWarningContext } from './stacks-high-fee-warning-container'; diff --git a/src/app/features/container/total-balance.tsx b/src/app/features/total-balance/total-balance.tsx similarity index 100% rename from src/app/features/container/total-balance.tsx rename to src/app/features/total-balance/total-balance.tsx diff --git a/src/app/pages/choose-account/choose-account.tsx b/src/app/pages/choose-account/choose-account.tsx index c8994846588..697e6780e4e 100644 --- a/src/app/pages/choose-account/choose-account.tsx +++ b/src/app/pages/choose-account/choose-account.tsx @@ -10,6 +10,7 @@ import { closeWindow } from '@shared/utils'; import { useCancelAuthRequest } from '@app/common/authentication/use-cancel-auth-request'; import { useAppDetails } from '@app/common/hooks/auth/use-app-details'; import { RequesterFlag } from '@app/components/requester-flag'; +// import { Content } from '@app/components/layout'; import { ChooseAccountsList } from '@app/pages/choose-account/components/accounts'; import { useOnOriginTabClose } from '@app/routes/hooks/use-on-tab-closed'; import { useStacksAccounts } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks'; diff --git a/src/app/pages/fund/choose-asset-to-fund/choose-asset-to-fund.tsx b/src/app/pages/fund/choose-asset-to-fund/choose-asset-to-fund.tsx index d67188eab31..8dbbf6e9e45 100644 --- a/src/app/pages/fund/choose-asset-to-fund/choose-asset-to-fund.tsx +++ b/src/app/pages/fund/choose-asset-to-fund/choose-asset-to-fund.tsx @@ -5,18 +5,17 @@ import { Stack, styled } from 'leather-styles/jsx'; import { RouteUrls } from '@shared/route-urls'; +import { Card, Content, Page } from '@app/components/layout'; import { BitcoinNativeSegwitAccountLoader } from '@app/components/loaders/bitcoin-account-loader'; import { BtcAssetItemBalanceLoader } from '@app/components/loaders/btc-balance-loader'; import { CurrentStacksAccountLoader } from '@app/components/loaders/stacks-account-loader'; import { StxAssetItemBalanceLoader } from '@app/components/loaders/stx-balance-loader'; import { BtcCryptoAssetItem } from '@app/features/asset-list/bitcoin/btc-crypto-asset-item/btc-crypto-asset-item'; import { StxCryptoAssetItem } from '@app/features/asset-list/stacks/stx-crypo-asset-item/stx-crypto-asset-item'; -import { Card } from '@app/ui/layout/card/card'; -import { Page } from '@app/ui/layout/page/page.layout'; +import { PageHeader } from '@app/features/container/headers/page.header'; export function ChooseCryptoAssetToFund() { const navigate = useNavigate(); - const navigateToFund = useCallback( (symbol: string) => navigate(RouteUrls.Fund.replace(':currency', symbol)), [navigate] @@ -24,46 +23,49 @@ export function ChooseCryptoAssetToFund() { return ( <> - - - choose asset
to fund - - } - > - - - {signer => ( - - {(balance, isLoading) => ( - navigateToFund('BTC')} - /> - )} - - )} - + + + + + choose asset
to fund + + } + > + + + {signer => ( + + {(balance, isLoading) => ( + navigateToFund('BTC')} + /> + )} + + )} + - - {account => ( - - {(balance, isLoading) => ( - navigateToFund('STX')} - /> - )} - - )} - - - - - + + {account => ( + + {(balance, isLoading) => ( + navigateToFund('STX')} + /> + )} + + )} + + + + + + ); } diff --git a/src/app/pages/fund/fund.tsx b/src/app/pages/fund/fund.tsx index 506bf98b4e4..9a895a7bcff 100644 --- a/src/app/pages/fund/fund.tsx +++ b/src/app/pages/fund/fund.tsx @@ -9,7 +9,9 @@ import type { import { RouteUrls } from '@shared/route-urls'; +import { Content } from '@app/components/layout'; import { FullPageLoadingSpinner } from '@app/components/loading-spinner'; +import { PageHeader } from '@app/features/container/headers/page.header'; import { useCurrentAccountNativeSegwitIndexZeroSignerNullable } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks'; import { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks'; @@ -51,10 +53,13 @@ export function FundPage() { return ( <> - - - - + + + + + + + ); } diff --git a/src/app/pages/home/home.tsx b/src/app/pages/home/home.tsx index 0e323f01bd3..9ac3c77b0c2 100644 --- a/src/app/pages/home/home.tsx +++ b/src/app/pages/home/home.tsx @@ -1,13 +1,16 @@ import { Route, useNavigate, useOutletContext } from 'react-router-dom'; +import { HomePageSelectors } from '@tests/selectors/home.selectors'; +import { Box, Stack } from 'leather-styles/jsx'; + import { RouteUrls } from '@shared/route-urls'; +import { SwitchAccountOutletContext } from '@shared/switch-account'; import { useAccountDisplayName } from '@app/common/hooks/account/use-account-names'; import { useOnboardingState } from '@app/common/hooks/auth/use-onboarding-state'; import { useTotalBalance } from '@app/common/hooks/balance/use-total-balance'; import { useOnMount } from '@app/common/hooks/use-on-mount'; import { ActivityList } from '@app/features/activity-list/activity-list'; -import { SwitchAccountOutletContext } from '@app/features/dialogs/switch-account-dialog/switch-account-dialog'; import { FeedbackButton } from '@app/features/feedback-button/feedback-button'; import { Assets } from '@app/pages/home/components/assets'; import { homePageModalRoutes } from '@app/routes/app-routes'; @@ -16,15 +19,14 @@ import { useCurrentAccountIndex } from '@app/store/accounts/account'; import { useCurrentAccountNativeSegwitAddressIndexZero } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks'; import { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks'; import { AccountCard } from '@app/ui/components/account/account.card'; -import { HomeLayout } from '@app/ui/pages/home.layout'; import { AccountActions } from './components/account-actions'; import { HomeTabs } from './components/home-tabs'; export function Home() { - const { decodedAuthRequest } = useOnboardingState(); const { isShowingSwitchAccount, setIsShowingSwitchAccount } = useOutletContext(); + const { decodedAuthRequest } = useOnboardingState(); const navigate = useNavigate(); const account = useCurrentStacksAccount(); const currentAccountIndex = useCurrentAccountIndex(); @@ -45,8 +47,19 @@ export function Home() { }); return ( - + - } - > + @@ -68,6 +80,6 @@ export function Home() { {homePageModalRoutes} - + ); } diff --git a/src/app/pages/onboarding/back-up-secret-key/back-up-secret-key.tsx b/src/app/pages/onboarding/back-up-secret-key/back-up-secret-key.tsx index 7ee4ff0de05..c18fedb833a 100644 --- a/src/app/pages/onboarding/back-up-secret-key/back-up-secret-key.tsx +++ b/src/app/pages/onboarding/back-up-secret-key/back-up-secret-key.tsx @@ -7,9 +7,10 @@ import { EyeSlashIcon, KeyIcon, LockIcon } from '@leather.io/ui'; import { RouteUrls } from '@shared/route-urls'; +import { Content, TwoColumnLayout } from '@app/components/layout'; +import { MainHeader } from '@app/features/container/headers/main.header'; import { SecretKey } from '@app/features/secret-key-displayer/secret-key-displayer'; import { useDefaultWalletSecretKey } from '@app/store/in-memory-key/in-memory-key.selectors'; -import { TwoColumnLayout } from '@app/ui/pages/two-column.layout'; export const BackUpSecretKeyPage = memo(() => { const secretKey = useDefaultWalletSecretKey(); @@ -22,38 +23,43 @@ export const BackUpSecretKeyPage = memo(() => { if (!secretKey) return null; return ( - Back up your Secret Key} - content={ - <> - You'll need it to access your wallet on a new device, or this one if you lose your - password — so back it up somewhere safe! - - } - action={ - - - - - Your Secret Key gives
access to your wallet - - - - - - Never share your
Secret Key with anyone - - - - - - Store it somewhere
100% private and secure - - - - } - > - - + <> + + + Back up your Secret Key} + content={ + <> + You'll need it to access your wallet on a new device, or this one if you lose your + password — so back it up somewhere safe! + + } + action={ + + + + + Your Secret Key gives
access to your wallet + + + + + + Never share your
Secret Key with anyone + + + + + + Store it somewhere
100% private and secure + + + + } + > + + + + ); }); diff --git a/src/app/pages/onboarding/set-password/set-password.tsx b/src/app/pages/onboarding/set-password/set-password.tsx index b2b8fa4dffe..d3804961b10 100644 --- a/src/app/pages/onboarding/set-password/set-password.tsx +++ b/src/app/pages/onboarding/set-password/set-password.tsx @@ -19,9 +19,10 @@ import { blankPasswordValidation, validatePassword, } from '@app/common/validation/validate-password'; +import { Content, TwoColumnLayout } from '@app/components/layout'; +import { MainHeader } from '@app/features/container/headers/main.header'; import { OnboardingGate } from '@app/routes/onboarding-gate'; import { useStacksAccounts } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks'; -import { TwoColumnLayout } from '@app/ui/pages/two-column.layout'; import { PasswordField } from './components/password-field'; @@ -49,7 +50,7 @@ function SetPasswordPage() { const finishSignIn = useFinishAuthRequest(); const navigate = useNavigate(); const { decodedAuthRequest } = useOnboardingState(); - + debugger; useEffect(() => { void analytics.page('view', '/set-password'); }, []); @@ -109,46 +110,51 @@ function SetPasswordPage() { }), }); return ( - - {({ dirty, isSubmitting, isValid }) => ( -
- - Set a
- password - - } - content={ - <> - Your password protects your Secret Key on this device only. To access your wallet on - another device, you'll need just your Secret Key. - - } - > - <> - - - - -
- )} - + <> + + + + + + )} + + + ); } diff --git a/src/app/pages/onboarding/sign-in/sign-in.tsx b/src/app/pages/onboarding/sign-in/sign-in.tsx index 6f20c5a85ec..17c00d096a0 100644 --- a/src/app/pages/onboarding/sign-in/sign-in.tsx +++ b/src/app/pages/onboarding/sign-in/sign-in.tsx @@ -3,8 +3,9 @@ import { useEffect, useState } from 'react'; import { Link } from '@leather.io/ui'; import { createNullArrayOfLength } from '@leather.io/utils'; +import { Content, TwoColumnLayout } from '@app/components/layout'; +import { MainHeader } from '@app/features/container/headers/main.header'; import { MnemonicForm } from '@app/pages/onboarding/sign-in/mnemonic-form'; -import { TwoColumnLayout } from '@app/ui/pages/two-column.layout'; export function SignIn() { const [twentyFourWordMode, setTwentyFourWordMode] = useState(true); @@ -18,29 +19,34 @@ export function SignIn() { }, [twentyFourWordMode]); return ( - - Sign in
with your
Secret Key - - } - content={<>Speed things up by pasting your entire Secret Key in one go.} - action={ - setTwentyFourWordMode(!twentyFourWordMode)} - textStyle="label.03" - width="fit-content" - variant="text" + <> + + + + Sign in
with your
Secret Key + + } + content={<>Speed things up by pasting your entire Secret Key in one go.} + action={ + setTwentyFourWordMode(!twentyFourWordMode)} + textStyle="label.03" + width="fit-content" + variant="text" + > + {twentyFourWordMode ? 'Have a 12-word Secret Key?' : 'Use 24 word Secret Key'} + + } > - {twentyFourWordMode ? 'Have a 12-word Secret Key?' : 'Use 24 word Secret Key'} - - } - > - - + + + + ); } diff --git a/src/app/ui/pages/welcome.layout.tsx b/src/app/pages/onboarding/welcome/welcome.layout.tsx similarity index 100% rename from src/app/ui/pages/welcome.layout.tsx rename to src/app/pages/onboarding/welcome/welcome.layout.tsx diff --git a/src/app/pages/onboarding/welcome/welcome.tsx b/src/app/pages/onboarding/welcome/welcome.tsx index 5b1b4c98de5..bdeca0af3bf 100644 --- a/src/app/pages/onboarding/welcome/welcome.tsx +++ b/src/app/pages/onboarding/welcome/welcome.tsx @@ -9,7 +9,8 @@ import { useOnboardingState } from '@app/common/hooks/auth/use-onboarding-state' import { useKeyActions } from '@app/common/hooks/use-key-actions'; import { doesBrowserSupportWebUsbApi, isPopupMode, whenPageMode } from '@app/common/utils'; import { openIndexPageInNewTab } from '@app/common/utils/open-in-new-tab'; -import { WelcomeLayout } from '@app/ui/pages/welcome.layout'; + +import { WelcomeLayout } from './welcome.layout'; export function WelcomePage() { const navigate = useNavigate(); diff --git a/src/app/pages/receive/components/receive-tokens.layout.tsx b/src/app/pages/receive/components/receive-tokens.layout.tsx index d476f84da4a..69c95e6d455 100644 --- a/src/app/pages/receive/components/receive-tokens.layout.tsx +++ b/src/app/pages/receive/components/receive-tokens.layout.tsx @@ -8,9 +8,9 @@ import { token } from 'leather-styles/tokens'; import { AddressDisplayer, Button, Dialog } from '@leather.io/ui'; import { useLocationState } from '@app/common/hooks/use-location-state'; +import { Footer } from '@app/components/layout'; +import { DialogHeader } from '@app/components/layout/dialog-header'; import { useBackgroundLocationRedirect } from '@app/routes/hooks/use-background-location-redirect'; -import { Footer } from '@app/ui/components/containers/footers/footer'; -import { Header } from '@app/ui/components/containers/headers/header'; interface ReceiveTokensLayoutProps { address: string; @@ -29,14 +29,14 @@ export function ReceiveTokensLayout(props: ReceiveTokensLayoutProps) { return ( Receive
{title} } - onGoBack={() => navigate(backgroundLocation ?? '..')} + onClose={() => navigate(backgroundLocation ?? '..')} /> } isShowing diff --git a/src/app/pages/receive/receive-dialog.tsx b/src/app/pages/receive/receive-dialog.tsx index 57ef07fcd89..d415492b900 100644 --- a/src/app/pages/receive/receive-dialog.tsx +++ b/src/app/pages/receive/receive-dialog.tsx @@ -10,11 +10,11 @@ import { RouteUrls } from '@shared/route-urls'; import { analytics } from '@shared/utils/analytics'; import { useLocationState } from '@app/common/hooks/use-location-state'; +import { DialogHeader } from '@app/components/layout/dialog-header'; import { useBackgroundLocationRedirect } from '@app/routes/hooks/use-background-location-redirect'; import { useZeroIndexTaprootAddress } from '@app/store/accounts/blockchain/bitcoin/bitcoin.hooks'; import { useCurrentAccountNativeSegwitAddressIndexZero } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks'; import { useCurrentStacksAccountAddress } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks'; -import { Header } from '@app/ui/components/containers/headers/header'; import { ReceiveCollectibles } from './components/receive-collectibles'; import { ReceiveTokens } from './components/receive-tokens'; @@ -86,10 +86,10 @@ export function ReceiveDialog({ type = 'full' }: ReceiveDialogProps) { return ( navigate(backgroundLocation ?? '..')} + onClose={() => navigate(backgroundLocation ?? '..')} /> } onClose={() => navigate(backgroundLocation ?? '..')} diff --git a/src/app/pages/rpc-get-addresses/components/get-addresses.layout.tsx b/src/app/pages/rpc-get-addresses/components/get-addresses.layout.tsx index 4b2b8429401..fba9ead95c6 100644 --- a/src/app/pages/rpc-get-addresses/components/get-addresses.layout.tsx +++ b/src/app/pages/rpc-get-addresses/components/get-addresses.layout.tsx @@ -8,9 +8,10 @@ interface GetAddressesLayoutProps { requester: string; onUserApproveGetAddresses(): void; } -export function GetAddressesLayout(props: GetAddressesLayoutProps) { - const { requester, onUserApproveGetAddresses } = props; - +export function GetAddressesLayout({ + requester, + onUserApproveGetAddresses, +}: GetAddressesLayoutProps) { return ( - {children} - - ); -} diff --git a/src/app/pages/rpc-send-transfer/rpc-send-transfer-container.tsx b/src/app/pages/rpc-send-transfer/rpc-send-transfer-container.tsx index 5d377e4a7ba..4fe359d610e 100644 --- a/src/app/pages/rpc-send-transfer/rpc-send-transfer-container.tsx +++ b/src/app/pages/rpc-send-transfer/rpc-send-transfer-container.tsx @@ -1,11 +1,14 @@ import { useState } from 'react'; import { Outlet, useOutletContext } from 'react-router-dom'; +import { Flex } from 'leather-styles/jsx'; + import type { BtcFeeType } from '@leather.io/models'; import { closeWindow } from '@shared/utils'; -import { RpcSendTransferContainerLayout } from './components/rpc-send-transfer-container.layout'; +import { PopupHeader } from '@app/features/container/headers/popup.header'; + import { useRpcSendTransfer } from './use-rpc-send-transfer'; interface RpcSendTransferContextState { @@ -27,8 +30,11 @@ export function RpcSendTransferContainer() { } return ( - - - + <> + + + + + ); } diff --git a/src/app/pages/rpc-send-transfer/rpc-send-transfer-summary.tsx b/src/app/pages/rpc-send-transfer/rpc-send-transfer-summary.tsx index c53db7c3196..b39b14f6cc0 100644 --- a/src/app/pages/rpc-send-transfer/rpc-send-transfer-summary.tsx +++ b/src/app/pages/rpc-send-transfer/rpc-send-transfer-summary.tsx @@ -17,8 +17,8 @@ import { InfoCardRow, InfoCardSeparator, } from '@app/components/info-card/info-card'; +import { Card } from '@app/components/layout'; import { useToast } from '@app/features/toasts/use-toast'; -import { Card } from '@app/ui/layout/card/card'; export function RpcSendTransferSummary() { const { state } = useLocation(); diff --git a/src/app/pages/rpc-sign-bip322-message/rpc-sign-bip322-message.tsx b/src/app/pages/rpc-sign-bip322-message/rpc-sign-bip322-message.tsx index f9baaa93a53..61d959fa7a2 100644 --- a/src/app/pages/rpc-sign-bip322-message/rpc-sign-bip322-message.tsx +++ b/src/app/pages/rpc-sign-bip322-message/rpc-sign-bip322-message.tsx @@ -7,6 +7,7 @@ import { closeWindow } from '@shared/utils'; import { Disclaimer } from '@app/components/disclaimer'; import { NoFeesWarningRow } from '@app/components/no-fees-warning-row'; +import { PopupHeader } from '@app/features/container/headers/popup.header'; import { MessagePreviewBox } from '@app/features/message-signer/message-preview-box'; import { MessageSigningRequestLayout } from '@app/features/message-signer/message-signing-request.layout'; import { AccountGate } from '@app/routes/account-gate'; @@ -57,7 +58,7 @@ function RpcSignBip322Message() { return ( <> - + + ); } diff --git a/src/app/pages/rpc-sign-psbt/rpc-sign-psbt-summary.tsx b/src/app/pages/rpc-sign-psbt/rpc-sign-psbt-summary.tsx index 66a3ac21977..4a3071cfddd 100644 --- a/src/app/pages/rpc-sign-psbt/rpc-sign-psbt-summary.tsx +++ b/src/app/pages/rpc-sign-psbt/rpc-sign-psbt-summary.tsx @@ -14,8 +14,8 @@ import { InfoCardFooter, InfoCardRow, } from '@app/components/info-card/info-card'; +import { Card } from '@app/components/layout'; import { useToast } from '@app/features/toasts/use-toast'; -import { Card } from '@app/ui/layout/card/card'; export function RpcSignPsbtSummary() { const { state } = useLocation(); diff --git a/src/app/pages/rpc-sign-stacks-message/rpc-sign-stacks-message.tsx b/src/app/pages/rpc-sign-stacks-message/rpc-sign-stacks-message.tsx index d2d28bc9f12..0a99ed58085 100644 --- a/src/app/pages/rpc-sign-stacks-message/rpc-sign-stacks-message.tsx +++ b/src/app/pages/rpc-sign-stacks-message/rpc-sign-stacks-message.tsx @@ -1,5 +1,6 @@ import { isSignableMessageType } from '@shared/signature/signature-types'; +import { PopupHeader } from '@app/features/container/headers/popup.header'; import { StacksMessageSigning } from '@app/features/stacks-message-signer/stacks-message-signing'; import { @@ -19,14 +20,17 @@ export function RpcStacksMessageSigning() { if (!payload) return null; return ( - + <> + + + ); } diff --git a/src/app/pages/send/broadcast-error/broadcast-error.tsx b/src/app/pages/send/broadcast-error/broadcast-error.tsx index 2536c2cc68b..ed3bfed80e5 100644 --- a/src/app/pages/send/broadcast-error/broadcast-error.tsx +++ b/src/app/pages/send/broadcast-error/broadcast-error.tsx @@ -8,7 +8,7 @@ import { RouteUrls } from '@shared/route-urls'; import { analytics } from '@shared/utils/analytics'; import { useOnMount } from '@app/common/hooks/use-on-mount'; -import { DialogHeader } from '@app/ui/components/containers/headers/dialog-header'; +import { DialogHeader } from '@app/components/layout/dialog-header'; import { BroadcastErrorLayout } from './components/broadcast-error.layout'; diff --git a/src/app/pages/send/choose-crypto-asset/choose-crypto-asset.tsx b/src/app/pages/send/choose-crypto-asset/choose-crypto-asset.tsx index 3942c3452c1..47f13bf7808 100644 --- a/src/app/pages/send/choose-crypto-asset/choose-crypto-asset.tsx +++ b/src/app/pages/send/choose-crypto-asset/choose-crypto-asset.tsx @@ -4,9 +4,10 @@ import { Box, styled } from 'leather-styles/jsx'; import { RouteUrls } from '@shared/route-urls'; +import { Card, Content, Page } from '@app/components/layout'; import { AssetList } from '@app/features/asset-list/asset-list'; +import { PageHeader } from '@app/features/container/headers/page.header'; import { useConfigBitcoinSendEnabled } from '@app/query/common/remote-config/remote-config.query'; -import { Card } from '@app/ui/layout/card/card'; export function ChooseCryptoAsset() { const navigate = useNavigate(); @@ -21,16 +22,23 @@ export function ChooseCryptoAsset() { } return ( - - choose asset
to send - - } - > - - - - + <> + + + + + choose asset
to send + + } + > + + + + + + + ); } diff --git a/src/app/pages/send/ordinal-inscription/send-inscription-choose-fee.tsx b/src/app/pages/send/ordinal-inscription/send-inscription-choose-fee.tsx index 3f44a7b911f..8190c869257 100644 --- a/src/app/pages/send/ordinal-inscription/send-inscription-choose-fee.tsx +++ b/src/app/pages/send/ordinal-inscription/send-inscription-choose-fee.tsx @@ -11,10 +11,10 @@ import { BitcoinFeesList, OnChooseFeeArgs, } from '@app/components/bitcoin-fees-list/bitcoin-fees-list'; +import { DialogHeader } from '@app/components/layout/dialog-header'; import { LoadingSpinner } from '@app/components/loading-spinner'; import { BitcoinChooseFee } from '@app/features/bitcoin-choose-fee/bitcoin-choose-fee'; import { useValidateBitcoinSpend } from '@app/features/bitcoin-choose-fee/hooks/use-validate-bitcoin-spend'; -import { DialogHeader } from '@app/ui/components/containers/headers/dialog-header'; import { useSendInscriptionState } from './components/send-inscription-container'; import { useSendInscriptionFeesList } from './hooks/use-send-inscription-fees-list'; diff --git a/src/app/pages/send/ordinal-inscription/send-inscription-form.tsx b/src/app/pages/send/ordinal-inscription/send-inscription-form.tsx index 339f28d5c5e..2429260caf4 100644 --- a/src/app/pages/send/ordinal-inscription/send-inscription-form.tsx +++ b/src/app/pages/send/ordinal-inscription/send-inscription-form.tsx @@ -10,8 +10,8 @@ import { RouteUrls } from '@shared/route-urls'; import { ErrorLabel } from '@app/components/error-label'; import { InscriptionPreview } from '@app/components/inscription-preview-card/components/inscription-preview'; import { InscriptionPreviewCard } from '@app/components/inscription-preview-card/inscription-preview-card'; -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'; import { RecipientAddressTypeField } from '../send-crypto-asset-form/components/recipient-address-type-field'; import { CollectibleAsset } from './components/collectible-asset'; diff --git a/src/app/pages/send/ordinal-inscription/send-inscription-review.tsx b/src/app/pages/send/ordinal-inscription/send-inscription-review.tsx index 810c6b5c418..d39a7bbac55 100644 --- a/src/app/pages/send/ordinal-inscription/send-inscription-review.tsx +++ b/src/app/pages/send/ordinal-inscription/send-inscription-review.tsx @@ -13,12 +13,12 @@ import { analytics } from '@shared/utils/analytics'; import { FormAddressDisplayer } from '@app/components/address-displayer/form-address-displayer'; import { InfoCardRow, InfoCardSeparator } from '@app/components/info-card/info-card'; import { InscriptionPreview } from '@app/components/inscription-preview-card/components/inscription-preview'; +import { Footer } from '@app/components/layout'; +import { Card } from '@app/components/layout'; +import { DialogHeader } from '@app/components/layout/dialog-header'; import { useCurrentNativeSegwitUtxos } from '@app/query/bitcoin/address/utxos-by-address.hooks'; import { useAppDispatch } from '@app/store'; import { inscriptionSent } from '@app/store/ordinals/ordinals.slice'; -import { Footer } from '@app/ui/components/containers/footers/footer'; -import { DialogHeader } from '@app/ui/components/containers/headers/dialog-header'; -import { Card } from '@app/ui/layout/card/card'; import { InscriptionPreviewCard } from '../../../components/inscription-preview-card/inscription-preview-card'; import { useSendInscriptionState } from './components/send-inscription-container'; diff --git a/src/app/pages/send/ordinal-inscription/sent-inscription-summary.tsx b/src/app/pages/send/ordinal-inscription/sent-inscription-summary.tsx index 8cbcff5c829..7c6715dfcc4 100644 --- a/src/app/pages/send/ordinal-inscription/sent-inscription-summary.tsx +++ b/src/app/pages/send/ordinal-inscription/sent-inscription-summary.tsx @@ -14,10 +14,10 @@ import { copyToClipboard } from '@app/common/utils/copy-to-clipboard'; import { FormAddressDisplayer } from '@app/components/address-displayer/form-address-displayer'; import { InfoCardBtn, InfoCardRow, InfoCardSeparator } from '@app/components/info-card/info-card'; import { InscriptionPreview } from '@app/components/inscription-preview-card/components/inscription-preview'; +import { Footer } from '@app/components/layout'; +import { Card } from '@app/components/layout'; +import { DialogHeader } from '@app/components/layout/dialog-header'; import { useToast } from '@app/features/toasts/use-toast'; -import { Footer } from '@app/ui/components/containers/footers/footer'; -import { DialogHeader } from '@app/ui/components/containers/headers/dialog-header'; -import { Card } from '@app/ui/layout/card/card'; import { InscriptionPreviewCard } from '../../../components/inscription-preview-card/inscription-preview-card'; diff --git a/src/app/pages/send/send-crypto-asset-form/components/recipient-accounts-dialog/recipient-accounts-dialog.tsx b/src/app/pages/send/send-crypto-asset-form/components/recipient-accounts-dialog/recipient-accounts-dialog.tsx index 3af89fdde84..1c5f51bfe7f 100644 --- a/src/app/pages/send/send-crypto-asset-form/components/recipient-accounts-dialog/recipient-accounts-dialog.tsx +++ b/src/app/pages/send/send-crypto-asset-form/components/recipient-accounts-dialog/recipient-accounts-dialog.tsx @@ -6,9 +6,9 @@ import { Box } from 'leather-styles/jsx'; import { Dialog } from '@leather.io/ui'; +import { DialogHeader } from '@app/components/layout/dialog-header'; import { useFilteredBitcoinAccounts } from '@app/store/accounts/blockchain/bitcoin/bitcoin.ledger'; import { useStacksAccounts } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks'; -import { DialogHeader } from '@app/ui/components/containers/headers/dialog-header'; import { VirtuosoWrapper } from '@app/ui/components/virtuoso'; import { AccountListItem } from './account-list-item'; diff --git a/src/app/pages/send/send-crypto-asset-form/form/brc20/brc20-choose-fee.tsx b/src/app/pages/send/send-crypto-asset-form/form/brc20/brc20-choose-fee.tsx index 3c43058f2aa..fd4b702e5a6 100644 --- a/src/app/pages/send/send-crypto-asset-form/form/brc20/brc20-choose-fee.tsx +++ b/src/app/pages/send/send-crypto-asset-form/form/brc20/brc20-choose-fee.tsx @@ -18,9 +18,11 @@ import { OnChooseFeeArgs, } from '@app/components/bitcoin-fees-list/bitcoin-fees-list'; import { useBitcoinFeesList } from '@app/components/bitcoin-fees-list/use-bitcoin-fees-list'; +import { Content, Page } from '@app/components/layout'; import { LoadingSpinner } from '@app/components/loading-spinner'; import { BitcoinChooseFee } from '@app/features/bitcoin-choose-fee/bitcoin-choose-fee'; import { useValidateBitcoinSpend } from '@app/features/bitcoin-choose-fee/hooks/use-validate-bitcoin-spend'; +import { PageHeader } from '@app/features/container/headers/page.header'; import { useToast } from '@app/features/toasts/use-toast'; import { useBrc20Transfers } from '@app/query/bitcoin/ordinals/brc20/brc20-tokens.hooks'; import { useSignBitcoinTx } from '@app/store/accounts/blockchain/bitcoin/bitcoin.hooks'; @@ -124,42 +126,52 @@ export function BrcChooseFee() { } } - return isLoadingOrder ? ( - - - - ) : ( + return ( <> - setSelectedFeeType(value)} - onValidateBitcoinSpend={onValidateBitcoinFeeSpend} - selectedFeeType={selectedFeeType} - /> - } - isLoading={isLoading} - isSendingMax={false} - onChooseFee={previewTransaction} - onSetSelectedFeeType={(value: BtcFeeType | null) => setSelectedFeeType(value)} - onValidateBitcoinSpend={onValidateBitcoinFeeSpend} - recommendedFeeRate={recommendedFeeRate} - recipients={recipients} - showError={showInsufficientBalanceError} - maxRecommendedFeeRate={feesList[0]?.feeRate} - /> - + + + + {isLoadingOrder && ( + + + + )} + {!isLoadingOrder && ( + <> + setSelectedFeeType(value)} + onValidateBitcoinSpend={onValidateBitcoinFeeSpend} + selectedFeeType={selectedFeeType} + /> + } + isLoading={isLoading} + isSendingMax={false} + onChooseFee={previewTransaction} + onSetSelectedFeeType={(value: BtcFeeType | null) => setSelectedFeeType(value)} + onValidateBitcoinSpend={onValidateBitcoinFeeSpend} + recommendedFeeRate={recommendedFeeRate} + recipients={recipients} + showError={showInsufficientBalanceError} + maxRecommendedFeeRate={feesList[0]?.feeRate} + /> + + + )} + + ); } diff --git a/src/app/pages/send/send-crypto-asset-form/form/brc20/brc20-send-form-confirmation.tsx b/src/app/pages/send/send-crypto-asset-form/form/brc20/brc20-send-form-confirmation.tsx index 9eb2af315e1..fbbd719607c 100644 --- a/src/app/pages/send/send-crypto-asset-form/form/brc20/brc20-send-form-confirmation.tsx +++ b/src/app/pages/send/send-crypto-asset-form/form/brc20/brc20-send-form-confirmation.tsx @@ -17,11 +17,10 @@ import { InfoCardRow, InfoCardSeparator, } from '@app/components/info-card/info-card'; +import { Card, CardContent, Content, Footer, Page } from '@app/components/layout'; +import { PageHeader } from '@app/features/container/headers/page.header'; import { useCurrentNativeSegwitUtxos } from '@app/query/bitcoin/address/utxos-by-address.hooks'; import { useBrc20Transfers } from '@app/query/bitcoin/ordinals/brc20/brc20-tokens.hooks'; -import { Footer } from '@app/ui/components/containers/footers/footer'; -import { Card } from '@app/ui/layout/card/card'; -import { CardContent } from '@app/ui/layout/card/card-content'; import { useSendFormNavigate } from '../../hooks/use-send-form-navigate'; @@ -106,39 +105,46 @@ export function Brc20SendFormConfirmation() { } return ( - - - - } - > - - - - - - - - - - - - - + <> + + + + + + + } + > + + + + + + + + + + + + + + + + ); } diff --git a/src/app/pages/send/send-crypto-asset-form/form/brc20/brc20-send-form.tsx b/src/app/pages/send/send-crypto-asset-form/form/brc20/brc20-send-form.tsx index bc3ffd79965..edc1e5317d5 100644 --- a/src/app/pages/send/send-crypto-asset-form/form/brc20/brc20-send-form.tsx +++ b/src/app/pages/send/send-crypto-asset-form/form/brc20/brc20-send-form.tsx @@ -10,10 +10,8 @@ import { Brc20AvatarIcon, Button, Callout, Link } from '@leather.io/ui'; import { convertAmountToBaseUnit, formatMoney } from '@leather.io/utils'; import { openInNewTab } from '@app/common/utils/open-in-new-tab'; -import { AvailableBalance } from '@app/ui/components/containers/footers/available-balance'; -import { Footer } from '@app/ui/components/containers/footers/footer'; -import { Card } from '@app/ui/layout/card/card'; -import { CardContent } from '@app/ui/layout/card/card-content'; +import { AvailableBalance, Card, CardContent, Content, Footer, Page } from '@app/components/layout'; +import { PageHeader } from '@app/features/container/headers/page.header'; import { AmountField } from '../../components/amount-field'; import { SelectedAssetField } from '../../components/selected-asset-field'; @@ -38,80 +36,91 @@ export function Brc20SendForm() { useBrc20SendForm({ balance, ticker, holderAddress }); return ( - - - {props => { - onFormStateChange(props.values); - return ( -
- - + + + } > - Continue - - - - } - > - - - } - autoComplete="off" - switchableAmount={ - marketData ? ( - + + } + autoComplete="off" + switchableAmount={ + marketData ? ( + + ) : undefined + } /> - ) : undefined - } - /> - } name={ticker} symbol={ticker} /> - - -
  • 1. Create transfer inscription with amount to send
    • -
  • 2. Send transfer inscription to recipient of choice
    • -     - { - openInNewTab( - 'https://leather.gitbook.io/guides/bitcoin/sending-brc-20-tokens' - ); - }} - textStyle="body.02" - > - Learn more - -     -     -     + } + name={ticker} + symbol={ticker} + /> + + +
  • 1. Create transfer inscription with amount to send
    • +
  • 2. Send transfer inscription to recipient of choice
    • +     + { + openInNewTab( + 'https://leather.gitbook.io/guides/bitcoin/sending-brc-20-tokens' + ); + }} + textStyle="body.02" + > + Learn more + +     + + - - - ); - }} -
    -     + + + ); + }} + + + + + ); } diff --git a/src/app/pages/send/send-crypto-asset-form/form/btc/btc-choose-fee.tsx b/src/app/pages/send/send-crypto-asset-form/form/btc/btc-choose-fee.tsx index 7a08c2c58ed..768f93630cc 100644 --- a/src/app/pages/send/send-crypto-asset-form/form/btc/btc-choose-fee.tsx +++ b/src/app/pages/send/send-crypto-asset-form/form/btc/btc-choose-fee.tsx @@ -8,8 +8,10 @@ import { BitcoinSendFormValues } from '@shared/models/form.model'; import { useLocationStateWithCache } from '@app/common/hooks/use-location-state'; import { BitcoinFeesList } from '@app/components/bitcoin-fees-list/bitcoin-fees-list'; import { useBitcoinFeesList } from '@app/components/bitcoin-fees-list/use-bitcoin-fees-list'; +import { Content, Page } from '@app/components/layout'; import { BitcoinChooseFee } from '@app/features/bitcoin-choose-fee/bitcoin-choose-fee'; import { useValidateBitcoinSpend } from '@app/features/bitcoin-choose-fee/hooks/use-validate-bitcoin-spend'; +import { PageHeader } from '@app/features/container/headers/page.header'; import { useSendBitcoinAssetContextState } from '../../family/bitcoin/components/send-bitcoin-asset-container'; import { useBtcChooseFee } from './use-btc-choose-fee'; @@ -49,30 +51,35 @@ export function BtcChooseFee() { return ( <> - + + + setSelectedFeeType(value)} + onValidateBitcoinSpend={onValidateBitcoinAmountSpend} + selectedFeeType={selectedFeeType} + /> + } isLoading={isLoading} + isSendingMax={isSendingMax} onChooseFee={previewTransaction} - onSetSelectedFeeType={(value: BtcFeeType | null) => setSelectedFeeType(value)} onValidateBitcoinSpend={onValidateBitcoinAmountSpend} - selectedFeeType={selectedFeeType} + onSetSelectedFeeType={(value: BtcFeeType | null) => setSelectedFeeType(value)} + recipients={recipients} + recommendedFeeRate={recommendedFeeRate} + showError={showInsufficientBalanceError} + maxRecommendedFeeRate={feesList[0]?.feeRate} /> - } - isLoading={isLoading} - isSendingMax={isSendingMax} - onChooseFee={previewTransaction} - onValidateBitcoinSpend={onValidateBitcoinAmountSpend} - onSetSelectedFeeType={(value: BtcFeeType | null) => setSelectedFeeType(value)} - recipients={recipients} - recommendedFeeRate={recommendedFeeRate} - showError={showInsufficientBalanceError} - maxRecommendedFeeRate={feesList[0]?.feeRate} - /> - + + + ); } diff --git a/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form-confirmation.tsx b/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form-confirmation.tsx index b54a4b4b730..5ee31ef7d0f 100644 --- a/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form-confirmation.tsx +++ b/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form-confirmation.tsx @@ -34,10 +34,9 @@ import { InfoCardRow, InfoCardSeparator, } from '@app/components/info-card/info-card'; +import { Card, CardContent, Content, Footer, Page } from '@app/components/layout'; +import { PageHeader } from '@app/features/container/headers/page.header'; import { useCurrentNativeSegwitUtxos } from '@app/query/bitcoin/address/utxos-by-address.hooks'; -import { Footer } from '@app/ui/components/containers/footers/footer'; -import { Card } from '@app/ui/layout/card/card'; -import { CardContent } from '@app/ui/layout/card/card-content'; import { useSendFormNavigate } from '../../hooks/use-send-form-navigate'; @@ -134,50 +133,57 @@ export function BtcSendFormConfirmation() { } return ( - - + + } > - Confirm and send transaction - - - } - > - - - - - } - data-testid={SendCryptoAssetSelectors.ConfirmationDetailsRecipient} - /> - - - - - {arrivesIn && } - - - + + + + + } + data-testid={SendCryptoAssetSelectors.ConfirmationDetailsRecipient} + /> + + + + + {arrivesIn && } + + +     + + + ); } diff --git a/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form.tsx b/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form.tsx index d5559567d73..02fcffb548a 100644 --- a/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form.tsx +++ b/src/app/pages/send/send-crypto-asset-form/form/btc/btc-send-form.tsx @@ -9,10 +9,8 @@ import { useCryptoCurrencyMarketDataMeanAverage } from '@leather.io/query'; import { BtcAvatarIcon, Button, Callout, Link } from '@leather.io/ui'; import { formatMoney } from '@leather.io/utils'; -import { AvailableBalance } from '@app/ui/components/containers/footers/available-balance'; -import { Footer } from '@app/ui/components/containers/footers/footer'; -import { Card } from '@app/ui/layout/card/card'; -import { CardContent } from '@app/ui/layout/card/card-content'; +import { AvailableBalance, Card, CardContent, Content, Footer, Page } from '@app/components/layout'; +import { PageHeader } from '@app/features/container/headers/page.header'; import { AmountField } from '../../components/amount-field'; import { SelectedAssetField } from '../../components/selected-asset-field'; @@ -28,7 +26,6 @@ const symbol: CryptoCurrencies = 'BTC'; export function BtcSendForm() { const routeState = useSendFormRouteState(); const marketData = useCryptoCurrencyMarketDataMeanAverage('BTC'); - const { balance, calcMaxSpend, @@ -43,84 +40,95 @@ export function BtcSendForm() { } = useBtcSendForm(); return ( - - - {props => { - onFormStateChange(props.values); - const sendMaxCalculation = calcMaxSpend(props.values.recipient, utxos); + <> + + + + + + {props => { + onFormStateChange(props.values); + const sendMaxCalculation = calcMaxSpend(props.values.recipient, utxos); - return ( -
    - - + + + } > - Continue - - - - } - > - - - } - onSetIsSendingMax={onSetIsSendingMax} - isSendingMax={isSendingMax} - switchableAmount={ - - } - /> - } name="Bitcoin" symbol={symbol} /> - - {currentNetwork.chain.bitcoin.bitcoinNetwork === 'testnet' && ( - - This is a Bitcoin testnet transaction. - - Get testnet BTC here ↗ - - - )} - - - + + + } + onSetIsSendingMax={onSetIsSendingMax} + isSendingMax={isSendingMax} + switchableAmount={ + + } + /> + } + name="Bitcoin" + symbol={symbol} + /> + + {currentNetwork.chain.bitcoin.bitcoinNetwork === 'testnet' && ( + + This is a Bitcoin testnet transaction. + + Get testnet BTC here ↗ + + + )} + + + - {/* This is for testing purposes only, to make sure the form is ready to be submitted. */} - {calcMaxSpend(props.values.recipient, utxos).spendableBitcoin.toNumber() > 0 ? ( - - ) : null} - - ); - }} -
    -     + {/* This is for testing purposes only, to make sure the form is ready to be submitted. */} + {calcMaxSpend(props.values.recipient, utxos).spendableBitcoin.toNumber() > 0 ? ( + + ) : null} + + ); + }} +     +     + + + ); } diff --git a/src/app/pages/send/send-crypto-asset-form/form/send-form-confirmation.tsx b/src/app/pages/send/send-crypto-asset-form/form/send-form-confirmation.tsx index 08d933cfc1b..5ca145e8118 100644 --- a/src/app/pages/send/send-crypto-asset-form/form/send-form-confirmation.tsx +++ b/src/app/pages/send/send-crypto-asset-form/form/send-form-confirmation.tsx @@ -9,9 +9,9 @@ import { InfoCardRow, InfoCardSeparator, } from '@app/components/info-card/info-card'; -import { Footer } from '@app/ui/components/containers/footers/footer'; -import { Card } from '@app/ui/layout/card/card'; -import { CardContent } from '@app/ui/layout/card/card-content'; +import { Footer } from '@app/components/layout'; +import { CardContent } from '@app/components/layout'; +import { Card } from '@app/components/layout'; interface SendFormConfirmationProps { recipient: string; diff --git a/src/app/pages/send/send-crypto-asset-form/form/sip10/sip10-token-send-form.tsx b/src/app/pages/send/send-crypto-asset-form/form/sip10/sip10-token-send-form.tsx index e594deb3f67..da2a81f0a63 100644 --- a/src/app/pages/send/send-crypto-asset-form/form/sip10/sip10-token-send-form.tsx +++ b/src/app/pages/send/send-crypto-asset-form/form/sip10/sip10-token-send-form.tsx @@ -5,6 +5,8 @@ import { useAlexCurrencyPriceAsMarketData, useSip10Token } from '@leather.io/que import { RouteUrls } from '@shared/route-urls'; +import { Content } from '@app/components/layout'; +import { PageHeader } from '@app/features/container/headers/page.header'; import { useToast } from '@app/features/toasts/use-toast'; import { useCurrentStacksAccountAddress } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks'; @@ -41,14 +43,19 @@ function Sip10TokenSendFormLoader({ children }: Sip10TokenSendFormLoaderProps) { export function Sip10TokenSendForm() { return ( - - {token => ( - - )} - + <> + + + + {token => ( + + )} + + + ); } diff --git a/src/app/pages/send/send-crypto-asset-form/form/stacks/stacks-common-send-form.tsx b/src/app/pages/send/send-crypto-asset-form/form/stacks/stacks-common-send-form.tsx index fa2dc988213..13721680b76 100644 --- a/src/app/pages/send/send-crypto-asset-form/form/stacks/stacks-common-send-form.tsx +++ b/src/app/pages/send/send-crypto-asset-form/form/stacks/stacks-common-send-form.tsx @@ -14,13 +14,14 @@ import { StacksSendFormValues } from '@shared/models/form.model'; import { RouteUrls } from '@shared/route-urls'; import { FeesRow } from '@app/components/fees-row/fees-row'; +import { Footer } from '@app/components/layout'; +import { CardContent } from '@app/components/layout'; +import { Card } from '@app/components/layout'; +import { Page } from '@app/components/layout'; +import { AvailableBalance } from '@app/components/layout'; import { NonceSetter } from '@app/components/nonce-setter'; import { useUpdatePersistedSendFormValues } from '@app/features/popup-send-form-restoration/use-update-persisted-send-form-values'; import { HighFeeDialog } from '@app/features/stacks-high-fee-warning/stacks-high-fee-dialog'; -import { AvailableBalance } from '@app/ui/components/containers/footers/available-balance'; -import { Footer } from '@app/ui/components/containers/footers/footer'; -import { Card } from '@app/ui/layout/card/card'; -import { CardContent } from '@app/ui/layout/card/card-content'; import { MemoField } from '../../components/memo-field'; import { StacksRecipientField } from '../../family/stacks/components/stacks-recipient-field'; @@ -52,58 +53,60 @@ export function StacksCommonSendForm({ const navigate = useNavigate(); const { onFormStateChange } = useUpdatePersistedSendFormValues(); return ( - - - {props => { - onFormStateChange(props.values); - return ( - <> - -
    - - + + + } + > + + {amountField} + {selectedAssetField} + + + + + + navigate(RouteUrls.EditNonce)} > - Continue - - - - } - > - - {amountField} - {selectedAssetField} - - - - - - navigate(RouteUrls.EditNonce)} - > - Edit nonce - - - - - - - - ); - }} -
    -     + Edit nonce + + + + + + + + ); + }} + + + ); } diff --git a/src/app/pages/send/send-crypto-asset-form/form/stacks/stacks-send-form-confirmation.tsx b/src/app/pages/send/send-crypto-asset-form/form/stacks/stacks-send-form-confirmation.tsx index c7756aa7fe1..8455c3e6a59 100644 --- a/src/app/pages/send/send-crypto-asset-form/form/stacks/stacks-send-form-confirmation.tsx +++ b/src/app/pages/send/send-crypto-asset-form/form/stacks/stacks-send-form-confirmation.tsx @@ -7,6 +7,8 @@ import type { CryptoCurrencies } from '@leather.io/models'; import { InfoCircleIcon } from '@leather.io/ui'; import { useLocationStateWithCache } from '@app/common/hooks/use-location-state'; +import { Content, Page } from '@app/components/layout'; +import { PageHeader } from '@app/features/container/headers/page.header'; import { useStacksBroadcastTransaction } from '@app/features/stacks-transaction-request/hooks/use-stacks-broadcast-transaction'; import { useStacksTransactionSummary } from '@app/features/stacks-transaction-request/hooks/use-stacks-transaction-summary'; import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip'; @@ -23,6 +25,7 @@ function useStacksSendFormConfirmationState() { export function StacksSendFormConfirmation() { const { tx, decimals, showFeeChangeWarning } = useStacksSendFormConfirmationState(); + const { symbol = 'STX' } = useParams(); const { stacksBroadcastTransaction, isBroadcasting } = useStacksBroadcastTransaction({ @@ -65,23 +68,28 @@ export function StacksSendFormConfirmation() { return ( <> - - stacksBroadcastTransaction(stacksDeserializedTransaction)} - /> + + + + + stacksBroadcastTransaction(stacksDeserializedTransaction)} + /> + + ); } diff --git a/src/app/pages/send/send-crypto-asset-form/form/stx/stx-send-form.tsx b/src/app/pages/send/send-crypto-asset-form/form/stx/stx-send-form.tsx index 665e702683b..2b80e54abd5 100644 --- a/src/app/pages/send/send-crypto-asset-form/form/stx/stx-send-form.tsx +++ b/src/app/pages/send/send-crypto-asset-form/form/stx/stx-send-form.tsx @@ -2,6 +2,9 @@ import type { CryptoCurrencies } from '@leather.io/models'; import { useCryptoCurrencyMarketDataMeanAverage } from '@leather.io/query'; import { StxAvatarIcon } from '@leather.io/ui'; +import { Content } from '@app/components/layout'; +import { PageHeader } from '@app/features/container/headers/page.header'; + import { AmountField } from '../../components/amount-field'; import { SelectedAssetField } from '../../components/selected-asset-field'; import { SendFiatValue } from '../../components/send-fiat-value'; @@ -13,7 +16,6 @@ const symbol = 'STX' satisfies CryptoCurrencies; export function StxSendForm() { const stxMarketData = useCryptoCurrencyMarketDataMeanAverage(symbol); - const { availableUnlockedBalance, initialValues, @@ -41,14 +43,19 @@ export function StxSendForm() { ); return ( - + <> + + + + + ); } 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 1867d49c15b..c4ba921e18f 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 @@ -1,9 +1,10 @@ import { Suspense } from 'react'; -import { Outlet, Route } from 'react-router-dom'; +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 { 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'; @@ -11,7 +12,6 @@ import { ledgerStacksTxSigningRoutes } from '@app/features/ledger/flows/stacks-t import { StacksHighFeeWarningContainer } from '@app/features/stacks-high-fee-warning/stacks-high-fee-warning-container'; import { SendBtcDisabled } from '@app/pages/send/choose-crypto-asset/send-btc-disabled'; import { AccountGate } from '@app/routes/account-gate'; -import { Page } from '@app/ui/layout/page/page.layout'; import { BroadcastError } from '../broadcast-error/broadcast-error'; import { ChooseCryptoAsset } from '../choose-crypto-asset/choose-crypto-asset'; @@ -43,13 +43,7 @@ const broadcastErrorDialogRoute = ( ); export const sendCryptoAssetFormRoutes = ( - - - - } - > + }> } /> + }> - - } - label="Pending BRC-20 transfers" - onClick={onClickLink} - /> - - - } - > - - + <> + + + + + + } + label="Pending BRC-20 transfers" + onClick={onClickLink} + /> + + + } + > + + - + - - - - - You'll need to send the transfer inscription to your recipient of choice from the - home screen once its status changes to "Ready to send" - - { - openInNewTab('https://leather.gitbook.io/guides/bitcoin/sending-brc-20-tokens'); - }} - > - Learn more - - - - + + + + + You'll need to send the transfer inscription to your recipient of choice from + the home screen once its status changes to "Ready to send" + + { + openInNewTab( + 'https://leather.gitbook.io/guides/bitcoin/sending-brc-20-tokens' + ); + }} + > + Learn more + + + + - - - + + + - - - - - + + + + + + + + ); } diff --git a/src/app/pages/send/sent-summary/btc-sent-summary.tsx b/src/app/pages/send/sent-summary/btc-sent-summary.tsx index 2df406c9659..eb533b6a9b0 100644 --- a/src/app/pages/send/sent-summary/btc-sent-summary.tsx +++ b/src/app/pages/send/sent-summary/btc-sent-summary.tsx @@ -15,10 +15,9 @@ import { InfoCardRow, InfoCardSeparator, } from '@app/components/info-card/info-card'; +import { Card, CardContent, Content, Footer, Page } from '@app/components/layout'; +import { PageHeader } from '@app/features/container/headers/page.header'; import { useToast } from '@app/features/toasts/use-toast'; -import { Footer } from '@app/ui/components/containers/footers/footer'; -import { Card } from '@app/ui/layout/card/card'; -import { CardContent } from '@app/ui/layout/card/card-content'; import { TxDone } from '../send-crypto-asset-form/components/tx-done'; @@ -55,36 +54,47 @@ export function BtcSentSummary() { } return ( - - - } label="View details" onClick={onClickLink} /> - } label="Copy ID" onClick={onClickCopy} /> - - - } - > - - - + <> + + + + + + } + label="View details" + onClick={onClickLink} + /> + } label="Copy ID" onClick={onClickCopy} /> + + + } + > + + + - - } /> - - + + } /> + + - - - {arrivesIn && } - - - + + + {arrivesIn && } + + + + + + ); } diff --git a/src/app/pages/send/sent-summary/stx-sent-summary.tsx b/src/app/pages/send/sent-summary/stx-sent-summary.tsx index 91096a6be51..21cf965be63 100644 --- a/src/app/pages/send/sent-summary/stx-sent-summary.tsx +++ b/src/app/pages/send/sent-summary/stx-sent-summary.tsx @@ -15,16 +15,14 @@ import { InfoCardRow, InfoCardSeparator, } from '@app/components/info-card/info-card'; +import { Card, CardContent, Content, Footer, Page } from '@app/components/layout'; +import { PageHeader } from '@app/features/container/headers/page.header'; import { useToast } from '@app/features/toasts/use-toast'; -import { Footer } from '@app/ui/components/containers/footers/footer'; -import { Card } from '@app/ui/layout/card/card'; -import { CardContent } from '@app/ui/layout/card/card-content'; import { TxDone } from '../send-crypto-asset-form/components/tx-done'; export function StxSentSummary() { const { state } = useLocation(); - const toast = useToast(); const { @@ -55,37 +53,48 @@ export function StxSentSummary() { } return ( - - - } label="View details" onClick={onClickLink} /> - } label="Copy ID" onClick={onClickCopy} /> - - - } - > - - + <> + + + + + + } + label="View details" + onClick={onClickLink} + /> + } label="Copy ID" onClick={onClickCopy} /> + + + } + > + + - + - - } /> - - + + } /> + + - - - - - - + + + + + + + + + ); } diff --git a/src/app/pages/sign-stacks-message-request/sign-stacks-message-request.tsx b/src/app/pages/sign-stacks-message-request/sign-stacks-message-request.tsx index 1214ea51515..63191dcb3c0 100644 --- a/src/app/pages/sign-stacks-message-request/sign-stacks-message-request.tsx +++ b/src/app/pages/sign-stacks-message-request/sign-stacks-message-request.tsx @@ -1,5 +1,6 @@ import { isSignableMessageType } from '@shared/signature/signature-types'; +import { PopupHeader } from '@app/features/container/headers/popup.header'; import { StacksMessageSigning } from '@app/features/stacks-message-signer/stacks-message-signing'; import { useSignStacksMessageRequest, @@ -18,14 +19,18 @@ export function SignStacksMessageRequest() { if (!payload) return null; return ( - + <> + {/* TODO check this route for '/signature' as it seems STX specific but we don't show balance */} + + + ); } diff --git a/src/app/pages/swap/alex-swap-container.tsx b/src/app/pages/swap/alex-swap-container.tsx index 5bacfe5d6bd..638df0b5695 100644 --- a/src/app/pages/swap/alex-swap-container.tsx +++ b/src/app/pages/swap/alex-swap-container.tsx @@ -20,10 +20,11 @@ import { alex } from '@shared/utils/alex-sdk'; import { migratePositiveAssetBalancesToTop } from '@app/common/asset-utils'; import { LoadingKeys, useLoading } from '@app/common/hooks/use-loading'; +import { Content, Page } from '@app/components/layout'; +import { PageHeader } from '@app/features/container/headers/page.header'; import { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks'; import { useGenerateStacksContractCallUnsignedTx } from '@app/store/transactions/contract-call.hooks'; import { useSignStacksTransaction } from '@app/store/transactions/transaction.hooks'; -import { Page } from '@app/ui/layout/page/page.layout'; import { SwapForm } from './components/swap-form'; import { generateSwapRoutes } from './generate-swap-routes'; @@ -172,11 +173,15 @@ function AlexSwapContainer() { return ( - - - - - + {/* Swap uses routed dialogs to choose assets so needs onBackLocation to go Home */} + + + + + + + + ); } diff --git a/src/app/pages/swap/components/swap-asset-dialog/swap-asset-dialog-base.tsx b/src/app/pages/swap/components/swap-asset-dialog/swap-asset-dialog-base.tsx index 8dd31a13773..2a0c9a9fb58 100644 --- a/src/app/pages/swap/components/swap-asset-dialog/swap-asset-dialog-base.tsx +++ b/src/app/pages/swap/components/swap-asset-dialog/swap-asset-dialog-base.tsx @@ -2,7 +2,7 @@ import { Dialog } from '@leather.io/ui'; import { RouteUrls } from '@shared/route-urls'; -import { Header } from '@app/ui/components/containers/headers/header'; +import { DialogHeader } from '@app/components/layout/dialog-header'; import { useSwapNavigate } from '../../hooks/use-swap-navigate'; import { useSwapContext } from '../../swap.context'; @@ -17,14 +17,14 @@ export function SwapAssetDialogBase() { isShowing onClose={() => navigate(RouteUrls.Swap)} header={ -
    Choose asset
    to swap } - variant="bigTitle" - onGoBack={() => navigate(RouteUrls.Swap)} + variant="large" + onClose={() => navigate(RouteUrls.Swap)} /> } > diff --git a/src/app/pages/swap/components/swap-asset-dialog/swap-asset-dialog-quote.tsx b/src/app/pages/swap/components/swap-asset-dialog/swap-asset-dialog-quote.tsx index 81ce10f70b3..afd7a6041c8 100644 --- a/src/app/pages/swap/components/swap-asset-dialog/swap-asset-dialog-quote.tsx +++ b/src/app/pages/swap/components/swap-asset-dialog/swap-asset-dialog-quote.tsx @@ -2,7 +2,7 @@ import { Dialog } from '@leather.io/ui'; import { RouteUrls } from '@shared/route-urls'; -import { Header } from '@app/ui/components/containers/headers/header'; +import { DialogHeader } from '@app/components/layout/dialog-header'; import { useSwapNavigate } from '../../hooks/use-swap-navigate'; import { useSwapContext } from '../../swap.context'; @@ -17,14 +17,14 @@ export function SwapAssetDialogQuote() { isShowing onClose={() => navigate(RouteUrls.Swap)} header={ -
    Choose asset
    to receive } - variant="bigTitle" - onGoBack={() => navigate(RouteUrls.Swap)} + variant="large" + onClose={() => navigate(RouteUrls.Swap)} /> } > diff --git a/src/app/pages/swap/components/swap-review.tsx b/src/app/pages/swap/components/swap-review.tsx index c7f8675f6d3..51fa71e2c48 100644 --- a/src/app/pages/swap/components/swap-review.tsx +++ b/src/app/pages/swap/components/swap-review.tsx @@ -5,9 +5,9 @@ import { SwapSelectors } from '@tests/selectors/swap.selectors'; import { Button } from '@leather.io/ui'; import { LoadingKeys, useLoading } from '@app/common/hooks/use-loading'; -import { Footer } from '@app/ui/components/containers/footers/footer'; -import { Card } from '@app/ui/layout/card/card'; -import { CardContent } from '@app/ui/layout/card/card-content'; +import { Footer } from '@app/components/layout'; +import { CardContent } from '@app/components/layout'; +import { Card } from '@app/components/layout'; import { useSwapContext } from '../swap.context'; import { SwapAssetsPair } from './swap-assets-pair/swap-assets-pair'; diff --git a/src/app/pages/swap/swap.tsx b/src/app/pages/swap/swap.tsx index 260777648e1..968506f2f14 100644 --- a/src/app/pages/swap/swap.tsx +++ b/src/app/pages/swap/swap.tsx @@ -7,10 +7,10 @@ import { useFormikContext } from 'formik'; import { Button } from '@leather.io/ui'; import { isUndefined } from '@leather.io/utils'; +import { Footer } from '@app/components/layout'; +import { CardContent } from '@app/components/layout'; +import { Card } from '@app/components/layout'; import { LoadingSpinner } from '@app/components/loading-spinner'; -import { Footer } from '@app/ui/components/containers/footers/footer'; -import { Card } from '@app/ui/layout/card/card'; -import { CardContent } from '@app/ui/layout/card/card-content'; import { SwapAssetSelectBase } from './components/swap-asset-select/swap-asset-select-base'; import { SwapAssetSelectQuote } from './components/swap-asset-select/swap-asset-select-quote'; diff --git a/src/app/pages/transaction-request/transaction-request.tsx b/src/app/pages/transaction-request/transaction-request.tsx index 9734f21849c..d598b830ac4 100644 --- a/src/app/pages/transaction-request/transaction-request.tsx +++ b/src/app/pages/transaction-request/transaction-request.tsx @@ -23,6 +23,7 @@ import { useOnMount } from '@app/common/hooks/use-on-mount'; import { stxFeeValidator } from '@app/common/validation/forms/fee-validators'; import { nonceValidator } from '@app/common/validation/nonce-validators'; import { NonceSetter } from '@app/components/nonce-setter'; +import { PopupHeader } from '@app/features/container/headers/popup.header'; import { RequestingTabClosedWarningMessage } from '@app/features/errors/requesting-tab-closed-error-msg'; import { HighFeeDialog } from '@app/features/stacks-high-fee-warning/stacks-high-fee-dialog'; import { ContractCallDetails } from '@app/features/stacks-transaction-request/contract-call-details/contract-call-details'; @@ -94,46 +95,53 @@ function TransactionRequestBase() { }; return ( - - + + - {() => ( - <> - - - - - - {transactionRequest.txType === 'contract_call' && } - {transactionRequest.txType === 'token_transfer' && } - {transactionRequest.txType === 'smart_contract' && } - - - - navigate(RouteUrls.EditNonce)}> - Edit nonce - - - - - - - - )} - - + + {() => ( + <> + + + + + + {transactionRequest.txType === 'contract_call' && } + {transactionRequest.txType === 'token_transfer' && } + {transactionRequest.txType === 'smart_contract' && } + + + + navigate(RouteUrls.EditNonce)} + > + Edit nonce + + + + + + + + )} + + + ); } diff --git a/src/app/pages/unlock.tsx b/src/app/pages/unlock.tsx index da4ad908c1a..ead840ed975 100644 --- a/src/app/pages/unlock.tsx +++ b/src/app/pages/unlock.tsx @@ -1,18 +1,22 @@ import { Outlet, useNavigate } from 'react-router-dom'; +import { Content } from '@app/components/layout'; import { RequestPassword } from '@app/components/request-password'; +import { PageHeader } from '@app/features/container/headers/page.header'; export function Unlock() { const navigate = useNavigate(); - // Here we want to return to the previous route. The user could land on any // page when the wallet is locked, so we can't assume as single route. const returnToPreviousRoute = () => navigate(-1); return ( <> - - + + + + + ); } diff --git a/src/app/pages/update-profile-request/components/update-profile-request.layout.tsx b/src/app/pages/update-profile-request/components/update-profile-request.layout.tsx index a8955e1f6d8..0b62e7f958a 100644 --- a/src/app/pages/update-profile-request/components/update-profile-request.layout.tsx +++ b/src/app/pages/update-profile-request/components/update-profile-request.layout.tsx @@ -1,5 +1,7 @@ import { Stack } from 'leather-styles/jsx'; +import { PopupHeader } from '@app/features/container/headers/popup.header'; + import { PageTop } from './page-top'; interface ProfileUpdateRequestLayoutProps { @@ -7,14 +9,17 @@ interface ProfileUpdateRequestLayoutProps { } export function ProfileUpdateRequestLayout({ children }: ProfileUpdateRequestLayoutProps) { return ( - - - {children} - + <> + + + + {children} + + ); } diff --git a/src/app/pages/view-secret-key/view-secret-key.tsx b/src/app/pages/view-secret-key/view-secret-key.tsx index 1e6a6eb74d4..82a5a97a0fd 100644 --- a/src/app/pages/view-secret-key/view-secret-key.tsx +++ b/src/app/pages/view-secret-key/view-secret-key.tsx @@ -3,10 +3,11 @@ import { Outlet } from 'react-router-dom'; import { analytics } from '@shared/utils/analytics'; +import { Content, TwoColumnLayout } from '@app/components/layout'; import { RequestPassword } from '@app/components/request-password'; +import { MainHeader } from '@app/features/container/headers/main.header'; import { SecretKey } from '@app/features/secret-key-displayer/secret-key-displayer'; import { useDefaultWalletSecretKey } from '@app/store/in-memory-key/in-memory-key.selectors'; -import { TwoColumnLayout } from '@app/ui/pages/two-column.layout'; export function ViewSecretKey() { const defaultWalletSecretKey = useDefaultWalletSecretKey(); @@ -18,30 +19,38 @@ export function ViewSecretKey() { if (showSecretKey) { return ( - - Your
    Secret Key - - } - content={ - <> - These 24 words are your Secret Key. They create your account, and you sign in on - different devices with them. Make sure to save these somewhere safe. -
    - If you lose these words, you lose your account. - - } - > - -     + <> + + + + Your
    Secret Key + + } + content={ + <> + These 24 words are your Secret Key. They create your account, and you sign in on + different devices with them. Make sure to save these somewhere safe. +
    + If you lose these words, you lose your account. + + } + > + +     +     + ); } return ( <> - setShowSecretKey(true)} /> - + + + setShowSecretKey(true)} /> + + ); } diff --git a/src/app/routes/app-routes.tsx b/src/app/routes/app-routes.tsx index 4f3158f4249..841dc6f6f87 100644 --- a/src/app/routes/app-routes.tsx +++ b/src/app/routes/app-routes.tsx @@ -10,10 +10,11 @@ import * as Sentry from '@sentry/react'; import { RouteUrls } from '@shared/route-urls'; +import { HomeLayout } from '@app/components/layout/layouts/home.layout'; import { LoadingSpinner } from '@app/components/loading-spinner'; import { AddNetwork } from '@app/features/add-network/add-network'; import { Container } from '@app/features/container/container'; -import { EditNonceDialog } from '@app/features/dialogs/edit-nonce-dialog/edit-nonce-dialog'; +import { MainHeader } from '@app/features/container/headers/main.header'; import { IncreaseBtcFeeDialog } from '@app/features/dialogs/increase-fee-dialog/increase-btc-fee-dialog'; import { IncreaseStxFeeDialog } from '@app/features/dialogs/increase-fee-dialog/increase-stx-fee-dialog'; import { leatherIntroDialogRoutes } from '@app/features/dialogs/leather-intro-dialog/leather-intro-dialog'; @@ -36,7 +37,6 @@ import { WelcomePage } from '@app/pages/onboarding/welcome/welcome'; import { ReceiveBtcModal } from '@app/pages/receive/receive-btc'; import { ReceiveStxModal } from '@app/pages/receive/receive-stx'; import { RequestError } from '@app/pages/request-error/request-error'; -import { RpcSignStacksTransaction } from '@app/pages/rpc-sign-stacks-transaction/rpc-sign-stacks-transaction'; import { BroadcastError } from '@app/pages/send/broadcast-error/broadcast-error'; import { sendOrdinalRoutes } from '@app/pages/send/ordinal-inscription/ordinal-routes'; import { sendCryptoAssetFormRoutes } from '@app/pages/send/send-crypto-asset-form/send-crypto-asset-form.routes'; @@ -79,16 +79,42 @@ function useAppRoutes() { }> }> - - + <> + + + } > - {homePageModalRoutes} - + + + + } + > + {homePageModalRoutes} + + + } + /> + }> + {ledgerStacksTxSigningRoutes} + + } + /> + }> + {ledgerBitcoinTxSigningRoutes} + + {ledgerStacksTxSigningRoutes} + + {/* Page Routes */} } @@ -106,6 +132,55 @@ function useAppRoutes() { {ledgerStacksTxSigningRoutes} + + + + } + /> + + + + + } + > + } /> + } /> + + + + + } + > + } /> + + + {sendCryptoAssetFormRoutes} + + }> + {leatherIntroDialogRoutes} + + } /> + + + + } + /> + + {alexSwapRoutes} + + {/* OnBoarding Routes */} + - + } /> + + {/* Popup Routes */} + {/* ChooseAccount is a popup as shown only in popup when decodedAuthRequest in set-password */} {ledgerJwtSigningRoutes} - - - - - } - > - } /> - } /> - - - - - } - > - } /> - - - {sendCryptoAssetFormRoutes} - - - - - } - /> - }> - {leatherIntroDialogRoutes} - - {legacyRequestRoutes} {rpcRequestRoutes} - } /> - - - - } - /> - - - - - } - > - } /> - - - { - const { RpcSignBip322MessageRoute } = await import( - '@app/pages/rpc-sign-bip322-message/rpc-sign-bip322-message' - ); - return { Component: RpcSignBip322MessageRoute }; - }} - > - {ledgerBitcoinTxSigningRoutes} - - - {alexSwapRoutes} - - {/* Catch-all route redirects to onboarding */} - } /> + + {/* Catch-all route redirects to onboarding */} + } /> ) ); diff --git a/src/app/routes/rpc-routes.tsx b/src/app/routes/rpc-routes.tsx index 8893db05c47..0f2a1f98c36 100644 --- a/src/app/routes/rpc-routes.tsx +++ b/src/app/routes/rpc-routes.tsx @@ -3,6 +3,7 @@ import { Route } from 'react-router-dom'; import { RouteUrls } from '@shared/route-urls'; +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'; import { ledgerStacksMessageSigningRoutes } from '@app/features/ledger/flows/stacks-message-signing/ledger-stacks-sign-msg.routes'; import { RpcGetAddresses } from '@app/pages/rpc-get-addresses/rpc-get-addresses'; @@ -10,6 +11,7 @@ import { rpcSendTransferRoutes } from '@app/pages/rpc-send-transfer/rpc-send-tra import { RpcSignPsbt } from '@app/pages/rpc-sign-psbt/rpc-sign-psbt'; import { RpcSignPsbtSummary } from '@app/pages/rpc-sign-psbt/rpc-sign-psbt-summary'; import { RpcStacksMessageSigning } from '@app/pages/rpc-sign-stacks-message/rpc-sign-stacks-message'; +import { RpcSignStacksTransaction } from '@app/pages/rpc-sign-stacks-transaction/rpc-sign-stacks-transaction'; import { AccountGate } from '@app/routes/account-gate'; import { SuspenseLoadingSpinner } from './app-routes'; @@ -66,5 +68,16 @@ export const rpcRequestRoutes = ( > {ledgerStacksMessageSigningRoutes} + + + + + } + > + } /> + ); diff --git a/src/app/ui/components/containers/container.layout.tsx b/src/app/ui/components/containers/container.layout.tsx deleted file mode 100644 index 6167da4552d..00000000000 --- a/src/app/ui/components/containers/container.layout.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { Flex } from 'leather-styles/jsx'; - -interface ContainerLayoutProps { - children: React.JSX.Element | React.JSX.Element[]; - header: React.JSX.Element | null; -} -export function ContainerLayout({ children, header }: ContainerLayoutProps) { - return ( - - {header} - - {children} - - - ); -} diff --git a/src/app/ui/components/containers/headers/components/big-title-header.tsx b/src/app/ui/components/containers/headers/components/big-title-header.tsx deleted file mode 100644 index b64910a12b9..00000000000 --- a/src/app/ui/components/containers/headers/components/big-title-header.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { ReactNode } from 'react'; - -import { SharedComponentsSelectors } from '@tests/selectors/shared-component.selectors'; -import { Flex, styled } from 'leather-styles/jsx'; - -import { CloseIcon } from '@leather.io/ui'; - -import { HeaderActionButton } from './header-action-button'; - -interface BigTitleHeaderProps { - onClose?(): void; - title?: ReactNode; -} - -export function BigTitleHeader({ onClose, title }: BigTitleHeaderProps) { - return ( - - {title} - {onClose && ( - - } - dataTestId={SharedComponentsSelectors.HeaderCloseBtn} - onAction={onClose} - /> - - )} - - ); -} diff --git a/src/app/ui/components/containers/headers/header.stories.tsx b/src/app/ui/components/containers/headers/header.stories.tsx deleted file mode 100644 index d6b48b0b883..00000000000 --- a/src/app/ui/components/containers/headers/header.stories.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import type { Meta } from '@storybook/react'; - -import { Header as Component, HeaderProps } from './header'; - -const meta: Meta = { - component: Component, - tags: ['autodocs'], - title: 'Containers/Header', - args: { - variant: 'home', - }, -}; - -export default meta; - -export function Header(args: HeaderProps) { - return null} onGoBack={() => null} />; -} - -export function PageHeader(args: HeaderProps) { - return null} />; -} diff --git a/src/app/ui/components/containers/headers/header.tsx b/src/app/ui/components/containers/headers/header.tsx deleted file mode 100644 index 285d5e58d36..00000000000 --- a/src/app/ui/components/containers/headers/header.tsx +++ /dev/null @@ -1,90 +0,0 @@ -import { ReactNode } from 'react'; - -import { SharedComponentsSelectors } from '@tests/selectors/shared-component.selectors'; -import { Flex, Grid, GridItem, HStack, styled } from 'leather-styles/jsx'; - -import { ArrowLeftIcon, CloseIcon } from '@leather.io/ui'; - -import { BigTitleHeader } from './components/big-title-header'; -import { HeaderActionButton } from './components/header-action-button'; - -type HeaderVariants = 'page' | 'home' | 'onboarding' | 'bigTitle' | 'fund'; - -export interface HeaderProps { - variant: HeaderVariants; - onClose?(): void; - onGoBack?(): void; - title?: ReactNode; - account?: ReactNode; - totalBalance?: ReactNode; - settingsMenu?: ReactNode; - networkBadge?: ReactNode; - logo?: ReactNode; -} - -export function Header({ - variant, - onClose, - onGoBack, - account, - totalBalance, - settingsMenu, - networkBadge, - title, - logo, -}: HeaderProps) { - const logoItem = onGoBack || logo || account; - - return ( - - - - {logoItem && ( - - {variant !== 'home' && onGoBack ? ( - } - onAction={onGoBack} - dataTestId={SharedComponentsSelectors.HeaderBackBtn} - /> - ) : undefined} - {account ? account : logo} - - )} - - - {title && {title}} - - - - {networkBadge} - {totalBalance && totalBalance} - {settingsMenu} - {variant !== 'bigTitle' && onClose && ( - } - dataTestId={SharedComponentsSelectors.HeaderCloseBtn} - onAction={onClose} - /> - )} - - - - {variant === 'bigTitle' && } - - ); -} diff --git a/src/app/ui/pages/home.layout.stories.tsx b/src/app/ui/pages/home.layout.stories.tsx deleted file mode 100644 index bd972f72553..00000000000 --- a/src/app/ui/pages/home.layout.stories.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import type { Meta } from '@storybook/react'; -import { Box, Flex, Stack } from 'leather-styles/jsx'; - -import { ArrowDownIcon, ArrowUpIcon, IconButton, PlusIcon, SwapIcon, Tabs } from '@leather.io/ui'; - -import { RouteUrls } from '@shared/route-urls'; - -import { HomeLayout as Component } from './home.layout'; - -const meta: Meta = { - component: Component, - tags: ['autodocs'], - title: 'Pages/Home', -}; - -export default meta; - -export function HomeLayout() { - return ( - - } label="Send" /> - } label="Receive" /> - } label="Buy" /> - } label="Swap" /> - - } - > - - - - - Assets - - - Activity - - - - - - - ); -} diff --git a/src/app/ui/pages/home.layout.tsx b/src/app/ui/pages/home.layout.tsx deleted file mode 100644 index ee06606f5e8..00000000000 --- a/src/app/ui/pages/home.layout.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import type { ReactNode } from 'react'; - -import { HomePageSelectors } from '@tests/selectors/home.selectors'; -import { Box, Stack } from 'leather-styles/jsx'; - -interface HomeLayoutProps { - children: ReactNode; - accountCard: ReactNode; -} - -export function HomeLayout({ children, accountCard }: HomeLayoutProps) { - return ( - - - {accountCard} - - {children} - - ); -} diff --git a/src/shared/switch-account.ts b/src/shared/switch-account.ts new file mode 100644 index 00000000000..2ca026ac282 --- /dev/null +++ b/src/shared/switch-account.ts @@ -0,0 +1,4 @@ +export interface SwitchAccountOutletContext { + isShowingSwitchAccount: boolean; + setIsShowingSwitchAccount(isShowing: boolean): void; +}