From bbf8288ce35f98fc6c0afea5722a1c319528fb34 Mon Sep 17 00:00:00 2001 From: Pete Watters <2938440+pete-watters@users.noreply.github.com> Date: Tue, 5 Dec 2023 12:10:58 +0000 Subject: [PATCH] chore: migrate base drawer to radix dialog and make resonsive --- package.json | 5 +- public/html/popup-center.html | 12 -- src/app/common/hooks/use-scroll-lock.ts | 1 + .../broadcast-error-drawer.layout.tsx | 6 +- src/app/components/drawer/base-drawer.tsx | 127 -------------- .../components/drawer/controlled-drawer.tsx | 30 ---- .../generic-error/generic-error.tsx | 4 +- src/app/components/network-mode-badge.tsx | 5 +- src/app/features/add-network/add-network.tsx | 2 +- src/app/features/container/container.tsx | 2 +- .../edit-nonce-drawer/edit-nonce-drawer.tsx | 2 +- .../features/errors/app-error-boundary.tsx | 2 +- .../high-fee-drawer/high-fee-drawer.tsx | 15 +- .../increase-fee-drawer.tsx | 2 +- .../increase-fee-sent-drawer.tsx | 2 +- .../ledger-bitcoin-sign-tx-container.tsx | 2 +- .../jwt-signing/ledger-sign-jwt-container.tsx | 2 +- .../ledger-stacks-sign-msg-container.tsx | 2 +- .../ledger-sign-stacks-tx-container.tsx | 2 +- .../request-keys/request-keys-flow.tsx | 2 +- .../connect-device/connect-ledger-start.tsx | 2 +- .../unsupported-browser.layout.tsx | 9 +- ...trieve-taproot-to-native-segwit.layout.tsx | 2 +- .../components/create-account-action.tsx | 25 --- .../components/switch-account-list.tsx | 54 ++++-- .../switch-account-drawer.tsx | 49 ++++-- .../features/theme-drawer/theme-drawer.tsx | 2 +- .../bitcoin-contract-list-layout.tsx | 2 +- .../choose-asset-to-fund.tsx | 4 +- src/app/pages/fund/fund.tsx | 2 +- src/app/pages/home/home.tsx | 2 +- .../allow-diagnostics-layout.tsx | 125 +++++++++----- .../allow-diagnostics/allow-diagnostics.tsx | 4 +- .../back-up-secret-key/back-up-secret-key.tsx | 4 +- .../onboarding/set-password/set-password.tsx | 4 +- src/app/pages/onboarding/sign-in/sign-in.tsx | 4 +- .../components/receive-tokens.layout.tsx | 16 +- src/app/pages/receive/receive-modal.tsx | 135 +++++++-------- .../pages/select-network/select-network.tsx | 2 +- .../choose-crypto-asset.tsx | 4 +- .../locked-bitcoin-summary.tsx | 4 +- .../send-inscription-choose-fee.tsx | 2 +- .../send-inscription-form.tsx | 2 +- .../send-inscription-review.tsx | 2 +- .../sent-inscription-summary.tsx | 2 +- src/app/pages/send/send-container.tsx | 4 +- .../recipient-accounts-drawer.tsx | 2 +- .../form/brc-20/brc-20-choose-fee.tsx | 4 +- .../brc-20/brc20-send-form-confirmation.tsx | 4 +- .../form/btc/btc-choose-fee.tsx | 4 +- .../form/btc/btc-send-form-confirmation.tsx | 4 +- .../stacks/stacks-send-form-confirmation.tsx | 3 +- .../send/sent-summary/brc20-sent-summary.tsx | 4 +- .../send/sent-summary/btc-sent-summary.tsx | 4 +- .../send/sent-summary/stx-sent-summary.tsx | 4 +- .../sign-out-confirm.layout.tsx | 59 ++++--- .../swap-choose-asset/swap-choose-asset.tsx | 4 +- .../pages/swap/swap-review/swap-review.tsx | 4 +- src/app/pages/swap/swap.tsx | 4 +- src/app/pages/unlock.tsx | 2 +- .../pages/view-secret-key/view-secret-key.tsx | 2 +- .../containers}/container.layout.tsx | 1 - .../containers/drawer/base-drawer.tsx | 156 ++++++++++++++++++ .../components/header-action-button.tsx | 0 .../containers/drawer/hooks/use-drawer.tsx | 22 +++ .../containers/drawer/modal-wrapper.tsx | 48 ++++++ .../components/containers/footers/footer.tsx | 29 ++++ .../containers/headers}/drawer-header.tsx | 34 ++-- .../components/containers/headers}/header.tsx | 53 +++--- .../containers/headers}/modal-header.tsx | 36 ++-- .../components/containers}/leather-logo.tsx | 14 +- .../ui/components/containers/modal/modal.tsx | 53 ++++++ src/background/messaging/messaging-utils.ts | 4 +- src/background/{popup-center.ts => popup.ts} | 2 +- src/shared/constants.ts | 5 +- theme/global/global.ts | 10 +- theme/global/popup-center-styles.ts | 8 - theme/global/popup-styles.ts | 8 +- theme/global/radix-styles.ts | 73 ++++++++ webpack/webpack.config.base.js | 5 - yarn.lock | 126 +++++--------- 81 files changed, 862 insertions(+), 627 deletions(-) delete mode 100644 public/html/popup-center.html delete mode 100644 src/app/components/drawer/base-drawer.tsx delete mode 100644 src/app/components/drawer/controlled-drawer.tsx delete mode 100644 src/app/features/switch-account-drawer/components/create-account-action.tsx rename src/app/{features/container => ui/components/containers}/container.layout.tsx (99%) create mode 100644 src/app/ui/components/containers/drawer/base-drawer.tsx rename src/app/{components => ui/components/containers}/drawer/components/header-action-button.tsx (100%) create mode 100644 src/app/ui/components/containers/drawer/hooks/use-drawer.tsx create mode 100644 src/app/ui/components/containers/drawer/modal-wrapper.tsx create mode 100644 src/app/ui/components/containers/footers/footer.tsx rename src/app/{components/drawer/components => ui/components/containers/headers}/drawer-header.tsx (61%) rename src/app/{components => ui/components/containers/headers}/header.tsx (69%) rename src/app/{components => ui/components/containers/headers}/modal-header.tsx (73%) rename src/app/{components => ui/components/containers}/leather-logo.tsx (52%) create mode 100644 src/app/ui/components/containers/modal/modal.tsx rename src/background/{popup-center.ts => popup.ts} (94%) delete mode 100644 theme/global/popup-center-styles.ts diff --git a/package.json b/package.json index d1ab8b6d5e6..e264eaaa504 100644 --- a/package.json +++ b/package.json @@ -129,11 +129,12 @@ "@noble/hashes": "1.3.2", "@noble/secp256k1": "2.0.0", "@octokit/types": "12.0.0", - "@radix-ui/colors": "2.1.0", + "@radix-ui/colors": "3.0.0", "@radix-ui/react-accessible-icon": "1.0.3", + "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-switch": "1.0.3", "@radix-ui/react-tabs": "1.0.4", - "@radix-ui/themes": "1.1.2", + "@radix-ui/themes": "2.0.2", "@reduxjs/toolkit": "1.9.6", "@scure/base": "1.1.3", "@scure/bip32": "1.3.2", diff --git a/public/html/popup-center.html b/public/html/popup-center.html deleted file mode 100644 index 7d23e5be4ba..00000000000 --- a/public/html/popup-center.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - -
- - - diff --git a/src/app/common/hooks/use-scroll-lock.ts b/src/app/common/hooks/use-scroll-lock.ts index b3b83f7f7e1..206d9f0d25b 100644 --- a/src/app/common/hooks/use-scroll-lock.ts +++ b/src/app/common/hooks/use-scroll-lock.ts @@ -42,6 +42,7 @@ const setBodyOverflow = (shouldLock: boolean) => { } }; +// 4370 TODO check if this even works as tried using it export const useScrollLock = (shouldLock: boolean) => { // we generate a unique reference to the component that uses this thing const [elementId] = useState({}); diff --git a/src/app/components/broadcast-error-drawer/broadcast-error-drawer.layout.tsx b/src/app/components/broadcast-error-drawer/broadcast-error-drawer.layout.tsx index 12295071811..ebc9190345b 100644 --- a/src/app/components/broadcast-error-drawer/broadcast-error-drawer.layout.tsx +++ b/src/app/components/broadcast-error-drawer/broadcast-error-drawer.layout.tsx @@ -1,8 +1,8 @@ import GenericError from '@assets/images/generic-error.png'; import { Flex, styled } from 'leather-styles/jsx'; -import { BaseDrawer } from '@app/components/drawer/base-drawer'; import { LeatherButton } from '@app/ui/components/button'; +import { BaseDrawer } from '@app/ui/components/containers/drawer/base-drawer'; interface BroadcastErrorDrawerLayoutProps { message: string; @@ -10,7 +10,7 @@ interface BroadcastErrorDrawerLayoutProps { } export function BroadcastErrorDrawerLayout({ message, onClose }: BroadcastErrorDrawerLayoutProps) { return ( - } isShowing onClose={onClose} textAlign="center"> + diff --git a/src/app/components/drawer/base-drawer.tsx b/src/app/components/drawer/base-drawer.tsx deleted file mode 100644 index 91f37039dea..00000000000 --- a/src/app/components/drawer/base-drawer.tsx +++ /dev/null @@ -1,127 +0,0 @@ -import { ReactNode, Suspense, memo, useCallback, useRef } from 'react'; -import { useNavigate } from 'react-router-dom'; - -import { Box, Flex, FlexProps } from 'leather-styles/jsx'; - -import { noop } from '@shared/utils'; - -import { useEventListener } from '@app/common/hooks/use-event-listener'; -import { useOnClickOutside } from '@app/common/hooks/use-onclickoutside'; - -import { DrawerHeader } from './components/drawer-header'; - -function useDrawer(isShowing: boolean, onClose: () => void, pause?: boolean) { - const ref = useRef(null); - - const handleKeyDown = useCallback( - (e: React.KeyboardEvent) => { - if (isShowing && e.key === 'Escape') { - onClose(); - } - }, - [onClose, isShowing] - ); - - useOnClickOutside(ref, !pause && isShowing ? onClose : null); - useEventListener('keydown', handleKeyDown); - - return ref; -} - -interface BaseDrawerProps extends Omit { - children?: ReactNode; - enableGoBack?: boolean; - icon?: React.JSX.Element; - isShowing: boolean; - isWaitingOnPerformedAction?: boolean; - onClose?(): void; - pauseOnClickOutside?: boolean; - title?: string; - waitingOnPerformedActionMessage?: string; -} -export const BaseDrawer = memo((props: BaseDrawerProps) => { - const { - children, - enableGoBack, - icon, - isShowing, - isWaitingOnPerformedAction, - onClose, - pauseOnClickOutside, - title, - waitingOnPerformedActionMessage, - ...rest - } = props; - const ref = useDrawer(isShowing, onClose ? onClose : noop, pauseOnClickOutside); - const navigate = useNavigate(); - - const onGoBack = () => navigate(-1); - - return ( - - - - - - }>{children} - - - - - ); -}); diff --git a/src/app/components/drawer/controlled-drawer.tsx b/src/app/components/drawer/controlled-drawer.tsx deleted file mode 100644 index 02819286cbe..00000000000 --- a/src/app/components/drawer/controlled-drawer.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { ReactNode } from 'react'; - -import { BaseDrawer } from './base-drawer'; - -interface ControlledDrawerProps { - children?: ReactNode; - enableGoBack?: boolean; - icon?: React.JSX.Element; - isShowing: boolean; - onClose(): void; - pauseOnClickOutside?: boolean; - title?: string; -} -// The visibility of this drawer is controlled by an atom -export function ControlledDrawer(props: ControlledDrawerProps) { - const { children, enableGoBack, icon, isShowing, onClose, pauseOnClickOutside, title } = props; - - return ( - - {children} - - ); -} diff --git a/src/app/components/generic-error/generic-error.tsx b/src/app/components/generic-error/generic-error.tsx index 6c4e401f977..e03e575bdec 100644 --- a/src/app/components/generic-error/generic-error.tsx +++ b/src/app/components/generic-error/generic-error.tsx @@ -5,7 +5,7 @@ import { FlexProps, styled } from 'leather-styles/jsx'; import { closeWindow } from '@shared/utils'; import { useRouteHeader } from '@app/common/hooks/use-route-header'; -import { Header } from '@app/components/header'; +import { Header } from '@app/ui/components/containers/headers/header'; import { GenericErrorLayout } from './generic-error.layout'; @@ -23,7 +23,7 @@ interface GenericErrorProps extends FlexProps { export function GenericError(props: GenericErrorProps) { const { body, helpTextList, onClose = () => closeWindow(), title, ...rest } = props; - useRouteHeader(
); + useRouteHeader(
); return ( { +export const NetworkModeBadge = memo(() => { const navigate = useNavigate(); const { chain, name } = useCurrentNetworkState(); const isTestnetChain = useMemo( @@ -29,7 +29,6 @@ export const NetworkModeBadge = memo((props: FlexProps) => { px="space.03" position="relative" zIndex={999} - {...props} > {name} diff --git a/src/app/features/add-network/add-network.tsx b/src/app/features/add-network/add-network.tsx index 3353dd3b8f4..14f4bf78533 100644 --- a/src/app/features/add-network/add-network.tsx +++ b/src/app/features/add-network/add-network.tsx @@ -16,12 +16,12 @@ import { useRouteHeader } from '@app/common/hooks/use-route-header'; import { removeTrailingSlash } from '@app/common/url-join'; import { CenteredPageContainer } from '@app/components/centered-page-container'; import { ErrorLabel } from '@app/components/error-label'; -import { Header } from '@app/components/header'; import { useCurrentStacksNetworkState, useNetworksActions, } from '@app/store/networks/networks.hooks'; import { LeatherButton } from '@app/ui/components/button'; +import { Header } from '@app/ui/components/containers/headers/header'; import { Input } from '@app/ui/components/input'; import { Title } from '@app/ui/components/typography/title'; diff --git a/src/app/features/container/container.tsx b/src/app/features/container/container.tsx index 76d8367fcaf..09a1626c4b7 100644 --- a/src/app/features/container/container.tsx +++ b/src/app/features/container/container.tsx @@ -12,10 +12,10 @@ import { useOnWalletLock } from '@app/routes/hooks/use-on-wallet-lock'; import { useHasStateRehydrated } from '@app/store'; import { useRouteHeaderState } from '@app/store/ui/ui.hooks'; +import { ContainerLayout } from '../../ui/components/containers/container.layout'; import { useRestoreFormState } from '../popup-send-form-restoration/use-restore-form-state'; import { SettingsDropdown } from '../settings-dropdown/settings-dropdown'; import { SwitchAccountDrawer } from '../switch-account-drawer/switch-account-drawer'; -import { ContainerLayout } from './container.layout'; export function Container() { const [routeHeader] = useRouteHeaderState(); diff --git a/src/app/features/edit-nonce-drawer/edit-nonce-drawer.tsx b/src/app/features/edit-nonce-drawer/edit-nonce-drawer.tsx index 7f7fa233268..61dd786a045 100644 --- a/src/app/features/edit-nonce-drawer/edit-nonce-drawer.tsx +++ b/src/app/features/edit-nonce-drawer/edit-nonce-drawer.tsx @@ -8,8 +8,8 @@ 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 { BaseDrawer } from '@app/components/drawer/base-drawer'; import { LeatherButton } from '@app/ui/components/button'; +import { BaseDrawer } from '@app/ui/components/containers/drawer/base-drawer'; import { EditNonceForm } from './components/edit-nonce-form'; diff --git a/src/app/features/errors/app-error-boundary.tsx b/src/app/features/errors/app-error-boundary.tsx index f13964586c5..4f85c115f02 100644 --- a/src/app/features/errors/app-error-boundary.tsx +++ b/src/app/features/errors/app-error-boundary.tsx @@ -3,11 +3,11 @@ import { Box, Stack, styled } from 'leather-styles/jsx'; import { Prism } from '@app/common/clarity-prism'; import { HasChildren } from '@app/common/has-children'; import { useRouteHeader } from '@app/common/hooks/use-route-header'; -import { Header } from '@app/components/header'; import { ErrorBoundary, FallbackProps, useErrorHandler } from '@app/features/errors/error-boundary'; import { openGithubIssue } from '@app/features/errors/utils'; import { useErrorStackTraceState } from '@app/store/ui/ui.hooks'; import { CodeBlock } from '@app/ui/components/codeblock'; +import { Header } from '@app/ui/components/containers/headers/header'; import { Title } from '@app/ui/components/typography/title'; function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) { diff --git a/src/app/features/high-fee-drawer/high-fee-drawer.tsx b/src/app/features/high-fee-drawer/high-fee-drawer.tsx index 1ef354d0c28..2cd63463223 100644 --- a/src/app/features/high-fee-drawer/high-fee-drawer.tsx +++ b/src/app/features/high-fee-drawer/high-fee-drawer.tsx @@ -1,13 +1,12 @@ import { useEffect } from 'react'; import { useDrawers } from '@app/common/hooks/use-drawers'; -import { ControlledDrawer } from '@app/components/drawer/controlled-drawer'; -import { ErrorIcon } from '@app/ui/components/icons/error-icon'; +import { BaseDrawer } from '@app/ui/components/containers/drawer/base-drawer'; +// import { ErrorIcon } from '@app/ui/components/icons/error-icon'; import { HighFeeConfirmation } from './components/high-fee-confirmation'; -export function HighFeeDrawer(props: { learnMoreUrl: string }) { - const { learnMoreUrl } = props; +export function HighFeeDrawer({ learnMoreUrl }: { learnMoreUrl: string }) { const { isShowingHighFeeConfirmation, setIsShowingHighFeeConfirmation } = useDrawers(); useEffect(() => { @@ -17,12 +16,14 @@ export function HighFeeDrawer(props: { learnMoreUrl: string }) { }, [isShowingHighFeeConfirmation, setIsShowingHighFeeConfirmation]); return ( - } + } + // figure out how this works in general isShowing={isShowingHighFeeConfirmation} onClose={() => setIsShowingHighFeeConfirmation(false)} > {isShowingHighFeeConfirmation && } - + ); } diff --git a/src/app/features/increase-fee-drawer/increase-fee-drawer.tsx b/src/app/features/increase-fee-drawer/increase-fee-drawer.tsx index b642400598a..2802964ef0d 100644 --- a/src/app/features/increase-fee-drawer/increase-fee-drawer.tsx +++ b/src/app/features/increase-fee-drawer/increase-fee-drawer.tsx @@ -3,7 +3,7 @@ import { Outlet } from 'react-router-dom'; import { Flex, Stack } from 'leather-styles/jsx'; -import { BaseDrawer } from '@app/components/drawer/base-drawer'; +import { BaseDrawer } from '@app/ui/components/containers/drawer/base-drawer'; import { Spinner } from '@app/ui/components/spinner'; import { Caption } from '@app/ui/components/typography/caption'; diff --git a/src/app/features/increase-fee-drawer/increase-fee-sent-drawer.tsx b/src/app/features/increase-fee-drawer/increase-fee-sent-drawer.tsx index 8dda7dcb213..d8ce8a7f6de 100644 --- a/src/app/features/increase-fee-drawer/increase-fee-sent-drawer.tsx +++ b/src/app/features/increase-fee-drawer/increase-fee-sent-drawer.tsx @@ -4,7 +4,7 @@ import { Flex } from 'leather-styles/jsx'; import { RouteUrls } from '@shared/route-urls'; -import { BaseDrawer } from '@app/components/drawer/base-drawer'; +import { BaseDrawer } from '@app/ui/components/containers/drawer/base-drawer'; import { CheckmarkIcon } from '@app/ui/components/icons/checkmark-icon'; export function IncreaseFeeSentDrawer() { diff --git a/src/app/features/ledger/flows/bitcoin-tx-signing/ledger-bitcoin-sign-tx-container.tsx b/src/app/features/ledger/flows/bitcoin-tx-signing/ledger-bitcoin-sign-tx-container.tsx index 36b89785a5b..4c28e9eae15 100644 --- a/src/app/features/ledger/flows/bitcoin-tx-signing/ledger-bitcoin-sign-tx-container.tsx +++ b/src/app/features/ledger/flows/bitcoin-tx-signing/ledger-bitcoin-sign-tx-container.tsx @@ -14,13 +14,13 @@ import { useLocationState, useLocationStateWithCache } from '@app/common/hooks/u import { useScrollLock } from '@app/common/hooks/use-scroll-lock'; import { appEvents } from '@app/common/publish-subscribe'; import { delay } from '@app/common/utils'; -import { BaseDrawer } from '@app/components/drawer/base-drawer'; import { LedgerTxSigningContext, LedgerTxSigningProvider, } from '@app/features/ledger/generic-flows/tx-signing/ledger-sign-tx.context'; import { useActionCancellableByUser } from '@app/features/ledger/utils/stacks-ledger-utils'; import { useSignLedgerBitcoinTx } from '@app/store/accounts/blockchain/bitcoin/bitcoin.hooks'; +import { BaseDrawer } from '@app/ui/components/containers/drawer/base-drawer'; import { ledgerSignTxRoutes } from '../../generic-flows/tx-signing/ledger-sign-tx-route-generator'; import { useLedgerAnalytics } from '../../hooks/use-ledger-analytics.hook'; 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 fe10c58391c..f1746753f06 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 @@ -15,7 +15,6 @@ 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 { delay } from '@app/common/utils'; -import { BaseDrawer } from '@app/components/drawer/base-drawer'; import { getStacksAppVersion, prepareLedgerDeviceStacksAppConnection, @@ -25,6 +24,7 @@ import { useCurrentStacksAccount, useStacksAccounts, } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks'; +import { BaseDrawer } from '@app/ui/components/containers/drawer/base-drawer'; import { useLedgerNavigate } from '../../hooks/use-ledger-navigate'; import { 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 03f361d6268..708087f8045 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,7 +12,6 @@ import { UnsignedMessage, whenSignableMessageOfType } from '@shared/signature/si import { useScrollLock } from '@app/common/hooks/use-scroll-lock'; import { delay } from '@app/common/utils'; -import { BaseDrawer } from '@app/components/drawer/base-drawer'; import { getStacksAppVersion, prepareLedgerDeviceStacksAppConnection, @@ -23,6 +22,7 @@ import { import { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks'; import { StacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.models'; import { useSignatureRequestSearchParams } from '@app/store/signatures/requests.hooks'; +import { BaseDrawer } from '@app/ui/components/containers/drawer/base-drawer'; import { useLedgerAnalytics } from '../../hooks/use-ledger-analytics.hook'; import { useLedgerNavigate } from '../../hooks/use-ledger-navigate'; diff --git a/src/app/features/ledger/flows/stacks-tx-signing/ledger-sign-stacks-tx-container.tsx b/src/app/features/ledger/flows/stacks-tx-signing/ledger-sign-stacks-tx-container.tsx index 8000bc577dc..eefc00467e9 100644 --- a/src/app/features/ledger/flows/stacks-tx-signing/ledger-sign-stacks-tx-container.tsx +++ b/src/app/features/ledger/flows/stacks-tx-signing/ledger-sign-stacks-tx-container.tsx @@ -11,7 +11,6 @@ import { RouteUrls } from '@shared/route-urls'; import { useScrollLock } from '@app/common/hooks/use-scroll-lock'; import { appEvents } from '@app/common/publish-subscribe'; import { delay } from '@app/common/utils'; -import { BaseDrawer } from '@app/components/drawer/base-drawer'; import { LedgerTxSigningContext, LedgerTxSigningProvider, @@ -26,6 +25,7 @@ import { useActionCancellableByUser, } from '@app/features/ledger/utils/stacks-ledger-utils'; import { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks'; +import { BaseDrawer } from '@app/ui/components/containers/drawer/base-drawer'; import { ledgerSignTxRoutes } from '../../generic-flows/tx-signing/ledger-sign-tx-route-generator'; import { useLedgerAnalytics } from '../../hooks/use-ledger-analytics.hook'; 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 67b4f00dc8c..9285ea97503 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 @@ -1,7 +1,7 @@ import { Outlet, useNavigate } from 'react-router-dom'; import { useScrollLock } from '@app/common/hooks/use-scroll-lock'; -import { BaseDrawer } from '@app/components/drawer/base-drawer'; +import { BaseDrawer } from '@app/ui/components/containers/drawer/base-drawer'; import { LedgerRequestKeysContext, LedgerRequestKeysProvider } from './ledger-request-keys.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 18f1987f45f..d5615af5716 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 @@ -5,7 +5,7 @@ import { closeWindow } from '@shared/utils'; import { doesBrowserSupportWebUsbApi, whenPageMode } from '@app/common/utils'; import { openIndexPageInNewTab } from '@app/common/utils/open-in-new-tab'; -import { BaseDrawer } from '@app/components/drawer/base-drawer'; +import { BaseDrawer } from '@app/ui/components/containers/drawer/base-drawer'; 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 2bbc87d930f..246d6ab61ba 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 @@ -2,9 +2,9 @@ import { useNavigate } from 'react-router-dom'; import { styled } from 'leather-styles/jsx'; -import { BaseDrawer } from '@app/components/drawer/base-drawer'; import { ExternalLink } from '@app/components/external-link'; import { UnsupportedBrowserImg } from '@app/features/ledger/illustrations/ledger-illu-unsupported-browser'; +import { BaseDrawer } from '@app/ui/components/containers/drawer/base-drawer'; import { LedgerTitle } from '../../components/ledger-title'; import { LedgerWrapper } from '../../components/ledger-wrapper'; @@ -17,12 +17,11 @@ export function UnsupportedBrowserLayout() { }> Your browser isn't supported - {' '} - To connect your Ledger with Leather try{' '} + {'To connect your Ledger with Leather try '} Chrome - {' '} - or{' '} + + {' or '} Brave 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 e7a901a13bd..244cf15679a 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 @@ -1,8 +1,8 @@ import { Flex, styled } from 'leather-styles/jsx'; -import { BaseDrawer } from '@app/components/drawer/base-drawer'; import { WarningLabel } from '@app/components/warning-label'; import { LeatherButton } from '@app/ui/components/button'; +import { BaseDrawer } from '@app/ui/components/containers/drawer/base-drawer'; import { BtcIcon } from '@app/ui/components/icons/btc-icon'; interface RetrieveTaprootToNativeSegwitLayoutProps { diff --git a/src/app/features/switch-account-drawer/components/create-account-action.tsx b/src/app/features/switch-account-drawer/components/create-account-action.tsx deleted file mode 100644 index 9f4bfc9938b..00000000000 --- a/src/app/features/switch-account-drawer/components/create-account-action.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { Flex } from 'leather-styles/jsx'; - -import { LeatherButton } from '@app/ui/components/button'; - -interface CreateAccountActionProps { - onCreateAccount(): void; -} -export function CreateAccountAction({ onCreateAccount }: CreateAccountActionProps) { - return ( - - onCreateAccount()}> - Create new account - - - ); -} diff --git a/src/app/features/switch-account-drawer/components/switch-account-list.tsx b/src/app/features/switch-account-drawer/components/switch-account-list.tsx index 809dccd3804..f3ed6b1ca1a 100644 --- a/src/app/features/switch-account-drawer/components/switch-account-list.tsx +++ b/src/app/features/switch-account-drawer/components/switch-account-list.tsx @@ -1,8 +1,9 @@ -import { memo } from 'react'; +import { ReactNode, memo } from 'react'; import { Virtuoso } from 'react-virtuoso'; import { Box } from 'leather-styles/jsx'; +import { useViewportMinWidth } from '@app/common/hooks/use-media-query'; import { useWalletType } from '@app/common/use-wallet-type'; import { SwitchAccountListItem } from './switch-account-list-item'; @@ -11,27 +12,48 @@ interface SwitchAccountListProps { handleClose(): void; currentAccountIndex: number; addressesNum: number; + footer?: ReactNode; } export const SwitchAccountList = memo( ({ currentAccountIndex, handleClose, addressesNum }: SwitchAccountListProps) => { const { whenWallet } = useWalletType(); + const isAtleastBreakpointMd = useViewportMinWidth('md'); return ( - ( - - - - )} - /> + + ( + + + + )} + /> + ); } ); diff --git a/src/app/features/switch-account-drawer/switch-account-drawer.tsx b/src/app/features/switch-account-drawer/switch-account-drawer.tsx index 6fa56009a0f..9943d8e9292 100644 --- a/src/app/features/switch-account-drawer/switch-account-drawer.tsx +++ b/src/app/features/switch-account-drawer/switch-account-drawer.tsx @@ -1,20 +1,21 @@ import { memo } from 'react'; -import { Box } from 'leather-styles/jsx'; +import { styled } from 'leather-styles/jsx'; import { useCreateAccount } from '@app/common/hooks/account/use-create-account'; import { useWalletType } from '@app/common/use-wallet-type'; -import { ControlledDrawer } from '@app/components/drawer/controlled-drawer'; 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 { useShowSwitchAccountsState } from '@app/store/ui/ui.hooks'; +import { LeatherButton } from '@app/ui/components/button'; +import { BaseDrawer } from '@app/ui/components/containers/drawer/base-drawer'; import { AccountListUnavailable } from './components/account-list-unavailable'; -import { CreateAccountAction } from './components/create-account-action'; import { SwitchAccountList } from './components/switch-account-list'; export const SwitchAccountDrawer = memo(() => { + //TODO - see if I can get rid of this jotai stuff const [isShowing, setShowSwitchAccountsState] = useShowSwitchAccountsState(); const currentAccountIndex = useCurrentAccountIndex(); @@ -36,20 +37,32 @@ export const SwitchAccountDrawer = memo(() => { if (isShowing && stacksAddressesNum === 0 && btcAddressesNum === 0) { return ; } + console.log('currentAccountIndex', currentAccountIndex); - return isShowing ? ( - - - - {whenWallet({ - software: , - ledger: <>, - })} - - - ) : null; + // without this early return it crashes on new install with: + // Wallet is neither of type `ledger` nor `software` + if (!isShowing) return null; + // FIXME - how is this even getting loaded at all on install?!?!?! + + return ( + Select account} // FIXME this is a hack for Select Account that needs to be fixed + isShowing={isShowing} + onClose={onClose} + footer={whenWallet({ + software: ( + onCreateAccount()}> + Create new account + + ), + ledger: <>, + })} + > + + + ); }); diff --git a/src/app/features/theme-drawer/theme-drawer.tsx b/src/app/features/theme-drawer/theme-drawer.tsx index 52c68d3627f..579de80c454 100644 --- a/src/app/features/theme-drawer/theme-drawer.tsx +++ b/src/app/features/theme-drawer/theme-drawer.tsx @@ -1,8 +1,8 @@ import { useNavigate } from 'react-router-dom'; import { useLocationState } from '@app/common/hooks/use-location-state'; -import { BaseDrawer } from '@app/components/drawer/base-drawer'; import { useBackgroundLocationRedirect } from '@app/routes/hooks/use-background-location-redirect'; +import { BaseDrawer } from '@app/ui/components/containers/drawer/base-drawer'; import { ThemeList } from './theme-list'; diff --git a/src/app/pages/bitcoin-contract-list/components/bitcoin-contract-list-layout.tsx b/src/app/pages/bitcoin-contract-list/components/bitcoin-contract-list-layout.tsx index 3074f22f036..dd20aefda28 100644 --- a/src/app/pages/bitcoin-contract-list/components/bitcoin-contract-list-layout.tsx +++ b/src/app/pages/bitcoin-contract-list/components/bitcoin-contract-list-layout.tsx @@ -6,7 +6,7 @@ import { Stack } from 'leather-styles/jsx'; import { RouteUrls } from '@shared/route-urls'; import { useRouteHeader } from '@app/common/hooks/use-route-header'; -import { Header } from '@app/components/header'; +import { Header } from '@app/ui/components/containers/headers/header'; interface BitcoinContractListProps { children: ReactNode; 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 c7462a2b183..a9edb820d1d 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 @@ -10,11 +10,11 @@ import { useWalletType } from '@app/common/use-wallet-type'; import { ChooseAssetContainer } from '@app/components/crypto-assets/choose-crypto-asset/choose-asset-container'; import { ChooseCryptoAssetLayout } from '@app/components/crypto-assets/choose-crypto-asset/choose-crypto-asset.layout'; import { CryptoAssetList } from '@app/components/crypto-assets/choose-crypto-asset/crypto-asset-list'; -import { ModalHeader } from '@app/components/modal-header'; import { useNativeSegwitBalance } from '@app/query/bitcoin/balance/btc-native-segwit-balance.hooks'; import { createStacksCryptoCurrencyAssetTypeWrapper } from '@app/query/stacks/balance/stacks-ft-balances.utils'; import { useCurrentAccountNativeSegwitSigner } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks'; import { useCheckLedgerBlockchainAvailable } from '@app/store/accounts/blockchain/utils'; +import { ModalHeader } from '@app/ui/components/containers/headers/modal-header'; function useBtcCryptoCurrencyAssetBalance() { const currentBtcSigner = useCurrentAccountNativeSegwitSigner(); @@ -53,7 +53,7 @@ export function ChooseCryptoAssetToFund() { [cryptoCurrencyAssetBalances, checkBlockchainAvailable, whenWallet] ); - useRouteHeader( navigate(RouteUrls.Home)} title=" " />); + useRouteHeader( navigate(RouteUrls.Home)} />); const navigateToSendForm = useCallback( (cryptoAssetBalance: AllTransferableCryptoAssetBalances) => { diff --git a/src/app/pages/fund/fund.tsx b/src/app/pages/fund/fund.tsx index 1756f487c8a..8144028504f 100644 --- a/src/app/pages/fund/fund.tsx +++ b/src/app/pages/fund/fund.tsx @@ -4,11 +4,11 @@ import { isCryptoCurrency } from '@shared/models/currencies.model'; import { RouteUrls } from '@shared/route-urls'; import { useRouteHeader } from '@app/common/hooks/use-route-header'; -import { Header } from '@app/components/header'; import { FullPageLoadingSpinner } from '@app/components/loading-spinner'; import { useCurrentStacksAccountAnchoredBalances } from '@app/query/stacks/balance/stx-balance.hooks'; import { useCurrentAccountNativeSegwitIndexZeroSigner } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks'; import { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks'; +import { Header } from '@app/ui/components/containers/headers/header'; import { FundLayout } from './components/fund.layout'; import { FiatProvidersList } from './fiat-providers-list'; diff --git a/src/app/pages/home/home.tsx b/src/app/pages/home/home.tsx index 5a78f00a492..c1a522658e1 100644 --- a/src/app/pages/home/home.tsx +++ b/src/app/pages/home/home.tsx @@ -6,13 +6,13 @@ import { useTrackFirstDeposit } from '@app/common/hooks/analytics/transactions-a import { useOnboardingState } from '@app/common/hooks/auth/use-onboarding-state'; import { useOnMount } from '@app/common/hooks/use-on-mount'; import { useRouteHeader } from '@app/common/hooks/use-route-header'; -import { Header } from '@app/components/header'; import { ActivityList } from '@app/features/activity-list/activity-list'; import { AssetsList } from '@app/features/asset-list/asset-list'; import { FeedbackButton } from '@app/features/feedback-button/feedback-button'; import { InAppMessages } from '@app/features/hiro-messages/in-app-messages'; import { homePageModalRoutes } from '@app/routes/app-routes'; import { ModalBackgroundWrapper } from '@app/routes/components/modal-background-wrapper'; +import { Header } from '@app/ui/components/containers/headers/header'; import { CurrentAccount } from './components/account-area'; import { HomeTabs } from './components/home-tabs'; diff --git a/src/app/pages/onboarding/allow-diagnostics/allow-diagnostics-layout.tsx b/src/app/pages/onboarding/allow-diagnostics/allow-diagnostics-layout.tsx index 0191a7151c4..a1944e7e36e 100644 --- a/src/app/pages/onboarding/allow-diagnostics/allow-diagnostics-layout.tsx +++ b/src/app/pages/onboarding/allow-diagnostics/allow-diagnostics-layout.tsx @@ -1,8 +1,11 @@ -import { Dialog } from '@radix-ui/themes'; +import { useState } from 'react'; + +import * as Dialog from '@radix-ui/react-dialog'; import { OnboardingSelectors } from '@tests/selectors/onboarding.selectors'; import { css } from 'leather-styles/css'; import { Box, Flex, HStack, Stack, styled } from 'leather-styles/jsx'; +// import { isPopupMode } from '@app/common/utils'; import { LeatherButton } from '@app/ui/components/button'; import { CheckmarkIcon } from '@app/ui/components/icons/checkmark-icon'; import { LeatherIcon } from '@app/ui/components/icons/leather-icon'; @@ -25,51 +28,91 @@ interface AllowDiagnosticsLayoutProps { onUserAllowDiagnostics(): void; onUserDenyDiagnostics(): void; } + +// // #4250 TODO +// Popup mode is just slightly wider than extension view +// isPopupMode() returns true for extension / popup +// could also change sm breakpoint +// sm: '398px', -> sm: '442px', + export function AllowDiagnosticsLayout(props: AllowDiagnosticsLayoutProps) { const { onUserAllowDiagnostics, onUserDenyDiagnostics } = props; + const [open, setOpen] = useState(true); return ( - - - - - Help us improve - - - Leather would like to gather deidentified service usage data to help improve the - experience of the wallet. - - - - - - - + + + + setOpen(!open)} + className={css({ + backgroundColor: 'accent.background-primary', + borderRadius: '6px', + boxShadow: + 'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px', + position: 'fixed', + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', + width: '90vw', + maxWidth: '450px', + maxHeight: '85vh', + padding: '25px', + animation: 'contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)', - - onUserDenyDiagnostics()} - data-testid={OnboardingSelectors.DenyAnalyticsBtn} + // OLD + // width: '500px', + // marginY: 'space.03', + // backgroundColor: 'accent.background-primary', + // adding a minHeight here works for extension/popup but we lose margins + // minHeight: isPopupMode() ? '600px' : undefined, + })} > - Deny - - - Allow - - - + + + Help us improve + + + Leather would like to gather deidentified service usage data to help improve the + experience of the wallet. + + + + + + + + + + onUserDenyDiagnostics()} + data-testid={OnboardingSelectors.DenyAnalyticsBtn} + > + Deny + + + Allow + + + + + + + + ); } diff --git a/src/app/pages/onboarding/allow-diagnostics/allow-diagnostics.tsx b/src/app/pages/onboarding/allow-diagnostics/allow-diagnostics.tsx index a7c44eab07f..522f59bba2e 100644 --- a/src/app/pages/onboarding/allow-diagnostics/allow-diagnostics.tsx +++ b/src/app/pages/onboarding/allow-diagnostics/allow-diagnostics.tsx @@ -6,8 +6,8 @@ import { RouteUrls } from '@shared/route-urls'; import { useAnalytics } from '@app/common/hooks/analytics/use-analytics'; import { useRouteHeader } from '@app/common/hooks/use-route-header'; -import { Header } from '@app/components/header'; import { settingsActions } from '@app/store/settings/settings.actions'; +import { Header } from '@app/ui/components/containers/headers/header'; import { AllowDiagnosticsLayout } from './allow-diagnostics-layout'; @@ -19,7 +19,7 @@ export function AllowDiagnosticsModal() { useEffect(() => void analytics.page('view', `${pathname}`), [analytics, pathname]); - useRouteHeader(
); + useRouteHeader(
); const setDiagnosticsPermissionsAndGoToOnboarding = useCallback( (areDiagnosticsAllowed: boolean) => { 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 210ab4f6ab0..d6ea5dbb173 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 @@ -4,10 +4,10 @@ import { useNavigate } from 'react-router-dom'; import { RouteUrls } from '@shared/route-urls'; import { useRouteHeader } from '@app/common/hooks/use-route-header'; -import { Header } from '@app/components/header'; import { TwoColumnLayout } from '@app/components/secret-key/two-column.layout'; import { SecretKeyDisplayer } from '@app/features/secret-key-displayer/secret-key-displayer'; import { useDefaultWalletSecretKey } from '@app/store/in-memory-key/in-memory-key.selectors'; +import { Header } from '@app/ui/components/containers/headers/header'; import { BackUpSecretKeyContent } from './components/back-up-secret-key.content'; @@ -15,7 +15,7 @@ export const BackUpSecretKeyPage = memo(() => { const secretKey = useDefaultWalletSecretKey(); const navigate = useNavigate(); - useRouteHeader(
); + useRouteHeader(
); useEffect(() => { if (!secretKey) navigate(RouteUrls.Onboarding); diff --git a/src/app/pages/onboarding/set-password/set-password.tsx b/src/app/pages/onboarding/set-password/set-password.tsx index 75d1fa21b32..b72b79f9073 100644 --- a/src/app/pages/onboarding/set-password/set-password.tsx +++ b/src/app/pages/onboarding/set-password/set-password.tsx @@ -19,11 +19,11 @@ import { blankPasswordValidation, validatePassword, } from '@app/common/validation/validate-password'; -import { Header } from '@app/components/header'; import { TwoColumnLayout } from '@app/components/secret-key/two-column.layout'; import { OnboardingGate } from '@app/routes/onboarding-gate'; import { useStacksAccounts } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks'; import { LeatherButton } from '@app/ui/components/button'; +import { Header } from '@app/ui/components/containers/headers/header'; import { PasswordField } from './components/password-field'; @@ -53,7 +53,7 @@ function SetPasswordPage() { const { decodedAuthRequest } = useOnboardingState(); const analytics = useAnalytics(); - useRouteHeader(
navigate(-1)} />); + useRouteHeader(
navigate(-1)} />); useEffect(() => { void analytics.page('view', '/set-password'); diff --git a/src/app/pages/onboarding/sign-in/sign-in.tsx b/src/app/pages/onboarding/sign-in/sign-in.tsx index faad25e2dcb..b734be06e05 100644 --- a/src/app/pages/onboarding/sign-in/sign-in.tsx +++ b/src/app/pages/onboarding/sign-in/sign-in.tsx @@ -5,9 +5,9 @@ import { RouteUrls } from '@shared/route-urls'; import { useRouteHeader } from '@app/common/hooks/use-route-header'; import { createNullArrayOfLength } from '@app/common/utils'; -import { Header } from '@app/components/header'; import { TwoColumnLayout } from '@app/components/secret-key/two-column.layout'; import { MnemonicForm } from '@app/pages/onboarding/sign-in/mnemonic-form'; +import { Header } from '@app/ui/components/containers/headers/header'; import { SignInContent } from './components/sign-in.content'; @@ -17,7 +17,7 @@ export function SignIn() { const [twentyFourWordMode, setTwentyFourWordMode] = useState(true); const [mnemonic, setMnemonic] = useState<(string | null)[]>([]); - useRouteHeader(
navigate(RouteUrls.Onboarding)} hideActions />); + useRouteHeader(
navigate(RouteUrls.Onboarding)} />); useEffect(() => { const emptyMnemonicArray = twentyFourWordMode diff --git a/src/app/pages/receive/components/receive-tokens.layout.tsx b/src/app/pages/receive/components/receive-tokens.layout.tsx index 54981fe688e..c82469af800 100644 --- a/src/app/pages/receive/components/receive-tokens.layout.tsx +++ b/src/app/pages/receive/components/receive-tokens.layout.tsx @@ -5,9 +5,9 @@ import { Box, Flex, styled } from 'leather-styles/jsx'; import { useLocationState } from '@app/common/hooks/use-location-state'; import { AddressDisplayer } from '@app/components/address-displayer/address-displayer'; -import { BaseDrawer } from '@app/components/drawer/base-drawer'; import { useBackgroundLocationRedirect } from '@app/routes/hooks/use-background-location-redirect'; import { LeatherButton } from '@app/ui/components/button'; +import { BaseDrawer } from '@app/ui/components/containers/drawer/base-drawer'; import { QrCode } from './address-qr-code'; @@ -26,7 +26,16 @@ export function ReceiveTokensLayout(props: ReceiveTokensLayoutProps) { const backgroundLocation = useLocationState('backgroundLocation'); return ( - navigate(backgroundLocation ?? '..')}> + navigate(backgroundLocation ?? '..')} + footer={ + onCopyAddressToClipboard(address)}> + Copy address + + } + > {warning && warning} @@ -51,9 +60,6 @@ export function ReceiveTokensLayout(props: ReceiveTokensLayoutProps) { - onCopyAddressToClipboard(address)}> - Copy address - ); diff --git a/src/app/pages/receive/receive-modal.tsx b/src/app/pages/receive/receive-modal.tsx index 4d4d48be159..4c7c7086b8d 100644 --- a/src/app/pages/receive/receive-modal.tsx +++ b/src/app/pages/receive/receive-modal.tsx @@ -11,11 +11,11 @@ import { useAnalytics } from '@app/common/hooks/analytics/use-analytics'; import { useClipboard } from '@app/common/hooks/use-copy-to-clipboard'; import { useLocationState } from '@app/common/hooks/use-location-state'; import { StxAvatar } from '@app/components/crypto-assets/stacks/components/stx-avatar'; -import { BaseDrawer } from '@app/components/drawer/base-drawer'; 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 { useCurrentAccountStxAddressState } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks'; +import { BaseDrawer } from '@app/ui/components/containers/drawer/base-drawer'; import { BtcIcon } from '@app/ui/components/icons/btc-icon'; import { OrdinalIcon } from '@app/ui/components/icons/ordinal-icon'; import { StampsIcon } from '@app/ui/components/icons/stamps-icon'; @@ -65,87 +65,90 @@ export function ReceiveModal({ type = 'full' }: ReceiveModalProps) { ); + console.log('receive modal base drawer', title); + return ( - <> - navigate(backgroundLocation ?? '..')}> - - - {title} - - {type === 'full' && ( - - } - dataTestId={HomePageSelectors.ReceiveBtcNativeSegwitQrCodeBtn} - onCopyAddress={() => copyToClipboard(onCopyBtc)} - onClickQrCode={() => - navigate(`${RouteUrls.Home}${RouteUrls.ReceiveBtc}`, { - state: { backgroundLocation }, - }) - } - title="Bitcoin" - /> - } - dataTestId={HomePageSelectors.ReceiveStxQrCodeBtn} - onCopyAddress={() => copyToClipboard(onCopyStx)} - onClickQrCode={() => - navigate(`${RouteUrls.Home}${RouteUrls.ReceiveStx}`, { - state: { backgroundLocation, btcAddressTaproot }, - }) - } - title="Stacks" - /> - - )} - - } - dataTestId={HomePageSelectors.ReceiveBtcTaprootQrCodeBtn} - onCopyAddress={() => - copyToClipboard(onCopyOrdinal, 'select_stamp_to_add_new_collectible') - } - onClickQrCode={() => { - void analytics.track('select_inscription_to_add_new_collectible'); - navigate(`${RouteUrls.Home}${RouteUrls.ReceiveCollectibleOrdinal}`, { - state: { - btcAddressTaproot, - backgroundLocation, - }, - }); - }} - title="Ordinal inscription" - /> + + {title} + + } + isShowing + onClose={() => navigate(backgroundLocation ?? '..')} + > + + {type === 'full' && ( + } + icon={} + dataTestId={HomePageSelectors.ReceiveBtcNativeSegwitQrCodeBtn} + onCopyAddress={() => copyToClipboard(onCopyBtc)} onClickQrCode={() => - navigate(`${RouteUrls.Home}${RouteUrls.ReceiveBtcStamp}`, { + navigate(`${RouteUrls.Home}${RouteUrls.ReceiveBtc}`, { state: { backgroundLocation }, }) } - onCopyAddress={() => - copyToClipboard(onCopyBtc, 'select_stamp_to_add_new_collectible') - } - title="Bitcoin Stamp" + title="Bitcoin" /> } - onCopyAddress={() => copyToClipboard(onCopyStx, 'select_nft_to_add_new_collectible')} + dataTestId={HomePageSelectors.ReceiveStxQrCodeBtn} + onCopyAddress={() => copyToClipboard(onCopyStx)} onClickQrCode={() => navigate(`${RouteUrls.Home}${RouteUrls.ReceiveStx}`, { - state: { backgroundLocation }, + state: { backgroundLocation, btcAddressTaproot }, }) } - title="Stacks NFT" + title="Stacks" /> - - - + )} + + } + dataTestId={HomePageSelectors.ReceiveBtcTaprootQrCodeBtn} + onCopyAddress={() => + copyToClipboard(onCopyOrdinal, 'select_stamp_to_add_new_collectible') + } + onClickQrCode={() => { + void analytics.track('select_inscription_to_add_new_collectible'); + navigate(`${RouteUrls.Home}${RouteUrls.ReceiveCollectibleOrdinal}`, { + state: { + btcAddressTaproot, + backgroundLocation, + }, + }); + }} + title="Ordinal inscription" + /> + } + onClickQrCode={() => + navigate(`${RouteUrls.Home}${RouteUrls.ReceiveBtcStamp}`, { + state: { backgroundLocation }, + }) + } + onCopyAddress={() => copyToClipboard(onCopyBtc, 'select_stamp_to_add_new_collectible')} + title="Bitcoin Stamp" + /> + } + onCopyAddress={() => copyToClipboard(onCopyStx, 'select_nft_to_add_new_collectible')} + onClickQrCode={() => + navigate(`${RouteUrls.Home}${RouteUrls.ReceiveStx}`, { + state: { backgroundLocation }, + }) + } + title="Stacks NFT" + /> + + + ); } diff --git a/src/app/pages/select-network/select-network.tsx b/src/app/pages/select-network/select-network.tsx index 270036a87a9..1eee14533e4 100644 --- a/src/app/pages/select-network/select-network.tsx +++ b/src/app/pages/select-network/select-network.tsx @@ -5,12 +5,12 @@ import { RouteUrls } from '@shared/route-urls'; import { useAnalytics } from '@app/common/hooks/analytics/use-analytics'; import { useLocationState } from '@app/common/hooks/use-location-state'; -import { BaseDrawer } from '@app/components/drawer/base-drawer'; import { NetworkListLayout } from '@app/pages/select-network/components/network-list.layout'; import { NetworkListItem } from '@app/pages/select-network/network-list-item'; import { useBackgroundLocationRedirect } from '@app/routes/hooks/use-background-location-redirect'; import { useCurrentNetworkState, useNetworksActions } from '@app/store/networks/networks.hooks'; import { useNetworks } from '@app/store/networks/networks.selectors'; +import { BaseDrawer } from '@app/ui/components/containers/drawer/base-drawer'; import { AddNetworkButton } from './components/add-network-button'; 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 7167b26ea96..eb3145189d4 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 @@ -11,9 +11,9 @@ import { Brc20TokensLoader } from '@app/components/brc20-tokens-loader'; import { Brc20TokenAssetList } from '@app/components/crypto-assets/bitcoin/brc20-token-asset-list/brc20-token-asset-list'; import { ChooseCryptoAssetLayout } from '@app/components/crypto-assets/choose-crypto-asset/choose-crypto-asset.layout'; import { CryptoAssetList } from '@app/components/crypto-assets/choose-crypto-asset/crypto-asset-list'; -import { ModalHeader } from '@app/components/modal-header'; import { useConfigBitcoinSendEnabled } from '@app/query/common/remote-config/remote-config.query'; import { useCheckLedgerBlockchainAvailable } from '@app/store/accounts/blockchain/utils'; +import { ModalHeader } from '@app/ui/components/containers/headers/modal-header'; export function ChooseCryptoAsset() { const allTransferableCryptoAssetBalances = useAllTransferableCryptoAssetBalances(); @@ -24,7 +24,7 @@ export function ChooseCryptoAsset() { const checkBlockchainAvailable = useCheckLedgerBlockchainAvailable(); - useRouteHeader(); + useRouteHeader(); function navigateToSendForm(cryptoAssetBalance: AllTransferableCryptoAssetBalances) { const { asset } = cryptoAssetBalance; diff --git a/src/app/pages/send/locked-bitcoin-summary/locked-bitcoin-summary.tsx b/src/app/pages/send/locked-bitcoin-summary/locked-bitcoin-summary.tsx index 01b7a04145a..3d190279af4 100644 --- a/src/app/pages/send/locked-bitcoin-summary/locked-bitcoin-summary.tsx +++ b/src/app/pages/send/locked-bitcoin-summary/locked-bitcoin-summary.tsx @@ -14,7 +14,7 @@ import { InfoCardBtn, InfoCardFooter, } from '@app/components/info-card/info-card'; -import { ModalHeader } from '@app/components/modal-header'; +import { ModalHeader } from '@app/ui/components/containers/headers/modal-header'; import { CheckmarkIcon } from '@app/ui/components/icons/checkmark-icon'; import { CopyIcon } from '@app/ui/components/icons/copy-icon'; import { ExternalLinkIcon } from '@app/ui/components/icons/external-link-icon'; @@ -38,7 +38,7 @@ export function LockBitcoinSummary() { toast.success('ID copied!'); } - useRouteHeader(); + useRouteHeader(); return ( 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 9b90eb08bed..c5979adeb2c 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 @@ -8,10 +8,10 @@ import { BitcoinFeesList, OnChooseFeeArgs, } from '@app/components/bitcoin-fees-list/bitcoin-fees-list'; -import { BaseDrawer } from '@app/components/drawer/base-drawer'; 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 { BaseDrawer } from '@app/ui/components/containers/drawer/base-drawer'; 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 27097f7f214..1a34a7c0682 100644 --- a/src/app/pages/send/ordinal-inscription/send-inscription-form.tsx +++ b/src/app/pages/send/ordinal-inscription/send-inscription-form.tsx @@ -5,11 +5,11 @@ import { Box, Flex } from 'leather-styles/jsx'; import { RouteUrls } from '@shared/route-urls'; -import { BaseDrawer } from '@app/components/drawer/base-drawer'; 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 { LeatherButton } from '@app/ui/components/button'; +import { BaseDrawer } from '@app/ui/components/containers/drawer/base-drawer'; import { OrdinalIcon } from '@app/ui/components/icons/ordinal-icon'; import { RecipientField } from '../send-crypto-asset-form/components/recipient-field'; 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 2ff7ac6dc4c..7e063161c8e 100644 --- a/src/app/pages/send/ordinal-inscription/send-inscription-review.tsx +++ b/src/app/pages/send/ordinal-inscription/send-inscription-review.tsx @@ -8,13 +8,13 @@ import { RouteUrls } from '@shared/route-urls'; import { useAnalytics } from '@app/common/hooks/analytics/use-analytics'; import { FormAddressDisplayer } from '@app/components/address-displayer/form-address-displayer'; -import { BaseDrawer } from '@app/components/drawer/base-drawer'; import { InfoCard, InfoCardRow, InfoCardSeparator } from '@app/components/info-card/info-card'; import { InscriptionPreview } from '@app/components/inscription-preview-card/components/inscription-preview'; 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 { LeatherButton } from '@app/ui/components/button'; +import { BaseDrawer } from '@app/ui/components/containers/drawer/base-drawer'; import { InscriptionPreviewCard } from '../../../components/inscription-preview-card/inscription-preview-card'; import { useBitcoinBroadcastTransaction } from '../../../query/bitcoin/transaction/use-bitcoin-broadcast-transaction'; 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 282cb834094..f77500eba34 100644 --- a/src/app/pages/send/ordinal-inscription/sent-inscription-summary.tsx +++ b/src/app/pages/send/ordinal-inscription/sent-inscription-summary.tsx @@ -12,7 +12,6 @@ import { useAnalytics } from '@app/common/hooks/analytics/use-analytics'; import { useBitcoinExplorerLink } from '@app/common/hooks/use-bitcoin-explorer-link'; import { useClipboard } from '@app/common/hooks/use-copy-to-clipboard'; import { FormAddressDisplayer } from '@app/components/address-displayer/form-address-displayer'; -import { BaseDrawer } from '@app/components/drawer/base-drawer'; import { InfoCard, InfoCardBtn, @@ -20,6 +19,7 @@ import { InfoCardSeparator, } from '@app/components/info-card/info-card'; import { InscriptionPreview } from '@app/components/inscription-preview-card/components/inscription-preview'; +import { BaseDrawer } from '@app/ui/components/containers/drawer/base-drawer'; import { CheckmarkIcon } from '@app/ui/components/icons/checkmark-icon'; import { CopyIcon } from '@app/ui/components/icons/copy-icon'; import { ExternalLinkIcon } from '@app/ui/components/icons/external-link-icon'; diff --git a/src/app/pages/send/send-container.tsx b/src/app/pages/send/send-container.tsx index 03a7483f92c..e1fa2346b0e 100644 --- a/src/app/pages/send/send-container.tsx +++ b/src/app/pages/send/send-container.tsx @@ -4,10 +4,10 @@ import { Flex } from 'leather-styles/jsx'; import { useRouteHeader } from '@app/common/hooks/use-route-header'; import { whenPageMode } from '@app/common/utils'; -import { ModalHeader } from '@app/components/modal-header'; +import { ModalHeader } from '@app/ui/components/containers/headers/modal-header'; export function SendContainer() { - useRouteHeader(, true); + useRouteHeader(, true); return whenPageMode({ full: ( diff --git a/src/app/pages/send/send-crypto-asset-form/components/recipient-accounts-drawer/recipient-accounts-drawer.tsx b/src/app/pages/send/send-crypto-asset-form/components/recipient-accounts-drawer/recipient-accounts-drawer.tsx index 0972c44c5bf..ba0b9a91869 100644 --- a/src/app/pages/send/send-crypto-asset-form/components/recipient-accounts-drawer/recipient-accounts-drawer.tsx +++ b/src/app/pages/send/send-crypto-asset-form/components/recipient-accounts-drawer/recipient-accounts-drawer.tsx @@ -4,9 +4,9 @@ import { Virtuoso } from 'react-virtuoso'; import { Box } from 'leather-styles/jsx'; -import { BaseDrawer } from '@app/components/drawer/base-drawer'; import { useFilteredBitcoinAccounts } from '@app/store/accounts/blockchain/bitcoin/bitcoin.ledger'; import { useStacksAccounts } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks'; +import { BaseDrawer } from '@app/ui/components/containers/drawer/base-drawer'; import { AccountListItem } from './account-list-item'; diff --git a/src/app/pages/send/send-crypto-asset-form/form/brc-20/brc-20-choose-fee.tsx b/src/app/pages/send/send-crypto-asset-form/form/brc-20/brc-20-choose-fee.tsx index 016faad82a3..a208a94d725 100644 --- a/src/app/pages/send/send-crypto-asset-form/form/brc-20/brc-20-choose-fee.tsx +++ b/src/app/pages/send/send-crypto-asset-form/form/brc-20/brc-20-choose-fee.tsx @@ -20,12 +20,12 @@ import { } from '@app/components/bitcoin-fees-list/bitcoin-fees-list'; import { useBitcoinFeesList } from '@app/components/bitcoin-fees-list/use-bitcoin-fees-list'; import { LoadingSpinner } from '@app/components/loading-spinner'; -import { ModalHeader } from '@app/components/modal-header'; 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 { UtxoResponseItem } from '@app/query/bitcoin/bitcoin-client'; import { useBrc20Transfers } from '@app/query/bitcoin/ordinals/brc20/use-brc-20'; import { useSignBitcoinTx } from '@app/store/accounts/blockchain/bitcoin/bitcoin.hooks'; +import { ModalHeader } from '@app/ui/components/containers/headers/modal-header'; import { useSendBitcoinAssetContextState } from '../../family/bitcoin/components/send-bitcoin-asset-container'; @@ -118,7 +118,7 @@ export function BrcChooseFee() { navigate(-1); } - useRouteHeader(); + useRouteHeader(); return isLoadingOrder ? ( ); + useRouteHeader(); return ( 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 6277b2b8004..eb14b13e831 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 @@ -7,10 +7,10 @@ import { useLocationStateWithCache } from '@app/common/hooks/use-location-state' import { useRouteHeader } from '@app/common/hooks/use-route-header'; import { BitcoinFeesList } from '@app/components/bitcoin-fees-list/bitcoin-fees-list'; import { useBitcoinFeesList } from '@app/components/bitcoin-fees-list/use-bitcoin-fees-list'; -import { ModalHeader } from '@app/components/modal-header'; 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 { UtxoResponseItem } from '@app/query/bitcoin/bitcoin-client'; +import { ModalHeader } from '@app/ui/components/containers/headers/modal-header'; import { useSendBitcoinAssetContextState } from '../../family/bitcoin/components/send-bitcoin-asset-container'; import { useBtcChooseFee } from './use-btc-choose-fee'; @@ -40,7 +40,7 @@ export function BtcChooseFee() { isSendingMax ); - useRouteHeader(); + useRouteHeader(); return ( <> 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 a26e1e8b649..49cb6c93191 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 @@ -25,11 +25,11 @@ import { InfoCardRow, InfoCardSeparator, } from '@app/components/info-card/info-card'; -import { ModalHeader } from '@app/components/modal-header'; import { useCurrentNativeSegwitUtxos } from '@app/query/bitcoin/address/utxos-by-address.hooks'; import { useBitcoinBroadcastTransaction } from '@app/query/bitcoin/transaction/use-bitcoin-broadcast-transaction'; import { useCryptoCurrencyMarketData } from '@app/query/common/market-data/market-data.hooks'; import { LeatherButton } from '@app/ui/components/button'; +import { ModalHeader } from '@app/ui/components/containers/headers/modal-header'; import { useSendFormNavigate } from '../../hooks/use-send-form-navigate'; @@ -124,7 +124,7 @@ export function BtcSendFormConfirmation() { }; } - useRouteHeader(); + useRouteHeader(); return ( 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 6cf07846e5d..b8d5c23bf86 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 @@ -6,8 +6,8 @@ import { CryptoCurrencies } from '@shared/models/currencies.model'; import { useLocationStateWithCache } from '@app/common/hooks/use-location-state'; import { useRouteHeader } from '@app/common/hooks/use-route-header'; -import { ModalHeader } from '@app/components/modal-header'; import { Tooltip } from '@app/components/tooltip'; +import { ModalHeader } from '@app/ui/components/containers/headers/modal-header'; import { InfoIcon } from '@app/ui/components/icons/info-icon'; import { useStacksBroadcastTransaction } from '../../family/stacks/hooks/use-stacks-broadcast-transaction'; @@ -48,7 +48,6 @@ export function StacksSendFormConfirmation() { useRouteHeader( navigate('../', { relative: 'path', replace: true })} title="Review" diff --git a/src/app/pages/send/sent-summary/brc20-sent-summary.tsx b/src/app/pages/send/sent-summary/brc20-sent-summary.tsx index ae28aac03ee..6c6a3ad8c86 100644 --- a/src/app/pages/send/sent-summary/brc20-sent-summary.tsx +++ b/src/app/pages/send/sent-summary/brc20-sent-summary.tsx @@ -18,8 +18,8 @@ import { InfoCardSeparator, } from '@app/components/info-card/info-card'; import { InfoLabel } from '@app/components/info-label'; -import { ModalHeader } from '@app/components/modal-header'; import { LeatherButton } from '@app/ui/components/button'; +import { ModalHeader } from '@app/ui/components/containers/headers/modal-header'; import { ExternalLinkIcon } from '@app/ui/components/icons/external-link-icon'; import { TxDone } from '../send-crypto-asset-form/components/tx-done'; @@ -47,7 +47,7 @@ export function Brc20SentSummary() { navigate('/'); } - useRouteHeader(); + useRouteHeader(); return ( 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 6a20e2ea557..ebfbd8e709b 100644 --- a/src/app/pages/send/sent-summary/btc-sent-summary.tsx +++ b/src/app/pages/send/sent-summary/btc-sent-summary.tsx @@ -16,7 +16,7 @@ import { InfoCardRow, InfoCardSeparator, } from '@app/components/info-card/info-card'; -import { ModalHeader } from '@app/components/modal-header'; +import { ModalHeader } from '@app/ui/components/containers/headers/modal-header'; import { CopyIcon } from '@app/ui/components/icons/copy-icon'; import { ExternalLinkIcon } from '@app/ui/components/icons/external-link-icon'; @@ -53,7 +53,7 @@ export function BtcSentSummary() { toast.success('ID copied!'); } - useRouteHeader(); + useRouteHeader(); return ( 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 69dd84ed698..71c6f334e88 100644 --- a/src/app/pages/send/sent-summary/stx-sent-summary.tsx +++ b/src/app/pages/send/sent-summary/stx-sent-summary.tsx @@ -17,7 +17,7 @@ import { InfoCardRow, InfoCardSeparator, } from '@app/components/info-card/info-card'; -import { ModalHeader } from '@app/components/modal-header'; +import { ModalHeader } from '@app/ui/components/containers/headers/modal-header'; import { CopyIcon } from '@app/ui/components/icons/copy-icon'; import { ExternalLinkIcon } from '@app/ui/components/icons/external-link-icon'; @@ -54,7 +54,7 @@ export function StxSentSummary() { toast.success('ID copied!'); } - useRouteHeader(); + useRouteHeader(); return ( - + + onUserSafelyReturnToHomepage()} + > + Cancel + + + Sign out + + + } + > + {/* #4370 TODO make the basedrawer do this automatically for all content */} +
When you sign out, @@ -82,29 +110,8 @@ export function SignOutConfirmLayout(props: SignOutConfirmLayoutProps) { I understand my password will no longer work for accessing my wallet upon signing out - - onUserSafelyReturnToHomepage()} - > - Cancel - - - Sign out - -
- + ); } diff --git a/src/app/pages/swap/swap-choose-asset/swap-choose-asset.tsx b/src/app/pages/swap/swap-choose-asset/swap-choose-asset.tsx index d095c762849..3b7a7568e9d 100644 --- a/src/app/pages/swap/swap-choose-asset/swap-choose-asset.tsx +++ b/src/app/pages/swap/swap-choose-asset/swap-choose-asset.tsx @@ -4,7 +4,7 @@ import { SwapSelectors } from '@tests/selectors/swap.selectors'; import { Box, styled } from 'leather-styles/jsx'; import get from 'lodash.get'; -import { BaseDrawer } from '@app/components/drawer/base-drawer'; +import { BaseDrawer } from '@app/ui/components/containers/drawer/base-drawer'; import { useSwapContext } from '../swap.context'; import { SwapAssetList } from './components/swap-asset-list'; @@ -37,7 +37,7 @@ export function SwapChooseAsset() { ); return ( - navigate(-1)}> + navigate(-1)}> {title} diff --git a/src/app/pages/swap/swap-review/swap-review.tsx b/src/app/pages/swap/swap-review/swap-review.tsx index 54306d04e0f..bb3816cd8b8 100644 --- a/src/app/pages/swap/swap-review/swap-review.tsx +++ b/src/app/pages/swap/swap-review/swap-review.tsx @@ -4,8 +4,8 @@ import { SwapSelectors } from '@tests/selectors/swap.selectors'; import { LoadingKeys, useLoading } from '@app/common/hooks/use-loading'; import { useRouteHeader } from '@app/common/hooks/use-route-header'; -import { ModalHeader } from '@app/components/modal-header'; import { LeatherButton } from '@app/ui/components/button'; +import { ModalHeader } from '@app/ui/components/containers/headers/modal-header'; import { SwapAssetsPair } from '../components/swap-assets-pair/swap-assets-pair'; import { SwapContentLayout } from '../components/swap-content.layout'; @@ -18,7 +18,7 @@ export function SwapReview() { const { onSubmitSwap } = useSwapContext(); const { isLoading } = useLoading(LoadingKeys.SUBMIT_SWAP_TRANSACTION); - useRouteHeader(, true); + useRouteHeader(, true); return ( <> diff --git a/src/app/pages/swap/swap.tsx b/src/app/pages/swap/swap.tsx index 81c86719649..512beafdde3 100644 --- a/src/app/pages/swap/swap.tsx +++ b/src/app/pages/swap/swap.tsx @@ -8,8 +8,8 @@ import { isUndefined } from '@shared/utils'; import { useRouteHeader } from '@app/common/hooks/use-route-header'; import { LoadingSpinner } from '@app/components/loading-spinner'; -import { ModalHeader } from '@app/components/modal-header'; import { LeatherButton } from '@app/ui/components/button'; +import { ModalHeader } from '@app/ui/components/containers/headers/modal-header'; import { SwapContentLayout } from './components/swap-content.layout'; import { SwapFooterLayout } from './components/swap-footer.layout'; @@ -21,7 +21,7 @@ export function Swap() { const { isFetchingExchangeRate, swappableAssetsFrom } = useSwapContext(); const { dirty, isValid, setFieldValue, values } = useFormikContext(); - useRouteHeader(, true); + useRouteHeader(, true); useAsync(async () => { if (isUndefined(values.swapAssetFrom)) diff --git a/src/app/pages/unlock.tsx b/src/app/pages/unlock.tsx index 85b5bc7127e..9c6ebb67fd6 100644 --- a/src/app/pages/unlock.tsx +++ b/src/app/pages/unlock.tsx @@ -10,9 +10,9 @@ import { closeWindow } from '@shared/utils'; import { useRouteHeader } from '@app/common/hooks/use-route-header'; import { isFullPageMode, isPopupMode } from '@app/common/utils'; import { openIndexPageInNewTab } from '@app/common/utils/open-in-new-tab'; -import { Header } from '@app/components/header'; import { RequestPassword } from '@app/components/request-password'; import { useNewBrandApprover } from '@app/store/settings/settings.selectors'; +import { Header } from '@app/ui/components/containers/headers/header'; export function Unlock() { const navigate = useNavigate(); 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 5921326d62b..4f6921c4cee 100644 --- a/src/app/pages/view-secret-key/view-secret-key.tsx +++ b/src/app/pages/view-secret-key/view-secret-key.tsx @@ -5,11 +5,11 @@ import { RouteUrls } from '@shared/route-urls'; import { useAnalytics } from '@app/common/hooks/analytics/use-analytics'; import { useRouteHeader } from '@app/common/hooks/use-route-header'; -import { Header } from '@app/components/header'; import { RequestPassword } from '@app/components/request-password'; import { TwoColumnLayout } from '@app/components/secret-key/two-column.layout'; import { SecretKeyDisplayer } from '@app/features/secret-key-displayer/secret-key-displayer'; import { useDefaultWalletSecretKey } from '@app/store/in-memory-key/in-memory-key.selectors'; +import { Header } from '@app/ui/components/containers/headers/header'; import { ViewSecretKeyContent } from './components/view-secret-key.content'; diff --git a/src/app/features/container/container.layout.tsx b/src/app/ui/components/containers/container.layout.tsx similarity index 99% rename from src/app/features/container/container.layout.tsx rename to src/app/ui/components/containers/container.layout.tsx index a3c5e99e9b8..dcc34e98cc2 100644 --- a/src/app/features/container/container.layout.tsx +++ b/src/app/ui/components/containers/container.layout.tsx @@ -6,7 +6,6 @@ interface ContainerLayoutProps { } export function ContainerLayout(props: ContainerLayoutProps) { const { children, header } = props; - return ( {header || null} diff --git a/src/app/ui/components/containers/drawer/base-drawer.tsx b/src/app/ui/components/containers/drawer/base-drawer.tsx new file mode 100644 index 00000000000..01ba6bdce9c --- /dev/null +++ b/src/app/ui/components/containers/drawer/base-drawer.tsx @@ -0,0 +1,156 @@ +// TODO - not sure why we call this a drawer when it's a modal +// 4370 TODO - can investigate swapping this for radix dialog and using modal true / false +import { ReactNode, Suspense, memo, useEffect } from 'react'; +import { useNavigate } from 'react-router-dom'; + +import { Box, Flex, FlexProps } from 'leather-styles/jsx'; + +import { noop } from '@shared/utils'; + +import { useViewportMinWidth } from '@app/common/hooks/use-media-query'; + +import { Footer } from '../footers/footer'; +import { DrawerHeader } from '../headers/drawer-header'; +import { Modal } from '../modal/modal'; +import { useDrawer } from './hooks/use-drawer'; +import { ModalWrapper } from './modal-wrapper'; + +interface BaseDrawerProps extends Omit { + children?: ReactNode; + enableGoBack?: boolean; + footer?: ReactNode; + isShowing: boolean; + isWaitingOnPerformedAction?: boolean; + onClose?(): void; + pauseOnClickOutside?: boolean; + title?: ReactNode; + waitingOnPerformedActionMessage?: string; +} +export const BaseDrawer = memo( + ({ + children, + enableGoBack, + footer, + isShowing, + isWaitingOnPerformedAction, + onClose, + pauseOnClickOutside, + title, + waitingOnPerformedActionMessage, + }: BaseDrawerProps) => { + const ref = useDrawer(isShowing, onClose ? onClose : noop, pauseOnClickOutside); + const navigate = useNavigate(); + + const isAtleastBreakpointMd = useViewportMinWidth('md'); + const onGoBack = () => navigate(-1); + + // debugger; + // flashing has to be something to do with height, maybe the one I set undefined? + // - see in this debugger it renders a larger drawer then reduces the size + + // TODO investigate useScrollLock + // useScrollLock works but somehow messes up display of modal? + // useScrollLock(true); + + // PETE - stop now and return to fix this + // - need overlay to be full height in modal + // - need to block BG scroll + + // sometimes this adds an un-necessary scrollbar + useEffect(() => { + document.body.style.overflowY = 'hidden'; + return () => { + document.body.style.overflowY = 'auto'; + }; + }, []); + + // console.log('typeof title', title, typeof title); + // if (!isShowing) return null; + + return ( + + } + onClose={onClose} + footer={footer ?
{footer}
: undefined} + > + {children} + + ); + + // TODO - clean up this isAtleastBreakpointMd logic + return ( + + + {/* TODO check what this Box did / does - nothing I think as receive + select account OK */} + + {/* // FIXME this should be passed in as a slot like Footer */} + + {/* TODO check if this flex is even needed + try add padding from sign-out-confirm here to make it consistent + */} + + }>{children} + + {/* {children} */} + {footer &&
{footer}
} + + + + ); + } +); diff --git a/src/app/components/drawer/components/header-action-button.tsx b/src/app/ui/components/containers/drawer/components/header-action-button.tsx similarity index 100% rename from src/app/components/drawer/components/header-action-button.tsx rename to src/app/ui/components/containers/drawer/components/header-action-button.tsx diff --git a/src/app/ui/components/containers/drawer/hooks/use-drawer.tsx b/src/app/ui/components/containers/drawer/hooks/use-drawer.tsx new file mode 100644 index 00000000000..1b61a281706 --- /dev/null +++ b/src/app/ui/components/containers/drawer/hooks/use-drawer.tsx @@ -0,0 +1,22 @@ +import { useCallback, useRef } from 'react'; + +import { useEventListener } from '@app/common/hooks/use-event-listener'; +import { useOnClickOutside } from '@app/common/hooks/use-onclickoutside'; + +export function useDrawer(isShowing: boolean, onClose: () => void, pause?: boolean) { + const ref = useRef(null); + + const handleKeyDown = useCallback( + (e: React.KeyboardEvent) => { + if (isShowing && e.key === 'Escape') { + onClose(); + } + }, + [onClose, isShowing] + ); + + useOnClickOutside(ref, !pause && isShowing ? onClose : null); + useEventListener('keydown', handleKeyDown); + + return ref; +} diff --git a/src/app/ui/components/containers/drawer/modal-wrapper.tsx b/src/app/ui/components/containers/drawer/modal-wrapper.tsx new file mode 100644 index 00000000000..652288a70b5 --- /dev/null +++ b/src/app/ui/components/containers/drawer/modal-wrapper.tsx @@ -0,0 +1,48 @@ +import { ReactNode, memo } from 'react'; + +import { Flex } from 'leather-styles/jsx'; + +// FIXME - !important - test POPUP view ! need to figure that out + +interface ModalWrapperProps { + children: ReactNode; // use HasChildren ? + isShowing: boolean; // TODO try refactor away this isShowing + isAtleastBreakpointMd: boolean; + title?: ReactNode; // hacky but get it working for now +} + +export const ModalWrapper = memo( + ({ children, isShowing, isAtleastBreakpointMd, title }: ModalWrapperProps) => { + console.log('isAtleastBreakpointMd isShowing', isAtleastBreakpointMd, isShowing, title); + return ( + + {children} + + ); + } +); diff --git a/src/app/ui/components/containers/footers/footer.tsx b/src/app/ui/components/containers/footers/footer.tsx new file mode 100644 index 00000000000..deea09f0942 --- /dev/null +++ b/src/app/ui/components/containers/footers/footer.tsx @@ -0,0 +1,29 @@ +import { ReactNode } from 'react'; + +import { Flex } from 'leather-styles/jsx'; + +interface FooterProps { + children: ReactNode; // tried HasChildren = Type 'HasChildren' is not assignable to type 'ReactNode'. +} +export function Footer({ children }: FooterProps) { + return ( + + {children} + + ); +} diff --git a/src/app/components/drawer/components/drawer-header.tsx b/src/app/ui/components/containers/headers/drawer-header.tsx similarity index 61% rename from src/app/components/drawer/components/drawer-header.tsx rename to src/app/ui/components/containers/headers/drawer-header.tsx index 51defb91ac9..a0e55a0776e 100644 --- a/src/app/components/drawer/components/drawer-header.tsx +++ b/src/app/ui/components/containers/headers/drawer-header.tsx @@ -1,18 +1,21 @@ +import { ReactNode } from 'react'; + import { Box, Flex, styled } from 'leather-styles/jsx'; import { useHover } from 'use-events'; import { ArrowLeftIcon } from '@app/ui/components/icons/arrow-left-icon'; import { CloseIcon } from '@app/ui/components/icons/close-icon'; -import { HeaderActionButton } from './header-action-button'; +import { HeaderActionButton } from '../drawer/components/header-action-button'; +// TODO assess this also interface DrawerHeaderProps { enableGoBack?: boolean; icon?: React.JSX.Element; isWaitingOnPerformedAction?: boolean; onClose?(): void; onGoBack(): void; - title?: string; + title?: ReactNode; waitingOnPerformedActionMessage?: string; } export function DrawerHeader({ @@ -25,20 +28,27 @@ export function DrawerHeader({ waitingOnPerformedActionMessage, }: DrawerHeaderProps) { const [isHovered, bind] = useHover(); - + console.log('DrawerHeader', title); return ( - {enableGoBack ? ( - } - isWaitingOnPerformedAction={isWaitingOnPerformedAction} - onAction={onGoBack} - /> + { + enableGoBack ? ( + } + isWaitingOnPerformedAction={isWaitingOnPerformedAction} + onAction={onGoBack} + /> + ) : typeof title === 'string' ? ( + + ) : null // FIXME - get rid of this without shifting title left + } + {icon && icon} + {/* TODO clean this up and make titles consistent */} + {title && typeof title === 'string' ? ( + {title} ) : ( - + title )} - {icon && icon} - {title && {title}} {isHovered && isWaitingOnPerformedAction && ( {waitingOnPerformedActionMessage} diff --git a/src/app/components/header.tsx b/src/app/ui/components/containers/headers/header.tsx similarity index 69% rename from src/app/components/header.tsx rename to src/app/ui/components/containers/headers/header.tsx index c989663cc83..8ca0be8982a 100644 --- a/src/app/components/header.tsx +++ b/src/app/ui/components/containers/headers/header.tsx @@ -1,4 +1,3 @@ -import { useMemo } from 'react'; import { useLocation, useNavigate } from 'react-router-dom'; import { OnboardingSelectors } from '@tests/selectors/onboarding.selectors'; @@ -9,49 +8,55 @@ import { RouteUrls } from '@shared/route-urls'; import { useDrawers } from '@app/common/hooks/use-drawers'; import { useViewportMinWidth } from '@app/common/hooks/use-media-query'; -import { LeatherLogo } from '@app/components/leather-logo'; import { NetworkModeBadge } from '@app/components/network-mode-badge'; import { LeatherButton } from '@app/ui/components/button'; +import { LeatherLogo } from '@app/ui/components/containers/leather-logo'; import { ArrowLeftIcon } from '@app/ui/components/icons/arrow-left-icon'; import { HamburgerIcon } from '@app/ui/components/icons/hamburger-icon'; -import { AppVersion } from './app-version'; +import { AppVersion } from '../../../../components/app-version'; +function isSettingsClickable(pathname: RouteUrls) { + return ( + pathname !== RouteUrls.RequestDiagnostics && + pathname !== RouteUrls.Onboarding && + pathname !== RouteUrls.BackUpSecretKey && + pathname !== RouteUrls.SetPassword && + pathname !== RouteUrls.SignIn + ); +} + +function isLeatherLogoClickable(pathname: RouteUrls) { + return ( + isSettingsClickable(pathname) && pathname !== RouteUrls.Home // should be able to click logo on home + ); +} + +// Seems important. This is the main home header interface HeaderProps extends FlexProps { - actionButton?: React.JSX.Element; - hideActions?: boolean; onClose?(): void; title?: string; } export function Header(props: HeaderProps) { - const { actionButton, hideActions, onClose, title, ...rest } = props; + const { onClose, title } = props; const { isShowingSettings, setIsShowingSettings } = useDrawers(); const { pathname } = useLocation(); const navigate = useNavigate(); const isBreakpointSm = useViewportMinWidth('sm'); - const leatherLogoIsClickable = useMemo(() => { - return ( - pathname !== RouteUrls.RequestDiagnostics && - pathname !== RouteUrls.Onboarding && - pathname !== RouteUrls.BackUpSecretKey && - pathname !== RouteUrls.SetPassword && - pathname !== RouteUrls.SignIn && - pathname !== RouteUrls.Home - ); - }, [pathname]); + const hideSettings = !isSettingsClickable(pathname as RouteUrls); return ( + {/* back button */} {onClose ? ( @@ -59,6 +64,8 @@ export function Header(props: HeaderProps) { ) : null} + + {/* Extension mode? */} {!title && (!onClose || isBreakpointSm) ? ( navigate(RouteUrls.Home) : undefined} + onClick={ + isLeatherLogoClickable(pathname as RouteUrls) + ? () => navigate(RouteUrls.Home) + : undefined + } /> @@ -83,7 +93,7 @@ export function Header(props: HeaderProps) { )} - {!hideActions && ( + {!hideSettings && ( setIsShowingSettings(!isShowingSettings)} @@ -92,7 +102,6 @@ export function Header(props: HeaderProps) { )} - {actionButton ? actionButton : null} ); diff --git a/src/app/components/modal-header.tsx b/src/app/ui/components/containers/headers/modal-header.tsx similarity index 73% rename from src/app/components/modal-header.tsx rename to src/app/ui/components/containers/headers/modal-header.tsx index f8d41c06aff..f33d6c96cf8 100644 --- a/src/app/components/modal-header.tsx +++ b/src/app/ui/components/containers/headers/modal-header.tsx @@ -2,7 +2,6 @@ import { useNavigate } from 'react-router-dom'; import { SharedComponentsSelectors } from '@tests/selectors/shared-component.selectors'; import { Box, Flex, styled } from 'leather-styles/jsx'; -import { token } from 'leather-styles/tokens'; import { RouteUrls } from '@shared/route-urls'; @@ -11,27 +10,22 @@ import { LeatherButton } from '@app/ui/components/button'; import { ArrowLeftIcon } from '@app/ui/components/icons/arrow-left-icon'; import { CloseIcon } from '@app/ui/components/icons/close-icon'; +// This is called ModalHeader but also gets shown on the Send flow which is a full page + interface ModalHeaderProps { - actionButton?: React.JSX.Element; - closeIcon?: boolean; - hideActions?: boolean; onClose?(): void; onGoBack?(): void; defaultClose?: boolean; defaultGoBack?: boolean; - title: string; + title?: string; } export function ModalHeader({ - actionButton, - hideActions, onClose, onGoBack, - closeIcon, title, defaultGoBack, defaultClose, - ...rest }: ModalHeaderProps) { const navigate = useNavigate(); @@ -43,15 +37,8 @@ export function ModalHeader({ } const hasCloseIcon = onClose || defaultClose; - return ( - + {onGoBack || defaultGoBack ? ( )} - - - {title} - - - + {title && ( + + + {title} + + + )} - {hasCloseIcon && ( + {!hasCloseIcon && ( diff --git a/src/app/components/leather-logo.tsx b/src/app/ui/components/containers/leather-logo.tsx similarity index 52% rename from src/app/components/leather-logo.tsx rename to src/app/ui/components/containers/leather-logo.tsx index 91c301f076f..59fce31512b 100644 --- a/src/app/components/leather-logo.tsx +++ b/src/app/ui/components/containers/leather-logo.tsx @@ -3,20 +3,14 @@ import { memo } from 'react'; import { LeatherButton } from '@app/ui/components/button'; import { LeatherIcon } from '@app/ui/components/icons/leather-icon'; -interface LeatherLogoProps { - isClickable: boolean; - onClick?(): void; -} -export const LeatherLogo = memo((props: LeatherLogoProps) => { - const { isClickable, onClick } = props; - +export const LeatherLogo = memo(({ onClick }: { onClick?: () => void }) => { return ( diff --git a/src/app/ui/components/containers/modal/modal.tsx b/src/app/ui/components/containers/modal/modal.tsx new file mode 100644 index 00000000000..f5c49b87bf2 --- /dev/null +++ b/src/app/ui/components/containers/modal/modal.tsx @@ -0,0 +1,53 @@ +import { ReactNode } from 'react'; + +import * as Dialog from '@radix-ui/react-dialog'; +import { css } from 'leather-styles/css'; + +interface ModalLayoutProps { + children: ReactNode; + title: ReactNode; + footer?: ReactNode; + onClose?(): void; // check as this always needs to be provided +} +export function Modal({ children, onClose, title, footer }: ModalLayoutProps) { + return ( + + + + + {/* Dialog.Title + Dialog.Close are for screen readers */} + + {title} + {children} + {footer} + + + + + + ); +} diff --git a/src/background/messaging/messaging-utils.ts b/src/background/messaging/messaging-utils.ts index c4dfac7bad3..e9422d73f56 100644 --- a/src/background/messaging/messaging-utils.ts +++ b/src/background/messaging/messaging-utils.ts @@ -2,7 +2,7 @@ import { InternalMethods } from '@shared/message-types'; import { sendMessage } from '@shared/messages'; import { RouteUrls } from '@shared/route-urls'; -import { popupCenter } from '@background/popup-center'; +import { popup } from '@background/popup'; export function getTabIdFromPort(port: chrome.runtime.Port) { return port.sender?.tab?.id ?? 0; @@ -67,5 +67,5 @@ const IS_TEST_ENV = process.env.TEST_ENV === 'true'; export async function triggerRequestWindowOpen(path: RouteUrls, urlParams: URLSearchParams) { if (IS_TEST_ENV) return openRequestInFullPage(path, urlParams); - return popupCenter({ url: `/popup-center.html#${path}?${urlParams.toString()}` }); + return popup({ url: `/popup.html#${path}?${urlParams.toString()}` }); } diff --git a/src/background/popup-center.ts b/src/background/popup.ts similarity index 94% rename from src/background/popup-center.ts rename to src/background/popup.ts index 5720a460c6f..c5a136f1f66 100644 --- a/src/background/popup-center.ts +++ b/src/background/popup.ts @@ -7,7 +7,7 @@ interface PopupOptions { h?: number; skipPopupFallback?: boolean; } -export function popupCenter(options: PopupOptions): Promise { +export function popup(options: PopupOptions): Promise { const { url, w = POPUP_CENTER_WIDTH, h = POPUP_CENTER_HEIGHT } = options; return new Promise(resolve => { diff --git a/src/shared/constants.ts b/src/shared/constants.ts index 8f8d7ce10cf..4913386be97 100644 --- a/src/shared/constants.ts +++ b/src/shared/constants.ts @@ -5,8 +5,9 @@ import { Blockchains } from './models/blockchain.model'; export const gaiaUrl = 'https://hub.blockstack.org'; -export const POPUP_CENTER_WIDTH = 442; -export const POPUP_CENTER_HEIGHT = 646; +// #4250 setting consistent dimensions of extension + popup to match mobile +export const POPUP_CENTER_WIDTH = 390; +export const POPUP_CENTER_HEIGHT = 756; export const HIGH_FEE_AMOUNT_STX = 5; export const HIGH_FEE_WARNING_LEARN_MORE_URL_BTC = 'https://bitcoinfees.earn.com/'; diff --git a/theme/global/global.ts b/theme/global/global.ts index 2095c51f17a..e41c6ec71e0 100644 --- a/theme/global/global.ts +++ b/theme/global/global.ts @@ -1,13 +1,18 @@ import { defineGlobalStyles } from '@pandacss/dev'; import { fullPageStyles } from './full-page-styles'; -import { popupCenterStyles } from './popup-center-styles'; import { popupStyles } from './popup-styles'; import { radixStyles, radixTabStyles } from './radix-styles'; import { tippyStyles } from './tippy-styles'; // ts-unused-exports:disable-next-line export const globalCss = defineGlobalStyles({ + // TODO: investigate cleaner solution + // this is needed to prevent BG scroll in extension view + // FIXME PETE - need to make sure scroll works in popout mode + html: { + overflow: 'hidden', + }, 'html, body': { backgroundColor: 'accent.background-primary', }, @@ -20,13 +25,14 @@ export const globalCss = defineGlobalStyles({ }, }, body: { + // scroll is needed here so homepage will be able to scroll in extension view + overflowY: 'auto', // TODO: investigate this adds an un-necessary scroll bar to popout mode '&.no-scroll, &.no-scroll .main-content': { overflow: 'hidden', }, }, ...fullPageStyles, ...popupStyles, - ...popupCenterStyles, ...tippyStyles, ...radixStyles, ...radixTabStyles, diff --git a/theme/global/popup-center-styles.ts b/theme/global/popup-center-styles.ts deleted file mode 100644 index d16d386c739..00000000000 --- a/theme/global/popup-center-styles.ts +++ /dev/null @@ -1,8 +0,0 @@ -export const popupCenterStyles = { - '.mode__popup-center': { - '&, body': { - height: '100%', - width: '100%', - }, - }, -}; diff --git a/theme/global/popup-styles.ts b/theme/global/popup-styles.ts index 26897cd7dd3..8c371601826 100644 --- a/theme/global/popup-styles.ts +++ b/theme/global/popup-styles.ts @@ -1,5 +1,9 @@ -const maxWidth = '392px'; -const maxHeight = '600px'; +// #4250 TODO seems to be a discrepancy between this and +// POPUP_CENTER_WIDTH / POPUP_CENTER_HEIGHT +import { POPUP_CENTER_HEIGHT, POPUP_CENTER_WIDTH } from '@shared/constants'; + +const maxWidth = `${POPUP_CENTER_WIDTH}px`; +const maxHeight = `${POPUP_CENTER_HEIGHT}px`; export const popupStyles = { '.mode__popup': { diff --git a/theme/global/radix-styles.ts b/theme/global/radix-styles.ts index 4685e2f953d..fce96f0d60f 100644 --- a/theme/global/radix-styles.ts +++ b/theme/global/radix-styles.ts @@ -101,4 +101,77 @@ export const radixTabStyles = { '.rt-TabsTrigger[data-state="active"]::before': { backgroundColor: 'accent.text-primary', }, + // #4250 TODO this removes bottom padding of Dialog.Root. + // if used refactor to move into it's own style obj + '.rt-DialogOverlay': { + paddingBottom: 0, + }, + // '.DialogOverlay' : { + // background-color: var(--black-a9); + // position: fixed; + // inset: 0; + // animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1); + // } }; + +// const radixDialog = { + +// .DialogOverlay { +// background-color: var(--black-a9); +// position: fixed; +// inset: 0; +// animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1); +// // } + +// .DialogContent { +// background-color: white; +// border-radius: 6px; +// box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px; +// position: fixed; +// top: 50%; +// left: 50%; +// transform: translate(-50%, -50%); +// width: 90vw; +// max-width: 450px; +// max-height: 85vh; +// padding: 25px; +// animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1); +// } +// .DialogContent:focus { +// outline: none; +// } + +// .DialogTitle { +// margin: 0; +// font-weight: 500; +// color: var(--mauve-12); +// font-size: 17px; +// } + +// .DialogDescription { +// margin: 10px 0 20px; +// color: var(--mauve-11); +// font-size: 15px; +// line-height: 1.5; +// } + +// @keyframes overlayShow { +// from { +// opacity: 0; +// } +// to { +// opacity: 1; +// } +// } + +// @keyframes contentShow { +// from { +// opacity: 0; +// transform: translate(-50%, -48%) scale(0.96); +// } +// to { +// opacity: 1; +// transform: translate(-50%, -50%) scale(1); +// } +// } +// } diff --git a/webpack/webpack.config.base.js b/webpack/webpack.config.base.js index 5bf12260d39..a15e4461365 100755 --- a/webpack/webpack.config.base.js +++ b/webpack/webpack.config.base.js @@ -202,11 +202,6 @@ const config = { filename: 'popup.html', ...HTML_PROD_OPTIONS, }), - new HtmlWebpackPlugin({ - template: path.join(SRC_ROOT_PATH, '../', 'public', 'html', 'popup-center.html'), - filename: 'popup-center.html', - ...HTML_PROD_OPTIONS, - }), new HtmlWebpackPlugin({ template: path.join(SRC_ROOT_PATH, '../', 'public', 'html', 'debug.html'), filename: 'debug.html', diff --git a/yarn.lock b/yarn.lock index 056bc2f8d7b..486f1cb1022 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2432,10 +2432,10 @@ resolved "https://registry.yarnpkg.com/@protobufjs/utf8/-/utf8-1.1.0.tgz#a777360b5b39a1a2e5106f8e858f2fd2d060c570" integrity sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw== -"@radix-ui/colors@2.1.0", "@radix-ui/colors@^2.1.0": - version "2.1.0" - resolved "https://registry.yarnpkg.com/@radix-ui/colors/-/colors-2.1.0.tgz#8aa6f233f68076a92c57db93d7235172e88fda44" - integrity sha512-gcBnxjS2u2c6thQz/9K1+Pt2ZYcm5WKU4SLi0emYkRmYbVUw+37rlc5wgLtYOsSsRP9nxVtbJJYj6WVO7UUmZg== +"@radix-ui/colors@3.0.0", "@radix-ui/colors@^3.0.0": + version "3.0.0" + resolved "https://registry.yarnpkg.com/@radix-ui/colors/-/colors-3.0.0.tgz#e8a591a303c44e503bd1212cacf40a09511165e0" + integrity sha512-FUOsGBkHrYJwCSEtWRCIfQbZG7q1e6DgxCIOe1SUQzDe/7rXXeA47s8yCn6fuTNQAj1Zq4oTFi9Yjp3wzElcxg== "@radix-ui/number@1.0.1": version "1.0.1" @@ -2459,7 +2459,7 @@ "@babel/runtime" "^7.13.10" "@radix-ui/react-visually-hidden" "1.0.3" -"@radix-ui/react-alert-dialog@^1.0.4": +"@radix-ui/react-alert-dialog@^1.0.5": version "1.0.5" resolved "https://registry.yarnpkg.com/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.0.5.tgz#70dd529cbf1e4bff386814d3776901fcaa131b8c" integrity sha512-OrVIOcZL0tl6xibeuGt5/+UxoT2N27KCFOPjFyfXMnchxSHZ/OW7cCX2nGlIYJrbHK/fczPcFzAwvNBB6XBNMA== @@ -2488,7 +2488,7 @@ "@babel/runtime" "^7.13.10" "@radix-ui/react-primitive" "1.0.3" -"@radix-ui/react-avatar@^1.0.3": +"@radix-ui/react-avatar@^1.0.4": version "1.0.4" resolved "https://registry.yarnpkg.com/@radix-ui/react-avatar/-/react-avatar-1.0.4.tgz#de9a5349d9e3de7bbe990334c4d2011acbbb9623" integrity sha512-kVK2K7ZD3wwj3qhle0ElXhOjbezIgyl2hVvgwfIdexL3rN6zJmy5AqqIf+D31lxVppdzV8CjAfZ6PklkmInZLw== @@ -2532,7 +2532,7 @@ dependencies: "@babel/runtime" "^7.13.10" -"@radix-ui/react-context-menu@^2.1.4": +"@radix-ui/react-context-menu@^2.1.5": version "2.1.5" resolved "https://registry.yarnpkg.com/@radix-ui/react-context-menu/-/react-context-menu-2.1.5.tgz#1bdbd72761439f9166f75dc4598f276265785c83" integrity sha512-R5XaDj06Xul1KGb+WP8qiOh7tKJNz2durpLBXAGZjSVtctcRFCuEvy2gtMwRJGePwQQE5nV77gs4FwRi8T+r2g== @@ -2552,7 +2552,7 @@ dependencies: "@babel/runtime" "^7.13.10" -"@radix-ui/react-dialog@1.0.5", "@radix-ui/react-dialog@^1.0.4": +"@radix-ui/react-dialog@1.0.5", "@radix-ui/react-dialog@^1.0.5": version "1.0.5" resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.0.5.tgz#71657b1b116de6c7a0b03242d7d43e01062c7300" integrity sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q== @@ -2580,18 +2580,6 @@ dependencies: "@babel/runtime" "^7.13.10" -"@radix-ui/react-dismissable-layer@1.0.4": - version "1.0.4" - resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.4.tgz#883a48f5f938fa679427aa17fcba70c5494c6978" - integrity sha512-7UpBa/RKMoHJYjie1gkF1DlK8l1fdU/VKDpoS3rCCo8YBJR294GwcEHyxHw72yvphJ7ld0AXEcSLAzY2F/WyCg== - dependencies: - "@babel/runtime" "^7.13.10" - "@radix-ui/primitive" "1.0.1" - "@radix-ui/react-compose-refs" "1.0.1" - "@radix-ui/react-primitive" "1.0.3" - "@radix-ui/react-use-callback-ref" "1.0.1" - "@radix-ui/react-use-escape-keydown" "1.0.3" - "@radix-ui/react-dismissable-layer@1.0.5": version "1.0.5" resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.5.tgz#3f98425b82b9068dfbab5db5fff3df6ebf48b9d4" @@ -2604,7 +2592,7 @@ "@radix-ui/react-use-callback-ref" "1.0.1" "@radix-ui/react-use-escape-keydown" "1.0.3" -"@radix-ui/react-dropdown-menu@^2.0.5": +"@radix-ui/react-dropdown-menu@^2.0.6": version "2.0.6" resolved "https://registry.yarnpkg.com/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.0.6.tgz#cdf13c956c5e263afe4e5f3587b3071a25755b63" integrity sha512-i6TuFOoWmLWq+M/eCLGd/bQ2HfAX1RJgvrBQ6AQLmzfvsLdefxbWu8G9zczcPFfcSPehz9GcpF6K9QYreFV8hA== @@ -2625,16 +2613,6 @@ dependencies: "@babel/runtime" "^7.13.10" -"@radix-ui/react-focus-scope@1.0.3": - version "1.0.3" - resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.3.tgz#9c2e8d4ed1189a1d419ee61edd5c1828726472f9" - integrity sha512-upXdPfqI4islj2CslyfUBNlaJCPybbqRHAi1KER7Isel9Q2AtSJ0zRBZv8mWQiFXD2nyAJ4BhC3yXgZ6kMBSrQ== - dependencies: - "@babel/runtime" "^7.13.10" - "@radix-ui/react-compose-refs" "1.0.1" - "@radix-ui/react-primitive" "1.0.3" - "@radix-ui/react-use-callback-ref" "1.0.1" - "@radix-ui/react-focus-scope@1.0.4": version "1.0.4" resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.4.tgz#2ac45fce8c5bb33eb18419cdc1905ef4f1906525" @@ -2658,7 +2636,7 @@ "@radix-ui/react-label" "2.0.2" "@radix-ui/react-primitive" "1.0.3" -"@radix-ui/react-hover-card@^1.0.6": +"@radix-ui/react-hover-card@^1.0.7": version "1.0.7" resolved "https://registry.yarnpkg.com/@radix-ui/react-hover-card/-/react-hover-card-1.0.7.tgz#684bca2504432566357e7157e087051aa3577948" integrity sha512-OcUN2FU0YpmajD/qkph3XzMcK/NmSk9hGWnjV68p6QiZMgILugusgQwnLSDs3oFSJYGKf3Y49zgFedhGh04k9A== @@ -2715,7 +2693,7 @@ aria-hidden "^1.1.1" react-remove-scroll "2.5.5" -"@radix-ui/react-popover@^1.0.6": +"@radix-ui/react-popover@^1.0.7": version "1.0.7" resolved "https://registry.yarnpkg.com/@radix-ui/react-popover/-/react-popover-1.0.7.tgz#23eb7e3327330cb75ec7b4092d685398c1654e3c" integrity sha512-shtvVnlsxT6faMnK/a7n0wptwBD23xc1Z5mdrtKLwVEfsEMXodS0r5s0/g5P0hX//EKYZS2sxUjqfzlg52ZSnQ== @@ -2737,23 +2715,6 @@ aria-hidden "^1.1.1" react-remove-scroll "2.5.5" -"@radix-ui/react-popper@1.1.2": - version "1.1.2" - resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-1.1.2.tgz#4c0b96fcd188dc1f334e02dba2d538973ad842e9" - integrity sha512-1CnGGfFi/bbqtJZZ0P/NQY20xdG3E0LALJaLUEoKwPLwl6PPPfbeiCqMVQnhoFRAxjJj4RpBRJzDmUgsex2tSg== - dependencies: - "@babel/runtime" "^7.13.10" - "@floating-ui/react-dom" "^2.0.0" - "@radix-ui/react-arrow" "1.0.3" - "@radix-ui/react-compose-refs" "1.0.1" - "@radix-ui/react-context" "1.0.1" - "@radix-ui/react-primitive" "1.0.3" - "@radix-ui/react-use-callback-ref" "1.0.1" - "@radix-ui/react-use-layout-effect" "1.0.1" - "@radix-ui/react-use-rect" "1.0.1" - "@radix-ui/react-use-size" "1.0.1" - "@radix-ui/rect" "1.0.1" - "@radix-ui/react-popper@1.1.3": version "1.1.3" resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-1.1.3.tgz#24c03f527e7ac348fabf18c89795d85d21b00b42" @@ -2771,15 +2732,7 @@ "@radix-ui/react-use-size" "1.0.1" "@radix-ui/rect" "1.0.1" -"@radix-ui/react-portal@1.0.3": - version "1.0.3" - resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.0.3.tgz#ffb961244c8ed1b46f039e6c215a6c4d9989bda1" - integrity sha512-xLYZeHrWoPmA5mEKEfZZevoVRK/Q43GfzRXkWV6qawIWWK8t6ifIiLQdd7rmQ4Vk1bmI21XhqF9BN3jWf+phpA== - dependencies: - "@babel/runtime" "^7.13.10" - "@radix-ui/react-primitive" "1.0.3" - -"@radix-ui/react-portal@1.0.4", "@radix-ui/react-portal@^1.0.3": +"@radix-ui/react-portal@1.0.4", "@radix-ui/react-portal@^1.0.4": version "1.0.4" resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.0.4.tgz#df4bfd353db3b1e84e639e9c63a5f2565fb00e15" integrity sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q== @@ -2837,7 +2790,7 @@ "@radix-ui/react-use-callback-ref" "1.0.1" "@radix-ui/react-use-controllable-state" "1.0.1" -"@radix-ui/react-scroll-area@^1.0.4": +"@radix-ui/react-scroll-area@^1.0.5": version "1.0.5" resolved "https://registry.yarnpkg.com/@radix-ui/react-scroll-area/-/react-scroll-area-1.0.5.tgz#01160c6893f24a2ddb5aa399ae5b3ba84ad4d3cc" integrity sha512-b6PAgH4GQf9QEn8zbT2XUHpW5z8BzqEc7Kl11TwDrvuTrxlkcjTD5qa/bxgKr+nmuXKu4L/W5UZ4mlP/VG/5Gw== @@ -2853,10 +2806,10 @@ "@radix-ui/react-use-callback-ref" "1.0.1" "@radix-ui/react-use-layout-effect" "1.0.1" -"@radix-ui/react-select@^1.2.2": - version "1.2.2" - resolved "https://registry.yarnpkg.com/@radix-ui/react-select/-/react-select-1.2.2.tgz#caa981fa0d672cf3c1b2a5240135524e69b32181" - integrity sha512-zI7McXr8fNaSrUY9mZe4x/HC0jTLY9fWNhO1oLWYMQGDXuV4UCivIGTxwioSzO0ZCYX9iSLyWmAh/1TOmX3Cnw== +"@radix-ui/react-select@^2.0.0": + version "2.0.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-select/-/react-select-2.0.0.tgz#a3511792a51a7018d6559357323a7f52e0e38887" + integrity sha512-RH5b7af4oHtkcHS7pG6Sgv5rk5Wxa7XI8W5gvB1N/yiuDGZxko1ynvOiVhFM7Cis2A8zxF9bTOUVbRDzPepe6w== dependencies: "@babel/runtime" "^7.13.10" "@radix-ui/number" "1.0.1" @@ -2865,12 +2818,12 @@ "@radix-ui/react-compose-refs" "1.0.1" "@radix-ui/react-context" "1.0.1" "@radix-ui/react-direction" "1.0.1" - "@radix-ui/react-dismissable-layer" "1.0.4" + "@radix-ui/react-dismissable-layer" "1.0.5" "@radix-ui/react-focus-guards" "1.0.1" - "@radix-ui/react-focus-scope" "1.0.3" + "@radix-ui/react-focus-scope" "1.0.4" "@radix-ui/react-id" "1.0.1" - "@radix-ui/react-popper" "1.1.2" - "@radix-ui/react-portal" "1.0.3" + "@radix-ui/react-popper" "1.1.3" + "@radix-ui/react-portal" "1.0.4" "@radix-ui/react-primitive" "1.0.3" "@radix-ui/react-slot" "1.0.2" "@radix-ui/react-use-callback-ref" "1.0.1" @@ -2944,7 +2897,7 @@ "@radix-ui/react-roving-focus" "1.0.4" "@radix-ui/react-use-controllable-state" "1.0.1" -"@radix-ui/react-tooltip@^1.0.6": +"@radix-ui/react-tooltip@^1.0.7": version "1.0.7" resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-1.0.7.tgz#8f55070f852e7e7450cc1d9210b793d2e5a7686e" integrity sha512-lPh5iKNFVQ/jav/j6ZrWq3blfDJ0OH9R6FlNUHPMqdLuQ9vwDgFsRxvl8b7Asuy5c8xmoojHUxKHQSOAvMHxyw== @@ -2963,7 +2916,7 @@ "@radix-ui/react-use-controllable-state" "1.0.1" "@radix-ui/react-visually-hidden" "1.0.3" -"@radix-ui/react-use-callback-ref@1.0.1": +"@radix-ui/react-use-callback-ref@1.0.1", "@radix-ui/react-use-callback-ref@^1.0.1": version "1.0.1" resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz#f4bb1f27f2023c984e6534317ebc411fc181107a" integrity sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ== @@ -3031,35 +2984,36 @@ dependencies: "@babel/runtime" "^7.13.10" -"@radix-ui/themes@1.1.2": - version "1.1.2" - resolved "https://registry.yarnpkg.com/@radix-ui/themes/-/themes-1.1.2.tgz#e53022f8f298a87612cda17e4a32b927b23c8d98" - integrity sha512-VnNeanSxHQurSgwQe5Z3zNZP5SrwhRY+RW97FPZe7TOJGpa+rpDHLDR9vourSsEGxsgrtTXHJaoII1pyIXDi8A== +"@radix-ui/themes@2.0.2": + version "2.0.2" + resolved "https://registry.yarnpkg.com/@radix-ui/themes/-/themes-2.0.2.tgz#39514b346e4a5cef0324d1e4bbe7ab09d7419bd2" + integrity sha512-9NaIp3HkoSkyCGAnJ21PL8yuazcV2q/q3wVNJ7jU00qZfzeybYREpoik11tMRA0+DWttQhSUy1ZqD8u6YqsbkQ== dependencies: - "@radix-ui/colors" "^2.1.0" + "@radix-ui/colors" "^3.0.0" "@radix-ui/primitive" "^1.0.1" "@radix-ui/react-accessible-icon" "^1.0.3" - "@radix-ui/react-alert-dialog" "^1.0.4" + "@radix-ui/react-alert-dialog" "^1.0.5" "@radix-ui/react-aspect-ratio" "^1.0.3" - "@radix-ui/react-avatar" "^1.0.3" + "@radix-ui/react-avatar" "^1.0.4" "@radix-ui/react-checkbox" "^1.0.4" - "@radix-ui/react-context-menu" "^2.1.4" - "@radix-ui/react-dialog" "^1.0.4" + "@radix-ui/react-context-menu" "^2.1.5" + "@radix-ui/react-dialog" "^1.0.5" "@radix-ui/react-direction" "^1.0.1" - "@radix-ui/react-dropdown-menu" "^2.0.5" + "@radix-ui/react-dropdown-menu" "^2.0.6" "@radix-ui/react-form" "^0.0.3" - "@radix-ui/react-hover-card" "^1.0.6" - "@radix-ui/react-popover" "^1.0.6" - "@radix-ui/react-portal" "^1.0.3" + "@radix-ui/react-hover-card" "^1.0.7" + "@radix-ui/react-popover" "^1.0.7" + "@radix-ui/react-portal" "^1.0.4" "@radix-ui/react-radio-group" "^1.1.3" - "@radix-ui/react-scroll-area" "^1.0.4" - "@radix-ui/react-select" "^1.2.2" + "@radix-ui/react-scroll-area" "^1.0.5" + "@radix-ui/react-select" "^2.0.0" "@radix-ui/react-separator" "^1.0.3" "@radix-ui/react-slider" "^1.1.2" "@radix-ui/react-slot" "^1.0.2" "@radix-ui/react-switch" "^1.0.3" "@radix-ui/react-tabs" "^1.0.4" - "@radix-ui/react-tooltip" "^1.0.6" + "@radix-ui/react-tooltip" "^1.0.7" + "@radix-ui/react-use-callback-ref" "^1.0.1" "@radix-ui/react-visually-hidden" "^1.0.3" classnames "^2.3.2"