chore: replace drawer with dialog, add containers and global header f…

…ooters, refactor onboarding, ref #4371

.storybook/main.ts

@@ -34,6 +34,12 @@ const config: StorybookConfig = {
               },
             ],
           },
+
+          {
+            test: /\.(ts|tsx)$/,
+            loader: 'esbuild-loader',
+            options: { tsconfig: './tsconfig.json', target: 'es2020' },
+          },
         ],
       },
     },

.storybook/preview.ts

@@ -1,6 +1,7 @@
 import type { Preview } from '@storybook/react';
 
 import '../src/app/index.css';
+import { customViewports } from './viewports';
 
 const preview: Preview = {
   parameters: {
@@ -24,6 +25,12 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    viewport: {
+      viewports: {
+        ...customViewports,
+      },
+    },
+    toc: true,
   },
 };
 

.storybook/viewports.ts

@@ -0,0 +1,49 @@
+import { breakpoints } from '@leather-wallet/tokens';
+
+// TODO import from '@leather-wallet/tokens'
+import { tokens } from '../theme/tokens';
+
+export const customViewports = {
+  popup: {
+    name: 'Popup',
+    styles: {
+      width: tokens.sizes.popupWidth.value,
+      height: tokens.sizes.popupHeight.value,
+    },
+  },
+  sm: {
+    name: 'sm',
+    styles: {
+      width: breakpoints.sm,
+      height: '100%',
+    },
+  },
+  md: {
+    name: 'md',
+    styles: {
+      width: breakpoints.md,
+      height: '100%',
+    },
+  },
+  lg: {
+    name: 'lg',
+    styles: {
+      width: breakpoints.lg,
+      height: '100%',
+    },
+  },
+  xl: {
+    name: 'xl',
+    styles: {
+      width: breakpoints.xl,
+      height: '100%',
+    },
+  },
+  '2xl': {
+    name: '2xl',
+    styles: {
+      width: breakpoints['2xl'],
+      height: '100%',
+    },
+  },
+};

package.json

@@ -144,6 +144,7 @@
     "@radix-ui/react-tabs": "1.0.4",
     "@radix-ui/react-tooltip": "1.0.7",
     "@radix-ui/themes": "2.0.3",
+    "@radix-ui/react-dialog": "1.0.5",
     "@reduxjs/toolkit": "1.9.6",
     "@scure/base": "1.1.3",
     "@scure/bip32": "1.3.2",

src/app/app.tsx

@@ -1,9 +1,7 @@
 import { Suspense } from 'react';
 import { Provider as ReduxProvider } from 'react-redux';
 
-import { radixBaseCSS } from '@radix-ui/themes/styles.css';
 import { QueryClientProvider } from '@tanstack/react-query';
-import { styled } from 'leather-styles/jsx';
 import { PersistGate } from 'redux-persist/integration/react';
 
 import { queryClient } from '@app/common/persistence';
@@ -24,18 +22,15 @@ export function App() {
     <ReduxProvider store={store}>
       <PersistGate loading={<FullPageLoadingSpinner />} persistor={persistor}>
         <HeadProvider />
-        {/* TODO: this works but investigate importing radixBaseCSS in panda layer config */}
         <ThemeSwitcherProvider>
-          <styled.div css={radixBaseCSS}>
-            <QueryClientProvider client={queryClient}>
-              <Suspense fallback={<FullPageLoadingSpinner />}>
-                <AppErrorBoundary>
-                  <AppRoutes />
-                </AppErrorBoundary>
-                {reactQueryDevToolsEnabled && <Devtools />}
-              </Suspense>
-            </QueryClientProvider>
-          </styled.div>
+          <QueryClientProvider client={queryClient}>
+            <Suspense fallback={<FullPageLoadingSpinner />}>
+              <AppErrorBoundary>
+                <AppRoutes />
+              </AppErrorBoundary>
+              {reactQueryDevToolsEnabled && <Devtools />}
+            </Suspense>
+          </QueryClientProvider>
         </ThemeSwitcherProvider>
       </PersistGate>
     </ReduxProvider>

src/app/components/account/account-addresses.tsx

@@ -1,6 +1,5 @@
 import { HStack } from 'leather-styles/jsx';
 
-import { useViewportMinWidth } from '@app/common/hooks/use-media-query';
 import { BulletSeparator } from '@app/ui/components/bullet-separator/bullet-separator';
 import { Caption } from '@app/ui/components/typography/caption';
 import { truncateMiddle } from '@app/ui/utils/truncate-middle';
@@ -12,13 +11,11 @@ interface AccountAddressesProps {
   index: number;
 }
 export function AcccountAddresses({ index }: AccountAddressesProps) {
-  const isBreakpointSm = useViewportMinWidth('sm');
-
   return (
     <HStack alignItems="center" gap="space.02" whiteSpace="nowrap">
       <BulletSeparator>
         <StacksAccountLoader index={index}>
-          {account => <Caption>{truncateMiddle(account.address, isBreakpointSm ? 4 : 3)}</Caption>}
+          {account => <Caption>{truncateMiddle(account.address, 4)}</Caption>}
         </StacksAccountLoader>
         <BitcoinNativeSegwitAccountLoader index={index}>
           {signer => <Caption>{truncateMiddle(signer.address, 5)}</Caption>}