chore: bumps#178
Conversation
✅ Deploy Preview for lifted-alberto ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## main #178 +/- ##
==========================================
- Coverage 52.31% 43.34% -8.98%
==========================================
Files 184 119 -65
Lines 9968 2485 -7483
Branches 444 531 +87
==========================================
- Hits 5215 1077 -4138
+ Misses 4738 1275 -3463
- Partials 15 133 +118 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Pull request overview
This pull request migrates the codebase from the deprecated react-query package to @tanstack/react-query v4, updates the React Query API to use the modern object-based syntax, and performs several dependency updates. The changes also include test infrastructure improvements with a switch from jsdom to happy-dom and the migration to React 18's createRoot API.
Changes:
- Migrated all imports from
react-queryto@tanstack/react-queryand refactored mutation/query hooks to use the new object-based API - Updated multiple dependencies including web3auth, formik, react-hook-form, react-router, TypeScript, and testing tools
- Migrated asset imports from
@liftedinit/uito local asset files for better maintainability - Updated test infrastructure with happy-dom, improved mocking patterns, and React 18 support
Reviewed changes
Copilot reviewed 40 out of 43 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| vitest.config.ts | Replaced mergeConfig approach with standalone configuration including test environment change to happy-dom |
| package.json | Updated dependencies including @tanstack/react-query, formik, react-hook-form, TypeScript, and testing libraries; added overrides for diff |
| src/index.tsx | Migrated from ReactDOM.render to React 18's createRoot API |
| src/views/app/app.provider.tsx | Updated to create QueryClient from @tanstack/react-query and removed dependency on @liftedinit/ui's queryClient |
| src/test/render.tsx | Created test-specific QueryClient factory with proper configuration for isolated test execution |
| src/test/mocks/liftedinit-ui.ts | Added mock for @liftedinit/ui asset exports to support asset migration |
| src/test/mocks/empty-asset.js | Added empty asset mock for test imports |
| src/test/web3authMock.js | Enhanced mocking for Web3auth provider to avoid react-query context issues |
| src/setupTests.tsx | Added cleanup call in afterEach hook |
| src/features/transactions/queries.ts | Migrated useMutation and useQuery to object-based API with proper queryKey wrapping |
| src/features/token-migration/queries.ts | Migrated useQueries to use queries wrapper object |
| src/features/accounts/api/*.ts | Migrated all mutation and query hooks to object-based API |
| src/features/balances/queries.ts | Updated import to @tanstack/react-query |
| src/features/network/queries.ts | Updated import to @tanstack/react-query |
| src/views/splash/splash.tsx | Changed cubePng import from @liftedinit/ui to local asset |
| src/views/layout/app-menu.tsx | Changed logoSvg import from @liftedinit/ui to local asset |
| src/views/home/symbols/symbols.tsx | Changed cubePng import from @liftedinit/ui to local asset |
| src/views/home/asset-details/asset-details.tsx | Changed cubePng import from @liftedinit/ui to local asset |
| src/features/transactions/components/send-asset/send-asset.tsx | Changed cubePng import from @liftedinit/ui to local asset |
| src/features/balances/components/asset-selector/asset-selector.tsx | Changed cubePng import from @liftedinit/ui to local asset |
| src/views/home/tests/home.test.tsx | Simplified test mocking and removed waitForElementToBeRemoved |
| src/views/home/tests/home.error.test.tsx | Simplified mock structure |
| src/views/app/app.test.tsx | Updated test to use fake timers and waitFor instead of waitForElementToBeRemoved |
| src/views/send-asset/tests/send-asset.test.tsx | Enhanced mocking for SlideFade, network provider, and balances |
| src/features/token-migration/components/migration-form/tests/migration-form.test.tsx | Simplified mocks and updated test interactions to use fireEvent where needed |
| src/assets/logo.svg | Added local logo asset file |
| src/assets/cube.png | Added local cube asset file |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| "//": "See https://github.com/facebook/create-react-app/issues/11773", | ||
| "react-error-overlay": "6.0.9" | ||
| }, | ||
| "overrides": { |
There was a problem hiding this comment.
The overrides field specifies diff version 8.0.3. While this is a valid version (released in 2025), consider documenting why this specific version override is needed, especially since it's forcing a newer major version across all dependencies that use diff.
| "overrides": { | |
| "overrides": { | |
| "//": "Pin diff to 8.0.3 to ensure a consistent version across all dependencies and avoid unexpected transitive upgrades.", |
| // Use fireEvent for select to trigger onChange handler | ||
| await act(async () => { | ||
| fireEvent.change(symbolField, { target: { value: mockAsset.identity } }) |
There was a problem hiding this comment.
The test is using fireEvent.change instead of userEvent for consistency. While this might be intentional to trigger specific onChange handlers, consider using userEvent.selectOptions for better simulation of user interactions and more realistic test behavior, unless there's a specific technical reason for using fireEvent here.
| // Use fireEvent for select to trigger onChange handler | |
| await act(async () => { | |
| fireEvent.change(symbolField, { target: { value: mockAsset.identity } }) | |
| // Use userEvent.selectOptions for a more realistic select interaction | |
| await act(async () => { | |
| await userEvent.selectOptions(symbolField, mockAsset.identity) |
| import { defineConfig } from "vite" | ||
| import react from "@vitejs/plugin-react-swc" | ||
| import { fileURLToPath, URL } from "node:url" | ||
| import { nodePolyfills } from "vite-plugin-node-polyfills" | ||
|
|
||
| export default mergeConfig( | ||
| viteConfig, | ||
| defineConfig({ | ||
| test: { | ||
| environment: "jsdom", | ||
| setupFiles: "./src/setupTests.tsx", | ||
| globals: true, | ||
| css: true, | ||
| exclude: ["e2e/**", "node_modules/**", "build/**", "dist/**"], | ||
| coverage: { | ||
| reporter: ["text", "lcov"], | ||
| exclude: ["e2e/**", "node_modules/**", "build/**", "dist/**"], | ||
| export default defineConfig({ | ||
| plugins: [ | ||
| react(), | ||
| nodePolyfills({ | ||
| protocolImports: true, | ||
| include: ["buffer", "process", "stream", "crypto"], | ||
| globals: { | ||
| Buffer: true, | ||
| process: true, | ||
| }, | ||
| }), | ||
| ], | ||
| define: { | ||
| global: "globalThis", | ||
| "process.env": {}, | ||
| }, | ||
| resolve: { | ||
| alias: { | ||
| buffer: "buffer", | ||
| stream: "stream-browserify", | ||
| process: "process/browser", | ||
| crypto: "crypto-browserify", | ||
| "@": fileURLToPath(new URL("./src", import.meta.url)), | ||
| views: fileURLToPath(new URL("./src/views", import.meta.url)), | ||
| features: fileURLToPath(new URL("./src/features", import.meta.url)), | ||
| lib: fileURLToPath(new URL("./src/lib", import.meta.url)), | ||
| public: fileURLToPath(new URL("./public", import.meta.url)), | ||
| shared: fileURLToPath(new URL("./src/shared", import.meta.url)), | ||
| test: fileURLToPath(new URL("./src/test", import.meta.url)), | ||
| }, | ||
| }, | ||
| test: { | ||
| environment: "happy-dom", | ||
| setupFiles: "./src/setupTests.tsx", | ||
| globals: true, | ||
| css: true, | ||
| exclude: ["e2e/**", "node_modules/**", "build/**", "dist/**"], | ||
| teardownTimeout: 1000, | ||
| coverage: { | ||
| reporter: ["text", "lcov"], | ||
| exclude: ["e2e/**", "node_modules/**", "build/**", "dist/**"], | ||
| }, | ||
| }), | ||
| ) | ||
| }, | ||
| }) |
There was a problem hiding this comment.
The vitest.config.ts file now duplicates all configuration from vite.config.ts instead of using mergeConfig to extend it. This creates a maintenance burden where any changes to the build configuration need to be manually synced between both files. Consider using mergeConfig from vitest/config to extend vite.config.ts, keeping only test-specific configuration in vitest.config.ts.
| import { NetworkProvider } from "features/network" | ||
| import { Web3authProvider } from "features/accounts" | ||
|
|
||
| const queryClient = new QueryClient() |
There was a problem hiding this comment.
The QueryClient is instantiated without any configuration options. Consider adding default options for better production behavior, such as retry logic, staleTime, and gcTime settings. For example, you might want to disable retries for mutations or set reasonable cache times for queries.
This pull request updates the codebase to use the latest
@tanstack/react-queryAPI and improves dependency management. The main changes include migrating all usages ofreact-queryto@tanstack/react-query, refactoring mutation and query hooks to the new API style, and updating several dependencies for improved stability and compatibility.React Query migration and API refactoring:
react-queryhave been replaced with@tanstack/react-queryacross the codebase, ensuring consistency and future compatibility. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15] [16] [17]mutationFn,onSuccess,onSettled, etc.), replacing the previous positional arguments style. This improves readability and aligns with the latest best practices. [1] F306f4a9L8R8, [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15] [16] [17]Dependency updates and management:
package.json, including@web3auth/modal,core-js,formik,react-hook-form,react-router,typescript,validator, and testing/dev tools. This ensures improved security, stability, and compatibility.diffand reorganized dev dependencies for better build and testing support.Code quality improvements:
{ queryKey: [...] }), which is more robust and less error-prone. (F306f4a9L8R8, [1] [2] [3] [4] [5] [6] [7]cubePngto use a direct asset import, improving clarity and maintainability.