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

…ooters, refactor onboarding, ref #4371

.storybook/main.ts

@@ -26,6 +26,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,48 @@
+import { breakpoints } from '@leather-wallet/tokens';
+
+import { POPUP_HEIGHT, POPUP_WIDTH } from '../src/shared/constants';
+
+export const customViewports = {
+  extension: {
+    name: 'Extension Popout',
+    styles: {
+      width: `${POPUP_WIDTH}px`,
+      height: `${POPUP_HEIGHT}px`,
+    },
+  },
+  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

@@ -143,6 +143,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/common/hooks/use-drawers.ts → src/app/common/hooks/use-dialogs.ts

@@ -1,25 +1,22 @@
 import {
   useShowHighFeeConfirmationState,
-  useShowSettingsStore,
   useShowSwitchAccountsState,
   useShowTxSettingsCallback,
 } from '@app/store/ui/ui.hooks';
 
-export function useDrawers() {
+//  TODO move this to features/dialogs?
+export function useDialogs() {
   const [isShowingAccounts, setIsShowingSwitchAccountsState] = useShowSwitchAccountsState();
   const [isShowingHighFeeConfirmation, setIsShowingHighFeeConfirmation] =
     useShowHighFeeConfirmationState();
 
-  const [isShowingSettings, setIsShowingSettings] = useShowSettingsStore();
   const [isShowingTxSettingsCallback, setIsShowingTxSettingsCallback] = useShowTxSettingsCallback();
 
   return {
     isShowingAccounts,
     setIsShowingSwitchAccountsState,
     isShowingHighFeeConfirmation,
     setIsShowingHighFeeConfirmation,
-    isShowingSettings,
-    setIsShowingSettings,
     isShowingTxSettingsCallback,
     setIsShowingTxSettingsCallback,
   };

src/app/common/hooks/use-modifier-key.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+// import { useCallback, useEffect, useState } from 'react';
 
 export function buildEnterKeyEvent(onClick: () => void) {
   return (event: React.KeyboardEvent<HTMLInputElement>) => {
@@ -8,46 +8,48 @@ export function buildEnterKeyEvent(onClick: () => void) {
   };
 }
 
-let timer = 0;
-
-export function useModifierKey(key: 'alt' | 'control', delay = 0) {
-  const [isPressed, setIsPressed] = useState(false);
-
-  const keydownFn = useCallback(
-    (event: KeyboardEvent) => {
-      if (key === 'alt' && event.altKey) {
-        timer = window.setTimeout(() => setIsPressed(true), delay);
-      }
-      if (key === 'control' && event.ctrlKey) {
-        timer = window.setTimeout(() => setIsPressed(true), delay);
-      }
-    },
-    [delay, key]
-  );
-
-  const keyupFn = useCallback(
-    (event: KeyboardEvent) => {
-      if (key === 'alt' && !event.altKey) {
-        clearTimeout(timer);
-        setIsPressed(false);
-      }
-      if (key === 'control' && !event.ctrlKey) {
-        clearTimeout(timer);
-        setIsPressed(false);
-      }
-    },
-    [key]
-  );
-
-  useEffect(() => {
-    document.addEventListener('keydown', keydownFn);
-    document.addEventListener('keyup', keyupFn);
-    return () => {
-      clearTimeout(timer);
-      document.removeEventListener('keydown', keydownFn);
-      document.removeEventListener('keyup', keyupFn);
-    };
-  }, [keydownFn, keyupFn]);
-
-  return { isPressed };
-}
+// TODO try deprecate this in favour of new settings menu https://github.com/leather-wallet/extension/pull/2732/files
+
+// let timer = 0;
+
+// export function useModifierKey(key: 'alt' | 'control', delay = 0) {
+//   const [isPressed, setIsPressed] = useState(false);
+
+//   const keydownFn = useCallback(
+//     (event: KeyboardEvent) => {
+//       if (key === 'alt' && event.altKey) {
+//         timer = window.setTimeout(() => setIsPressed(true), delay);
+//       }
+//       if (key === 'control' && event.ctrlKey) {
+//         timer = window.setTimeout(() => setIsPressed(true), delay);
+//       }
+//     },
+//     [delay, key]
+//   );
+
+//   const keyupFn = useCallback(
+//     (event: KeyboardEvent) => {
+//       if (key === 'alt' && !event.altKey) {
+//         clearTimeout(timer);
+//         setIsPressed(false);
+//       }
+//       if (key === 'control' && !event.ctrlKey) {
+//         clearTimeout(timer);
+//         setIsPressed(false);
+//       }
+//     },
+//     [key]
+//   );
+
+//   useEffect(() => {
+//     document.addEventListener('keydown', keydownFn);
+//     document.addEventListener('keyup', keyupFn);
+//     return () => {
+//       clearTimeout(timer);
+//       document.removeEventListener('keydown', keydownFn);
+//       document.removeEventListener('keyup', keyupFn);
+//     };
+//   }, [keydownFn, keyupFn]);
+
+//   return { isPressed };
+// }