Full page extension views, containers, shared headers + footers

.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

@@ -135,14 +135,15 @@
     "@dlc-link/dlc-tools": "1.1.1",
     "@fungible-systems/zone-file": "2.0.0",
     "@hirosystems/token-metadata-api-client": "1.2.0",
-    "@leather-wallet/tokens": "0.0.13",
+    "@leather-wallet/tokens": "0.0.14",
     "@ledgerhq/hw-transport-webusb": "6.27.19",
     "@noble/hashes": "1.3.2",
     "@noble/secp256k1": "2.0.0",
     "@octokit/types": "12.4.0",
     "@radix-ui/colors": "3.0.0",
     "@radix-ui/react-accessible-icon": "1.0.3",
     "@radix-ui/react-avatar": "1.0.4",
+    "@radix-ui/react-dialog": "1.0.5",
     "@radix-ui/react-dropdown-menu": "2.0.6",
     "@radix-ui/react-select": "2.0.0",
     "@radix-ui/react-tabs": "1.0.4",
@@ -178,7 +179,6 @@
     "@tanstack/react-query-persist-client": "4.35.7",
     "@types/lodash.uniqby": "4.7.7",
     "@typescript-eslint/eslint-plugin": "7.0.2",
-    "@vkontakte/vk-qr": "2.0.13",
     "@zondax/ledger-stacks": "1.0.4",
     "alex-sdk": "0.1.26",
     "are-passive-events-supported": "1.1.1",
@@ -227,6 +227,7 @@
     "react-head": "3.4.2",
     "react-intersection-observer": "9.5.2",
     "react-lottie": "1.2.4",
+    "react-qr-code": "2.0.12",
     "react-redux": "8.1.3",
     "react-router-dom": "6.22.1",
     "react-virtuoso": "4.7.1",

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>
   );