chore: enable tanstack react query dev tools via an env var

.gitignore

@@ -100,6 +100,8 @@ local.properties
 !**/suite-native/app/.env.production
 !**/suite-native/app/.env.staging
 
+.env.local
+
 # ios
 **/ios/*.xcarchive
 **/ios/builds/*

README.md

@@ -50,6 +50,11 @@ Run a dev build:
 - `yarn suite:dev:desktop` (electron app)
     - React dev tools are available with a known caveat: you need to reload the renderer process (Ctrl+R or Cmd+R) while having the dev tools open
 
+Local `.env` setup (optional):
+
+- Rename `env.local.example` to `.env.local` in the repo root.
+- Set `TANSTACK_REACT_QUERY_DEV_TOOLS=true` to enable TanStack React Query Devtools on localhost.
+
 ## **Trezor Suite Mobile** @suite-native/app
 
 > To set up your dev environment for a native platform (iOS/Android) follow [these additional steps](https://github.com/trezor/trezor-suite/tree/develop/suite-native/app#prerequisites).

env.local.example

@@ -0,0 +1,2 @@
+# Rename this file to ".env.local" to enable the devtools locally.
+TANSTACK_REACT_QUERY_DEV_TOOLS=true

packages/suite-build/configs/base.webpack.config.ts

@@ -13,6 +13,7 @@ import {
     isAnalyzing,
     isCodesignBuild,
     isDev,
+    isTanstackReactQueryDevTools,
     project,
     sentryAuthToken,
 } from '../utils/env';
@@ -186,6 +187,9 @@ const config: webpack.Configuration = {
             'process.env.ASSET_PREFIX': JSON.stringify(assetPrefix),
             'process.env.IS_CODESIGN_BUILD': `"${isCodesignBuild}"`, // to keep it as string "true"/"false" and not boolean
             'process.env.SENTRY_RELEASE': JSON.stringify(sentryRelease),
+            'process.env.TANSTACK_REACT_QUERY_DEV_TOOLS': JSON.stringify(
+                isTanstackReactQueryDevTools,
+            ),
             __SENTRY_DEBUG__: isDev,
             __SENTRY_TRACING__: false, // needs to be removed when we introduce performance monitoring in trezor-suite
         }),

packages/suite-build/package.json

@@ -31,6 +31,7 @@
         "copy-webpack-plugin": "^13.0.1",
         "crypto-browserify": "3.12.0",
         "css-minimizer-webpack-plugin": "^7.0.2",
+        "dotenv": "17.2.3",
         "html-webpack-plugin": "5.6.5",
         "raw-loader": "^4.0.2",
         "stream-browserify": "^3.0.0",

packages/suite-build/utils/env.ts

@@ -1,5 +1,12 @@
+import dotenv from 'dotenv';
+import path from 'path';
+
 import type { Project } from './constants';
 
+const repoRoot = path.resolve(__dirname, '../../..');
+
+dotenv.config({ path: path.join(repoRoot, '.env.local'), override: false });
+
 const {
     PROJECT,
     NODE_ENV,
@@ -9,6 +16,7 @@ const {
     IS_CODESIGN_BUILD,
     SENTRY_AUTH_TOKEN,
     TEST_BUILD,
+    TANSTACK_REACT_QUERY_DEV_TOOLS,
 } = process.env;
 
 const project = PROJECT as Project;
@@ -19,6 +27,7 @@ const launchElectron = LAUNCH_ELECTRON === 'true';
 const assetPrefix = ASSET_PREFIX || '';
 const sentryAuthToken = SENTRY_AUTH_TOKEN;
 const isTestBuild = TEST_BUILD === 'true';
+const isTanstackReactQueryDevTools = TANSTACK_REACT_QUERY_DEV_TOOLS === 'true';
 
 export {
     isAnalyzing,
@@ -29,4 +38,5 @@ export {
     project,
     sentryAuthToken,
     isTestBuild,
+    isTanstackReactQueryDevTools,
 };

packages/suite-build/vite.config.mts

@@ -8,7 +8,7 @@ import { Plugin, ViteDevServer, build, defineConfig } from 'vite';
 import wasm from 'vite-plugin-wasm';
 
 import { suiteVersion } from '../suite/package.json';
-import { assetPrefix, project } from './utils/env';
+import { assetPrefix, isTanstackReactQueryDevTools, project } from './utils/env';
 
 const require = createRequire(import.meta.url);
 
@@ -472,6 +472,7 @@ export default defineConfig({
         'process.env.SUITE_TYPE': JSON.stringify(project ?? 'web'),
         'process.env.NODE_ENV': JSON.stringify('development'),
         'process.env.ASSET_PREFIX': JSON.stringify(assetPrefix),
+        'process.env.TANSTACK_REACT_QUERY_DEV_TOOLS': JSON.stringify(isTanstackReactQueryDevTools),
         global: 'globalThis',
         __DEV__: true,
         ENABLE_REDUX_LOGGER: true,

suite-common/react-query/src/components/ReactQueryProvider.tsx

@@ -15,6 +15,8 @@ const Devtools = lazy(async () => {
  */
 const MAX_RETRY_COUNT = isDevEnv ? 0 : 3;
 
+const DEV_TOOLS = isDevEnv && process.env.TANSTACK_REACT_QUERY_DEV_TOOLS === 'true';
+
 /**
  * React Query provider for web (desktop) (@trezor/suite)
  */
@@ -50,7 +52,7 @@ export const ReactQueryProvider = ({ children }: PropsWithChildren) => {
     return (
         <QueryClientProvider client={queryClient}>
             {children}
-            {isDevEnv && (
+            {DEV_TOOLS && (
                 <Suspense fallback={null}>
                     <Devtools />
                 </Suspense>

yarn.lock

@@ -14897,6 +14897,7 @@ __metadata:
     copy-webpack-plugin: "npm:^13.0.1"
     crypto-browserify: "npm:3.12.0"
     css-minimizer-webpack-plugin: "npm:^7.0.2"
+    dotenv: "npm:17.2.3"
     html-webpack-plugin: "npm:5.6.5"
     raw-loader: "npm:^4.0.2"
     react-refresh: "npm:^0.18.0"
@@ -23492,6 +23493,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dotenv@npm:17.2.3, dotenv@npm:^17.2.1, dotenv@npm:^17.2.3":
+  version: 17.2.3
+  resolution: "dotenv@npm:17.2.3"
+  checksum: 10/f8b78626ebfff6e44420f634773375c9651808b3e1a33df6d4cc19120968eea53e100f59f04ec35f2a20b2beb334b6aba4f24040b2f8ad61773f158ac042a636
+  languageName: node
+  linkType: hard
+
 "dotenv@npm:^16.3.1, dotenv@npm:^16.4.4, dotenv@npm:^16.4.5, dotenv@npm:^16.4.7, dotenv@npm:^16.5.0":
   version: 16.6.1
   resolution: "dotenv@npm:16.6.1"
@@ -23499,13 +23507,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dotenv@npm:^17.2.1, dotenv@npm:^17.2.3":
-  version: 17.2.3
-  resolution: "dotenv@npm:17.2.3"
-  checksum: 10/f8b78626ebfff6e44420f634773375c9651808b3e1a33df6d4cc19120968eea53e100f59f04ec35f2a20b2beb334b6aba4f24040b2f8ad61773f158ac042a636
-  languageName: node
-  linkType: hard
-
 "dotenv@npm:^8.1.0":
   version: 8.6.0
   resolution: "dotenv@npm:8.6.0"