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,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,19 +64,27 @@ yarn 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:
+To run a suite of tests you can use:
 
 ```bash
-yarn test:integration
+yarn playwright test specs/TEST.spec.ts
+yarn playwright test tests/specs --shard=3/8
 ```
 
-To run a suite of tests you can use:
+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
+```
+
+### Integration tests
+
+All integration tests can be run using:
 
 ```bash
-yarn playwright test specs/TEST.spec.ts
-yarn playwright test tests/specs --shard=3/8
+yarn test:integration
 ```
 
 ### Unit tests

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

@@ -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,6 @@
+import toast from 'react-hot-toast';
+
+export async function copyToClipboard(text: string) {
+  await navigator.clipboard.writeText(text);
+  toast.success('Copied to clipboard!');
+}