From 3d36dec615828dbf2932d4b217355bf0b6738d67 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ji=C5=99=C3=AD=20=C4=8Cerm=C3=A1k?= Date: Mon, 26 Jan 2026 09:56:37 +0100 Subject: [PATCH] chore: enable tanstack react query dev tools via an env var --- .gitignore | 2 ++ README.md | 5 +++++ env.local.example | 2 ++ .../suite-build/configs/base.webpack.config.ts | 4 ++++ packages/suite-build/package.json | 1 + packages/suite-build/utils/env.ts | 10 ++++++++++ packages/suite-build/vite.config.mts | 3 ++- .../src/components/ReactQueryProvider.tsx | 4 +++- yarn.lock | 15 ++++++++------- 9 files changed, 37 insertions(+), 9 deletions(-) create mode 100644 env.local.example diff --git a/.gitignore b/.gitignore index 6a34aaf656..9577eb0104 100644 --- a/.gitignore +++ b/.gitignore @@ -100,6 +100,8 @@ local.properties !**/suite-native/app/.env.production !**/suite-native/app/.env.staging +.env.local + # ios **/ios/*.xcarchive **/ios/builds/* diff --git a/README.md b/README.md index 106d97607c..d71f489234 100644 --- a/README.md +++ b/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). diff --git a/env.local.example b/env.local.example new file mode 100644 index 0000000000..9f3aefb13b --- /dev/null +++ b/env.local.example @@ -0,0 +1,2 @@ +# Rename this file to ".env.local" to enable the devtools locally. +TANSTACK_REACT_QUERY_DEV_TOOLS=true diff --git a/packages/suite-build/configs/base.webpack.config.ts b/packages/suite-build/configs/base.webpack.config.ts index e94e690354..8f31be59ee 100644 --- a/packages/suite-build/configs/base.webpack.config.ts +++ b/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 }), diff --git a/packages/suite-build/package.json b/packages/suite-build/package.json index 1faa945ca5..0065c66f4f 100644 --- a/packages/suite-build/package.json +++ b/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", diff --git a/packages/suite-build/utils/env.ts b/packages/suite-build/utils/env.ts index 0613dc181b..cc08c650dc 100644 --- a/packages/suite-build/utils/env.ts +++ b/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, }; diff --git a/packages/suite-build/vite.config.mts b/packages/suite-build/vite.config.mts index bef2c82fe6..645dc2f11c 100644 --- a/packages/suite-build/vite.config.mts +++ b/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, diff --git a/suite-common/react-query/src/components/ReactQueryProvider.tsx b/suite-common/react-query/src/components/ReactQueryProvider.tsx index 711adb3359..5fe48c4d77 100644 --- a/suite-common/react-query/src/components/ReactQueryProvider.tsx +++ b/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 ( {children} - {isDevEnv && ( + {DEV_TOOLS && ( diff --git a/yarn.lock b/yarn.lock index 47920704b2..1ce042293f 100644 --- a/yarn.lock +++ b/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"