chore: migrate base drawer to radix dialog and make resonsive

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",

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({});

src/app/components/broadcast-error-drawer/broadcast-error-drawer.layout.tsx

@@ -1,23 +1,25 @@
 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;
   onClose(): void;
 }
 export function BroadcastErrorDrawerLayout({ message, onClose }: BroadcastErrorDrawerLayoutProps) {
   return (
-    <BaseDrawer icon={<></>} isShowing onClose={onClose} textAlign="center">
+    <BaseDrawer isShowing onClose={onClose}>
       <Flex
         flexDirection="column"
         justifyContent="center"
         mx="space.06"
         mb="space.02"
         position="relative"
         top="-24px"
+        // #4370 TODO check this alignment as its the only thing used by ...rest in baseDrawer
+        textAlign="center"
       >
         <styled.img src={GenericError} width="106px" height="72px" m="0 auto" />
         <styled.h1 mt="space.05" textStyle="heading.05">

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(<Header hideActions />);
+  useRouteHeader(<Header />);
 
   return (
     <GenericErrorLayout

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

@@ -2,13 +2,13 @@ import { memo, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { ChainID } from '@stacks/transactions';
-import { Flex, FlexProps, styled } from 'leather-styles/jsx';
+import { Flex, styled } from 'leather-styles/jsx';
 
 import { RouteUrls } from '@shared/route-urls';
 
 import { useCurrentNetworkState } from '@app/store/networks/networks.hooks';
 
-export const NetworkModeBadge = memo((props: FlexProps) => {
+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}
     >
       <styled.span color="accent.text-subdued" textStyle="label.03">
         {name}

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';
 

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();

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';
 

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) {

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 (
-    <ControlledDrawer
-      icon={<ErrorIcon color="error.label" size="xl" />}
+    <BaseDrawer
+      // TODO - see if we can remove this - only place using this icon slot
+      // icon={<ErrorIcon color="error.label" size="xl" />}
+      // figure out how this works in general
       isShowing={isShowingHighFeeConfirmation}
       onClose={() => setIsShowingHighFeeConfirmation(false)}
     >
       {isShowingHighFeeConfirmation && <HighFeeConfirmation learnMoreUrl={learnMoreUrl} />}
-    </ControlledDrawer>
+    </BaseDrawer>
   );
 }

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';
 

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() {

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';

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';