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

@@ -145,6 +145,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,8 @@
 import { Suspense } from 'react';
+import { Toaster } from 'react-hot-toast';
 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,19 +23,22 @@ 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>
+        <Toaster
+          position="bottom-center"
+          toastOptions={{
+            style: { fontSize: '14px' },
+          }}
+        />
       </PersistGate>
     </ReduxProvider>
   );

src/app/common/utils.ts

@@ -265,10 +265,6 @@ export function isPopupMode() {
   return pageMode === 'popup';
 }
 
-export function isFullPageMode() {
-  return pageMode === 'full';
-}
-
 interface WhenStacksChainIdMap<T> {
   [ChainID.Mainnet]: T;
   [ChainID.Testnet]: T;

src/app/common/utils/copy-to-clipboard.ts

@@ -0,0 +1,6 @@
+import toast from 'react-hot-toast';
+
+export function copyToClipboard(text: string) {
+  navigator.clipboard.writeText(text);
+  toast.success('Copied to clipboard!');
+}