Merge pull request #380 from curvefi/tanstack-dev-lint

chore: react-query devtools and feature-sliced eslint rules

.eslintrc.js

@@ -4,7 +4,33 @@ module.exports = {
   extends: ['custom'],
   settings: {
     next: {
-      rootDir: ['apps/*/', 'packages/ui/*/', 'packages/onboard-helpers/*/'],
-    },
+      rootDir: ['apps/*/', 'packages/ui/*/', 'packages/onboard-helpers/*/']
+    }
   },
+  overrides: [
+    // enforce Feature Sliced rules for loan app (except 'pages' folder) and curve-lib
+    {
+      files: [
+        'apps/loan/src/{app,widgets,features,entities,shared}/**/*.{ts,tsx}',
+        'packages/curve-lib/src/shared/**/*.ts'
+      ],
+      rules: {
+        'import/order': 'error', // feature-sliced/import-order
+        'import/no-internal-modules': 'error', // feature-sliced/public-api
+        'boundaries/element-types': 'error' // feature-sliced/layers-slices
+      }
+    },
+    // warn about Feature Sliced rules for main and lend apps, plus loan 'pages' folder
+    {
+      files: [
+        'apps/{main,lend}/src/{app,pages,widgets,features,entities,shared}/**/*.{ts,tsx}',
+        'apps/loan/src/pages/**/*.{ts,tsx}'
+      ],
+      rules: {
+        'import/order': 'warn', // feature-sliced/import-order
+        'import/no-internal-modules': 'warn', // feature-sliced/public-api
+        'boundaries/element-types': 'warn' // feature-sliced/layers-slices
+      }
+    }
+  ]
 }

apps/main/package.json

@@ -23,9 +23,6 @@
     "@hookform/resolvers": "^3.9.0",
     "@lingui/react": "^4.6.0",
     "@supercharge/promise-pool": "^2.3.2",
-    "@tanstack/query-sync-storage-persister": "^5.53.1",
-    "@tanstack/react-query": "^5.53.1",
-    "@tanstack/react-query-persist-client": "^5.53.1",
     "bignumber.js": "^9.0.1",
     "cross-fetch": "^3.1.5",
     "curve-lib": "*",

packages/curve-lib/package.json

@@ -9,6 +9,10 @@
     "lint": "eslint \"**/*.ts*\""
   },
   "dependencies": {
+    "@tanstack/query-sync-storage-persister": "^5.59.0",
+    "@tanstack/react-query": "^5.59.0",
+    "@tanstack/react-query-devtools": "^5.59.0",
+    "@tanstack/react-query-persist-client": "^5.59.0",
     "ethers": "^6.11.0"
   },
   "devDependencies": {

packages/curve-lib/src/shared/api/cache.ts

@@ -1,5 +1,5 @@
-import { logError, logMutation, logSuccess } from '@/shared/lib/logging';
 import { MutationCache, QueryCache, type Mutation } from '@tanstack/react-query'
+import { logError, logMutation, logSuccess } from '@/shared/lib/logging';
 
 
 export const queryCache = new QueryCache({

packages/curve-lib/src/shared/api/query-client.ts

@@ -1,6 +1,6 @@
-import { mutationCache, queryCache } from './cache'
 import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'
 import { QueryClient } from '@tanstack/react-query'
+import { mutationCache, queryCache } from './cache'
 
 export const queryClient = new QueryClient({
   defaultOptions: {},

packages/curve-lib/src/shared/lib/validation/enforce-extension.ts

@@ -1,5 +1,5 @@
-import { isAddress, zeroAddress } from 'viem'
 import isDecimal from 'validator/lib/isDecimal'
+import { isAddress, zeroAddress } from 'viem'
 
 export const extendEnforce = (enforce: typeof import('vest').enforce) =>
   enforce.extend({

packages/curve-lib/src/shared/lib/validation/lib.ts

@@ -1,6 +1,6 @@
-import { type ValidatedData } from './types'
 import { create, enforce, only, type Suite } from 'vest'
 import { extendEnforce } from './enforce-extension'
+import { type ValidatedData } from './types'
 
 extendEnforce(enforce)
 

packages/eslint-config-custom/index.js

@@ -1,10 +1,13 @@
 module.exports = {
-  extends: ['next', 'turbo', 'prettier'],
+  extends: ['next', 'turbo', 'prettier', "@feature-sliced"],
   plugins: ['@tanstack/query'],
   rules: {
     '@next/next/no-img-element': 'off',
     '@next/next/no-html-link-for-pages': 'off',
     'react/jsx-key': 'off',
+    'import/order': 'off', // feature-sliced/import-order
+    'import/no-internal-modules': 'off', // feature-sliced/public-api
+    'boundaries/element-types': 'off' // feature-sliced/layers-slices
   },
   parser: '@typescript-eslint/parser',
   settings: {

packages/eslint-config-custom/package.json

@@ -5,14 +5,17 @@
   "license": "MIT",
   "private": true,
   "devDependencies": {
-    "@tanstack/eslint-plugin-query": "^5.56.1",
+    "@feature-sliced/eslint-config": "^0.1.1",
+    "@tanstack/eslint-plugin-query": "^5.59.1",
     "@typescript-eslint/eslint-plugin": "^8.6.0",
     "@typescript-eslint/parser": "^8.6.0",
     "eslint": "^8.57.1",
     "eslint-config-next": "^14.2.11",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-turbo": "^2.1.2",
     "eslint-import-resolver-typescript": "^3.6.3",
+    "eslint-plugin-boundaries": "^4.2.2",
+    "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-react": "7.36.1",
     "prettier-eslint": "^16.3.0"
   }

packages/ui/src/QueryProvider/index.tsx

@@ -1,6 +1,7 @@
-import { type QueryClient, QueryClientProvider } from "@tanstack/react-query"
-import { type Persister, PersistQueryClientProvider } from "@tanstack/react-query-persist-client"
-import type { ReactNode } from "react"
+import { type QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import { type Persister, PersistQueryClientProvider } from '@tanstack/react-query-persist-client'
+import React, { ReactNode } from 'react'
 
 type QueryProviderWrapperProps = {
   children: ReactNode
@@ -9,12 +10,13 @@ type QueryProviderWrapperProps = {
 }
 
 export function QueryProvider({ children, persister, queryClient }: QueryProviderWrapperProps) {
+  const content = (<>{children}<ReactQueryDevtools /></>)
   if (persister) {
     return (
       <PersistQueryClientProvider client={queryClient} persistOptions={{ persister }}>
-        {children}
+        {content}
       </PersistQueryClientProvider>
     )
   }
-  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  return <QueryClientProvider client={queryClient}>{content}</QueryClientProvider>
 }