chore: replace drawer dialog, containers and global header footers, o…

…nboarding, settings, 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,46 @@
+import { breakpoints, tokens } from '@leather-wallet/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%',
+    },
+  },
+};

README.md

@@ -64,8 +64,6 @@ pnpm playwright install --with-deps
 
 Note that the installed browsers are tied to the version of Playwright being used, and it may be necessary to run the above command again in some situations, such as when upgrading Playwright or switching branches. [Read the documentation for more information](https://playwright.dev/docs/cli#install-system-dependencies).
 
-### Integration tests
-
 All integration tests can be run using:
 
 ```bash
@@ -79,6 +77,14 @@ pnpm playwright test specs/TEST.spec.ts
 pnpm playwright test tests/specs --shard=3/8
 ```
 
+To get more information when running tests you can pass the `--debug` flag or the `--ui` flag to playwright.
+
+When running tests locally you must add the following to your `.env` file:
+
+```
+WALLET_ENVIRONMENT=testing
+```
+
 ### Unit tests
 
 Unit tests can be run with vitest using:

package.json

@@ -149,6 +149,7 @@
     "@radix-ui/react-toast": "1.1.5",
     "@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';
@@ -25,21 +23,18 @@ export function App() {
     <ReduxProvider store={store}>
       <PersistGate loading={<FullPageLoadingSpinner />} persistor={persistor}>
         <HeadProvider />
-        {/* TODO: this works but investigate importing radixBaseCSS in panda layer config */}
-        <ThemeSwitcherProvider>
-          <ToastsProvider>
-            <styled.div css={radixBaseCSS}>
-              <QueryClientProvider client={queryClient}>
-                <Suspense fallback={<FullPageLoadingSpinner />}>
-                  <AppErrorBoundary>
-                    <AppRoutes />
-                  </AppErrorBoundary>
-                  {reactQueryDevToolsEnabled && <Devtools />}
-                </Suspense>
-              </QueryClientProvider>
-            </styled.div>
-          </ToastsProvider>
-        </ThemeSwitcherProvider>
+        <ToastsProvider>
+          <ThemeSwitcherProvider>
+            <QueryClientProvider client={queryClient}>
+              <Suspense fallback={<FullPageLoadingSpinner />}>
+                <AppErrorBoundary>
+                  <AppRoutes />
+                </AppErrorBoundary>
+                {reactQueryDevToolsEnabled && <Devtools />}
+              </Suspense>
+            </QueryClientProvider>
+          </ThemeSwitcherProvider>
+        </ToastsProvider>
       </PersistGate>
     </ReduxProvider>
   );

src/app/common/utils.ts

@@ -257,6 +257,7 @@ type PageMode = 'popup' | 'full';
 
 type WhenPageModeMap<T> = Record<PageMode, T>;
 
+// don't use whenPageMode for styling - use panda responsive object
 export function whenPageMode<T>(pageModeMap: WhenPageModeMap<T>) {
   return pageModeMap[pageMode];
 }
@@ -265,10 +266,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,3 @@
+export async function copyToClipboard(text: string) {
+  await navigator.clipboard.writeText(text);
+}